:root {
  --night: #071018;
  --night-2: #0b1b24;
  --panel: #10232c;
  --panel-2: #18333c;
  --ivory: #f5edda;
  --muted: #9fafa9;
  --orange: #ffb13d;
  --red: #e34c32;
  --green: #56d59b;
  --accent: var(--orange);
  --display: "YuMincho", "Hiragino Mincho ProN", serif;
  --body: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --mono: "SFMono-Regular", "Osaka-Mono", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--night); }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--ivory);
  background:
    linear-gradient(rgba(7,16,24,.93),rgba(7,16,24,.93)),
    repeating-linear-gradient(105deg,transparent 0 3.9rem,rgba(245,237,218,.025) 4rem 4.05rem),
    var(--night);
  font-family: var(--body);
  overflow-x: hidden;
}

button { color: inherit; font: inherit; }
button:focus-visible { outline: 3px solid var(--ivory); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }

.app-shell { min-height: 100svh; display: grid; place-items: center; padding: 1.5rem; }
.screen {
  position: relative;
  isolation: isolate;
  width: min(88rem,100%);
  height: min(50rem,calc(100svh - 3rem));
  min-height: 39rem;
  overflow: hidden;
  border: 1px solid rgba(245,237,218,.24);
  border-radius: 1rem;
  background: var(--night-2);
  box-shadow: 0 1.5rem 5rem rgba(0,0,0,.52);
}

.topbar { min-height: 4.6rem; color: var(--ivory); background: rgba(5,14,20,.97); border-bottom: 1px solid rgba(245,237,218,.18); }
.brand-lockup { min-width: 0; display: flex; align-items: center; gap: .8rem; padding: .65rem 1.25rem; }
.brand-mark { width: 2.4rem; aspect-ratio: 1; flex: 0 0 auto; display: grid; place-items: center; color: var(--night); border-radius: 50%; background: var(--ivory); font: 900 .9rem/1 var(--display); transform: rotate(-7deg); }
.brand-lockup strong { display: block; font: 900 .88rem/1.15 var(--display); letter-spacing: .04em; }
.brand-lockup small { display: block; margin-top: .25rem; color: var(--muted); font: 800 .55rem/1 var(--mono); letter-spacing: .1em; }

