:root{--bg: #0d0a1a;--bg2: #12102a;--accent: #c8a96e;--accent2: #7eb8a0;--accent-glow: rgba(200, 169, 110, .35);--accent2-glow: rgba(126, 184, 160, .3);--text: #e8ddd0;--text-dim: #9a8f88;--timer-color: #f0e6d0;--firefly: #aaff88;--star: #fff8e1;--fog-color: rgba(200, 210, 240, .05);--cloak: #2a2060;--cloak2: #1a1545;--orb: #ffd88a;--progress-from: #7eb8a0;--progress-to: #c8a96e;--card-bg: rgba(13, 10, 26, .82);--card-border: rgba(200, 169, 110, .22);--radius: 1rem;--transition: .5s ease}body.time--morning{--bg: #1a120f;--bg2: #221810;--fog-color: rgba(255, 220, 160, .06);--accent: #e0b070;--accent2: #a0c8a0}body.time--afternoon{--bg: #0f1520;--bg2: #12192a;--fog-color: rgba(180, 200, 240, .06)}body.time--night{--bg: #07051a;--bg2: #0d0a28;--fog-color: rgba(140, 160, 220, .07);--accent: #b89adc;--accent2: #7eb8a0}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Georgia,Palatino Linotype,serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#app{width:100%;height:100%}.scene{position:relative;width:100%;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,var(--bg2) 0%,var(--bg) 75%);transition:background var(--transition)}.fog{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.fog-1{background:radial-gradient(ellipse 80% 40% at 30% 60%,var(--fog-color),transparent 70%);animation:fogDrift1 18s ease-in-out infinite alternate}.fog-2{background:radial-gradient(ellipse 70% 35% at 70% 40%,var(--fog-color),transparent 70%);animation:fogDrift2 24s ease-in-out infinite alternate}@keyframes fogDrift1{0%{transform:translate(-8%) translateY(4%);opacity:.6}to{transform:translate(8%) translateY(-4%);opacity:1}}@keyframes fogDrift2{0%{transform:translate(6%) translateY(-3%);opacity:.8}to{transform:translate(-6%) translateY(3%);opacity:.4}}.stars{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.star{position:absolute;border-radius:50%;background:var(--star);animation:starTwinkle var(--dur, 3s) ease-in-out infinite alternate;opacity:0}@keyframes starTwinkle{0%{opacity:0;transform:scale(.8)}to{opacity:var(--max-opacity, .8);transform:scale(1.1)}}.empty-scene{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:1.5rem;animation:fadeIn 1.2s ease}.empty-echo{font-size:5rem;color:var(--text-dim);opacity:.3;animation:echoFloat 6s ease-in-out infinite;letter-spacing:.5em}@keyframes echoFloat{0%,to{transform:translateY(0) scale(1);opacity:.25}50%{transform:translateY(-12px) scale(1.05);opacity:.45}}.empty-message{font-size:1.15rem;color:var(--text-dim);text-align:center;padding:0 2rem;font-style:italic;letter-spacing:.03em;opacity:.7}.active-scene{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:420px;padding:1rem 1.5rem 1.5rem;animation:fadeIn .8s ease}.character-name{font-size:.85rem;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);opacity:.8;margin-bottom:-.5rem}.character-container{position:relative;display:flex;align-items:flex-end;justify-content:center;height:120px;animation:characterAppear 1s cubic-bezier(.22,1,.36,1) both}@keyframes characterAppear{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.character-svg{animation:breathe 4s ease-in-out infinite;filter:drop-shadow(0 4px 16px rgba(200,169,110,.15));cursor:pointer;transition:filter .3s}.character-svg:hover,.character-svg:active{filter:drop-shadow(0 4px 24px rgba(200,169,110,.5))}@keyframes breathe{0%,to{transform:scaleY(1) translateY(0)}50%{transform:scaleY(.97) translateY(2px)}}.orb{position:absolute;right:-8px;bottom:28px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#ffe9a0 30%,#ffb830);box-shadow:0 0 12px 6px #ffd2508c;animation:orbFloat 3s ease-in-out infinite}@keyframes orbFloat{0%,to{transform:translateY(0) scale(1);box-shadow:0 0 12px 6px #ffd2508c}50%{transform:translateY(-6px) scale(1.08);box-shadow:0 0 18px 10px #ffd25059}}.timer-display{font-size:clamp(3.5rem,18vw,5rem);font-family:Courier New,Lucida Console,monospace;font-variant-numeric:tabular-nums;color:var(--timer-color);letter-spacing:.05em;line-height:1;text-shadow:0 0 32px var(--accent-glow),0 0 8px rgba(255,255,255,.08);transition:color .5s,text-shadow .5s}.timer-display.urgent{color:#ffb87a;animation:timerPulse 1s ease-in-out infinite;text-shadow:0 0 32px rgba(255,140,60,.6),0 0 8px rgba(255,255,255,.1)}@keyframes timerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.progress-bar-container{width:100%;height:5px;background:#ffffff0f;border-radius:99px;overflow:hidden}.progress-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--progress-from),var(--progress-to));width:0%;transition:width 1s linear;box-shadow:0 0 8px var(--accent-glow)}.hourglass-container{cursor:pointer;transition:transform .3s;filter:drop-shadow(0 2px 10px rgba(200,169,110,.2))}.hourglass-container:hover,.hourglass-container:active{transform:scale(1.12);filter:drop-shadow(0 2px 20px rgba(200,169,110,.5))}.message-box{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:.85rem 1.2rem;text-align:center;width:100%;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-height:3.5rem;display:flex;align-items:center;justify-content:center}.message-text{font-size:.95rem;color:var(--text);line-height:1.5;font-style:italic;letter-spacing:.02em;transition:opacity .4s ease}.message-text.fade-out{opacity:0}.message-text.fade-in{opacity:1}.btn-encourage{background:transparent;border:1px solid var(--card-border);border-radius:99px;color:var(--accent);padding:.55rem 1.4rem;font-family:inherit;font-size:.85rem;letter-spacing:.06em;cursor:pointer;transition:background .25s,box-shadow .25s,transform .15s;-webkit-tap-highlight-color:transparent}.btn-encourage:hover{background:#c8a96e14;box-shadow:0 0 12px var(--accent-glow)}.btn-encourage:focus-visible,.bell-btn:focus-visible,.fs-btn:focus-visible,.character-svg:focus-visible,.hourglass-container:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.btn-encourage:active{transform:scale(.95)}.hint-text{font-size:.72rem;color:var(--text-dim);text-align:center;opacity:.5;letter-spacing:.03em}.bell-btn{background:none;border:none;cursor:pointer;font-size:1.6rem;opacity:.45;transition:opacity .2s,transform .2s;-webkit-tap-highlight-color:transparent;padding:.25rem}.bell-btn:hover{opacity:.9}.bell-btn:active{transform:scale(.9) rotate(-15deg)}.bell-btn.sound-on{opacity:.9}.action-row{display:flex;align-items:center;gap:1rem}.complete-scene{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:2rem 1.5rem;animation:fadeIn 1s ease;max-width:420px;text-align:center}.celebration{font-size:4rem;animation:celebrationSpin 3s linear infinite,celebrationGlow 2s ease-in-out infinite alternate;color:var(--accent)}@keyframes celebrationSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.15)}to{transform:rotate(360deg) scale(1)}}@keyframes celebrationGlow{0%{text-shadow:0 0 20px var(--accent-glow)}to{text-shadow:0 0 50px rgba(200,169,110,.8),0 0 80px rgba(200,169,110,.3)}}.complete-stars{display:flex;gap:.5rem;font-size:1.4rem;color:var(--accent);animation:starsAppear .8s ease both}@keyframes starsAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.complete-message{font-size:1.35rem;color:var(--text);font-style:italic;letter-spacing:.03em;line-height:1.4}.restart-hint{font-size:.82rem;color:var(--text-dim);opacity:.65;letter-spacing:.02em;line-height:1.6;border:1px solid var(--card-border);border-radius:var(--radius);padding:.7rem 1rem;background:var(--card-bg)}.fireflies{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.firefly{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--firefly);box-shadow:0 0 8px 3px #af89;animation:fireflyFloat var(--dur, 4s) ease-in-out infinite alternate;opacity:0}@keyframes fireflyFloat{0%{opacity:0;transform:translate(0) scale(.7)}20%{opacity:.9}80%{opacity:.7}to{opacity:0;transform:translate(var(--tx, 20px),var(--ty, -20px)) scale(1.2)}}.fs-btn{background:none;border:none;cursor:pointer;font-size:1.2rem;opacity:.45;transition:opacity .2s,transform .2s;-webkit-tap-highlight-color:transparent;padding:.25rem;color:var(--accent);line-height:1}.fs-btn:hover{opacity:.9}.fs-btn:active{transform:scale(.9)}.fs-btn--unavailable{opacity:.15;cursor:default}.time-slot-badge{position:fixed;top:1rem;left:1rem;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);opacity:.45;z-index:100}.loading-scene{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:1.2rem}.loading-spinner{width:36px;height:36px;border:2px solid rgba(200,169,110,.2);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:.85rem;color:var(--text-dim);letter-spacing:.08em;opacity:.6}.error-message{background:var(--card-bg);border:1px solid rgba(200,100,100,.3);border-radius:var(--radius);padding:1rem 1.4rem;font-size:.9rem;color:#d4a0a0;text-align:center;max-width:320px;z-index:10;position:relative;line-height:1.5}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (min-width: 600px){.active-scene,.complete-scene{max-width:480px;padding:2rem 2.5rem}.timer-display{font-size:5rem}.character-container{height:140px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}