:root{--sky-top: #7ec8e3;--sky-mid: #b8e0d2;--sky-bot: #f7d794;--ink: #1f2a24;--panel: rgba(255, 250, 240, .92);--accent: #e85d04;--accent-2: #2a9d8f;--line: rgba(31, 42, 36, .12);--shadow: 0 18px 50px rgba(31, 42, 36, .18);--radius: 18px;--font-display: "Fredoka", sans-serif;--font-body: "Nunito", sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#1f2a24;color:var(--ink);font-family:var(--font-body)}#game{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:5;pointer-events:auto}.hidden{display:none!important}.home-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.35),transparent 35%),radial-gradient(circle at 80% 30%,rgba(232,93,4,.25),transparent 30%),linear-gradient(165deg,var(--sky-top),var(--sky-mid) 45%,var(--sky-bot));animation:drift 12s ease-in-out infinite alternate}@keyframes drift{0%{transform:scale(1)}to{transform:scale(1.05)}}.home-panel,.lobby-card,.over-card{position:relative;width:min(520px,calc(100vw - 2rem));padding:1.6rem 1.5rem 1.4rem;border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:rise .55s ease both}.lobby-card{width:min(860px,calc(100vw - 2rem))}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.brand{margin:0;font-family:var(--font-display);font-size:clamp(2.4rem,8vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:.95;color:var(--accent);text-shadow:0 2px 0 rgba(255,255,255,.5)}h1{margin:.35rem 0 .4rem;font-family:var(--font-display);font-size:1.45rem;font-weight:600}.tag,.hint,.eyebrow{margin:0;color:#1f2a24b8}.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:800}.code{margin:.2rem 0 0;font-family:var(--font-display);font-size:2.4rem;letter-spacing:.18em;font-weight:700}.field{display:grid;gap:.35rem;margin:1rem 0 0;font-size:.9rem;font-weight:800}input,select{width:100%;border:2px solid var(--line);border-radius:12px;padding:.7rem .85rem;font:inherit;background:#fff;color:var(--ink)}input:focus,select:focus{outline:2px solid var(--accent-2);border-color:transparent}.row{display:flex;gap:.7rem;margin-top:1rem;flex-wrap:wrap}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:12px;padding:.75rem 1.1rem;font-family:var(--font-display);font-weight:600;font-size:1rem;background:#e9ecef;color:var(--ink);cursor:pointer;transition:transform .15s ease,background .15s ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);color:#fff}.btn.small{padding:.45rem .8rem;font-size:.9rem}.btn.ready-on{background:var(--accent-2);color:#fff}.error{min-height:1.2rem;color:#c92a2a;font-weight:700;margin:.7rem 0 0}.lobby-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.lobby-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:1.2rem}@media(max-width:720px){.lobby-grid{grid-template-columns:1fr}}.lobby-grid h2{margin:0 0 .6rem;font-family:var(--font-display);font-size:1.1rem}#player-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;max-height:280px;overflow:auto}#player-list li{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:12px;background:#ffffffb3;border:1px solid var(--line)}.swatch{width:18px;height:18px;border-radius:50%;border:2px solid rgba(0,0,0,.12);flex:0 0 auto}.costume-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;max-height:220px;overflow:auto;padding-right:.2rem}.costume-btn{aspect-ratio:1;border-radius:12px;border:3px solid transparent;cursor:pointer;position:relative;overflow:hidden;padding:0}.costume-btn .costume-label{position:absolute;left:0;right:0;bottom:0;font-size:.58rem;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);background:linear-gradient(transparent,#00000073);padding:.35rem .15rem .2rem}.costume-btn.selected{border-color:var(--ink);transform:scale(1.05)}.hud-help{max-width:calc(100vw - 2rem);white-space:normal!important;text-align:center}.lobby-actions{margin-top:1.1rem}#hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}.hud-top{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;font-family:var(--font-display);font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45)}.hud-help{position:absolute;left:50%;bottom:1rem;transform:translate(-50%);padding:.45rem .8rem;border-radius:999px;background:#1f2a2473;color:#fff;font-size:.85rem;white-space:nowrap}.host-only.hidden-role,.guest-only.hidden-role{display:none!important}