/* ============================================================================
   US OPEN 2026 — MATCH PANEL, styles
   ============================================================================
   ONE stylesheet for ONE component, used by the home page and the matches
   page. Edit it here and both change; there is deliberately no second copy to
   keep in step.

   Paired with 02. data/uso-match-panel.js — that file owns the markup, so the
   class names below are the contract between the two. Renaming one without
   the other is the way this breaks.
   ────────────────────────────────────────────────────────────────────────────
   ANYTHING THAT OPENS THE PANEL carries data-mid. The cursor rule is here
   rather than on each page's own row class, so a new surface gets the
   affordance for free the moment it opts in.
   ========================================================================== */
[data-mid]{cursor:pointer;}

/* ── The state pills ──────────────────────────────────────────────────────
   FIVE states, ONE box. Live, Suspended, Complete, Finished and Upcoming all
   share the same size, padding, border width and line height, and differ only
   in colour and border style. That is the whole point of the shared rule.

   ⚠️ FINISHED USED TO BE PLAIN TEXT at a different size, which meant the
   round and "Best of 5" underneath sat at a different height on a finished
   match than on a live one. Stepping through a round with the chevrons, the
   type below jumped every time you crossed from a played match to one still
   on court — the one thing the top-anchored panel exists to prevent.

   A transparent background and a grey border make it hollow: present, clearly
   the same object as the others, and quiet, because a finished match is the
   least urgent of them. Every pill carries a border — the solid ones a border
   the colour of their own fill — so all five measure identically to the pixel
   and nothing below can move.

   The panel carries its OWN pills rather than borrowing .lc-live / .lc-susp
   from the home page's stylesheet. Those exist only on index.html, so a panel
   opened from the matches page would have rendered an unstyled word where the
   status should be — a component that only works on the page it was born on
   is not a shared component. */
.mp-live,.mp-susp,.mp-done,.mp-when,.mp-soon{
 display:inline-block;
 font-size:12px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
 line-height:1.25;white-space:nowrap;
 padding:4px 11px;border-radius:999px;border:1.5px solid transparent;}

/* Red pulses because a static pill saying "Live" is a claim and a pulsing one
   is evidence. */
.mp-live{background:var(--red);border-color:var(--red);color:#fff;
 animation:mpLive 1.5s ease-out infinite;}
@keyframes mpLive{
 0%  {box-shadow:0 0 0 0 rgba(224,20,43,.9);}
 60% {box-shadow:0 0 0 10px rgba(224,20,43,0);}
 100%{box-shadow:0 0 0 0 rgba(224,20,43,0);}
}
/* Amber does not move at all: a suspension is the opposite of "happening
   now", so it borrows neither the colour nor the motion. */
.mp-susp{background:rgba(231,198,107,.18);border-color:rgba(231,198,107,.5);
 color:var(--gold);}
/* Just finished — within the ten minutes the rail holds it for. Solid gold and
   completely still, the same pill the card behind it wears, so a match ending
   under an open panel changes state without changing identity. */
