body.gameplay-mode,
body.gameplay-mode .app{
  overflow:hidden;
  min-width:0;
}
body.gameplay-mode .stadium-bg{
  opacity:0.35;
}
body.gameplay-mode .screen-root.gameplay-root,
body.gameplay-mode #screen-root.gameplay-root{
  position:fixed;
  inset:0;
  z-index:50;
  max-width:none;
  width:100%;
  height:100vh;
  margin:0;
  padding:0;
}
.gameplay-shell{
  position:relative;
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  background:#0a0e14;
}
.game-hud-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:30;
  pointer-events:none;
  padding:14px 16px 0;
  display:flex;
  justify-content:center;
  background:linear-gradient(180deg,rgba(6,10,16,0.72) 0%,rgba(6,10,16,0.28) 55%,transparent 100%);
}

.scorebug{
  width:min(580px,100%);
  border-radius:16px;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,0.06),transparent 42%),
    rgba(8,12,20,0.94);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.07);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.sb-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:0;
  min-height:54px;
}

.sb-team{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  min-width:0;
  transition:background 0.2s ease;
}
.sb-team.has-ball{
  background:rgba(255,255,255,0.04);
}
.sb-away{justify-content:flex-start}
.sb-home{justify-content:flex-end}

.sb-stripe{
  width:4px;
  align-self:stretch;
  border-radius:99px;
  background:var(--accent);
  opacity:0.95;
  flex-shrink:0;
}

.sb-team-body{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.sb-abbr{
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.sb-poss{
  font-size:0.55rem;
  opacity:0;
  transform:scale(0.6);
  transition:opacity 0.2s ease,transform 0.2s ease;
}
.sb-poss.is-active{
  opacity:1;
  transform:scale(1);
}

.sb-score{
  font-family:var(--font-mono);
  font-size:1.95rem;
  font-weight:700;
  line-height:1;
  min-width:2.2ch;
  text-align:center;
  color:#fff;
}
.sb-score-pop{
  animation:sbScorePop 0.35s ease;
}
@keyframes sbScorePop{
  0%{transform:scale(1)}
  40%{transform:scale(1.22)}
  100%{transform:scale(1)}
}

.sb-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:6px 14px;
  border-left:1px solid rgba(255,255,255,0.08);
  border-right:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.18);
  min-width:88px;
}
.sb-quarter{
  font-family:var(--font-display);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--text-secondary);
}
.sb-clock{
  font-family:var(--font-mono);
  font-size:1.25rem;
  font-weight:700;
  color:var(--accent);
  letter-spacing:0.02em;
}

.sb-situation{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-top:1px solid rgba(255,255,255,0.07);
  background:rgba(0,0,0,0.22);
}
.sb-down{
  font-family:var(--font-display);
  font-size:0.98rem;
  font-weight:700;
  color:#fff;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.sb-down.is-goal{
  color:var(--warning);
}
.sb-ball{
  font-size:0.78rem;
  font-weight:700;
  color:var(--text-secondary);
  text-align:center;
  letter-spacing:0.04em;
}
.sb-playclock-wrap{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  justify-self:end;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid transparent;
}
.sb-playclock-label{
  font-size:0.58rem;
  font-weight:700;
  letter-spacing:0.12em;
  color:var(--text-muted);
}
.sb-playclock{
  font-family:var(--font-mono);
  font-size:0.95rem;
  font-weight:700;
  color:var(--warning);
  min-width:2ch;
  text-align:right;
}
.sb-playclock-wrap.is-urgent{
  border-color:rgba(255,200,87,0.35);
  background:rgba(255,200,87,0.08);
}
.sb-playclock-wrap.is-critical{
  border-color:rgba(255,92,106,0.45);
  background:rgba(255,92,106,0.12);
}
.sb-playclock-wrap.is-critical .sb-playclock{
  color:var(--danger);
}

