html, body, #canvas-container {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  touch-action: none;
  overscroll-behavior: none;
}
#canvas-container { user-select: none; -webkit-user-select: none; }
body {font-family:system-ui,sans-serif;background:#101923;color:#f7f2e5;}
button,input {font:inherit;border-radius:10px;padding:12px;border:1px solid #637184;}
button {background:#f7be53;color:#182029;cursor:pointer;}
input {background:#182632;color:white;width:100%;box-sizing:border-box;}
#login-panel {position:absolute;z-index:3;inset:0;overflow-y:auto;margin:auto;padding:24px;width:min(440px,calc(100% - 48px));height:fit-content;max-height:calc(100% - 60px);background:#17232ef2;border-radius:20px;touch-action:pan-y;}
#login-panel label {display:block;margin:14px 0;}
#login-panel p {line-height:1.45;color:#c5d2dc;}
canvas {display:block;width:100%;height:100%;}
#hud {position:absolute;inset:0;pointer-events:none;z-index:2;}
#match-status {position:absolute;left:16px;top:0;background:#101923d9;padding:12px;border-radius:10px;max-width:70%;}
#btn-sair {position:absolute;right:12px;top:12px;pointer-events:auto;}
#crosshair {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:26px;}
#controls {position:absolute;bottom:max(20px,env(safe-area-inset-bottom));right:14px;display:flex;gap:8px;pointer-events:auto;}
#controls button {max-width:110px;min-height:65px;background:#17232edd;color:#fff;}
#game-message {position:absolute;left:16px;bottom:8px;max-width:45%;background:#101923b0;padding:8px;}
#joystick {position:absolute;width:120px;height:120px;border:2px solid #ffffff88;background:#ffffff22;border-radius:50%;transform:translate(-50%,-50%);}
[hidden] {display:none!important;}
@media(max-width:600px){#match-status{font-size:13px}#controls button{font-size:12px;padding:8px;max-width:84px}#game-message{font-size:12px}}