/* ════════════════════════════════════════════════════════════
   CAMPVS — CSS  |  Templvm Design System
   (campo/tabuleiro preservado — pitch + pieces + highlights)
   ════════════════════════════════════════════════════════════ */
:root{
  /* Templvm dark tokens */
  --bg-base:#000000;
  --bg-surface:#0a0a0a;
  --bg-elevated:#111111;
  --bg-card:#161616;
  --bg-soft:#101010;
  --border:#1c1c1c;
  --border-bright:#2a2a2a;
  --text-primary:#ffffff;
  --text-secondary:#888888;
  --text-muted:#444444;
  --text-faint:#666666;
  --accent:#e8e4df;
  --accent-light:#ffffff;
  --accent-dim:#242424;
  --accent-glow:rgba(232,228,223,.08);

  /* Ghost button (templvm) */
  --ghost-button-bg:#111111;
  --ghost-button-border:var(--border);
  --ghost-button-text:#888888;
  --ghost-button-hover:#1a1a1a;

  /* Team colors (preservado) */
  --hm:#1a6bff;--aw:#e63946;

  /* Pitch (preservado) */
  --g1:#3d8e43;--g2:#347a3a;--pl:rgba(255,255,255,.78);

  /* Fonts — templvm */
  --ff:'DM Sans',system-ui,sans-serif;
  --fd:'Cormorant Garamond',Georgia,serif;

  /* Grid */
  --cols:17;--rows:23;--cell:25px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);

  --sb-bg: color-mix(in srgb, #000 80%, transparent);
  --sb-border: rgba(255,255,255,.12);
  --sb-text: #ffffff;
}

/* ── LIGHT THEME OVERRIDES (UI only — pitch greens / team colors untouched) ── */
html[data-theme="light"]{
  --bg-base:#f6f0df;
  --bg-surface:#fffaf0;
  --bg-elevated:#fff7e6;
  --bg-card:#fffdf6;
  --bg-soft:#fff7e6;
  --border:#dfd2b1;
  --border-bright:#ceb98a;
  --text-primary:#000000;
  --text-secondary:#56627d;
  --text-muted:#4a4538;
  --text-faint:#7a7368;
  --accent:#111111;
  --accent-light:#000000;
  --accent-dim:#e8dfc6;
  --accent-glow:rgba(0,0,0,.06);
  --ghost-button-bg:#fff7e6;
  --ghost-button-border:#dfd2b1;
  --ghost-button-text:#3d4554;
  --ghost-button-hover:#f0e6c8;
  --sb-bg: color-mix(in srgb, #fff 80%, transparent);
  --sb-border: rgba(0,0,0,.1);
  --sb-text: #000000;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:100%;height:100%;overflow:hidden;
  background:var(--bg-base);color:var(--text-primary);
  font-family:var(--ff);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

.scr{position:fixed;inset:0;display:none;flex-direction:column}
.scr.on{display:flex;z-index:10}
#scr-setup.on{z-index:20}
#scr-setup.mid-match.on{z-index:35}
#scr-match.on{z-index:30}

/* ═══ LOBBY ═══ */
.lobby{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  gap:2rem;padding:max(6.5rem,20vh) 1.5rem 1.5rem;
  background:
    radial-gradient(ellipse at 50% 40%,var(--accent-glow) 0%,transparent 60%),
    var(--bg-base);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.lob-brand{text-align:center}
.hex{
  font-size:2.75rem;color:var(--accent);
  filter:drop-shadow(0 0 14px var(--accent-glow));
  animation:fl 4s ease-in-out infinite;
}
.lob-logo{
  display:block;width:clamp(48px,9vw,68px);height:auto;margin:0 auto;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.55));
  animation:fl 4s ease-in-out infinite;
}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.lob-brand h1{
  font-family:var(--fd);
  font-size:clamp(2.5rem,7vw,3.5rem);
  font-weight:700;letter-spacing:.14em;
  background:linear-gradient(135deg,var(--accent-light),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;margin-top:.5rem;
}
.tag{
  color:var(--text-muted);
  font-size:10px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  margin-top:.65rem;
}
.lob-footer{
  margin-top:auto;padding:2rem 0;text-align:center;
  font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--text-muted);opacity:0.6;
}
.lob-form{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:320px}
/* History flows below the form. Hero stays anchored at the top of the lobby
   (justify-content:flex-start). When the combined height exceeds the viewport,
   the lobby itself scrolls — the hero just goes off the top edge as you scroll
   instead of being pushed up by re-centering. */
.lob-history{
  width:100%;max-width:320px;
  margin-top:.5rem;
  display:flex;flex-direction:column;gap:.4rem;
}
.lob-history:empty{display:none}
.hist-title{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.hist-list{display:flex;flex-direction:column;gap:.35rem}
.hist-row{display:flex;align-items:center;gap:.6rem;padding:.45rem .55rem;border:1px solid var(--border);border-radius:8px;background:var(--bg-surface)}
.hist-row .hr-left{display:flex;flex-direction:column;flex:0 0 auto}
.hist-row .hr-code{font-family:var(--ff);font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--text-primary)}
.hist-row .hr-side{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.1em;margin-top:1px}
.hist-row .hr-mid{flex:1;display:flex;flex-direction:column;align-items:flex-start;font-size:10px;color:var(--text-secondary);min-width:0}
.hist-row .hr-mid .hr-status{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.hist-row .hr-mid .hr-score{font-size:13px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums}
.hist-row .hr-right{display:flex;gap:.3rem;flex-shrink:0}
.hist-row .hr-resume{padding:.25rem .6rem;font-size:10px}
.hist-row .hr-del{padding:.25rem .45rem;font-size:11px;line-height:1}
.half-sel{text-align:center}
.half-sel label{
  display:block;margin-bottom:.55rem;
  font-size:10px;font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.15em;
}
.half-opts{display:flex;gap:6px;justify-content:center}
.ho{
  padding:8px 18px;border-radius:8px;
  background:var(--ghost-button-bg);
  border:1px solid var(--ghost-button-border);
  color:var(--ghost-button-text);
  font-family:var(--ff);font-size:11px;font-weight:700;
  letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.ho:hover{color:var(--text-primary);border-color:var(--border-bright)}
.ho.on{
  background:var(--accent);color:var(--bg-base);
  border-color:var(--accent);
}

.dv{
  display:flex;align-items:center;gap:10px;
  margin:.25rem 0;
  color:var(--text-muted);
  font-size:10px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
}
.dv::before,.dv::after{content:'';flex:1;height:1px;background:var(--border)}

.jrow{display:flex;gap:6px;align-items:stretch}
.jrow #btn-join{
  padding:0 1.1rem;border-radius:12px;
  font-size:13px;font-weight:700;line-height:1;
  text-transform:uppercase;letter-spacing:.1em;
  height:44px;box-sizing:border-box;
}
#inp-code{
  flex:1;padding:0 1.1rem;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text-primary);
  font-family:var(--ff);font-size:1.05rem;font-weight:700;line-height:1;
  text-align:center;letter-spacing:.3em;text-transform:uppercase;
  outline:none;
  height:44px;box-sizing:border-box;
  transition:border-color .2s,background-color .2s;
}
#inp-code:focus{border-color:var(--accent);background:var(--bg-elevated)}
#inp-code::placeholder{color:var(--text-muted);font-weight:500;letter-spacing:.15em}

.msg{
  min-height:1em;text-align:center;
  font-size:11px;font-weight:600;
  color:var(--accent);letter-spacing:.05em;
}

/* ═══ BOTOES (templvm button system) ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--ff);font-weight:600;font-size:12px;
  padding:.65rem 1.1rem;border-radius:8px;
  border:1px solid transparent;cursor:pointer;
  letter-spacing:.05em;
  transition:background-color .2s,color .2s,border-color .2s,opacity .2s;
}
/* Primary — solid accent */
.btn.gold{
  background:var(--accent);color:var(--bg-base);
  border-color:var(--accent);
  padding:.8rem 1.1rem;border-radius:12px;
  font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
}
.btn.gold:hover{opacity:.9}
.btn.gold:disabled{opacity:.4;cursor:default}
/* Secondary — outlined prominent */
.btn.blue{
  background:transparent;color:var(--text-primary);
  border-color:var(--border-bright);
  padding:.8rem 1.1rem;border-radius:12px;
  font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
}
.btn.blue:hover{border-color:var(--accent);background:var(--ghost-button-hover)}
/* Tertiary — ghost */
.btn.outline{
  background:var(--ghost-button-bg);
  color:var(--ghost-button-text);
  border-color:var(--ghost-button-border);
  font-weight:600;
}
.btn.outline:hover{
  color:var(--text-primary);
  border-color:var(--border-bright);
  background:var(--ghost-button-hover);
}
/* Sizes */
.btn.sm{padding:.5rem .9rem;font-size:11px;border-radius:8px;letter-spacing:.08em}
.btn.gold.sm,.btn.blue.sm{padding:.5rem .95rem;font-size:11px;border-radius:8px}
.btn.full{width:100%}