.primary-button {
  min-height: 3.6rem;
  padding: .7rem 1rem;
  color: var(--night);
  border: 2px solid var(--ivory);
  border-radius: .3rem;
  background: var(--accent);
  box-shadow: .32rem .32rem 0 color-mix(in srgb,var(--accent) 60%,#4d1b13);
  font: 900 1rem/1 var(--display);
  cursor: pointer;
}
.primary-button:disabled { color: var(--muted); border-color: rgba(159,175,169,.35); background: var(--panel-2); box-shadow: none; }

/* Roster */
.roster-screen { --accent: var(--orange); display: grid; grid-template-rows: 4.6rem minmax(0,1fr) 7.9rem; }
.roster-screen::before {
  content: ""; position: absolute; z-index: -1; inset: 0; opacity: .18;
  background: radial-gradient(circle at 18% 20%,var(--accent),transparent 27%),repeating-linear-gradient(105deg,transparent 0 3.9rem,rgba(245,237,218,.07) 4rem 4.05rem);
}
.roster-topbar { display: grid; grid-template-columns: 1fr auto 1fr; }
.roster-heading { min-width: 24rem; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .5rem 2rem; border-inline: 1px solid rgba(245,237,218,.13); }
.roster-heading small { color: var(--accent); font: 900 .62rem/1 var(--mono); letter-spacing: .1em; }
.roster-heading h1 { margin: 0; font: 900 1.2rem/1 var(--display); }
.roster-heading span { color: var(--muted); font: 800 .55rem/1 var(--mono); }
.record-strip { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; padding: .55rem 1.25rem; }
.record-strip span { display: grid; gap: .2rem; text-align: right; }
.record-strip small { color: var(--muted); font: 700 .5rem/1 var(--mono); }
.record-strip strong { font: 900 .85rem/1 var(--mono); }

.roster-feature { min-height: 0; display: grid; grid-template-columns: minmax(22rem,.93fr) minmax(28rem,1.07fr); overflow: hidden; }
.roster-art { position: relative; min-width: 0; margin: 0; overflow: hidden; background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--night)),var(--night) 62%); clip-path: polygon(0 0,100% 0,89% 100%,0 100%); }
.roster-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 55%,var(--night) 100%),linear-gradient(0deg,rgba(7,16,24,.48),transparent 35%); pointer-events: none; }
.roster-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 18%; filter: saturate(.96) contrast(1.04); }
.roster-index { position: absolute; z-index: 2; left: 1.4rem; top: 1rem; color: var(--accent); font: 900 clamp(3rem,5vw,5.6rem)/.8 var(--mono); text-shadow: .25rem .25rem 0 rgba(0,0,0,.7); }
.roster-region { position: absolute; z-index: 2; left: 1.55rem; bottom: 1.15rem; display: flex; align-items: center; gap: .6rem; font: 900 .62rem/1 var(--mono); letter-spacing: .08em; text-shadow: 0 .15rem .5rem #000; }
.roster-region::before { content: ""; width: 1.8rem; height: .15rem; background: var(--accent); }

.dossier { min-width: 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: .85rem; padding: clamp(1rem,2.2vw,2rem) clamp(1.25rem,3vw,3.2rem) 1.1rem clamp(1rem,2.4vw,2.4rem); background: linear-gradient(90deg,transparent,rgba(7,16,24,.78) 8%,rgba(7,16,24,.97) 33%); }
.dossier { position: relative; }
.dossier-type { color: var(--accent); font: 900 .65rem/1 var(--mono); letter-spacing: .13em; }
.dossier-name h2 { margin: .35rem 0 0; font: 900 clamp(2.2rem,4vw,4.35rem)/.92 var(--display); letter-spacing: -.06em; }
.dossier-name h2 small { margin-left: .8rem; color: var(--muted); font: 700 .63rem/1 var(--mono); letter-spacing: .08em; }
.dossier-name p { max-width: 34rem; margin: .7rem 0 0; color: #c8d2cc; font: 700 clamp(.68rem,1vw,.82rem)/1.65 var(--body); }
.abilities { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .42rem; }
.ability { min-width: 0; padding: .52rem .58rem; border-block: 1px solid rgba(245,237,218,.12); background: rgba(16,35,44,.48); }
.ability span { display: flex; justify-content: space-between; color: var(--muted); font: 800 .5rem/1 var(--mono); }
.ability strong { color: var(--accent); }
.pips { display: grid; grid-template-columns: repeat(5,1fr); gap: .16rem; margin-top: .42rem; }
.pips i { height: .22rem; background: rgba(245,237,218,.13); }
.pips i.on { background: var(--accent); }
.arsenal-grid { min-height: 0; display: grid; grid-template-columns: 1fr 1.15fr; gap: .75rem; }
.arsenal-panel { min-width: 0; padding: .72rem .82rem; border: 1px solid rgba(245,237,218,.13); background: rgba(5,14,20,.5); }
.arsenal-panel h3 { margin: 0 0 .58rem; color: var(--muted); font: 900 .53rem/1 var(--mono); letter-spacing: .09em; }
.arsenal-panel h3 span { font-weight: 700; }
.pitch-tags { display: flex; flex-wrap: wrap; gap: .34rem; }
.pitch-tags span { padding: .32rem .48rem; border: 1px solid rgba(245,237,218,.18); background: rgba(24,51,60,.62); font: 800 .61rem/1 var(--body); }
.roster-magic { display: block; color: var(--accent); font: 900 clamp(.82rem,1.45vw,1.15rem)/1.2 var(--display); }
.arsenal-panel p { margin: .42rem 0 0; color: var(--muted); font-size: .6rem; line-height: 1.45; }
.roster-action { display: grid; grid-template-columns: 1fr minmax(9.5rem,12rem); align-items: center; gap: .8rem; }
.roster-action p { margin: 0; color: var(--muted); font: 800 .62rem/1.45 var(--mono); }
.roster-action p strong,.roster-action p span { display: block; }
.roster-action p strong { margin-bottom: .25rem; color: var(--accent); }

.roster-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; background: rgba(245,237,218,.14); border-top: 1px solid rgba(245,237,218,.16); }
.roster-pick { --pick-accent: var(--orange); position: relative; min-width: 0; display: grid; grid-template-columns: 4.5rem minmax(0,1fr); align-items: center; gap: .65rem; padding: .45rem .7rem; overflow: hidden; border: 0; background: var(--night-2); text-align: left; cursor: pointer; }
.roster-pick::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .25rem; opacity: 0; background: var(--pick-accent); }
.roster-pick.active { background: linear-gradient(100deg,color-mix(in srgb,var(--pick-accent) 15%,var(--panel)),var(--night-2)); }
.roster-pick.active::before { opacity: 1; }
.roster-thumb { position: relative; height: 6.2rem; overflow: hidden; background: var(--night); }
.roster-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 18%; filter: saturate(.75); }
.roster-pick.active img { filter: saturate(1.05); }
.lock-badge { position: absolute; right: .2rem; bottom: .2rem; min-width: 1.55rem; height: 1.55rem; display: grid; place-items: center; color: var(--night); border-radius: 50%; background: rgba(245,237,218,.9); font: 900 .5rem/1 var(--mono); }
.roster-copy { min-width: 0; }
.roster-copy small,.roster-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-copy small:first-child { color: var(--pick-accent); font: 900 .52rem/1 var(--mono); }
.roster-copy strong { margin-top: .3rem; font: 900 clamp(.7rem,1vw,.9rem)/1 var(--display); }
.roster-copy small:last-child { margin-top: .35rem; color: var(--muted); font: 700 .52rem/1 var(--mono); }

