/* NEON VERDICT — fighting game HUD & screens */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #06070d; }
body {
  font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
  color: #eaf2ff;
  -webkit-user-select: none; user-select: none;
}
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- overlays ---------- */
#vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(4,4,12,0.55) 100%);
}
.letterbox {
  position: absolute; left: 0; right: 0; height: 0; background: #04050a; z-index: 30;
  transition: height 0.28s cubic-bezier(.2,.9,.3,1); pointer-events: none;
}
#letterbox-top { top: 0; }
#letterbox-bottom { bottom: 0; }
.letterbox.on { height: 11vh; }
#speedlines {
  position: absolute; inset: -20%; z-index: 8; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,0.09) 0deg 1.2deg, transparent 1.2deg 7deg);
  transition: opacity 0.2s;
  animation: spin 14s linear infinite;
}
#speedlines.on { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
#flash {
  position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 40; pointer-events: none;
}

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
#topbar {
  position: absolute; top: 2.6vh; left: 2vw; right: 2vw;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5vw;
}
.side { flex: 1; }
.nameplate { display: flex; align-items: baseline; gap: 0.7em; margin-bottom: 0.45vh; }
.side.right .nameplate { justify-content: flex-end; }
.name {
  font-size: clamp(18px, 2.6vw, 34px); font-style: italic; letter-spacing: 0.06em;
  color: #fff; text-shadow: 0 0 14px rgba(41,216,255,0.8), 0 2px 0 #0a2540;
}
.side.right .name { text-shadow: 0 0 14px rgba(255,92,138,0.8), 0 2px 0 #3d0a1c; }
.subtitle { font-size: clamp(9px, 1vw, 13px); letter-spacing: 0.3em; color: #7d92b8; font-weight: 700; }

.healthbar {
  position: relative; height: clamp(16px, 2.4vh, 26px);
  background: #10141f; border: 2px solid #2c3650;
  transform: skewX(-16deg); overflow: hidden;
  box-shadow: 0 0 0 1px #05070d, 0 4px 18px rgba(0,0,0,0.6);
}
.side.right .healthbar { transform: skewX(16deg); }
.healthbar .fill, .healthbar .ghost { position: absolute; top: 0; bottom: 0; left: 0; }
.side.right .healthbar .fill, .side.right .healthbar .ghost { left: auto; right: 0; }
.healthbar .fill {
  background: linear-gradient(180deg, #7dffc9 0%, #2ef2a0 45%, #0fae74 100%);
  box-shadow: 0 0 12px rgba(46,242,160,0.5);
  transition: width 0.09s linear;
}
.healthbar .fill.low {
  background: linear-gradient(180deg, #ffd28d 0%, #ff9a3d 45%, #e05a1a 100%);
  box-shadow: 0 0 12px rgba(255,154,61,0.5);
}
.healthbar .fill.critical {
  background: linear-gradient(180deg, #ff9d9d 0%, #ff4040 45%, #c01010 100%);
  box-shadow: 0 0 14px rgba(255,64,64,0.6);
  animation: critpulse 0.5s steps(2) infinite;
}
@keyframes critpulse { 50% { filter: brightness(1.6); } }
.healthbar .ghost {
  background: rgba(255,255,255,0.55);
  transition: width 0.7s cubic-bezier(.3,.7,.2,1) 0.4s;
}
.guardbar {
  height: 5px; margin-top: 3px; background: #10141f; transform: skewX(-16deg); overflow: hidden;
  border: 1px solid #232d45;
}
.side.right .guardbar { transform: skewX(16deg); }
.guardbar .gfill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #29d8ff, #5c8dff);
  transition: width 0.12s linear;
}
.guardbar .gfill.low { background: linear-gradient(90deg, #ffd23e, #ff8c2e); }
.pips { display: flex; gap: 6px; margin-top: 5px; }
.side.right .pips { justify-content: flex-end; }
.pips i {
  width: clamp(12px, 1.6vw, 20px); height: clamp(12px, 1.6vw, 20px);
  background: #131826; border: 2px solid #2c3650; transform: rotate(45deg);
}
.pips i.won { background: #ffd23e; border-color: #fff3c4; box-shadow: 0 0 12px rgba(255,210,62,0.9); }

#timerwrap { text-align: center; min-width: 12vw; }
#timer {
  font-size: clamp(30px, 5vw, 64px); font-style: italic; line-height: 1;
  color: #fff; text-shadow: 0 0 22px rgba(41,216,255,0.65), 0 3px 0 #0a2540;
}
#timer.low { color: #ff5555; text-shadow: 0 0 22px rgba(255,64,64,0.8); animation: critpulse 0.5s steps(2) infinite; }
#roundlabel { font-size: clamp(9px, 1vw, 13px); letter-spacing: 0.35em; color: #7d92b8; margin-top: 4px; }

#superwrap {
  position: absolute; top: calc(2.6vh + clamp(70px, 11vh, 110px)); left: 2vw; right: 2vw;
  display: flex; justify-content: space-between; gap: 6vw;
}
.super {
  position: relative; flex: 1; height: clamp(10px, 1.6vh, 16px); background: #10141f;
  border: 2px solid #2c3650; overflow: hidden; transform: skewX(-16deg);
}
.super.right { transform: skewX(16deg); }
.super .sfill {
  position: absolute; inset: 0; right: auto; width: 0%;
  background: linear-gradient(90deg, #1b9ce0, #29d8ff);
  transition: width 0.15s ease;
}
.super.right .sfill { left: auto; right: 0; background: linear-gradient(270deg, #d84b78, #ff5c8a); }
.super.maxed { border-color: #ffd23e; box-shadow: 0 0 16px rgba(255,210,62,0.7); animation: maxpulse 0.7s ease-in-out infinite; }
.super.maxed .sfill { background: linear-gradient(90deg, #ffd23e, #fff6cf, #ffd23e); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
.super.right.maxed .sfill { background: linear-gradient(270deg, #ffd23e, #fff6cf, #ffd23e); background-size: 200% 100%; }
@keyframes maxpulse { 50% { box-shadow: 0 0 26px rgba(255,210,62,1); } }
@keyframes shimmer { to { background-position: -200% 0; } }
.slabel {
  position: absolute; right: 6px; top: 50%; transform: translateY(-52%);
  font-size: 9px; letter-spacing: 0.25em; color: rgba(255,255,255,0.75); font-style: italic;
}
.super.right .slabel { right: auto; left: 6px; }

.combo {
  position: absolute; top: 24vh; font-style: italic; pointer-events: none;
  display: flex; align-items: baseline; gap: 0.3em;
  text-shadow: 0 0 16px rgba(255,210,62,0.8), 0 3px 0 #4a3000;
}
.combo.left { left: 3vw; }
.combo.right { right: 3vw; }
.combo .count { font-size: clamp(34px, 4.6vw, 62px); color: #ffd23e; }
.combo .hits { font-size: clamp(14px, 1.8vw, 24px); color: #fff; letter-spacing: 0.12em; }
.combo.pop { animation: combopop 0.18s ease-out; }
@keyframes combopop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

#announce {
  position: absolute; top: 34%; left: 0; right: 0; text-align: center; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1vh;
}
#announce-text {
  font-size: clamp(48px, 11vw, 150px); font-style: italic; letter-spacing: 0.04em; line-height: 0.95;
  color: #fff; text-shadow: 0 0 30px rgba(41,216,255,0.9), 0 0 60px rgba(41,216,255,0.4), 0 6px 0 #0a2540;
}
#announce.show-big #announce-text { animation: slam 0.45s cubic-bezier(.2,1.6,.3,1); }
#announce.show-super #announce-text {
  font-size: clamp(38px, 8vw, 110px); color: #ffd23e;
  text-shadow: 0 0 30px rgba(255,210,62,1), 0 0 80px rgba(255,140,46,0.8), 0 6px 0 #4a3000;
  animation: slam 0.5s cubic-bezier(.2,1.6,.3,1), shudder 0.12s linear 0.5s 6;
}
#announce.show-mid #announce-text {
  font-size: clamp(30px, 5vw, 66px); color: #8ef7ff;
  text-shadow: 0 0 24px rgba(142,247,255,0.9), 0 4px 0 #0a3a4a;
  animation: slam 0.3s cubic-bezier(.2,1.6,.3,1);
}
#announce.show-sub #announce-text {
  font-size: clamp(36px, 7vw, 96px); color: #fff;
  animation: fadein 0.4s ease;
}
@keyframes slam { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fadein { from { opacity: 0; transform: translateY(14px); } }
@keyframes shudder { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
#announce-sub { font-size: clamp(12px, 1.6vw, 20px); letter-spacing: 0.3em; color: #9fb4dd; font-weight: 700; }

#hint-bar {
  position: absolute; bottom: 1.4vh; left: 50%; transform: translateX(-50%);
  font-family: Arial, sans-serif; font-weight: 700; font-size: clamp(10px, 1.05vw, 13px);
  color: rgba(190, 205, 235, 0.6); letter-spacing: 0.04em; white-space: nowrap;
}
#hint-bar b { color: rgba(41,216,255,0.85); margin: 0 0.35em 0 0.9em; font-weight: 800; }
#hint-bar b:first-child { margin-left: 0; }

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3.2vh; text-align: center;
  background: radial-gradient(ellipse at 50% 35%, rgba(8,10,24,0.25), rgba(4,5,12,0.88) 90%);
}
.screen.dim { background: rgba(3,4,10,0.82); backdrop-filter: blur(3px); }
.screen.hidden, .hidden { display: none !important; }

.logo {
  font-size: clamp(54px, 11vw, 160px); font-style: italic; line-height: 0.9; letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 0 24px rgba(41,216,255,0.9), 0 0 70px rgba(41,216,255,0.45), 0 8px 0 #0a2540;
  animation: logoflicker 6s linear infinite;
}
.logo span {
  display: block; color: #ff5c8a;
  text-shadow: 0 0 24px rgba(255,92,138,0.9), 0 0 70px rgba(255,92,138,0.4), 0 8px 0 #3d0a1c;
}
@keyframes logoflicker {
  0%, 93%, 97%, 100% { opacity: 1; }
  94% { opacity: 0.55; } 96% { opacity: 0.8; }
}
.tagline { letter-spacing: 0.5em; font-size: clamp(11px, 1.4vw, 17px); color: #8ba3cf; font-weight: 800; }
.footnote { font-family: Arial, sans-serif; font-size: 12px; color: #5c6c92; letter-spacing: 0.08em; }

.menu { display: flex; flex-direction: column; gap: 1.4vh; min-width: min(420px, 84vw); }
.menuitem {
  pointer-events: auto; cursor: pointer;
  font-family: inherit; font-weight: 900; font-style: italic; letter-spacing: 0.14em;
  font-size: clamp(15px, 1.7vw, 22px); color: #cfe0ff;
  background: linear-gradient(180deg, rgba(20,26,44,0.9), rgba(10,13,24,0.9));
  border: 2px solid #2c3650; padding: 1.5vh 2.4em;
  transform: skewX(-10deg); transition: all 0.12s;
  text-transform: uppercase;
}
.menuitem:hover, .menuitem.focused {
  border-color: #29d8ff; color: #fff;
  background: linear-gradient(180deg, rgba(24,52,74,0.95), rgba(10,24,40,0.95));
  box-shadow: 0 0 22px rgba(41,216,255,0.35), inset 0 0 14px rgba(41,216,255,0.12);
  transform: skewX(-10deg) translateX(0.5vw) scale(1.03);
}
.menuitem.primary { border-color: #ffd23e; }
.menuitem.primary:hover, .menuitem.primary.focused { box-shadow: 0 0 26px rgba(255,210,62,0.45); }

.scr-title {
  font-size: clamp(28px, 4.4vw, 56px); font-style: italic; letter-spacing: 0.06em;
  text-shadow: 0 0 20px rgba(41,216,255,0.7), 0 4px 0 #0a2540;
}

/* character select */
#select-cards { display: flex; gap: 3vw; justify-content: center; flex-wrap: wrap; }
.charcard {
  width: min(340px, 40vw); padding: 2.4vh 1.6vw; cursor: pointer;
  background: linear-gradient(180deg, rgba(16,20,36,0.94), rgba(8,10,20,0.94));
  border: 3px solid #2c3650; transition: all 0.14s; text-align: left;
}
.charcard .cc-name { font-size: clamp(26px, 3.2vw, 42px); font-style: italic; }
.charcard .cc-title { font-size: 11px; letter-spacing: 0.3em; color: #7d92b8; margin: 4px 0 10px; }
.charcard .cc-style { font-family: Arial, sans-serif; font-size: 12.5px; color: #a8b8d8; line-height: 1.5; min-height: 3.4em; }
.charcard .cc-stats { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 10px; letter-spacing: 0.2em; color: #8ba3cf; }
.charcard .cc-stats .track { height: 8px; background: #131826; align-self: center; }
.charcard .cc-stats .track i { display: block; height: 100%; background: linear-gradient(90deg, #29d8ff, #ffd23e); }
.charcard .cc-swatches { display: flex; gap: 6px; margin-top: 12px; }
.charcard .cc-swatches i { width: 18px; height: 18px; border: 1px solid rgba(255,255,255,0.25); }
.charcard.selected {
  border-color: #ffd23e; box-shadow: 0 0 34px rgba(255,210,62,0.4);
  transform: translateY(-0.8vh) scale(1.04);
}
.charcard.selected .cc-name { color: #ffd23e; text-shadow: 0 0 18px rgba(255,210,62,0.7); }
.select-help { letter-spacing: 0.3em; color: #7d92b8; font-size: 12px; font-weight: 800; }

/* how to play / move list */
.howto-cols {
  display: flex; gap: 2.4vw; justify-content: center; flex-wrap: wrap;
  font-family: Arial, sans-serif; font-size: 13px; color: #b8c8e8; line-height: 1.8;
  max-width: 900px;
}
.howto-cols b { color: #29d8ff; font-weight: 800; }
#moves-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px 2vw; max-width: 1000px; width: 92vw; text-align: left;
  max-height: 44vh; overflow-y: auto; padding: 0 8px; pointer-events: auto;
}
.moverow {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  background: rgba(14,18,32,0.8); border: 1px solid #232d45; padding: 8px 14px;
}
.moverow .mv-input { font-weight: 900; color: #ffd23e; white-space: nowrap; font-style: italic; }
.moverow .mv-name { font-family: Arial, sans-serif; font-size: 13px; color: #cfdcf5; }
.moverow .mv-data { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #6f82ab; white-space: nowrap; }
.movelist-title { grid-column: 1 / -1; margin-top: 8px; letter-spacing: 0.3em; color: #7d92b8; font-size: 13px; }

/* result */
#result-title {
  font-size: clamp(54px, 10vw, 140px); font-style: italic; letter-spacing: 0.03em;
  animation: slam 0.5s cubic-bezier(.2,1.6,.3,1);
}
#result-title.win { color: #ffd23e; text-shadow: 0 0 30px rgba(255,210,62,0.9), 0 8px 0 #4a3000; }
#result-title.lose { color: #ff5577; text-shadow: 0 0 30px rgba(255,85,119,0.9), 0 8px 0 #3d0a1c; }
#result-sub { letter-spacing: 0.24em; color: #9fb4dd; font-size: clamp(13px, 1.6vw, 20px); font-weight: 800; }

#webgl-fail p { font-family: Arial, sans-serif; color: #b8c8e8; }