/* Cobb County Crashout - fighter select. 1920x1080 stage scaled to fit (letterboxed), DWF 'Election Night' feel. */
@font-face { font-family: 'CCC Anton'; src: url('../assets/fonts/Anton-Regular.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'CCC Oswald'; src: url('../assets/fonts/Oswald-VariableFont_wght.ttf') format('truetype'); font-weight: 200 700; font-display: block; }
:root { --main: #C41E3A; --lite: #FFB2B2; --deep: #6E0816; --acc: #FFFFFF; --gold: #FFD23A; --ink: #04060c; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body { font-family: 'CCC Oswald', 'Oswald', 'Arial Narrow', sans-serif; color: #fff; user-select: none; -webkit-font-smoothing: antialiased; }
#viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; overflow: hidden; background: var(--ink); }
.hidden { display: none !important; }

/* ---------- background ---------- */
#bg, #bg > div { position: absolute; inset: 0; }
#bg-art { background-size: cover; background-position: 70% 20%; filter: blur(38px) saturate(1.2) brightness(0.42); transform: scale(1.15); opacity: 0.9; transition: background-image .4s; }
#bg-glow { background: radial-gradient(1100px 760px at 76% 38%, color-mix(in srgb, var(--main) 42%, transparent), transparent 70%),
                      radial-gradient(900px 600px at 8% 100%, color-mix(in srgb, var(--acc) 10%, transparent), transparent 70%),
                      linear-gradient(90deg, rgba(3,5,12,.92) 0%, rgba(3,5,12,.72) 52%, rgba(3,5,12,.25) 100%);
           transition: background .35s; }
#bg #bg-word { inset: auto; font-family: 'CCC Anton', Impact, sans-serif; font-size: 300px; line-height: 1; letter-spacing: 8px; color: transparent;
           -webkit-text-stroke: 2px rgba(255,255,255,.055); top: 700px; left: -20px; white-space: nowrap; }
#bg-grain { opacity: .07; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
#bg-vignette { background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.75) 100%); }

/* ---------- header ---------- */
#top { position: absolute; left: 56px; top: 28px; right: 56px; height: 130px; display: flex; align-items: center; gap: 30px; }
#logo { height: 118px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)); }
#heading { border-left: 2px solid rgba(255,255,255,.18); padding-left: 28px; }
.h-kicker { font-weight: 600; letter-spacing: 6px; font-size: 20px; color: var(--lite); transition: color .3s; }
.h-title, .chrome { font-family: 'CCC Anton', Impact, sans-serif; letter-spacing: 3px;
  background: linear-gradient(180deg, #fff 0%, #d6dce8 45%, #78809a 52%, #e2e6f0 75%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(10,12,20,.95)) drop-shadow(0 0 14px color-mix(in srgb, var(--main) 55%, transparent)); }
.h-title { font-size: 64px; line-height: 1.02; }
#status { margin-left: auto; align-self: flex-start; margin-top: 18px; display: flex; flex-direction: row; align-items: center; gap: 28px; font-weight: 600; letter-spacing: 3px; font-size: 16px; color: rgba(255,255,255,.7); }
#music { display: flex; align-items: center; gap: 12px; }
.eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 18px; }
.eq i { width: 4px; height: 4px; background: var(--gold); border-radius: 1px; }
body.music-on .eq i { animation: eq .9s ease-in-out infinite; } .eq i:nth-child(2) { animation-delay: -.3s !important; } .eq i:nth-child(3) { animation-delay: -.6s !important; } .eq i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 18px; } }
#pad-status { display: flex; align-items: center; gap: 10px; color: #9fe6b0; }
.pad-ico { width: 30px; height: 18px; border: 2px solid currentColor; border-radius: 9px; position: relative; }
.pad-ico::after { content: ''; position: absolute; left: 6px; top: 5px; width: 4px; height: 4px; background: currentColor; box-shadow: 10px 0 0 currentColor; border-radius: 50%; }