/* Game */
.game-screen { display: grid; grid-template-rows: 4.6rem minmax(0,1fr) 9.2rem; }
.scoreboard { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.compact-brand { border-right: 1px solid rgba(245,237,218,.13); }
.match-score { min-width: 15rem; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .5rem 1rem; }
.match-score small,.match-score span { color: var(--orange); font: 900 .75rem/1 var(--mono); letter-spacing: .08em; }
.match-score strong { font: 900 1.65rem/1 var(--mono); }
.match-score i { margin-inline: .6rem; font-style: normal; color: var(--muted); }
.match-status { display: flex; align-items: center; justify-content: flex-end; gap: 1.05rem; padding: .55rem 1.25rem; border-left: 1px solid rgba(245,237,218,.13); }
.base-diamond { position: relative; width: 2.3rem; height: 1.6rem; }
.base-diamond i { position: absolute; width: .68rem; aspect-ratio: 1; border: 1px solid rgba(245,237,218,.5); background: rgba(245,237,218,.08); transform: rotate(45deg); }
.base-diamond i:nth-child(1) { left: 50%; top: 0; transform: translateX(-50%) rotate(45deg); }
.base-diamond i:nth-child(2) { left: .05rem; bottom: .05rem; }
.base-diamond i:nth-child(3) { right: .05rem; bottom: .05rem; }
.base-diamond i.on { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 .6rem rgba(255,177,61,.45); }
.count-board { display: grid; gap: .32rem; color: var(--ivory); font: 900 .65rem/1 var(--mono); }
.count-board span { display: flex; gap: .35rem; }
.count-board i { display: flex; gap: .17rem; }
.count-board b { width: .46rem; aspect-ratio: 1; border-radius: 50%; background: rgba(245,237,218,.16); }
.count-board b.on.ball { background: var(--green); }
.count-board b.on.strike { background: var(--orange); }
.pitch-total { display: grid; gap: .2rem; text-align: right; }
.pitch-total strong { font: 900 .95rem/1 var(--mono); }
.pitch-total span { color: var(--muted); font: 800 .55rem/1 var(--mono); }

.game-field {
  /* 人物の座標はここに持たない。js/scene.js が世界座標から px で出す。 */
  position: relative;
  min-height: 0;
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  touch-action: none;
}
.game-field::after { content: ""; position: absolute; z-index: 9; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(3,9,12,.42),transparent 24%,transparent 78%,rgba(3,9,12,.28)),linear-gradient(0deg,rgba(3,9,12,.38),transparent 25%); mix-blend-mode: multiply; }
.game-art { position: absolute; z-index: 0; inset: 0; }
.game-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; }
.game-actor { position: absolute; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; pointer-events: none; will-change: background-image; }
.pitcher-actor { z-index: 4; filter: drop-shadow(0 .5rem .55rem rgba(0,0,0,.45)); }
.batter-actor { z-index: 3; filter: drop-shadow(0 .3rem .35rem rgba(0,0,0,.5)); }
.catcher-actor { z-index: 2; filter: drop-shadow(0 .25rem .3rem rgba(0,0,0,.52)); }
.pitcher-ghost { z-index: 2; opacity: 0; pointer-events: none; }
.pitcher-ghost.afterimage { animation: pitcher-afterimage .14s ease-out both; }
@keyframes pitcher-afterimage {
  0% { opacity: .24; filter: blur(0) drop-shadow(0 .65rem .65rem rgba(0,0,0,.3)); }
  100% { opacity: 0; filter: blur(.2rem) drop-shadow(0 .65rem .65rem rgba(0,0,0,0)); }
}
.trajectory-canvas { position: absolute; z-index: 20; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pressure-meter { position: absolute; z-index: 25; left: 1rem; top: 1rem; width: 5.2rem; display: grid; gap: .42rem; padding: .65rem; border: 1px solid rgba(245,237,218,.28); background: rgba(6,16,21,.86); box-shadow: 0 .75rem 2rem rgba(0,0,0,.4); }
.pressure-meter > small { color: var(--muted); text-align: center; font: 900 .55rem/1 var(--mono); letter-spacing: .12em; }
.pressure-meter > strong { text-align: center; font: 900 1.1rem/1 var(--display); }
.pressure-well { position: relative; height: 9.2rem; overflow: hidden; border: 2px solid rgba(245,237,218,.82); background: repeating-linear-gradient(to top,transparent 0 calc(20% - 1px),rgba(245,237,218,.18) calc(20% - 1px) 20%),rgba(5,7,6,.6); }
.pressure-well i { position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(to top,var(--red),var(--orange)); box-shadow: 0 0 1.5rem rgba(227,76,50,.35); transition: height .22s linear; }
.pressure-well i::after { content: ""; position: absolute; inset: 0; opacity: .3; background: repeating-linear-gradient(-45deg,transparent 0 .42rem,rgba(255,255,255,.35) .44rem .54rem); }
.pressure-meter > span { min-height: 1.7rem; display: grid; place-items: center; color: var(--green); border: 1px solid currentColor; font: 900 .62rem/1 var(--mono); letter-spacing: .08em; }
.pressure-meter > b { color: var(--muted); text-align: center; font: 800 .56rem/1 var(--mono); }
.pressure-guide { margin: 0; padding-top: .38rem; color: var(--ivory); border-top: 1px solid #ffffff21; text-align: center; font: 700 .55rem/1.65 var(--body); }
.pressure-guide em { color: var(--muted); font-style: normal; }
.game-field[data-pressure-state="limit"] .pressure-meter > span { color: var(--orange); }

/* 位置と大きさは js/scene.js の投影から px で入る。ここに座標を持たせない。 */
.course-plane { position: absolute; z-index: 24; pointer-events: none; }
/* 触るための面。判定面より広く取り、その中の位置を照準へ写す。 */
.course-input { position: absolute; z-index: 23; cursor: crosshair; touch-action: none; }
.course-input:not([hidden]) + .course-plane::before {
  content: ""; position: absolute; inset: 0; border: 1px dashed #ffb13d9c;
  background: repeating-linear-gradient(-45deg,transparent 0 6px,#ffb13d16 6px 7px);
  clip-path: polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,var(--zone-left) var(--zone-top),var(--zone-left) calc(var(--zone-top) + var(--zone-height)),calc(var(--zone-left) + var(--zone-width)) calc(var(--zone-top) + var(--zone-height)),calc(var(--zone-left) + var(--zone-width)) var(--zone-top),var(--zone-left) var(--zone-top));
}
.strike-zone { position: absolute; left: var(--zone-left); top: var(--zone-top); width: var(--zone-width); height: var(--zone-height); border: 2px solid #fff5dc; background: linear-gradient(90deg,transparent 32.8%,rgba(245,237,218,.35) 33% 34%,transparent 34.2% 65.8%,rgba(245,237,218,.35) 66% 67%,transparent 67.2%),linear-gradient(transparent 32.8%,rgba(245,237,218,.35) 33% 34%,transparent 34.2% 65.8%,rgba(245,237,218,.35) 66% 67%,transparent 67.2%),rgba(43,114,81,.12); box-shadow: 0 0 0 2px #0613149c,0 0 .65rem #f5edda35; pointer-events: none; }
.strike-zone span { position: absolute; left: 50%; bottom: calc(100% + .35rem); padding: .22rem .32rem; background: #071018e6; font: 900 .53rem/1 var(--mono); white-space: nowrap; transform: translateX(-50%); }
.course-cursor { position: absolute; z-index: 2; left: 42%; top: 52%; width: var(--cursor-size,2.2rem); aspect-ratio: 1; border: 3px solid var(--orange); border-radius: 50%; box-shadow: 0 0 0 3px rgba(5,7,6,.72),0 0 1rem rgba(255,177,61,.5); transform: translate(-50%,-50%); pointer-events: none; }
.course-cursor::before,.course-cursor::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--orange); transform: translate(-50%,-50%); }
.course-cursor::before { width: 145%; height: 2px; }
.course-cursor::after { width: 2px; height: 145%; }
.course-cursor > i { position: absolute; z-index: 2; left: 50%; top: 50%; width: .44rem; aspect-ratio: 1; border-radius: 50%; background: var(--ivory); transform: translate(-50%,-50%); }
.timing-ring { --ring-scale: 2.8; position: absolute; inset: 0; border: 3px solid var(--ivory); border-radius: 50%; box-shadow: 0 0 1.5rem rgba(245,237,218,.5); transform: scale(var(--ring-scale)); }
.timing-ring b { position: absolute; left: 50%; top: calc(100% + .7rem); padding: .32rem .48rem; color: var(--night); background: var(--ivory); font: 900 .52rem/1 var(--mono); white-space: nowrap; transform: translateX(-50%) scale(calc(1 / var(--ring-scale))); transform-origin: top center; }
.timing-active .course-cursor { border-color: var(--green); }
.course-cursor.outside { border-color: #ff8060; box-shadow: 0 0 0 3px #071018b8,0 0 1rem #ff80604d; }
.course-cursor.outside::before,.course-cursor.outside::after { background: #ff8060; }

.game-message { position: absolute; z-index: 18; right: 3%; top: 12%; width: min(27rem,33%); display: grid; justify-items: end; gap: .75rem; text-align: right; text-shadow: 0 .2rem 1rem rgba(0,0,0,.8); pointer-events: none; }
.game-message span { color: var(--orange); font: 900 .62rem/1 var(--mono); letter-spacing: .1em; }
.game-message strong { font: 900 clamp(1.7rem,3vw,3.2rem)/1.03 var(--display); }
.phase-callout { position: absolute; z-index: 30; right: 1rem; bottom: 1rem; padding: .45rem .65rem; color: var(--orange); border: 1px solid rgba(245,237,218,.35); background: rgba(5,14,20,.82); font: 900 .55rem/1 var(--mono); letter-spacing: .08em; pointer-events: none; }
.pitch-result { position: absolute; z-index: 35; left: 50%; top: 12%; min-width: 16rem; max-width: min(31rem,74%); display: grid; justify-items: center; gap: .45rem; padding: .8rem 1.1rem; border: 1px solid rgba(245,237,218,.25); background: rgba(5,14,20,.88); box-shadow: .4rem .4rem 0 rgba(0,0,0,.55); text-align: center; transform: translateX(-50%); }
.pitch-result small { color: var(--orange); font: 900 .55rem/1 var(--mono); letter-spacing: .1em; }
.pitch-result strong { font: 900 1.5rem/1 var(--display); }
.pitch-result span { color: var(--muted); font-size: .62rem; }

.command-deck { min-height: 0; display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,.95fr) minmax(0,.65fr); background: rgba(5,14,20,.99); border-top: 1px solid rgba(245,237,218,.2); }
.command-step { position: relative; min-width: 0; display: grid; align-content: start; gap: .5rem; padding: .72rem .9rem .78rem; border-right: 1px solid rgba(245,237,218,.15); }
.command-step::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: .24rem; background: rgba(245,237,218,.12); }
.command-step.active::before { background: var(--orange); }
.command-step header { min-height: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.command-step h2 { display: flex; align-items: baseline; gap: .45rem; margin: 0; font: 900 .78rem/1 var(--body); letter-spacing: .05em; }
.command-step h2 b { color: var(--orange); font: 900 .65rem/1 var(--mono); }
.command-step header > span { color: var(--muted); font: 800 .54rem/1 var(--mono); }
.pitch-command-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .35rem; max-height: 6.25rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--muted) var(--night); }
.pitch-command { min-width: 0; min-height: 2.75rem; display: grid; grid-template-columns: 1.55rem minmax(0,1fr) auto; align-items: center; gap: .45rem; padding: .35rem .55rem .35rem .42rem; border: 1px solid rgba(245,237,218,.16); border-radius: .15rem; background: rgba(16,35,44,.64); text-align: left; cursor: pointer; transition: border-color .12s,background .12s; }
.pitch-command:not(:disabled):hover { border-color: var(--orange); background: var(--panel-2); }
.pitch-command.selected { border-color: rgba(255,177,61,.75); background: linear-gradient(90deg,rgba(255,177,61,.18),rgba(16,35,44,.85)); box-shadow: inset .23rem 0 0 var(--orange); }
.pitch-key { display: grid; place-items: center; width: 1.45rem; aspect-ratio: 1; color: var(--muted); border: 1px solid rgba(245,237,218,.22); font: 900 .58rem/1 var(--mono); }
.selected .pitch-key { color: var(--night); border-color: var(--orange); background: var(--orange); }
.pitch-copy { min-width: 0; }
.pitch-copy strong,.pitch-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitch-copy strong { font: 900 .76rem/1.1 var(--body); }
.pitch-command.magic .pitch-copy strong { color: var(--orange); }
.pitch-copy small { margin-top: .18rem; color: var(--muted); font: 700 .49rem/1 var(--mono); }
.pitch-speed { font: 900 .59rem/1 var(--mono); white-space: nowrap; }
.course-readout { min-height: 4.95rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .7rem; padding: .55rem .65rem; border: 1px solid rgba(245,237,218,.15); background: rgba(16,35,44,.58); }
.course-readout strong,.course-readout span { display: block; }
.course-readout strong { font: 900 clamp(.82rem,1.2vw,1rem)/1.15 var(--display); }
.course-readout span { margin-top: .35rem; color: var(--muted); font: 700 .52rem/1.35 var(--mono); }
.course-readout > i { position: relative; width: 2.3rem; aspect-ratio: 2/3; border: 1px solid rgba(245,237,218,.6); background: linear-gradient(90deg,transparent 32%,rgba(245,237,218,.2) 33% 34%,transparent 35% 65%,rgba(245,237,218,.2) 66% 67%,transparent 68%),linear-gradient(transparent 32%,rgba(245,237,218,.2) 33% 34%,transparent 35% 65%,rgba(245,237,218,.2) 66% 67%,transparent 68%); }
.course-readout > i::after { content: "↔"; position: absolute; left: 50%; bottom: -.6rem; padding: 0 .15rem; color: var(--orange); background: var(--night); font: 900 .9rem/1 var(--mono); transform: translateX(-50%); }
.throw-step { border-right: 0; }
.throw-step header button { min-width: 2.8rem; min-height: 1.6rem; padding: .2rem .45rem; color: var(--muted); border: 1px solid rgba(245,237,218,.2); background: transparent; font: 800 .52rem/1 var(--mono); cursor: pointer; }
.throw-button { width: min(100%,8.2rem); min-height: 4.95rem; justify-self: center; display: grid; place-items: center; gap: .2rem; padding: .6rem; color: var(--night); border: 2px solid var(--ivory); border-radius: .35rem; background: var(--orange); box-shadow: .3rem .3rem 0 var(--red); cursor: pointer; }
.throw-button strong { font: 900 1.25rem/1 var(--display); }
.throw-button small { font: 900 .51rem/1 var(--mono); }
.throw-button:disabled { color: rgba(159,175,169,.6); border-color: rgba(159,175,169,.35); background: var(--panel-2); box-shadow: none; }
.timing-active .throw-button { background: var(--green); box-shadow: .3rem .3rem 0 #1e7956; }

.result-overlay { position: absolute; z-index: 60; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: rgba(5,7,6,.68); backdrop-filter: blur(3px); }
.result-overlay.lose { place-items: center end; padding-right: 6%; background: linear-gradient(90deg,rgba(5,7,6,.15),rgba(5,7,6,.85) 58%),var(--defeat-image) center/cover no-repeat; }
.result-overlay article { width: min(42rem,92%); padding: 2rem; border: 2px solid var(--ivory); background: rgba(7,16,24,.94); box-shadow: 1rem 1rem 0 rgba(0,0,0,.6); transform: rotate(-1deg); }
.result-overlay.lose article { width: min(38rem,62%); }
.result-overlay article > small { color: var(--orange); font: 900 .72rem/1 var(--mono); letter-spacing: .14em; }
.result-overlay h2 { margin: .8rem 0 0; color: var(--green); font: 900 clamp(3rem,8vw,6.5rem)/.8 var(--display); letter-spacing: -.06em; }
.result-overlay.lose h2 { color: #c88e61; }
.result-overlay p { color: var(--muted); font-weight: 800; line-height: 1.7; }
.final-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin-block: 1rem; padding-top: 1rem; border-top: 1px solid rgba(245,237,218,.2); }
.final-stats span { color: var(--muted); font: 700 .58rem/1 var(--mono); }
.final-stats strong { display: block; margin-top: .4rem; color: var(--ivory); font-size: 1.1rem; }

.resume-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(5,7,6,.82); }
.resume-overlay article { width: min(30rem,92%); padding: 1.5rem; border: 1px solid rgba(245,237,218,.5); background: var(--night); box-shadow: 1rem 1rem 0 #000; }
.resume-overlay small { color: var(--orange); font: 900 .65rem/1 var(--mono); }
.resume-overlay h2 { margin: .7rem 0; font: 900 2rem/1 var(--display); }
.resume-overlay p { color: var(--muted); line-height: 1.6; }
.resume-overlay article > div { display: flex; gap: .8rem; margin-top: 1rem; }
.resume-overlay article > div button:last-child { min-height: 3.6rem; padding: .7rem 1rem; border: 1px solid rgba(245,237,218,.25); background: var(--panel); cursor: pointer; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 1rem; max-width: min(34rem,90%); padding: .7rem 1rem; color: var(--ivory); border: 1px solid rgba(245,237,218,.3); background: rgba(16,35,44,.97); box-shadow: .3rem .3rem 0 rgba(0,0,0,.65); font-size: .72rem; transform: translateX(-50%); }
noscript { position: fixed; z-index: 200; inset: auto 1rem 1rem; padding: 1rem; color: var(--ivory); background: var(--red); }

@media (max-width: 820px) {
  .app-shell { min-height: 100svh; padding: 0; place-items: stretch; }
  .screen { width: 100%; height: 100svh; min-height: 43rem; border: 0; border-radius: 0; }
  .roster-screen { grid-template-rows: 4.2rem minmax(0,1fr) 5.7rem; }
  .roster-topbar { grid-template-columns: 1fr auto; }
  .brand-lockup { padding: .55rem .75rem; }
  .brand-mark { width: 2.15rem; }
  .brand-lockup strong { max-width: 12rem; font-size: .68rem; }
  .brand-lockup small,.record-strip { display: none; }
  .roster-heading { min-width: 0; padding: .45rem .75rem; border-right: 0; }
  .roster-heading small,.roster-heading span { display: none; }
  .roster-heading h1 { font-size: .96rem; }
  .roster-feature { grid-template-columns: 1fr; grid-template-rows: minmax(17rem,1.18fr) minmax(20rem,.82fr); }
  .roster-art { clip-path: polygon(0 0,100% 0,100% 93%,0 100%); }
  .roster-art::after { background: linear-gradient(0deg,var(--night) 0,transparent 44%),linear-gradient(90deg,transparent 65%,rgba(7,16,24,.45)); }
  .roster-index { left: .75rem; top: .7rem; font-size: 3.4rem; }
  .roster-region { left: .85rem; bottom: 1.6rem; font-size: .5rem; }
  .dossier { gap: .48rem; padding: 0 .75rem .58rem; background: var(--night); }
  .dossier-name { position: absolute; z-index: 3; left: .8rem; top: -4.1rem; text-shadow: 0 .18rem .7rem #000; }
  .dossier-type { font-size: .52rem; }
  .dossier-name h2 { margin-top: .22rem; font-size: 2.2rem; }
  .dossier-name h2 small,.dossier-name p { display: none; }
  .abilities { gap: .22rem; }
  .ability { padding: .38rem .4rem; }
  .ability span { font-size: .43rem; }
  .arsenal-grid { grid-template-columns: 1fr 1.1fr; gap: .35rem; }
  .arsenal-panel { padding: .48rem .52rem; }
  .arsenal-panel h3 { margin-bottom: .4rem; font-size: .44rem; }
  .pitch-tags { gap: .22rem; }
  .pitch-tags span { padding: .25rem .32rem; font-size: .49rem; }
  .roster-magic { font-size: .7rem; }
  .arsenal-panel p { margin-top: .25rem; font-size: .49rem; line-height: 1.3; }
  .roster-action { grid-template-columns: 1fr 8rem; gap: .45rem; }
  .roster-action p { font-size: .49rem; }
  .primary-button { min-height: 3rem; font-size: .76rem; }
  .roster-pick { grid-template-columns: 1fr; gap: 0; padding: .22rem; place-items: center; text-align: center; }
  .roster-thumb { width: 100%; height: 3.4rem; }
  .roster-copy small { display: none; }
  .roster-copy strong { margin-top: .15rem; font-size: .54rem; }
  .lock-badge { right: .1rem; bottom: .1rem; min-width: 1.2rem; height: 1.2rem; font-size: .42rem; }

  .game-screen { grid-template-rows: 6.2rem minmax(0,1fr) 14.7rem; }
  .scoreboard { grid-template-columns: 1fr auto; grid-template-rows: 3.6rem 2.6rem; }
  .compact-brand { padding-inline: .7rem; }
  .compact-brand strong { max-width: 8rem; }
  .match-score { min-width: 0; padding: .5rem .7rem; gap: .4rem; }
  .match-score strong { font-size: 1.35rem; }
  .match-score small,.match-score span { font-size: .65rem; }
  .match-status { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 1rem; padding: .3rem .8rem; border-left: 0; border-top: 1px solid #ffffff21; }
  .count-board { display: flex; gap: .85rem; margin-right: auto; }
  .pitch-total { display: flex; gap: .7rem; align-items: center; }
  .pitch-total strong { font-size: .8rem; }
  .game-art img { object-position: center center; }
  .pressure-meter { left: .55rem; right: auto; top: .55rem; width: 3.9rem; padding: .4rem; gap: .28rem; }
  .pressure-well { height: 5.8rem; }
  .pressure-meter > small { font-size: .43rem; }
  .pressure-meter > span { font-size: .51rem; min-height: 1.3rem; }
  .pressure-guide { font-size: .48rem; }
  .strike-zone span { font-size: .47rem; }
  .course-cursor { width: 2.1rem; }
  .game-message { display: none; }
  .phase-callout { right: .55rem; bottom: .55rem; font-size: .47rem; }
  .pitch-result { top: .65rem; left: auto; right: .6rem; min-width: 0; max-width: calc(100% - 5.8rem); justify-items: start; padding: .6rem .7rem; text-align: left; transform: none; }
  .pitch-result strong { font-size: 1.1rem; }
  .pitch-result span { font-size: .52rem; }
  .command-deck { grid-template-columns: minmax(0,1fr) 7.7rem; grid-template-rows: auto auto; }
  .command-step { gap: .25rem; padding: .4rem .5rem; }
  .command-step header { min-height: .9rem; }
  .command-step h2 { font-size: .68rem; }
  .command-step h2 b { font-size: .56rem; }
  .pitch-step { grid-column: 1/-1; border-right: 0; border-bottom: 1px solid rgba(245,237,218,.15); }
  .course-step { grid-column: 1; }
  .throw-step { grid-column: 2; }
  .pitch-command-list { gap: .2rem; }
  .pitch-command { min-height: 2.75rem; padding-block: .22rem; }
  .pitch-copy strong { font-size: .66rem; }
  .pitch-copy small { font-size: .44rem; }
  .pitch-speed { font-size: .49rem; }
  .course-readout { min-height: 4.2rem; padding: .32rem .45rem; }
  .course-readout strong { font-size: .76rem; }
  .course-readout span { font-size: .46rem; }
  .course-readout > i { width: 1.75rem; }
  .throw-button { min-height: 4.2rem; padding: .35rem; }
  .throw-button strong { font-size: 1rem; }
  .result-overlay { padding: 1rem; }
  .result-overlay.lose { place-items: start end; padding: 6rem .8rem .8rem; background: linear-gradient(180deg,rgba(5,7,6,.5),rgba(5,7,6,.12) 68%,rgba(5,7,6,.5)),var(--defeat-image) center/cover no-repeat; }
  .result-overlay article,.result-overlay.lose article { width: min(23rem,88%); padding: 1rem; }
  .result-overlay h2 { font-size: 3.2rem; }
  .result-overlay p { font-size: .72rem; }
}

@media (max-width: 390px) {
  .roster-feature { grid-template-rows: minmax(16rem,1.12fr) minmax(20.5rem,.88fr); }
  .dossier { padding-inline: .55rem; }
  .roster-region { bottom: 1.35rem; }
  .pitch-command { grid-template-columns: 1.35rem minmax(0,1fr) auto; gap: .3rem; }
  .pitch-key { width: 1.28rem; }
  .pitch-command.magic .pitch-copy strong { font-size: .55rem; }
  .pitch-command.magic .pitch-speed { display: none; }
}

@media (min-width: 821px) and (max-height: 760px) {
  .app-shell { padding: .75rem; }
  .screen { height: calc(100svh - 1.5rem); min-height: 0; }
  .roster-screen { grid-template-rows: 3.8rem minmax(0,1fr) 7.7rem; }
  .game-screen { grid-template-rows: 3.8rem minmax(0,1fr) 9.2rem; }
  .topbar { min-height: 3.8rem; }
  .brand-mark { width: 2.15rem; }
  .dossier { gap: .65rem; padding-top: 1rem; }
  .pressure-well { height: 8.5rem; }
  .command-step { padding-top: .58rem; padding-bottom: .58rem; }
  .pitch-command { min-height: 2.75rem; }
  .course-readout,.throw-button { min-height: 4.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}