/* FeniksFit — home.css: главный экран, меню, страницы «в разработке» */
#home{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;font-family:Unbounded,system-ui,sans-serif;
  background:radial-gradient(90vh 70vh at 50% 42%,#2a1410 0%,#120c10 45%,#08090d 100%);animation:fadeIn .5s ease both}
/* фон: огромный полупрозрачный феникс и медленное тёплое свечение */
.hBg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hWater{position:absolute;left:50%;top:44%;height:118vh;transform:translate(-50%,-50%);opacity:.07;filter:saturate(1.2) blur(1px);animation:hFloat 12s ease-in-out infinite}
@keyframes hFloat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-51.5%) scale(1.02)}}
.hBg::after{content:"";position:absolute;left:50%;top:44%;width:80vh;height:80vh;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,110,30,.16),transparent);animation:hGlow 5s ease-in-out infinite}
@keyframes hGlow{50%{opacity:.6}}

/* верхняя панель */
.hTop{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:clamp(10px,1.6vh,18px) clamp(14px,1.6vw,26px);background:linear-gradient(#0b0d12e6,#0b0d1200)}
.hUser{display:flex;align-items:center;gap:10px;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:999px;padding:6px 16px 6px 6px;
  font:600 clamp(13px,1.6vh,16px) Unbounded,system-ui;color:#e9edf2;justify-self:start}
.hAv{width:clamp(30px,4.2vh,40px);height:clamp(30px,4.2vh,40px);border-radius:50%;background:linear-gradient(160deg,#ff8a1f,#c42a18);display:grid;place-items:center;color:#2a0a08}
.hAv svg{width:62%;height:62%}
.hCaret{color:#8b95a3;font-size:12px}
.hLogo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:clamp(16px,2.4vh,24px);letter-spacing:.08em;color:#eef0f5}
.hLogo img{height:clamp(32px,5vh,52px);filter:drop-shadow(0 0 8px rgba(255,120,30,.5))}
.hLogo b{background:linear-gradient(90deg,#ff8a1f,#ffd36b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hRight{display:flex;align-items:center;gap:10px;justify-self:end}
.hClock{color:#a9b0c2;font:300 clamp(13px,1.7vh,17px) Unbounded,system-ui;margin-right:6px;letter-spacing:.06em}
.hIcBtn{width:clamp(38px,5.2vh,48px);height:clamp(38px,5.2vh,48px);border-radius:12px;background:#ffffff0d;border:1px solid #ffffff1a;color:#e9edf2;
  display:grid;place-items:center;font:700 13px Unbounded,system-ui;padding:0}
.hIcBtn svg{width:55%;height:55%}
.hIcBtn.off{color:#5c6372}
.hMenu{position:relative}
.hDrop{position:absolute;top:calc(100% + 10px);min-width:280px;background:#141820f2;backdrop-filter:blur(10px);border:1px solid #2a303b;border-radius:16px;
  padding:8px;display:none;box-shadow:0 18px 50px #000a;z-index:10;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.hDrop.left{left:0}.hDrop.right{right:0}
.hDrop.open{display:block;animation:rise .2s ease both}
.mHead{color:#8b95a3;font-size:12px;text-transform:uppercase;letter-spacing:.12em;padding:8px 12px 6px}
.mItem{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;border-radius:10px;padding:12px;color:#e9edf2;font-size:16px;text-align:left}
.mItem:hover,.mItem:active{background:#ffffff10}
.mItem.on{background:#ff7a1a1f}
.mAv{width:28px;height:28px;border-radius:50%;background:linear-gradient(160deg,#ff8a1f,#c42a18);display:grid;place-items:center;color:#2a0a08}
.mAv svg{width:60%}
.mIc{width:22px;height:22px;color:#ff9a2a;display:grid;place-items:center}.mIc svg{width:100%}
.mCheck{margin-left:auto;color:#ffb43a}

/* центр: крупные плитки разделов */
.hMid{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,3vh,34px);
  padding:0 clamp(16px,2.4vw,44px) clamp(18px,4vh,46px)}
.hHello{text-align:center;color:#c9cfdb;font:300 clamp(14px,2.2vh,22px) Unbounded,system-ui;letter-spacing:.22em;text-transform:uppercase;animation:fadeIn .6s ease both}
.hTiles{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,24px)}
.hTile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.4vh,14px);text-align:center;cursor:pointer;
  background:linear-gradient(170deg,#1d212bf0,#11141bdd);border:1px solid #2a303b;border-radius:24px;padding:clamp(18px,3vh,34px) clamp(12px,1.2vw,20px);
  color:#e9edf2;font-family:Unbounded,system-ui;height:clamp(240px,50vh,520px);overflow:hidden;
  transition:transform .15s,border-color .2s,box-shadow .2s;animation:rise .55s ease both}
.hTile::before{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;background:radial-gradient(closest-side,#ff6a1a26,transparent);opacity:0;transition:opacity .3s}
.hTile:hover::before,.hTile.ready::before{opacity:1}
.hTile:hover{border-color:#ff7a1a88;transform:translateY(-3px)}
.hTile:active{transform:scale(.97)}
.hTile.ready{border-color:#ff7a1a;background:linear-gradient(170deg,#3a1a12f0,#1a1015dd);box-shadow:0 0 40px #ff6a1a33}
.hIc{position:relative;width:clamp(64px,13vh,130px);height:clamp(64px,13vh,130px);color:#ff9a2a;margin-bottom:clamp(6px,1.6vh,18px);
  filter:drop-shadow(0 0 14px #ff7a1a55)}
.hIc svg{width:100%;height:100%;overflow:visible}
.t-hr .hIc{color:#ff4d5e;filter:drop-shadow(0 0 16px #ff4d5e66)}
.t-hr .beat,.stIc.t-hr .beat{transform-origin:32px 34px;animation:hBeat 1s ease-in-out infinite}
@keyframes hBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(.98)}36%{transform:scale(1.08)}50%{transform:scale(1)}}
.t-virtual .hIc{color:#ffd36b}
.hT{position:relative;font-weight:600;font-size:clamp(15px,2.5vh,26px);line-height:1.2}
.hS{position:relative;font:400 clamp(12px,1.7vh,16px)/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#9aa3b2;max-width:90%}
.hBadge{position:absolute;top:14px;right:14px;font:600 12px system-ui,sans-serif;padding:5px 10px;border-radius:999px;background:#ffffff14;color:#a9b0c2;letter-spacing:.04em}
.hBadge.ok{background:#ff7a1a;color:#1a0a05}
.hBadge:empty{display:none}
.hSec{color:#6f778b}
@media (max-width:900px){.hTiles{grid-template-columns:repeat(2,1fr)}.hTile{height:auto;min-height:180px}.hClock{display:none}}

/* страница «в разработке» */
#stub{position:absolute;inset:0;display:flex;flex-direction:column;padding:24px 28px 20px;gap:18px;animation:fadeIn .4s ease both;
  background:radial-gradient(1000px 600px at 30% 40%,#24130f,#0b0d10 70%)}
.stBody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,60px);align-items:center;max-width:1300px;margin:0 auto;width:100%}
.stIc{justify-self:center;width:min(36vh,320px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#ff9a2a;
  background:radial-gradient(closest-side,#ff7a1a2e,#ff7a1a08 70%,transparent);border:1px solid #ff7a1a40;animation:rise .5s ease both}
.stIc svg{width:48%;height:48%;overflow:visible}
.stIc.t-hr{color:#ff4d5e}
.stTxt{animation:rise .5s ease .08s both}
.stBadge{display:inline-block;background:#ff7a1a22;color:#ffb43a;border:1px solid #ff7a1a66;border-radius:999px;padding:6px 14px;font:600 13px system-ui;letter-spacing:.06em;margin-bottom:14px}
.stTxt h1{margin:0 0 12px;font:800 clamp(26px,4.4vh,44px) Unbounded,system-ui}
.stTxt p{margin:0 0 22px;color:#c3cad4;font-size:clamp(15px,2vh,19px);line-height:1.5;max-width:640px}
.stWill{color:#8b95a3;font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.stTxt ul{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:10px}
.stTxt li{position:relative;padding-left:26px;font-size:clamp(14px,1.9vh,18px);color:#e9edf2}
.stTxt li::before{content:"";position:absolute;left:4px;top:.45em;width:9px;height:9px;border-radius:50%;background:linear-gradient(#ffd36b,#ff6a1a)}
.stBack{width:auto;padding-left:34px;padding-right:34px}
@media (max-width:900px){.stBody{grid-template-columns:1fr}.stIc{width:30vh}}
.stBack{background:linear-gradient(160deg,#ff9a2a,#e8371b);color:#fff}
/* текущее время на всех экранах */
#gClock{position:fixed;top:clamp(10px,1.8vh,18px);left:50%;transform:translateX(-50%);z-index:40;pointer-events:none;
  font:400 clamp(16px,2.6vh,26px) Unbounded,system-ui;letter-spacing:.06em;color:#e9edf2;background:#0b0d12b3;border:1px solid #ffffff1a;
  border-radius:999px;padding:6px 18px;backdrop-filter:blur(6px);font-variant-numeric:tabular-nums}
#gClock.big{font-size:clamp(22px,4.2vh,44px);font-weight:600;padding:6px 24px;top:clamp(8px,1.2vh,14px)}
#gClock .hSec,.wClock .hSec{color:#8b95a3}
/* «Завершить» на экране паузы */
.pBtns{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.pEnd{background:#2a1416;color:#ff8a94;border:1px solid #ff4d5e66;border-radius:18px;padding:clamp(14px,2.4vh,22px) 28px;font-size:clamp(16px,2.4vh,22px);font-weight:700}
#gClock.right{left:auto;right:clamp(14px,1.6vw,28px);transform:none;top:clamp(14px,2.2vh,26px)}
/* секунды вместе с двоеточием — вдвое мельче, по нижнему краю цифр */
.hSec{font-size:.5em;vertical-align:baseline;letter-spacing:.02em;margin-left:.04em}.wClock{min-width:4.6em}
/* сон тренажёра */
#sleepOv{position:fixed;inset:0;z-index:90;background:#000;display:grid;place-items:center;cursor:pointer;transition:opacity 2s}
#sleepOv .slBox{display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity 3s}
#sleepOv.dark .slBox{opacity:.12}
#sleepOv .slBird{height:min(30vh,300px);opacity:.55;filter:grayscale(.3)}
#sleepOv b{font:700 clamp(20px,3vh,30px) Unbounded,system-ui;color:#c9ced8}#sleepOv span{color:#6f778b;font-size:clamp(14px,2vh,18px)}
.hIcBtn.hPower{color:#ff8a94}.hIcBtn.hPower svg{width:55%;height:55%}
.mItem.danger{color:#ff8a94;border-top:1px solid #ffffff14}

/* часы на главном экране (выбор тренировки) — крупнее, как на других экранах (02.11.2026) */
.hTop .hClock{font:500 clamp(20px,3.6vh,38px)/1 Unbounded,system-ui;color:#e9edf2;letter-spacing:.04em;margin-right:12px;font-variant-numeric:tabular-nums}
.hTop .hClock .hSec{color:#8b95a3}