.mp-done{background:var(--gold);border-color:var(--gold);color:#0a1c38;}
/* Finished a while ago. Hollow — quiet, but exactly the same size. */
.mp-when{background:transparent;border-color:var(--line);color:var(--mut);}
/* Not played yet. Hollow like Finished, but DASHED — because two hollow grey
   pills reading "Finished" and "Upcoming" would look identical at a glance,
   and these are opposite ends of a match's life. Dashed is already this
   site's mark for provisional: the qualifying group on the matches page uses
   a dashed rule for the same reason. */
.mp-soon{background:transparent;border-color:rgba(159,179,212,.45);
 border-style:dashed;color:var(--soft);}
@media(prefers-reduced-motion:reduce){
 .mp-live{animation:none;}
}

/* ── Centred, on every screen ─────────────────────────────────────────────
   It used to dock to the bottom edge on a phone as a sheet. That reads as a
   drawer attached to the page, and a drawer invites a drag it does not
   support. Centred with air on all four sides reads as what it is: a thing
   ON TOP of the page, complete in itself, with the page dimmed behind it.

   ⚠️ dvh, not vh. On mobile browsers vh is the height WITHOUT the address
   bar, so a 100vh panel is taller than the visible window and its bottom edge
   — the close button's twin, and often the buttons — sits under the chrome.
   dvh tracks the real viewport as the bar hides and shows. The vh line stays
   underneath it for anything too old to know dvh. */
/* ⚠️ PINNED TO THE TOP, NOT CENTRED — and this is about the chevrons.
   Vertically centred, the panel grows in BOTH directions as its content
   changes: a match with four sets is taller than one with two, so stepping
   from one to the next moved the whole panel up or down, and the prev/next
   buttons slid out from under the cursor. You had to re-aim for every match.

   Anchored 50px from the top, the header, the chevrons and the faces are at
   the same coordinates for every match on the site. Extra sets, a longer
   situation band, a fourth stat row — all of it grows downward, into space
   nobody is pointing at.

   ⚠️ align-items:flex-start is what does it. Reinstating `center` for
   "balance" would silently bring the moving target back. */
.mp-scrim{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;
 justify-content:center;padding:50px 20px 20px;background:rgba(3,10,22,.72);
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 opacity:0;animation:mpFade .18s ease-out forwards;
 overflow:hidden;}
.mp-scrim[hidden]{display:none;}
@keyframes mpFade{to{opacity:1;}}
.mp{position:relative;width:100%;max-width:560px;
 /* The 50 above plus the 20 below. Past that the panel scrolls inside itself
    rather than running off the bottom of the window. */
 max-height:calc(100vh - 70px);
 max-height:calc(100dvh - 70px);
 overflow-y:auto;-webkit-overflow-scrolling:touch;
 /* ⚠️ THE PANEL SCROLLS, THE PAGE DOES NOT. overscroll-behavior stops the
    scroll "chaining" out to the document when you hit the top or bottom of
    the panel — without it, flicking inside a panel that has run out of
    content starts scrolling the list behind it, which is how a reader loses
    their place. The body lock in the JS handles the rest. */
 overscroll-behavior:contain;
 background:#0b1f3f;border:1px solid var(--line);border-radius:18px;
 /* ⚠️ 12px TOP, matching .mp-x's `top:12px`. The nav row is the first thing
    in the flow and its buttons are the same 40px as the close, so an equal
    top inset puts all three circles on one centre line. Change this and the
    close button drifts out of alignment with the chevrons. */
 padding:12px 22px 20px;box-shadow:0 30px 70px rgba(0,0,0,.55);
 /* ── ONE SET OF COLUMNS FOR THE WHOLE PANEL ─────────────────────────────
    --face  the portrait, and the widest a name is allowed to be
    --mid   the centre column, shared by the scoreboard and the stats table
    --gutter the gap either side of it, likewise shared

    ⚠️ --mid IS FIXED, NOT auto. Both grids used `1fr auto 1fr`, so the middle
    track was sized by whatever sat in it — and in the stats table that is the
    LABEL, which changes on every row. "AGE" is narrow, so its 1fr columns
    grew and pushed the two numbers outward; "WORLD RANK" is wide, so its
    columns shrank and pulled them in. The values wobbled left and right down
    the table and never lined up with the players above them.
    A fixed centre makes every 1fr column identical, on every row and in both
    grids, so a value sits exactly under the face it belongs to. */
 --face:127px;
 --mid:96px;
 --gutter:10px;}

/* ⚠️ THE ENTRY ANIMATION IS OPT-IN, VIA A CLASS THE JS ADDS ON OPEN AND
   STRIPS AGAIN. It used to sit on .mp permanently with `animation:none`
   layered over it during a drag or a swap — and removing that override at the
   end of a swap RESTARTS the animation, because CSS replays an animation the
   moment it becomes active again. So every step between matches finished with
   the card scaling .985 → 1: the bounce. Moving to a class means it can only
   ever run on the way in.

   The starting transform lives in the keyframes, not on .mp, or the panel
   would sit permanently offset and shrunk whenever the class is absent. */
@keyframes mpRise{
 from{transform:translateY(8px) scale(.985);}
 to  {transform:none;}
}
.mp.mp-in{animation:mpRise .2s ease-out forwards;}
/* Belt and braces: a drag or a swap owns `transform` outright, and an active
   animation would beat the inline style the JS is setting. */
.mp.mp-drag,.mp.mp-swap{animation:none;}
/* The card follows the thumb sideways; it must not also try to scroll
   sideways underneath itself. */
.mp{touch-action:pan-y;}
@media(prefers-reduced-motion:reduce){
 .mp-scrim,.mp,.mp.mp-in{animation:none;opacity:1;transform:none;}
}
/* ── Close ────────────────────────────────────────────────────────────────
   Bigger and heavier. It is the only way out of a panel that now has no
   footer, so it should not be the quietest thing on screen. The mark is drawn
   as two SVG lines rather than set as ✕ — font-weight does nothing to a
   symbol glyph, so stroke-width is the only honest way to make it bolder. */
.mp-x{position:absolute;top:12px;right:12px;width:40px;height:40px;
 display:flex;align-items:center;justify-content:center;
 background:transparent;border:1.5px solid var(--line);border-radius:999px;
 color:var(--mut);cursor:pointer;font:inherit;transition:.15s;padding:0;}
.mp-x svg{width:19px;height:19px;fill:none;stroke:currentColor;
 stroke-width:2.6;stroke-linecap:round;display:block;}
.mp-x:hover{border-color:var(--gold);color:var(--gold);
 background:rgba(231,198,107,.12);}
.mp-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ── The title block ──────────────────────────────────────────────────────
   A centred stack: state, then round, then format.

   It was a row — round hard left, state hard right — which is the grammar of
   the little card this grew from. At card width that works; at 560px it puts
   the two headline facts at opposite ends of a line with the whole panel
   between them, and the eye tracks sideways before it can begin on the match.

   Stacked, they read in the order you want them: is it on → which round →
   how long. Symmetrical padding keeps the stack optically centred in spite of
   the close button sitting in the corner. */
/* The 46px either side clears the close button. Needed even now that the nav
   row usually sits above: a single-match panel has no nav row, and then this
   block is the thing level with the X. */
.mp-head{display:flex;flex-direction:column;align-items:center;gap:7px;
 padding:0 46px;margin-bottom:3px;text-align:center;}
.mp-round{font-size:18px;font-weight:900;letter-spacing:.1em;
 text-transform:uppercase;color:#fff;line-height:1.2;}
/* Format and time, stacked. The time used to ride on the same line after a
   middot — fine for "Best of 5 · Mon, Aug 31", cramped for "Best of 5 · from
   3:02 AM, Fri, Sep 4", which wrapped and made the header a different height
   on those matches. Two lines, always both present, always the same height.
   The pair is tightened against the 7px the header uses between its parts,
   because these two belong together in a way the round and the pill do not. */
.mp-at{font-size:9px;font-weight:800;letter-spacing:.1em;
 text-transform:uppercase;color:var(--soft);line-height:1.2;}
/* The negative margin belongs to whichever line is SECOND — it tightens the
   pair against the 7px the header uses between its parts, because these two
   belong together in a way the round and the pill do not. When the order
   swapped, this had to swap with it. */
.mp-bo{margin-top:-3px;font-size:9px;font-weight:800;letter-spacing:.1em;
 text-transform:uppercase;color:var(--soft);line-height:1.2;}

/* ── Prev / next ──────────────────────────────────────────────────────────
   The first thing in the panel, above the match itself. That order is not
   decoration: the chevrons belong to the SET of matches and hold still
   between them, while everything below changes on every step. Above, they
   read as a fixed frame; below, they read as part of the match.

   ⚠️ CENTRED, NOT SPACE-BETWEEN. Pushed to the panel's edges they were 400px
   apart — two separate buttons rather than one control, and a long reach from
   one to the other when you are stepping through a round. Grouped in the
   middle they are a single unit under one hand, and both are the same 40px
   circle as the close button so the panel has one size of round button.

   Disabled rather than looping at the ends. On the matches page the set is
   127 matches, and silently reappearing at the first one reads as a fault. */
.mp-nav{display:flex;align-items:center;justify-content:center;gap:16px;
 margin:0 0 14px;}
.mp-step{width:40px;height:40px;flex:none;display:flex;align-items:center;
 justify-content:center;font:inherit;cursor:pointer;background:transparent;
 border:1.5px solid rgba(231,198,107,.35);border-radius:999px;
 color:var(--gold);transition:.15s;padding:0;}
.mp-step svg{width:18px;height:18px;fill:none;stroke:currentColor;
 stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:block;}
.mp-step:hover:not([disabled]){background:rgba(231,198,107,.15);
 border-color:var(--gold);}
.mp-step:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* Kept in place, not hidden. An arrow that vanishes at the end of the list
   shifts the label sideways and makes the row twitch on every step. */
.mp-step[disabled]{opacity:.28;cursor:default;border-color:var(--line);
 color:var(--soft);}
/* What the chevrons do, and how far through you are — two questions, so two
   lines rather than one run-on phrase. */
/* The gap does the moving. The row is centre-aligned, so widening it from 2px
   to 12px lifts "Next match" 5px and drops the count 5px about a fixed middle
   — no margins fighting each other, and the row's own height is unchanged
   where it matters because the 40px chevrons still set it. */
.mp-lbl{display:flex;flex-direction:column;align-items:center;gap:12px;
 min-width:78px;}
.mp-lbl b{font-size:9.5px;font-weight:900;letter-spacing:.12em;
 text-transform:uppercase;color:var(--mut);line-height:1;white-space:nowrap;}
/* Gold: it is the only changing number in the header, and the one thing that
   tells you the chevrons have somewhere to go. */
.mp-count{font-size:9px;font-weight:800;letter-spacing:.12em;
 text-transform:uppercase;color:var(--gold);white-space:nowrap;line-height:1;}

/* ── The two players ──────────────────────────────────────────────────────
   A three-column grid, not two faces with a "v" dropped between them: the
   middle column is a real column that owns the sets, so the score sits on the
   centre line whatever the names either side do. Two flex halves would let a
   long name shove the score off-axis. */
/* ⚠️ EXPLICIT GRID AREAS, not auto-placement. Some cells are absent — a match
   with no sets yet, a finished match with no serve tags — and auto-flow would
   shuffle whatever remained into the gaps, putting the game score under a
   player. Naming every cell means a missing one just leaves a hole. */
.mp-duel{display:grid;grid-template-columns:1fr var(--mid) 1fr;
 gap:12px var(--gutter);}
.mp-p{grid-row:1;align-self:start;}
.mp-p.a{grid-column:1;}
.mp-p.b{grid-column:3;}

/* ── The serve lamps ──────────────────────────────────────────────────────
   One either side of the game score, on the same line — the shape of every
   scoreboard ever built. BOTH are always printed while the match is being
   played; the idle one drops to 15%.

   Printing only the active one would move this row on every changeover, and
   a thing that appears is read as new information rather than as a state
   changing. Two fixed lamps that swap which is lit say the same thing without
   the layout twitching, and you can see at a glance that there are two sides
   to be on. */
/* align-self:end puts the lamp on the same line as the DIGITS. Centred in the
   row it floated between the "GAME" label and the numbers, level with
   neither. The row's bottom edge is the bottom of the points boxes, so both
   sit on one line. */
.mp-serve{grid-row:2;align-self:end;justify-self:center;max-width:100%;
 font-size:8.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
 text-align:center;color:#0a1c38;background:var(--gold);
 border-radius:999px;padding:5px 11px;white-space:nowrap;
 transition:opacity .18s;}
.mp-serve.top{grid-column:1;}
.mp-serve.bottom{grid-column:3;}
.mp-serve.off{opacity:.15;}
.mp-p{display:flex;flex-direction:column;align-items:center;text-align:center;
 min-width:0;}
/* The wrapper exists so the seed badge can sit ON the portrait without being
   clipped: .mp-face is a circle made with overflow:hidden, and a badge inside
   it would be cut off at exactly the corner it needs. Same size as the face,
   so the badge positions against the picture rather than the column. */
.mp-fw{position:relative;display:inline-block;line-height:0;margin-bottom:9px;}
/* The portrait is a link to the profile. The ring picks up gold on hover, the
   same signal the name below it gives — one identity, one behaviour. */
a.mp-fw .mp-face{transition:border-color .15s;}
a.mp-fw:hover .mp-face{border-color:var(--gold);}
/* ── The seed, on the picture ─────────────────────────────────────────────
   Where a bracket puts it. It used to be a "Seed 2" chip under the name,
   competing with the Winner chip for one slot — so a seeded player who won
   lost their seed. On the portrait the two never meet.

   Placed on the circle's upper-left arc: the badge's centre sits roughly on
   the 45° point of a circle this size, so it straddles the edge instead of
   floating in the transparent corner of the box. The navy ring punches it out
   of the photograph. */
.mp-sd{position:absolute;top:2px;left:2px;z-index:2;
 min-width:28px;height:28px;padding:0 6px;
 display:flex;align-items:center;justify-content:center;
 background:var(--gold);color:#0a1c38;border:2.5px solid #0b1f3f;
 border-radius:999px;font-size:12px;font-weight:900;line-height:1;}
.mp-face{position:relative;display:block;width:var(--face);height:var(--face);border-radius:50%;
 overflow:hidden;background:rgba(255,255,255,.06);
 border:2px solid var(--line);flex:none;
 display:flex;align-items:center;justify-content:center;}
/* Monogram is the BASE state, photo goes over it — so a portrait that 404s
   degrades to initials instead of a hole. Same pattern as the players page. */
.mp-mono{font-size:37px;font-weight:900;color:var(--soft);letter-spacing:.02em;}
.mp-face img{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:center 18%;}
.mp-p.serving .mp-face{border-color:var(--gold);}
/* ── The name, stacked ────────────────────────────────────────────────────
   Given name light and small over family name heavy and large. The surname
   is what you actually scan for, so it gets the weight; the given name is
   there to disambiguate the Cerúndolos and the Zverevs.

   Both lines break at the same place on both sides of the panel, which a
   free-wrapping single line did not — one side breaking after "Giovanni" and
   the other not breaking at all pushed the two faces out of alignment. */
/* ⚠️ NEVER WIDER THAN THE PORTRAIT. The column is far wider than the circle,
   so a long name spread out past it and the block stopped reading as one
   object stacked under one picture. Capped at --face, the name is always
   within the silhouette above it.
   The given name ellipses (one word, nothing to gain from wrapping); the
   surname WRAPS, because "Mpetshi Perricard" cut to "Mpetshi Perri…" is worse
   than two lines. */
.mp-nm{display:block;max-width:var(--face);margin:0 auto;line-height:1.2;}
/* Same size AND same colour as the surname — one name, set as one thing.
   Weight is now the only thing separating the two lines, which is enough:
   "Carlos" at 700 reads as the lead-in, "Alcaraz" at 900 as the name you were
   scanning for. */
.mp-first{display:block;font-size:15px;font-weight:700;color:#fff;
 letter-spacing:.01em;line-height:1.15;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-last{display:block;font-size:15px;font-weight:900;color:#fff;
 line-height:1.2;margin-top:1px;overflow-wrap:break-word;}
/* ⚠️ Colour lives on the two inner spans, so every state has to reach them.
   A rule on .mp-nm alone would set a colour that .mp-first and .mp-last then
   override with their own — the same specificity trap that swallowed the
   gold hover on the matches page. */
a.mp-nm:hover .mp-first,
a.mp-nm:hover .mp-last{color:var(--gold);}
/* ── The flag ─────────────────────────────────────────────────────────────
   Double the size it was, and ABOVE the country's name rather than beside it.

   At 20x14, sitting inline in front of the word, it read as a bullet point —
   punctuation for the text rather than a thing in its own right. It is not:
   who somebody is playing for is one of the first things you look for on a
   scoreboard, and a flag is read faster than any word.

   Stacking it is what lets it be that size. Kept inline it would have towered
   over 12px type and dragged the row's baseline about; centred on its own line
   with the name underneath, the cell reads as one object and the row simply
   gets taller. */
.mp-fl{display:block;width:40px;height:28px;object-fit:cover;border-radius:3px;
 margin:0 auto 5px;background:rgba(255,255,255,.08);}
/* The country's name, under its flag. Clipping belongs to the text, not to
   the picture above it. */
.mp-cn{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ══ THE SCORE — ONE AXIS, NOT TWO ═══════════════════════════════════════
   Every block obeys the same rule: LEFT is the left player, RIGHT is the
   right player, everywhere. The only thing running downward is TIME — and it
   runs upward from the bottom, because the bottom is where the live number
   is. See .mp-sets.

        ( photo )    6 │ 4      ( photo )        set 1
         Carlos      3 │ 6       Novak           set 2
        ALCARAZ      7 │ 5      DJOKOVIC         set 3
        [Seed 2]     4 │ 3      [Seed 7]         set 4, in progress
                   ─────────
       TO SERVE     GAME       to serve          <- idle side at 15%
                   40 │ 30
      ──────────────────────────────────
                   DEUCE                         <- full width, closes the unit
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠️ BOTTOM-ALIGNED, so the stack grows UPWARD. A best-of-five is anywhere
   between one set and five; growing downward, the game score below would sit
   at a different height in every match and drop a line mid-match as each set
   closed. Anchored to the bottom, the live row never moves and the finished
   sets pile up above it. */
.mp-sets{grid-row:1;grid-column:2;align-self:end;justify-self:center;
 display:flex;flex-direction:column;align-items:center;gap:4px;}
/* ── The "v" ──────────────────────────────────────────────────────────────
   The stand-in for a scoreline that does not exist: a match not played yet,
   or one settled by walkover with no games on the board. It IS the middle
   column in those cases. Lower-case, because "V" shouts and "v" is how a
   fixture is written.

   ⚠️ justify-self:center, OR IT SITS LEFT. A grid item defaults to
   justify-self:stretch, so this span filled the whole --mid track and the one
   glyph in it settled against the track's left edge — a couple of dozen
   pixels off the panel's centre line, on every upcoming match and every
   walkover. .mp-sets centres itself the same way; this was the one cell in
   the middle column that did not.

   ⚠️ AND IT IS ONE RULE NOW. The type lived in one place and the grid
   placement in another, which is exactly how a class ends up centred
   according to one half of itself and not the other. */
.mp-vs{grid-row:1;grid-column:2;align-self:end;
 justify-self:center;text-align:center;
 font-size:30px;font-weight:900;line-height:1;letter-spacing:0;
 color:var(--soft);opacity:.5;padding-bottom:6px;}
/* ONE SET = ONE ROW. Two numbers, left player then right player. The centre
   line is a real element rather than a gap so the two columns cannot drift
   apart as digits change width. */
/* ⚠️ CENTRED, AND THE SAME WIDTH AS THE GAME ROW BELOW. The set rows were
   left-aligned inside a column sized by the wider points row underneath, so
   every finished set sat shoved to the left of the panel's centre line while
   the live 40-30 sat in the middle of it — two scores on two different axes.

   Matching min-width and gap to .mp-pts makes both rows measure the same, so
   the digits line up in columns and the whole block centres as one object. */
.mp-set{display:flex;align-items:center;justify-content:center;gap:5px;}
.mp-set i{display:block;min-width:30px;padding:2px 0;font-style:normal;
 font-size:13px;font-weight:900;text-align:center;color:var(--mut);
 background:rgba(255,255,255,.05);border:1px solid var(--line);
 border-radius:4px;}
.mp-set i.won{color:var(--gold);border-color:rgba(231,198,107,.45);}
.mp-set i.now{border-color:var(--red);color:#fff;}
/* ── PROVISIONAL: the match is over, this set's last game is not confirmed ──
   Dashed, because dashed already means "not settled yet" everywhere on this
   site — it is the upcoming-match treatment. Deliberately NOT gold and NOT
   red: gold would crown a set nobody has won, red would say still playing.
   It reads as a number the page is not standing behind, which is exactly
   what it is, and it disappears the moment results confirms the real one. */
.mp-set i.pend{border-style:dashed;border-color:rgba(159,179,212,.5);
 color:var(--mut);background:transparent;}
/* The hairline between the two numbers. Quiet — it separates, it does not
   announce. */
.mp-set s{display:block;width:1px;height:11px;background:var(--line);
 flex:none;text-decoration:none;}

/* The game in play, below a rule, because it is a different kind of number:
   the sets above are settled history, this one changes every rally. */
.mp-now{grid-row:2;grid-column:2;
 padding-top:7px;border-top:1px solid var(--line);
 display:flex;flex-direction:column;align-items:center;gap:4px;}
/* ── What the bottom two numbers ARE ──────────────────────────────────────
   "GAME" for 0/15/30/40/AD, "TIEBREAK" for the running count. The row is the
   one place on the panel whose notation changes underneath the reader, and
   the change is invisible: 5-4 in a tiebreak looks exactly like games.

   Gold on a tiebreak, grey otherwise — the label doubles as the signal that
   the set has reached the breaker, so the panel no longer needs to spend its
   one situation band saying so. */
.mp-plabel{font-size:7.5px;font-weight:900;letter-spacing:.14em;
 text-transform:uppercase;color:var(--soft);line-height:1;}
.mp-plabel.tb{color:var(--gold);}
.mp-pts{display:flex;align-items:center;gap:5px;
 width:100%;justify-content:center;}
.mp-pts i{display:block;min-width:30px;padding:4px 0;font-style:normal;
 font-size:13.5px;font-weight:900;text-align:center;color:#fff;
 border:1px solid var(--line);border-radius:5px;}
.mp-pts i.srv{background:var(--gold);border-color:var(--gold);color:#0a1c38;}
.mp-pts i.stale{opacity:.45;color:var(--soft);}
.mp-pts s{display:block;width:1px;height:12px;background:var(--line);
 flex:none;text-decoration:none;}

/* ── The winner ───────────────────────────────────────────────────────────
   A finished match has an answer, and the panel was not giving it. The set
   boxes went gold for whoever took each set, which tells you the story but
   makes you add up to get the ending. Now it is stated: gold ring, gold name,
   and the word.

   Gold is also the serve ring — no conflict, because nothing is serving in a
   match that has finished. */
.mp-p.won .mp-face{border-color:var(--gold);box-shadow:0 0 0 4px rgba(231,198,107,.14);}
.mp-p.won .mp-last{color:var(--gold);}
.mp-p.won .mp-first{color:var(--gold);}
.mp-win{display:inline-block;margin-top:6px;font-size:9px;font-weight:900;
 letter-spacing:.1em;text-transform:uppercase;color:#0a1c38;
 background:var(--gold);border-radius:999px;padding:3px 9px;}
/* The loser recedes rather than being marked. Nobody needs telling twice. */
.mp-p.lost .mp-face{opacity:.6;}
.mp-p.lost .mp-last,
.mp-p.lost .mp-first{color:var(--mut);}

/* ── The one line that says what is happening right now ───────────────────
   Match point, set point, break point, deuce, tiebreak. This is the sentence
   somebody opened the panel for, so it gets its own band and its own colour
   rather than being inferred from three digits. */
/* ── The message band ─────────────────────────────────────────────────────
   Deuce, break point, set point, match point, the winner, a suspension.

   ⚠️ IT IS ALWAYS THERE, EVEN EMPTY — that is the point of the fixed height.
   It used to be printed only when there was something to say, so the stats
   table below jumped up thirty pixels the moment a game left deuce, and back
   down at the next one. On a live match that is a table twitching every few
   points. An empty outline holds the space; the message drops into a frame
   that is already on screen.

   line-height and min-height are locked to each other so the empty frame and
   a full one measure the same. Change one, change the other. */
.mp-sit{margin:12px 0 0;text-align:center;font-size:11px;font-weight:800;
 letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;
 line-height:1.25;min-height:32px;
 border-radius:9px;background:rgba(224,20,43,.12);
 border:1px solid rgba(224,20,43,.42);color:#ff9aa5;}
/* Nothing to report. The frame stays, quietly — no fill, the same hairline
   the rest of the panel uses for a divider. */
.mp-sit.empty{background:transparent;border-color:var(--line);}
.mp-sit.calm{background:rgba(255,255,255,.05);border-color:var(--line);
 color:var(--mut);}
.mp-sit.warn{background:rgba(231,198,107,.13);
 border-color:rgba(231,198,107,.45);color:var(--gold);}
/* The result. Solid gold rather than the tinted warn band — this is the one
   statement on the panel that is settled and will not change again. */
.mp-sit.gold{background:rgba(231,198,107,.2);
 border-color:var(--gold);color:var(--gold);}

/* ── The record, side by side ─────────────────────────────────────────────
   Label in the middle, a value either side, so the eye compares across a row
   instead of reading two separate stat lists and holding one in memory.

   ⚠️ THE VALUES ARE CENTRED IN THEIR OWN HALVES. They used to be pushed
   against the label — right-aligned on the left, left-aligned on the right —
   which packed everything into a narrow band down the middle and left the two
   player columns above, which ARE centred, with nothing under them. Centred,
   "#2" sits under Alcaraz and "#7" under Djokovic and the panel reads down
   two straight lines. */
.mp-tbl{margin-top:16px;border-top:1px solid var(--line);}
.mp-row{display:grid;grid-template-columns:1fr var(--mid) 1fr;
 column-gap:var(--gutter);
 align-items:center;padding:8px 2px;border-bottom:1px solid var(--line);}
/* The table used to sit above a footer, so its last rule read as a divider.
   With the footer gone it would be a line hanging off the bottom edge of the
   panel with nothing under it. */
.mp-row:last-child{border-bottom:0;}
.mp-row b{font-size:12px;font-weight:800;color:#fff;min-width:0;
 text-align:center;line-height:1.3;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* The centre column — the name of the stat. */
/* The label lives in the fixed centre track. Nowrap so "WORLD RANK" stays on
   one line, centred so it sits on the panel's axis whatever its length —
   and, crucially, its width no longer decides where the numbers go. */
.mp-row span{font-size:8.5px;font-weight:800;letter-spacing:.1em;
 text-transform:uppercase;color:var(--soft);white-space:nowrap;
 text-align:center;justify-self:center;}
/* Green climbing, red falling — the players page's colours for the same fact. */
/* .mp-up / .mp-dn removed with the ranking arrows — see table() in
   uso-match-panel.js. Restore both together if a live tournament wants them. */

/* The footer that used to sit here — "All matches" and "Draw" — is gone. It
   was navigation inside something that is not a page: it invited the reader
   straight back out of the match they had just asked to see, and on the
   matches page "All matches" pointed at the page already underneath the
   panel. The only way out needed is close, and there are three of those:
   the button, Escape, and the backdrop. */

@media(max-width:560px){
 /* Same 50px from the top, tighter at the sides. The bottom-sheet version
    that used to live here is gone: docked to the bottom edge it read as part
    of the page rather than something over it. */
 .mp-scrim{padding:50px 14px 14px;}
 .mp{max-width:none;
  max-height:calc(100vh - 64px);
  max-height:calc(100dvh - 64px);
  padding:20px 16px 22px;}
 .mp{--face:104px;--mid:84px;--gutter:6px;}
 .mp-sd{min-width:25px;height:25px;font-size:11px;}
 .mp-mono{font-size:31px;}
 .mp-last{font-size:13.5px;}
 .mp-first{font-size:13.5px;}
 .mp-fl{width:34px;height:24px;margin-bottom:4px;}
 .mp-head{padding:0 42px;}
 .mp-duel{row-gap:10px;}
 .mp-row b{font-size:11.5px;}
}
/* ── NOTHING BEHIND THE PANEL MOVES ───────────────────────────────────────
   `overflow:hidden` on the body is the classic lock and it is not enough on
   iOS: Safari keeps scrolling the document anyway, so the list slides about
   behind an open panel and the reader loses their place in a 127-match page.

   position:fixed genuinely pins it. The cost is that fixing the body throws
   the page back to the top, so the JS records the scroll position, pins the
   body at the negative of it, and puts the reader back exactly where they
   were on close. Both halves are required — this rule alone would scroll the
   page to the top every time somebody opened a match. */
body.mp-open{position:fixed;width:100%;overflow:hidden;}