/* ═══ BAR (frosted glass — templvm navbar) ═══ */
.bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  padding-top:calc(10px + var(--sat));
  background:color-mix(in srgb,var(--bg-base) 82%,transparent);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border-bottom:1px solid var(--border);
  flex-shrink:0;z-index:30;gap:8px;
}
.bar-l,.bar-r,.bar-c{display:flex;align-items:center;gap:8px}
.bar-title{
  font-family:var(--fd);font-size:1.1rem;font-weight:700;
  color:var(--text-primary);letter-spacing:.01em;
}
.sstat{
  font-size:10px;font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.1em;
}

/* ═══ TV-STYLE SCOREBOARD (top-left, horizontal) ═══ */
.scoreboard{
  position:absolute;
  top:calc(8px + var(--sat));
  left:8px;
  z-index:35;
  display:flex;flex-direction:column;
  padding:6px 12px 5px;
  background:var(--sb-bg);
  border:1px solid var(--sb-border);
  border-radius:9px;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  font-family:var(--ff);
  pointer-events:none;
}
.sb-main{
  display:flex;align-items:center;gap:8px;
  line-height:1.15;
  white-space:nowrap;
}
.sb-color{
  width:14px;height:14px;border-radius:2px;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
.sb-color.home-c{background:var(--hm)}
.sb-color.away-c{background:var(--aw)}
.sb-name{
  font-size:15px;font-weight:800;
  color:var(--sb-text);
  letter-spacing:.06em;
}
.sb-cards{
  display:flex;gap:2px;align-items:center;
  min-height:8px;
}
.sb-cards .cd{
  width:5px;height:8px;border-radius:.5px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.4);
}
.sb-cards .cd.y{background:#fbbf24}
.sb-cards .cd.r{background:#e63946}
.sb-score{
  font-size:21px;font-weight:900;
  color:var(--sb-text);
  font-variant-numeric:tabular-nums;
  padding:0 3px;
}
.sb-dash{
  color:rgba(255,255,255,.4);
  font-size:17px;font-weight:600;
  padding:0 1px;
}
.sb-meta{
  margin-top:4px;
  display:flex;align-items:center;justify-content:center;
}
.sb-sep{display:none}
#m-phase{display:none}
/* Big centered timer — soccer scoreboard style */
#m-rnd{
  font-size:15px;font-weight:900;
  color:var(--sb-text);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  background:rgba(80,40,180,.85);
  padding:2px 10px;
  border-radius:4px;
}

/* Dice chips — dual navbar readout (home=blue, away=red) */
.dice-chips{display:flex;gap:4px;align-items:center}
.dice-chip{
  min-width:28px;height:28px;padding:0 7px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--bg-elevated);border:1px solid var(--border);
  font-family:var(--ff);font-size:.88rem;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  transition:transform .28s cubic-bezier(.2,1,.3,1),opacity .28s,background-color .3s,color .3s,border-color .3s;
}
.dice-chip.dim{color:var(--text-muted)}
.dice-chip.fly{transform:scale(2.2);opacity:0}
.dice-chip.home-chip{color:#5ba8ff}
.dice-chip.away-chip{color:#ff6060}
.dice-chip.home-chip.rolled{background:rgba(60,120,255,.16);border-color:rgba(60,120,255,.35)}
.dice-chip.away-chip.rolled{background:rgba(255,60,60,.16);border-color:rgba(255,60,60,.35)}

/* 3-dot overflow */
.ab-menu{
  width:32px;height:32px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sb-bg);border:1px solid var(--sb-border);
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  color:var(--text-primary);
  cursor:pointer;
  transition:all .2s ease;
}
.ab-menu svg{opacity:0.6;transition:opacity .2s}
.ab-menu:hover svg{opacity:1}
#scr-match>.ab-menu{
  position:absolute;
  top:calc(8px + var(--sat));
  right:8px;
  z-index:36;
}
.ab-menu:hover{background:var(--bg-card);color:var(--text-primary);border-color:var(--border-bright)}
.ab-menu-pop{
  position:fixed;z-index:60;
  right:12px;
  top:calc(44px + var(--sat));
  min-width:160px;padding:6px;
  background:var(--sb-bg);border:1px solid var(--sb-border);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.mp-item{
  width:100%;padding:10px 12px;border-radius:8px;
  background:transparent;border:none;color:var(--text-primary);
  text-align:left;font-family:var(--ff);font-size:13px;font-weight:600;
  cursor:pointer;transition:background-color .2s;
  display:flex;align-items:center;gap:10px;
}
.mp-theme-row{
  display:flex;gap:4px;margin-bottom:4px;
}
.mp-chip{
  flex:1;padding:8px 12px;border-radius:6px;
  background:transparent;border:1px solid var(--border);
  color:var(--text-muted);font-family:var(--ff);font-size:11px;font-weight:700;
  cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.mp-chip:hover{color:var(--text-secondary);border-color:var(--border-bright)}
.mp-chip.on{
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--accent-light);
  border-color:var(--accent);
}
/* In light theme, the selected glass chip should be slightly darker/more tinted */
html[data-theme="light"] .mp-chip.on{
  background:color-mix(in srgb, var(--accent) 15%, #fff);
}
.mp-chip svg{opacity:0.35;transition:color .2s,opacity .2s}
.mp-chip.on svg{opacity:1}
.mp-chip.on .i-sun{color:#eab308}
.mp-chip.on .i-moon{color:#60a5fa}
.mp-chip.on .i-sys{color:var(--accent-light)}
.mp-item svg{opacity:0.6;transition:opacity 0.2s;flex-shrink:0;}
.mp-item:hover svg{opacity:1;}
.mp-sep{height:1px;background:var(--border);margin:4px 8px;}
.mp-item:hover{background:var(--bg-card)}

/* Dice overlay — dual soccer ball dice */
.dice-ov{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  animation:fade-in .2s ease-out;
}
.dice-ov.closing{animation:fade-out .25s ease-in forwards}
.dice-dual{display:flex;gap:clamp(18px,6vw,44px);align-items:flex-start}
.die-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.die-stack{
  position:relative;
  width:clamp(108px,27vw,152px);height:clamp(108px,27vw,152px);
}
.die-ball{
  width:100%;height:100%;object-fit:contain;
  display:block;
}
.die-num{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--ff);font-weight:900;
  font-size:clamp(15px,4.2vw,24px);
  font-variant-numeric:tabular-nums;letter-spacing:0;
  pointer-events:none;line-height:1;
  text-shadow:0 0 5px rgba(0,0,0,.98),0 1px 2px rgba(0,0,0,.92),0 0 10px rgba(0,0,0,.6);
}
.die-num.home{color:#5ba8ff}
.die-num.away{color:#ff6060}
.die-tag{
  font-family:var(--ff);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.32em;color:var(--text-muted);
}
.dice-lbl{
  margin-top:22px;font-family:var(--ff);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.32em;color:var(--text-secondary);
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{to{opacity:0}}

/* Lock Turn button inside action bar */
.ab-controls .btn.gold.sm{
  padding:.55rem 1rem;font-size:11px;
  letter-spacing:.08em;white-space:nowrap;
  border-radius:10px;
}

/* ═══ TABS ═══ */
.tabs{
  display:flex;gap:4px;align-items:center;
  padding:8px 12px;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0;overflow-x:auto;scrollbar-width:none;
}
/* 3-dot menu pinned to the top-right of the setup top tabs bar — no circle */
.setup-tabs-menu{
  margin-left:auto;
  width:30px;height:30px;
  background:transparent;color:var(--text-muted);
  border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;cursor:pointer;
  flex-shrink:0;
}
.setup-tabs-menu:hover{color:var(--text-primary)}
/* Reuse match-screen menu popup styling for setup + lobby */
#menu-pop-setup,
#menu-pop-lobby{
  position:absolute;
  top:calc(var(--sat,env(safe-area-inset-top,0px)) + 50px);
  right:12px;
  z-index:60;
  background:var(--bg-elevated);border:1px solid var(--border-bright);
  border-radius:10px;padding:4px;min-width:160px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
}
/* Lobby ⋮ button — top-right of the lobby screen */
.lobby-menu{
  position:absolute;
  top:calc(var(--sat,env(safe-area-inset-top,0px)) + 12px);
  right:12px;
  width:36px;height:36px;
  background:transparent;color:var(--text-muted);
  border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;cursor:pointer;
  z-index:50;
}
.lobby-menu:hover{color:var(--text-primary)}
/* Setup formation/marking strips (bottom action-bar — same style as in-game tactic strip).
   Padding inherited from .tactic-strip (400px desktop / 92px mobile / 86px ≤380px) so
   chips start 20px (desktop) or 10px (mobile) AFTER the last compact pcard. */
.setup-fmstrip{}
.setup-fmstrip .tac-chip{
  flex-shrink:0;
  padding:5px 10px;border-radius:8px;
  background:var(--ghost-button-bg);color:var(--ghost-button-text);
  border:1px solid var(--ghost-button-border);
  font-family:var(--ff);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  white-space:nowrap;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.setup-fmstrip .tac-chip:hover{color:var(--text-primary);border-color:var(--border-bright)}
.setup-fmstrip .tac-chip.on{
  background:color-mix(in srgb,var(--accent) 18%,var(--bg-elevated));
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 30%,var(--border));
}
.tabs::-webkit-scrollbar{display:none}
.tb{
  padding:6px 14px;border-radius:8px;
  background:transparent;color:var(--text-muted);
  border:1px solid transparent;
  font-family:var(--ff);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  white-space:nowrap;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.tb:hover{color:var(--text-secondary);background:var(--ghost-button-hover)}
.tb.on{
  background:color-mix(in srgb,var(--accent) 18%,var(--bg-elevated));
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 30%,var(--border));
}

/* ═══ SETUP ═══ */
/* Mirror the match layout: tabs + subtabs float at the top, setup-body fills the full viewport
   so the pitch centers at the exact same Y as in the match screen (not pushed down by the tabs).
   .scr already supplies position:fixed;inset:0, so we only tweak the flex here. */
#scr-setup .tabs{
  position:absolute;top:var(--sat,env(safe-area-inset-top,0px));left:0;right:0;z-index:30;
  background:color-mix(in srgb,var(--bg-surface) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
#scr-setup .subtabs{
  position:absolute;left:0;right:0;z-index:30;
  top:calc(var(--sat,env(safe-area-inset-top,0px)) + 42px); /* sits right below .tabs */
  background:color-mix(in srgb,var(--bg-soft) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.setup-body{
  flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;
  background:var(--bg-base);
}

/* Subtab navbar — formations & marking options */
.subtabs{
  display:flex;align-items:center;gap:10px;
  padding:6px 12px;
  background:var(--bg-soft);
  border-bottom:1px solid var(--border);
  flex-shrink:0;overflow-x:auto;scrollbar-width:none;
}
.subtabs::-webkit-scrollbar{display:none}
.subtab-group{display:flex;gap:6px}
.subtab-hint{
  margin-left:auto;flex-shrink:0;
  font-size:10px;color:var(--text-muted);
  letter-spacing:.02em;white-space:nowrap;
}
.fm,.mk{
  padding:6px 12px;border-radius:8px;
  background:var(--ghost-button-bg);
  border:1px solid var(--ghost-button-border);
  color:var(--ghost-button-text);
  font-family:var(--ff);font-size:11px;font-weight:700;
  letter-spacing:.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.mk{text-transform:uppercase;letter-spacing:.1em}
.fm:hover,.mk:hover{color:var(--text-primary);border-color:var(--border-bright)}
.fm.on,.mk.on{
  background:color-mix(in srgb,var(--accent) 18%,var(--bg-elevated));
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
}

/* ═══ PITCH — PRESERVADO (não modificar) ═══ */
.pitch-area{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:4px}
.pitch-scroll{display:flex;align-items:center;justify-content:center}
.pitch{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-template-rows:repeat(var(--rows),var(--cell));position:relative}
#setup-pitch{border-radius:3px}
.c{width:var(--cell);height:var(--cell);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .1s}
.c.l{background:var(--g1)}.c.d{background:var(--g2)}
.c:hover{filter:brightness(1.06)}

/* Highlights (preservado) */
/* Movement (mine: blues — walk light, sprint dark) */
.c.hl-walk{background:rgba(96,165,250,.32)!important;box-shadow:inset 0 0 0 1px rgba(96,165,250,.75), inset 0 0 8px rgba(96,165,250,.28)}
.c.hl-walk-turn{background:rgba(96,165,250,.28)!important;box-shadow:inset 0 0 0 1px rgba(96,165,250,.75), inset 0 0 8px rgba(96,165,250,.25);outline:1px dashed rgba(96,165,250,.85);outline-offset:-2px}
.c.hl-sprint{background:rgba(30,64,175,.42)!important;box-shadow:inset 0 0 0 1px rgba(30,64,175,.9), inset 0 0 8px rgba(30,64,175,.35)}
.c.hl-walk-path{background:rgba(96,165,250,.42)!important;box-shadow:inset 0 0 0 1px rgba(96,165,250,.9), inset 0 0 8px rgba(96,165,250,.35)}
.c.hl-sprint-path{background:rgba(30,64,175,.45)!important;box-shadow:inset 0 0 0 1px rgba(30,64,175,.95), inset 0 0 8px rgba(30,64,175,.4)}
/* Action paths (mine: purples — pass light, cross regular, kick/shoot dark) */
.c.hl-pass{background:rgba(216,180,254,.32)!important;box-shadow:inset 0 0 0 1px rgba(216,180,254,.7), inset 0 0 8px rgba(216,180,254,.25)}
.c.hl-pass-path{background:rgba(216,180,254,.42)!important;box-shadow:inset 0 0 0 1px rgba(216,180,254,.9), inset 0 0 8px rgba(216,180,254,.35)}
.c.hl-cross-path{background:rgba(168,85,247,.42)!important;box-shadow:inset 0 0 0 1px rgba(168,85,247,.9), inset 0 0 8px rgba(168,85,247,.35)}
.c.hl-shoot{background:rgba(88,28,135,.36)!important;box-shadow:inset 0 0 0 1px rgba(88,28,135,.9), inset 0 0 8px rgba(88,28,135,.35)}
.c.hl-shoot-path{background:rgba(88,28,135,.5)!important;box-shadow:inset 0 0 0 1px rgba(88,28,135,1), inset 0 0 8px rgba(88,28,135,.45)}
.c.hl-kick-path{background:rgba(88,28,135,.5)!important;box-shadow:inset 0 0 0 1px rgba(88,28,135,1), inset 0 0 8px rgba(88,28,135,.45)}
.c.hl-passable{background:rgba(96,165,250,.07)!important;box-shadow:inset 0 0 0 1px rgba(96,165,250,.18)}
/* Adversary overrides — reds for walk/sprint, oranges for pass/cross/kick */
.c.opp-plan.hl-walk-path{background:rgba(248,113,113,.42)!important;box-shadow:inset 0 0 0 1px rgba(248,113,113,.9), inset 0 0 8px rgba(248,113,113,.35)}
.c.opp-plan.hl-sprint-path{background:rgba(153,27,27,.45)!important;box-shadow:inset 0 0 0 1px rgba(153,27,27,.95), inset 0 0 8px rgba(153,27,27,.4)}
.c.opp-plan.hl-pass-path{background:rgba(253,186,116,.42)!important;box-shadow:inset 0 0 0 1px rgba(253,186,116,.9), inset 0 0 8px rgba(253,186,116,.35)}
.c.opp-plan.hl-cross-path{background:rgba(251,146,60,.42)!important;box-shadow:inset 0 0 0 1px rgba(251,146,60,.9), inset 0 0 8px rgba(251,146,60,.35)}
.c.opp-plan.hl-shoot-path{background:rgba(154,52,18,.45)!important;box-shadow:inset 0 0 0 1px rgba(154,52,18,.95), inset 0 0 8px rgba(154,52,18,.4)}
.c.opp-plan.hl-kick-path{background:rgba(154,52,18,.45)!important;box-shadow:inset 0 0 0 1px rgba(154,52,18,.95), inset 0 0 8px rgba(154,52,18,.4)}

/* ═══ AWAY-SIDE PALETTE SWAP ═══
   When the local user joined as P2 (away), their MINE plans use the red/orange
   family (their color is red), and the adversary (home) uses the blue/purple
   family. Achieved by swapping the visible cell-overlay backgrounds when
   body.side-away is set.
*/
body.side-away .c.hl-walk:not(.opp-plan){background:rgba(248,113,113,.32)!important;box-shadow:inset 0 0 0 1px rgba(248,113,113,.75), inset 0 0 8px rgba(248,113,113,.28)}
body.side-away .c.hl-walk-turn:not(.opp-plan){background:rgba(248,113,113,.28)!important;box-shadow:inset 0 0 0 1px rgba(248,113,113,.75), inset 0 0 8px rgba(248,113,113,.25);outline:1px dashed rgba(248,113,113,.85);outline-offset:-2px}
body.side-away .c.hl-sprint:not(.opp-plan){background:rgba(153,27,27,.42)!important;box-shadow:inset 0 0 0 1px rgba(153,27,27,.9), inset 0 0 8px rgba(153,27,27,.35)}
body.side-away .c.hl-walk-path:not(.opp-plan){background:rgba(248,113,113,.42)!important;box-shadow:inset 0 0 0 1px rgba(248,113,113,.9), inset 0 0 8px rgba(248,113,113,.35)}
body.side-away .c.hl-sprint-path:not(.opp-plan){background:rgba(153,27,27,.45)!important;box-shadow:inset 0 0 0 1px rgba(153,27,27,.95), inset 0 0 8px rgba(153,27,27,.4)}
body.side-away .c.hl-pass:not(.opp-plan){background:rgba(253,186,116,.32)!important;box-shadow:inset 0 0 0 1px rgba(253,186,116,.7), inset 0 0 8px rgba(253,186,116,.25)}
body.side-away .c.hl-pass-path:not(.opp-plan){background:rgba(253,186,116,.42)!important;box-shadow:inset 0 0 0 1px rgba(253,186,116,.9), inset 0 0 8px rgba(253,186,116,.35)}
body.side-away .c.hl-cross-path:not(.opp-plan){background:rgba(251,146,60,.42)!important;box-shadow:inset 0 0 0 1px rgba(251,146,60,.9), inset 0 0 8px rgba(251,146,60,.35)}
body.side-away .c.hl-shoot:not(.opp-plan){background:rgba(154,52,18,.36)!important;box-shadow:inset 0 0 0 1px rgba(154,52,18,.9), inset 0 0 8px rgba(154,52,18,.35)}
body.side-away .c.hl-shoot-path:not(.opp-plan){background:rgba(154,52,18,.5)!important;box-shadow:inset 0 0 0 1px rgba(154,52,18,1), inset 0 0 8px rgba(154,52,18,.45)}
body.side-away .c.hl-kick-path:not(.opp-plan){background:rgba(154,52,18,.5)!important;box-shadow:inset 0 0 0 1px rgba(154,52,18,1), inset 0 0 8px rgba(154,52,18,.45)}
/* When playing as away, the OPPONENT (home) overlay uses the blue/purple family */
body.side-away .c.opp-plan.hl-walk-path{background:rgba(96,165,250,.42)!important;box-shadow:inset 0 0 0 1px rgba(96,165,250,.9), inset 0 0 8px rgba(96,165,250,.35)}
body.side-away .c.opp-plan.hl-sprint-path{background:rgba(30,64,175,.45)!important;box-shadow:inset 0 0 0 1px rgba(30,64,175,.95), inset 0 0 8px rgba(30,64,175,.4)}
body.side-away .c.opp-plan.hl-pass-path{background:rgba(216,180,254,.42)!important;box-shadow:inset 0 0 0 1px rgba(216,180,254,.9), inset 0 0 8px rgba(216,180,254,.35)}
body.side-away .c.opp-plan.hl-cross-path{background:rgba(168,85,247,.42)!important;box-shadow:inset 0 0 0 1px rgba(168,85,247,.9), inset 0 0 8px rgba(168,85,247,.35)}
body.side-away .c.opp-plan.hl-shoot-path{background:rgba(88,28,135,.5)!important;box-shadow:inset 0 0 0 1px rgba(88,28,135,1), inset 0 0 8px rgba(88,28,135,.45)}
body.side-away .c.opp-plan.hl-kick-path{background:rgba(88,28,135,.5)!important;box-shadow:inset 0 0 0 1px rgba(88,28,135,1), inset 0 0 8px rgba(88,28,135,.45)}
.c.hl-plan-dest{outline:2px dashed rgba(255,255,255,.85);outline-offset:-3px;z-index:2}
.c.hl-self{box-shadow:inset 0 0 0 2px rgba(255,255,255,.95),inset 0 0 10px rgba(255,255,255,.25)!important;z-index:4}
.c.hl{background:rgba(197,164,78,.32)!important;box-shadow:inset 0 0 0 1px rgba(197,164,78,.7), inset 0 0 8px rgba(197,164,78,.25)}
.c.hl-rec{background:rgba(197,164,78,.42)!important;box-shadow:inset 0 0 0 1px rgba(197,164,78,.9), inset 0 0 8px rgba(197,164,78,.35)}
.c.hl-zone{background:rgba(46,204,113,.28)!important;box-shadow:inset 0 0 0 1px rgba(46,204,113,.7), inset 0 0 8px rgba(46,204,113,.22)}
.c.hl-zone-ring{background:rgba(46,204,113,.25)!important;box-shadow:inset 0 0 0 1px rgba(46,204,113,.65)}
.c.hl-zone-core{background:rgba(46,204,113,.5)!important;box-shadow:inset 0 0 0 1px rgba(46,204,113,.95), inset 0 0 8px rgba(46,204,113,.4)}

.c.mk-pa-t{border-top:2px solid var(--pl)}
.c.mk-pa-b{border-bottom:2px solid var(--pl)}
.c.mk-pa-l{border-left:2px solid var(--pl)}
.c.mk-pa-r{border-right:2px solid var(--pl)}
.c.mk-ga-t{border-top:2px solid var(--pl)}
.c.mk-ga-b{border-bottom:2px solid var(--pl)}
.c.mk-ga-l{border-left:2px solid var(--pl)}
.c.mk-ga-r{border-right:2px solid var(--pl)}
.c.mk-goal{background-color:#2a5c30!important;background-image:linear-gradient(to right,rgba(255,255,255,.45) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.45) 1px,transparent 1px)!important;background-size:5px 5px!important}
.c.l.oob:not(.mk-goal),.c.d.oob:not(.mk-goal){background:transparent!important}

/* ═══ PIECES ═══ */
.pc{
  position:absolute;z-index:var(--pz,5);pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
  width:28px;
  transition:left .3s cubic-bezier(.22,1,.36,1),top .3s cubic-bezier(.22,1,.36,1),transform .12s;
  transform-origin:bottom center;
}
.pc:hover{transform:translateY(-1px)}
.pc.sel{transform:translateY(-2px);filter:drop-shadow(0 0 6px var(--accent))}
.pc-sprite{
  width:26px;height:42px;
  object-fit:contain;object-position:bottom center;
  pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));
  transition:transform .2s;
  position:relative;z-index:1;
}
.pc.home .pc-sprite{filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)) drop-shadow(0 0 2px var(--hm))}
.pc.away .pc-sprite{filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)) drop-shadow(0 0 2px var(--aw));transform:scaleY(1)}
.pc-num{
  position:absolute;top:23px;left:50%;transform:translateX(-50%);
  min-width:5px;height:4px;padding:0 .5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--hm);color:#fff;
  font-family:var(--ff);font-size:3px;font-weight:900;line-height:1;letter-spacing:-.3px;
  border-radius:1px;
  box-shadow:0 .5px .5px rgba(0,0,0,.5);
  pointer-events:none;z-index:2;
}
.pc.away .pc-num{background:var(--aw)}
.pc.home.gk .pc-num{background:#6b1f4a}
.pc.away.gk .pc-num{background:#e37c1d}
.pc[data-facing="E"] .pc-num,.pc[data-facing="W"] .pc-num{display:none}
.pc-hp{width:22px;height:2.5px;border-radius:1px;background:rgba(0,0,0,.4);margin-top:1px;overflow:hidden}
.pc-hpf{height:100%;background:#4ade80;border-radius:1px;transition:width .3s}
.pc.has-ball::before{
  content:'';position:absolute;
  width:10px;height:10px;
  background:url('../assets/ball.svg') center/contain no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
  z-index:6;
  /* Default (S): ball at feet, inside sprite bottom */
  bottom:3px;left:50%;top:auto;transform:translateX(-50%);
}
/* N: player back to viewer — ball at player's feet (top of cell), behind sprite */
.pc[data-facing="N"].has-ball::before{top:1px;bottom:auto;left:50%;transform:translateX(-50%);z-index:0}
/* Side-facing: ball offset toward facing direction at ground level */
.pc[data-facing="E"].has-ball::before{bottom:4px;top:auto;left:calc(50% + 13px);transform:translateX(-50%)}
.pc[data-facing="W"].has-ball::before{bottom:4px;top:auto;left:calc(50% - 13px);transform:translateX(-50%)}
.pc.home.has-ball .pc-sprite,
.pc.away.has-ball .pc-sprite{filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)) drop-shadow(0 0 3px #ffd700) drop-shadow(0 0 6px rgba(255,215,0,.65))!important}

/* Loose ball (no carrier) */
.loose-ball{
  position:absolute;
  width:12px;height:12px;
  background:url('../assets/ball.svg') center/contain no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(255,255,255,.45));
  z-index:8;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:ball-idle .5s ease-in-out infinite alternate;
}
@keyframes ball-idle{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.12)}}

/* ═══ MATCH BODY — field-extended background ═══ */
#scr-match.on{display:flex;flex-direction:column}
.match-body{
  flex:1;display:flex;overflow:hidden;position:relative;z-index:1;
  background-color:#275a2c;
  background-image:repeating-linear-gradient(0deg,#275a2c 0,#275a2c var(--cell),#2a6330 var(--cell),#2a6330 calc(var(--cell)*2));
  background-position:0 calc(50% + var(--cell)/2);
}

/* ═══ STADIUM OVERLAY (transparent oval center reveals grass below) ═══ */
.stadium-bg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:1;
  pointer-events:none;
}

/* ═══ LED ADVERTISING BAND (end-to-end, 1 cell above the top goal line) ═══ */
.led-band{
  position:absolute;
  /* 1 cell outside each touchline: ±8.5 touchline + 1 = ±9.5 from center */
  left:calc(50% - 9.5 * var(--cell));
  width:calc(19 * var(--cell));
  top:calc(50% - 13.5 * var(--cell));
  height:var(--cell);
  z-index:3;
  overflow:hidden;
  border-radius:14px 14px 0 0;
  clip-path:inset(0 0 0 0 round 14px 14px 0 0);
  background:#050505;
  border-top:1px solid #1a1a1a;
  border-bottom:1px solid #1a1a1a;
  box-shadow:0 2px 8px rgba(0,0,0,.6),inset 0 0 6px rgba(0,0,0,.85);
}
.led-track{
  display:flex;align-items:center;gap:48px;
  height:100%;padding:0 24px;
  width:max-content;
  animation:led-scroll 32s linear infinite;
  will-change:transform;
}
.led-track img{
  height:62%;width:auto;flex-shrink:0;
  filter:brightness(1.15) drop-shadow(0 0 2px rgba(255,255,255,.35));
  opacity:.95;
}
@keyframes led-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* RGB subpixel overlay */
.led-band::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:14px 14px 0 0;
  background:repeating-linear-gradient(90deg,
    rgba(255,40,40,.32) 0 1px,
    rgba(40,255,40,.32) 1px 2px,
    rgba(40,80,255,.32) 2px 3px);
  mix-blend-mode:screen;
  opacity:.85;
  z-index:2;
}
/* Scanlines */
.led-band::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:14px 14px 0 0;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.45) 0 1px,
    transparent 1px 3px);
  z-index:3;
}

