:root {
  color-scheme: dark;
  --background: #0c150e;
  --surface: #142019;
  --raised: #1d2b21;
  --border: #344a39;
  --text: #edf6e8;
  --muted: #a9bea9;
  --accent: #d5ff66;
  --signal: #56df8c;
  --accent-ink: #172411;
  --rival: #83e8dc;
  --body-font: "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font: 400 15px/1.55 var(--body-font);
  background: var(--background);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: radial-gradient(ellipse at top, #243a29, transparent 680px), var(--background); }
button, textarea { font: inherit; }
button { color: inherit; }
button:not(:disabled), summary { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
:focus[tabindex="-1"] { outline: none; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shell { width: min(1184px, calc(100% - 64px)); margin-inline: auto; }
#app { padding-block: 22px 58px; }
.icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.eyebrow { font-size: .72rem; font-weight: 750; letter-spacing: .12em; }

.masthead { border-bottom: 1px solid var(--border); background: #0c1710; }
.header-actions { display: flex; gap: 7px; }
.effects-button[aria-pressed="true"] { color: var(--accent); }
.effects-button[aria-pressed="false"] b { text-decoration: line-through; }
.help-button.effects-button span { width: auto; border: 0; }
.masthead-inner { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark { display: flex; align-items: center; gap: 11px; font-size: .96rem; font-weight: 850; letter-spacing: -.04em; white-space: nowrap; }
.brand-mark { display: flex; align-items: center; justify-content: center; gap: 2px; width: 30px; height: 30px; border-radius: 3px; background: var(--signal); color: var(--accent-ink); transform: skewX(-6deg); }
.brand-mark i { width: 2px; height: 8px; border-radius: 1px; background: currentColor; }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { height: 13px; }
.brand-mark i:nth-child(3) { height: 19px; }
.help-button { display: flex; gap: 8px; align-items: center; padding: 7px 11px; border: 1px solid var(--border); background: transparent; border-radius: 6px; font-size: .78rem; color: var(--muted); }
.help-button span { border: 1px solid currentColor; border-radius: 50%; width: 15px; height: 15px; display: grid; place-items: center; font: 700 10px/1 var(--mono); }
.help-button:hover { color: var(--text); border-color: #76927b; }

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 321px;
  overflow: hidden;
  border: 1px solid #5f8c58;
  border-radius: 18px 3px 18px 3px;
  background: #101d13;
}
.hero-photo { position: absolute; z-index: -2; inset: 0 0 0 23%; background: url("./assets/stage.webp") center 43% / cover no-repeat; mask-image: linear-gradient(90deg, transparent, #000 38%); }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, #111d14 0 14%, #142f1ddb 38%, transparent 64%), linear-gradient(0deg, #0d1a11ad, transparent 47%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .45; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, #132a184f 3px 4px), radial-gradient(circle, #a7e67351 1px, transparent 1.5px) 0 0 / 7px 7px; mask-image: linear-gradient(110deg, #000, transparent 54%, #000 100%); }
.hero-content { padding: 29px 0 37px 40px; }
.hero-kicker, .stage-kicker { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.hero-kicker { width: fit-content; padding: 4px 9px; color: var(--accent); border: 1px solid #759751; background: #152517; }
.hero-kicker span, .stage-kicker span { width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 10px #caff6570; }
.hero h1 { margin-block: 10px 15px; font-size: clamp(3.6rem, 6.5vw, 6.1rem); font-weight: 950; line-height: .99; letter-spacing: -.063em; color: var(--text); transform: skewX(-6deg); text-shadow: .035em .043em 0 #09170e; }
.hero h1 strong { color: var(--accent); font-weight: inherit; text-shadow: .035em .046em 0 #09170e, .057em .07em 0 #4b8b50; }
.hero-content > p:last-child { color: #e3f0dc; font-size: .88rem; font-weight: 750; }
.hero-ribbons { position: absolute; inset: -42px 15px auto auto; display: flex; gap: 6px; transform: skewX(-32deg); pointer-events: none; opacity: .88; }
.hero-ribbons i { width: 13px; height: 134px; background: var(--accent); box-shadow: 0 0 18px #caff6555; }
.hero-ribbons i:nth-child(2) { height: 109px; opacity: .62; }
.hero-ribbons i:nth-child(3) { height: 84px; opacity: .38; }
.song-label { position: absolute; right: 17px; bottom: 15px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); border: 1px solid #6b8a56; border-left: 4px solid var(--accent); background: #102015eb; padding: 9px 13px; }
.song-label b { font-size: .8rem; white-space: nowrap; }
.song-label .eyebrow { color: var(--accent); white-space: nowrap; }
.song-details { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 600 .68rem/1 var(--mono); white-space: nowrap; }
.song-details i { height: 3px; width: 3px; border-radius: 50%; background: currentColor; }

.draft-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: 23px; margin-top: 25px; align-items: start; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.section-heading h2, .replay-heading h2 { font-size: 1.55rem; font-weight: 850; letter-spacing: -.05em; line-height: 1.3; }
.section-heading p, .replay-heading p { color: var(--muted); margin-top: 5px; font-size: .83rem; }
.draft-heading { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.draft-heading h2 { scroll-margin-top: 17px; }
.draft-count { white-space: nowrap; color: var(--muted); font: 600 .85rem/1 var(--mono); background: #1b2b20; border: 1px solid var(--border); border-radius: 7px 2px; padding: 8px 10px; }
.draft-count b { color: var(--accent); font-size: 1.16rem; margin-right: 4px; }
.draft-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 5px; }
.draft-steps i { height: 3px; background: #415444; transform: skewX(-20deg); }
.draft-steps .locked { background: var(--accent); }
.draft-steps .current { background: var(--signal); }
.candidate-section { margin-top: 16px; }
.candidate-section h3 { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: .91rem; font-weight: 800; }
.candidate-section h3 .icon { color: var(--signal); }
.candidate-section h3::after { content: ""; flex: 1; height: 1px; margin-left: 5px; background: linear-gradient(90deg, #61b37e83, transparent); }
.candidates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.candidate { display: flex; flex-direction: column; min-width: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-top: 2px solid #46684c; border-radius: 11px 2px 11px 2px; text-align: left; overflow: hidden; transition: border-color .18s, background .18s, transform .18s, box-shadow .18s; }
.candidate:hover { border-color: #91d98f; transform: translateY(-3px); box-shadow: 0 5px 18px #74c57522; }
.candidate[aria-pressed="true"] { border-color: var(--accent); background: #243923; box-shadow: 0 0 0 1px #d5ff6644, 0 3px 14px #b3ff6530; }
.candidate-picture { position: relative; width: 100%; height: 101px; overflow: hidden; background: #223528; border-bottom: 1px solid var(--border); }
.candidate-picture::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, #4d93622a, transparent 40%, #5bba522b), linear-gradient(0deg, #101b14ba, transparent 42%); }
.candidate[aria-pressed="true"] .candidate-picture::before { content: ""; position: absolute; z-index: 1; inset: -30% 0; pointer-events: none; background: linear-gradient(100deg, transparent 37%, #eaffaf55 48%, #caff65aa 49%, transparent 62%); animation: card-scan .47s ease-out both; }
@keyframes card-scan { from { transform: translateX(-84%); opacity: .7; } to { transform: translateX(90%); opacity: 0; } }
.candidate-photo { display: block; width: min(100%, 206px); height: 100%; margin-inline: auto; object-fit: cover; object-position: center 34%; filter: contrast(1.1); mask-image: linear-gradient(90deg, transparent, #000 14% 86%, transparent); }
.instrument-card .candidate-photo { object-position: center 50%; }
.candidate-tick { display: grid; place-items: center; position: absolute; z-index: 1; top: 8px; right: 8px; width: 23px; height: 23px; border-radius: 50%; border: 1px solid #819384; background: #15251ae8; color: transparent; }
.rarity-badge { position: absolute; z-index: 1; top: 8px; left: 8px; padding: 2px 6px; border: 1px solid currentColor; border-radius: 4px 1px; color: #c1d2b8; background: #101b15eb; font-size: .62rem; font-weight: 800; line-height: 1.2; }
.candidate[data-rarity="rare"] .rarity-badge { color: var(--rival); }
.candidate[data-rarity="epic"] .rarity-badge { color: #ffe38b; box-shadow: 0 0 12px #ffe38b55; }
.candidate[data-rarity="epic"]:not([aria-pressed="true"]) { border-top-color: #c9a653; }
.candidate[aria-pressed="true"] .candidate-tick { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.candidate-body { display: flex; flex: 1; flex-direction: column; width: 100%; padding: 9px 12px 12px; }
.candidate-body > strong { line-height: 1.25; font-size: .9rem; font-weight: 850; margin-bottom: 5px; }
.candidate-flavor { display: block; border-left: 2px solid #6eaa70; color: #c4d7b9; padding-inline-start: 7px; margin: 1px 0 10px; font-size: .74rem; line-height: 1.45; overflow-wrap: anywhere; }
.stats { display: grid; gap: 3px; margin-top: auto; }
.stat { display: grid; grid-template-columns: minmax(0, 5.1em) minmax(0, 1fr) 2ch; align-items: center; gap: 7px; color: var(--muted); font-size: .71rem; line-height: 1.14; }
.stat b { font: 600 .66rem/1 var(--mono); text-align: right; color: #e6f1e4; }
.stat-meter { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #71b98b 0 var(--value), #36503f var(--value) 100%); }
.stat-wild, .stat-wild b { color: var(--accent); }
.stat-wild .stat-meter { background: linear-gradient(90deg, #bbe557 0 var(--value), #465939 var(--value) 100%); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 11px 2px 11px 2px; }
.draft-sidebar { position: sticky; top: 19px; display: grid; gap: 12px; }
.lineup-panel { padding: 15px; border-top: 3px solid var(--signal); background: linear-gradient(138deg, #213726, var(--surface) 42%); box-shadow: 5px 5px #090f0b; }
.lineup-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lineup-heading h2 { font-size: 1rem; font-weight: 800; }
.lineup-heading > span { font: 600 .71rem/1 var(--mono); color: var(--accent); white-space: nowrap; }
.draft-roster, .band-panel ul, .critique ul { list-style: none; padding: 0; margin: 12px 0; }
.draft-roster { display: grid; gap: 7px; }
.roster-slot { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 5px 9px; background: #101b14; border: 1px solid #2b4033; border-radius: 2px; color: var(--muted); font-size: .75rem; }
.roster-slot.current { border: 1px dashed #a8ca65; background: #25371f; color: var(--accent); }
.roster-slot.filled { color: var(--text); }
.roster-slot.pair-preview { min-height: 53px; overflow: hidden; border-style: solid; background: linear-gradient(110deg, #3a4c23, #25371f 74%); }
.pair-preview .slot-photo { width: 39px; height: 39px; animation: preview-pop .35s ease-out; }
@keyframes preview-pop { from { opacity: .4; transform: scale(.83); } to { opacity: 1; transform: scale(1); } }
.slot-number { display: grid; place-items: center; width: 25px; height: 24px; border-radius: 2px; flex: 0 0 auto; background: #253a2c; font: 650 .7rem/1 var(--mono); }
.current .slot-number { background: var(--accent); color: var(--accent-ink); }
.slot-plus, .roster-slot .icon { margin-left: auto; }
.slot-plus { font: 500 1.15rem/1 var(--mono); }
.roster-slot .icon { color: var(--accent); }
.slot-photo { width: 28px; height: 28px; flex: 0 0 auto; object-fit: cover; border-radius: 4px; }
.slot-pair { display: flex; flex-direction: column; line-height: 1.2; overflow-wrap: anywhere; }
.slot-pair small { color: var(--muted); font-size: .67rem; margin-top: 3px; }
.wild-panel { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border: 1px solid #496850; border-left: 3px solid var(--signal); border-radius: 7px 2px; background: linear-gradient(110deg, #223d29, #1a2b20 65%); }
.wild-symbol { font-size: 1.2rem; color: var(--accent); line-height: 1; padding-top: 4px; }
.wild-panel div { display: grid; gap: 3px; }
.wild-panel div > span { color: var(--muted); font-size: .66rem; }
.wild-panel strong { color: var(--accent); font-size: 1.1rem; font-weight: 850; }
.wild-panel p { color: var(--muted); font-size: .68rem; }
.mobile-confirm { display: none; }

.button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 43px; padding: 8px 15px; border: 1px solid transparent; border-radius: 6px 2px 6px 2px; font-size: .86rem; font-weight: 800; line-height: 1.35; transition: background .18s, border-color .18s, box-shadow .18s; }
.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.primary:not(:disabled):hover { background: #e4ff9a; border-color: #e4ff9a; box-shadow: 0 0 16px #c2ff6655; }
.primary:disabled { background: #26382a; color: #a8bca8; border-color: #405947; }
.secondary { background: #1d3024; color: var(--text); border-color: #547360; }
.secondary:hover { background: #2d4b35; border-color: #83b68c; }
.confirm { width: 100%; justify-content: space-between; }

.stage { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--border); border-radius: 14px 3px; background: #101c14; }
.stage-ready { text-align: center; border-color: #517958; background: radial-gradient(ellipse at 50% 15%, #264f35, #13241a 66%); }
.stage-ready::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .37; background: repeating-linear-gradient(110deg, transparent 0 33px, #69b98648 33px 34px), repeating-linear-gradient(0deg, transparent 0 29px, #5c9b6255 29px 30px); mask-image: radial-gradient(ellipse at 50% 48%, #000 8%, transparent 75%); }
.stage-content { padding: 26px 24px 24px; }
.stage-ready .stage-kicker { justify-content: center; }
.stage h1 { font-size: clamp(2.3rem, 5.6vw, 4.9rem); font-weight: 950; line-height: 1.08; letter-spacing: -.075em; }
.stage-ready h1 { transform: skewX(-7deg); text-shadow: 4px 4px 0 #09190f, 6px 6px 0 var(--signal); }
.stage-song { color: var(--text); margin-top: 7px; font-size: .86rem; font-weight: 730; }
.stage-song span { color: var(--muted); font: 550 .75rem/1 var(--mono); white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-actions { margin-top: 17px; justify-content: center; }
.versus { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: clamp(17px, 5.2vw, 78px); max-width: 910px; margin: 18px auto 0; }
.versus-band { min-width: 0; color: var(--team); }
.versus-art { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: #1a3324; border-block: 3px solid var(--team); transform: skewX(-7deg); overflow: hidden; box-shadow: 0 0 25px color-mix(in srgb, var(--team) 22%, transparent); }
.versus-photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transform: skewX(7deg) scale(1.15); }
.versus-band > b { display: inline-block; margin-top: 8px; font-size: .78rem; letter-spacing: .07em; }
.versus-mark { position: absolute; top: 45%; left: 50%; color: var(--text); font: 950 clamp(2.4rem, 7vw, 6rem)/1 var(--mono); letter-spacing: -.15em; transform: translate(-54%, -50%) skewX(-12deg); text-shadow: 4px 5px #0b1a10, -3px -2px var(--signal); }

.stage-live { --stage-color: var(--accent); background: #0f1c14; padding: 18px; }
.stage-live[data-side="cpu"] { --stage-color: var(--rival); }
.live-heading { display: flex; justify-content: space-between; align-items: end; gap: 8px; padding: 0 3px 13px; }
.live-heading h1 { font-size: clamp(1.8rem, 4.5vw, 3.3rem); }
.stage-live .stage-kicker { color: var(--stage-color); }
.stage-live .stage-kicker span { background: currentColor; }
.live-floor { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(150px, 25vw, 330px); padding: 16px 12px; overflow: hidden; border-block: 1px solid var(--stage-color); background: #192f22; }
.stage-beams { position: absolute; z-index: -1; inset: -35% -9%; opacity: .35; background: repeating-conic-gradient(from 75deg at 50% 90%, var(--stage-color) 0 5deg, transparent 5deg 14deg, #56df8c 14deg 16deg, transparent 16deg 25deg); mask-image: radial-gradient(ellipse at 50% 52%, #000 0, transparent 66%); transform-origin: center bottom; }
.stage-sweep { position: absolute; z-index: 2; inset: -22% -3%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent 25%, color-mix(in srgb, var(--stage-color) 34%, transparent) 45%, var(--stage-color) 48%, transparent 66%); mix-blend-mode: screen; }
.performance-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(5px, 1.3vw, 15px); }
.performance-card { position: relative; margin: 0; min-width: 0; border: 1px solid #ffffff36; overflow: hidden; background: #16271d; transform: translateY(var(--offset, 4px)) rotate(var(--tilt, -2deg)); transition: border-color .18s, transform .32s, box-shadow .25s; }
.performance-card:nth-child(2n) { --offset: -6px; --tilt: 1.6deg; }
.performance-card[data-spotlight] { transform: translateY(-4px) scale(1.035); border-color: var(--stage-color); box-shadow: 0 0 0 1px var(--stage-color), 0 0 22px color-mix(in srgb, var(--stage-color) 44%, transparent); z-index: 1; }
.performance-photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: brightness(.8) contrast(1.16); }
.performance-card[data-spotlight] .performance-photo { filter: contrast(1.08); }
.performance-card figcaption { display: grid; gap: 2px; padding: 7px 8px; font-size: .72rem; line-height: 1.2; }
.performance-card figcaption span { color: var(--stage-color); font-size: .67rem; }
.mobile-spotlight { display: none; }
.stage-live[data-phase="loading"] .performance-strip, .stage-live[data-phase="countdown"] .performance-strip { opacity: .56; }
.stage-cue { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; color: var(--text); pointer-events: none; opacity: 0; transform: rotate(-5deg); font-size: clamp(3.6rem, 13vw, 10.5rem); font-weight: 950; letter-spacing: -.08em; text-shadow: .04em .05em #0c1710, .065em .065em var(--signal); }
.stage-live[data-phase="countdown"] .stage-cue { opacity: 1; color: var(--accent); }
.live-desk { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(80px, .65fr) minmax(0, 1fr); align-items: center; gap: 17px; min-height: 88px; padding: 10px 3px 0; }
.transport-label { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; gap: 8px; }
.transport-label span { font: 600 .72rem/1 var(--mono); white-space: nowrap; color: var(--muted); }
progress { display: block; width: 100%; height: 7px; margin-top: 7px; border: 0; accent-color: var(--stage-color); background: #304638; }
progress::-webkit-progress-bar { background: #304638; }
progress::-webkit-progress-value { background: var(--stage-color); }
progress::-moz-progress-bar { background: var(--stage-color); }
.stage-wave { display: flex; justify-content: center; align-items: end; gap: 3px; height: 40px; border-bottom: 1px solid #55745d; }
.stage-wave i { flex: 1 1 0; max-width: 7px; height: 100%; background: linear-gradient(0deg, var(--signal), var(--stage-color)); transform: scaleY(var(--level, .12)); transform-origin: bottom; }
.crowd-meter { min-width: 0; --meter-color: var(--stage-color); }
.crowd-meter[data-tone="surge"] { --meter-color: #ebd486; }
.crowd-meter[data-tone="dip"] { --meter-color: var(--rival); }
.crowd-reading { display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: .74rem; }
.crowd-reading b { color: var(--meter-color); font: 800 1.22rem/1 var(--mono); }
.crowd-track { height: 8px; background: #304638; margin-block: 6px; overflow: hidden; }
.crowd-track i { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(105deg, var(--meter-color) 0 8px, transparent 8px 10px); clip-path: inset(0 calc(100% - var(--crowd-score, 0%)) 0 0); transition: clip-path .27s ease-out; }
.crowd-meter p { min-height: 1.2em; color: var(--muted); font-size: .7rem; line-height: 1.3; }
.crowd-meter[data-tone="surge"] p, .crowd-meter[data-tone="dip"] p { color: var(--meter-color); }
.stage-live .stage-actions { margin-top: 10px; justify-content: end; }
.particle-burst { position: fixed; z-index: 8; inset: 0; overflow: hidden; pointer-events: none; }
.particle-burst i { position: absolute; left: var(--burst-x); top: var(--burst-y); display: block; width: 10px; height: 5px; box-shadow: 0 0 8px currentColor; }
.particle-burst i:nth-child(3n) { width: 5px; height: 12px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.burst-ring { position: absolute; left: var(--burst-x); top: var(--burst-y); width: 63px; height: 63px; border: 1px solid currentColor; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.screen-wipe { position: fixed; z-index: 7; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 29%, #71ed8733 42%, #9dff8155 47%, #d1ff9290 48%, #71ed8733 52%, transparent 66%); }

.game-cut-in {
  --cut-in-color: var(--accent);
  position: absolute;
  z-index: 5;
  right: 24px;
  bottom: 24px;
  display: grid;
  grid-template-columns: 99px minmax(0, 1fr);
  width: min(386px, calc(100% - 36px));
  min-height: 92px;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid var(--cut-in-color);
  border-inline-start-width: 5px;
  color: var(--text);
  background: repeating-linear-gradient(122deg, transparent 0 14px, #94dd7027 14px 15px), linear-gradient(110deg, #304d28, #13251b 63%);
  box-shadow: 0 0 24px #b9fc5560, 7px 7px #09190dc7;
}
.game-cut-in[data-tone="cpu"] { --cut-in-color: var(--rival); }
.game-cut-in[data-tone="neutral"] { --cut-in-color: #ebd486; }
.cut-in-art { position: relative; min-height: 92px; border-inline-end: 1px solid var(--cut-in-color); }
.cut-in-art > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; }
.cut-in-copy { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 12px; transform: skewX(5deg); }
.game-cut-in span { font-size: .75rem; line-height: 1.25; overflow-wrap: anywhere; }
.game-cut-in .cut-in-label { color: var(--cut-in-color); font: 700 .69rem/1.3 var(--mono); }
.game-cut-in strong { color: var(--cut-in-color); font-size: clamp(1.2rem, 3vw, 1.78rem); font-weight: 950; line-height: 1.12; letter-spacing: -.065em; text-shadow: 2px 3px #0b190f; }
#app > .game-cut-in { position: fixed; z-index: 9; inset: 70px max(13px, calc((100vw - 1184px) / 2)) auto auto; }

.band-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.band-panel { min-width: 0; padding: 16px; }
.band-panel h3 { display: flex; align-items: center; gap: 8px; font-size: .93rem; }
.band-panel ul { margin-bottom: 0; }
.band-panel li { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 5px 0; border-top: 1px solid var(--border); font-size: .77rem; }
.band-panel li b { margin-left: auto; text-align: right; font-size: .73rem; font-weight: 600; color: var(--muted); }
.band-panel .slot-photo { width: 24px; height: 24px; }
.band-panel h3 i, .legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--team); flex: 0 0 auto; }
.legend .side-cpu i { border-radius: 1px; transform: rotate(45deg); }
.side-player { --team: var(--accent); }
.side-cpu { --team: var(--rival); }

.scoreboard { --outcome-color: var(--accent); position: relative; isolation: isolate; padding: 19px; overflow: hidden; background: #17291d; border-top: 4px solid var(--outcome-color); }
.scoreboard[data-outcome="loss"] { --outcome-color: var(--rival); }
.scoreboard[data-outcome="draw"] { --outcome-color: #ebd486; }
.scoreboard::before { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-radial-gradient(ellipse at 50% 38%, transparent 0 38px, var(--outcome-color) 38px 39px, transparent 39px 63px), repeating-linear-gradient(116deg, transparent 0 44px, var(--outcome-color) 44px 45px); opacity: .17; mask-image: linear-gradient(#000 38%, transparent 92%); }
.scoreboard::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 22%, #0b1a10 0 12%, #13271cb5 43%, transparent 72%); }
.scoreboard-main { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; text-align: center; padding: 23px 0 27px; gap: 12px; }
.score-team { display: flex; flex-direction: column; color: var(--team); }
.score-team span { font-size: .8rem; font-weight: 750; }
.score-team b { margin-top: 6px; font: 800 clamp(2.2rem, 7vw, 5.5rem)/1 var(--mono); letter-spacing: -.09em; padding-right: .08em; text-shadow: .065em .055em #0a170f; }
.score-outcome { min-width: 7.5rem; }
.score-outcome span { color: var(--muted); }
.score-outcome h1 { color: var(--outcome-color); font-size: clamp(2.15rem, 7.5vw, 5.4rem); font-weight: 950; line-height: 1.08; letter-spacing: -.09em; margin: 3px .08em 7px 0; transform: skewX(-8deg) rotate(-4deg); text-shadow: .04em .055em #172c1e, .06em .073em var(--signal); animation: result-stamp .54s cubic-bezier(.18,.79,.32,1) both; }
.score-margin { display: inline-block; padding: 2px 7px; border: 1px solid var(--outcome-color); font-size: .67rem; background: #192e20; }
@keyframes result-stamp { from { opacity: 0; transform: scale(1.32) skewX(-8deg) rotate(-9deg); } to { opacity: 1; transform: skewX(-8deg) rotate(-4deg); } }
.score-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 16px; }
.feedback { color: var(--muted); font-size: .8rem; }
.scoreboard .feedback:not(:empty) { text-align: center; margin-top: 10px; }
.manual-copy { width: 100%; padding: 8px; margin-top: 8px; resize: vertical; background: #142219; border: 1px solid var(--border); color: var(--text); }
.result-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.chart-panel, .critique { padding: 17px; border-top: 2px solid var(--signal); }
.chart-heading { align-items: flex-start; flex-wrap: wrap; }
.chart-heading h2, .critique h2, .replay-heading h2 { font-size: 1.09rem; font-weight: 850; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: .7rem; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-plot { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: 175px auto; gap: 3px 5px; margin-top: 12px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; color: var(--muted); padding: 1px 0; font: 600 .68rem/1.15 var(--mono); }
.chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-plot .gridline { stroke: var(--border); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.chart-plot polyline { fill: none; stroke: var(--team); stroke-width: 2; animation: plot-line .72s ease-out; }
@keyframes plot-line { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.chart-point { fill: var(--team); stroke: var(--surface); stroke-width: 1; vector-effect: non-scaling-stroke; animation: plot-point .38s .32s both; }
@keyframes plot-point { from { opacity: 0; } to { opacity: 1; } }
.chart-x { grid-column: 2; display: flex; justify-content: space-between; color: var(--muted); font-size: .67rem; }
.chart-table { margin-top: 12px; color: var(--muted); font-size: .74rem; }
.chart-table summary { width: fit-content; }
.chart-table table { width: 100%; border-collapse: collapse; text-align: center; margin-top: 8px; }
.chart-table th, .chart-table td { border-top: 1px solid var(--border); padding: 4px; }
.critique > p { color: var(--muted); font-size: .74rem; margin-top: 5px; }
.critique p strong { color: var(--accent); margin-left: 3px; }
.critique li { border-top: 1px solid var(--border); padding: 8px 0; display: grid; gap: 3px; }
.critique li span { color: var(--muted); font-size: .67rem; }
.critique li b { font-size: .84rem; }
.critique li[data-reaction="wild-negative"] b { color: var(--rival); }
.critique li[data-reaction="gratitude"] b, .critique li[data-reaction="wild-positive"] b { color: #ebd486; }
.critique p.quiet { margin-top: 12px; }
.replay-heading { margin-top: 24px; }
.replay-heading + .feedback:not(:empty) { margin-top: 7px; }
.replay-button { width: 100%; margin-top: 10px; }
.replay-button span:not(.sr-only) { display: inline-flex; align-items: center; gap: 6px; }
.replay-button:not([data-playing="true"]) .replay-stop, .replay-button[data-playing="true"] .replay-play { display: none; }
.replay-button[data-playing="true"] { border-color: var(--team); color: var(--team); }
.band-panel:has(.replay-button[data-playing="true"]) { border-color: var(--team); box-shadow: inset 0 0 28px color-mix(in srgb, var(--team) 13%, transparent); }

.invalid { text-align: center; padding: 42px 18px; }
.invalid .eyebrow { color: var(--accent); }
.invalid h1 { margin: 4px 0 8px; font-size: clamp(1.5rem, 5vw, 2.7rem); }
.invalid p:not(.eyebrow) { color: var(--muted); margin-bottom: 18px; }
dialog { width: min(450px, calc(100vw - 30px)); color: var(--text); border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 19px; }
dialog::backdrop { background: #000b; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dialog-heading h2 { font-size: 1.25rem; }
.close-button { border: 1px solid var(--border); border-radius: 5px; background: var(--raised); width: 33px; height: 33px; font: 600 1.1rem/1 var(--mono); }
dialog ol { padding-left: 1.5em; }
dialog li + li { margin-top: 5px; }
dialog p { color: var(--muted); font-size: .82rem; }
dialog p + p { margin-top: 8px; }

@media (max-width: 900px) {
  .shell { width: calc(100% - 36px); }
  .draft-layout { gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(205px, 235px); }
  .hero-content { padding-left: 28px; }
  .lineup-panel { padding: 13px; }
  .candidate-body { padding-inline: 8px; }
  .stat { gap: 4px; }
}

@media (max-width: 670px) {
  .shell { width: calc(100% - 24px); }
  .masthead-inner { min-height: 51px; }
  #app { padding-block: 12px 35px; }
  #app[data-screen="draft"] { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .hero { min-height: 228px; align-items: flex-start; }
  .hero-content { padding: 21px 8px 51px 18px; }
  .hero h1 { font-size: clamp(2.64rem, 9.6vw, 4.1rem); }
  .hero-photo { inset-inline-start: 19%; background-position: 65% 41%; }
  .hero::before { background: linear-gradient(102deg, #112117 1%, #142d1bb5 44%, #192a1850 62%, transparent 100%), linear-gradient(0deg, #101d13aa, transparent 48%); }
  .hero-ribbons { right: 5px; top: -44px; gap: 4px; }
  .hero-ribbons i { width: 8px; height: 98px; }
  .hero-ribbons i:nth-child(2) { height: 84px; }
  .hero-ribbons i:nth-child(3) { height: 69px; }
  .hero-content > p:last-child { font-size: .74rem; }
  .song-label { left: 15px; right: auto; bottom: 11px; gap: 8px; padding: 5px 8px; }
  .song-label .eyebrow { font-size: .61rem; }
  .song-label b { font-size: .69rem; }
  .song-details { font-size: .59rem; }
  .draft-layout { grid-template-columns: minmax(0, 1fr); margin-top: 19px; gap: 15px; }
  .draft-sidebar { position: static; }
  .draft-heading h2 { font-size: 1.34rem; }
  .draft-heading p { font-size: .73rem; }
  .candidate-section { margin-top: 14px; }
  .candidate-section h3 { margin-bottom: 6px; }
  .candidates { gap: 6px; }
  .candidate-picture { height: 75px; }
  .candidate-body { padding: 7px 6px 8px; }
  .candidate-body > strong { font-size: .73rem; word-break: auto-phrase; }
  .candidate-flavor { padding-inline-start: 4px; margin-bottom: 7px; font-size: .67rem; }
  .candidate-tick { width: 19px; height: 19px; top: 5px; right: 5px; }
  .rarity-badge { top: 5px; left: 4px; padding: 2px 4px; font-size: .57rem; }
  .stat { font-size: .63rem; grid-template-columns: minmax(0, 5.1em) minmax(0, 1fr) 2ch; gap: 3px; }
  .stat b { font-size: .6rem; }
  .desktop-confirm { display: none; }
  .mobile-confirm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; position: fixed; z-index: 3; bottom: 0; left: 0; right: 0; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: #17281e; }
  .mobile-confirm > span { font-size: .72rem; color: var(--muted); overflow-wrap: anywhere; }
  .mobile-selection { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .mobile-selection .slot-photo { width: 34px; height: 34px; border: 1px solid var(--signal); animation: preview-pop .35s ease-out; }
  .mobile-confirm .confirm { font-size: .75rem; white-space: nowrap; padding-inline: 10px; }
  .stage-content { padding: 21px 15px; }
  .stage-song { font-size: .8rem; }
  .stage-song span { font-size: .65rem; }
  .stage-live { padding: 10px; }
  .live-heading { padding-bottom: 9px; }
  .live-heading .stage-song { text-align: right; }
  .live-heading .stage-song span { display: block; margin-top: 3px; }
  .live-floor { gap: 8px; padding: 8px 6px; }
  .game-cut-in { right: 9px; bottom: 96px; grid-template-columns: 63px minmax(0, 1fr); width: min(245px, calc(100% - 20px)); min-height: 65px; }
  .cut-in-art { min-height: 65px; }
  .cut-in-copy { padding: 5px 7px; }
  .game-cut-in span { font-size: .65rem; }
  .game-cut-in .cut-in-label { font-size: .58rem; }
  #app > .game-cut-in { top: 59px; }
  .performance-card { transform: none; }
  .performance-card[data-spotlight] { transform: translateY(-2px); }
  .performance-card figcaption { padding: 4px; font-size: .55rem; overflow-wrap: anywhere; }
  .performance-card figcaption span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .mobile-spotlight { position: relative; display: grid; grid-template-areas: "spot"; place-items: end start; width: min(100%, 212px); margin-inline: auto; border: 1px solid var(--stage-color); box-shadow: 0 0 25px color-mix(in srgb, var(--stage-color) 40%, transparent); }
  .mobile-spotlight > * { grid-area: spot; }
  .mobile-spotlight img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
  .mobile-spotlight b { padding: 4px 7px; background: #112318eb; color: var(--stage-color); font-size: .67rem; }
  .live-desk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 13px; }
  .live-desk .transport { grid-column: 1 / -1; }
  .stage-wave { height: 31px; gap: 2px; }
  .crowd-reading { font-size: .65rem; }
  .crowd-meter p { font-size: .6rem; }
  .band-grid, .result-layout { grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 9px; }
  .band-panel { padding: 12px; }
  .scoreboard { padding: 12px; }
  .scoreboard-main { padding: 13px 0 20px; gap: 5px; }
  .score-team span { font-size: .66rem; }
  .score-outcome { min-width: 4.7rem; }
  .score-outcome .eyebrow { font-size: .62rem; }
  .score-actions { padding-top: 11px; gap: 6px; }
  .score-actions .button { padding-inline: 9px; font-size: .71rem; }
  .chart-panel, .critique { padding: 13px; }
}

@media (max-width: 365px) {
  .stat { grid-template-columns: minmax(0, 1fr) 2ch; }
  .stat-meter { display: none; }
  .hero-content { padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .performance-card, .performance-card[data-spotlight], .candidate:hover { transform: none; }
}