:root {
  color-scheme: dark;
  --navy: #172238;
  --gold: #f8c64c;
  --cream: #fff0c5;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--navy);
  color: var(--cream);
  font-family: Arial, sans-serif;
}
body {
  display: grid;
  grid-template-rows: 76px 1fr 48px;
}
header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  border-bottom: 5px solid #34435a;
  background: #172238;
  z-index: 3;
}
#teams {
  font-size: 21px;
  letter-spacing: 1px;
  flex: 1;
}
#teams b {
  color: var(--gold);
  font: bold 36px monospace;
  margin: 0 18px;
}
#clock {
  font: bold 18px monospace;
}
button,
select {
  font: 700 14px monospace;
  color: var(--cream);
  background: #263953;
  border: 2px solid #6b8194;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #0c1526;
}
button:hover,
button:focus-visible {
  background: #405878;
  outline: 2px solid var(--gold);
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
main {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 15px;
  font-size: 14px;
  font-weight: bold;
  border-top: 4px solid #34435a;
  z-index: 3;
}
#feedback {
  color: var(--gold);
  max-width: 40%;
}
.panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 90%);
  max-height: 90%;
  overflow: auto;
  padding: 24px;
  background: #172238f2;
  border: 4px solid var(--gold);
  box-shadow: 8px 8px #0c15268a;
}
h2 {
  margin: 0 0 20px;
  font: bold 25px monospace;
  color: var(--gold);
}
.panel p {
  line-height: 1.5;
}
.panel label {
  display: block;
  margin: 14px 0;
}
.panel select {
  margin-left: 12px;
}
.panel button {
  margin: 6px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.card {
  text-align: left;
  font-family: Arial, sans-serif;
  padding: 8px;
  min-height: 80px;
}
.card.selected {
  border-color: var(--gold);
  background: #476447;
}
.card b {
  display: block;
}
.card small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #d5daca;
}
.portrait {
  float: left;
  width: 36px;
  height: 49px;
  margin-right: 7px;
  image-rendering: pixelated;
}
.energy {
  display: block;
  height: 5px;
  background: #0b1728;
  margin-top: 7px;
}
.energy i {
  display: block;
  height: 100%;
  background: #8ac563;
}
.tactics {
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:8;
  width:min(1040px,calc(100% - 24px));height:64px;padding:8px;display:flex;align-items:center;gap:10px;
  background:#172238f2;border:2px solid #8b9d94;box-shadow:4px 4px #081c28;
}
#orders {display:flex;gap:8px;flex:1;min-width:0;}
.order-card {display:flex;align-items:center;flex:1 1 0;min-width:0;height:40px;border:1px solid #617974;}
.order-card:has(.empty-order) {flex:0 0 44px;}
.order-card.active {border-color:var(--gold);background:#263d43;}
.tactics button {margin:0;padding:7px 9px;font:bold 14px monospace;min-height:40px;}
.order-text {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;border:0;background:transparent;color:#fff0c5;}
.order-delete {flex:0 0 32px;padding:4px!important;border:0;border-left:1px solid #617974;background:transparent;color:#ff916b;font-size:20px!important;}
.empty-order {width:100%;border:0;background:transparent;color:#b2c4b2;text-align:center;font-size:24px!important;padding:0!important;}
.order-card[aria-invalid="true"] {border-color:#ff916b;}
#commit {flex:0 0 auto;background:var(--gold);color:#172238;border:2px solid #fff0c5;white-space:nowrap;}
#command-notice {position:absolute;bottom:82px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:8px 12px;background:#172238f5;color:#ffb187;border:1px solid #ff916b;font:13px monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:9;}
#order-menu {inset:auto 16px 85px auto;margin:0;padding:8px;background:#172238;color:#fff0c5;border:2px solid #f8c64c;}
#order-menu button {font:13px monospace;}
#command-help {width:min(480px,calc(100% - 32px));padding:20px;background:#172238;color:#fff0c5;border:2px solid #f8c64c;font:15px/1.45 system-ui;}
#command-help::backdrop {background:#10202b66;}
.tactics button:focus-visible {outline:3px solid #b7f6a5;outline-offset:1px;}
#target-picker {position:absolute;top:75px;left:50%;transform:translateX(-50%);background:#172238;border:2px solid #f8c64c;padding:8px;z-index:9;}
#target-picker button {font:13px monospace;padding:10px;}
.half {
  top: 12px;
  transform: translateX(-50%);
  width: min(610px, 90%);
  padding: 14px;
}
.half h2 {
  font-size: 20px;
  margin-bottom: 10px;
}
.half p {
  font-size: 13px;
  margin: 5px;
}
#result-score {
  display: block;
  font: 36px monospace;
  color: var(--gold);
  margin: 20px 0;
}
#moments p {
  padding: 10px;
  border-left: 3px solid var(--gold);
  background: #273a50;
}
pre {
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  font: 12px monospace;
}
[hidden] {
  display: none !important;
}
@media (max-width: 900px) {
  body {
    grid-template-rows: 70px 1fr 52px;
  }
  header {
    gap: 10px;
    padding: 0 12px;
    flex-wrap: wrap;
  }
  #teams {
    font-size: 16px;
  }
  #teams b {
    font-size: 30px;
    margin: 0 9px;
  }
  #clock {
    font-size: 16px;
  }
  header button {
    padding: 7px;
    font-size: 12px;
  }
  #settings-open {
    display: none;
  }
  footer {
    padding: 0 10px;
    font-size: 13px;
  }
  #hint {
    max-width: 35%;
  }
  .cards {
    gap: 5px;
  }
  .tactics {
    bottom: 5px;
  }
  #roster button {
    padding: 7px 5px;
  }
  .panel {
    padding: 17px;
  }
}
@media (max-width: 600px) {
  #teams {
    font-size: 12px;
  }
  #teams b {
    font-size: 24px;
    margin: 0 3px;
  }
  #clock {
    font-size: 13px;
  }
  header {
    gap: 5px;
  }
  header button {
    font-size: 10px;
    padding: 5px;
  }
  #status {
    display: none;
  }
  #hint {
    max-width: 55%;
  }
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .card {
    font-size: 12px;
  }
  .portrait {
    display: none;
  }
  .tactics button {
    font-size: 11px;
    padding: 6px;
  }
}
@font-face {
  font-family: CoachBlock;
  src: url("assets/coach-block.ttf") format("truetype");
  font-display: swap;
}
h1,
h2,
#teams b,
#clock,
#result-score {
  font-family: CoachBlock, monospace;
  font-weight: normal;
}
h1 {
  line-height: 1;
  letter-spacing: -4px;
}
#clock {
  font-size: 17px;
}
@media (max-width: 900px) {
  #clock {
    font-size: 14px;
  }
}
.selected-energy{display:inline-block;width:56px;vertical-align:middle;margin:0 0 0 7px;height:6px}
.squad-heading{grid-column:1/-1;margin:5px 0;color:var(--gold);font:700 13px Arial,sans-serif;letter-spacing:1px}
.audio-controls { border: 1px solid #6b8194; margin: 12px 0; padding: 8px 12px; }
.audio-controls label { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.audio-controls input[type="range"] { flex: 1; min-width: 80px; accent-color: var(--gold); }
#settings { max-height: 95%; overflow-y: auto; }

#cinematic-controls { position:absolute; right:16px; z-index:2; }
#cinematic-skip { font-size:12px; padding:7px 12px; background:#172238; border-color:#a5cebb; }

.half { width:min(840px,94%); max-height:96%; top:2%; padding:18px; }
.half .cards {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0;}
.half .card {min-height:74px;margin:0;font-size:13px;}
.half .portrait {width:28px;height:39px;}
.half .card small {font-size:11px;margin-top:3px;}
#half-resume {background:#405c3d;border-color:var(--gold);}
#half-score {color:var(--gold);font:bold 19px monospace;}
#workshop-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;font-size:12px;}
#workshop-fields input {width:65px;max-width:100%;}
#workshop-fields label {overflow-wrap:anywhere;}
#workshop-import {max-width:100%;}
/* Restart coaching is a separate compact control context from live shout cards. */
.restart-panel { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); width:min(620px,calc(100% - 24px)); box-sizing:border-box; padding:12px 16px; background:#132e39f5; border:3px solid #f8c64c; color:#fff5d7; z-index:8; box-shadow:5px 5px #101d2a; font:14px monospace; }
.restart-heading,.restart-footer {display:flex;justify-content:space-between;align-items:center;gap:12px;}
#restart-countdown {color:#f8c64c;white-space:nowrap;}
#restart-options {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0;}
#restart-options button {font-size:14px;min-height:42px;padding:8px;}
#restart-options button[aria-pressed="true"] {background:#f8c64c;color:#172238;outline:2px solid #fff5d7;}
.restart-footer {font-size:11px;}
#restart-play {font-size:12px;white-space:nowrap;padding:8px;}
@media(max-width:600px) {.restart-panel {padding:9px;font-size:12px;} #restart-options {gap:6px;} #restart-options button {font-size:12px;} .restart-footer {font-size:10px;} }

/* The attraction occupies its own monitor, including its own safe control lane. */
body.attract-active { grid-template-rows: 1fr; background:#101b2d; }
body.attract-active main > :not(#title) { display:none !important; }
#title { position:absolute; inset:0; display:grid; place-items:center; background:#101b2d; z-index:20; }
#attract-stage { position:relative; width:640px; height:360px; --pixel:1; flex:none; }
#attract-canvas { position:absolute; inset:0; width:100%; height:100%; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#attract-stage button { font-family:CoachBlock,monospace; font-weight:normal; box-shadow:none; }
#start { position:absolute; top:85.55%; left:15%; width:70%; height:8%; padding:0; border:calc(2px * var(--pixel)) solid #ffc54b; color:#fff0c5; background:#15243b; font-size:calc(17px * var(--pixel)); text-align:center; letter-spacing:calc(.4px * var(--pixel)); box-shadow:calc(2px * var(--pixel)) calc(2px * var(--pixel)) #0a1424; animation:arcade-invitation 1.4s steps(1,end) infinite; }
#start::before,#start::after { content:''; position:absolute; top:35%; width:16%; height:calc(3px * var(--pixel)); background:#ffc54b; pointer-events:none; }
#start::before { right:105%; } #start::after { left:105%; }
#start:hover { background:#304763; }
#attract-stage button:focus-visible { outline:calc(2px * var(--pixel)) solid #fff0c5; outline-offset:calc(2px * var(--pixel)); }
#attract-options { position:absolute; left:12%; right:12%; top:94.2%; height:5%; display:flex; justify-content:center; align-items:center; }
#attract-options button { color:#e4dcb9; padding:calc(3px * var(--pixel)); border:0; background:transparent; font-size:calc(8px * var(--pixel)); white-space:nowrap; }
#attract-options button:hover { color:#ffc54b; }
#continue { position:absolute; right:3%; top:6%; border:0; background:#15243b; color:#ffc54b; padding:calc(5px * var(--pixel)); font-size:calc(8px * var(--pixel)); }
@keyframes arcade-invitation { 0%,75% { color:#fff0c5; } 76%,100% { color:#ffc54b; } }
.reduced-attract #start { animation:none; }
@media(prefers-reduced-motion:reduce) { #start { animation:none; } }

/* Pre-match has its own ambient scene and native, keyboard-accessible paper UI. */
body.setup-active {grid-template-rows:minmax(0,1fr);background:#48734c;}
body.setup-active main,body.attract-active main {grid-row:1;min-height:0;height:100%;}
body.setup-active main > :not(#setup):not(#prematch-scene):not(#player-detail) {display:none!important;}
#prematch-scene {position:absolute;inset:0;pointer-events:none;}
.clipboard {
  --paper:#f5e7bd;--ink:#1b3047;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(62vw,1080px);height:86svh;max-height:960px;
  padding:12px;border:3px solid #5e3929;border-radius:17px;
  background:repeating-linear-gradient(0deg,#a86c3b 0 4px,#b67940 4px 8px);
  box-shadow:inset 0 0 0 3px #dda355,7px 9px 0 #142f3670;
  color:var(--ink);z-index:10;
}
.clipboard-paper {
  position:relative;height:100%;padding:16px 20px 21px;
  display:grid;grid-template-rows:clamp(40px,6vh,66px) clamp(100px,16vh,180px) 16px minmax(175px,1fr) clamp(64px,9vh,100px) clamp(45px,6.5vh,72px);
  gap:5px;background:var(--paper);border:2px solid #e5c58d;
  box-shadow:2px 3px #754e37, inset 0 0 24px #c7985130;
}
.clipboard-paper::before,.clipboard-paper::after {content:'';position:absolute;width:55px;height:18px;background:#f4cc7dcc;border:1px dashed #fff0c5;transform:rotate(-30deg);pointer-events:none;z-index:3;}
.clipboard-paper::before {left:-15px;top:0;}.clipboard-paper::after {right:-16px;bottom:0;}
.clipboard-clamp {position:absolute;z-index:4;width:38%;height:35px;left:31%;top:-20px;background:linear-gradient(#87949b 0 5px,#d0d0bf 5px 9px,#65717e 9px 14px,#aeb4b1 14px 26px,#596576 26px);border:3px solid #293c4b;border-radius:5px;box-shadow:3px 4px #573e33;}
.clipboard-clamp::before {content:'';position:absolute;left:39%;bottom:25px;width:22%;height:22px;background:#98a3a5;border:3px solid #293c4b;border-radius:18px 18px 0 0;}
.clipboard-clamp i {position:absolute;left:calc(50% - 4px);top:-17px;width:8px;height:8px;border:2px solid #293c4b;border-radius:50%;background:#566975;}
.clipboard-pencil {position:absolute;right:-22px;top:34%;height:40%;width:15px;background:linear-gradient(90deg,#a65d27 0 3px,#ffcb47 3px 9px,#e79d31 9px);border:2px solid #553d32;transform:rotate(-3deg);z-index:3;box-shadow:3px 2px #18353555;pointer-events:none;}
.clipboard-pencil::before {content:'';position:absolute;left:-2px;top:-20px;width:15px;height:24px;background:linear-gradient(#dc8b8c 0 11px,#b8c0b5 11px 18px,#596c78 18px);border:2px solid #553d32;}
.clipboard-pencil::after {content:'';position:absolute;bottom:-23px;left:-2px;border-left:7px solid transparent;border-right:8px solid transparent;border-top:23px solid #b99164;filter:drop-shadow(0 3px #203344);}
.setup-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;border-bottom:3px solid #b36f47;padding-bottom:8px;}
.setup-heading h2 {color:var(--ink);font-size:clamp(16px,1.45vw,26px);line-height:1.2;margin:0;max-width:54%;}
.opponent-carousel {display:flex;align-items:center;gap:9px;min-width:0;}
.clipboard button {touch-action:manipulation;}
.opponent-carousel button {border:0;background:transparent;box-shadow:none;color:var(--ink);font:28px/1 monospace;padding:0;width:32px;min-height:40px;}
#opponent-name {font:clamp(13px,1.15vw,22px) CoachBlock,monospace;min-width:5ch;}
#opponent-badge {display:grid;place-items:center;flex:none;width:31px;height:36px;color:#fff2cd;background:repeating-linear-gradient(90deg,var(--opponent-color) 0 6px,#24445a 6px 12px);border:2px solid var(--ink);border-radius:2px 2px 12px 12px;text-shadow:2px 2px #172238;font:20px CoachBlock,monospace;box-shadow:2px 2px #b89359;}
#plan-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:0;}
.plan-carousel {position:relative;display:flex;min-height:0;gap:7px;}
.plan-carousel #plan-tiles {flex:1;min-width:0;}
#plan-prev,#plan-next {width:27px;flex:none;min-width:0;padding:0;border:1px solid #aa895b;box-shadow:none;background:#e8d4a2;color:#1b3047;font:30px monospace;}
.plan-tile {position:relative;display:block;min-width:0;min-height:0;padding:0;border:3px solid #506f54;background:#1b3047;box-shadow:2px 3px #c4ab79;color:#fff0c5;}
.plan-tile canvas {position:absolute;inset:0 0 27px;width:100%;height:calc(100% - 27px);min-height:0;}
.plan-tile span {position:absolute;bottom:0;left:0;right:0;height:27px;display:grid;place-items:center;padding:3px 2px;font:clamp(12px,1.15vw,20px) CoachBlock,monospace;white-space:nowrap;}
.plan-tile[aria-pressed="true"] {border-color:#ffbf24;outline:3px solid #edb52e;outline-offset:0;box-shadow:3px 4px #a6803c;}
.plan-tile[aria-pressed="true"] span {background:#ffcc42;color:var(--ink);}
.clipboard button:focus-visible {outline:3px solid #a4472f;outline-offset:3px;}
.plan-tile:hover {background:#1b3047;border-color:#ffda64;}
#plan-caption {font:700 clamp(12px,1vw,16px)/16px monospace;text-align:center;color:#705436;}
#formation-pitch {position:relative;min-height:0;background:repeating-linear-gradient(0deg,#37704b 0 16.66%,#39764f 16.66% 33.33%);border:3px solid #2e6046;box-shadow:0 0 0 2px #d1bf8c;}
.formation-lines {position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#e2e5b8;stroke-width:2;pointer-events:none;}
#starters {position:absolute;inset:0;}
.player-token {position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;justify-content:center;width:clamp(72px,6vw,110px);height:clamp(54px,7.8vh,86px);padding:0;border:0;background:transparent;box-shadow:none;color:var(--ink);}
.player-token:hover,.player-token:focus-visible {background:transparent;}
.token-head {position:relative;display:block;width:clamp(32px,4.9vh,55px);height:clamp(34px,5.2vh,59px);background:#1b3a50;border:2px solid #dfb64b;border-radius:50% 50% 35% 35%;box-shadow:2px 2px #16372d;}
.token-head canvas {position:absolute;left:0;top:-6%;width:100%;height:112%;}
.token-number {position:absolute;right:-12px;bottom:1px;display:grid;place-items:center;width:clamp(21px,2.8vh,31px);height:clamp(21px,2.8vh,31px);border:2px solid #1b3047;border-radius:50%;background:#ffd04b;font:clamp(12px,1.7vh,18px) CoachBlock,monospace;box-shadow:1px 2px #143c36;}
.token-name {position:relative;display:block;margin-top:2px;padding:2px 7px;background:#f4e6b9;box-shadow:1px 2px #143b3680;font:bold clamp(13px,1.7vh,19px)/1.1 monospace;}
.captain-badge {position:absolute;right:-24px;top:-5px;background:#b94637;color:#fff6cf;border:1px solid #642a2c;padding:1px 4px;font:bold 13px monospace;box-shadow:1px 2px #254339;}
.player-token.selected .token-head {outline:3px solid #ffda4f;outline-offset:3px;transform:translateY(-5px);}
.player-token.selected .token-name {background:#ffcf43;}
.bench-strip {display:flex;align-items:center;min-width:0;gap:10px;}
.bench-label {width:20%;flex:none;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 4px;}
.bench-label strong {font:clamp(14px,1.3vw,24px) CoachBlock,monospace;}
.swap-symbol {font:bold clamp(25px,3vh,38px) monospace;line-height:1;}
#lineup-undo {grid-column:1/-1;color:#71502f;background:transparent;border:0;box-shadow:none;padding:3px 0;text-align:left;font:bold 12px monospace;}
#setup-bench {position:relative;height:100%;flex:1;min-width:0;}
.bench-token {height:100%;width:24%;}
.bench-token .token-head {border-radius:3px;border-color:#47616c;}
.bench-token.eligible .token-head {outline:3px solid #e6ad27;outline-offset:2px;background:#3f6a55;}
.bench-token.locked .token-head canvas {opacity:.5;}
.role-lock {position:absolute;right:-6px;top:0;color:#fff4cf;background:#8b4b3e;font:bold 19px/20px monospace;width:20px;height:20px;border:1px solid #f4ddab;}
.setup-actions {display:flex;gap:12px;align-items:center;justify-content:center;padding-right:9%;}
#setup-back {flex:none;font:700 12px monospace;color:#795e3f;background:transparent;border:0;box-shadow:none;padding:12px 0;}
#kickoff {height:100%;width:76%;max-width:660px;padding:4px 12px;background:linear-gradient(#ffd968 0 7%,#ffc038 7% 85%,#e9a021 85%);color:#172e48;border:3px solid #80512c;outline:2px solid #fff0bf;box-shadow:3px 4px #513e2d,inset 2px 2px #fff2c6;font:clamp(23px,3.3vh,38px) CoachBlock,monospace;letter-spacing:2px;}
#kickoff:hover {background:#ffda64;}#kickoff:active {translate:1px 2px;box-shadow:1px 2px #513e2d;}
#setup-notice {position:absolute;bottom:1px;left:10px;right:10px;height:16px;text-align:center;font:700 12px/16px monospace;color:#91442e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#player-detail {position:fixed;width:180px;padding:12px;background:#fff0cb;color:#1b3047;border:3px solid #29495a;box-shadow:4px 5px #15373566;z-index:15;font-family:monospace;}
#detail-portrait {float:left;width:42px;height:50px;margin:0 9px 6px 0;}
#detail-name {display:block;font:bold 18px monospace;margin-top:7px;}
#detail-role {display:block;font:12px/1.4 monospace;margin-top:5px;}
#player-detail-close {position:absolute;right:2px;top:0;width:30px;height:30px;padding:0;border:0;box-shadow:none;background:transparent;color:#73593f;font:22px monospace;}
#detail-attributes {clear:both;display:grid;gap:7px;padding-top:4px;}
.attribute-row {display:flex;align-items:center;gap:10px;}
.attribute-row svg {width:20px;height:20px;fill:none;stroke:#254458;stroke-width:1.6;}
.attribute-pips {display:flex;gap:3px;}
.attribute-pips i {width:8px;height:11px;background:#d5c9a8;}.attribute-pips i.filled {background:#34624d;border-bottom:2px solid #1c473b;}
.invalid-lineup {outline:3px solid #b34e34;}
#half-resume-slot:empty {display:none;}
.halftime-clipboard .setup-heading h2 {font-size:clamp(15px,1.35vw,23px);max-width:48%;}
.halftime-clipboard #opponent-name {font:bold clamp(13px,1.05vw,20px) monospace;white-space:nowrap;}
.halftime-clipboard #opponent-badge {display:none;}
.halftime-clipboard #half-resume-slot {display:block;width:81%;height:100%;}
.halftime-clipboard #half-resume {height:100%;width:100%;margin:0;padding:4px 8px;background:linear-gradient(#ffd968 0 7%,#ffc038 7% 85%,#e9a021 85%);color:#172e48;border:3px solid #80512c;outline:2px solid #fff0bf;box-shadow:3px 4px #513e2d;font:clamp(22px,3.1vh,37px) CoachBlock,monospace;letter-spacing:1px;}
.halftime-clipboard .clipboard-paper {grid-template-rows:clamp(40px,6vh,66px) clamp(85px,13vh,145px) 30px minmax(200px,1fr) clamp(82px,11vh,118px) clamp(45px,6.5vh,72px);padding-bottom:34px;}
.halftime-clipboard #plan-caption {font:700 clamp(11px,.9vw,15px)/1.25 monospace;align-self:center;}
.halftime-clipboard .player-token {height:clamp(78px,10.4vh,113px);width:clamp(86px,7vw,126px);}
.halftime-clipboard .bench-token {height:100%;width:24%;}
.halftime-clipboard .token-head {width:clamp(30px,4.3vh,46px);height:clamp(33px,4.6vh,50px);}
.halftime-clipboard .token-name {font-size:clamp(13px,1.5vh,17px);}
.halftime-clipboard .tired .token-head {transform:rotate(-7deg);border-style:dashed;}
.stamina-bar {position:relative;display:block;flex:none;width:82px;max-width:95%;height:10px;margin-top:4px;border:2px solid #1b3047;background:#ded5b9;box-shadow:0 0 0 1px #f5e7bd;overflow:hidden;}
.stamina-before {position:absolute;inset:0 auto 0 0;width:var(--before);background:var(--energy);}
.stamina-recovered {position:absolute;inset:0 auto 0 var(--before);width:var(--recovered);background:repeating-linear-gradient(125deg,#f8edb5 0 2px,var(--energy) 2px 4px);transform-origin:left;}
.stamina-ticks {position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),#1b304788 calc(25% - 1px) 25%);}
.stamina-value {display:block;flex:none;font:bold 11px/14px monospace;background:#f5e7bd;color:#1b3047;padding:0 3px;}
.rest-filling .stamina-recovered {animation:halftime-rest 1.2s ease-out both;animation-delay:inherit;}
@keyframes halftime-rest {from{transform:scaleX(0);}to{transform:scaleX(1);}}
#halftime-note {position:absolute;bottom:17px;left:10px;right:10px;text-align:center;font:700 10px/14px monospace;color:#615235;}
@media(prefers-reduced-motion:reduce){.rest-filling .stamina-recovered{animation:none;}}
@media(max-width:1100px) {.clipboard {width:74vw;} .setup-heading h2 {font-size:17px;} .plan-tile span {font-size:13px;} }
@media(max-width:850px) {
  .clipboard {width:86vw;height:87svh;padding:8px;}
  .clipboard-paper {padding:12px 12px 21px;gap:4px;}
  .setup-heading {gap:4px;}.setup-heading h2 {font-size:15px;}
  .opponent-carousel {gap:4px;}#opponent-badge {width:25px;height:30px;}
  #opponent-name {font-size:13px;}#plan-tiles {gap:8px;}.plan-tile span {font-size:12px;}
  .clipboard-pencil {right:-16px;}.bench-label {width:18%;}.bench-label strong {font-size:13px;}
}
@media(max-height:650px) {
  .clipboard {height:91svh;max-width:850px;}
  .clipboard-clamp {height:23px;top:-11px;}.clipboard-clamp::before {bottom:14px;height:16px;}.clipboard-clamp i {top:-12px;}
  .clipboard-paper {padding:9px 14px 19px;grid-template-rows:35px 82px 14px minmax(150px,1fr) 54px 42px;gap:3px;}
  .setup-heading h2 {font-size:15px;}#opponent-badge {height:28px;}.plan-tile span {font-size:12px;padding:3px 0;}
  .player-token {height:49px;}.token-head {width:29px;height:31px;}.token-name {font-size:12px;}.token-number {width:20px;height:20px;font-size:12px;}
  .bench-token {height:100%;}#kickoff {font-size:24px;}.bench-label strong {font-size:14px;}
}
@media(max-height:470px), (max-width:560px) {
  .clipboard {width:94vw;height:90svh;}
  .clipboard-paper {overflow-y:auto;grid-template-rows:40px 78px 16px 200px 64px 48px;}
  .clipboard-pencil {display:none;}.setup-heading h2 {font-size:13px;}#setup-notice {position:sticky;bottom:-18px;background:#f5e7bd;min-height:16px;}
  #player-detail {width:166px;}.attribute-pips {gap:2px;}
}

/* Team condition stamp: the resolver supplies the value; no UI mood scoring. */
.halftime-clipboard[data-team-mood="REVENGE"] #setup-title::after,.halftime-clipboard[data-team-mood="HUMILIATION"] #setup-title::after {display:block;width:max-content;margin-top:3px;padding:2px 6px;font:bold 11px/12px monospace;letter-spacing:1px;border:1px solid currentColor;}
.halftime-clipboard[data-team-mood="REVENGE"] #setup-title::after {content:"REVENGE";color:#944123;}
.halftime-clipboard[data-team-mood="HUMILIATION"] #setup-title::after {content:"HUMILIATION";color:#48546b;}