/* A drawn horizon, shared by the header and quiet page margins. No raster layers. */
@property --sky-top{syntax:'<color>';inherits:true;initial-value:#d3e9ed}
@property --sky-bottom{syntax:'<color>';inherits:true;initial-value:#f2e6c7}
@property --sky-light{syntax:'<color>';inherits:true;initial-value:#e8b975}
@property --sky-land{syntax:'<color>';inherits:true;initial-value:#749c9e}
@property --sky-near{syntax:'<color>';inherits:true;initial-value:#547f85}
.game-frame {
 --sky-top:#d3e9ed;--sky-bottom:#f2e6c7;--sky-light:#e8b975;--sky-land:#749c9e;--sky-near:#547f85;--sky-cloud:#ffffff;--sky-star:#7598ab;
 --ambient-ink:#537d87;--ambient-edge:#a98046;--ambient-strength:.12;
 transition:--sky-top .8s,--sky-bottom .8s,--sky-light .8s,--sky-land .8s,--sky-near .8s;
}
.game-frame:has(.sky-1){--sky-top:#c6e7ee;--sky-bottom:#e9f1dc;--sky-light:#f0cf83;--sky-land:#79a3a2;--sky-near:#557e83}
.game-frame:has(.sky-2){--sky-top:#dfd3e5;--sky-bottom:#f4cc9e;--sky-light:#e39f68;--sky-land:#9b8a9e;--sky-near:#7c738c}
.game-frame:has(.sky-3){--sky-top:#c6d3e5;--sky-bottom:#e2e7ef;--sky-light:#91afcf;--sky-land:#8d9fb8;--sky-near:#6e85a3;--sky-star:#4e678f}
:root[data-theme=dark] .game-frame{--sky-top:#203c50;--sky-bottom:#4f6269;--sky-light:#efb981;--sky-land:#607e86;--sky-near:#304f62;--sky-cloud:#bfd8df;--sky-star:#deedfa;--ambient-ink:#568297;--ambient-edge:#a9d1dd;--ambient-strength:.16}
:root[data-theme=dark] .game-frame:has(.sky-1){--sky-top:#23495e;--sky-bottom:#4e7d84;--sky-light:#f3d68e;--sky-land:#679098;--sky-near:#31596a}
:root[data-theme=dark] .game-frame:has(.sky-2){--sky-top:#393c58;--sky-bottom:#865e63;--sky-light:#f3b17d;--sky-land:#977b89;--sky-near:#52485f}
:root[data-theme=dark] .game-frame:has(.sky-3){--sky-top:#152a43;--sky-bottom:#33465f;--sky-light:#a9cce9;--sky-land:#4c6380;--sky-near:#233c55}
:root[data-theme=aura] .game-frame{--sky-top:#302e50;--sky-bottom:#65556d;--sky-light:#edbd90;--sky-land:#7d718f;--sky-near:#41405f;--sky-cloud:#d7cde9;--sky-star:#eee2ff;--ambient-ink:#7876ac;--ambient-edge:#b7a8df;--ambient-strength:.16}
:root[data-theme=aura] .game-frame:has(.sky-1){--sky-top:#2a3c59;--sky-bottom:#506d84;--sky-light:#f5d69a;--sky-land:#7c8f9f;--sky-near:#3c506c}
:root[data-theme=aura] .game-frame:has(.sky-2){--sky-top:#3a2d56;--sky-bottom:#8b596f;--sky-light:#f0b688;--sky-land:#9e7e9c;--sky-near:#544365}
:root[data-theme=aura] .game-frame:has(.sky-3){--sky-top:#232943;--sky-bottom:#3d3a61;--sky-light:#b0c4ec;--sky-land:#625b88;--sky-near:#363650}
:root[data-theme] .game-frame .game-topbar {background:var(--theme-surface);isolation:isolate;position:relative}
:root[data-theme] .game-frame .planet-sky {opacity:1;background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));transition:background .7s;}
.game-frame .planet-sky::after {background:linear-gradient(90deg,color-mix(in srgb,var(--theme-surface) 70%,transparent),transparent 38%,transparent 58%,color-mix(in srgb,var(--theme-surface) 78%,transparent));}
.sky-horizon{position:absolute;inset:0;background:radial-gradient(ellipse at 61% 105%,color-mix(in srgb,var(--sky-light) 55%,transparent),transparent 53%);transition:background .7s}
.sky-landscape{position:absolute;width:100%;height:64px;bottom:-1px;left:0;opacity:.65}
.sky-ridge-far{fill:var(--sky-land);transition:fill .7s}
.sky-ridge-near{fill:var(--sky-near);transition:fill .7s}
.game-frame .sky-orb{left:61%;top:13px;width:30px;height:30px;background:#ffe7ac;opacity:1;box-shadow:0 0 0 7px #ffe3a314,0 0 0 17px #ffe3a30a,0 0 38px #ffd18255;transition:top .8s,left .8s,background .8s,box-shadow .8s}
.game-frame .sky-0 .sky-orb{top:48px;left:59%;width:35px;height:35px}
.game-frame .sky-2 .sky-orb{top:50px;left:64%;background:#ffd2a0;width:36px;height:36px}
.game-frame .sky-3 .sky-orb{background:transparent;box-shadow:inset 9px -4px 0 0 var(--sky-light);transform:rotate(-15deg);width:29px;height:29px}
.sky-stars{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 36% 21%,var(--sky-star) 0 1px,transparent 1.6px),radial-gradient(circle at 43% 49%,var(--sky-star) 0 1px,transparent 1.6px),radial-gradient(circle at 54% 15%,var(--sky-star) 0 1px,transparent 1.5px),radial-gradient(circle at 68% 29%,var(--sky-star) 0 1px,transparent 1.6px),radial-gradient(circle at 73% 61%,var(--sky-star) 0 1px,transparent 1.5px);transition:opacity .8s}
.sky-3 .sky-stars{opacity:.8}
.sky-cloud{position:absolute;height:15px;width:190px;border-radius:50%;background:var(--sky-cloud);opacity:.14;animation:sky-drift 48s ease-in-out infinite alternate;}
.sky-cloud::after{content:"";position:absolute;left:24%;top:-5px;width:63%;height:13px;border-radius:50%;background:inherit}
.sky-cloud-far{left:33%;top:22%;width:145px;opacity:.09;animation-duration:64s;animation-delay:-21s}
.sky-cloud-near{left:67%;top:57%;animation-delay:-12s}
.sky-3 .sky-cloud{opacity:.06}
@keyframes sky-drift{from{transform:translateX(-22px)}to{transform:translateX(32px)}}
.sky-time-symbol{font-size:18px;color:var(--theme-gold,#8d611e);line-height:1;padding-inline:0!important}
.game-frame .sky-controls{gap:4px}
.game-frame .game-topbar:has(.planet-sky) .online-count{color:var(--theme-ink);text-shadow:none}
.game-frame .game-topbar:has(.planet-sky) .online-count small{color:var(--theme-muted)}
.game-frame .sky-controls .atmosphere-toggle{position:relative;display:grid;place-items:center;width:28px;height:28px;min-width:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--theme-gold);cursor:pointer;opacity:1}
.atmosphere-toggle:hover,.atmosphere-toggle:focus-visible{opacity:1;background:var(--theme-surface)}
.atmosphere-toggle:focus-visible{outline:2px solid var(--theme-accent);outline-offset:-2px}
:root[data-atmosphere-paused=true] .atmosphere-toggle{box-shadow:inset 0 0 0 1px var(--theme-line)}
.game-frame:has(.game-atmosphere){background:linear-gradient(180deg,var(--theme-soft,#d0edf4),var(--theme-surface,#f4f9f6) 550px)}
.game-frame .game-atmosphere{z-index:-1;contain:strict}
/* A shared lower Ki source. Content stays above this noninteractive layer. */
.game-frame .ki-atmosphere { left:0;top:96px;--ki-light:var(--sky-light);mask-image:linear-gradient(180deg,transparent,#000 90px); }
.ki-source { position:absolute;left:-8%;right:-8%;bottom:0;height:250px;opacity:.7;background:linear-gradient(0deg,color-mix(in srgb,var(--ki-light) 20%,transparent),color-mix(in srgb,var(--ki-light) 7%,transparent) 38%,transparent 100%);transform-origin:50% 100%;animation:ki-tide 38s ease-in-out infinite alternate; }
.ki-source-depth { bottom:0;height:100px;opacity:.55;background:linear-gradient(0deg,color-mix(in srgb,var(--ki-light) 12%,transparent),transparent);animation-duration:49s;animation-delay:-19s; }
.ki-particles { position:absolute;inset:0;mask-image:linear-gradient(90deg,#000 12%,#0008 26%,#0002 40%,#0002 62%,#0008 77%,#000 90%); }
.ki-mote { position:absolute;left:var(--x);bottom:-12px;width:3px;height:3px;border-radius:50%;background:var(--ki-light);box-shadow:0 0 7px 2px color-mix(in srgb,var(--ki-light) 20%,transparent);opacity:0;animation:ki-rise var(--duration) linear var(--delay) infinite; }
.ki-mote:nth-child(even) { width:2px;height:2px; }
.ki-thread::after { content:"";position:absolute;top:1px;left:1px;width:1px;height:25px;border-radius:100%;background:linear-gradient(var(--ki-light),transparent);opacity:.4;transform:rotate(9deg);transform-origin:top; }
@keyframes ki-rise {
 0% { transform:translate3d(0,0,0);opacity:0; }
 12% { opacity:.5; }
 45% { transform:translate3d(calc(var(--drift) * -.35),calc(var(--rise) * -.44),0);opacity:.42; }
 78% { opacity:.16; }
 100% { transform:translate3d(var(--drift),calc(var(--rise) * -1),0);opacity:0; }
}
@keyframes ki-tide { from { transform:translateX(-1.5%) scaleY(.94); } to { transform:translateX(1.5%) scaleY(1.06); } }
:root[data-theme=light] .ki-atmosphere { --ki-light:color-mix(in srgb,#087e8b 80%,var(--sky-near)); }
:root[data-atmosphere-paused=true] :is(.sky-cloud,.ki-mote,.ki-source),:root[data-atmosphere-hidden=true] :is(.sky-cloud,.ki-mote,.ki-source) { animation-play-state:paused; }
.game-frame:has(.arena) .ki-atmosphere,.game-frame[data-page=editor] .ki-atmosphere { display:none; }
:root[data-theme=light] .ki-particles { opacity:1; }
@media(max-width:850px){.game-frame .ki-atmosphere{left:0;top:200px;opacity:.55}.ki-mote:nth-child(even){display:none}.ki-source{height:250px}.ki-particles{mask-image:none}.sky-cloud-far{display:none}}
@media(prefers-reduced-motion:reduce){.ki-mote{display:none}.ki-source{animation:none}}
@media(min-width:551px) and (max-width:1500px){.game-frame .planet-sky .sky-orb{left:52%}}
@media(max-width:550px){.game-frame .planet-sky .sky-orb{left:65%;top:61px}.sky-landscape{height:85px;opacity:.55}.sky-time-symbol{font-size:16px}.game-frame .sky-controls{gap:2px}.sky-stars{background-size:150% 100%}}
@media(prefers-reduced-motion:reduce){.sky-cloud,.ki-mote,.ki-source{animation:none}.game-frame,.game-frame .planet-sky,.sky-horizon,.sky-ridge-far,.sky-ridge-near,.game-frame .sky-orb,.sky-stars,.ki-source{transition:none}.game-frame .sky-controls .atmosphere-toggle{display:none}}
@media(forced-colors:active){.planet-sky,.game-atmosphere,.game-frame .sky-controls .atmosphere-toggle,.sky-time-symbol{display:none}}
/* Symmetric preview arrows keep the desktop text centred in the whole pill.
   The phase symbol belongs to the label, not to a separate leftover flex track. */
.game-frame .sky-controls{min-width:0;height:40px;overflow:hidden}
.game-frame .sky-controls>.sky-current{min-width:0;padding:0;text-align:center}
.game-frame .sky-controls .sky-current-content{position:relative;display:inline-block;max-width:calc(100% - 64px);vertical-align:middle;line-height:28px}
.game-frame .sky-controls .sky-time-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-frame .sky-controls .sky-current-content>.atmosphere-toggle{position:absolute;right:calc(100% + 4px);top:50%;transform:translateY(-50%)}
.game-frame .sky-controls>.sky-step{flex:0 0 28px;width:28px;min-width:28px;height:30px}
@media(min-width:551px){.game-frame .sky-controls.sky-controls-admin{width:280px}}
@media(max-width:550px){
 .game-frame .sky-controls{padding:3px;gap:0}
 .game-frame .sky-controls>.sky-step{flex-basis:24px;width:24px;min-width:24px;height:32px}
 .game-frame .sky-controls .sky-current-content{display:flex;align-items:center;justify-content:center;gap:3px;max-width:100%;line-height:normal}
 .game-frame .sky-controls .sky-current-content>.atmosphere-toggle{position:static;transform:none;flex:0 0 24px;width:24px;min-width:24px;height:32px;font-size:16px}
 .game-frame .sky-controls .sky-time-label{flex:0 1 auto}
}
/* The smallest header keeps the phase visible, including the longer admin preview.
   Normal day labels still fit one line; previews may use the pill's second line. */
@media(max-width:380px){
 .game-frame .sky-controls>.sky-step{flex-basis:20px;width:20px;min-width:20px}
 .game-frame .sky-controls .sky-current-content>.atmosphere-toggle{flex-basis:20px;width:20px;min-width:20px}
 .game-frame .sky-controls .sky-time-label{font-size:9.5px;line-height:12px;white-space:normal;text-overflow:clip;overflow:visible}
}
/* Light backgrounds need pigment, not additional white glow. */
:root[data-theme=light] .ki-atmosphere { --ki-light:#086775; }
:root[data-theme=light] .ki-source { opacity:.9;background:linear-gradient(0deg,#218c9b55,#218c9b24 42%,transparent); }
:root[data-theme=light] .ki-source-depth { opacity:.65;background:linear-gradient(0deg,#126b7936,transparent); }
:root[data-theme=light] .ki-mote { width:4px;height:4px;box-shadow:0 0 5px #087e8b38; }
:root[data-theme=light] .ki-mote:nth-child(even) { width:3px;height:3px; }
:root[data-theme=light] .ki-thread::after { width:1.5px;opacity:.75; }
:root[data-theme=light] .ki-particles { mask-image:linear-gradient(90deg,#000 16%,#000b 30%,#0006 43%,#0006 60%,#000b 76%,#000 90%); }
@media(max-width:850px){:root[data-theme=light] .ki-particles{mask-image:none}}