/* Immersive view copies rendered time; it never creates another timing loop. */
body.forest-immersive-open{overflow:hidden!important}
#forest-immersive{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;background:#000;color:#f6f4ee;font-family:inherit;isolation:isolate;overflow:hidden;width:100%;height:100%;min-height:0}
#forest-immersive:fullscreen{width:100vw;height:100dvh}
#forest-immersive .fi-backgrounds{position:absolute;inset:0;z-index:-1;pointer-events:none}
#forest-immersive .fi-background{position:absolute;inset:0;background:#000 center/cover no-repeat;opacity:0;transition:opacity .9s cubic-bezier(.22,.61,.36,1);overflow:hidden;will-change:opacity}
#forest-immersive .fi-background.fi-visible{opacity:1}
#forest-immersive .fi-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0005,#06101920 35%,#0004 70%,#0008)}
#forest-immersive .fi-clock-card{padding:clamp(18px,5vw,64px) clamp(22px,6vw,86px);border:1px solid transparent;border-radius:32px;background:transparent;transition:background .7s,border-color .7s,box-shadow .7s;max-width:calc(100% - 24px);box-sizing:border-box}
#forest-immersive:not([data-scene=black]) .fi-clock-card{background:#15232a45;border-color:#fff3;backdrop-filter:blur(18px) saturate(110%);-webkit-backdrop-filter:blur(18px) saturate(110%);box-shadow:0 16px 70px #0003,inset 0 1px #ffffff16}
#forest-immersive .fi-time{font-family:Arial,'Helvetica Neue',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:'tnum';font-weight:500;font-size:clamp(60px,15vw,218px);line-height:1.12;letter-spacing:.025em;white-space:nowrap;text-align:center;text-shadow:0 3px 18px #0004;max-width:100%}
#forest-immersive .fi-task{position:absolute;left:50%;bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));transform:translateX(-50%);width:max-content;max-width:calc(100% - 310px);padding:8px 16px;border-radius:20px;background:#0004;backdrop-filter:blur(8px);color:#f4f1e9;font-size:clamp(14px,1.6vw,20px);line-height:1.5;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#forest-immersive .fi-task[hidden]{display:none!important}
#forest-immersive button{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #ffffff40;border-radius:24px;background:#ffffff12;backdrop-filter:blur(12px);color:#f5f4f0;font-size:14px;line-height:22px;font-family:inherit;min-height:42px;padding:8px 17px;cursor:pointer;transition:background .2s,transform .2s}
#forest-immersive button:hover{background:#ffffff26}
#forest-immersive button:focus-visible{outline:2px solid #fff;outline-offset:4px}
#forest-immersive .fi-exit{top:max(18px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right))}
#forest-immersive .fi-switch{bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));right:max(20px,env(safe-area-inset-right));min-width:106px}
#forest-immersive .fi-switch svg{width:19px;height:19px}
#forest-immersive .fi-status{position:absolute;bottom:84px;right:22px;margin:0;max-width:calc(100% - 44px);font-size:12px;color:#fff9;text-align:right}
#forest-immersive .fi-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#forest-immersive .fi-atmosphere i{position:absolute;left:var(--x);top:-15%;pointer-events:none}
#forest-immersive [data-effect=stars] i{left:var(--x);top:var(--y);width:2px;height:2px;background:#e5ecff;border-radius:50%;opacity:.35;animation:fi-twinkle 7s ease-in-out infinite;animation-delay:calc(var(--i)*-.8s)}
@keyframes fi-twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.7;transform:scale(1.2)}}
#forest-immersive [data-effect=rainforest] i{left:var(--x);width:1px;height:clamp(30px,7vh,68px);background:linear-gradient(transparent,#c5e8df80);opacity:.45;animation:fi-rain 2.8s linear infinite;animation-delay:calc(var(--i)*-.19s)}
@keyframes fi-rain{to{transform:translate(-5vw,120vh)}}
#forest-immersive [data-effect=snowcabin]{right:46%;top:6%;bottom:19%;left:0}
#forest-immersive [data-effect=snowcabin] i{left:var(--x);width:3px;height:3px;background:#dce7ef;border-radius:50%;opacity:.4;animation:fi-snow 13s linear infinite;animation-delay:calc(var(--i)*-.8s)}
@keyframes fi-snow{to{transform:translate(5vw,95vh)}}
#forest-immersive [data-effect=fireplace]{left:40%;top:45%;background:radial-gradient(ellipse at 65% 65%,#ff8a2524,transparent 65%);animation:fi-fireglow 6s ease-in-out infinite}
@keyframes fi-fireglow{0%,100%{opacity:.35}45%{opacity:.8}65%{opacity:.55}}
#forest-immersive [data-effect=fireplace] i{left:calc(37% + var(--i)*9%);top:72%;width:2px;height:4px;background:#f5ba54;border-radius:50%;opacity:0;animation:fi-spark 7s ease-out infinite;animation-delay:calc(var(--i)*-1.6s)}
@keyframes fi-spark{10%{opacity:.4}70%,100%{opacity:0;transform:translate(12px,-65px)}}
#forest-immersive .fi-background:not(.fi-visible) i,#forest-immersive .fi-background:not(.fi-visible) .fi-atmosphere,#forest-immersive.fi-paused i,#forest-immersive.fi-paused .fi-atmosphere{animation-play-state:paused!important}
@media(max-width:600px){#forest-immersive .fi-time{font-size:clamp(56px,17vw,98px)}#forest-immersive .fi-clock-card{padding:25px 15px;border-radius:24px}#forest-immersive .fi-task{max-width:calc(100% - 28px);bottom:max(78px,calc(env(safe-area-inset-bottom) + 68px));font-size:15px}#forest-immersive .fi-switch{font-size:13px;min-height:40px}}
@media(max-height:480px){#forest-immersive .fi-clock-card{padding:16px 34px}#forest-immersive .fi-time{font-size:clamp(52px,22vh,120px)}#forest-immersive .fi-task{font-size:14px;bottom:max(14px,env(safe-area-inset-bottom))}#forest-immersive .fi-exit{top:max(10px,env(safe-area-inset-top))}}
@media(prefers-reduced-motion:reduce){#forest-immersive .fi-background,#forest-immersive .fi-clock-card,#forest-immersive button,.forest-room .forest-cabinet-item::after{transition:none}#forest-immersive .fi-atmosphere{display:none}}
/* Test classroom immersion: fixed upper-third clock and locally remembered size. */
#forest-immersive .fi-clock-card{position:absolute;left:50%;top:33.333333%;transform:translate(-50%,-50%)}
#forest-immersive .fi-time{width:max-content;font-size:160px;max-width:none}
#forest-immersive .fi-font-control{position:absolute;z-index:3;left:max(20px,env(safe-area-inset-left));bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));display:flex;align-items:center;gap:10px;box-sizing:border-box;padding:10px 14px;min-height:44px;border:1px solid #ffffff40;border-radius:24px;background:#ffffff12;backdrop-filter:blur(12px);color:#f5f4f0;font-size:13px;line-height:22px}
#forest-immersive .fi-font-control input{appearance:none;-webkit-appearance:none;width:clamp(70px,12vw,160px);height:20px;padding:0;margin:0;background:transparent;cursor:pointer;touch-action:pan-y;outline:none}
#forest-immersive .fi-font-control input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:#ffffff60}
#forest-immersive .fi-font-control input::-moz-range-track{height:4px;border-radius:4px;background:#ffffff60}
#forest-immersive .fi-font-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:#fff;border:1px solid #ffffffa0;box-shadow:0 1px 6px #0005}
#forest-immersive .fi-font-control input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #ffffffa0;box-shadow:0 1px 6px #0005}
#forest-immersive .fi-font-control input:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px}
#forest-immersive .fi-font-control output{min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
#forest-immersive .fi-task{max-width:calc(100% - 680px)}
@media(max-width:900px){#forest-immersive .fi-task{max-width:calc(100% - 28px);bottom:max(82px,calc(env(safe-area-inset-bottom) + 72px))}}
@media(max-width:600px){#forest-immersive .fi-font-control{left:max(12px,env(safe-area-inset-left));padding:9px 10px;gap:7px}#forest-immersive .fi-font-control input{width:70px}}


#forest-immersive-open{position:fixed;right:max(62px,calc(env(safe-area-inset-right) + 58px));top:max(12px,env(safe-area-inset-top));z-index:22;display:grid;place-items:center;flex:none;width:42px;height:42px;padding:10px;border:1px solid #ffffff55;border-radius:50%;background:#243a48bd;color:#f7f6ef;box-shadow:0 3px 14px #19332220;cursor:pointer;backdrop-filter:blur(10px)}
#forest-immersive-open svg{width:21px;height:21px}
#topbar #forest-immersive-open,.dream-pill-row #forest-immersive-open{position:static;display:inline-flex;margin:0;width:36px;height:36px;padding:8px;min-width:36px}
#shared-classroom #forest-immersive-open{background:#fffaf0ed;color:#476447;border-color:#d5dccb}
#forest-immersive,#forest-immersive *{box-sizing:border-box}