/* «Сегодня за 30 секунд»: объёмная плита дня, кольцо суток и стопка плиток. */
:root,:root[data-tema="stage"]{--bg0:#090c11;--bg1:#182130;--plate:#1b2332;--plate2:#243044;--ink:#e9eef5;--mute:#93a0b3;--edge:#04060a;--hi:#ffffff22;--shade:#0009;--acc:#f2a33c;--blue:#5b9df0;--red:#ff6a5e;--green:#4cc98a;--ease:cubic-bezier(.2,.7,.2,1)}
:root[data-tema="daylight"]{--bg0:#e6ecf3;--bg1:#fbfcfe;--plate:#ffffff;--plate2:#eef2f7;--ink:#14181d;--mute:#5c6875;--edge:#b8c4d2;--hi:#fff;--shade:#27405a33;--acc:#b96a00;--blue:#2a6fd0;--red:#cf3b30;--green:#1f8f5b}
:root[data-tema="nightvision"]{--bg0:#090705;--bg1:#18120b;--plate:#17110a;--plate2:#211910;--ink:#e2cba6;--mute:#8d7a5a;--edge:#030201;--hi:#e4aa9518;--shade:#000a;--acc:#d98324;--blue:#c7843a;--red:#e0533f;--green:#a58f3a}
*{box-sizing:border-box}
html{color-scheme:dark}:root[data-tema="daylight"]{color-scheme:light}
body{margin:0;min-height:100dvh;font:16px/1.5 Onest,system-ui,sans-serif;color:var(--ink);background:radial-gradient(120% 90% at 50% -10%,var(--bg1),var(--bg0) 70%) fixed;overflow-x:hidden;padding:max(16px,env(safe-area-inset-top)) 16px calc(max(84px,env(safe-area-inset-bottom)) + 8vh)}
.orbs{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.orbs i{position:absolute;border-radius:50%;filter:blur(46px);opacity:.34;background:var(--acc);animation:drift 18s ease-in-out infinite alternate}
.orbs i:nth-child(1){width:42vmax;height:42vmax;left:-12vmax;top:-10vmax}
.orbs i:nth-child(2){width:34vmax;height:34vmax;right:-10vmax;top:30vh;background:var(--blue);animation-duration:23s}
.orbs i:nth-child(3){width:26vmax;height:26vmax;left:30vw;bottom:-12vmax;background:var(--green);opacity:.2;animation-duration:29s}
@keyframes drift{to{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}
.scene{position:relative;z-index:1;display:grid;gap:28px;justify-items:center;perspective:1100px;max-width:1040px;margin:0 auto}
.slab{--lvl:var(--blue);--rx:0deg;--ry:0deg;--sx:0px;--mx:50%;--my:35%;position:relative;width:min(100%,460px);padding:22px 22px 24px;border-radius:30px;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));background:linear-gradient(155deg,var(--plate2),var(--plate) 55%);box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--edge),0 3px 0 var(--edge),0 9px 0 -2px var(--edge),0 0 0 1px color-mix(in srgb,var(--lvl) 28%,transparent),0 30px 50px -26px var(--shade);will-change:transform}
.slab[data-level=busy]{--lvl:var(--acc)}.slab[data-level=fire]{--lvl:var(--red)}
.slab:not(.x){animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{translate:0 -4px}}
.layer{transform:translateZ(var(--z,0px));transform-style:preserve-3d}
.shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transform:translateZ(80px);background:radial-gradient(circle at var(--mx) var(--my),#ffffff2e,transparent 46%);mix-blend-mode:soft-light}
.ground{position:absolute;left:8%;right:8%;bottom:-34px;height:26px;border-radius:50%;background:var(--shade);filter:blur(16px);transform:translateX(var(--sx)) translateZ(-60px);pointer-events:none}
.top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.hello{font-weight:800;font-size:17px}
.date{color:var(--mute);font-size:14px}.date::first-letter{text-transform:uppercase}
.ringbox{position:relative;width:min(100%,300px);margin:10px auto 6px;aspect-ratio:1}
.ringbox svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 0 var(--edge)) drop-shadow(0 14px 12px var(--shade))}
.track{fill:var(--plate);stroke:var(--edge);stroke-width:12}
.prog{fill:none;stroke:var(--lvl);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 5px var(--lvl))}
.tick{stroke:var(--mute);stroke-width:1.4;opacity:.7}
.pin{stroke:var(--plate);stroke-width:2.4}
.pin.later{fill:var(--blue)}.pin.now{fill:var(--acc);animation:pulse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.pin.past{fill:var(--mute);opacity:.6}
.hand{fill:var(--ink);stroke:var(--lvl);stroke-width:2.4}
@keyframes pulse{50%{transform:scale(1.35)}}
.clock{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:26%;gap:2px}
.clock b{font:800 clamp(38px,12vw,54px)/1 Tektur,Onest,sans-serif;letter-spacing:.02em;text-shadow:0 2px 0 var(--edge),0 10px 14px var(--shade)}
.clock small{color:var(--mute);font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.verdict{margin:8px 0 12px;font-size:17px;font-weight:600;text-align:center;text-wrap:balance}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{padding:6px 12px;border-radius:999px;font-size:13px;background:var(--plate2);box-shadow:inset 0 1px 0 var(--hi),0 3px 0 var(--edge),0 8px 10px -6px var(--shade)}
.chip.fire{background:color-mix(in srgb,var(--red) 22%,var(--plate2));color:var(--ink)}
.chip.bring{background:color-mix(in srgb,var(--acc) 20%,var(--plate2))}
.stack{width:min(100%,520px);perspective:900px;display:grid;gap:12px;align-content:start}
.stack h2{margin:10px 4px 0;font:700 13px/1 Onest,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.stack .empty,.stack .more{margin:4px;color:var(--mute);font-size:14px}
.tile{--lift:0px;--rot:0deg;display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:20px;background:linear-gradient(160deg,var(--plate2),var(--plate));transform-origin:50% 100%;transform:rotateX(var(--rot)) translateZ(var(--lift));box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--edge),0 5px 0 -1px var(--edge),0 16px 22px -14px var(--shade);transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .35s}
.tile .when{font:700 18px/1 'JetBrains Mono',monospace;min-width:3.3em;color:var(--blue)}
.tile .what{display:grid;min-width:0}.tile strong{overflow-wrap:anywhere}.tile small{color:var(--mute)}
.tile[data-state=now] .when{color:var(--acc)}
.tile.next{--lift:26px;--rot:-3deg;box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--edge),0 7px 0 -1px var(--edge),0 0 0 2px color-mix(in srgb,var(--acc) 70%,transparent),0 24px 30px -14px var(--shade)}
.tile[data-state=past]{--lift:-14px;opacity:.5;filter:saturate(.5)}
.tile.soft .when{color:var(--mute)}.tile.hot{box-shadow:inset 1px 1px 0 var(--hi),0 5px 0 -1px var(--edge),0 0 0 1.5px color-mix(in srgb,var(--red) 70%,transparent)}.tile.hot .when{color:var(--red)}
@media (hover:hover){.tile:hover{--lift:34px}.tile[data-state=past]:hover{--lift:0px;opacity:.9}}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg0) 55%)}
.bar button,.bar a{min-height:44px;padding:0 18px;border:0;border-radius:14px;display:inline-flex;align-items:center;font:600 15px Onest,sans-serif;color:var(--ink);background:linear-gradient(160deg,var(--plate2),var(--plate));box-shadow:inset 0 1px 0 var(--hi),0 4px 0 var(--edge),0 10px 14px -8px var(--shade);text-decoration:none;cursor:pointer;transition:translate .15s,box-shadow .15s}
.bar button:active,.bar a:active{translate:0 3px;box-shadow:inset 0 2px 4px var(--edge),0 1px 0 var(--edge)}
.bar button:disabled{opacity:.55}
.bar [hidden]{display:none}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.note{position:relative;z-index:1;text-align:center;color:var(--mute);font-size:14px;margin:18px 0 0;min-height:1.5em}
@media (min-width:920px){.scene{grid-template-columns:minmax(380px,460px) minmax(320px,520px);align-items:start;justify-content:center;gap:48px;padding-top:34px}.slab{position:sticky;top:28px}}
/* Окно-виджет: только плита, без стопки и лишних кнопок */
.widget{padding:10px 10px 64px}.widget .scene{padding:0;gap:0;max-width:none;display:block}
.widget .slab{width:100%;padding:14px 14px 16px;border-radius:24px;position:static}
.widget .top .date{display:none}.widget .ringbox{width:min(78%,260px,38vh);margin:0 auto}.widget .clock b{font-size:clamp(30px,9vw,44px)}.widget .clock small{font-size:12px}.widget .verdict{font-size:13px;line-height:1.35;margin:2px 0 6px}.widget .chip.bring{display:none}.widget .chip{padding:4px 10px;font-size:12px}
.widget .bar{padding:6px 8px;gap:8px}.widget .bar a,.widget #t-tilt{display:none}.widget .bar button{min-height:38px;padding:0 14px;font-size:13px}.widget{padding-bottom:56px}
@media (max-width:420px){.slab{padding:18px 16px 20px;border-radius:26px}.tile{padding:12px 14px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.slab{transform:none!important}}
:root[data-motion="off"] *,:root[data-motion="off"] *::before{animation:none!important;transition:none!important}
:root[data-motion="off"] .slab{transform:none!important}