/* KORNEI — общие токены, сброс, кнопки и поля. Используется сайтом и панелью. */
:root{
  /* тёплая тёмная база: угли, а не холодный чёрный */
  --coal:#1B0E0A;     /* фон страницы */
  --ash:#251410;      /* приподнятая поверхность */
  --soot:#2F1A14;     /* поля ввода, второй уровень */
  --rim:#4A271C;      /* линии */
  --rim-2:#6B3626;    /* сильные линии, рамки кнопок */
  /* огонь сервера */
  --blood:#7A0E0E;
  --flame:#C81E1E;
  --ember:#E8641A;
  --gold:#F2A41C;
  --spark:#FFD23F;
  /* текст */
  --bone:#F7E8DA;
  --dust:#CDB2A3;
  --smoke:#A08273;
  --ok:#5BE36A;
  --bad:#FF7A6B;

  --f-display:"Dela Gothic One","Arial Black",Impact,sans-serif;
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:16px;
  --maxw:1200px;
  --bar-h:56px;
  /* KORNEI (02.11): движение — один набор на сайт и панель. Анимируем только transform/translate/scale, opacity, filter. */
  --t-fast:180ms;   /* отклик на нажатие, наведение */
  --t-mid:320ms;    /* переключатели, окна, тосты */
  --t-slow:600ms;   /* появление при прокрутке, загрузка */
  --ease-out:cubic-bezier(.2,.8,.2,1);       /* «яблочный» выход: быстро стартует, мягко садится */
  --ease-spring:cubic-bezier(.34,1.3,.64,1); /* маленький пружинный перелёт — для «поп» */
  --ease-in:cubic-bezier(.4,0,1,1);          /* уход: разгон без торможения */
  --glow:0 0 0 1px rgba(232,100,26,.45),0 10px 28px -12px rgba(232,100,26,.6);
  color-scheme:dark;
}
@media (min-width:720px){ :root{ --gutter:24px; --bar-h:64px; } }

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--coal);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 12px)}
body{margin:0;background:var(--coal);color:var(--bone);font:400 16px/1.55 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.18em}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.15;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse}
:focus{outline:none}
:focus-visible{outline:2px solid var(--spark);outline-offset:3px;animation:focus-in var(--t-mid) var(--ease-spring)}
/* кольцо фокуса «садится» на элемент */
@keyframes focus-in{from{outline-offset:9px;outline-color:rgba(255,210,63,0)}}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--bone);color:var(--coal);padding:10px 14px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* Заголовки Dela Gothic с «объёмом» как у 3D-надписей в игре: жёсткая тень вниз-вправо. */
.extrude{font-family:var(--f-display);font-weight:400;letter-spacing:-.005em;text-shadow:.055em .055em 0 var(--blood)}

/* ── кнопки ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;
  font:600 15px/1.2 var(--f-body);color:var(--bone);text-decoration:none;white-space:nowrap;cursor:pointer;
  background:var(--soot);border:1px solid var(--rim-2);border-radius:2px;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--ease-out),opacity var(--t-fast)}
/* подсветка углём — готовая тень на ::after, анимируется только её прозрачность */
.btn:not(.btn--fire)::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:var(--glow);opacity:0;pointer-events:none;
  transition:opacity var(--t-mid) var(--ease-out)}
