@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Rajdhani:wght@500;600;700&display=swap');
:root{--bg:#080d19;--blue:#45c7ff;--red:#ff5d78;--lime:#b8ff6a}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -20%,#20365a,#0c1425 48%,#070b14);color:#f4f7ff;font-family:Rajdhani,Arial,sans-serif}
.app{width:min(1120px,calc(100% - 30px));margin:auto;padding:27px 0 22px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.eyebrow{font:600 10px Orbitron,sans-serif;letter-spacing:3px;color:#8fa5c8;margin:0 0 7px}h1{font:900 clamp(25px,4vw,38px) Orbitron;margin:0}h1 span{color:var(--blue)}
.online{display:flex;align-items:center;gap:8px;font:600 10px Orbitron;color:#aab9d0}.online i{width:8px;height:8px;border-radius:50%;background:#f3c65c;box-shadow:0 0 9px currentColor}.online.connected i{background:#9cff69}
.lobby{min-height:610px;display:grid;place-items:center;background:linear-gradient(135deg,#14243acc,#0d1728dd),repeating-linear-gradient(135deg,transparent 0 30px,#ffffff05 31px 32px);border:1px solid #344764;border-radius:16px;padding:24px}
.lobby-card{width:min(490px,100%);text-align:center;background:#0d1728;border:1px solid #344764;border-radius:16px;padding:32px 28px;box-shadow:0 20px 60px #0007}
.logo{font-size:42px;color:var(--lime);margin-bottom:12px}.lobby-card h2{font:800 23px Orbitron;margin:8px 0}.muted{color:#9cabc2;font-size:16px;margin:0 0 24px}
.mode-buttons{display:grid;gap:12px}button{border:0;border-radius:8px;padding:14px 18px;background:linear-gradient(100deg,#a7f45d,#d5ff82);color:#111b19;font:800 12px Orbitron;letter-spacing:1px;cursor:pointer;transition:.15s}button:hover{filter:brightness(1.08);transform:translateY(-1px)}button:disabled{opacity:.4;cursor:not-allowed;transform:none}
.difficulty-row{display:flex;justify-content:center;align-items:center;gap:12px;color:#aebdd3;font:700 11px Orbitron}.difficulty-row select{background:#17243a;color:#fff;border:1px solid #40516c;border-radius:7px;padding:10px 14px;font:700 11px Orbitron}
.section-rule{display:flex;align-items:center;gap:12px;color:#7e91ad;font:600 9px Orbitron;letter-spacing:2px;margin:7px 0}.section-rule:before,.section-rule:after{content:"";height:1px;background:#344764;flex:1}
.join-row{display:flex;gap:8px}input{min-width:0;flex:1;border:1px solid #40516c;border-radius:8px;background:#17243a;color:white;padding:13px;text-align:center;font:700 15px Orbitron;letter-spacing:3px;text-transform:uppercase}.secondary,.copy,.small-btn{background:#1a2a40;color:#d8e6fa;border:1px solid #3a4d69;box-shadow:none}.message{min-height:20px;color:#f3c65c;font-size:14px;margin:16px 0 0}
.room-info{margin-top:20px;padding:18px;border:1px dashed #58704d;border-radius:10px;background:#17271f}.room-info span{display:block;font:600 9px Orbitron;letter-spacing:2px;color:#9cb38c}.room-info strong{display:block;font:900 35px Orbitron;color:var(--lime);letter-spacing:8px;margin:8px}.copy{padding:8px 12px;font-size:9px}.room-info p{color:#c2d0b6;margin:12px 0 0}
.hidden{display:none!important}.hud{display:grid;grid-template-columns:1fr 45px 1fr;gap:12px;align-items:center;margin:14px 0}.player-hud{background:linear-gradient(135deg,#14243a,#0d1728);border:1px solid #293b56;border-radius:12px;padding:13px 16px}.player-line,.hud-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.player-line strong{font:700 12px Orbitron}.player-line span,.hud-bottom{font:600 10px Orbitron;color:#91a0ba}.blue-hud strong{color:var(--blue)}.red-hud strong{color:var(--red)}.health-track{height:13px;background:#26344b;border-radius:20px;overflow:hidden;margin:9px 0 6px}.health-fill{height:100%;width:100%;transition:width .12s}.blue-hud .health-fill{background:linear-gradient(90deg,#1595e5,#62e0ff)}.red-hud .health-fill{background:linear-gradient(90deg,#ff426b,#ff9a73)}.hud-bottom b{color:#e8f0ff}.vs{text-align:center;font:900 17px Orbitron;color:#f6d46c}
.arena-wrap{position:relative;border:1px solid #344764;border-radius:15px;overflow:hidden;background:#101c31;box-shadow:0 20px 60px #0008}canvas{display:block;width:100%;height:auto;aspect-ratio:1000/520}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#07101dcc;backdrop-filter:blur(5px)}.result-card{text-align:center;padding:25px;max-width:440px}.result-card h2{font:900 clamp(30px,6vw,52px) Orbitron;color:var(--lime);margin:8px}.result-card p:not(.eyebrow){color:#b5c2d8;font-size:16px}.game-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;color:#8494ad;font:600 10px Orbitron}.small-btn{padding:9px 12px;font-size:9px}footer{text-align:center;color:#71819a;font-size:12px;margin-top:16px}
@media(max-width:650px){.app{width:calc(100% - 16px);padding-top:16px}.lobby{min-height:530px;padding:12px}.lobby-card{padding:25px 15px}.hud{grid-template-columns:1fr 25px 1fr;gap:5px}.player-hud{padding:8px}.player-line strong{font-size:9px}.player-line span,.hud-bottom{font-size:7px}.health-track{height:9px}.game-footer{font-size:8px}.join-row{flex-direction:column}}

/* 2.5D arena presentation */
.arena-wrap{border-color:#55799d;box-shadow:0 0 0 1px #9bdcff22,0 22px 70px #000b,inset 0 0 45px #6ccfff18}
canvas{filter:saturate(1.12) contrast(1.04)}
.player-hud{box-shadow:inset 0 1px #ffffff12,0 8px 24px #0005}
.health-track{box-shadow:inset 0 2px 5px #0009}

/* Water vs Fire elemental identity */
.blue-hud strong{color:#48ff88!important;text-shadow:0 0 12px #26ff78}
.red-hud strong{color:#ff5364!important;text-shadow:0 0 12px #ff344f}
.blue-hud .health-fill{background:linear-gradient(90deg,#00a84e,#6aff9c)!important;box-shadow:0 0 15px #37ff80}
.red-hud .health-fill{background:linear-gradient(90deg,#d51c31,#ff9a47)!important;box-shadow:0 0 15px #ff4a31}

.power-row{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.5px}
.power-row b{min-width:82px;color:#bdeeff}.red-hud .power-row b{color:#ffd0a1}
.power-track{height:10px;flex:1;border-radius:99px;background:#07101dcc;border:1px solid #8bb4d855;overflow:hidden;box-shadow:inset 0 1px 4px #000}
.power-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#087bdc,#65faff,#fff);box-shadow:0 0 12px #45dfff;transition:width .15s}
.red-hud .power-fill{background:linear-gradient(90deg,#e33a12,#ff8a22,#fff0a0);box-shadow:0 0 12px #ff641e}
.power-row strong{min-width:34px;text-align:right;color:#fff}
.power-ready{animation:powerPulse .7s infinite alternate}
@keyframes powerPulse{to{filter:brightness(1.8);text-shadow:0 0 12px currentColor}}