.sb-fieldbar{
  padding:0 12px 8px;
  background:rgba(0,0,0,0.22);
}
.sb-field-track{
  position:relative;
  height:8px;
  border-radius:99px;
  background:
    linear-gradient(90deg,
      rgba(61,214,192,0.18) 0%,
      rgba(255,255,255,0.06) 15%,
      rgba(255,255,255,0.06) 85%,
      rgba(61,214,192,0.18) 100%);
  border:1px solid rgba(255,255,255,0.08);
  overflow:visible;
}
.sb-field-los,
.sb-field-fd,
.sb-field-ball{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.sb-field-los{
  width:2px;
  height:12px;
  border-radius:1px;
  background:rgba(255,255,255,0.75);
}
.sb-field-fd{
  width:2px;
  height:12px;
  border-radius:1px;
  background:var(--warning);
  box-shadow:0 0 6px rgba(255,200,87,0.45);
}
.sb-field-ball{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#c4a574;
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:0 0 8px rgba(196,165,116,0.55);
  z-index:2;
}

.sb-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:6px 12px 8px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:0.72rem;
  color:var(--text-muted);
}
.sb-play{
  color:var(--accent);
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sb-mode{
  flex-shrink:0;
  opacity:0.85;
}

.play-result-overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) translateZ(0);
  z-index:18;
  padding:16px 32px;
  border-radius:16px;
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3.6vw,2.3rem);
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
  background:rgba(8,12,18,0.78);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 18px 52px rgba(0,0,0,0.58);
  text-shadow:0 2px 18px rgba(0,0,0,0.65);
  pointer-events:none;
  transition:opacity 0.25s ease,transform 0.25s ease;
}
.play-result-overlay.hidden{
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-46%) scale(0.96);
}

.controls-hint{
  position:absolute;
  bottom:10px;
  left:12px;
  right:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:0.68rem;
  color:rgba(255,255,255,0.55);
  pointer-events:none;
  z-index:12;
  justify-content:center;
}
.hint-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.08);
}
.controls-hint kbd{
  background:rgba(255,255,255,0.08);
  padding:1px 5px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.14);
  font-family:var(--font-mono);
  font-size:0.65rem;
  color:rgba(255,255,255,0.85);
}

.box-score-screen{max-width:520px;margin:0 auto}
.box-score-kicker{
  margin:0 0 4px;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  text-align:center;
}
.box-score-card{padding:28px 24px}
.box-score-final{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
}
.box-score-side{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:100px;
}
.box-score-abbr{
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:0.08em;
}
.box-score-pts{
  font-family:var(--font-mono);
  font-size:3rem;
  font-weight:700;
  line-height:1;
}
.box-score-mid{
  font-size:1.6rem;
  color:var(--text-muted);
  padding-top:22px;
}
.box-score-table{width:100%;font-size:0.85rem}
.box-score-table th,.box-score-table td{padding:4px 8px;text-align:left;border-bottom:1px solid var(--border)}
.box-score-table th{color:var(--text-secondary);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .sb-score-pop{animation:none}
}
.gameplay-canvas-wrap{
  flex:1;
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:var(--field-green);
}
#game-canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}
.play-select-overlay{
  position:absolute;
  inset:0;
  background:rgba(6,10,16,0.92);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:15;
  padding:16px;
  opacity:1;
  transform:translateZ(0);
  transition:opacity 0.2s ease;
  overflow:auto;
}
.play-select-overlay.hidden{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}
.pause-overlay{
  position:absolute;
  inset:0;
  background:rgba(8,12,18,0.92);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  z-index:25;
  opacity:1;
  transform:translateZ(0);
  transition:opacity 0.2s ease;
}
.pause-overlay.hidden{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}