.btn:hover{background:#3A2019;border-color:#8A4630}
@media (hover:hover) and (pointer:fine){
  .btn:not([disabled]):hover{transform:translateY(-1px)}
  .btn:not([disabled]):hover::after{opacity:1}
}
.btn:not([disabled]):active{transform:scale(.97);transition-duration:60ms}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
/* занято: маленький спиннер справа от текста (aria-busy="true") */
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"]::after,.btn--fire[aria-busy="true"]::after{content:"";position:static;inset:auto;display:inline-block;flex:none;width:15px;height:15px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;box-shadow:none;opacity:.85;clip-path:none;background:none;
  transform:none;transition:none;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn svg{width:18px;height:18px;flex:none}
.btn--ghost{background:transparent}
.btn--danger{border-color:#8A2A22;color:#FFB2A6}
.btn--danger:hover{background:#3B1411;border-color:var(--flame)}
.btn--wide{width:100%}

/* Главная кнопка — раскалённая, со ступенчатыми «пиксельными» углами (как кнопки в Bedrock). */
.btn--fire{position:relative;isolation:isolate;border:0;background:none;color:#2A0D05;font-weight:700;padding:0 20px;min-height:48px}
.btn--fire::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#FFD23F 0%,#F2A41C 45%,#E8641A 100%);
  box-shadow:inset 0 2px 0 rgba(255,240,190,.75),inset 0 -4px 0 rgba(122,14,14,.55);
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.btn--fire:hover{background:none}
.btn--fire:hover::before{background:linear-gradient(180deg,#FFE070 0%,#F6B02E 45%,#EE7424 100%)}
.btn--fire:active::before{box-shadow:inset 0 4px 0 rgba(122,14,14,.45)}
.btn--fire[disabled]::before{background:#3A2219;box-shadow:inset 0 0 0 1px #6B3626}
.btn--fire[disabled]{color:#A08273;opacity:1}
@media (hover:hover) and (pointer:fine){
  .btn--fire:not([disabled]):hover{filter:drop-shadow(0 8px 18px rgba(232,100,26,.42))}
}
.btn--fire{transition:transform var(--t-fast) var(--ease-out),filter var(--t-mid) var(--ease-out)}
/* «Оплатить»: по наведению по раскалённой кнопке проходит блик жара */
.btn--sheen::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,246,214,.55) 48%,rgba(255,246,214,.15) 56%,transparent 68%);
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  transform:translateX(-110%);opacity:0;transition:transform 0s .7s,opacity var(--t-fast)}
@media (hover:hover) and (pointer:fine){
  .btn--sheen:not([disabled]):hover::after{transform:translateX(110%);opacity:1;transition:transform .9s var(--ease-out),opacity var(--t-fast)}
}

/* ── поля ── */
.label{display:block;font-weight:600;font-size:14px;color:var(--dust);margin-bottom:6px}
.input{width:100%;min-height:44px;padding:10px 12px;background:var(--soot);border:1px solid var(--rim-2);border-radius:2px;color:var(--bone);font-size:16px}
.input::placeholder{color:#8C6E61}
.input:hover{border-color:#8A4630}
.input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(242,164,28,.22)}
.input[aria-invalid="true"]{border-color:var(--bad)}
textarea.input{resize:vertical;line-height:1.5}
.hint{font-size:14px;color:var(--smoke);margin-top:6px;overflow-wrap:anywhere}
.hint.bad{color:var(--bad)}
.hint.ok{color:var(--ok)}

/* ── сообщение-тост ── */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:80;transform:translateX(-50%);
  max-width:calc(100% - 32px);padding:10px 16px;background:var(--soot);border:1px solid var(--rim-2);border-left:3px solid var(--ok);
  font-weight:600;font-size:15px;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);overflow-wrap:anywhere}
.toast.is-bad{border-left-color:var(--bad)}
.toast:not([hidden]){animation:toast-in var(--t-mid) var(--ease-spring) both}
@keyframes toast-in{from{opacity:0;translate:0 18px;scale:.96}}

/* ── общие появления (CSS-анимация стартует, когда элемент перестаёт быть hidden) ── */
@keyframes rise-in{from{opacity:0;translate:0 14px}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes pop{0%{scale:1}40%{scale:1.16}100%{scale:1}}

/* ── сегментированный переключатель (как в iOS): подложка скользит к выбранному ──
   K.seg() добавляет .seg и .seg-ind; без JS работает обычная подсветка выбранного. */
.seg{position:relative;isolation:isolate}
.seg > :not(.seg-ind){position:relative;z-index:1}
.seg-ind{position:absolute;left:0;top:0;z-index:0;pointer-events:none;transform-origin:0 0;will-change:transform}
.seg-ind--pill{background:#3A1E16;border:1px solid var(--ember);border-radius:2px;box-shadow:inset 0 -2px 0 var(--ember),0 6px 18px -10px rgba(232,100,26,.7)}
.seg-ind--bar{height:2px;background:linear-gradient(90deg,var(--flame),var(--ember),var(--gold))}

/* ── <dialog> без поддержки в браузере (iOS 15.0–15.3) ──
   KORNEI (02.11): там <dialog> — обычный тег без стилей. Закрытое прячем; открытое (K.openDialog ставит open + dlg-fallback)
   ставим по центру экрана поверх подложки .dlg-backdrop, длинное содержимое прокручивается внутри окна. */
dialog:not([open]){display:none}
dialog.dlg-fallback[open]{display:block;position:fixed;inset:auto;top:50%;left:50%;z-index:91;margin:0;
  transform:translate(-50%,-50%);max-width:calc(100vw - 2 * var(--gutter));max-height:calc(100% - 32px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.dlg-backdrop{position:fixed;inset:0;z-index:90;background:rgba(12,5,3,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.dlg-lock,html.dlg-lock body{overflow:hidden}

/* окна: появляются с лёгким увеличением, уходят быстрее, чем пришли (K.closeDialog ждёт конца .is-closing) */
dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog[open]{animation:dlg-in var(--t-mid) var(--ease-spring) both}
dialog[open]::backdrop,.dlg-backdrop{animation:fade-in var(--t-mid) var(--ease-out) both}
dialog.is-closing{animation:dlg-out 140ms var(--ease-in) both}
dialog.is-closing::backdrop,.dlg-backdrop.is-closing{animation:fade-out 140ms var(--ease-in) both}
@keyframes dlg-in{from{opacity:0;scale:.94;translate:0 8px}}
@keyframes dlg-out{to{opacity:0;scale:.97}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}