*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #030208;--surface: rgba(20, 15, 45, .6);--surface-bright: rgba(40, 35, 75, .8);--border: rgba(100, 80, 200, .3);--gold: #ffcc33;--gold-glow: rgba(255, 204, 51, .4);--purple: #9c44cc;--purple-glow: rgba(156, 68, 204, .4);--teal: #4ecdc4;--teal-glow: rgba(78, 205, 196, .4);--text: #f0e6ff;--muted: #8b7daf;--danger: #ff4d6d;--glass: blur(12px)}html{height:100%;background:var(--bg)}body{display:flex;flex-direction:column;min-height:100vh;color:var(--text);font-family:Crimson Pro,serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;background:radial-gradient(circle at 20% 30%,rgba(60,20,120,.15) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(20,80,120,.15) 0%,transparent 40%),linear-gradient(180deg,#030208,#0a081a);background-attachment:fixed}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.03) 1px,transparent 1px),radial-gradient(circle at 20% 80%,rgba(255,255,255,.02) 1px,transparent 1px);background-size:100px 100px,150px 150px;z-index:-1;pointer-events:none;animation:drift 60s linear infinite}@keyframes drift{0%{transform:translateY(0)}to{transform:translateY(-1000px)}}.screen{display:none;flex-direction:column;align-items:center;min-height:100vh;padding:40px 20px 60px;gap:20px;position:relative;max-width:600px;margin:0 auto;width:100%}.screen.active{display:flex}.back{position:fixed;top:20px;left:20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 18px;color:var(--text);font-size:.9rem;font-weight:500;text-decoration:none;z-index:100;font-family:Cinzel,serif;backdrop-filter:var(--glass);transition:all .3s cubic-bezier(.4,0,.2,1)}.back:hover{background:var(--surface-bright);border-color:var(--gold);transform:translate(-4px)}.game-title{font-family:Cinzel,serif;font-size:clamp(2.5rem,10vw,4.5rem);color:var(--gold);letter-spacing:6px;text-align:center;line-height:1.1;text-shadow:0 0 30px var(--gold-glow);font-weight:700}.game-subtitle{font-family:Crimson Pro,serif;font-size:1.2rem;font-style:italic;color:var(--muted);text-align:center;max-width:340px;line-height:1.6}.game-subtitle em{color:var(--gold);font-weight:500}.btn{display:flex;align-items:center;justify-content:center;padding:16px 32px;border-radius:12px;border:1px solid transparent;font-family:Cinzel,serif;font-size:.9rem;letter-spacing:2px;cursor:pointer;width:100%;max-width:320px;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent;font-weight:600;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:.5s}.btn:hover:after{left:100%}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:default}.btn-gold{background:linear-gradient(135deg,#b07030,#fc3);color:#1a0a00;box-shadow:0 8px 32px var(--gold-glow)}.btn-gold:hover{box-shadow:0 12px 40px var(--gold-glow);transform:translateY(-2px)}.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border);backdrop-filter:var(--glass)}.btn-ghost:hover{background:var(--surface-bright);border-color:var(--gold)}.btn-purple{background:linear-gradient(135deg,#6a1a9a,#9c44cc);color:#fff;box-shadow:0 8px 32px var(--purple-glow)}.btn-purple:hover{box-shadow:0 12px 40px var(--purple-glow);transform:translateY(-2px)}.setup-group{width:100%;max-width:320px}.setup-group label{display:block;font-family:Cinzel,serif;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;text-align:center}.custom-select{width:100%;padding:14px 18px;border-radius:12px;border:1px solid var(--border);background:var(--surface);font-family:Crimson Pro,serif;font-size:1.1rem;color:var(--text);outline:none;cursor:pointer;appearance:none;backdrop-filter:var(--glass);transition:all .3s;text-align:center}.custom-select:focus{border-color:var(--gold);background:var(--surface-bright)}.join-group{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.join-group input{width:100%;padding:16px;border-radius:12px;border:1px solid var(--border);background:var(--surface);font-family:Cinzel,serif;font-size:1.5rem;text-align:center;text-transform:uppercase;letter-spacing:8px;outline:none;color:var(--gold);backdrop-filter:var(--glass);transition:all .3s}.join-group input:focus{border-color:var(--gold);background:var(--surface-bright)}.join-group .btn{max-width:none}.code-display{font-family:Cinzel,serif;font-size:3.5rem;color:var(--gold);letter-spacing:12px;text-shadow:0 0 25px var(--gold-glow);font-weight:700}.rune-divider{font-size:1.5rem;color:var(--border);letter-spacing:12px;margin:10px 0;opacity:.6}.lore-text{font-style:italic;color:var(--muted);font-size:1.1rem;text-align:center;max-width:300px;line-height:1.6}#screen-ready{justify-content:center;text-align:center}.role-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px 28px;width:100%;max-width:340px;position:relative;overflow:hidden;backdrop-filter:var(--glass);box-shadow:0 10px 40px #0000004d}.role-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--purple))}.role-title{font-family:Cinzel,serif;font-size:1.6rem;color:var(--gold);letter-spacing:2px;margin-bottom:8px}.role-desc{font-style:italic;color:var(--muted);font-size:.95rem;line-height:1.6}.role-badge{display:inline-block;padding:4px 12px;border-radius:99px;border:1px solid var(--border);font-family:Cinzel,serif;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:16px}.countdown-text{font-family:Cinzel,serif;font-size:.75rem;letter-spacing:2px;color:var(--muted);margin-top:12px}#screen-navigator{justify-content:flex-start;padding-top:20px}.nav-header{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:480px}.nav-title{font-family:Cinzel,serif;font-size:.8rem;letter-spacing:2px;color:var(--gold)}.nav-hint{font-size:.75rem;color:var(--muted);font-style:italic}#nav-canvas{display:block;border:1.5px solid var(--border);border-radius:10px;box-shadow:0 0 30px #9c44cc26}.legend{display:flex;gap:16px;font-size:.72rem;color:var(--muted);font-family:Cinzel,serif;letter-spacing:.5px}.legend-item{display:flex;align-items:center;gap:5px}.legend-dot{width:8px;height:8px;border-radius:50%}#screen-runner{justify-content:flex-start;padding-top:16px;gap:10px}.runner-header{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:420px}.runner-title{font-family:Cinzel,serif;font-size:.75rem;letter-spacing:2px;color:var(--teal)}#runner-canvas{display:block;border:1.5px solid var(--border);border-radius:10px;box-shadow:0 0 20px #4ecdc41a}.safety-bar{width:100%;max-width:420px}.safety-label{font-family:Cinzel,serif;font-size:.62rem;letter-spacing:1.5px;color:var(--muted);margin-bottom:5px;display:flex;justify-content:space-between}.safety-bg{width:100%;height:6px;background:var(--surface);border-radius:99px;border:1px solid var(--border);overflow:hidden}.safety-fill-bar{height:100%;background:var(--teal);border-radius:99px;transition:width .4s ease,background .4s ease}.controls{display:grid;grid-template-areas:".. up .." "left .. right" ".. down ..";grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%;max-width:200px}.ctrl-btn{aspect-ratio:1;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent;user-select:none;backdrop-filter:var(--glass)}.ctrl-btn:hover{background:var(--surface-bright);border-color:var(--gold);transform:translateY(-2px)}.ctrl-btn:active{background:var(--purple);border-color:var(--gold);transform:scale(.9) translateY(0);box-shadow:0 0 20px var(--purple-glow)}#ctrl-up{grid-area:up}#ctrl-left{grid-area:left}#ctrl-right{grid-area:right}#ctrl-down{grid-area:down}#screen-result{justify-content:center;text-align:center}.result-seal{font-size:4rem;animation:float 2s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.result-title{font-family:Cinzel,serif;font-size:1.8rem;letter-spacing:2px;line-height:1.2}.result-sub{font-style:italic;color:var(--muted);font-size:1rem;max-width:280px;line-height:1.5}.result-scores{font-family:Cinzel,serif;font-size:.9rem;letter-spacing:1px;color:var(--gold)}.result-round{font-size:.75rem;color:var(--muted);letter-spacing:1px}#screen-gameover{justify-content:center;text-align:center;gap:16px}.gameover-title{font-family:Cinzel,serif;font-size:clamp(1.4rem,6vw,2.2rem);letter-spacing:2px;line-height:1.2;max-width:320px}.gameover-scores{font-family:Cinzel,serif;font-size:1.1rem;color:var(--gold);letter-spacing:1px}.gameover-flavor{font-style:italic;color:var(--muted);font-size:1rem;max-width:280px;line-height:1.5}#screen-lobby-host,#screen-lobby-guest{justify-content:center;text-align:center}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95);filter:blur(10px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}.screen.active>*{animation:slideUp .6s cubic-bezier(.2,.8,.2,1) both}.screen.active>*:nth-child(1){animation-delay:.05s}.screen.active>*:nth-child(2){animation-delay:.1s}.screen.active>*:nth-child(3){animation-delay:.15s}.screen.active>*:nth-child(4){animation-delay:.2s}.screen.active>*:nth-child(5){animation-delay:.25s}.screen.active>*:nth-child(6){animation-delay:.3s}@keyframes floating{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(5deg)}}.result-seal,#screen-title>div:first-child,#screen-lobby-guest>div:first-child,#screen-gameover>div:first-child{animation:floating 3s ease-in-out infinite!important}@media (max-width: 768px){.back{position:absolute;top:12px;left:12px;padding:6px 12px;font-size:.8rem;border-radius:8px}.screen{padding-top:75px!important}}.disconnect-banner{position:fixed;top:16px;left:50%;transform:translate(-50%);background:#f43f5e;color:#fff;padding:12px 24px;border-radius:99px;font-weight:700;font-size:.9rem;z-index:9999;box-shadow:0 4px 12px #f43f5e4d;display:none;align-items:center;gap:8px}.disconnect-spinner{border:2.5px solid rgba(255,255,255,.3);border-top:2.5px solid white;border-radius:50%;width:16px;height:16px;display:inline-block;animation:disconnect-spin 1s linear infinite}@keyframes disconnect-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[data-joining=true] .screen{display:none!important}[data-joining=true] #screen-loading{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100vh}.joining-spinner{border:3.5px solid rgba(244,99,30,.15);border-top:3.5px solid var(--orange, #f4631e);border-radius:50%;width:44px;height:44px;animation:joining-spin .8s linear infinite;margin-bottom:20px}@keyframes joining-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}