/* Экраны. Облик «Кузница сценариев»: большой экран — зал на всю высоту, кабинет — полоса зала сверху и
   чистый фон под цифрой. Кабинет — вкладки без длинной прокрутки, большой экран только один раз, после первого входа.
   Цвета и размеры — токены. Картинка и цвет — docs/decisions.md, «Облик». */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; background:var(--bg);}
p{margin:0;}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-synthesis:none;
     font-size:var(--text-base); line-height:var(--leading-normal); overflow-x:clip;}

.page{display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;}
.stack{display:flex; flex-direction:column; gap:var(--space-16);}
.stack-sm{display:flex; flex-direction:column; gap:var(--space-8);}
.row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8);}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:var(--space-12);}
.back{align-self:flex-start;}

.poster{margin:0; font-family:var(--font-display); font-weight:var(--weight-display); line-height:var(--leading-display);
        letter-spacing:var(--tracking-tight); font-variant-numeric:lining-nums;}
.poster .accent{color:var(--accent-text);}
.art{display:block; width:100%; height:100%; object-fit:cover; pointer-events:none;}

/* ---------- Заставка: пока идёт вход ---------- */
.splash{position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; justify-content:center;
        padding:var(--space-24); background:var(--bg); pointer-events:none; animation:splash-safety var(--dur-base) 8s forwards;}
.splash-word{font-size:var(--text-2xl); animation:rise var(--dur-slow) var(--ease-out) both;}
.splash-word span{display:block;}
.splash.out{animation:splash-out var(--dur-slow) var(--ease-out) forwards;}
@keyframes splash-out{to{opacity:0; visibility:hidden;}}
@keyframes splash-safety{to{opacity:0; visibility:hidden;}}
@keyframes rise{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}
@keyframes settle{from{transform:scale(1.06);} to{transform:none;}}

/* ---------- Экран-плакат: первое знакомство, нет доступа, открыто не в Telegram ---------- */
.scene{position:relative; display:flex; flex-direction:column; gap:var(--space-16); flex:1; overflow:hidden; isolation:isolate;
       min-height:100vh; min-height:100svh;
       padding:calc(env(safe-area-inset-top) + var(--space-24)) var(--space-24) calc(env(safe-area-inset-bottom) + var(--space-24));}
.scene > .art{position:absolute; inset:0; z-index:-2; animation:settle 2.4s var(--ease-out) both;}
.art-shade{position:absolute; inset:0; z-index:-1;
           background:linear-gradient(to bottom, var(--art-shade-text), var(--art-shade-text) 26%, var(--art-shade) 48%, var(--art-shade));}
.scene-title{font-size:var(--text-2xl); overflow-wrap:anywhere; text-shadow:var(--shadow-title);}
.scene-title span{display:block;}
.scene-text{font-size:var(--text-md); max-width:32ch; text-shadow:var(--shadow-title);}
.scene > .btn{width:100%; max-width:var(--page-max); margin:auto auto 0;}
.ready .scene > :not(.art, .art-shade){animation:rise var(--dur-slow) var(--ease-out) both;}

/* ---------- Кабинет ученика: полоса зала сверху, на её нижнем краю заголовок, дальше вкладки ---------- */
.cabinet{position:relative; isolation:isolate; display:flex; flex-direction:column; gap:var(--space-12); width:100%; max-width:var(--page-max); margin:0 auto;
         padding:var(--title-at) var(--space-16) calc(env(safe-area-inset-bottom) + var(--space-24));
         flex:1;}
.cabinet.compact{--title-at:var(--title-at-compact);}
.strip{position:absolute; left:0; right:0; top:0; z-index:-1; overflow:hidden; height:calc(var(--title-at) + var(--strip-under));}
/* В кадре голова дракона и огонь под зубами: серая голова читается только на фоне пламени.
   Широкая полоса режет картинку сильнее, там кадр выше, иначе срезаются глаза */
.strip .art{object-position:50% 48%;}
@media (min-width:600px){ .strip .art{object-position:50% 40%;} }
/* Сверху родные цвета и 15%, а к заголовку картинка уходит в фон: янтарные буквы терялись на огне */
.strip-shade{position:absolute; inset:0; background:linear-gradient(to bottom, var(--art-shade) calc(var(--title-at) - var(--space-48)),
             var(--art-shade-text) calc(var(--title-at) + var(--space-8)), var(--bg) calc(var(--title-at) + var(--strip-under)));}
.cabinet-title{font-size:var(--text-title); text-shadow:var(--shadow-title); white-space:nowrap;}
.tab-panel{display:flex; flex-direction:column; gap:var(--space-16); flex:1;}
.ready .tab-panel{animation:rise var(--dur-base) var(--ease-out) both;}

