/* Bracket chart styles, shared by the desktop EXE and the web host.
   Extracted from BarStarTournament.UI/wwwroot/css/app.css (the bracket
   cluster + the theme variables those rules reference). Served by this RCL
   at _content/BarStarTournament.UI.Shared/brackets.css. */

:root {
    --bg: #1a1d23;
    --panel: #242830;
    --panel-2: #2d323c;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --accent: #4f8aff;
    --accent-hover: #3a73e0;
    --danger: #ef4444;
    --success: #22c55e;
    --border: #3a3f4b;
}

.bracket-host {
    /* --zoom (set inline by BracketSvg) magnifies the chart: at 1 this is 100%
       (unchanged); >1 grows the host past its wrapper so an overflow:auto wrapper
       shows scrollbars and the SVG inside scales up to fill it. */
    width: calc(100% * var(--zoom, 1));
    height: calc(100% * var(--zoom, 1));
}
.bracket-svg {
    display: block;
    width: 100%;
    height: 100%;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
}
.bracket-match {
    cursor: default;
}
.bracket-match.playable { cursor: pointer; }
.bracket-match.playable:hover .bracket-cell { stroke: var(--accent); stroke-width: 2; }

/* Per-seat hover/double-click zone (mirrors app.css — keep both in sync). The
   transparent hit rect spans the seat's full half so the WHOLE half is
   double-clickable, and hovering a seat in a ready match gently pulses a soft
   highlight behind that one name. Pulse animates the rect opacity only, never
   the text transform (names use scaleX). */
.seat-hit { fill: transparent; pointer-events: all; }
.bracket-match.playable .bracket-seat-zone { cursor: pointer; }
.bracket-match.playable .bracket-seat-zone:hover .seat-hit {
    fill: var(--accent);
    animation: seat-pulse 1.2s ease-in-out infinite;
}
@keyframes seat-pulse {
    0%, 100% { opacity: 0.12; }
    50%      { opacity: 0.30; }
}

.bracket-cell {
    fill: var(--panel);
    stroke: var(--border);
    stroke-width: 1;
}
.bracket-match.pending  .bracket-cell { fill: var(--panel); opacity: 0.7; }
.bracket-match.playable .bracket-cell { fill: var(--panel-2); }
.bracket-match.finished .bracket-cell { fill: #1f2530; }
.bracket-match.match-waiting .bracket-cell { fill: #3c341c; }
.bracket-match.match-waiting .bracket-seat { fill: #f1da8e; }

.bracket-divider {
    stroke: var(--border);
    stroke-width: 1;
}

.bracket-seat {
    fill: var(--text);
    pointer-events: auto;
    user-select: none;
    cursor: pointer;
    transform: scaleX(0.64);
    transform-box: fill-box;
    transform-origin: left center;
}
.bracket-seat.seat-empty  { fill: var(--muted); font-style: italic; }
.bracket-seat.seat-bye    { fill: var(--muted); }
.bracket-seat.seat-winner { fill: var(--success); font-weight: 600; }
.bracket-seat.seat-loser  { fill: var(--muted); text-decoration: line-through; }

.bracket-match.match-on-table .bracket-cell {
    stroke: var(--table-color, #fcd34d);
    stroke-width: 2;
}
.bracket-match.match-on-table .bracket-seat {
    fill: var(--table-color, #fde68a);
    font-weight: 700;
}

.bracket-slot-tag {
    fill: var(--muted);
    font-size: 8px;
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
}
.bracket-rank-tag {
    fill: #fcd34d;
    font-size: 8px;
    font-style: italic;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}
.bracket-from-tag {
    fill: #888;
    font-size: 8px;
    font-style: italic;
    pointer-events: none;
    user-select: none;
}

.bracket-trophy .trophy-cell {
    fill: #1a1a2e;
    stroke: #fcd34d;
    stroke-width: 1.6;
}
.bracket-trophy .trophy-label {
    fill: #fcd34d;
    font-size: 12px;
    font-style: italic;
    font-weight: 700;
}

.bracket-connector {
    stroke: #2a8f37;
    stroke-width: 1.2;
    fill: none;
}
.bracket-connector.winner-w   { stroke: #2a8f37; }
.bracket-connector.winner-l   { stroke: #2a8f37; }
.bracket-connector.loser-drop { stroke: #8f6a2a; stroke-dasharray: 4 3; }
.bracket-connector.to-gf      { stroke: #fcd34d; stroke-width: 1.6; }

/* ===== Draw Peas animation (BracketDrawAnimation), shared with the EXE ===== */
.draw-overlay {
    /* Fills the same box as the bracket SVG; both share one viewBox +
       preserveAspectRatio, so the peas scale and align with the names with
       no offset of their own. */
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
}
.draw-overlay.fading,
.draw-overlay.done {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.draw-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* --- Bottle --- */
.pea-bottle {
    /* Repeats once per pea (period == PerPeaStaggerMs in
       BracketDrawAnimation): the bottle tips to pour a pea, then rocks back
       upright to "re-pick" the next one. Keep this duration in sync with
       PerPeaStaggerMs if that constant changes. */
    animation: bottle-bob 2200ms ease-in-out infinite;
}
.draw-overlay.untilting .pea-bottle {
    animation: bottle-untilt 500ms cubic-bezier(0.55, 0, 0.45, 1) forwards;
}
.bottle-body {
    fill: #4ade80;
    stroke: #064e3b;
    stroke-width: 1.5;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.4));
}
.bottle-mouth {
    fill: #052e16;
    stroke: #064e3b;
    stroke-width: 1;
}
.bottle-highlight {
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 4;
    stroke-linecap: round;
}
.bottle-shadow {
    fill: rgba(0, 0, 0, 0.25);
    filter: blur(2px);
}
.bottle-label {
    fill: #fef9c3;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* One flip per pea: tip clockwise to pour, then rock back upright. */
@keyframes bottle-bob {
    0%   { transform: rotate(8deg); }
    18%  { transform: rotate(46deg); }     /* tip & pour the pea */
    40%  { transform: rotate(8deg); }      /* rock upright — "re-pick" */
    100% { transform: rotate(8deg); }      /* hold until the next pea */
}
@keyframes bottle-untilt {
    0%   { transform: rotate(8deg); }
    100% { transform: rotate(0deg); }
}

/* --- Peas (garden-pea look) --- */
.pea {
    opacity: 0;
    transform: translate(var(--start-x), var(--start-y)) scale(0.6);
    animation: pea-drop 2000ms cubic-bezier(0.36, 0.0, 0.46, 1.0) forwards;
}
.pea-name-text {
    fill: var(--text);
    font-size: 11px;
    font-weight: 600;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.7);
    stroke-width: 3;
}

@keyframes pea-drop {
    0% {
        opacity: 0;
        transform: translate(var(--start-x), var(--start-y)) scale(0.5);
    }
    8% {
        opacity: 1;
        transform: translate(var(--start-x), var(--start-y)) scale(0.85);
    }
    40% {
        opacity: 1;
        transform: translate(calc((var(--start-x) + var(--end-x)) / 2), var(--peak-y)) scale(1.0);
    }
    75% {
        opacity: 1;
        transform: translate(var(--end-x), var(--end-y)) scale(1.05);
    }
    82% {
        opacity: 1;
        transform: translate(var(--end-x), var(--end-y)) scale(1.0);
    }
    100% {
        opacity: 0;     /* fade out after the player's name has been "delivered" into the slot */
        transform: translate(var(--end-x), var(--end-y)) scale(0.85);
    }
}