/* Нейтральна тема симулятора (simulator-mini, simulator-intensive, 04.11.2026).
   Лише для neutral.html, поверх quiz.css: розкладка й поведінка ті самі,
   міняються кольори, шрифти й форма елементів. Стиль — за макетом замовника
   «Симулятор логіста»: світлий теплий фон, білі картки, золото для акцентів і
   вибору, червоний бренду для дій і грошей, Oswald у заголовках.
   Шрифти — свої файли (Oswald, Manrope; SIL OFL 1.1), лише кирилиця й латиниця. */
@font-face{font-family:Oswald;src:url('assets/oswald-cyrillic.woff2') format('woff2');font-weight:500 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Oswald;src:url('assets/oswald-latin.woff2') format('woff2');font-weight:500 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;src:url('assets/manrope-cyrillic.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url('assets/manrope-latin.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f4f2ee; --surface:#fff; --surface-2:#faf8f3; --line:#e6e1d6; --line-2:#d6cfbf;
  --fg:#1b1a17; --muted:#6b675f; --soft:#8f897d;
  /* --pumpkin лишився іменем акценту з quiz.css: тут це червоний бренду */
  --pumpkin:#c8281f; --pumpkin-ink:#fff; --pumpkin-soft:#fdf1ef; --red-line:#f1cdc8;
  --gold1:#f6e1a6; --gold2:#e2b552; --gold-deep:#b98a26; --gold-text:#7d5f12; --gold-soft:#fff8e6; --gold-line:#efdcab;
  --ok:#1b7a49; --ok-soft:#eef7f1; --ok-line:#cbe5d5; --warn:#7d5f12; --bad:#b42318;
  --bubble:#fff; --paper:#fffdf8; --paper-ink:#2a2620; --paper-line:#d9d1bf; --stamp:#1b7a49;
  --shadow:0 1px 2px rgba(27,26,23,.04),0 8px 24px -14px rgba(27,26,23,.16);
  --f-display:"Oswald","Arial Narrow",Arial,sans-serif;
  --f-spook:"Oswald","Arial Narrow",Arial,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
body{background:radial-gradient(ellipse 80% 40% at 85% 0%,#fff,transparent 70%) no-repeat,var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
:focus-visible{outline-color:var(--gold-deep)}
.btn:focus-visible,.choice:focus-visible,.pick:focus-visible,.carrier-card:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
::selection{background:#f6e1a6}

/* ── Шапка ── */
.top{background:#ffffffeb;border-bottom:1px solid var(--line);box-shadow:0 1px 0 #fff inset}
.quiz-brand{color:var(--fg);font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.04em;gap:4px}
.bar .quiz-brand{font-size:23px}
.quiz-brand small{font-family:var(--f-body);font-weight:700;font-size:8px;letter-spacing:4.6px;color:var(--muted)}
.where svg{width:30px;height:30px}
.where b{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--fg)}
.where span{font-size:12px;color:var(--muted);margin-top:2px}
/* Заробіток — «гаманець»: темна плашка, золота монета, при кожному
   нарахуванні спалах (клас .bump ставить quiz.js на 280 мс, згасає повільно) */
.earn{grid-template-columns:auto auto;align-items:center;justify-items:start;column-gap:10px;padding:6px 16px 6px 6px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 20px -16px rgba(27,26,23,.55);transition:box-shadow .9s cubic-bezier(.16,1,.3,1),border-color .9s}
.earn:before{content:"€";grid-row:1 / span 2;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(150deg,#fbecc4,var(--gold2));box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);color:var(--gold-text);font:700 17px/1 var(--f-display)}
.earn span{grid-column:2;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.1}
.earn b{grid-column:2;font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.01em;line-height:1.05;color:var(--fg);margin:2px 0 0;transform-origin:left center}
.earn.bump{border-color:#a9d8bd;box-shadow:0 0 0 4px rgba(27,122,73,.12),0 8px 20px -16px rgba(27,26,23,.55);transition-duration:.12s}
.earn.bump b{color:var(--ok)}
.prog{height:3px;background:#efe9db}
.prog i{background:linear-gradient(90deg,var(--gold2),var(--pumpkin))}

/* ── Етапи зліва ── */
.mission-eyebrow{font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.mission-list li{color:var(--soft)}
.mission-list b{font-size:13px;color:inherit}
.mission-list div>span{font-size:11px}
.mission-number{background:#fff;border-color:var(--line-2);color:var(--soft);font-weight:700}
.mission-list li:not(:last-child):after{border-color:var(--line-2)}
.mission-list .active{color:var(--fg)}
.mission-list .active .mission-number{color:#fff;border-color:var(--pumpkin);background:var(--pumpkin);box-shadow:0 6px 16px -8px rgba(200,40,31,.8)}
.mission-list .complete{color:var(--muted)}
.mission-list .complete .mission-number{color:#fff;border-color:var(--ok);background:var(--ok)}

/* ── Екран ── */
.pane h1,.pane h2{font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.01em;line-height:1.16;color:var(--fg);text-wrap:balance}
.pane h1{font-size:36px}
.pane h2{font-size:29px}
.pane h2[style]{font-size:20px!important}
.lead{color:var(--muted);font-size:15px;line-height:1.7}
.fine{color:var(--muted);font-size:12px}
.spook{font-family:var(--f-display);font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--pumpkin)}
.answer-label{font-weight:800;color:var(--soft);letter-spacing:.12em}
/* «Кейс 1 · Фура з Іспанії · Крок 2 з 6» — плашка-капсула */
.step{justify-self:start;display:inline-flex;align-items:center;gap:12px;padding:5px 18px 5px 5px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:var(--shadow)}
.step .spook{font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--fg);background:linear-gradient(90deg,var(--gold1),var(--gold2));border:0;border-radius:999px;padding:6px 14px}
.step span:last-child{font-size:13px;font-weight:600;color:var(--muted)}

/* ── Кнопки ── */
.btn{border-radius:999px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;font-size:13px;padding:15px 26px}
.btn-main{color:#fff;background:linear-gradient(90deg,#e0372b,#b3221b);border-color:transparent;box-shadow:0 12px 24px -14px rgba(179,34,27,.85)}
.btn-main:hover:not(:disabled){filter:brightness(1.07)}
.btn-ghost{background:#fff;border-color:var(--line-2);color:var(--fg)}
.btn-ghost:hover:not(:disabled){border-color:var(--gold2);filter:none}
.btn-wide{font-size:14px}
.change-answer{color:var(--muted)}
.change-answer:hover{color:var(--fg)}

/* ── Листування ── */
.chat-avatar{background:#e6ebf2;border-color:#fff;color:#34425a;box-shadow:0 0 0 1px var(--line)}
.carrier .chat-avatar{background:#f3e6c6;color:#6b5420}
.message-bubble{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.carrier .message-bubble{background:#fffaf0;border-color:#eee2c4}
.msg .who{color:var(--muted);font-weight:800;font-size:11px}
.message-meta time{color:var(--soft);font-size:10px}
.msg.message{font-size:15px;line-height:1.65}
.me .message-bubble{background:#fdf1ef;border-color:var(--red-line)}
.me .who{color:#a8201a}
.me time{color:#b9827c}
.message-receipt{color:var(--pumpkin)}
.msg.anna img.chat-avatar{border:0;box-shadow:0 0 0 2px var(--gold2)}
.msg.anna .message-bubble{background:linear-gradient(135deg,var(--gold-soft),#fff);border-color:var(--gold-line)}
.msg.anna .who{color:var(--gold-text)}
/* Підказка Анни в листуванні — тепла картка, а не рядок дрібним шрифтом */
.guide-note{align-items:flex-start;gap:12px;padding:13px 16px;border:1px solid var(--gold-line);border-radius:14px;background:var(--gold-soft);color:#4a4130;font-size:14px;line-height:1.7}
.guide-icon{width:22px;height:22px;border:0;background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--fg);font-weight:800;font-size:12px;margin-top:1px}
.conversation-label{color:var(--soft);font-weight:800;border-color:var(--line)}

/* ── Варіанти відповіді ── */
.choice,.pick{background:#fff;border:1px solid var(--line);color:var(--fg);box-shadow:var(--shadow)}
.choice{font-size:15px;font-weight:500}
.pick b{font-size:15px;font-weight:700}
.pick>span:not(.pic){font-size:13px;color:var(--muted)}
.pick:before{color:var(--soft);font-weight:700}
.pick .pic,.pick:has(.pic) .pic{color:#b7ae9c}
.pick:after,.choice:after{border-color:var(--line-2);background:#fff}
.pick:hover:not(:disabled),.choice:hover:not(:disabled){background:#fffdf7;border-color:var(--gold2)}
.pick.picked,.choice.picked{background:var(--gold-soft);border-color:var(--gold2)}
.pick.picked:before{color:var(--gold-text)}
.pick.picked .pic{color:var(--gold-deep)}
.pick.picked:after,.choice.picked:after{border:5px solid var(--gold-deep);background:#fff}
.choice:disabled,.pick:disabled{opacity:.5}
.choice.picked,.pick.picked{opacity:1}

/* Висновок після відповіді */
.note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:12px;font-size:14px;line-height:1.7;color:var(--fg);box-shadow:var(--shadow)}
.note.ok{background:var(--ok-soft);border-color:var(--ok-line);border-left-color:var(--ok)}
.note.ok b{color:var(--ok)}
.note.hint{background:var(--pumpkin-soft);border-color:var(--red-line);border-left-color:var(--pumpkin)}
.note.hint b{color:#a8201a}
.note b{font-size:15px}
.tipline{padding:11px 15px;border:1px solid var(--gold-line);border-radius:12px;background:var(--gold-soft);color:#4a4130;font-size:14px;line-height:1.65}
.tipline b{color:var(--gold-text)}
.chips{gap:8px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--fg);font-size:13px;font-weight:600;padding:6px 12px}

/* Біржа перевізників */
.row.carrier-card{background:#fff;border:1px solid var(--line);color:var(--fg);box-shadow:var(--shadow);border-radius:14px}
.carrier-card:hover:not(:disabled){background:#fffdf7;border-color:var(--gold2)}
.carrier-truck{color:#b7ae9c}
.carrier-details .t-name{font-size:15px}
.carrier-details .t-spec{font-size:13px;color:var(--muted)}
.t-route{font-size:13px;color:var(--muted)}
.carrier-price .t-price{font-family:var(--f-display);font-weight:600;font-size:23px;letter-spacing:.01em}
.card-radio{border-color:var(--line-2);background:#fff}
.row.carrier-card.right{border-color:var(--ok);background:var(--ok-soft)}
.carrier-card.right .card-radio{border:5px solid var(--ok);background:#fff}
.carrier-card.right .carrier-truck{color:var(--ok)}

/* Розрахунок */
.sum{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.calc-row{font-size:14px;color:var(--muted)}
.calc-row b{color:var(--fg)}
.calc-row.total{border-color:var(--line);color:var(--fg);font-weight:700}
.big{font-family:var(--f-display);font-weight:700;letter-spacing:.01em;color:var(--pumpkin)}

/* Договір */
.doc{background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(27,26,23,.45);font-size:14px}
.doc h3{font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:17px}
.doc dt{color:var(--muted);opacity:1}
.stampx{background:#fffdf8f0;color:var(--stamp);border-color:var(--stamp)}

/* Рейс і доставка */
.shipment-history{background:#fff;border-color:var(--line);box-shadow:var(--shadow);font-size:13px}
.shipment-history li{color:var(--muted);font-size:13px}
.shipment-history time{color:var(--soft);font-size:11px}
.shipment-history .current{color:var(--fg)}
.shipment-history .current time{color:var(--pumpkin)}
.delivery-confirmation{background:var(--ok-soft);border-color:var(--ok-line)}
.delivery-check{border-color:var(--ok);background:var(--ok);color:#fff}
.delivery-confirmation b{color:var(--ok)}
.delivery-confirmation p{color:#4c5a51;font-size:13px}
.delivery-confirmation strong{color:var(--fg)}

/* Кейс закрито */
.closed{background:linear-gradient(160deg,var(--gold-soft),#fff 70%);border:1px solid var(--gold-line);border-radius:22px;box-shadow:var(--shadow)}
.closed .spook{font-size:24px;color:var(--fg);letter-spacing:.04em}
.closed .lbl{color:var(--gold-text);font-weight:800}
.closed .big{font-size:52px}
.closed p{color:var(--muted);font-size:14px}
/* У «В'їзді» картка стоїть у .arrival-flow, де кнопки — ліворуч */
.arrival-flow .closed .btn{justify-self:center}

/* Три клієнти */
.cl{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.cl b{font-size:15px}
.cl span{font-size:13px;color:var(--muted)}
.fill{border-color:var(--gold-deep)}
.fill .box{background:var(--gold2);color:var(--fg)}
.fill .b2{background:var(--gold1);opacity:1}

/* ── Форма ── */
.formcard{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 50px -30px rgba(27,26,23,.4)}
.formcard>b{font-size:16px}
.gets{font-size:14px}
.gets li::before{background:var(--gold2)}
.field label{font-size:12px;font-weight:700;color:var(--muted)}
.field input,.field select{background:#f6f4ef;border:1px solid transparent;color:var(--fg);border-radius:12px}
.field input::placeholder{color:#a39d90}
.field input:focus,.field select:focus{background:#fff;border-color:var(--gold2)}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%236b675f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.phone-line{background:#f6f4ef;border:1px solid transparent;border-radius:12px}
.phone-line:focus-within{background:#fff;border-color:var(--gold2)}
.phone-pick{color:var(--fg);border-right-color:var(--line)}
.phone-menu{background:#fff;border-color:var(--line);box-shadow:0 18px 40px -12px rgba(27,26,23,.3)}
.phone-opt{color:var(--fg)}
.phone-opt[aria-selected="true"]{background:var(--gold-soft)}
@media(hover:hover) and (pointer:fine){.phone-opt:hover{background:#f6f4ef}}
.err{color:var(--bad)}

/* ── Результат: золота шапка з рівнем, навички — на білому ── */
.level{background:linear-gradient(135deg,#f8e7b4,#e4b956);border:0;border-radius:22px;color:var(--fg);padding:26px 28px;overflow:hidden;box-shadow:0 20px 50px -30px rgba(125,95,18,.7)}
.level>.fine{color:#5c4710;font-size:13px}
.level .spook{color:var(--fg);font-size:36px;letter-spacing:.02em}
.level>p{color:#3d3320;font-size:14px}
.level .kv span{color:#5c4710;font-weight:800}
.level .kv b{font-family:var(--f-display);font-weight:700;font-size:30px;color:var(--fg)}
.level .skills{margin:6px -28px -26px;padding:22px 28px 26px;background:#fff;border-top:0}
.sk{font-size:13px;color:var(--fg)}
.sk b{color:var(--muted)}
.sk .tr{height:6px;background:#efebe2}
.sk .tr i{background:linear-gradient(90deg,var(--gold2),var(--pumpkin));border-radius:6px}

/* ── Фінал з бонусами ── */
.fx-eyebrow{justify-self:start;gap:8px;padding:7px 15px;border-radius:999px;background:linear-gradient(90deg,var(--gold1),var(--gold2));color:var(--fg);font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.06em}
.fx-eyebrow:before{display:none}
.fx-head{gap:14px}
.fx-head em{color:var(--pumpkin)}
.fx-head .lead{font-size:15px;line-height:1.7}
.fx-timer{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-text);font-size:13px;border-radius:16px;padding:12px 18px}
.fx-timer b{font-family:var(--f-display);font-weight:600;font-size:24px;letter-spacing:.03em;color:var(--pumpkin)}
.fx-video{border:0;border-radius:18px;box-shadow:0 26px 50px -26px rgba(27,26,23,.55)}
.fx-card{background:#fff;border-color:var(--line);border-radius:20px;box-shadow:var(--shadow)}
.anna-quote>img{border:0;box-shadow:0 0 0 2px var(--gold2)}
.anna-quote blockquote{color:var(--fg);font-size:15px;line-height:1.75}
.anna-quote figcaption{color:var(--gold-text);font-weight:700;font-size:12px}
.fx-tinfo>div{background:#fff;border-color:var(--line);border-radius:18px;box-shadow:var(--shadow)}
.fx-tinfo>.is-vip{border-color:var(--gold2);background:linear-gradient(135deg,var(--gold-soft),#fff 70%)}
.fx-tinfo b{font-family:var(--f-display);font-weight:600;font-size:22px;letter-spacing:.03em}
.fx-tinfo span{font-size:13px;color:var(--muted)}
.fx-tag{background:linear-gradient(90deg,var(--gold1),var(--gold2));color:var(--fg);font-size:10px;border-radius:999px;padding:3px 10px}
.fx-bonus{background:#fff;border-color:var(--line);border-radius:18px;box-shadow:var(--shadow)}
.fx-bonus.is-vip{border-color:var(--gold-line);background:linear-gradient(135deg,var(--gold-soft),#fff 60%)}
.fx-bonus.is-hero{border-color:var(--red-line);background:radial-gradient(120% 90% at 0% 0%,#fdebe8,transparent 60%),#fff}
.fx-bonus.is-vip.is-hero{border-color:var(--gold2);background:radial-gradient(120% 90% at 0% 0%,#fbecc4,transparent 60%),#fff}
.fx-bonus-top{font-size:11px;letter-spacing:.1em}
.fx-bonus-ic{color:var(--pumpkin);background:var(--pumpkin-soft);border-color:var(--red-line)}
.fx-bonus.is-vip .fx-bonus-ic{color:var(--gold-text);background:var(--gold-soft);border-color:var(--gold-line)}
.fx-bonus-n{color:var(--soft)}
.fx-bonus-top em{color:var(--soft);font-size:10px}
.fx-bonus.is-vip .fx-bonus-top em{color:var(--fg);background:linear-gradient(90deg,var(--gold1),var(--gold2));border-radius:999px;padding:3px 10px}
.fx-bonus h3{font-size:17px;line-height:1.4;color:var(--fg)}
.fx-bonus.is-hero h3{font-size:19px}
.fx-bonus p,.fx-bonus ul{font-size:14px;color:var(--muted)}
.fx-bonus .fx-value{border-top-color:var(--line);font-size:12px;color:var(--muted)}
.fx-value s{font-family:var(--f-display);font-weight:600;font-size:18px;color:var(--fg);text-decoration-color:var(--pumpkin)}
.fx-value b{color:var(--ok);font-size:11px}
.fx-vip-line{color:var(--gold-text);font-size:13px;letter-spacing:.02em}
.fx-total{border-top-color:var(--line-2)}
.fx-total span{color:var(--muted);font-size:14px}
.fx-total b{font-family:var(--f-display);font-weight:700;font-size:30px;color:var(--pumpkin)}
.fx-proof>div{background:#fff;border-color:var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px 10px}
.fx-proof b{font-family:var(--f-display);font-weight:700;font-size:28px;color:var(--pumpkin)}
.fx-proof span{font-size:12px;color:var(--muted)}
.fx-offer{border:1.5px solid var(--red-line);background:radial-gradient(ellipse at top right,#fdebe8,transparent 60%),#fff}
.fx-offer>p{color:var(--muted);font-size:14px}
.fx-offer .fx-offer-title{font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:24px;line-height:1.2;color:var(--fg)}
@keyframes fx-flash{35%{box-shadow:0 0 0 3px var(--gold2),0 0 50px rgba(226,181,82,.7)}}
.fx-steps{background:#fff;border-color:var(--line);border-radius:20px;box-shadow:var(--shadow)}
.fx-steps b{background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--fg);border-radius:50%}
.fx-steps p{font-size:14px}
.fx-paid{color:var(--soft)}

/* ── Вступ (лише тут; на інших сайтах — лендинг index.html) ──
   Один екран, одна дія. Логотип у шапці, фура праворуч, список кейсів
   ховаємо до старту (body[data-night="0"] — це вступ, ставить frame()) */
.quiz-brand img{display:block;height:46px;width:auto}
body[data-night="0"] .mission{display:none}
body[data-night="0"] .quiz-layout{grid-template-columns:minmax(0,1fr)}
body[data-night="0"] .pane{max-width:none}
.nx-hero{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:24px 48px;align-items:center;align-content:center;min-height:calc(100svh - 226px);padding-block:8px 24px}
.nx-hero-txt{display:grid;gap:22px;justify-items:start}
.nx-kicker{padding:7px 15px;border-radius:999px;background:var(--gold-soft);border:1px solid #efd9a0;color:var(--gold-text);font-size:14px;font-weight:700;line-height:1.2}
.nx-hero h1{font-size:clamp(40px,4.3vw,58px);line-height:1.02;letter-spacing:.005em;margin:-4px 0 0}
.nx-sub{max-width:44ch;font-size:18px;line-height:1.6;color:#3a3732;text-wrap:pretty}
.nx-sub b{font-weight:700;color:var(--pumpkin)}
/* Головна кнопка: більша, під нею розмите сяйво, що дихає, по ній — відблиск */
.nx-cta{position:relative;isolation:isolate}
.nx-cta:before{content:"";position:absolute;inset:14% 4% -6%;z-index:-1;border-radius:999px;background:linear-gradient(90deg,#ff6a3d,#ee3d2f 45%,#b3221b);filter:blur(20px);opacity:.5}
.nx-hero .btn-main{position:relative;overflow:hidden;isolation:isolate;min-height:64px;padding:0 40px;font-size:16px;letter-spacing:.06em;margin-top:6px;background:linear-gradient(90deg,#ee3d2f,#c8261d 55%,#a91c16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 28px -16px rgba(150,20,14,.9)}
.nx-hero .btn-main:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 66%);transform:translateX(-130%)}
.nx-hero .btn-main:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.nx-hero .btn-main:focus-visible{outline:3px solid var(--gold2);outline-offset:4px}
.nx-guide{display:flex;align-items:center;gap:14px;margin-top:8px}
.nx-guide img{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 6px 16px -8px rgba(27,26,23,.45)}
.nx-guide p{font-size:15px;line-height:1.4;color:var(--fg)}
.nx-guide b{font-weight:700}
.nx-guide span{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
/* Фура заходить у праве поле сторінки, скільки його є (без гортання вбік) */
.nx-truck{display:block;width:calc(100% + clamp(0px,(100vw - 1200px) / 2,110px));max-width:none;height:auto;filter:drop-shadow(0 26px 22px rgba(27,26,23,.16)) drop-shadow(0 4px 4px rgba(27,26,23,.12))}
@media(prefers-reduced-motion:no-preference){
  .nx-truck{animation:nx-arrive .9s cubic-bezier(.16,1,.3,1) both}
  .nx-hero-txt>*{animation:nx-rise .6s cubic-bezier(.16,1,.3,1) both}
  .nx-hero-txt>:nth-child(2){animation-delay:.05s}
  .nx-hero-txt>:nth-child(3){animation-delay:.1s}
  .nx-hero-txt>:nth-child(4){animation-delay:.15s}
  .nx-hero-txt>:nth-child(5){animation-delay:.2s}
  .nx-cta:before{animation:nx-glow 2.6s ease-in-out .8s infinite}
  .nx-hero .btn-main:after{animation:nx-shine 4s cubic-bezier(.4,0,.2,1) 1.4s infinite}
  .earn b{transition:transform .25s cubic-bezier(.16,1,.3,1),color .9s ease-out}
  .earn.bump b{transition:transform .25s cubic-bezier(.16,1,.3,1),color .1s}
}
@keyframes nx-glow{0%,100%{opacity:.45;transform:scale(.96,.9)}50%{opacity:.95;transform:scale(1.06,1.3)}}
@keyframes nx-shine{0%{transform:translateX(-130%)}35%,100%{transform:translateX(130%)}}
@keyframes nx-arrive{from{opacity:0;transform:translateX(48px)}}
@keyframes nx-rise{from{opacity:0;transform:translateY(10px)}}

/* ── Панелі внизу й підвал ── */
.dock{background:#ffffffef;border-top:1px solid var(--line);box-shadow:0 -12px 30px -22px rgba(27,26,23,.5)}
.dock-in span{color:var(--muted);font-size:12px}
.dock-in span b{font-family:var(--f-display);font-weight:600;font-size:22px;color:var(--pumpkin);letter-spacing:.02em}
.dock .btn{font-size:12px}
.nextbar{background:linear-gradient(to top,var(--bg) 62%,rgba(244,242,238,0))}
.nextbar .btn{box-shadow:0 12px 30px -10px rgba(179,34,27,.6)}
footer{background:transparent;border-color:var(--line);color:var(--muted);font-size:12px;word-spacing:.12em}

@media(min-width:761px) and (max-height:860px){
  .pane h2{font-size:26px}
  .pane h1{font-size:32px}
  .nx-hero h1{font-size:clamp(38px,4vw,50px)}
  .closed .big{font-size:44px}
}
@media(max-width:1000px) and (min-width:761px){
  .nx-hero{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:24px 28px}
  .nx-hero h1{font-size:38px}
  .nx-sub{font-size:16px}
  .quiz-brand img{height:40px}
}
@media(max-width:760px){
  .bar{padding-block:8px 9px}
  .where svg{width:24px;height:24px}
  .where b{font-size:13px}
  .where span{font-size:11px}
  .earn{column-gap:8px;padding:4px 12px 4px 4px;border-radius:14px}
  .earn:before{width:30px;height:30px;font-size:15px}
  .earn span{font-size:10px}
  .earn b{font-size:19px}
  .pane h2{font-size:22px;line-height:1.18;letter-spacing:.005em}
  .pane h1{font-size:25px;line-height:1.15}
  .pane h2[style]{font-size:17px!important}
  .pane > .spook[style]{font-size:18px!important}
  .msg.message{font-size:14px;line-height:1.55}
  .msg .who{font-size:10px}
  .guide-note{padding:10px 12px;font-size:13px;line-height:1.55}
  .guide-icon{width:20px;height:20px}
  .choice{font-size:14px}
  .pick b{font-size:14px}
  .pick>span:not(.pic){font-size:12px}
  .note{font-size:13px;line-height:1.55}
  .note b{font-size:14px}
  .tipline{font-size:13px;padding:9px 12px;line-height:1.5}
  .chip{font-size:12px;padding:5px 10px}
  .btn{font-size:13px;padding:12px 20px}
  .carrier-details .t-name{font-size:14px}
  .carrier-details .t-spec,.t-route{font-size:12px}
  .carrier-price .t-price{font-size:20px}
  .calc-row{font-size:13px}
  .closed .spook{font-size:20px}
  .closed .big{font-size:38px}
  .closed p{font-size:13px}
  .level{padding:20px 18px}
  .level .spook{font-size:27px}
  .level .kv b{font-size:24px}
  .level .skills{margin:4px -18px -20px;padding:18px 18px 20px}
  .fx-timer b{font-size:21px}
  .fx-offer .fx-offer-title{font-size:20px}
  .fx-total b{font-size:26px}
  .fx-proof{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .fx-proof>div{padding:12px 6px}
  .fx-proof b{font-size:21px}
  .fx-proof span{font-size:11px}
  .fx-bonus h3{font-size:16px}
  .fx-bonus.is-hero h3{font-size:17px}
  .fx-bonus p,.fx-bonus ul{font-size:13px}
  .dock-in span{font-size:11px}
  .dock-in span b{font-size:19px}
  .quiz-brand img{height:34px}
  body[data-night="0"] .quiz-layout{padding-top:8px}
  body[data-night="0"] .bar .quiz-brand{display:block}
  body[data-night="0"] .where{display:none}
  .nx-hero{display:flex;flex-direction:column;align-items:stretch;gap:14px;min-height:0;padding:0}
  .nx-truck{order:-1;width:calc(100% + 12px);margin:0 -4px 2px -8px}
  .nx-hero-txt{gap:16px}
  .nx-kicker{font-size:13px;padding:6px 12px 6px 10px}
  .nx-hero h1{font-size:34px;line-height:1.02}
  .nx-sub{font-size:16px;line-height:1.55}
  .nx-hero .btn-main{width:100%;min-height:60px;font-size:15px;margin-top:4px}
  .nx-cta{justify-self:stretch}
  .nx-guide{gap:12px;margin-top:4px}
  .nx-guide img{width:46px;height:46px}
  .nx-guide p{font-size:14px}
  .nx-guide span{font-size:12px}
  footer{font-size:11px}
}
@media(max-width:760px) and (max-height:600px){
  .pane h2{font-size:20px}
  .nx-hero h1{font-size:28px}
  .nx-hero-txt{gap:12px}
  .nx-truck{width:78%;align-self:center;margin:0}
}
@media(max-width:360px){
  .pane h2{font-size:20px}
  .nx-hero h1{font-size:30px}
  .quiz-brand img{height:30px}
  .earn{padding:4px 10px 4px 4px}
  .earn:before{width:26px;height:26px;font-size:13px}
}