/* Сколько заготовок на сегодня: цифра здесь главная */
.stock{display:flex; flex-direction:column; gap:var(--space-2);}
.stock-label{font-size:var(--text-md); font-weight:var(--weight-semibold); line-height:var(--leading-tight);}
.stock-count{display:flex; align-items:baseline; gap:var(--space-12); font-family:var(--font-display); font-variant-numeric:lining-nums;
             font-weight:var(--weight-display); line-height:var(--leading-none);}
.stock-left{font-size:var(--text-display);}
.stock-limit{font-size:var(--text-xl);}

/* Шаги: и в подсказке, и в анкете — путь из узлов, как на наброске Анастасии */
.how{display:flex; flex-direction:column; gap:var(--space-12); margin:0; padding:0; list-style:none; font-size:var(--text-md);
     line-height:var(--leading-tight);}
.how li{display:grid; grid-template-columns:var(--node) minmax(0, 1fr); column-gap:var(--space-12); align-items:center;}
.tab-action{margin-top:auto;}

.tab-panel .note{font-size:var(--text-base);}

/* Анкета: кнопка внизу экрана, как на «Наковальне». Длинные описания уводят её вниз — тогда она едет за прокруткой
   и всегда под рукой, а кольцо цвета фона прячет текст, проезжающий под ней */
.profile-form{flex:1;}
.profile-form > .btn{position:sticky; bottom:calc(env(safe-area-inset-bottom) + var(--space-24)); margin-top:auto;
                     box-shadow:0 0 0 var(--space-16) var(--bg), 0 var(--space-64) 0 var(--space-16) var(--bg);}
.road-field .input{overflow:hidden;}
/* Вкладки при прокрутке анкеты прилипают к самому верху: в зазоре над ними проглядывал текст */
.cabinet .tabs{top:env(safe-area-inset-top);}

.road-head{display:flex; flex-direction:column; gap:var(--space-4);}
.road-title{font-size:var(--text-xl);}
.road-text{font-size:var(--text-base); color:var(--muted-fg);}
.road{display:flex; flex-direction:column;}
.road-step{position:relative; display:grid; grid-template-columns:var(--node) minmax(0, 1fr); column-gap:var(--space-12);
           padding-bottom:var(--space-16);}
.road-step::before{content:""; position:absolute; top:var(--node); bottom:0; left:calc(var(--node) / 2);
                   border-left:1px dashed var(--input); transition:border-color var(--dur-base);}
.road-step:last-child{padding-bottom:0;}
.road-step:last-child::before{display:none;}
.road-step.filled::before{border-left:1px solid var(--accent);}
.road-node{position:relative; display:flex; align-items:center; justify-content:center; width:var(--node); height:var(--node);
           border:1px solid var(--input); border-radius:var(--radius-full); background:var(--bg);
           font-weight:var(--weight-semibold); font-size:var(--text-base); line-height:var(--leading-none);
           transition:background-color var(--dur-base), border-color var(--dur-base), color var(--dur-base);}
.road-step.filled .road-node{background:var(--accent); border-color:var(--accent); color:var(--accent-fg);
                             animation:node-pop var(--dur-base) var(--ease-out);}
@keyframes node-pop{from{transform:scale(.7);} 60%{transform:scale(1.14);} to{transform:none;}}
.road-field{display:flex; flex-direction:column; gap:var(--space-8); min-width:0;}
.road-label{font-size:var(--text-md); font-weight:var(--weight-semibold); line-height:var(--node);}

/* ---------- Штаб: минимализм, картинки нет, тут работают ---------- */
.staff-head{padding:calc(env(safe-area-inset-top) + var(--space-16)) var(--space-16) var(--space-16);
            width:100%; max-width:var(--page-max); margin:0 auto;}
.staff-title{font-size:var(--text-xl);}
.staff{display:flex; flex-direction:column; gap:var(--space-16); width:100%; max-width:var(--page-max);
       margin:0 auto; padding:0 var(--space-16) calc(env(safe-area-inset-bottom) + var(--space-32));}
.tabs{position:sticky; top:var(--space-8); z-index:2;}
.tabs-gap{height:var(--space-4);}

.prompt-item{align-items:stretch; width:100%; font:inherit; color:inherit; text-align:left; cursor:pointer;
             -webkit-tap-highlight-color:transparent;}
.prompt-item:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.prompt-text{margin:0; color:var(--muted-fg); font-size:var(--text-sm); line-height:var(--leading-normal);
             display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.prompt-body{min-height:50vh; resize:vertical;}

.model-row{display:flex; flex-direction:column; gap:var(--space-2);}
.model-name{font-weight:var(--weight-medium); overflow-wrap:anywhere;}

.plan{margin:0; display:grid; grid-template-columns:1fr auto; gap:var(--space-4) var(--space-16);}
.plan dt{color:var(--muted-fg);}
.plan dd{margin:0; font-weight:var(--weight-medium); text-align:right;}

.file-input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}

/* Меньше движения: картинка на месте, появления нет */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .splash{display:none;}
}