*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#root{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}.app{position:relative;width:100%;height:100%;max-width:56.25vh;max-height:100vh;overflow:hidden;transform:translate(0)}.block-party-container{width:100%;height:100%;position:relative;overflow:hidden}.game-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}.game-overlay>*{pointer-events:auto}.phase-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;font-weight:700;color:#fff;text-shadow:0 0 20px rgba(0,210,255,.8);animation:phaseFadeIn .5s ease-out,phaseFadeOut .5s ease-in 2.5s;pointer-events:none;z-index:200}@keyframes phaseFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes phaseFadeOut{0%{opacity:1}to{opacity:0}}.hud-overlay{position:absolute;top:calc(10px + var(--sat, 0px));left:10px;right:10px;display:flex;justify-content:space-between;pointer-events:none;z-index:100}.timer-display{background:#000000b3;border:1px solid rgba(0,210,255,.4);border-radius:8px;padding:8px 16px;color:#fff;font-size:1.4rem;font-weight:700;text-align:center}.timer-display.warning{border-color:#f44;color:#f44;animation:timerPulse 1s infinite}@keyframes timerPulse{0%,to{opacity:1}50%{opacity:.5}}.role-badge{background:#000c;border-radius:8px;padding:6px 12px;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:1px}.role-badge.engineer{color:#0cf;border:1px solid #00ccff}.role-badge.glitch{color:#f33;border:1px solid #ff3333}.crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;pointer-events:none;z-index:150}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#fff9}.crosshair:before{top:0;left:50%;transform:translate(-50%);width:2px;height:100%}.crosshair:after{top:50%;left:0;transform:translateY(-50%);width:100%;height:2px}