:root{--rosewater: #f5e0dc;--red: #f38ba8;--peach: #fab387;--yellow: #f9e2af;--green: #a6e3a1;--blue: #89b4fa;--mauve: #cba6f7;--text: #cdd6f4;--subtext: #bac2de;--surface0: #313244;--surface1: #45475a;--base: #1e1e2e;--mantle: #181825;--crust: #11111b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(circle at top,#313244 0,var(--base) 34%,var(--crust) 100%)}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;overscroll-behavior:none}body{min-height:100svh;touch-action:manipulation;-webkit-user-select:none;user-select:none}button,input{font:inherit}button{border:0;border-radius:16px;padding:.9rem 1rem;min-height:48px;font-weight:900;letter-spacing:.04em;color:var(--text);background:var(--surface0);box-shadow:0 10px 28px #0000003d;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:active,button.pressed{transform:translateY(1px) scale(.98);filter:brightness(1.18)}input{width:100%;border:1px solid rgba(205,214,244,.18);border-radius:14px;padding:.9rem 1rem;color:var(--text);background:#11111bb8;outline:none}input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #89b4fa2e}.app{width:min(1120px,100%);margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:12px}.eyebrow,.label,.hint,.message{color:var(--subtext)}.eyebrow{margin:0 0 .15rem;text-transform:uppercase;font-size:.76rem;letter-spacing:.18em}h1,h2,p{margin-top:0}h1{margin-bottom:0;font-size:clamp(1.7rem,7vw,3rem);line-height:.95}h2{margin-bottom:.7rem}.pill{flex:0 0 auto;border:1px solid var(--yellow);border-radius:999px;padding:.5rem .75rem;color:var(--yellow);font-weight:900;font-size:.88rem;background:#11111bb3}.card{border:1px solid rgba(205,214,244,.12);border-radius:22px;background:#1e1e2ed1;box-shadow:0 18px 48px #00000040;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.panel{padding:1rem}.hidden{display:none!important}.primary{background:linear-gradient(135deg,var(--blue),var(--mauve));color:var(--crust)}.danger{background:#f38ba82e;color:var(--red);border:1px solid rgba(243,139,168,.45)}.divider{height:1px;margin:1rem 0;background:#cdd6f424}.label{display:block;margin-bottom:.4rem;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.hint{line-height:1.45}.message{min-height:1.25rem;margin:.75rem 0 0;font-weight:800}.room-entry,.room-info-head,.host-actions{display:grid;gap:.6rem}.room-entry{grid-template-columns:1fr auto}.room-info-head{grid-template-columns:1fr auto;align-items:center}.room-code{font-size:clamp(1.9rem,10vw,3.8rem);letter-spacing:.1em;color:var(--green)}.color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:.4rem 0 1rem}.color-grid button{color:#11111b;text-shadow:0 1px rgba(255,255,255,.2)}.color-grid button.selected{outline:3px solid var(--rosewater)}.game{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.85fr);align-items:start;gap:12px}.canvas-card{overflow:hidden;padding:8px}.canvas-mount{width:100%;height:min(68svh,620px);min-height:280px;border-radius:18px;overflow:hidden;background:#11111b;touch-action:none}.canvas-mount canvas{display:block;width:100%;height:100%}.status-box{margin-top:8px;border-radius:14px;padding:.72rem .85rem;color:var(--yellow);font-weight:950;text-align:center;background:#11111bdb}.status-box p{margin:0}.lobby-list{display:grid;gap:.5rem}.player-row{display:flex;justify-content:space-between;gap:.7rem;align-items:center;border-radius:14px;padding:.7rem .8rem;background:#11111b75}.player-dot{width:.8rem;height:.8rem;border-radius:999px;display:inline-block;margin-right:.45rem}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-bottom:.7rem}.segmented button.active{outline:3px solid var(--green);background:#a6e3a129;color:var(--green)}.host-actions{grid-template-columns:1fr 1fr}.controls{position:sticky;bottom:max(10px,env(safe-area-inset-bottom));display:grid;gap:.8rem}.pad{width:min(260px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(64px,1fr));grid-template-rows:repeat(2,64px);gap:.55rem;touch-action:none}.pad button{min-height:64px;padding:0;font-size:1.55rem;background:linear-gradient(180deg,#45475a,#313244)}.pad span{display:block}.results{display:grid;gap:.5rem}.result-line{padding:.65rem .75rem;border-radius:12px;background:#11111b80}@media(max-width:820px){.app{padding-left:8px;padding-right:8px}.topbar{align-items:flex-start}.game{grid-template-columns:1fr;gap:8px}.canvas-card{order:1}.lobby-list{order:2}#hostControls{order:3}.controls{order:4}#resultCard{order:5}.canvas-mount{height:min(53svh,520px);min-height:260px}.panel{padding:.85rem}.room-entry,.room-info-head,.host-actions{grid-template-columns:1fr}.segmented{gap:.4rem}.segmented button{padding-inline:.4rem;font-size:.86rem}.controls{background:#181825eb}.pad{grid-template-columns:repeat(3,72px);grid-template-rows:repeat(2,72px);justify-content:center}.pad button{min-height:72px;font-size:1.8rem}}@media(max-width:380px){.pad{grid-template-columns:repeat(3,62px);grid-template-rows:repeat(2,62px)}.pad button{min-height:62px}.canvas-mount{min-height:236px}}.segmented button.selected{outline:3px solid var(--green);background:#a6e3a129;color:var(--green)}.lobby-player,.result-row{display:flex;justify-content:space-between;gap:.75rem;align-items:center;border-radius:14px;padding:.7rem .8rem;background:#11111b7a}.rank{color:var(--yellow);font-weight:950}.meta{color:var(--subtext);font-weight:800}