* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #060914; color: #fff; font-family: Inter, Arial, Helvetica, sans-serif; }
#app { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: radial-gradient(circle at 50% 30%, #203e76 0%, #07101f 68%, #03050b 100%); }
#gameCanvas { display: block; width: 100vw; height: 100vh; }
.hidden { display: none !important; }
.hud-panel { background: rgba(6, 11, 24, .68); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 14px 40px rgba(0,0,0,.28); backdrop-filter: blur(10px); border-radius: 18px; }
#topHud { position: absolute; z-index: 10; top: 14px; left: 14px; right: 14px; display: grid; grid-template-columns: minmax(190px, 260px) 1fr minmax(180px, 250px); gap: 12px; pointer-events: none; }
.hud-block { padding: 12px 14px; min-width: 0; }
.hud-title { font-weight: 900; font-size: clamp(14px, 1.45vw, 22px); margin-bottom: 8px; color: #ffdd70; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.stat-row, .bar-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: clamp(12px, 1.05vw, 16px); line-height: 1.6; }
.stat-row strong, .bar-label strong { color: #fff; }
.bar { width: 100%; height: 18px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); }
.bar-fill { width: 100%; height: 100%; border-radius: inherit; transition: width .18s ease; }
.hero-hp .bar-fill { background: linear-gradient(90deg, #34e676, #ffe05b, #ff5966); }
.xp-bar { height: 10px; margin-top: 3px; }
.xp-bar .bar-fill { background: linear-gradient(90deg, #5fd7ff, #8467ff); }
.small { margin-top: 7px; opacity: .84; }
.boss-hud { position: absolute; z-index: 12; top: 116px; left: 50%; transform: translateX(-50%); width: min(720px, 72vw); text-align: center; padding: 10px 14px; border-radius: 18px; background: rgba(43, 3, 7, .78); border: 1px solid rgba(255, 100, 100, .42); box-shadow: 0 0 36px rgba(255, 25, 25, .2); backdrop-filter: blur(10px); }
.boss-title { font-weight: 1000; letter-spacing: 2px; color: #ffb4b4; text-shadow: 0 2px 12px rgba(255,0,0,.45); margin-bottom: 6px; }
.boss-bar { height: 22px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff253a, #ff8b3d); transition: width .15s ease; }
.boss-hp-text { font-size: 12px; opacity: .9; margin-top: 4px; }
.queue-panel { position: absolute; z-index: 10; top: 50%; left: 14px; transform: translateY(-50%); width: min(250px, 24vw); padding: 12px; pointer-events: none; }
.queue-title { font-weight: 900; color: #ffdd70; margin-bottom: 8px; font-size: clamp(12px, 1vw, 15px); }
.queue-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 84px; align-content: flex-start; }
.queue-token { min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 0 10px rgba(255,255,255,.05); }
.queue-token.shield { background: rgba(95, 215, 255, .2); }
.queue-token.attack { background: rgba(255, 224, 91, .22); }
.queue-token.ultimate { background: rgba(255, 80, 80, .24); }
.log-panel { position: absolute; z-index: 10; top: 50%; right: 14px; transform: translateY(-50%); width: min(310px, 26vw); padding: 12px; pointer-events: none; }
.log-list { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow: hidden; font-size: clamp(11px, .95vw, 14px); color: rgba(255,255,255,.86); }
.log-item { padding: 6px 8px; border-radius: 9px; background: rgba(255,255,255,.07); }
.action-overlay { position: absolute; z-index: 15; left: 50%; bottom: 14px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; width: min(820px, calc(100vw - 28px)); pointer-events: none; }
.action-card { min-height: 68px; border-radius: 18px; border: 1px solid rgba(255,255,255,.18); background: rgba(7, 12, 25, .76); box-shadow: 0 12px 36px rgba(0,0,0,.36); backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; transition: transform .12s ease, background .12s ease; }
.action-card.pulse { transform: translateY(-7px) scale(1.03); background: rgba(255, 221, 112, .94); color: #16120a; }
.action-main { font-weight: 1000; font-size: clamp(12px, 1.35vw, 19px); }
.action-sub { margin-top: 4px; font-weight: 800; opacity: .8; font-size: clamp(10px, .95vw, 14px); }
.streamer-keys { position: absolute; z-index: 16; right: 10px; bottom: 5px; opacity: .22; font-size: 10px; letter-spacing: .2px; pointer-events: none; }
.screen { position: absolute; z-index: 50; inset: 0; display: grid; place-items: center; background: rgba(2, 4, 10, .65); backdrop-filter: blur(5px); }
.modal-card, .vote-card { width: min(780px, calc(100vw - 32px)); border-radius: 28px; border: 1px solid rgba(255,255,255,.18); background: rgba(9, 15, 31, .92); box-shadow: 0 30px 90px rgba(0,0,0,.55); text-align: center; padding: clamp(22px, 4vw, 42px); }
.modal-card h1 { margin: 0 0 14px; font-size: clamp(32px, 5vw, 58px); color: #ffdd70; }
.modal-card p { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.5; color: rgba(255,255,255,.88); }
.modal-card.danger h1 { color: #ff5966; }
button { border: none; border-radius: 999px; padding: 14px 26px; background: linear-gradient(90deg, #ffdd70, #ff9d42); color: #17110a; font-weight: 1000; font-size: 17px; cursor: pointer; box-shadow: 0 14px 30px rgba(255, 169, 65, .22); }
.vote-card { width: min(1040px, calc(100vw - 26px)); }
.vote-header { font-size: clamp(28px, 5vw, 60px); font-weight: 1000; color: #ffdd70; text-shadow: 0 3px 20px rgba(255,221,112,.28); }
.vote-subtitle { margin-top: 4px; color: rgba(255,255,255,.8); font-weight: 800; }
.vote-timer { margin: 14px auto; width: clamp(86px, 12vw, 135px); height: clamp(86px, 12vw, 135px); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #ffdd70, #ff793d); color: #160e08; font-size: clamp(40px, 7vw, 78px); font-weight: 1000; box-shadow: 0 0 40px rgba(255, 125, 61, .38); }
.vote-instructions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 18px; font-size: clamp(18px, 2.6vw, 34px); font-weight: 1000; }
.vote-instructions div { padding: 12px; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); }
.vote-instructions strong { color: #ffdd70; }
.vote-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vote-choice { padding: clamp(16px, 2vw, 26px); border-radius: 26px; border: 2px solid rgba(255,255,255,.14); min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.left-choice { background: linear-gradient(135deg, rgba(47, 154, 255, .32), rgba(87, 255, 171, .14)); }
.right-choice { background: linear-gradient(135deg, rgba(255, 120, 56, .32), rgba(255, 221, 112, .14)); }
.choice-title { font-size: clamp(24px, 3vw, 42px); font-weight: 1000; }
.vote-count { font-size: clamp(52px, 7vw, 88px); font-weight: 1000; }
.choice-note { opacity: .8; font-weight: 800; }
@media (max-width: 820px) {
  #topHud { grid-template-columns: 1fr; right: 10px; left: 10px; top: 8px; gap: 6px; }
  .hud-block { padding: 8px 10px; }
  .resources { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
  .queue-panel { top: auto; bottom: 98px; left: 10px; transform: none; width: calc(50vw - 15px); padding: 8px; }
  .log-panel { top: auto; bottom: 98px; right: 10px; transform: none; width: calc(50vw - 15px); padding: 8px; }
  .log-list { max-height: 86px; }
  .action-overlay { grid-template-columns: 1fr 1fr 1fr; gap: 6px; bottom: 10px; }
  .action-card { min-height: 62px; border-radius: 14px; }
  .boss-hud { top: 170px; width: calc(100vw - 20px); }
  .vote-instructions, .vote-columns { grid-template-columns: 1fr; }
  .vote-card { padding: 18px; }
}