:root{--gold:#f7c948;--blue:#1f4bff;--ink:#05060b}*{box-sizing:border-box;margin:0;padding:0}html,body{color:#e8ecff;overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:none;background:#000;height:100%;font-family:ui-monospace,Menlo,Monaco,monospace}#app{min-height:100%;padding:env(safe-area-inset-top) 12px calc(env(safe-area-inset-bottom) + 12px);flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}#hud{letter-spacing:1.5px;border:2px solid var(--blue);width:min(96vw,588px);color:var(--gold);background:#00081ed9;border-radius:10px;justify-content:space-between;padding:8px 10px;font-size:14px;display:flex;position:relative;overflow:hidden}#hudMarquee{white-space:nowrap;width:100%;display:none;overflow:hidden}.hudMarqueeTrack{width:200%;animation:6s linear infinite hudMarquee;display:flex}.hudMarqueeTrack span{text-align:center;flex:0 0 50%;width:50%}#hud.idle #hudMarquee{display:block}#hud.idle>span{display:none}@keyframes hudMarquee{0%{transform:translate(0)}to{transform:translate(-50%)}}#gameWrap{width:min(96vw,588px)}#game{aspect-ratio:544/672;border:3px solid var(--blue);touch-action:none;background:#000;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 0 30px #1f4bff40}canvas{width:100%;height:auto;image-rendering:pixelated;display:block}#startScreen{z-index:4;opacity:1;background:url(/cover-bg.png) 50%/cover no-repeat,linear-gradient(#078ddd 0 40%,#e7bd5d 40% 100%);transition:opacity .25s;position:absolute;inset:0}#startScreen.hide{opacity:0;pointer-events:none}#startCover{display:none}#startButton{appearance:none;cursor:pointer;transform-origin:50%;background:0 0;border:0;width:min(48%,300px);padding:0;animation:1.05s ease-in-out infinite startPulse;position:absolute;bottom:clamp(22px,5.2%,42px);left:50%;translate:-50%}#startButton img{filter:drop-shadow(0 8px #00000061);width:100%;height:auto;display:block}#startButton span{letter-spacing:0;color:#f7c948;-webkit-text-stroke:3px #111;text-shadow:0 8px #00000059;font-size:clamp(36px,11vw,76px);font-weight:900;line-height:.88;display:none}#startButton:focus-visible{outline-offset:8px;outline:3px solid #af0}@keyframes startPulse{0%,to{transform:scale(1)}50%{transform:scale(1.09)}}#overlay{z-index:3;color:var(--gold);letter-spacing:3px;text-align:center;pointer-events:none;opacity:0;white-space:pre-line;background:#0000008c;place-items:center;font-size:26px;transition:opacity .15s;display:grid;position:absolute;inset:0}#overlay.show{opacity:1}#multiEffect{z-index:6;opacity:0;pointer-events:none;background:#00000073;place-items:center;padding:8%;transition:opacity .12s;display:grid;position:absolute;inset:0}#game.multiplayerActive #multiEffect.show{opacity:1}#game.multiplayerActive #multiEffect.result{pointer-events:auto}#multiEffect img{object-fit:contain;width:min(82%,440px);max-height:82%;display:block}#multiEffect.result img{transform-origin:50%;animation:1.35s ease-in-out infinite winImagePop}#multiEffect.show:not(.result) img{transform-origin:50%;animation:.12s linear 7 damageShake}@keyframes winImagePop{0%,to{transform:scale(.88)}50%{transform:scale(1.04)}}@keyframes damageShake{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-7px)rotate(-2deg)}75%{transform:translate(7px)rotate(2deg)}}#multiEffectMessage{color:#ff4040;letter-spacing:1px;text-align:center;font:900 clamp(22px,5vw,38px)/1.1 ui-monospace,Menlo,Monaco,monospace;display:none}#multiEffect.failure #multiEffectMessage{display:block}#multiEffect.failure img{display:none}#multiRestart{min-width:min(70%,260px);display:none;position:absolute;bottom:8%}#multiEffect.result #multiRestart{display:block}#game.multiplayerActive.damageFlash:after{content:"";z-index:7;pointer-events:none;background:#ff14147a;animation:.52s ease-out damageFlash;position:absolute;inset:0}@keyframes damageFlash{0%,38%{opacity:1}18%,58%{opacity:.12}to{opacity:0}}.screen{z-index:5;background:#050b18;flex-direction:column;justify-content:center;align-items:center;padding:clamp(14px,3vw,24px);display:flex;position:absolute;inset:0}.screen.hide{display:none}.panel{width:100%;height:100%;box-shadow:none;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:9px;padding:clamp(6px,2vw,12px);display:flex;overflow:hidden}.lobbyPanel{gap:7px}.lobbyView{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.lobbyView[hidden],#lobbyDetails[hidden]{display:none}#lobbyDetails{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.modeTitle{color:var(--gold);letter-spacing:2px;text-align:center;flex-shrink:0;font-size:clamp(22px,5.5vw,36px);font-weight:900}.matchStatus{color:#39ff14;text-align:center;letter-spacing:1px;border:3px solid #39ff14;width:min(86%,320px);padding:14px 10px;font-size:clamp(16px,4vw,24px);font-weight:900}.btn{color:#111;cursor:pointer;letter-spacing:1px;touch-action:none;background:#f7c948;border:3px solid #111;border-radius:0;flex-shrink:0;min-width:min(86%,320px);padding:11px 14px;font:900 clamp(14px,4vw,20px)/1 ui-monospace,Menlo,Monaco,monospace;box-shadow:0 4px #00000061}.btn.primary{background:#39ff14}.btn:active{transform:translateY(3px);box-shadow:0 1px #00000061}.btn.hide{display:none}.btn:focus-visible{outline:3px solid #af0}.hint{color:#b8c6ff;letter-spacing:1px;text-align:center;flex-shrink:0;font-size:11px}.roomCodeLabel{color:#b8c6ff;letter-spacing:2px;flex-shrink:0;font-size:11px}.roomCode{letter-spacing:6px;color:#39ff14;-webkit-text-fill-color:#39ff14;-webkit-text-stroke:1px #071505;text-shadow:0 0 4px #39ff14,0 0 12px #39ff14b3,0 4px #00000059;flex-shrink:0;margin:2px 0;font-size:clamp(26px,7vw,48px);font-weight:900;line-height:1}.joinInput{text-align:center;letter-spacing:8px;color:#fff;background:#050b18;border:3px solid #39ff14;border-radius:0;outline:none;flex-shrink:0;width:min(86%,320px);padding:8px;font:900 clamp(20px,5vw,28px)/1 ui-monospace,Menlo,Monaco,monospace}.joinInput::placeholder{letter-spacing:2px;color:#4a5876}.playersList{flex-shrink:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:min(86%,320px);min-height:0;display:grid;overflow:visible}.playerRow{color:#e8ecff;letter-spacing:1px;background:#0a1020;border:2px solid #111;justify-content:space-between;align-items:center;min-width:0;padding:5px 6px;font-size:11px;font-weight:900;display:flex}.playerRow>span:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.playerRow .tag{color:#b8c6ff;margin-left:4px;font-size:10px}.playerRow.you,.playerRow.you .tag{color:#000}#mobileControls{display:none}@media (width<=720px),(hover:none),(pointer:coarse){#app{justify-content:flex-start}#mobileControls{opacity:0;pointer-events:none;grid-template-columns:repeat(4,1fr);gap:8px;width:min(88vw,328px);transition:opacity .16s,transform .16s;display:grid;transform:translateY(8px)}#mobileControls.show{opacity:1;pointer-events:auto;transform:translateY(0)}#mobileControls button{aspect-ratio:1;color:#0000;box-shadow:none;touch-action:none;background:0 0;border:4px solid #39ff14;border-radius:0;position:relative}#mobileControls button:before{content:"";border:4px solid #39ff14;border-width:4px 4px 0 0;width:18px;height:18px;position:absolute;top:50%;left:50%}#mobileControls button:after{content:"";background:#39ff14;position:absolute;top:50%;left:50%}#mobileControls button:active{background:#39ff141f}#mobileControls [data-dir=left]:before{transform:translate(-42%,-50%)rotate(-135deg)}#mobileControls [data-dir=left]:after{width:28px;height:4px;transform:translate(-28%,-50%)}#mobileControls [data-dir=up]:before{transform:translate(-50%,-42%)rotate(-45deg)}#mobileControls [data-dir=up]:after{width:4px;height:28px;transform:translate(-50%,-28%)}#mobileControls [data-dir=down]:before{transform:translate(-50%,-58%)rotate(135deg)}#mobileControls [data-dir=down]:after{width:4px;height:28px;transform:translate(-50%,-72%)}#mobileControls [data-dir=right]:before{transform:translate(-58%,-50%)rotate(45deg)}#mobileControls [data-dir=right]:after{width:28px;height:4px;transform:translate(-72%,-50%)}}