/* ---------- grid ---------- */
#grid { position: absolute; left: 56px; top: 186px; width: 1080px; height: 800px; }
.tile { position: absolute; width: 198px; height: 236px; cursor: pointer; transition: transform .14s cubic-bezier(.2,.9,.3,1.3), filter .2s; filter: brightness(.68) saturate(.75); }
.tile .t-in { position: absolute; inset: 0; overflow: hidden; border-radius: 6px;
  background: radial-gradient(120% 80% at 50% 18%, color-mix(in srgb, var(--tc) 55%, #10131c) 0%, #0b0d14 62%, #05060a 100%);
  border: 2px solid color-mix(in srgb, var(--tc) 70%, #000); box-shadow: 0 10px 26px rgba(0,0,0,.6); }
.tile .t-bar { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--tc) 0 62%, var(--ta) 62% 100%); z-index: 3; }
/* tiles are pre-framed head-and-shoulders portraits (14% headroom), shown whole and pinned to the top */
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transform-origin: 50% 0; transition: transform .3s; }
.tile .t-name { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; padding: 6px 10px 0; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.92) 30%); z-index: 2; }
.tile .t-n { font-family: 'CCC Anton', Impact, sans-serif; font-size: 22px; letter-spacing: 1.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .t-s { font-size: 11px; font-weight: 600; letter-spacing: 2px; color: var(--tl); white-space: nowrap; overflow: hidden; }
.tile .t-badge { position: absolute; right: 8px; top: 14px; z-index: 3; font-size: 11px; font-weight: 700; letter-spacing: 2px; padding: 3px 7px; border-radius: 3px; }
.t-badge.draft { color: #111; background: #ffd23c; } .t-badge.soon { color: #ddd; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.5); }
.t-looks { position: absolute; left: 8px; top: 14px; z-index: 3; display: flex; gap: 4px; }
.t-looks i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); }
.t-looks i.on { background: #fff; }
.tile.slot .t-in { background: repeating-linear-gradient(135deg, #0c0e15 0 14px, #0f121a 14px 28px); border-style: dashed; }
.tile.slot .q { position: absolute; inset: 0 0 52px; display: flex; align-items: center; justify-content: center; font-family: 'CCC Anton', Impact; font-size: 120px; color: rgba(255,255,255,.12); }
.tile.on { filter: none; transform: scale(1.075); z-index: 5; }
.tile.on .t-in { border-color: #fff; box-shadow: 0 0 0 3px var(--tc), 0 0 34px color-mix(in srgb, var(--tc) 80%, transparent), 0 16px 40px rgba(0,0,0,.8); }
.tile.on img { transform: scale(1.04); }
.tile.on .t-in::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%); animation: sheen 2.4s ease-in-out infinite; z-index: 4; pointer-events: none; }
@keyframes sheen { 0% { transform: translateX(-60%); } 45%,100% { transform: translateX(60%); } }
.tile .p1 { display: none; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); z-index: 6; font-family: 'CCC Anton', Impact; font-size: 20px; letter-spacing: 2px; padding: 1px 12px; background: var(--tc); border: 2px solid #fff; border-radius: 3px; }
.tile.on .p1 { display: block; animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-4px); } }
.tile.locked .t-in { box-shadow: 0 0 0 4px var(--gold), 0 0 44px rgba(255,210,58,.8); }

/* ---------- detail panel ---------- */
#detail { position: absolute; left: 1196px; top: 112px; width: 672px; height: 940px; }
#panel { position: relative; width: 672px; height: 840px; border-radius: 10px; overflow: hidden; background: #05070d;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--main) 80%, #fff), 0 0 60px color-mix(in srgb, var(--main) 45%, transparent), 0 30px 80px rgba(0,0,0,.85);
  transition: box-shadow .3s; }
#panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; z-index: 20; background: linear-gradient(90deg, var(--main) 0 70%, var(--acc) 70% 100%); }
.view { position: absolute; inset: 0; }
#card-img, #card-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#card-vid { opacity: 0; transition: opacity .12s; } #card-vid.ready { opacity: 1; }
.view.enter { animation: viewIn .32s cubic-bezier(.2,.8,.2,1); }
@keyframes viewIn { from { opacity: 0; transform: scale(1.04); filter: brightness(2); } to { opacity: 1; transform: none; filter: none; } }

