/* ═══════════════════════════════════════════════════════════
   OMERTÀ — MAFIA PARTY GAME — styles.css
   Design: Upscale Noir / Speakeasy / Cinematic Dark
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap');

:root {
  --ink: #080808; --ink-2: #0e0e0e; --ink-3: #161616;
  --ink-4: #1e1e1e; --ink-5: #2a2a2a; --smoke: #3a3a3a;
  --ash: #5a5a5a; --fog: #8a8a8a; --mist: #b0b0b0;
  --ghost: #d0d0d0; --white: #f0ece4;
  --gold: #c9a84c; --gold-dim: #8a6d28; --gold-glow: rgba(201,168,76,0.15);
  --crimson: #8b1a1a; --crimson-bright: #c0392b; --crimson-glow: rgba(192,57,43,0.2);
  --detective: #2c5f8a; --detective-bright: #4a9fd4;
  --doctor: #1a5c3a; --doctor-bright: #2ecc71;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Cormorant Garamond', serif;
  --font-mono: 'DM Mono', monospace;
  --radius: 4px; --radius-lg: 8px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.6);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.8);
  --shadow-lg: 0 16px 64px rgba(0,0,0,0.9);
  --glow-gold: 0 0 20px rgba(201,168,76,0.3),0 0 60px rgba(201,168,76,0.1);
  --glow-crimson: 0 0 20px rgba(192,57,43,0.4),0 0 60px rgba(192,57,43,0.15);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;min-height:100dvh;background:var(--ink);color:var(--white);font-family:var(--font-body);font-size:16px;line-height:1.5;overflow:hidden;overscroll-behavior:none}
body::before{content:'';position:fixed;inset:0;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;opacity:0.4}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(201,168,76,0.04) 0%,transparent 70%),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(139,26,26,0.06) 0%,transparent 60%)}
#app{width:100%;height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity var(--transition-slow),transform var(--transition-slow);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.screen.active{opacity:1;pointer-events:all;transform:translateY(0)}
h1,h2,h3{font-family:var(--font-display);letter-spacing:0.05em;font-weight:400}
h1{font-size:clamp(2.5rem,8vw,5rem);line-height:0.9}
h2{font-size:clamp(1.8rem,5vw,3rem);line-height:1}
h3{font-size:clamp(1.2rem,3.5vw,1.8rem)}
.serif{font-family:var(--font-body)}.mono{font-family:var(--font-mono)}
.gold{color:var(--gold)}.muted{color:var(--fog)}.crimson{color:var(--crimson-bright)}
.ornament{display:flex;align-items:center;gap:12px;color:var(--gold-dim);font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase}
.ornament::before,.ornament::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim))}
.ornament::after{background:linear-gradient(90deg,var(--gold-dim),transparent)}
.divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--smoke),transparent);margin:16px 0}
.divider-gold{background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border:none;border-radius:var(--radius);font-family:var(--font-display);font-size:1.1rem;letter-spacing:0.08em;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;min-height:52px}
.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.08);opacity:0;transition:opacity var(--transition)}
.btn:active::before{opacity:1}.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--gold);color:var(--ink);box-shadow:0 4px 20px rgba(201,168,76,0.3)}
.btn-primary:hover{background:#d4b060;box-shadow:var(--glow-gold)}
.btn-ghost{background:transparent;color:var(--white);border:1px solid var(--smoke)}
.btn-ghost:hover{border-color:var(--gold-dim);color:var(--gold)}
.btn-danger{background:var(--crimson);color:var(--white);border:1px solid var(--crimson-bright)}
.btn-danger:hover{background:var(--crimson-bright);box-shadow:var(--glow-crimson)}
.btn-full{width:100%}.btn-sm{padding:10px 18px;font-size:0.9rem;min-height:40px}
.btn-lg{padding:18px 36px;font-size:1.3rem;min-height:60px}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.input{width:100%;padding:14px 16px;background:var(--ink-3);border:1px solid var(--smoke);border-radius:var(--radius);color:var(--white);font-family:var(--font-body);font-size:1.1rem;transition:border-color var(--transition);-webkit-appearance:none;outline:none}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.input::placeholder{color:var(--ash)}
.input-code{font-family:var(--font-mono);font-size:2rem;text-align:center;letter-spacing:0.3em;text-transform:uppercase}
.card{background:var(--ink-2);border:1px solid var(--ink-5);border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden}
.card-gold{border-color:var(--gold-dim);box-shadow:var(--glow-gold)}
.card-crimson{border-color:var(--crimson);box-shadow:var(--glow-crimson)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:100px;font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.05em}
.badge-gold{background:var(--gold-glow);color:var(--gold);border:1px solid var(--gold-dim)}
.badge-crimson{background:var(--crimson-glow);color:var(--crimson-bright);border:1px solid var(--crimson)}
.badge-muted{background:rgba(255,255,255,0.05);color:var(--fog);border:1px solid var(--smoke)}
.badge-green{background:rgba(46,204,113,0.1);color:var(--doctor-bright);border:1px solid var(--doctor-bright)}
.badge-blue{background:rgba(74,159,212,0.1);color:var(--detective-bright);border:1px solid var(--detective)}
.player-chip{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--ink-3);border:1px solid var(--ink-5);border-radius:var(--radius);transition:var(--transition)}
.player-chip:hover{border-color:var(--smoke)}
.player-chip .avatar{width:36px;height:36px;border-radius:50%;background:var(--ink-5);border:1px solid var(--smoke);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1rem;color:var(--gold);flex-shrink:0}
.player-chip .name{font-weight:500;font-size:1rem}
.player-chip .meta{font-size:0.75rem;color:var(--fog);font-family:var(--font-mono)}
.player-chip.dead{opacity:0.4}.player-chip.you{border-color:var(--gold-dim)}
.timer-ring-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.timer-ring-wrap svg{transform:rotate(-90deg)}
.timer-ring-bg{fill:none;stroke:var(--ink-5)}
.timer-ring-prog{fill:none;stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke 0.5s}
.timer-ring-prog.urgent{stroke:var(--crimson-bright)}
.timer-display{position:absolute;font-family:var(--font-display);font-size:2.5rem;color:var(--white)}
.timer-display.urgent{color:var(--crimson-bright)}
.phase-banner{background:var(--ink-2);border-bottom:1px solid var(--ink-5);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.phase-label{font-family:var(--font-display);font-size:1.4rem;letter-spacing:0.08em}
.night-overlay{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;opacity:0;pointer-events:none;transition:opacity 1s ease}
.night-overlay.visible{opacity:1;pointer-events:all}
.night-stars{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 30%,rgba(201,168,76,0.04) 0%,transparent 40%),radial-gradient(ellipse at 80% 70%,rgba(139,26,26,0.06) 0%,transparent 40%)}
.role-card{width:100%;max-width:340px;background:var(--ink-2);border-radius:12px;border:1px solid var(--gold-dim);box-shadow:var(--shadow-lg),var(--glow-gold);overflow:hidden;position:relative}
.role-card-top{padding:32px 24px 24px;text-align:center;position:relative}
.role-icon{font-size:3rem;margin-bottom:8px;display:block}
.role-name{font-family:var(--font-display);font-size:2.5rem;letter-spacing:0.1em;line-height:1}
.role-faction{font-family:var(--font-mono);font-size:0.75rem;color:var(--gold);letter-spacing:0.2em;text-transform:uppercase;margin-top:6px}
.role-desc{padding:16px 24px 24px;font-size:1rem;color:var(--mist);line-height:1.6;border-top:1px solid var(--ink-5);font-style:italic}
.role-mafia .role-card-top{background:linear-gradient(160deg,var(--ink-2),rgba(139,26,26,0.15))}
.role-mafia .role-name{color:var(--crimson-bright)}
.role-mafia{border-color:var(--crimson)!important;box-shadow:var(--shadow-lg),var(--glow-crimson)!important}
.role-detective .role-card-top{background:linear-gradient(160deg,var(--ink-2),rgba(44,95,138,0.15))}
.role-detective .role-name{color:var(--detective-bright)}
.role-detective{border-color:var(--detective)!important}
.role-doctor .role-card-top{background:linear-gradient(160deg,var(--ink-2),rgba(26,92,58,0.15))}
.role-doctor .role-name{color:var(--doctor-bright)}
.role-doctor{border-color:var(--doctor-bright)!important}
.role-villager .role-name{color:var(--gold)}
.hold-btn{width:100%;max-width:340px;padding:20px;border-radius:var(--radius-lg);background:var(--ink-3);border:1px solid var(--smoke);color:var(--fog);font-family:var(--font-display);font-size:1.2rem;letter-spacing:0.08em;cursor:pointer;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;transition:border-color 0.3s,color 0.3s}
.hold-btn-fill{position:absolute;inset:0;left:0;background:var(--gold-glow);transform:scaleX(0);transform-origin:left;transition:transform 0.05s linear}
.target-list{display:flex;flex-direction:column;gap:8px}
.target-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--ink-3);border:1px solid var(--ink-5);border-radius:var(--radius);cursor:pointer;transition:var(--transition);-webkit-tap-highlight-color:transparent;user-select:none}
.target-item:hover{border-color:var(--smoke);background:var(--ink-4)}
.target-item.selected{border-color:var(--gold);background:var(--gold-glow)}
.target-item.selected .target-name{color:var(--gold)}
.target-item .target-name{flex:1;font-size:1.05rem}
.target-item .target-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--smoke);display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}
.target-item.selected .target-check{border-color:var(--gold);background:var(--gold);color:var(--ink)}
.vote-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--ink-3);border:1px solid var(--ink-5);border-radius:var(--radius);cursor:pointer;transition:var(--transition)}
.vote-item.selected{border-color:var(--crimson-bright);background:var(--crimson-glow)}
.vote-item.selected .target-name{color:var(--crimson-bright)}
.vote-item.selected .target-check{border-color:var(--crimson-bright);background:var(--crimson-bright);color:var(--white)}
.vote-item:hover{border-color:var(--ash)}
.narration-box{background:var(--ink-2);border:1px solid var(--gold-dim);border-radius:var(--radius-lg);padding:20px 24px;text-align:center;font-style:italic;font-size:1.1rem;color:var(--mist);line-height:1.7;position:relative}
.narration-box::before{content:'\201C';position:absolute;top:-12px;left:16px;font-size:3rem;color:var(--gold-dim);font-family:var(--font-body);line-height:1}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--ink-5)}
.setting-label{font-size:1rem;color:var(--white)}.setting-desc{font-size:0.8rem;color:var(--fog);margin-top:2px}
.toggle{position:relative;width:46px;height:26px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{position:absolute;cursor:pointer;inset:0;background:var(--smoke);border-radius:26px;transition:var(--transition)}
.toggle-track::after{content:'';position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:var(--ghost);border-radius:50%;transition:var(--transition)}
.toggle input:checked+.toggle-track{background:var(--gold)}
.toggle input:checked+.toggle-track::after{transform:translateX(20px);background:var(--ink)}
.stepper{display:flex;align-items:center;gap:12px}
.stepper-btn{width:32px;height:32px;border-radius:50%;background:var(--ink-4);border:1px solid var(--smoke);color:var(--white);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}
.stepper-btn:hover{border-color:var(--gold);color:var(--gold)}
.stepper-val{font-family:var(--font-mono);font-size:1.1rem;min-width:30px;text-align:center}
.emergency-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.95);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity 0.4s}
.emergency-overlay.visible{opacity:1;pointer-events:all}
.emergency-box{width:100%;max-width:400px;background:var(--ink-2);border:1px solid var(--crimson-bright);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--glow-crimson)}
.emergency-title{font-family:var(--font-display);font-size:1.8rem;color:var(--crimson-bright);letter-spacing:0.08em;margin-bottom:12px}
.qr-wrap{background:white;padding:16px;border-radius:var(--radius-lg);display:inline-flex;align-items:center;justify-content:center}
#toast-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:90%;max-width:360px}
.toast{background:var(--ink-3);border:1px solid var(--smoke);border-radius:var(--radius-lg);padding:12px 20px;font-size:0.9rem;text-align:center;color:var(--ghost);box-shadow:var(--shadow-md);animation:toastIn 0.3s ease forwards;width:100%}
.toast.success{border-color:var(--doctor-bright);color:var(--doctor-bright)}
.toast.error{border-color:var(--crimson-bright);color:var(--crimson-bright)}
.toast.gold{border-color:var(--gold);color:var(--gold)}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--smoke);border-radius:2px}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 20px rgba(201,168,76,0.2)}50%{box-shadow:0 0 40px rgba(201,168,76,0.5)}}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-8px)}}
.anim-fadeup{animation:fadeUp 0.5s ease forwards}
.anim-fadein{animation:fadeIn 0.6s ease forwards}
.anim-pulse{animation:pulse 2s ease infinite}
.anim-glow{animation:glow-pulse 3s ease infinite}
.stagger>*{opacity:0;animation:fadeUp 0.4s ease forwards}
.stagger>*:nth-child(1){animation-delay:0.05s}.stagger>*:nth-child(2){animation-delay:0.1s}
.stagger>*:nth-child(3){animation-delay:0.15s}.stagger>*:nth-child(4){animation-delay:0.2s}
.stagger>*:nth-child(5){animation-delay:0.25s}.stagger>*:nth-child(6){animation-delay:0.3s}
.stagger>*:nth-child(7){animation-delay:0.35s}.stagger>*:nth-child(8){animation-delay:0.4s}
.p-20{padding:20px}.p-24{padding:24px}.px-20{padding-left:20px;padding-right:20px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-center{justify-content:center}
.justify-between{justify-content:space-between}.text-center{text-align:center}
.text-sm{font-size:0.85rem}.text-xs{font-size:0.75rem}.opacity-50{opacity:0.5}
.w-full{width:100%}.flex-1{flex:1}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#screen-landing{align-items:center;justify-content:center;padding:40px 24px;gap:0}
.landing-logo{text-align:center;margin-bottom:48px}
.landing-title{font-family:var(--font-display);font-size:clamp(4rem,15vw,7rem);letter-spacing:0.15em;line-height:0.85;color:var(--white)}
.landing-title span{color:var(--gold)}
.landing-subtitle{font-family:var(--font-body);font-style:italic;font-size:1rem;color:var(--fog);margin-top:12px;letter-spacing:0.05em}
.landing-rule{width:60px;height:1px;background:var(--gold-dim);margin:16px auto}
.landing-actions{width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px}
.form-screen{padding:60px 24px 40px;min-height:100dvh;display:flex;flex-direction:column}
.back-btn{display:inline-flex;align-items:center;gap:6px;color:var(--fog);font-size:0.85rem;font-family:var(--font-mono);letter-spacing:0.05em;cursor:pointer;margin-bottom:32px;transition:color var(--transition);background:none;border:none;padding:0}
.back-btn:hover{color:var(--gold)}.form-title{margin-bottom:32px}
#screen-lobby{padding-bottom:120px}.lobby-header{padding:20px 20px 0}
.lobby-code{font-family:var(--font-mono);font-size:2.5rem;color:var(--gold);letter-spacing:0.2em;text-align:center}
.lobby-player-list{padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.host-panel-btn{position:fixed;bottom:24px;right:20px;z-index:50;width:52px;height:52px;border-radius:50%;background:var(--ink-2);border:1px solid var(--gold-dim);color:var(--gold);font-size:1.4rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);transition:var(--transition)}
.host-panel-btn:hover{background:var(--gold-glow)}
.host-panel-drawer{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--ink-2);border-top:1px solid var(--gold-dim);border-radius:16px 16px 0 0;padding:20px 20px 40px;transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);max-height:70dvh;overflow-y:auto}
.host-panel-drawer.open{transform:translateY(0)}
.drawer-handle{width:40px;height:4px;border-radius:2px;background:var(--smoke);margin:0 auto 20px}
.game-screen{padding:0 0 100px}.game-content{padding:20px}
.result-card{background:var(--ink-2);border:1px solid var(--detective);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:0 0 20px rgba(74,159,212,0.15)}
.result-label{font-family:var(--font-mono);font-size:0.75rem;color:var(--detective-bright);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:6px}
.result-verdict{font-size:1.1rem;color:var(--white);line-height:1.5;font-style:italic}
#screen-win{align-items:center;justify-content:center;padding:40px 24px}
.win-faction{font-family:var(--font-display);font-size:clamp(3rem,12vw,6rem);letter-spacing:0.1em;text-align:center;margin-bottom:8px}
.win-line{font-size:1.1rem;color:var(--mist);text-align:center;font-style:italic;max-width:300px}
.role-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:3px;font-size:0.8rem;font-weight:500}
.role-pill-mafia{background:rgba(139,26,26,0.3);color:var(--crimson-bright)}
.role-pill-town{background:rgba(201,168,76,0.15);color:var(--gold)}
.role-pill-detective{background:rgba(44,95,138,0.3);color:var(--detective-bright)}
.role-pill-doctor{background:rgba(26,92,58,0.3);color:var(--doctor-bright)}
.mafia-comms{background:rgba(139,26,26,0.08);border:1px solid var(--crimson);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px}
.mafia-comms-title{font-family:var(--font-mono);font-size:0.7rem;color:var(--crimson-bright);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:8px}
.mafia-member{font-size:0.9rem;color:var(--crimson-bright);opacity:0.8}
.recap-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--ink-5)}
.recap-night-label{font-family:var(--font-display);font-size:1.4rem;color:var(--gold);letter-spacing:0.05em;margin:20px 0 8px}
.recap-event{font-size:0.95rem;color:var(--mist);flex:1;line-height:1.5}
.active-preset{border-color:var(--gold-dim)!important;box-shadow:var(--glow-gold)!important}
.preset-btn{background:var(--ink-3);border:1px solid var(--smoke);cursor:pointer;text-align:left;transition:border-color 0.2s;border-radius:var(--radius-lg);padding:16px}
.connection-banner{position:fixed;top:0;left:0;right:0;z-index:500;padding:8px 16px;text-align:center;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.05em;transform:translateY(-100%);transition:transform 0.3s}
.connection-banner.offline{background:var(--crimson);color:var(--white);transform:translateY(0)}
.connection-banner.reconnecting{background:var(--gold-dim);color:var(--ink);transform:translateY(0)}
.spinner{width:20px;height:20px;border:2px solid var(--smoke);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-screen{position:fixed;inset:0;z-index:400;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;transition:opacity 0.5s}
.loading-screen.hidden{opacity:0;pointer-events:none}