:root{color-scheme:dark;--bg:#070914;--panel:#101425;--line:#252c46;--text:#f6f7ff;--muted:#8d96b8}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#27205d 0,transparent 45%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overscroll-behavior:none}body{min-height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);user-select:none}button,input{font:inherit}.screen{display:none;width:min(100%,960px);margin:auto;padding:18px}.screen.active{display:block}header{display:flex;align-items:center;justify-content:space-between;margin:5px 0 14px}small{font-size:12px;letter-spacing:.12em;color:#858fb5}h1{font-size:clamp(28px,7vw,48px);line-height:1;margin:6px 0}.avatar{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:#151a31;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.games{display:grid;grid-template-columns:1fr;gap:8px}.game-card{position:relative;min-height:78px;border:1px solid var(--line);border-radius:18px;text-align:left;padding:12px 16px 12px 70px;background:linear-gradient(145deg,#151a31,#0b0e1a);color:white;overflow:hidden;transition:.16s}.game-card.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 0 24px color-mix(in srgb,var(--accent) 18%,transparent);transform:translateX(3px)}.game-card span{position:absolute;left:18px;top:17px;font-size:31px}.game-card b{font-size:18px}.game-card em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:3px}.game-card:after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-25px;bottom:-35px;background:var(--accent);filter:blur(28px);opacity:.38}.room-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.join{display:flex;gap:7px}.join input{width:100%;min-width:0;text-transform:uppercase;letter-spacing:.15em}.primary,button,input{min-height:48px;border:1px solid var(--line);border-radius:14px;background:#151a2d;color:white;padding:0 15px}.primary{border:0;background:linear-gradient(135deg,#7258ff,#b052ff);font-weight:800}.join button,#share{color:#71d5ff;border-color:#29617b}.msg{text-align:center;color:var(--muted);min-height:20px}.back{border:0;background:transparent;padding:0;color:var(--muted)}.room-head{text-align:center;margin:18px 0}.room-head h2{font-size:42px;letter-spacing:.18em;margin:7px 0}.players{display:grid;grid-template-columns:1fr 35px 1fr;gap:8px;align-items:center;margin:18px 0}.player{padding:12px 7px;border:1px solid var(--line);border-radius:18px;text-align:center;background:var(--panel)}.player .avatar{margin:0 auto 6px}.player.ready{border-color:#35d791}.versus{text-align:center;color:var(--muted);font-weight:bold}.mini-games{display:flex;gap:8px;margin:14px 0;overflow-x:auto}.mini-games button{padding:5px 13px;min-width:max-content;min-height:50px;font-size:12px}.mini-games button.selected{border-color:#9569ff;background:#261d4c}.hud{height:46px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.hud>div{display:flex;align-items:center;gap:9px}.hud>div:last-child{justify-content:flex-end}.hud span{font-size:25px}.hud strong{font-size:12px;color:var(--muted);letter-spacing:.12em}canvas{display:block;width:100%;height:auto;max-height:calc(100dvh - 135px);background:#060811;border:1px solid var(--line);border-radius:14px;touch-action:none}.controls{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:8px;min-height:58px}.controls button{min-width:96px}.stick-wrap{text-align:center;font-size:10px;color:var(--muted)}.joystick{width:86px;height:86px;border-radius:50%;border:2px solid #35405f;background:rgba(16,20,37,.92);position:relative;touch-action:none;margin-bottom:2px}.joystick i{position:absolute;width:40px;height:40px;border-radius:50%;left:21px;top:21px;background:#566487;box-shadow:0 0 15px #4562a8}.joystick.aim i{background:#b54d73;box-shadow:0 0 15px #ff3b70}.result{display:none;position:fixed;inset:0;background:rgba(4,5,12,.86);backdrop-filter:blur(10px);z-index:5;place-content:center;text-align:center;padding:30px}.result.show{display:grid}.result h2{font-size:48px;margin:0}.result button{margin:6px;min-width:220px}#rotate{display:none;position:fixed;inset:0;z-index:20;background:#070914;place-content:center;text-align:center;padding:25px}#rotate .rotate-icon{font-size:70px;color:#9569ff}#rotate h2{margin:8px 0}#rotate p{color:var(--muted)}@media(max-width:620px){.screen{padding:11px}.games{gap:7px}.game-card{min-height:70px;padding:10px 12px 10px 64px}.game-card span{left:15px;top:14px;font-size:28px}.room-actions{grid-template-columns:1fr}.hud{height:37px}.hud span{font-size:20px}.room-head{margin:12px 0}.players{margin:12px 0}}@media(pointer:coarse) and (orientation:portrait){body.playing #rotate{display:grid}}@media(pointer:coarse) and (orientation:landscape){body.playing #play{padding:3px 8px;width:100%;max-width:none}body.playing .hud{height:32px}body.playing canvas{height:calc(100dvh - 46px);width:100vw;max-width:none;margin:auto}body.playing .controls{position:fixed;inset:34px 8px 3px;justify-content:space-between;pointer-events:none}body.playing .controls>*{pointer-events:auto;align-self:end;margin-bottom:6px}}

/* FINAL FULL-VIEWPORT PLAYING SCREEN */
@media (pointer: coarse) and (orientation: landscape) {
  body.playing #play {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  body.playing .hud {
    position: fixed;
    z-index: 10;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    height: 52px;
    padding: 0 18px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(3,5,12,.72), transparent);
  }
  body.playing canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  body.playing .controls {
    position: fixed;
    z-index: 20;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    box-sizing: border-box;
    padding: 0 6vw max(4vh, env(safe-area-inset-bottom));
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
  }
  body.playing .controls > * {
    pointer-events: auto;
    margin: 0;
  }
  .joystick { width: 112px; height: 112px; }
  .joystick i { width: 52px; height: 52px; left: 28px; top: 28px; }
  .controls button { min-width: 110px; min-height: 54px; }
}
@media (pointer: coarse) and (orientation: portrait) {
  body.playing #play {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    padding: 0;
    overflow: hidden;
  }
}
@media (pointer: fine) {
  body.playing #play {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  body.playing .hud {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 24px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(3,5,12,.7), transparent);
  }
  body.playing canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  body.playing .controls {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 14px;
    width: 100vw;
    margin: 0;
    pointer-events: none;
  }
  body.playing .controls > * { pointer-events: auto; }
}