/* still view: an HTML card built like the cinematic ones (1080x1350 design at 672 wide => scale .622) */
#still-view { background: #05070d; }
.sv-bg { position: absolute; inset: 0; background: radial-gradient(70% 55% at 55% 30%, color-mix(in srgb, var(--main) 60%, #000) 0%, color-mix(in srgb, var(--deep) 70%, #000) 45%, #04060c 100%); }
.sv-bg::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(14px 14px at 12% 30%, rgba(255,255,255,.35), transparent), radial-gradient(22px 22px at 86% 22%, color-mix(in srgb, var(--lite) 60%, transparent), transparent),
  radial-gradient(18px 18px at 78% 46%, rgba(255,220,180,.3), transparent), radial-gradient(26px 26px at 20% 12%, color-mix(in srgb, var(--main) 70%, transparent), transparent),
  radial-gradient(12px 12px at 92% 58%, rgba(255,255,255,.3), transparent); filter: blur(3px); }
#sv-fig { position: absolute; left: 50%; top: 52px; height: 640px; transform: translateX(-50%); filter: drop-shadow(0 0 22px rgba(0,0,0,.9)) drop-shadow(-6px 0 18px color-mix(in srgb, var(--main) 50%, transparent)) contrast(1.06) saturate(1.05); }
.sv-grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,6,12,0) 0%, rgba(4,6,12,0) 40%, rgba(4,6,12,.9) 62%, rgba(4,6,12,.98) 100%); }
.sv-top { position: absolute; left: 20px; right: 20px; top: 20px; display: flex; justify-content: space-between; align-items: flex-start; }
.sv-logo { height: 52px; }
.pill { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--main) 85%, #000); border-bottom: 4px solid var(--acc); border-radius: 4px; padding: 6px 14px; font-weight: 700; font-size: 15px; letter-spacing: 2px; }
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.35); } }
.sv-name { position: absolute; left: 24px; right: 24px; top: 366px; }
.sv-name .word { font-family: 'CCC Anton', Impact; font-size: 28px; letter-spacing: 2px; color: var(--main); text-shadow: 0 2px 0 #000, 0 0 10px color-mix(in srgb, var(--main) 60%, transparent); filter: brightness(1.4); }
#sv-title { font-size: 72px; line-height: 1; white-space: nowrap; }
.sv-name .sub { font-family: 'CCC Anton', Impact; font-size: 26px; letter-spacing: 3px; color: #e8ebf2; margin-top: 2px; }
.sv-name .sub:empty { display: none; }
.sv-name .look { font-weight: 600; font-size: 17px; letter-spacing: 3px; color: var(--lite); margin-top: 8px; }
.sv-name .bio { font-family: Georgia, 'DejaVu Serif', serif; font-style: italic; font-size: 15px; color: #e6e9f4; margin-top: 2px; }
.poll { position: absolute; left: 24px; right: 24px; top: 554px; height: 176px; border-radius: 7px; background: rgba(8,12,26,.82); border: 1px solid rgba(255,255,255,.13); overflow: hidden; }
.poll-head { height: 30px; background: var(--main); border-bottom: 3px solid var(--acc); display: flex; justify-content: space-between; align-items: center; padding: 0 14px; font-weight: 700; font-size: 16px; letter-spacing: 3px; }
.poll-r { font-size: 11px; font-weight: 600; letter-spacing: 2px; opacity: .9; }
#sv-rows { padding: 8px 0 0; }
.row { display: flex; align-items: center; height: 33px; padding: 0 14px; }
.row.lead { background: linear-gradient(90deg, color-mix(in srgb, var(--main) 40%, transparent), transparent 70%); }
.row .k { width: 92px; font-weight: 600; letter-spacing: 2px; font-size: 16px; }
.segs { display: flex; gap: 3px; }
.seg { width: 25px; height: 18px; border-radius: 2px; background: rgba(255,255,255,.07); }
.seg.f { background: linear-gradient(180deg, color-mix(in srgb, var(--main) 60%, #fff) 0%, var(--main) 50%, var(--deep) 100%); box-shadow: 0 0 6px color-mix(in srgb, var(--main) 60%, transparent); animation: segIn .09s ease-out both; }
@keyframes segIn { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.row .v { width: 34px; text-align: right; font-weight: 700; font-size: 18px; }
.badge { margin-left: 14px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; padding: 3px 8px; border-radius: 3px; animation: pop .18s cubic-bezier(.3,1.6,.5,1) both; }
.badge.lead { background: #fff; color: #0b1020; border-left: 14px solid var(--main); } .badge.weak { border: 1.5px solid rgba(255,255,255,.5); color: rgba(255,255,255,.8); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.sv-special { position: absolute; left: 24px; right: 24px; top: 742px; }
.sp-k { font-weight: 700; letter-spacing: 4px; font-size: 14px; color: var(--gold); display: flex; align-items: center; gap: 6px; }
.bolt { width: 10px; height: 16px; background: var(--gold); clip-path: polygon(60% 0, 0 58%, 45% 58%, 30% 100%, 100% 38%, 55% 38%); }
.sp-grab { position: absolute; right: 0; top: 0; font-weight: 700; letter-spacing: 2px; font-size: 14px; color: var(--lite); }
.sp-name { font-family: 'CCC Anton', Impact; font-size: 40px; letter-spacing: 1px; transform: skewX(-8deg); transform-origin: left;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd23a 45%, #b87a10 60%, #ffe58a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #160c00) drop-shadow(0 0 10px rgba(255,190,60,.45)); }
.sp-bottom { position: absolute; right: 0; bottom: 4px; font-size: 34px; }
.sv-foot { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.45); }
.alt-tag { position: absolute; left: 24px; top: 86px; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.35); padding: 3px 8px; border-radius: 3px; background: rgba(0,0,0,.4); }

#slot-view { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: repeating-linear-gradient(135deg, #0a0c12 0 22px, #0d1018 22px 44px); }
.slot-q { font-family: 'CCC Anton', Impact; font-size: 300px; line-height: 1; color: rgba(255,255,255,.08); }
#slot-name { font-size: 64px; }
.slot-note { letter-spacing: 4px; font-weight: 600; color: rgba(255,255,255,.6); }

#draft-ribbon { position: absolute; left: -60px; top: 140px; z-index: 25; width: 360px; text-align: center; transform: rotate(-35deg); background: #ffd23c; color: #111; font-weight: 700; letter-spacing: 2px; font-size: 14px; padding: 6px 0; box-shadow: 0 4px 16px rgba(0,0,0,.6); }
#lock-banner { position: absolute; left: 0; right: 0; top: 300px; z-index: 30; text-align: center; padding: 18px 0 16px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.88) 18%, rgba(0,0,0,.88) 82%, transparent);
  border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); opacity: 0; transform: scaleY(0); transition: transform .18s, opacity .18s; }
body.locked #lock-banner { opacity: 1; transform: none; }
.lb-k { font-family: 'CCC Anton', Impact; font-size: 72px; letter-spacing: 6px; line-height: 1; background: linear-gradient(180deg, #fff6c8, #ffd23a 45%, #b87a10 60%, #ffe58a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-name { font-family: 'CCC Anton', Impact; font-size: 30px; letter-spacing: 3px; } .lb-hint { font-size: 13px; letter-spacing: 3px; color: rgba(255,255,255,.6); margin-top: 4px; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 40; }
#flash.go { animation: flash .35s ease-out; } @keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* ---------- outfit toggle ---------- */
#outfit { position: absolute; left: 0; right: 0; top: 856px; height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px;
  background: linear-gradient(180deg, rgba(14,17,28,.92), rgba(6,8,14,.92)); border: 1px solid rgba(255,255,255,.14); border-left: 5px solid var(--main); border-radius: 8px; transition: opacity .2s; }
#outfit.single { opacity: .45; }
.of-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.of-k { font-weight: 700; letter-spacing: 3px; font-size: 13px; color: rgba(255,255,255,.6); }
#of-pips { display: flex; gap: 6px; }
.pip { white-space: nowrap; font-family: 'CCC Anton', Impact; font-size: 17px; letter-spacing: 1px; padding: 4px 10px; border-radius: 4px; border: 2px solid rgba(255,255,255,.25); color: rgba(255,255,255,.55); cursor: pointer; transition: all .12s; }
.pip.on { background: var(--main); border-color: #fff; color: #fff; box-shadow: 0 0 14px color-mix(in srgb, var(--main) 70%, transparent); }
#of-name { font-weight: 600; letter-spacing: 1.5px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
body.pad #of-keys, body.pad .of-k { display: none; }
.of-right { display: flex; align-items: center; gap: 12px; }
#of-keys { display: flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: 2px; color: rgba(255,255,255,.6); }
.kbd { display: inline-block; min-width: 26px; padding: 2px 6px; text-align: center; font-weight: 700; font-size: 13px; border: 1.5px solid rgba(255,255,255,.55); border-bottom-width: 3px; border-radius: 4px; color: #fff; font-style: normal; }
#rb-wrap { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.35); animation: rbIn .25s ease-out, rbGlow 1.6s ease-in-out infinite .25s; }
@keyframes rbIn { from { opacity: 0; transform: translateX(14px); } }
@keyframes rbGlow { 50% { box-shadow: 0 0 16px rgba(255,255,255,.35); } }
.rb-glyph { font-weight: 700; font-size: 13px; letter-spacing: 1px; color: #0b0d14; background: linear-gradient(180deg, #fff, #b9bfcc); padding: 3px 9px; border-radius: 10px 14px 5px 5px; }
#rb-prompt { font-weight: 600; font-size: 16px; letter-spacing: 1px; white-space: nowrap; }
#outfit.bump .pip.on { animation: pop .2s cubic-bezier(.3,1.6,.5,1); }

/* ---------- footer ---------- */
#hints { position: absolute; left: 56px; right: 56px; bottom: 22px; display: flex; gap: 30px; align-items: center; font-size: 15px; font-weight: 600; letter-spacing: 2px; color: rgba(255,255,255,.72); }
#hints .kbd { margin-right: 2px; }
.pad { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; font-style: normal; }
.pad.a { background: #2f9e44; } .pad.b { background: #c92a2a; } .pad.rb { width: auto; padding: 0 8px; border-radius: 10px 12px 5px 5px; background: #d9dde6; color: #0b0d14; }
#hints .credit { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.45); }
#toast { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); padding: 10px 26px; background: rgba(0,0,0,.85); border: 1px solid rgba(255,255,255,.3); border-radius: 6px; font-weight: 600; letter-spacing: 3px; opacity: 0; transition: opacity .2s; z-index: 50; }
#toast.on { opacity: 1; }
.shake { animation: shake .3s; } @keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }