/* Cobb County Crashout - VS splash, fight canvas and HUD (Nov 15 2026). Same type system as the cards: Anton (display) + Oswald.
 * School themes come in as --main / --lite / --deep / --acc on each HUD side; data-school picks the bar treatment. */

/* ---------- select screen: P2 pass ---------- */
body.p2 .tile .p1 { background: #2C6EEC; }
body.p2 .h-kicker { color: #A0C8FF; }
.tile.p1pick::before { content: 'P1'; position: absolute; right: -8px; bottom: 58px; z-index: 7; font-family: 'CCC Anton', Impact; font-size: 16px; letter-spacing: 2px;
  padding: 0 8px; color: #111; background: var(--gold); border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.tile.p1pick .t-in { box-shadow: 0 0 0 3px var(--gold), 0 10px 26px rgba(0,0,0,.6); }

/* ---------- game layer ---------- */
#game { position: absolute; inset: 0; z-index: 100; background: #000; }
#stage-canvas { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 260px; background: linear-gradient(180deg, rgba(3,4,8,.72), rgba(3,4,8,.0)); }

.hud-side { position: absolute; top: 34px; width: 840px; height: 200px; display: flex; gap: 16px; }
.hud-side.left { left: 34px; flex-direction: row; }
.hud-side.right { right: 34px; flex-direction: row-reverse; }
.hp-port { position: relative; flex: none; width: 118px; height: 140px; border-radius: 6px; overflow: hidden; background: radial-gradient(120% 80% at 50% 18%, color-mix(in srgb, var(--main) 60%, #10131c), #07080c 70%);
  border: 2px solid var(--acc); box-shadow: 0 0 0 2px var(--main), 0 0 24px color-mix(in srgb, var(--main) 60%, transparent), 0 10px 24px rgba(0,0,0,.7); }
.hp-port::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--main) 0 62%, var(--acc) 62%); }
.hp-port img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hp-col { flex: 1; display: flex; flex-direction: column; padding-top: 10px; }
.right .hp-col { align-items: flex-end; }

/* health: anchored at the OUTER edge, so damage eats it from the centre outward; red trail lags behind */
.hp-bar { position: relative; width: 100%; height: 44px; background: linear-gradient(180deg, #0b0c12, #15171f); border: 2px solid var(--acc);
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--main), 0 6px 18px rgba(0,0,0,.7), inset 0 3px 8px rgba(0,0,0,.9); overflow: hidden; }
.left .hp-bar { transform: skewX(-18deg); transform-origin: 0 100%; border-radius: 3px 0 0 3px; }
.right .hp-bar { transform: skewX(18deg); transform-origin: 100% 100%; border-radius: 0 3px 3px 0; }
.hp-fill, .hp-trail { position: absolute; top: 0; bottom: 0; width: 100%; }
.left .hp-fill, .left .hp-trail { left: 0; } .right .hp-fill, .right .hp-trail { right: 0; }
.hp-trail { background: linear-gradient(180deg, #ff6a4a, #d4180c 50%, #7d0904); }
.hp-fill { transition: width .06s linear; }
.hp-fill::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 9px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
.hp-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0,0,0,.38) calc(10% - 2px) 10%); }
[data-school="osborne"] .hp-fill { background: linear-gradient(180deg, #ff8a96 0%, #e3324c 30%, #C41E3A 58%, #6E0816 100%); }
[data-school="osborne"] .hp-fill { box-shadow: inset 0 -4px 0 rgba(255,255,255,.85); }
[data-school="south-cobb"] .hp-fill { background: linear-gradient(180deg, #8ab8ff 0%, #3f82ff 30%, #2C6EEC 58%, #06205A 100%); box-shadow: inset 0 -5px 0 #E87722; }
[data-school="none"] .hp-fill { background: linear-gradient(180deg, #e9ebf0 0%, #a9aeb9 30%, #7b808b 58%, #2b2e36 100%); box-shadow: inset 0 -5px 0 #C9A44C; }
.hud-side.danger .hp-fill { animation: danger .5s ease-in-out infinite alternate; }
@keyframes danger { to { filter: brightness(1.55) saturate(1.3); } }

.hp-meta { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; margin-top: 12px; padding: 0 6px; }
.right .hp-meta { flex-direction: row-reverse; }
.hn-main { font-family: 'CCC Anton', Impact, sans-serif; font-size: 40px; line-height: 1; letter-spacing: 2.5px;
  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 12px color-mix(in srgb, var(--main) 65%, transparent)); white-space: nowrap; }
.hn-sub { font-weight: 600; font-size: 15px; letter-spacing: 4px; color: var(--lite); margin-top: 2px; }
.right .hn { text-align: right; }
.pips { display: flex; gap: 8px; margin-top: 6px; }
.pips i { width: 22px; height: 22px; transform: rotate(45deg); border: 2px solid rgba(255,255,255,.55); background: rgba(0,0,0,.55); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.pips i.on { background: radial-gradient(circle at 35% 35%, #fff6c8, #FFD23A 45%, #a77b10); border-color: #fff; box-shadow: 0 0 14px rgba(255,210,58,.9); }
.hp-school { margin-top: 6px; padding: 0 6px; font-weight: 700; font-size: 13px; letter-spacing: 4px; color: var(--acc); opacity: .9; }
[data-school="osborne"] .hp-school { color: #FFB2B2; }

/* super meter: under the bar, thin, glows at max */
.sp { position: absolute; top: 166px; width: 470px; display: flex; align-items: center; gap: 10px; }
.left .sp { left: 134px; } .right .sp { right: 134px; flex-direction: row-reverse; }
.sp-k { font-family: 'CCC Anton', Impact; font-size: 17px; letter-spacing: 3px; color: var(--acc); }
.sp-bar { position: relative; flex: 1; height: 14px; background: #07080c; border: 1.5px solid rgba(255,255,255,.55); box-shadow: 0 0 0 2px #000; overflow: hidden; }
.sp-fill { position: absolute; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--deep), var(--main) 55%, var(--acc)); }
.right .sp-fill { right: 0; background: linear-gradient(270deg, var(--deep), var(--main) 55%, var(--acc)); }
.sp-name { font-weight: 600; font-size: 12px; letter-spacing: 2px; color: rgba(255,255,255,.6); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.sp.full .sp-bar { border-color: #fff; box-shadow: 0 0 0 2px #000, 0 0 16px var(--acc); animation: spmax .6s ease-in-out infinite alternate; }
.sp.full .sp-k::after { content: ' MAX'; color: #FFD23A; }
.sp.full .sp-name { color: #fff; }
@keyframes spmax { to { filter: brightness(1.5); } }

/* timer */
#hud-center { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); text-align: center; }
#timer { width: 150px; height: 118px; display: flex; align-items: center; justify-content: center; clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%);
  background: linear-gradient(180deg, #1a1c24, #07080c); box-shadow: inset 0 0 0 3px #C9A44C; position: relative; }
#timer::before { content: ''; position: absolute; inset: 3px; clip-path: inherit; background: linear-gradient(180deg, #14161d, #050609); }
#timer-n { position: relative; font-family: 'CCC Anton', Impact; font-size: 84px; line-height: 1; letter-spacing: 2px;
  background: linear-gradient(180deg, #fff 0%, #f5e6b8 45%, #b08a2c 52%, #f2dc9a 75%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #000); }
#timer.low #timer-n { background: linear-gradient(180deg, #fff, #ff9a9a 45%, #c21f1f 52%, #ffb0b0); -webkit-background-clip: text; background-clip: text; animation: tlow .5s steps(2) infinite; }
@keyframes tlow { 50% { opacity: .55; } }
#round-n { margin-top: 6px; font-weight: 700; font-size: 15px; letter-spacing: 5px; color: rgba(255,255,255,.75); }

/* combo counter */
.combo { position: absolute; top: 330px; display: flex; align-items: center; gap: 10px; opacity: 0; transform: scale(.8); transition: opacity .12s, transform .12s; }
.combo.left { left: 70px; } .combo.right { right: 70px; flex-direction: row-reverse; text-align: right; }
.combo.on { opacity: 1; transform: none; }
.cb-n { font-family: 'CCC Anton', Impact; font-size: 120px; line-height: .9; background: linear-gradient(180deg, #fff, #f5e6b8 45%, #b08a2c 52%, #f2dc9a 80%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 16px rgba(255,190,60,.55)); }
.cb-k { font-family: 'CCC Anton', Impact; font-size: 34px; line-height: 1; letter-spacing: 3px; color: #fff; text-shadow: 0 2px 0 #000; }
.cb-k em { font-style: normal; font-family: 'CCC Oswald'; font-weight: 700; font-size: 16px; letter-spacing: 5px; color: #FFD23A; }

/* special call-out */
#super-call { position: absolute; top: 236px; left: 0; right: 0; height: 84px; display: flex; flex-direction: column; justify-content: center; opacity: 0; padding: 0 140px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--main, #C41E3A) 70%, #000) 20%, color-mix(in srgb, var(--main, #C41E3A) 70%, #000) 80%, transparent); }
#super-call.on { opacity: 1; animation: scIn .25s ease-out; }
#super-call.right { text-align: right; }
.sc-k { font-weight: 700; font-size: 13px; letter-spacing: 8px; color: rgba(255,255,255,.8); }
.sc-n { font-family: 'CCC Anton', Impact; font-size: 52px; letter-spacing: 4px; line-height: 1; color: #fff; text-shadow: 0 3px 0 #000; }
@keyframes scIn { from { transform: scaleY(0); } }

/* banners */
#banner { position: absolute; left: 0; right: 0; top: 360px; text-align: center; opacity: 0; }
#banner.on { opacity: 1; animation: bnIn .35s cubic-bezier(.2,1.4,.4,1); }
#bn-main { font-family: 'CCC Anton', Impact; font-size: 190px; line-height: 1; letter-spacing: 10px;
  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 5px 0 rgba(0,0,0,.95)) drop-shadow(0 0 30px rgba(0,0,0,.8)); }
#bn-sub { font-weight: 700; font-size: 30px; letter-spacing: 10px; color: #FFD23A; text-shadow: 0 2px 0 #000; margin-top: 8px; }
#banner.fight #bn-main { font-size: 230px; background: linear-gradient(180deg, #fff 0%, #f5e6b8 45%, #b08a2c 52%, #f2dc9a 75%, #fff 100%); -webkit-background-clip: text; background-clip: text; }
#banner.ko #bn-main { font-size: 260px; background: linear-gradient(180deg, #fff 0%, #ffb0b0 40%, #b0141e 52%, #ff6a6a 78%, #fff 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 6px 0 #000) drop-shadow(0 0 40px rgba(220,30,30,.6)); }
#banner.winner #bn-main { background: linear-gradient(180deg, #fff 0%, #f5e6b8 45%, #b08a2c 52%, #f2dc9a 75%, #fff 100%); -webkit-background-clip: text; background-clip: text; }
#banner.winner #bn-sub { font-family: 'CCC Anton', Impact; font-size: 54px; letter-spacing: 5px; color: #fff; }
#banner.roundwin #bn-main { font-size: 110px; }
@keyframes bnIn { from { transform: scale(1.6); opacity: 0; } }

#ph-tag { position: absolute; right: 30px; bottom: 54px; font-weight: 700; font-size: 12px; letter-spacing: 3px; color: rgba(255,255,255,.55); padding: 4px 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.45); }
#fight-keys { position: absolute; left: 30px; right: 30px; bottom: 18px; font-weight: 600; font-size: 13px; letter-spacing: 1.5px; color: rgba(255,255,255,.6); text-shadow: 0 1px 2px #000; }
#fight-keys b { color: #FFD23A; }
#post, #pause { position: absolute; left: 0; right: 0; opacity: 0; text-align: center; }
#post { top: 690px; } #post.on { opacity: 1; }
.po-t, .pa-s { display: inline-block; padding: 12px 28px; background: rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.35); border-radius: 6px; font-weight: 700; font-size: 22px; letter-spacing: 3px; }
#pause { inset: 0; background: rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
#pause.on { opacity: 1; }
.pa-t { font-family: 'CCC Anton', Impact; font-size: 140px; letter-spacing: 12px; }
.pa-s { font-size: 18px; }

/* ---------- VS splash ---------- */
#vs { position: absolute; inset: 0; z-index: 5; background: #030408; display: none; overflow: hidden; }
#vs.on { display: block; } #vs.out { animation: vsOut .45s ease-in forwards; }
@keyframes vsOut { to { opacity: 0; transform: scale(1.08); } }
.vs-side { position: absolute; top: 0; bottom: 0; width: 1100px; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 40%, color-mix(in srgb, var(--main) 55%, #05060a), #05060a 75%); }
.vs-side.left { left: 0; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); animation: vsL .5s cubic-bezier(.2,.9,.3,1); }
.vs-side.right { right: 0; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); animation: vsR .5s cubic-bezier(.2,.9,.3,1); }
@keyframes vsL { from { transform: translateX(-100%); } } @keyframes vsR { from { transform: translateX(100%); } }
.vs-art { position: absolute; top: 0; height: 1080px; }
.vs-art.card { width: 864px; object-fit: cover; }
.left .vs-art.card { left: 70px; } .right .vs-art.card { right: 70px; }
.vs-art.still { height: 980px; top: 60px; filter: drop-shadow(0 0 40px rgba(0,0,0,.8)); }
.left .vs-art.still { left: 250px; } .right .vs-art.still { right: 250px; transform: scaleX(-1); }
.vs-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,4,8,.96) 0%, rgba(3,4,8,.55) 30%, transparent 55%); }
.vs-side::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, var(--main) 0 65%, var(--acc) 65%); }
.vs-txt { position: absolute; bottom: 150px; }
.left .vs-txt { left: 70px; } .right .vs-txt { right: 70px; text-align: right; }
.vs-ctrl { font-weight: 700; font-size: 18px; letter-spacing: 6px; color: #FFD23A; }
.vs-name { font-size: 110px; line-height: 1; margin-top: 4px; }
.vs-name.chrome { filter: drop-shadow(0 3px 0 rgba(10,12,20,.95)) drop-shadow(0 0 22px var(--main)); }
.vs-sub { font-weight: 600; font-size: 26px; letter-spacing: 7px; color: var(--lite); }
.vs-school { display: inline-block; margin-top: 12px; padding: 5px 14px; font-weight: 700; font-size: 17px; letter-spacing: 5px; color: #fff; background: var(--main); border-left: 6px solid var(--acc); }
.vs-look { margin-top: 8px; font-weight: 600; font-size: 16px; letter-spacing: 4px; color: rgba(255,255,255,.65); }
#vs-mark { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); font-family: 'CCC Anton', Impact; font-size: 260px; letter-spacing: 6px; line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #f5e6b8 45%, #b08a2c 52%, #f2dc9a 75%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #000) drop-shadow(0 0 40px rgba(255,200,80,.45)); animation: vsPop .5s .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes vsPop { from { transform: translate(-50%,-50%) scale(3); opacity: 0; } }
#vs-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; display: flex; align-items: center; justify-content: center; gap: 26px; background: linear-gradient(0deg, #000, rgba(0,0,0,.6)); border-top: 1px solid rgba(201,164,76,.6); }
#vs-foot img { height: 74px; }
#vs-stage { font-family: 'CCC Anton', Impact; font-size: 44px; letter-spacing: 6px; line-height: 1; }
#vs-stage-sub { font-weight: 600; font-size: 15px; letter-spacing: 5px; color: #C9A44C; }
.vs-skip { position: absolute; right: 40px; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgba(255,255,255,.55); }

/* VS with cinematic cards: show each card whole (it already has name / school / stats), no diagonal crop */
.vs-side.has-card { width: 960px; clip-path: none; }
.vs-side.has-card .vs-art.card { width: 864px; left: 48px; right: auto; }
.vs-side.has-card .vs-shade { background: linear-gradient(0deg, rgba(3,4,8,.9) 0%, transparent 16%); }
.vs-side.has-card .vs-name, .vs-side.has-card .vs-sub, .vs-side.has-card .vs-school, .vs-side.has-card .vs-look { display: none; }
.vs-side.has-card .vs-txt { bottom: 124px; }
.vs-side.has-card .vs-ctrl { display: inline-block; padding: 6px 14px; background: rgba(0,0,0,.82); border: 1px solid rgba(255,210,58,.6); }
.vs-side.left.has-card .vs-txt { left: 90px; } .vs-side.right.has-card .vs-txt { right: 90px; }
.vs-side.has-card .vs-art.card { height: 990px; width: 792px; left: 84px; }
#vs-foot { height: 90px; }
#vs-foot img { height: 60px; }