/* ═══ ACTION BAR (bottom nav — templvm PWA style) ═══ */
.action-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  padding-bottom:calc(8px + var(--sab));
  background:color-mix(in srgb,var(--bg-base) 82%,transparent);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border-top:1px solid var(--border);
}
@media(display-mode:standalone){
  .action-bar{
    left:8px;right:8px;
    /* Lift +10px in PWA so it clears the iPhone home indicator */
    bottom:calc(18px + var(--sab));
    padding-bottom:8px;
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:0 8px 24px rgba(0,0,0,.5);
  }
}
.ab-controls{
  display:flex;align-items:center;gap:8px;
  margin-left:auto;flex-shrink:0;
}

/* ═══ TACTIC PRESET STRIP (inline in action-bar, right of cards, left of Lock) ═══ */
/* padding-left skips past the absolutely-positioned card stack (11 players, fixed width) */
.tactic-strip{
  flex:1 1 0;min-width:0;
  display:flex;gap:5px;align-items:center;
  overflow-x:auto;scrollbar-width:none;
  white-space:nowrap;
  /* Desktop: 8px strip-left + (62 + 10×31)=372px cards + 20px gap = 400px */
  padding:0 2px 0 400px;
}
@media(max-width:560px){
  /* Compact stack: 8px(left) + 44px(first card) + 10*3px(slivers) + 10px(gap) ≈ 92px */
  .tactic-strip{padding-left:92px}
}
@media(max-width:380px){
  /* Compact stack: 8px(left) + 38px(first card) + 10*3px(slivers) + 10px(gap) ≈ 86px */
  .tactic-strip{padding-left:86px}
}
.tactic-strip:empty{display:none}
.tactic-strip::-webkit-scrollbar{display:none}
.tac-label{
  flex-shrink:0;
  font-family:var(--ff);font-size:9px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);padding:0 4px;
}
.tac-btn{
  flex-shrink:0;
  padding:6px 14px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--ghost-button-bg);
  color:var(--text-secondary);
  font-family:var(--ff);font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s;
  white-space:nowrap;
}
.tac-btn:hover{
  background:var(--ghost-button-hover);
  color:var(--text-primary);
  border-color:var(--border-bright);
}
.tac-btn.atk{
  border-color:color-mix(in srgb,var(--tac-c,var(--hm)) 35%,transparent);
  color:color-mix(in srgb,var(--tac-c,var(--hm)) 90%,#fff);
}
.tac-btn.atk:hover{
  background:color-mix(in srgb,var(--tac-c,var(--hm)) 14%,transparent);
  border-color:color-mix(in srgb,var(--tac-c,var(--hm)) 65%,transparent);
}
.tac-btn.def{
  border-color:color-mix(in srgb,var(--tac-c,var(--hm)) 35%,transparent);
  color:color-mix(in srgb,var(--tac-c,var(--hm)) 90%,#fff);
}
.tac-btn.def:hover{
  background:color-mix(in srgb,var(--tac-c,var(--hm)) 14%,transparent);
  border-color:color-mix(in srgb,var(--tac-c,var(--hm)) 65%,transparent);
}

/* Legacy strip-toggle removed — pcard-strip uses tap-to-fan instead */
.strip-toggle{display:none !important}

/* ═══ EXPANDED CARD STRIP (mobile full-width overlay) ═══ */
.pcard-strip.strip-expanded{
  position:fixed !important;
  left:0 !important;right:0 !important;
  bottom:0 !important;
  max-width:none !important;
  padding:8px 10px calc(var(--sab,0px) + 8px) !important;
  background:var(--bg-elevated) !important;
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-top:1px solid var(--border-bright) !important;
  z-index:200;
  gap:8px !important;
  overflow-x:auto;
  align-items:flex-end;
  height:auto;
}
.pcard-strip.strip-expanded .pcard{
  margin-left:0 !important;
  width:62px !important;height:78px !important;
}
.pcard-strip.strip-expanded .pcard .pc-face-num{font-size:18px !important}
.pcard-strip.strip-expanded .pcard .pc-name{max-width:44px !important;font-size:8px !important}
.pcard-strip.strip-expanded .strip-toggle{border-right:none;padding-right:0}
@media(display-mode:standalone){
  .pcard-strip.strip-expanded{
    padding-bottom:calc(var(--sab,0px) + 20px) !important;
  }
}

.m-info{
  display:flex;align-items:center;gap:10px;
  flex:1;min-width:0;
}
/* Legacy info hud — superseded by the player cards strip. Kept in DOM for existing code paths. */
#scr-match .action-bar > .m-info,
#scr-setup .m-info{display:none !important}

/* Legacy floating back-to-match button — kept in DOM for existing JS that sets .style.display,
   but never visible: the bottom-right Ready button now flips into "← MATCH" during setup-during-match. */
.setup-back-float{display:none !important}
.mi-shirt{
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff);font-size:13px;font-weight:800;color:#fff;
  letter-spacing:.02em;
}
.mi-data{display:flex;flex-direction:column;min-width:0;flex-shrink:1}
.mi-name{
  font-size:12px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;
}
.mi-tier{
  margin-top:1px;
  font-size:10px;font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.1em;
  white-space:nowrap;
}
/* Compass direcional — templvm ghost grid */
.mi-turn{
  display:grid;
  grid-template-columns:repeat(3,20px);
  grid-template-rows:repeat(3,20px);
  gap:2px;flex-shrink:0;
  padding:2px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:8px;
}
.mi-turn .tbn{
  padding:0;margin:0;cursor:pointer;
  background:var(--ghost-button-bg);
  border:1px solid var(--ghost-button-border);
  color:var(--text-muted);
  border-radius:4px;
  font-family:var(--ff);font-size:11px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .2s,color .2s,border-color .2s;
}
.mi-turn .tbn:hover{color:var(--text-primary);border-color:var(--border-bright);background:var(--ghost-button-hover)}
.mi-turn .tbn.on{
  background:var(--accent);color:var(--bg-base);
  border-color:var(--accent);
}
.mi-turn .tbn[data-face="N"]{grid-column:2;grid-row:1}
.mi-turn .tbn[data-face="W"]{grid-column:1;grid-row:2}
.mi-turn .tbn[data-face="E"]{grid-column:3;grid-row:2}
.mi-turn .tbn[data-face="S"]{grid-column:2;grid-row:3}

.mi-hpw{
  display:flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;
  color:var(--text-secondary);
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  text-transform:uppercase;
  flex-shrink:0;
}
.mi-hpbar{
  width:52px;height:4px;
  background:rgba(255,255,255,.08);
  border-radius:2px;overflow:hidden;
}
.mi-hpf{height:100%;background:#4ade80;border-radius:2px;transition:width .3s}

.mi-legend{
  display:flex;gap:10px;margin-left:auto;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  flex-shrink:0;
}
.lg{display:flex;align-items:center;gap:4px;color:var(--text-muted)}
.lg.walk{color:#4ade80}
.lg.sprint{color:#fbbf24}
.lg.pass{color:#1a6bff}
.lg.shoot{color:#e63946}

/* Esconde legenda em telas estreitas */
@media(max-width:560px){.mi-legend{display:none}}
@media(max-width:400px){
  .action-bar{gap:8px;padding:6px 10px}
  .m-info{gap:8px}
  .mi-shirt{width:30px;height:30px;font-size:12px}
  .mi-turn{grid-template-columns:repeat(3,18px);grid-template-rows:repeat(3,18px)}
  .scoreboard{min-width:92px;padding:4px 6px 3px}
  .sb-score{font-size:12px}
  #m-rnd{font-size:13px;padding:2px 7px}
}

/* ═══ OVERLAY / MODAL (templvm) ═══ */
.overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  z-index:50;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--bg-elevated);
  border:1px solid var(--border-bright);
  border-radius:16px;
  padding:1.75rem 1.5rem;
  max-width:360px;width:90%;text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  animation:scaleIn .25s cubic-bezier(.16,1,.3,1);
}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal h2{
  margin-bottom:.4rem;
  font-family:var(--fd);font-size:1.6rem;font-weight:700;
  color:var(--text-primary);letter-spacing:.01em;
}
.modal p{
  margin-bottom:1rem;
  font-size:12px;color:var(--text-secondary);letter-spacing:.02em;
}
.code-big{
  margin-bottom:1rem;padding:.9rem;
  font-family:var(--ff);font-size:2rem;font-weight:800;
  color:var(--accent);
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:12px;
  letter-spacing:.3em;
  font-variant-numeric:tabular-nums;
}
.inv-btns{display:flex;gap:6px;justify-content:center;margin-bottom:.75rem}
.wait{
  margin-bottom:.75rem;
  font-size:10px;font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.15em;
  animation:pu 2s ease-in-out infinite;
}
@keyframes pu{0%,100%{opacity:1}50%{opacity:.3}}
.res-m{max-width:420px}
.rlog{
  margin-bottom:1rem;padding:10px;
  max-height:200px;overflow-y:auto;
  text-align:left;
  font-size:11px;color:var(--text-secondary);line-height:1.5;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:8px;
}
.rlog .rl{padding:3px 0;border-bottom:1px solid var(--border)}
.rlog .rl:last-child{border-bottom:none}
.rl.goal{color:#fbbf24;font-weight:700}
.rl.foul{color:#ef4444}

/* ═══ TACTICAL BOARD (setup frame) ═══ */
.tac-board{
  border:10px solid #2563eb;
  border-radius:20px;
  padding:12px;
  overflow:hidden;
  background-color:#275a2c;
  background-image:repeating-linear-gradient(0deg,#275a2c 0,#275a2c var(--cell),#2a6330 var(--cell),#2a6330 calc(var(--cell)*2));
  box-shadow:0 0 0 3px rgba(37,99,235,.3),0 8px 40px rgba(0,0,0,.7);
}
/* 2-player (human vs human) match: red frame instead of blue */
.tac-board.vs-human{
  border-color:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.3),0 8px 40px rgba(0,0,0,.7);
}

/* ═══ MARKING / PRESS HIGHLIGHTS ═══ */
.c.hl-mark{background:rgba(251,146,60,.38)!important;box-shadow:inset 0 0 0 1px rgba(251,146,60,.85),inset 0 0 8px rgba(251,146,60,.3)}
.c.hl-mark:hover{background:rgba(251,146,60,.6)!important}
.c.hl-press-line{box-shadow:inset 0 2px 0 0 rgba(239,68,68,.9),inset 0 -2px 0 0 rgba(239,68,68,.9)!important}

/* ═══ STADIUM SURROUNDS ═══ */
/* Left side bar only — right side reserved for player benches */
.stadium-side-l{
  position:absolute;
  z-index:2;
  top:calc(50% - 12.5 * var(--cell));
  bottom:calc(50% - 12.5 * var(--cell));
  width:4px;
  left:calc(50% - 9.5 * var(--cell));
  pointer-events:none;
  background-color:#0e0e0e;
  background-image:repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent calc(var(--cell) * 2 - 2px),
    #2a2a2a calc(var(--cell) * 2 - 2px),
    #2a2a2a calc(var(--cell) * 2)
  );
}
/* Bottom bar — same width and style as LED band on top */
.stadium-floor{
  position:absolute;
  z-index:2;
  left:calc(50% - 9.5 * var(--cell));
  width:calc(19 * var(--cell));
  top:calc(50% + 12.5 * var(--cell));
  height:var(--cell);
  border-radius:0 0 14px 14px;
  background:#050505;
  border-top:1px solid #1a1a1a;
  border-bottom:1px solid #1a1a1a;
  box-shadow:0 2px 8px rgba(0,0,0,.6),inset 0 0 6px rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:space-around;
  padding:0 24px;
  pointer-events:none;
}
.sf-pillar{
  flex-shrink:0;
  width:3px;height:60%;
  background:linear-gradient(180deg,#2a2a2a 0%,#111 100%);
  border-radius:1px;
  opacity:.7;
}

/* ═══ LED CORNER RETURNS (right side — top drops down, bottom rises up) ═══ */
.led-corner-r{
  position:absolute;
  z-index:3;
  left:calc(50% + 9.5 * var(--cell) - 4px);
  width:4px;
  background:#0e0e0e;
  background-image:repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent calc(var(--cell) * 2 - 2px),
    #2a2a2a calc(var(--cell) * 2 - 2px),
    #2a2a2a calc(var(--cell) * 2)
  );
  pointer-events:none;
}
.led-corner-r-top{
  top:calc(50% - 12.5 * var(--cell));
  height:calc(4 * var(--cell));
  border-bottom:1px solid #1a1a1a;
  border-radius:0 0 4px 4px;
}
.led-corner-r-bot{
  top:calc(50% + 8.5 * var(--cell));
  height:calc(4 * var(--cell));
  border-top:1px solid #1a1a1a;
  border-radius:4px 4px 0 0;
}

/* ═══ PLAYER BENCHES ═══ */
.bench-zone{
  position:absolute;
  z-index:2;
  /* just right of the OOB column (pitch element right edge) */
  left:calc(50% + 8.5 * var(--cell) + 4px);
  /* vertically span the playable area */
  top:calc(50% - 11.5 * var(--cell));
  height:calc(23 * var(--cell));
  display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;
  pointer-events:none;
  gap:calc(var(--cell) * 0.5);
}
.bench{
  width:calc(var(--cell) * 4.46);
  height:auto;
  display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));
}

/* ═══ PLAYER CARDS STRIP (absolute — cards overflow above action-bar) ═══ */
.action-bar{overflow:visible}
.pcard-strip{
  position:absolute;
  left:8px;bottom:4px;
  display:flex;align-items:flex-end;gap:0;
  overflow:visible;
  padding:0 2px 0;
  margin:0;
  scrollbar-width:none;
  pointer-events:auto;
}
.pcard-strip::-webkit-scrollbar{display:none}
/* Match screen: cards always viewport-fixed so flex layout changes can't push them */
#scr-match .pcard-strip{
  position:fixed;
  left:8px;bottom:4px;
}
@media(display-mode:standalone){
  #scr-match .pcard-strip{
    /* +10px lift in PWA — keeps cards clear of the iPhone home indicator */
    bottom:calc(18px + var(--sab,0px));
  }
}

/* ── PLAYER CARD — light "Magic card" style ── */
.pcard{
  position:relative;flex:0 0 auto;
  width:62px;height:104px;
  margin-left:-31px;
  border-radius:6px;
  border:1.5px solid #8a7a58;
  background:linear-gradient(175deg,#f8f4ec 0%,#ede7d8 100%);
  color:#1a1505;
  cursor:pointer;
  display:flex;flex-direction:column;
  scroll-snap-align:start;
  transition:transform .18s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s;
  box-shadow:
    -2px 0 2px rgba(0,0,0,.28),
    0 2px 8px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.7);
  overflow:hidden;
  user-select:none;
}
.pcard:first-child,
.strip-toggle + .pcard{margin-left:0}

/* Top row: pos group left, tier right */
.pcard .pc-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:2px 4px 1px;
  border-bottom:1px solid rgba(0,0,0,.07);
  flex-shrink:0;
}
.pcard .pc-grp{
  font-family:var(--ff);font-size:7.5px;font-weight:900;
  text-transform:uppercase;letter-spacing:.06em;color:#1a1a1a;
}
.pcard .pc-tier-code{
  font-family:var(--ff);font-size:6.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;
  color:#6b5a38;background:rgba(0,0,0,.09);
  padding:0 3px;border-radius:2px;
}

/* Portrait — team color background, player SVG on top */
.pcard .pc-portrait{
  flex:0 0 48px;
  margin:0 4px;
  border-radius:5px;
  background:var(--hm);
  overflow:hidden;display:flex;align-items:flex-end;justify-content:center;
}
.pcard[data-team="away"] .pc-portrait{background:var(--aw)}
/* Away cards already use player-profile-pic-red.svg — no filter needed */
.pcard .pc-portrait img{
  width:88%;height:88%;object-fit:contain;object-position:center bottom;
  display:block;
}

/* Name */
.pcard .pc-namebar{padding:1px 4px 0;flex-shrink:0}
.pcard .pc-name{
  display:block;
  font-family:var(--ff);font-size:7px;font-weight:700;
  color:#1a1505;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 6 stats — numbers only, 3×2 grid */
.pcard .pc-attrs6{
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:1px 3px 0;gap:1px;flex-shrink:0;
}
.pcard .pc-attrs6 span{
  font-family:var(--ff);font-size:7px;font-weight:800;
  color:#2a1f0a;text-align:center;
  font-variant-numeric:tabular-nums;line-height:1.4;
}

/* Bottom: HP pips */
.pcard .pc-pips{
  display:flex;gap:2px;padding:3px 4px 7px;
  justify-content:center;flex-shrink:0;margin-top:auto;
}
.pcard .pc-pip{
  flex:1;height:5px;border-radius:2px;
  background:rgba(0,0,0,.1);
  transition:background .3s;
}
.pcard .pc-pip.hp-hi{background:#16a34a}
.pcard .pc-pip.hp-md{background:#ca8a04}
.pcard .pc-pip.hp-lo{background:#dc2626}

/* States */
.pcard:hover{
  transform:translateY(-5px);z-index:500 !important;
  border-color:#a08c60;
  box-shadow:-2px 0 2px rgba(0,0,0,.28),0 8px 18px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.75);
}
.pcard.has-ball{
  border-color:#ffd700;
  box-shadow:0 0 0 1.5px #ffd700,0 2px 8px rgba(255,215,0,.4);
}
.pcard.planned::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--hm);opacity:.9;
}
.pcard.away-c.planned::after{background:var(--aw)}
.pcard.raised{
  transform:translateY(-18px) scale(1.1);z-index:999 !important;
  border-color:#c4a84a;
  box-shadow:0 0 0 1.5px #c4a84a,0 16px 28px rgba(0,0,0,.5),
    0 0 22px rgba(196,168,74,.3);
}

/* Mobile */
@media(max-width:560px){
  .pcard{width:44px;height:70px;margin-left:-38px}
  .pcard:first-child{margin-left:0}
  .pcard .pc-portrait{flex:0 0 32px}
  .pcard .pc-attrs6{display:none}
  .pcard .pc-namebar{display:none}
  .pcard .pc-pip{height:4px}
  .pcard .pc-top{padding:1px 3px}
  #scr-setup .action-bar .sstat{display:none}
  /* Tighter LOCK button on mobile so the cards/suggestions have more room */
  #scr-match .ab-controls .btn,
  #btn-lock{padding:0 10px;font-size:10px;height:30px;min-width:0}
}
@media(max-width:380px){
  .pcard{width:38px;height:60px;margin-left:-32px}
  .pcard .pc-portrait{flex:0 0 26px}
  .pcard .pc-grp{font-size:6px}
  .pcard .pc-tier-code{display:none}
  .pcard .pc-pips{padding:2px 3px 3px;gap:1px}
}
/* Mobile: extra-tight compact stack (~3px sliver per card, last card full) */
@media(max-width:560px){
  .pcard{margin-left:-41px}
  .pcard:first-child{margin-left:0}
}
@media(max-width:380px){
  .pcard{margin-left:-35px}
  .pcard:first-child{margin-left:0}
}

/* Mobile FAN state: cards stay at their CURRENT position and CURRENT size,
   they just spread out to the right (less overlap). Nothing else moves.
   Above-card area is covered by a transparent click-blocker so taps on the
   navbar below don't accidentally trigger Lock / dice / etc. */
@media(max-width:560px){
  .pcard-strip.fanned,
  #scr-match .pcard-strip.fanned,
  #scr-setup .pcard-strip.fanned{
    /* Same fixed position as the compact stack — DO NOT move */
    overflow:visible !important;
    z-index:310;
    pointer-events:auto;
    /* Allow the strip to expand to the right but not be clipped */
    right:auto !important;
    width:auto;
    background:transparent !important;
    border:none !important;
    padding:0 !important;
  }
  /* Same size as compact — only the overlap changes (cards spread right) */
  .pcard-strip.fanned .pcard{margin-left:-10px !important}
  .pcard-strip.fanned .pcard:first-child{margin-left:0 !important}
}
.strip-fan-close{display:none !important}
.strip-fan-block{display:none !important}

/* ═══ ON-FIELD ANIMATIONS ═══ */
/* Animated ball element */
.anim-ball{
  position:absolute;width:14px;height:14px;border-radius:50%;
  pointer-events:none;z-index:10;transform:translate(-50%,-50%);
  background:url('../assets/ball.svg') center/contain no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 6px rgba(255,255,255,.5));
}
.anim-ball-shot{filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(248,113,113,.9));}
.anim-ball-pass{filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 7px rgba(96,165,250,.9));}
.anim-ball-cross{filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 7px rgba(192,132,252,.9));}
.anim-ball-kick{filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 7px rgba(253,230,138,.9));}
.anim-ball-roll{filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(229,231,235,.6));}

/* Clash marker */
@keyframes clashPop{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.4)}
  40% {opacity:1;transform:translate(-50%,-50%) scale(1.6)}
  70% {opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)}
}
.clash-marker{
  position:absolute;pointer-events:none;z-index:12;
  font-size:18px;line-height:1;
  transform:translate(-50%,-50%);
  animation:clashPop .7s cubic-bezier(.16,1,.3,1) forwards;
  text-shadow:0 0 8px rgba(255,100,0,.9);
}

/* Goal banner */
@keyframes goalSlide{
  0%  {opacity:0;transform:translateY(-20px) scale(.85)}
  30% {opacity:1;transform:translateY(4px)  scale(1.05)}
  55% {transform:translateY(0) scale(1)}
  85% {opacity:1}
  100%{opacity:0}
}
.goal-banner{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:15;
}
.goal-banner-inner{
  background:rgba(0,0,0,.88);border:2px solid #ffd700;border-radius:16px;
  padding:18px 36px;text-align:center;
  animation:goalSlide 2.6s cubic-bezier(.16,1,.3,1) forwards;
}
.gb-title{color:#ffd700;font-size:clamp(2rem,7vw,3.5rem);font-weight:900;letter-spacing:.05em;}
.gb-score{color:#fff;font-size:clamp(1.4rem,5vw,2.4rem);font-weight:800;margin-top:4px;}
.gb-sub{color:#ffd700;font-size:.85rem;font-weight:600;opacity:.8;margin-top:4px;text-transform:uppercase;letter-spacing:.1em;}

/* ═══ EXPANDED PLAYER CARD — big stacked strip (mirrors mini strip) ═══ */
@keyframes pceFadeIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
.pce-ov{
  position:fixed;inset:0;z-index:90;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  animation:pceFadeIn .22s ease-out both;
  overflow:hidden;
  touch-action:none;
}
/* Hide the bottom action-bar (player strip + lock) while expanded card is open */
body.pce-open .action-bar{opacity:0;pointer-events:none;transition:opacity .2s}
/* Legacy fixed-corner close — hidden; close button is now per-slide (see .pce-slide-close) */
.pce-close{display:none !important}

/* Per-slide close — anchored to the top-right of the active (highlighted) card only */
.pce-slide-close{
  display:none;
  position:absolute;top:-12px;right:-12px;z-index:110;
  width:28px;height:28px;border-radius:50%;padding:0;
  background:rgba(0,0,0,.78);border:1.5px solid rgba(255,255,255,.3);
  color:#fff;font-size:18px;font-weight:700;line-height:1;cursor:pointer;
  align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.pce-slide.active .pce-slide-close{display:flex}
.pce-slide-close:hover{background:rgba(0,0,0,.95);transform:scale(1.08)}

/* ── Stacked strip ── */
.pce-clip{display:contents} /* passthrough */
/* BASE (mobile / <=640px): vertical stack — overlap top-to-bottom, scroll up/down */
.pce-track{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  overflow:visible;
  /* Slower so the user clearly sees the transition between cards on a swipe */
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.pce-slide{
  flex-shrink:0;
  position:relative;
  /* Card = field width (15 cols), with 1-col margin on each side of the 17-col viewport.
     Height maintains ~2:3 aspect (22 cells). */
  width:calc(15 * var(--cell));
  height:calc(22 * var(--cell));
  margin-top:calc(-11 * var(--cell));margin-left:0;
  cursor:pointer;
  transition:opacity .3s ease, filter .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.pce-slide:first-child{margin-top:0;margin-left:0}
.pce-slide:not(.active){
  opacity:1;
  filter:brightness(.42) saturate(.85);
  transform:none;
}
.pce-slide.active{
  opacity:1;
  filter:none;
  transform:scale(1.03);
}

/* DESKTOP (>=640px): horizontal stack — overlap left-to-right */
@media(min-width:640px){
  .pce-track{flex-direction:row;align-items:flex-end}
  .pce-slide{width:320px;height:480px;margin-top:0;margin-left:-160px}
  .pce-slide:first-child{margin-top:0;margin-left:0}
  .pce-slide.active{transform:translateY(-24px) scale(1.03)}
}

/* ── Flip container (fills slide) ── */
.pce-slide .pce-flip-wrap{
  perspective:1200px;
  width:100%;height:100%;
}
.pce-flip-inner{
  position:relative;
  width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.pce-flip-inner.flipped{transform:rotateY(180deg)}

/* ── Card faces shared ── */
.pce-face{
  position:absolute;inset:0;
  border-radius:12px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;
}

/* FRONT */
.pce-front{
  display:flex;flex-direction:column;
  background:linear-gradient(175deg,#f8f4ec 0%,#ede7d8 100%);
  border:2px solid #8a7a58;
  box-shadow:0 16px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.7);
}
.pce-card-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px 6px;
  border-bottom:1px solid rgba(138,122,88,.3);
  flex-shrink:0;
}
.pce-pos-badge{
  font-family:var(--ff);font-size:14px;font-weight:900;
  text-transform:uppercase;color:#fff;
  background:#666;padding:3px 9px;border-radius:5px;
  letter-spacing:.04em;
}
.pce-pos-full{
  font-family:var(--ff);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:#6b5a38;
  flex:1;text-align:center;padding:0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pce-num{
  font-family:var(--ff);font-size:26px;font-weight:900;
  color:#1a1505;font-variant-numeric:tabular-nums;line-height:1;
}
/* Portrait big — team color bg */
.pce-portrait-big{
  flex:0 0 auto;height:28%;
  margin:8px 12px 0;border-radius:10px;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  background:var(--hm);
}
.pce-portrait-big.away{background:var(--aw)}
.pce-portrait-big img{
  width:84%;height:84%;object-fit:contain;object-position:center bottom;display:block;
}
/* Player name */
.pce-player-name{
  font-family:var(--ff);font-size:16px;font-weight:900;
  color:#1a1505;text-align:center;text-transform:uppercase;
  letter-spacing:.06em;padding:6px 12px 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;
}
/* HP on front face — thick dashed bar with label + value overlaid inside */
.pce-hpw{padding:5px 12px 3px;flex-shrink:0}
.pce-hp-bar{
  position:relative;
  height:14px;
  display:flex;align-items:center;
}
.pce-hp-pips{display:flex;gap:2px;width:100%;height:100%}
.pce-hp-pip{
  flex:1;height:100%;border-radius:2px;
  background:rgba(0,0,0,.18);
}
.pce-hp-pip.hp-hi{background:#16a34a}
.pce-hp-pip.hp-md{background:#ca8a04}
.pce-hp-pip.hp-lo{background:#dc2626}
.pce-hp-text{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6px;
  font-family:var(--ff);font-size:9px;font-weight:900;
  color:#fff;text-transform:uppercase;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
/* 6 attrs — 2 columns × 3 rows, icon + label + value with superscript bonus */
.pce-attrs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;
  gap:4px;padding:5px 8px 4px;flex:1;min-height:0;
}
.pce-ag-item{
  display:flex;flex-direction:row;
  align-items:center;justify-content:center;
  padding:4px 6px;border-radius:5px;
  background:rgba(0,0,0,.05);border:1px solid rgba(138,122,88,.18);
  gap:6px;min-height:0;overflow:hidden;
}
.pce-ag-left{
  display:flex;flex-direction:column;align-items:center;
  line-height:1;gap:3px;flex-shrink:0;
}
.pce-ag-label{
  font-family:var(--ff);font-size:8px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:#1a1505;
  line-height:1;
}
.pce-ag-right{
  display:inline-flex;align-items:flex-start;line-height:1;
  flex-shrink:0;
}
.pce-ag-val{
  font-family:var(--ff);font-size:20px;font-weight:900;
  color:#1a1505;font-variant-numeric:tabular-nums;line-height:1;
}
.pce-ag-bonus{
  font-family:var(--ff);font-size:8px;font-weight:900;
  color:#b45309;line-height:1;letter-spacing:.02em;
  margin-left:1px;align-self:flex-start;
}
/* Front card footer */
.pce-card-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 12px 7px;
  background:linear-gradient(0deg,rgba(138,122,88,.2),transparent);
  border-top:1px solid rgba(138,122,88,.22);flex-shrink:0;
}
.pce-tier-lbl{
  font-family:var(--ff);font-size:9px;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;color:#6b5a38;
}
.pce-ovr-big{
  font-family:var(--ff);font-size:22px;font-weight:900;
  color:#1a1505;font-variant-numeric:tabular-nums;line-height:1;
}

/* BACK */
.pce-back{
  transform:rotateY(180deg);
  display:flex;flex-direction:column;
  background:linear-gradient(175deg,#f0ece0 0%,#e8e2d2 100%);
  border:2px solid #8a7a58;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  padding:10px 10px 8px;overflow-y:auto;
}
.pce-back-header{
  font-family:var(--ff);font-size:8px;font-weight:900;
  text-transform:uppercase;letter-spacing:.1em;color:#6b5a38;
  text-align:center;padding-bottom:7px;flex-shrink:0;
  border-bottom:1px solid rgba(138,122,88,.3);margin-bottom:7px;
}
.pce-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:3px;flex:1;
}
.pce-stat{
  display:flex;align-items:baseline;gap:4px;
  padding:5px 7px;
  background:rgba(0,0,0,.06);
  border:1px solid rgba(138,122,88,.15);border-radius:5px;
}
.pce-s-label{
  font-family:var(--ff);font-size:7.5px;font-weight:700;
  color:#6b5a38;text-transform:uppercase;letter-spacing:.08em;
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pce-s-val{
  font-family:var(--ff);font-size:14px;font-weight:800;
  color:#1a1505;font-variant-numeric:tabular-nums;line-height:1;
}
.pce-s-unit{
  font-family:var(--ff);font-size:7.5px;font-weight:600;
  color:#8a7a58;font-variant-numeric:tabular-nums;
}
/* Compass + legend on back */
.pce-back-controls{
  margin-top:8px;padding-top:8px;flex-shrink:0;
  border-top:1px solid rgba(138,122,88,.22);
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.pce-compass{
  display:none; /* NSEW grid hidden — direction set from pitch rotation only */
  grid-template-columns:repeat(3,22px);
  grid-template-rows:repeat(3,22px);
  gap:2px;padding:3px;flex-shrink:0;
  background:rgba(0,0,0,.08);border:1px solid rgba(138,122,88,.25);border-radius:7px;
}
.pce-compass .tbn{
  padding:0;margin:0;cursor:pointer;
  background:rgba(255,255,255,.5);border:1px solid rgba(138,122,88,.3);
  color:#6b5a38;border-radius:3px;
  font-family:var(--ff);font-size:10px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,border-color .2s;
}
.pce-compass .tbn:hover{background:rgba(138,122,88,.2);color:#1a1505}
.pce-compass .tbn.on{background:#1a1505;color:#f8f4ec;border-color:#1a1505}
.pce-compass .tbn[data-face="N"]{grid-column:2;grid-row:1}
.pce-compass .tbn[data-face="W"]{grid-column:1;grid-row:2}
.pce-compass .tbn[data-face="E"]{grid-column:3;grid-row:2}
.pce-compass .tbn[data-face="S"]{grid-column:2;grid-row:3}
.pce-legend{
  display:flex;flex-wrap:wrap;gap:6px;
  font-family:var(--ff);font-size:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:#6b5a38;
}

/* ── Heatmap (landscape — field points east/west) ── */
.pce-heatmap{
  flex-shrink:0;
  aspect-ratio:23/17;
  width:calc(100% - 16px);
  margin:0 8px 4px;
  border-radius:6px;
  overflow:hidden;
  background:#1a3c1d;
  border:1px solid rgba(138,122,88,.2);
}
.pce-heatmap svg{display:block;width:100%;height:100%}

/* ── Stat icon ── */
.pce-ag-icon{
  font-size:16px;line-height:1;flex-shrink:0;
  color:#1a1505;font-weight:900;
  text-shadow:0 0 1px rgba(0,0,0,.3);
}

/* ═══ RESPONSIVE ═══ */
@media(max-height:800px){:root{--cell:25px}}
@media(max-height:700px){:root{--cell:23px}}
@media(max-width:600px){.subtabs{padding:5px 10px;gap:6px}.subtab-hint{display:none}.fm,.mk{padding:5px 9px;font-size:10px}}
/* Mobile: fit all 17 game columns (incl OOB) exactly across full vw */
@media(max-width:640px){:root{--cell:calc(100vw / 17)}}