:root{--color-bg-dark: #0d0714;--color-bg-card: rgba(26, 14, 43, .8);--color-bg-card-hover: rgba(38, 20, 64, .9);--color-border: rgba(168, 85, 247, .25);--color-border-glow: rgba(255, 117, 24, .5);--color-orange: #ff7518;--color-orange-glow: #ff9500;--color-purple: #a855f7;--color-purple-deep: #7e22ce;--color-green: #39ff14;--color-green-glow: #10b981;--color-yellow: #fbbf24;--color-text-main: #f8fafc;--color-text-muted: #cbd5e1;--color-text-dim: #94a3b8;--font-spooky: "Creepster", cursive;--font-main: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--shadow-glow-orange: 0 0 25px rgba(255, 117, 24, .35);--shadow-glow-purple: 0 0 25px rgba(168, 85, 247, .35);--shadow-glow-green: 0 0 25px rgba(57, 255, 20, .35);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 9999px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;min-height:100vh;min-height:100dvh;overflow-x:hidden}body{font-family:var(--font-main);background-color:var(--color-bg-dark);color:var(--color-text-main);position:relative;background-image:radial-gradient(circle at 15% 15%,rgba(168,85,247,.16) 0%,transparent 40%),radial-gradient(circle at 85% 25%,rgba(255,117,24,.14) 0%,transparent 45%),radial-gradient(circle at 50% 80%,rgba(57,255,20,.08) 0%,transparent 50%),linear-gradient(180deg,#0d0714,#160a26,#0d0714);background-attachment:fixed}.ambient-particles{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.particle{position:absolute;border-radius:50%;opacity:.35;animation:floatUp 14s infinite linear}@keyframes floatUp{0%{transform:translateY(105vh) scale(.6);opacity:0}15%{opacity:.4}85%{opacity:.4}to{transform:translateY(-50px) scale(1.1);opacity:0}}.app-container{position:relative;z-index:1;max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:1rem 1rem max(1.5rem,env(safe-area-inset-bottom))}.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100dvh - 3rem);text-align:center;gap:2.75rem;padding:1.5rem .5rem}.welcome-title{font-size:clamp(2.6rem,9vw,4.4rem);line-height:1.05;letter-spacing:2px;background:linear-gradient(135deg,#ff9500,#f50,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 25px rgba(255,117,24,.45));max-width:480px}.welcome-btn{max-width:320px;width:100%;padding:1.15rem 2rem;font-size:1.15rem;box-shadow:0 4px 30px #ff75188c,0 0 20px #a855f759}.spooky-title{font-family:var(--font-spooky);letter-spacing:2px;text-shadow:0 0 16px rgba(255,117,24,.6)}.gradient-text-orange{background:linear-gradient(135deg,#ff9500,#f50);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.card-glass{background:var(--color-bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.35rem;box-shadow:0 10px 30px #00000073;transition:all .25s ease;width:100%}.card-glass:hover{border-color:#a855f773}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;width:100%;min-height:48px;padding:.95rem 1.5rem;font-family:var(--font-main);font-weight:700;font-size:1.05rem;color:#0d0714;background:linear-gradient(135deg,#ff9500,#f50);border:none;border-radius:var(--radius-full);cursor:pointer;box-shadow:0 4px 20px #ff751873;transition:all .2s cubic-bezier(.4,0,.2,1);text-decoration:none}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 26px #ff7518a6;background:linear-gradient(135deg,#ffa726,#ff6d00)}.btn-primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 10px #ff751866}.btn-primary:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:42px;padding:.65rem 1.15rem;font-family:var(--font-main);font-weight:600;font-size:.9rem;color:var(--color-text-main);background:#a855f726;border:1px solid rgba(168,85,247,.35);border-radius:var(--radius-full);cursor:pointer;transition:all .2s ease;text-decoration:none}.btn-secondary:hover:not(:disabled){background:#a855f747;border-color:#a855f799;transform:translateY(-1px)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:38px;padding:.5rem .9rem;font-size:.85rem;font-weight:500;color:var(--color-text-dim);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:color .2s}.btn-ghost:hover{color:var(--color-text-main)}.character-grid{display:flex;flex-direction:column;gap:.75rem}.character-card{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;background:#1a0e2ba6;border:2px solid rgba(168,85,247,.2);border-radius:var(--radius-md);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-align:left}.character-card:hover{background:#261440d9;border-color:#a855f773}.character-card.selected{background:#2d144be6;border-color:var(--color-orange);box-shadow:0 0 18px #ff75184d}.character-avatar{width:48px;height:48px;border-radius:var(--radius-md);background:#0d0714d9;border:1px solid rgba(168,85,247,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .2s}.character-card.selected .character-avatar{border-color:var(--color-orange);box-shadow:0 0 10px #ff751859}.character-badge{display:inline-block;padding:.15rem .5rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-radius:var(--radius-sm);background:#ff751833;color:var(--color-orange);margin-bottom:.25rem}@keyframes pulseGlow{0%,to{box-shadow:0 0 15px #ff75184d}50%{box-shadow:0 0 35px #ff7518a6}}.pulse-glow{animation:pulseGlow 2.5s infinite ease-in-out}@keyframes bubbleDrift{0%{transform:translateY(0) scale(1);opacity:.8}50%{transform:translateY(-15px) scale(1.15);opacity:1}to{transform:translateY(-30px) scale(.9);opacity:0}}.bubble-anim{animation:bubbleDrift 1.8s infinite ease-out}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}