/* Matchday-card lobby: flat dark that continues the site palette (style.css --bg/--bg2/--bg3) with ONE lime
   accent, nation colour confined to the team band. The old teal radial gradient is gone; the only decoration is a
   faint centre-circle ring, sized off the short edge so it stays a circle in any root box. */
#footballRoot { position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box; z-index:35;
  background:radial-gradient(circle closest-side at 50% 50%, transparent 0 59%, rgba(185,237,115,.05) 59% 60%, transparent 60%) no-repeat, #0e1319;
  color:#e8eef4; display:grid; place-items:center; font-family:inherit; container-type:size; }
#footballRoot[hidden] { display:none; }
#footballRoot * { box-sizing:border-box; }
#footballRoot button, #footballRoot select { font:inherit; border:1px solid #263240; border-radius:9px; padding:7px 12px; background:#151c24; color:#cfd8e0; cursor:pointer; }
#footballRoot button:disabled, #footballRoot select:disabled { opacity:.45; cursor:default; }
#footballRoot button:focus-visible, #footballRoot select:focus-visible { outline:3px solid #b9ed73; outline-offset:1px; }
/* ---- lobby ---- */
/* Fixed design box, uniformly downscaled by `fit()` (framework §18.2 #3). fit() READS this width/height back from
   the computed style, so the portrait variant below is the only place the second design size is written. */
.fb-panel { position:absolute; left:50%; top:50%; width:720px; height:360px; padding:16px 20px; transform-origin:center;
  display:grid; grid-template-rows:46px 1fr 30px 38px; gap:12px; }
.fb-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fb-title h2 { font-size:24px; font-weight:800; margin:0; letter-spacing:-.5px; line-height:1.05; }
.fb-kicker { display:block; margin-top:3px; color:#b9ed73; font-size:11px; font-weight:600; letter-spacing:3px; text-transform:uppercase; }
.fb-tools { display:flex; align-items:center; gap:8px; }
/* Pill controls. [data-mode] stays a real <select> (puppeteer drives it with select()); only its chrome changes.
   The chevron is a data-URI SVG rather than a pseudo-element, which a <select> cannot have. */
#footballRoot .fb-tools select, #footballRoot .fb-tools button { border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.5px; }
#footballRoot .fb-tools button { padding:7px 14px; }
#footballRoot .fb-tools select { padding:7px 28px 7px 14px; color:#b9ed73; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%23b9ed73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:9px 6px; }
#footballRoot .fb-tools select option { color:#e8eef4; background:#151c24; }
.fb-teams { display:grid; grid-template-columns:1fr 44px 1fr; align-items:stretch; min-height:0; }
.fb-vs { display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900; color:#8a98a6; letter-spacing:-1px; }
.fb-team { background:#151c24; border-radius:14px; display:grid; grid-template-rows:46px 38px 1fr; min-height:0; }
/* The band's three custom properties (ink, select plate, chevron) are the whole light/dark kit switch; they
   inherit down to the <select>, which cannot be restyled by a lower-specificity rule once the id-scoped rule
   below has set its background. */
.fb-team-band { --ink:#fff; --plate:rgba(0,0,0,.35);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:14px 14px 0 0; background:var(--kit,#263240); color:var(--ink); }
.fb-team-band[data-tone="light"] { --ink:#1a1f2b; --plate:rgba(255,255,255,.55);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%231a1f2b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fb-team-band strong { flex:0 0 auto; font-size:12px; font-weight:800; letter-spacing:2px; }
.fb-kit { flex:0 0 auto; width:28px; height:30px; clip-path:polygon(25% 0,40% 7%,60% 7%,75% 0,100% 23%,80% 40%,76% 30%,76% 100%,24% 100%,24% 30%,20% 40%,0 23%); background:var(--ink); opacity:.92; }
#footballRoot .fb-team-band select { flex:0 1 auto; min-width:0; max-width:62%; margin-left:auto; padding:5px 26px 5px 11px; border:0; border-radius:999px; font-size:12px; font-weight:700;
  -webkit-appearance:none; appearance:none; color:var(--ink);
  background:var(--plate) var(--chev) no-repeat right 10px center/9px 6px; }
#footballRoot .fb-team-band select option { color:#e8eef4; background:#151c24; }
/* Formation strip: label, [data-formation] pill select (captain only) and a half-pitch dot map, one line under the
   band. The map is a plain positioned-dot box (no SVG) so `reconcile` can diff it like any other lobby node. */
.fb-team-form { display:flex; align-items:center; gap:8px; padding:0 12px; border-bottom:1px solid #1d2733; min-width:0; }
.fb-form-label { flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:1px; color:#8a98a6; }
#footballRoot .fb-team-form select { flex:0 1 auto; min-width:0; padding:4px 24px 4px 10px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.5px; color:#b9ed73;
  -webkit-appearance:none; appearance:none;
  background:#0e1319 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%23b9ed73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center/9px 6px; }
#footballRoot .fb-team-form select option { color:#e8eef4; background:#151c24; }
.fb-form-map { position:relative; flex:0 0 auto; width:64px; height:28px; margin-left:auto; border:1px solid #2f3d4c; border-radius:3px; background:#12301f; }
.fb-form-map i { position:absolute; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:#b9ed73; }
.fb-form-map i[data-role="GK"] { background:#f5c842; }
.fb-form-map i[data-role="DF"] { background:#7cc0ff; }
.fb-form-map i[data-role="FW"] { background:#ff7a6b; }
/* One equal row per occupant (1v1 uses the whole card, 2v2 splits it) instead of two fixed halves that leave a
   dead slot. minmax(0,1fr) also caps a long wrapped name at the card height rather than growing past it. */
.fb-players { display:grid; grid-auto-rows:minmax(0,1fr); gap:6px; padding:10px 12px; min-height:0; }
.fb-player { display:grid; grid-template-columns:28px minmax(0,1fr) 78px; align-items:center; gap:8px; min-height:0; font-size:14px; }
.fb-avatar { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#263240; color:#dbe4ec; font-size:13px; font-weight:700; }
.fb-avatar.bot { font-size:10px; letter-spacing:.5px; color:#8a98a6; }
.fb-player-name { overflow-wrap:anywhere; line-height:1.2; }
.fb-badge { display:flex; flex-wrap:wrap; align-content:center; justify-content:flex-end; gap:3px; }
.fb-badge em { padding:2px 5px; border:1px solid transparent; border-radius:999px; font-size:10px; font-style:normal; font-weight:700; line-height:1.3; white-space:nowrap; }
.fb-badge .me { border-color:#8a98a6; color:#e8eef4; }
.fb-badge .cap { border-color:#b9ed7355; color:#b9ed73; }
.fb-badge .wait { border-color:#33404e; color:#8a98a6; }
.fb-badge .ok { background:#b9ed73; color:#111820; }
.fb-vacancy { display:flex; align-items:center; gap:4px; border:1px dashed #2f3d4c; border-radius:10px; padding:0 6px; min-height:0; }
#footballRoot .fb-vacancy button { padding:4px 6px; border:0; border-radius:6px; background:none; color:#b9ed73; font-size:12px; font-weight:700; }
#footballRoot .fb-vacancy button:disabled { color:#8a98a6; }
#footballRoot .fb-player [data-remove-bot] { justify-self:end; padding:3px 6px; border:0; background:none; color:#8a98a6; font-size:11px; }
.fb-reason { margin:0; font-size:12px; color:#8a98a6; line-height:15px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fb-reason::before { content:'• '; color:#b9ed73; }
.fb-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fb-actions-side { display:flex; align-items:center; gap:8px; }
#footballRoot .fb-actions-side button { background:none; color:#cfd8e0; font-size:13px; }
#footballRoot .fb-primary { padding:10px 26px; border:1px solid #b9ed73; border-radius:10px; background:#b9ed73; color:#111820; font-weight:800; letter-spacing:.5px; }
#footballRoot .fb-primary.armed { background:none; color:#b9ed73; }
.fb-standby { font-size:13px; color:#8a98a6; }
/* Tall root (expanded phone, portrait video area): stack the cards instead of scaling a 2:1 box down to nothing.
   Container query, not a viewport one — the embedded video area is wide and short even on a phone (§18.2). */
@container (max-aspect-ratio: 1/1) {
  .fb-panel { width:420px; height:600px; grid-template-rows:52px 1fr 32px auto; gap:10px; }   /* +40 for the formation strip (2026-09-16) */
  .fb-teams { grid-template-columns:1fr; grid-template-rows:1fr 24px 1fr; }
  .fb-team { grid-template-rows:44px 36px 1fr; }
  .fb-vs { font-size:18px; letter-spacing:2px; }
  .fb-actions { flex-direction:column-reverse; align-items:stretch; gap:8px; }
  .fb-actions-side { justify-content:space-between; }
  #footballRoot .fb-primary { width:100%; }
  .fb-standby { text-align:center; }
}
#footballExpand { display:none; margin:5px auto; padding:9px 16px; border-radius:9px; border:1px solid #263240; background:none; color:#cfd8e0; }
@media (pointer:coarse), (max-width:900px) { #footballExpand { display:block; } }
#footballRoot.fb-expanded { position:fixed; inset:0; width:100vw; height:100dvh; z-index:10000; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.fb-help { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92%,760px); max-height:88%; background:#0f151c; border:1px solid #263240; border-radius:14px; padding:18px 20px; overflow:auto; z-index:3; font-size:13px; line-height:1.5; }
/* Close sits in the panel's top-RIGHT corner (user request). Scoped to `[data-close]` so the render-failure panel,
   which reuses `.fb-help`, keeps its 다시 불러오기 / 경기 나가기 buttons in the normal flow. The first heading gets a
   right margin so '조작' never runs under the button. */
#footballRoot .fb-help > [data-close] { position:absolute; top:10px; right:10px; z-index:1; }
#footballRoot .fb-help > h3:first-of-type { margin-right:70px; }
.fb-help h3 { margin:18px 0 6px; font-size:14px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#b9ed73; }
#footballRoot .fb-help > h3:first-of-type { margin-top:0; }
.fb-help img { vertical-align:middle; }
/* Nation skills: one card per country, three rows of icon / chord / name+summary. The long sentence lives in each
   row's `title`, so the panel reads as a reference instead of nine paragraphs of prose (user: "비문학처럼 길다").
   Column count follows the ROOT box, not the viewport — embedded, the game owns only the video area. */
.fb-legend { margin:0 0 10px; font-size:12px; color:#8a98a6; }
.fb-nations { display:grid; grid-template-columns:1fr; gap:10px; }
/* Two columns from 440px: the embedded desktop video area is 484px wide and a one-column list ran to 2300px of scroll. */
@container (min-width:440px) { .fb-nations { grid-template-columns:repeat(2,1fr); } }
@container (min-width:800px) { .fb-nations { grid-template-columns:repeat(3,1fr); } }
.fb-nation { background:#151c24; border:1px solid transparent; border-top:3px solid var(--kit,#263240); border-radius:12px; padding:9px 11px 10px; }
/* Keep the nation-colour top line: only the other three sides turn lime for the two picked teams. */
.fb-nation.picked { border-left-color:#b9ed73; border-right-color:#b9ed73; border-bottom-color:#b9ed73; }
.fb-nation-head { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.fb-nation-head strong { font-size:14px; font-weight:700; }
.fb-nation-dot { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--kit,#263240); }
.fb-nation-tag { margin-left:auto; font-size:10px; font-style:normal; font-weight:700; color:#b9ed73; }
.fb-skill { display:grid; grid-template-columns:24px 44px 1fr; gap:6px 8px; align-items:center; padding:3px 0; }
.fb-skill img { width:22px; height:22px; }
.fb-chord { justify-self:stretch; padding:2px 0; text-align:center; font-family:inherit; font-size:10px; font-weight:700; line-height:1.4; color:#b9ed73; border:1px solid #b9ed7355; border-radius:5px; white-space:nowrap; }
.fb-skill-text { min-width:0; line-height:1.25; }
.fb-skill-text b { display:block; font-size:13px; font-weight:600; }
.fb-skill-text small { display:block; font-size:11px; color:#8a98a6; }
/* Player ratings (선수 정보). Opened from the lobby only — nothing here is on the always-on HUD. The panel is
   three stacked blocks inside `.fb-help` (which already scrolls): nation chips, the 11-man roster list, and the
   detail/compare area. Bars are `1fr` inside a grid whose other tracks are `auto`, so they shrink instead of
   wrapping down to a second line at 375px. */
.fb-pl-nav { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
#footballRoot .fb-pl-nav button { padding:4px 10px; font-size:12px; border-radius:999px; border:1px solid #33404e; background:#151c24; color:#cfd8e0; }
#footballRoot .fb-pl-nav button.picked { border-color:#b9ed73; }
#footballRoot .fb-pl-nav button.on { background:var(--kit,#b9ed73); border-color:var(--kit,#b9ed73); color:#111820; font-weight:700; }
.fb-pl-cmpbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px; }
.fb-pl-chip { padding:2px 8px; font-size:11px; font-weight:700; color:#111820; background:#b9ed73; border-radius:999px; }
.fb-pl-hint { font-size:11px; color:#8a98a6; }
.fb-pl-list { display:flex; flex-direction:column; gap:2px; }
.fb-pl-row { display:grid; grid-template-columns:30px 26px minmax(0,1fr) minmax(0,1.2fr) auto; gap:8px; align-items:center; padding:4px 6px; border-radius:8px; cursor:pointer; }
.fb-pl-row:hover { background:#151c24; }
.fb-pl-row.on { background:#1b2530; box-shadow:inset 0 0 0 1px #b9ed7355; }
.fb-pl-pos { font-size:10px; font-weight:800; letter-spacing:.3px;text-align:center; color:#111820; background:#8a98a6; border-radius:4px; padding:2px 0; }
.fb-pl-num { text-align:right; font-weight:700; color:#8a98a6; }
.fb-pl-who { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.fb-pl-who b { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-pl-who small { font-size:10px; color:#8a98a6; }
.fb-pl-str { min-width:0; font-size:11px; color:#b9ed73; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#footballRoot .fb-pl-row button { padding:3px 8px; font-size:11px; white-space:nowrap; }
#footballRoot .fb-pl-row button.on { background:#b9ed73; border-color:#b9ed73; color:#111820; font-weight:700; }
.fb-pl-detail { margin-top:12px; }
.fb-pl-detail-head { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.fb-pl-detail-head b { font-size:14px; }
.fb-pl-detail-head small, .fb-pl-cmp-name small { font-size:11px; color:#8a98a6; }
.fb-pl-sub { margin:12px 0 4px; font-size:11px; letter-spacing:1.5px; color:#8a98a6; text-transform:uppercase; }
.fb-pl-stats { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:3px 8px; align-items:center; }
.fb-pl-stat { display:contents; }
.fb-pl-k { display:flex; align-items:center; gap:4px; white-space:nowrap; font-size:12px; color:#cfd8e0; }
.fb-pl-ai { font-size:9px; font-style:normal; font-weight:700; color:#111820; background:#8a98a6; border-radius:3px; padding:0 3px; cursor:help; }
.fb-pl-bar { display:block; min-width:0; height:8px; background:#151c24; border-radius:999px; overflow:hidden; }
.fb-pl-bar > i { display:block; height:100%; background:#b9ed73; border-radius:999px; }
.fb-pl-stat > b, .fb-pl-cmp-side > b { min-width:24px; text-align:right; font-size:12px; font-weight:700; color:#cfd8e0; font-variant-numeric:tabular-nums; }
/* Compare: the key label spans the full width and the two sides sit below it, so 375px never has to fit
   value + bar + label + bar + value on one line. */
.fb-pl-cmp-head, .fb-pl-cmp { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; }
.fb-pl-cmp-head { margin-bottom:8px; }
.fb-pl-cmp-name { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.fb-pl-cmp-name b { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-pl-cmp-key { grid-column:1/-1; margin-top:4px; font-size:11px; color:#8a98a6; }
.fb-pl-cmp-side { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; }
.fb-pl-cmp-side > .fb-pl-bar > i { background:#5d7285; }
.fb-pl-cmp-side.win > .fb-pl-bar > i { background:#b9ed73; }
.fb-pl-cmp-side.win > b { color:#b9ed73; }
/* Narrow: the roster row's strength column moves to its own line instead of squeezing both the name and the three
   strengths into ellipses. Keyed off the ROOT box (like `.fb-nations`), so the 484px embedded desktop video area
   gets the same two-line row a 375px phone does. */
@container (max-width:560px) {
  /* Every cell is placed explicitly: auto-placement would push 비교 onto the second row behind the strengths and
     break its two characters over two lines. */
  .fb-pl-row { grid-template-columns:30px 26px minmax(0,1fr) auto; gap:2px 8px; }
  .fb-pl-pos { grid-area:1/1; }
  .fb-pl-num { grid-area:1/2; }
  .fb-pl-who { grid-area:1/3; }
  #footballRoot .fb-pl-row button { grid-area:1/4; }
  .fb-pl-str { grid-area:2/3/auto/-1; white-space:normal; }
}
/* Key settings: one grid so name / key cap / 변경 line up across every group. `.fb-key-row` is display:contents
   so each row's three cells land in the parent grid; the group headings span the whole width. */
.fb-keys-hint { margin:0 0 10px; font-size:12px; color:#8a98a6; }
.fb-keys { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px 10px; align-items:center; max-width:560px; }
.fb-keys h4 { grid-column:1/-1; margin:12px 0 2px; font-size:11px; letter-spacing:1.5px; color:#8a98a6; text-transform:uppercase; }
.fb-key-row { display:contents; }
.fb-key-name { display:flex; flex-direction:column; min-width:0; }
.fb-key-name small { color:#8a98a6; font-size:11px; }
/* font-family:inherit rather than the `font` shorthand — `font:700 13px/1.2 inherit` is invalid and drops. */
.fb-kbd { display:inline-block; min-width:52px; padding:4px 10px; text-align:center; font-family:inherit; font-weight:700; font-size:13px; line-height:1.2; color:#e8eef4; background:#151c24; border:1px solid #33404e; border-bottom-width:3px; border-radius:6px; }
.fb-kbd.changed { border-color:#b9ed73; }
.fb-kbd.listening { border-color:#ffe28a; color:#ffe28a; animation:fbKbdPulse .9s ease-in-out infinite; }
.fb-kbd.shake { animation:fbKbdShake .3s; }
@keyframes fbKbdPulse { 50% { box-shadow:0 0 0 3px #ffe28a55; } }
@keyframes fbKbdShake { 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
#footballRoot .fb-keys button, #footballRoot .fb-keys-actions button { padding:4px 10px; font-size:12px; }
.fb-keys-actions { display:flex; align-items:center; gap:10px; margin-top:10px; }
/* 자동 선수 전환 방식 (2026-09-27) */
.fb-autoswitch { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:12px; }
.fb-autoswitch .fb-key-name { margin-right:4px; }
#footballRoot .fb-autoswitch button { padding:4px 10px; font-size:12px; border-radius:999px; border:1px solid #33404e; background:#151c24; color:#cfd8e0; }
#footballRoot .fb-autoswitch button.on { background:#b9ed73; border-color:#b9ed73; color:#111820; font-weight:700; }
.fb-autoswitch-desc { margin:8px 0 0; font-size:12px; color:#9fb0c0; }
.fb-keys-msg { color:#ffe28a; font-size:12px; }
/* Narrow: three grid columns no longer fit, so each row becomes its own flex line (name stretches, cap and
   button stay on the right) instead of wrapping the button onto an orphan grid row. */
@media (max-width:620px) {
  .fb-keys { display:block; max-width:none; }
  .fb-keys h4 { margin:10px 0 4px; }
  .fb-key-row { display:flex; align-items:center; gap:8px; padding:3px 0; }
  .fb-key-name { flex:1 1 auto; }
}
/* Challenge popup lives on document.body (outside #footballRoot), so it carries its own button styling. The child
   order is part of the E2E contract: `.fb-challenge button` is 수락 and `button:last-child` is 거절. */
.fb-challenge { position:fixed; z-index:10020; left:50%; top:30%; transform:translateX(-50%); width:min(340px,90vw); padding:20px 22px; color:#e8eef4; background:#151c24; border:1px solid #b9ed73; border-radius:14px; box-shadow:0 12px 80px #0009; font-family:inherit; }
.fb-challenge h3 { margin:0 0 6px; font-size:15px; font-weight:800; letter-spacing:1px; }
.fb-challenge p { margin:0 0 14px; font-size:13px; color:#8a98a6; }
.fb-challenge button { font:inherit; margin:0 8px 0 0; padding:10px 22px; border-radius:10px; border:1px solid #b9ed73; background:#b9ed73; color:#111820; font-weight:800; cursor:pointer; }
.fb-challenge button:last-child { border-color:#263240; background:none; color:#cfd8e0; font-weight:600; }
.fb-challenge button:focus-visible { outline:3px solid #b9ed73; outline-offset:2px; }
/* ---- match ---- */
.fb-surface { position:absolute; inset:0; background:#0a1a24; }
.fb-surface canvas { display:block; width:100%; height:100%; outline:0; }
.fb-surface[hidden], .fb-touch[hidden], .fb-panel[hidden] { display:none; }
/* Slot-2 (finisher shot) screen flash, tinted with the nation colour the renderer hands to view.onSkill. The flat
   fallback comes first for engines without color-mix(); `screen` keeps the pitch readable underneath. */
.fb-flash { position:absolute; inset:0; pointer-events:none; opacity:0; background:var(--flash,#fff); background:radial-gradient(ellipse at center, color-mix(in srgb, var(--flash) 55%, white) 0%, var(--flash) 60%, transparent 100%); mix-blend-mode:screen; }
.fb-flash.on { animation:fbFlash .26s ease-out; }
@keyframes fbFlash { 0% { opacity:.42; } 100% { opacity:0; } }
.fb-hud { position:absolute; top:8px; left:8px; right:8px; display:flex; align-items:center; gap:6px; font-size:clamp(10px,1.6cqw,15px); pointer-events:none; flex-wrap:nowrap; }
.fb-score { display:flex; align-items:stretch; background:#0b131af0; border-radius:6px; overflow:hidden; font-variant-numeric:tabular-nums; box-shadow:0 2px 12px #0008; flex:0 0 auto; }
/* Participant names, not nations, with the nation colour underline. Never ellipsized: when the row is too wide the
   client zooms the whole HUD row down (fitHud, framework §18.6); below the 0.55 floor the names may wrap. */
.fb-score>span { padding:5px 9px; border-bottom:3px solid var(--team,#fff); font-weight:600; letter-spacing:.3px; white-space:nowrap; }
.fb-hud.fb-hud-measure { right:auto; width:max-content; }
.fb-hud.fb-hud-wrap .fb-score>span { white-space:normal; max-width:14em; }
.fb-score>strong { padding:5px 10px; background:#f5f5f0; color:#0b131a; font-size:1.1em; }
.fb-clock { background:#0b131af0; padding:6px 10px; border-radius:6px; font-variant-numeric:tabular-nums; font-weight:600; flex:0 0 auto; white-space:nowrap; }
/* Restart/keeper hint: outside the HUD row so its length never rescales the names. fitHud/placeStatus put it next to
   the clock when the row has room, otherwise on its own line under the row (right-aligned, scaled down if needed).
   The font matches the row (.92em of the HUD size). */
.fb-status { position:absolute; z-index:3; color:#ffe28a; text-shadow:0 1px 3px #000; font-size:calc(clamp(10px,1.6cqw,15px) * .92); white-space:nowrap; pointer-events:none; }
.fb-status:empty { display:none; }
.fb-status.fb-status-low { right:8px; text-align:right; transform:scale(var(--fb-status-z,1)); transform-origin:100% 0; }
.fb-status.fb-status-wrap { white-space:normal; }
.fb-status.fb-status-covered { visibility:hidden; }
/* 1.4s notices (camera, skill fail, offside): under the row on the left, out of the row's flow so they never push it. */
.fb-hud::after { content:attr(data-notice); position:absolute; left:0; top:calc(100% + 3px); color:#ffe28a; text-shadow:0 1px 3px #000; font-size:.9em; white-space:nowrap; }
.fb-hud-right { margin-left:auto; display:flex; gap:4px; flex:0 0 auto; }
/* nowrap: without it a 375px row breaks `리타이어` into one character per line. */
#footballRoot .fb-hud button { pointer-events:auto; background:#0b131acc; border:1px solid #ffffff22; border-radius:5px; padding:4px 8px; font-size:.9em; white-space:nowrap; }
/* Shootout tally, under the scoreboard rather than in the HUD row (which is a single nowrap line). */
.fb-shootout { position:absolute; top:42px; left:8px; max-width:min(92%,460px); padding:4px 9px; background:#0b131af0; border-radius:6px;
  font-size:clamp(10px,1.5cqw,14px); letter-spacing:1px; color:#e6eeee; font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; pointer-events:none; z-index:4; box-shadow:0 2px 12px #0008; }
.fb-banner { position:absolute; top:18%; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 28px; background:#0b131aee; border-left:5px solid #e6eeee; border-radius:6px; pointer-events:none; z-index:5; box-shadow:0 4px 20px #0008; }
.fb-banner { max-width:min(92%,520px); }
.fb-banner>strong { font-size:clamp(20px,4cqw,36px); letter-spacing:3px; color:#fff; white-space:nowrap; }
.fb-banner>span { font-size:clamp(11px,1.8cqw,15px); color:#cfe0da; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.fb-banner>span:empty { display:none; }
/* Scorer line between the GOAL! headline and the nation sub-line: the name is the point of the banner, so it
   reads bigger than the sub-line and in white, with the assist trailing it in the sub-line grey. */
.fb-banner em.fb-banner-scorer { font-style:normal; font-weight:700; color:#fff; font-size:clamp(14px,3.4cqw,22px); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.fb-banner em.fb-banner-scorer>small { font-size:.72em; font-weight:600; color:#cfd8dc; margin-left:.5em; }
.fb-banner[hidden] { display:none; }
.fb-touch { position:absolute; bottom:10px; left:10px; right:10px; display:flex; justify-content:space-between; align-items:end; pointer-events:none; }
/* 길게 누르기로 글자 선택·복사/이미지 저장 메뉴·탭 강조가 뜨지 않게(2026-09-28) — 버튼 안 이미지는 누름 대상에서 뺀다 */
.fb-touch, .fb-touch * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.fb-touch img { pointer-events:none; -webkit-user-drag:none; }
.fb-stick { position:relative; width:clamp(56px,14cqw,110px); height:clamp(56px,14cqw,110px); border-radius:50%; border:2px solid #ffffff55; background:#0b131a66; pointer-events:auto; touch-action:none; }
.fb-stick-knob { position:absolute; inset:28%; border-radius:50%; background:#ffffffaa; pointer-events:none; }
.fb-pad-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; width:clamp(110px,26cqw,220px); }
/* The five action keys carry their Korean ability name ('짧은패스' … ) instead of the letter, so the pad cell is a
   rounded rectangle rather than a circle (a 50% radius clips the first and last syllable) and the label is sized
   in container units. The label NEVER wraps: a folded '긴패/스' was rejected — the narrow-container block below
   swaps in the 3-syllable short label instead. */
#footballRoot .fb-pad-buttons button { padding:0 2px; height:clamp(26px,6.5cqw,50px); pointer-events:auto; touch-action:none; background:#0b131aaa; border:1px solid #ffffff33; border-radius:12px; font-weight:700; font-size:clamp(9px,2.1cqw,11px); line-height:1.05; letter-spacing:-.3px; white-space:nowrap; overflow:hidden; }
.fb-pad-buttons [data-skill] { display:flex; align-items:center; justify-content:center; gap:2px; border-radius:10px !important; }
.fb-pad-buttons [data-skill] img { flex:0 1 auto; min-width:0; }
/* Narrow container (root <= 760px and NOT expanded — the 390x219 portrait embed and the 591x352 landscape embed):
   the 4-column cell (26cqw pad) has no room for '짧은패스' on one line, so paint `data-short` ('롱패스' / '숏패스')
   through ::before and zero the button's own font instead of wrapping or clipping. '짧은패스' at 11px is 39.3px and
   needs a 45.3px cell with the base 2px padding, i.e. a 193px pad = 26cqw of a 742px root. The short label is sized
   like the long one (2.1cqw, 9..11px): at 9px/ls -.6 it is 23.05px (390px root: 26px cells, 24px content) and at
   11px about 28.6px (591px root: 35.4px cells, 33.4px content — the long label clipped there at 43 > 33, 2026-09-29).
   The long textContent stays as the accessible name. Expanded (11px, 46px cells) keeps the long label. */
@container (max-width: 760px) {
  #footballRoot:not(.fb-expanded) .fb-pad-buttons { width:clamp(116px,26cqw,220px); }
  #footballRoot:not(.fb-expanded) .fb-pad-buttons button { padding:0; }
  #footballRoot:not(.fb-expanded) .fb-pad-buttons button[data-short] { font-size:0; }
  #footballRoot:not(.fb-expanded) .fb-pad-buttons button[data-short]::before { content:attr(data-short); display:block; font-size:clamp(9px,2.1cqw,11px); letter-spacing:-.6px; line-height:1; }
}
/* Camera toggle (C): parks in the free bottom-right cell of the 4-column pad so the 8 action buttons keep
   their two-row layout. It is never disabled, so it must not look like an action key. */
#footballRoot .fb-hud button[data-cam] { padding:4px 6px; }
.fb-pad-buttons img { height:80%; max-width:65%; }
/* Held press (D): the orange rim matches the orange foot ring the renderer paints while pressing. */
#footballRoot .fb-pad-buttons button.active { border-color:#ff9d3c; box-shadow:0 0 0 2px #ff9d3c66; }
/* Bottom-left gauges: STAMINA (the footballer I drive) above SKILL (my participant pool). The skill fill
   takes the nation colour from --gauge; stamina has its own blue→amber→red scale.
   Every size is a container-unit token on .fb-gauge, like the scoreboard/stick/pad above, because the embedded
   video area is only 390x219 on a portrait phone: fixed pixels (160x10 bars, 13px name) made the block taller
   than the whole HUD and it climbed over the scoreboard. The clamp maxima are the desktop values, so the
   1280x800 embed (a measured 484x648 root) still renders exactly 160x10 bars / 13px names; the minima keep the name
   legible (>=10px) on the smallest embed. The expanded block at the end restores the maxima, because an
   expanded portrait root is 390 CSS px wide but 844 tall and has no shortage of room. */
.fb-gauge {
  --fb-gauge-w:clamp(96px,33cqw,160px); --fb-gauge-gap:clamp(2px,.9cqh,3px);
  --fb-gauge-bar:clamp(6px,3.7cqh,10px); --fb-gauge-name:clamp(10px,2.7cqw,13px);
  --fb-gauge-num:clamp(12px,3.3cqw,16px); --fb-gauge-numf:clamp(9px,2.3cqw,11px);
  --fb-gauge-nummin:clamp(15px,4.1cqw,20px); --fb-gauge-label:clamp(8px,2.1cqw,10px);
  --fb-gauge-ls:clamp(1px,.41cqw,2px); --fb-gauge-owner:clamp(9px,2.3cqw,11px);
  position:absolute; left:8px; bottom:8px; display:flex; flex-direction:column; gap:var(--fb-gauge-gap); pointer-events:none; z-index:2; }
.fb-gauge[hidden] { display:none; }
.fb-gauge-row { display:flex; flex-direction:column; gap:var(--fb-gauge-gap); }
.fb-gauge-row[hidden] { display:none; }
.fb-gauge-label { font-size:var(--fb-gauge-label); letter-spacing:var(--fb-gauge-ls); color:#dfeaea; text-shadow:0 1px 3px #000; }
.fb-gauge-bar { width:var(--fb-gauge-w); height:var(--fb-gauge-bar); border:1px solid #ffffff55; border-radius:5px; background:#0b131a99; overflow:hidden; }
.fb-gauge-bar>i { display:block; height:100%; width:0; background:var(--gauge,#b9ed73); transition:width .12s linear; }
.fb-stamina>.fb-gauge-bar>i { background:#63d4ff; }
.fb-stamina.warn>.fb-gauge-bar>i { background:#ffd166; }
.fb-stamina.low>.fb-gauge-bar>i { background:#ff6b6b; }
/* Name plate above the bars: shirt-number pill (nation colour, dark digits) + the footballer's name. Locked to the
   bar width and ellipsized — a long transliterated name must not spill across the minimap on a narrow embed
   or on the touch layout, where the whole block already sits above the stick. The block grows upward, so nothing
   below it moves. */
.fb-gauge-player { display:flex; align-items:center; gap:4px; width:var(--fb-gauge-w); }
.fb-gauge-player[hidden] { display:none; }
.fb-gauge-num { flex:0 0 auto; min-width:var(--fb-gauge-nummin); height:var(--fb-gauge-num); padding:0 3px; border-radius:8px; background:var(--gauge,#b9ed73); color:#0b1016; font-size:var(--fb-gauge-numf); font-weight:700; line-height:var(--fb-gauge-num); text-align:center; box-shadow:0 1px 3px #000a; }
.fb-gauge-name { flex:1 1 auto; min-width:0; font-size:var(--fb-gauge-name); font-weight:700; color:#fff; text-shadow:0 1px 3px #000,0 0 2px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Booking chip after the name. Sized in em so it tracks the name-plate token on every embed, and `flex:0 0 auto`
   keeps it from being squeezed away by a long name (the name ellipsizes instead). The opponent plate is
   row-reverse, so the chip mirrors to the far side of the name on its own. */
.fb-card { flex:0 0 auto; width:.6em; height:.85em; font-size:var(--fb-gauge-name); border-radius:2px; display:inline-block; margin-left:.35em; vertical-align:-.1em; box-shadow:0 0 0 1px rgba(0,0,0,.35); }
.fb-card.yellow { background:#ffd23f; }
.fb-card.red { background:#e0262e; }
/* Injury cross (engine INJURY) after the name: yellow = level 1, red = level 2. Two bars drawn with gradients. */
.fb-injury { flex:0 0 auto; width:.85em; height:.85em; font-size:var(--fb-gauge-name); display:inline-block; margin-left:.3em; vertical-align:-.1em; --x:#ffd23f;
  background:linear-gradient(var(--x),var(--x)) center/32% 100% no-repeat, linear-gradient(var(--x),var(--x)) center/100% 32% no-repeat; filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); }
.fb-injury.red { --x:#e0262e; }
/* Opponent panel: the same block mirrored into the bottom-right corner, with a quieter owner line under the name
   plate saying which participant is driving him (or AI). It shares .fb-gauge, so the touch-layout and expanded
   bottom offsets below apply to it too and it stays clear of the right-hand pad buttons. */
.fb-gauge-opp { left:auto; right:8px; align-items:flex-end; }
.fb-gauge-opp .fb-gauge-player { flex-direction:row-reverse; }
.fb-gauge-opp .fb-gauge-name,.fb-gauge-opp .fb-gauge-label,.fb-gauge-opp .fb-gauge-owner { text-align:right; }
.fb-gauge-owner { width:var(--fb-gauge-w); font-size:var(--fb-gauge-owner); color:#cfd8dc; text-shadow:0 1px 3px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fb-gauge-owner[hidden] { display:none; }
/* Short embed (portrait phone, 390x219): even at the clamp minima the three/four-row block reaches the scoreboard.
   Drop the STAMINA/SKILL captions and the owner line and keep the name plate plus the two bars — the bars stay
   identifiable by position (stamina above skill) and colour (blue→amber→red vs the nation fill). The threshold sits
   well under the measured desktop embed heights (484x648 at 1280x800, 844x260 in landscape), which keep every row. */
@container (max-height: 240px) {
  .fb-gauge-label { display:none; }   /* the owner line stays: in 2v2 it is what tells the two opponents apart */
}
/* Centre-bottom minimap on every layout. The embedded video area can be far narrower than the window
   (484px at 1280x720), so the centred map gives way to the 168px the bottom-left gauge needs. */
.fb-map { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:min(150px, calc(100cqw - 344px)); height:auto; aspect-ratio:150/97; border-radius:4px; opacity:.88; pointer-events:none; }
/* Touch layout: the stick owns the bottom-left corner and the buttons the bottom-right, so the gauge
   moves above the stick and the map only takes the gap that is left between the two pads. */
@media (pointer:coarse), (max-width:900px) {
  /* Sit right on top of the stick instead of a fixed 150px, which on a 219px-tall embed put the block off the top
     of the root and over the scoreboard. `.fb-touch` is at bottom:10px and the stick is the taller of the two pads
     at every width in the matrix, so stick height + 14px leaves a 4px gap above it. */
  .fb-gauge { bottom:calc(clamp(56px,14cqw,110px) + 14px); }
  /* At this height the block is level with the centred minimap, so the bars also have to stop short of it. The map
     is `min(96px, 100cqw - 250px)` wide, i.e. it leaves at least 50cqw - 48px between the centre line and its own
     edge; `50cqw - 87px` stays inside that on both sides with room for the 8px inset. The 96px cap (down from
     150px) is also what makes room for the 116px short-label pad above at 360px. */
  /* Mobile also drops every token maximum ~20% below the desktop one (bar 128x8, name 11px, number pill 13px/9px,
     caption 8px, owner 9px): at the desktop maxima the name plate and the two bars read as a desktop overlay
     pasted onto a phone (user report, r12). The desktop block above keeps 160x10 / 13px. */
  .fb-gauge { --fb-gauge-w:min(clamp(96px,33cqw,128px), max(84px, calc(50cqw - 87px))); --fb-gauge-gap:2px;
    --fb-gauge-bar:clamp(6px,3.7cqh,8px); --fb-gauge-name:clamp(10px,2.7cqw,11px);
    --fb-gauge-num:clamp(12px,3.3cqw,13px); --fb-gauge-numf:9px; --fb-gauge-nummin:clamp(15px,4.1cqw,16px);
    --fb-gauge-label:8px; --fb-gauge-ls:1px; --fb-gauge-owner:9px; }
  .fb-map { width:min(96px, calc(100cqw - 250px)); height:auto; aspect-ratio:150/97; }
}
/* In-match chat box (Enter, PC only). Bottom centre but above the minimap (bottom 8px, ~97px tall) so neither
   covers the other; it is the one HUD element that must take pointer/keyboard events. Selected through
   #footballRoot because the site's `input[type="text"]` rule (width:100%, own background/padding) outranks a bare
   class and would stretch the box across the whole video area. */
#footballRoot .fb-chat-input { position:absolute; box-sizing:border-box; left:50%; bottom:118px; transform:translateX(-50%); width:min(420px,80%); padding:9px 14px; border:1px solid #ffffff66; border-radius:18px; background:#0b131ae0; color:#fff; font-size:14px; outline:none; pointer-events:auto; z-index:5; box-shadow:0 4px 16px #0009; }
#footballRoot .fb-chat-input[hidden] { display:none; }
.fb-result { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(88%,640px); padding:14px; border:1px solid #bddb90; border-radius:12px; background:#0b1b26f5; display:grid; grid-template-columns:1fr 1fr; gap:8px; text-align:center; font-size:clamp(8px,1.8cqw,15px); box-shadow:0 10px 40px #000a; }
.fb-result h2,.fb-result>p { grid-column:1/-1; margin:3px; }
.fb-result p { margin:4px; overflow-wrap:anywhere; }
.fb-result-score { font-size:1.6em; font-weight:700; }
@media (max-height:500px) and (orientation:landscape) { .video-wrap.fb-host { max-height:calc(100dvh - 130px) !important; min-height:0; transition:none; } }
@media (max-width:900px) {
  #footballRoot.fb-expanded .fb-stick { width:84px; height:84px; }
  #footballRoot.fb-expanded .fb-pad-buttons { width:196px; }
  /* 46px cells: '짧은패스' at 11px is 39.3px, so padding:0 1px (42px of content) keeps it on one line. */
  #footballRoot.fb-expanded .fb-pad-buttons button { height:44px; padding:0 1px; font-size:11px; }
  #footballRoot.fb-expanded .fb-map { width:min(110px, calc(100cqw - 430px)); }
}
/* Expanded portrait: the bigger pads leave no bottom gap, so the map rides over them and the gauge over the map.
   188px = the map's own 108px offset + its height (110px wide x 97/150 = 71px) + 9px, i.e. the gauge clears the
   map rather than the 84px stick (which the pads already sit under). The root here is the whole viewport
   (390x844), so the container-unit tokens would shrink to their portrait-embed minima even though there is plenty
   of room: restore them to the MOBILE maxima of the touch block above, not to the desktop ones — this is still a
   phone screen. */
@media (max-width:620px) {
  #footballRoot.fb-expanded .fb-map { bottom:108px; width:min(110px, calc(100cqw - 40px)); }
  #footballRoot.fb-expanded .fb-gauge { bottom:188px;
    --fb-gauge-w:128px; --fb-gauge-gap:2px; --fb-gauge-bar:8px; --fb-gauge-name:11px; --fb-gauge-num:13px;
    --fb-gauge-numf:9px; --fb-gauge-nummin:16px; --fb-gauge-label:8px; --fb-gauge-ls:1px; --fb-gauge-owner:9px; }
}