.playbook{
  width:min(920px,100%);
  max-height:min(92vh,820px);
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border-radius:18px;
  background:
    linear-gradient(165deg,rgba(255,255,255,0.05),transparent 40%),
    rgba(12,18,28,0.96);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 24px 64px rgba(0,0,0,0.55);
}
.pb-header{text-align:center}
.pb-situation{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:4px;
}
.pb-title{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pb-card-top h4{
  margin:0;
  font-family:var(--font-display);
  font-size:0.98rem;
  font-weight:700;
  letter-spacing:.03em;
}
.pb-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
}
.pb-tab{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:var(--text-secondary);
  border-radius:999px;
  padding:6px 12px;
  font-size:0.75rem;
  font-weight:700;
  cursor:pointer;
}
.pb-tab.is-active{
  background:rgba(61,214,192,0.16);
  border-color:rgba(61,214,192,0.45);
  color:var(--accent);
}
.pb-body{
  overflow:auto;
  min-height:0;
  flex:1;
  padding-right:2px;
}
.pb-coach{display:flex;flex-direction:column;gap:12px}
.pb-coach-label,.pb-alts-label{
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.pb-alts{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
}
.pb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px;
}
.pb-card{
  display:flex;
  gap:10px;
  align-items:stretch;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.035);
  cursor:pointer;
  transition:border-color 0.15s ease,transform 0.15s ease,background 0.15s ease;
  text-align:left;
}
.pb-card:hover{
  border-color:rgba(61,214,192,0.45);
  background:rgba(61,214,192,0.07);
  transform:translateY(-1px);
}
.pb-card.is-recommended{
  border-color:rgba(255,200,87,0.55);
  box-shadow:0 0 0 1px rgba(255,200,87,0.15);
}
.pb-card.is-large{
  flex-direction:column;
  align-items:center;
  padding:14px;
}
.pb-card.is-large .pb-diagram{width:180px;height:90px}
.pb-card.is-large .pb-card-info{width:100%;text-align:center}
.pb-diagram{
  width:120px;
  height:64px;
  border-radius:8px;
  background:rgba(0,0,0,0.25);
  flex-shrink:0;
}
.pb-card-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.pb-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pb-badge{
  font-size:0.58rem;
  font-weight:800;
  letter-spacing:0.08em;
  padding:2px 6px;
  border-radius:999px;
}
.pb-badge-run{background:rgba(92,219,122,0.18);color:var(--success)}
.pb-badge-pass{background:rgba(61,214,192,0.16);color:var(--accent)}
.pb-card-desc{
  margin:0;
  font-size:0.72rem;
  color:var(--text-muted);
  line-height:1.35;
}
.pb-card-reason{
  margin:0;
  font-size:0.74rem;
  color:var(--warning);
  font-weight:600;
}
.pb-call{margin-top:10px;width:100%}
.pb-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:10px;
}
.pb-hint{font-size:0.72rem;color:var(--text-muted)}
.pb-empty{text-align:center;color:var(--text-muted);padding:24px}
.pb-hurry{margin-left:auto}

.play-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:720px;
  width:100%;
  margin:16px 0;
}
.play-card{
  padding:16px;
  background:var(--bg-card);
  border:2px solid var(--border);
  border-radius:var(--radius-md);
  cursor:pointer;
  text-align:center;
  transition:border 0.15s ease,transform 0.15s ease;
}
.play-card:hover,.play-card.selected{
  border-color:var(--accent);
  transform:scale(1.02) translateZ(0);
}
.play-card.recommended{border-color:var(--warning)}
.play-card h4{font-size:0.9rem;margin-bottom:4px}
.play-card p{font-size:0.75rem;color:var(--text-muted)}
.kick-meter-wrap{margin:16px 0;width:300px}
.kick-meter{height:24px;background:var(--bg-elevated);border-radius:var(--radius-sm);overflow:hidden;position:relative}
.kick-meter-fill{height:100%;background:var(--accent);transition:width 0.05s linear}
.kick-meter-target{
  position:absolute;top:0;bottom:0;width:20%;
  background:rgba(255,200,87,0.3);
  border-left:2px solid var(--warning);
  border-right:2px solid var(--warning);
}