:root{--navy:#101b2d;--navy2:#162947;--orange:#f0761b;--cream:#fff9ec;--teal:#2fc7be;--ink:#172033;font-family:'DM Sans',system-ui,sans-serif;color:var(--cream)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0,#23446a 0,transparent 32%),linear-gradient(135deg,#101b2d,#172947);letter-spacing:.01em}.shell{width:min(1120px,100%);margin:auto;padding:24px}.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:20px/16px Anton,sans-serif;letter-spacing:1px}.brand-mark{display:grid;place-items:center;width:44px;height:44px;background:var(--orange);border:3px solid #fff;box-shadow:4px 4px #07101d;font:22px Anton,sans-serif}.connection{font-size:13px;font-weight:700}.connection--offline{color:#a7b3c7}.connection--online{color:#72e2be}.small-button,.text-button{border:0;background:transparent;color:var(--cream);font:700 14px 'DM Sans';cursor:pointer}.small-button{border:1px solid #61718b;border-radius:999px;padding:9px 13px}.card{width:min(680px,100%);margin:8vh auto 0;padding:clamp(25px,5vw,52px);border:1px solid #59708f;border-radius:26px;background:linear-gradient(140deg,#1d3658de,#15253fe8);box-shadow:0 28px 80px #07101d88}.eyebrow{margin:0 0 10px;color:var(--teal);font-size:12px;font-weight:700;letter-spacing:1.8px}h1,h2{font-family:Anton,sans-serif;font-weight:400;letter-spacing:.5px;margin:0}h1{font-size:clamp(45px,8vw,78px);line-height:.95}h1 span{color:var(--orange)}h2{font-size:34px;line-height:1}.lead{max-width:540px;font-size:17px;line-height:1.55;color:#d8e4f3}.lobby-actions{display:grid;grid-template-columns:1fr;gap:14px;margin-top:28px}.primary-button,.secondary-button{min-height:52px;border:0;border-radius:13px;padding:0 18px;font:700 16px 'DM Sans';cursor:pointer}.primary-button{background:var(--orange);color:#fff;box-shadow:0 5px 0 #a54502}.primary-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.primary-button:active{box-shadow:0 2px 0 #a54502;transform:translateY(3px)}.join-row{display:grid;grid-template-columns:1fr auto;gap:9px}input{min-width:0;padding:0 15px;border:1px solid #7289a7;border-radius:13px;background:#0e1a2d;color:#fff;font:700 16px 'DM Sans';letter-spacing:1px}.secondary-button{color:#10213a;background:#f7edcf}.message{min-height:24px;margin:18px 0 0;color:#c9d6e5;line-height:1.45}.rules{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px;color:#a8bbd1;font-size:13px}.rules span{padding:6px 9px;border:1px solid #526a89;border-radius:8px}.hidden{display:none!important}.waiting{text-align:center}.room-code{display:block;margin:20px 0;font:clamp(42px,9vw,68px)/1 Anton,sans-serif;letter-spacing:3px;color:var(--orange);text-shadow:3px 3px #091322}.waiting-actions{display:flex;justify-content:center;align-items:center;gap:18px}.game-wrap{margin-top:16px}.hud{display:flex;justify-content:space-between;align-items:center;margin:0 auto 10px;max-width:960px;font:700 15px 'DM Sans'}.round-label{color:#c5d5e9;font-size:12px;letter-spacing:1px}.player-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 5px}.orange{background:var(--orange)}.teal{background:var(--teal)}canvas{display:block;width:100%;height:auto;border:3px solid #cbd8e6;border-radius:16px;background:#83cfdf;box-shadow:0 22px 52px #07101d88;touch-action:none}.game-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 4px;font-size:13px;color:#d0ddec}.mobile-controls{display:none;justify-content:space-between;margin:14px 0}.mobile-controls div{display:flex;gap:10px}.mobile-controls button{display:grid;place-items:center;width:62px;height:56px;border:2px solid #b9cce1;border-radius:14px;background:linear-gradient(145deg,#315578,#1a3657);box-shadow:0 4px 0 #0c1f36;color:#fff;touch-action:none}.mobile-controls button:active{transform:translateY(3px);box-shadow:0 1px 0 #0c1f36}.mobile-controls svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.mobile-right button:last-child{background:linear-gradient(145deg,#f68a36,#cf5b0b)}dialog{max-width:500px;border:1px solid #58769a;border-radius:20px;background:#193152;color:#fff;padding:32px;box-shadow:0 20px 90px #000}dialog::backdrop{background:#050a1299}.dialog-close{float:right;border:0;background:transparent;color:#fff;font-size:26px;cursor:pointer}@media(max-width:620px){.shell{padding:14px}.topbar{height:55px}.brand{font-size:17px;line-height:13px}.brand-mark{width:37px;height:37px;font-size:18px}.connection{font-size:11px}.small-button{padding:7px 9px}.card{margin-top:4vh;border-radius:20px}.mobile-controls{display:flex}.hud{font-size:12px}.round-label{font-size:10px}canvas{border-radius:11px}.game-actions{font-size:12px}}