/* Стили симулятора поверх стилей исходной игры (app.css + pds.css). Цвета – из исходной игры. */
:root {
  --brand: #31b7bc;
  --brand-dark: #206267;
  --brand-soft: #e4f7f4;
  --brand-line: #9ee8dd;
  --lamp: #febe48;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --danger: #b12020;
}
.pds-app { background: #f8fafc; }
.sim-main { background: #d9f3ef; }

/* ===== Страница расчетов ===== */
.calc-page { font-family: Arial, sans-serif; color: var(--ink); background: #fff; font-size: 15px; line-height: 1.45; }
.calc-header { background: #eff4f8; border-bottom: 1px solid var(--line); padding: 12px 0; }
.calc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.calc-h1 { font-family: Neucha, sans-serif; font-size: 2.25rem; text-transform: uppercase; margin: 32px 0 8px; }
.calc-h2 { font-family: Neucha, sans-serif; font-size: 1.75rem; text-transform: uppercase; margin: 48px 0 12px; color: var(--brand-dark); }
.calc-h3 { font-size: 1.125rem; font-weight: 700; margin: 28px 0 8px; }
.calc-lead { max-width: 60rem; font-size: 1.0625rem; }
.calc-lead a, .calc-rules a { color: var(--brand-dark); text-decoration: underline; }
.calc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.calc-pill { border: 1px solid var(--brand); border-radius: 999px; padding: 4px 14px; color: var(--brand-dark); background: var(--brand-soft); }
.calc-pill:hover { background: var(--brand); color: #fff; }
.calc-rules ul { list-style: disc; padding-left: 1.25rem; max-width: 62rem; }
.calc-rules li { margin: 6px 0; }
.calc-note { color: var(--muted); font-size: 13px; max-width: 62rem; }
.calc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.calc-table th { background: var(--brand-line); text-align: left; padding: 6px 8px; font-weight: 700; vertical-align: bottom; }
.calc-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; vertical-align: top; }
.calc-table ul { list-style: disc; padding-left: 1rem; margin: 0; }
.calc-table td:nth-child(2) { min-width: 220px; }
.calc-table td:nth-child(3) { min-width: 220px; }
.calc-table td:nth-child(4) { min-width: 320px; }
.calc-opts li { margin-bottom: 8px; }
.calc-eff { color: var(--brand-dark); font-size: 12px; }
.calc-num td, .calc-num th { text-align: right; white-space: nowrap; min-width: 0 !important; }
.calc-num td:first-child, .calc-num th:first-child, .calc-num td:nth-child(2), .calc-num th:nth-child(2) { text-align: left; }
.calc-num td.calc-l { text-align: left; white-space: normal; min-width: 200px !important; }
.calc-first td { border-top: 2px solid var(--brand-line); }
.calc-hl td { background: #fff7e6; font-weight: 700; }
.calc-err { color: var(--danger); white-space: pre-wrap; }
.calc-hero { padding-bottom: 24px; border-bottom: 2px dashed var(--brand-line); }

/* ===== Игра ===== */
.sim-modal-open { overflow: hidden; }
.sim-pad { padding-bottom: 7rem; }
.sim-help { max-width: 11rem; }
.sim-help:hover span { text-decoration: underline; }

/* выбор героя */
.sim-heroes { display: flex; justify-content: center; gap: 4px; width: 100%; padding: 8px 0; position: relative; }
.sim-hero-btn { flex: 1 1 0; display: flex; justify-content: center; transition: filter .2s, opacity .2s, transform .2s; }
.sim-hero-btn img { width: 100%; max-width: 120px; height: auto; }
.sim-hero-btn.is-active { transform: scale(1.12); }
.sim-hero-btn:hover { opacity: 1; filter: none; }
@media (min-width: 1280px) { .sim-hero-btn img { max-width: 150px; } }

/* деньги года */
.sim-money { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.sim-money-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sim-money-head span { font-size: 1.125rem; }
.sim-money-head strong { font-size: 1.75rem; font-weight: 400; color: var(--brand-dark); white-space: nowrap; }
.sim-money-lines { margin-top: 6px; font-size: 1rem; line-height: 1.3; color: var(--muted); }
.sim-money-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px dashed var(--line); }
.sim-money-lines b { white-space: nowrap; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

.sim-task { margin-top: 12px; background: var(--brand); color: #fff; border: 2px solid var(--brand-dark); border-radius: 8px; padding: 12px 14px; font-size: 1.125rem; line-height: 1.3; }
.sim-task-label { display: block; text-transform: uppercase; font-size: .8125rem; letter-spacing: .05em; opacity: .85; }
.sim-hint { margin-top: 8px; font-size: 1rem; line-height: 1.3; color: var(--brand-dark); background: var(--brand-soft); border-radius: 8px; padding: 8px 12px; }
.sim-events { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 1.0625rem; line-height: 1.3; }
.sim-alert { background: #fff1f1; border: 1px solid #f3b4b4; border-radius: 8px; padding: 10px 12px; font-size: 1.0625rem; line-height: 1.35; }
.sim-alert p + p { margin-top: 4px; }

/* окно распределения */
.sim-chosen { margin-top: 12px; padding: 10px 12px; background: var(--brand-soft); border-radius: 8px; }
.sim-effects { margin-top: 10px; list-style: disc; padding-left: 1.25rem; }
.sim-effects li { margin: 2px 0; }
.sim-h3 { margin: 20px 0 6px; font-size: 16px; font-weight: 700; }
.sim-warn { margin-top: 12px; background: #fff7e6; border: 1px solid #f5c26b; border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.sim-neg { color: var(--danger); }
.sim-pds-hint { color: var(--brand-dark) !important; }
.sim-check { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.sim-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand-dark); flex-shrink: 0; }
.sim-required { padding: 10px 12px; background: #fff7e6; border-radius: 8px; margin-bottom: 4px; }

/* итог года */
.sim-goal { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.sim-goal-row { display: flex; justify-content: space-between; gap: 12px; font-size: 1.0625rem; }
.sim-goal-row b { font-weight: 400; white-space: nowrap; }
.sim-goal-target { margin-top: 6px; color: var(--brand-dark); }
.sim-bar { height: 12px; border: 1px solid #0f172a; border-radius: 2px; background: #fff; margin: 4px 0 8px; overflow: hidden; }
.sim-bar i { display: block; height: 100%; transition: width .7s; }
.sim-bar-total { background: var(--brand-line); }
.sim-bar-avail { background: #139fa1; }
.sim-small { margin-top: 6px; font-size: .9375rem; line-height: 1.3; color: var(--muted); }
.sim-details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; }
.sim-details summary { cursor: pointer; color: var(--brand-dark); }

/* правила */
.sim-text { font-size: 1.0625rem; line-height: 1.4; }
.sim-rules { list-style: decimal; padding-left: 1.25rem; }
.sim-rules li { margin: 6px 0; }
.sim-list { list-style: disc; padding-left: 1.25rem; }
.sim-list li { margin: 6px 0; }
.pds-balance-dialog .sim-list, .pds-balance-dialog .sim-rules { font-size: 14px; }

.sim-modal button:focus-visible, .sim-modal input:focus-visible, [data-act]:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sim-bar i, .sim-hero-btn { transition: none; } }

/* утилиты, которых нет в сборке исходной игры */
@media (min-width: 640px) { .sm\:p-6 { padding: 1.5rem; } }
@media (min-width: 1280px) { .xl\:pr-8 { padding-right: 2rem; } .xl\:gap-x-10 { column-gap: 2.5rem; } }
.gap-x-10 { column-gap: 2.5rem; }
.z-1 { z-index: 1; }
.sim-money-lines strong, .sim-goal-row strong { white-space: nowrap; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-term { font-weight: 700; }

/* Мог накопить и мотивация */
.sim-bar-best { background: #206267; }
.sim-motiv { display: flex; gap: 12px; align-items: center; background: #fff7e6; border: 1px solid #f5c26b; border-radius: 8px; padding: 10px 12px; font-size: 1.0625rem; line-height: 1.35; }
.sim-motiv.is-best { background: var(--brand-soft); border-color: var(--brand); }
.sim-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100; }
.sim-facts { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.sim-facts-title, .sim-card-label { text-transform: uppercase; font-size: .8125rem; letter-spacing: .05em; color: var(--brand-dark); margin-bottom: 4px; }
.sim-facts ul { font-size: 1.0625rem; line-height: 1.3; }
.sim-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px dashed var(--line); }
.sim-facts li:first-child { border-top: 0; }
.sim-facts li span:last-child { text-align: right; white-space: nowrap; }

/* Иллюстрация слева стоит на месте, правая колонка прокручивается (на широком экране).
   Отступ sticky = высота шапки сайта (77px, она тоже sticky) + 1.5rem, иначе колонка слегка съезжает вверх в начале прокрутки */
@media (min-width: 1280px) {
  .sim-scene-col { position: sticky; top: 6.3rem; align-self: start; padding-right: 2rem; }
  .sim-content-col { padding-left: 2rem; padding-bottom: 6.25rem; }
  .sim-pad { padding-bottom: 0; }
  .sim-scene-col .mt-6, .sim-scene-col .xl\:mt-20 { margin-top: 1.5rem; }
}
.sim-details .sim-goal { border: 0; padding: 8px 0 0; }

/* Нижняя панель: зеленая кнопка, «Как играть» и «Все накопления» на одной линии (широкий экран) */
@media (min-width: 1280px) {
  .sim-bar-row { align-items: center; margin-bottom: 2rem; }
  .sim-bar-row .next-button-box, .sim-bar-row .sim-bar-right { margin-bottom: 0; }
  .sim-bar-row > div { align-self: center; }
}
.sim-status { margin: 12px 0 20px; }
.sim-status .xl\:pl-8 { padding-left: 0; }
.sim-bar-links { display: flex; flex-direction: column; gap: 8px; }
.sim-switch { padding-left: 2.25rem; }
.sim-switch:hover { text-decoration: underline; }
/* Растушевка под нижней строкой: закрывает текст под кнопками и до края экрана, прогресс под картинкой остается открытым */
@media (min-width: 1280px) {
  .sim-fade { height: 11rem !important; bottom: -2rem !important; background: linear-gradient(to top, #fff 0%, #fff 60%, rgba(255,255,255,0) 100%) !important; }
}
.sim-details.sim-facts { padding: 10px 16px; }
.sim-details.sim-facts ul { margin-top: 6px; }
/* Свободные деньги года – аккордеон: сумма видна всегда, расшифровка по клику */
details.sim-money > summary { cursor: pointer; list-style: none; }
details.sim-money > summary::-webkit-details-marker { display: none; }
details.sim-money > summary span::before { content: '▸'; display: inline-block; width: 1.1em; color: var(--brand-dark); transition: transform .2s; }
details.sim-money[open] > summary span::before { transform: rotate(90deg); }
details.sim-money:not([open]) .sim-money-lines { display: none; }

/* Вкладки итога года */
.sim-tabs { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sim-tabs-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.sim-tab { padding: 10px 8px; font-size: 1.0625rem; line-height: 1.2; color: var(--brand-dark); border-left: 1px solid var(--line); text-align: center; transition: background .15s; }
.sim-tab:first-child { border-left: 0; }
.sim-tab::after { content: ' ▾'; font-size: .75em; }
.sim-tab:hover { background: var(--brand-soft); }
.sim-tab.is-active { background: var(--brand); color: #fff; }
.sim-tab.is-active::after { content: ' ▴'; }
.sim-tab-panel { border-top: 1px solid var(--line); padding: 10px 16px 12px; }
.sim-tab-panel .sim-goal { border: 0; padding: 0; }
.sim-facts-list { font-size: 1.0625rem; line-height: 1.3; }
.sim-facts-list li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px dashed var(--line); }
.sim-facts-list li:first-child { border-top: 0; }
.sim-facts-list li span:last-child { text-align: right; white-space: nowrap; }
@keyframes sim-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sim-tab-panel.is-opening { animation: sim-open .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .sim-tab-panel.is-opening { animation: none; } }

/* Карточка с аватаром: справа от баланса – «за год» и «мог бы еще» */
.sim-ava-side { flex-shrink: 0; padding-left: 14px; border-left: 1px dashed var(--line); display: flex; flex-direction: column; gap: 4px; }
.sim-ava-row { display: flex; flex-direction: column; line-height: 1.1; }
.sim-ava-row span { font-size: .8125rem; color: var(--muted); }
.sim-ava-row strong { font-weight: 400; font-size: 1.125rem; white-space: nowrap; }
.sim-ava-could { color: #b45309; }

/* Сумма в карточке задачи и расшифровка в окнах */
.sim-task-money { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.5); font-size: 1.375rem; }
.sim-modal-money { margin-top: 8px; font-size: 13px; }
.sim-modal-money summary { cursor: pointer; color: #206267; }
.sim-modal-money .sim-money-lines, .pds-balance-dialog .sim-money-lines { font-family: Arial, sans-serif; font-size: 13px; }
.sim-opt-note { display: block; margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); font-size: 1rem; line-height: 1.3; }

/* Кнопка «Все накопления»: крупнее, с процентом достижения цели */
.pds-balance-trigger { padding: 10px 14px; gap: 10px; }
.pds-balance-trigger img { width: 32px; }
.pds-balance-trigger .sim-trigger-text > span:first-child { font-size: 13px; }
.pds-balance-trigger strong { font-size: 26px; }
.pds-balance-trigger .sim-trigger-goal { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; color: #206267; }
.sim-mini-bar { display: block; width: 64px; height: 6px; border-radius: 3px; background: #e2e8f0; overflow: hidden; }
.sim-mini-bar b { display: block; height: 100%; background: #139fa1; }
.pds-balance-trigger .sim-trigger-goal { white-space: nowrap; }
@media (max-width: 480px) { .sim-mini-bar { width: 44px; } .pds-balance-trigger strong { font-size: 22px; } }

/* Итог игры: левая колонка стоит на месте, правая прокручивается (широкий экран) */
@media (min-width: 1280px) {
  .sim-result-left { position: sticky; top: 6.3rem; align-self: start; }
  .sim-result-trophy { margin-bottom: 1rem; }
  .sim-result-trophy img { max-height: 110px; width: auto; }
  /* нижние отступы – внутри правой колонки, чтобы левая не уезжала в конце прокрутки */
  .sim-result-section, .sim-result-section > .pds-container { padding-bottom: 0; }
  .sim-result-left .space-y-4 > * + * { margin-top: .75rem; }
  .sim-result-right { padding-bottom: 16rem; }
}

/* Экран «Как играть»: карточка правил заканчивается над нижней строкой и уходит под растушевку */
@media (min-width: 1280px) { .sim-rules-section .sim-content-col { margin-bottom: 14rem; } .sim-rules-section > .pds-container { padding-bottom: 0; } .sim-rules-section { padding-bottom: 0; } }

/* Нижняя строка: ссылки шрифтом игры, подпись под кнопками */
.sim-help, .sim-switch { font-size: 1rem; line-height: 1.15; }
.sim-help { max-width: 13rem; }
.sim-bar-note { position: relative; text-align: center; font-size: .8125rem; color: #64748b; margin: 0; padding: 0 0 6px; }
@media (min-width: 1280px) { .sim-bar-row { margin-bottom: .75rem; } }

/* Карточки «Вывод» и «Полезно знать»: заголовок над иконкой, текст начинается на уровне заголовка */
.sim-note-card { display: flex; align-items: flex-start; gap: 14px; padding: 12px 16px; }
.sim-note-side { flex-shrink: 0; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sim-note-side .sim-card-label { margin: 0; line-height: 1.1; }
.sim-note-side img { width: 40px; height: auto; }
.sim-note-text { flex: 1; font-size: 1.0625rem; line-height: 1.3; }
.sim-note-text p + p { margin-top: 4px; }
@media (min-width: 1280px) { .sim-note-text { font-size: 1.125rem; } }

/* Подпись – под прогрессом / внизу левой колонки; нижняя строка опущена к краю экрана */
.sim-disclaimer { margin: 10px 0 0; text-align: center; font-size: .8125rem; color: #64748b; }
@media (min-width: 1280px) {
  .pds-capital-bar { bottom: .5rem !important; }
  .sim-bar-row { margin-bottom: .5rem !important; }
}
@media (min-width: 1280px) { .pds-step-screen { padding-bottom: 0 !important; } }

/* Подпись в нижней строке, рядом с «Как играть», в две строки */
.sim-bar-right .sim-disclaimer { margin: 0; text-align: left; font-size: .75rem; line-height: 1.25; color: #64748b; flex: 1; }
@media (max-width: 767px) { .sim-bar-right { flex-wrap: wrap; row-gap: 4px; } .sim-bar-right .sim-disclaimer { order: 3; flex-basis: 100%; text-align: center; } }
@media (min-width: 768px) {
  .sim-bar-right { gap: 16px; }
  .sim-bar-right .sim-help { max-width: 10rem; }
  .sim-bar-right .sim-disclaimer { flex: 0 1 auto; white-space: nowrap; font-size: .6875rem; }
}

/* Нижняя строка: «Как играть» в одну строку, под ней мелкая подпись */
.sim-bar-links { gap: 4px; }
.sim-bar-links .sim-help { max-width: none !important; white-space: nowrap; }
.sim-bar-links .sim-disclaimer { margin: 0 0 0 2.25rem; text-align: left; font-size: .6875rem; line-height: 1.2; color: #64748b; white-space: nowrap; flex: none; order: 0; flex-basis: auto; }
@media (max-width: 767px) {
  .sim-bar-right { flex-wrap: nowrap !important; }
  .sim-bar-links { flex: 1; min-width: 0; }
  .sim-bar-links .sim-help, .sim-bar-links .sim-disclaimer { white-space: normal !important; }
  .sim-bar-links .sim-disclaimer { margin-left: 0; }
}

/* Подпись – только в окне «Как играть», красным */
.sim-disclaimer-red { margin: 10px 0 4px; padding: 8px 12px; border-radius: 8px; background: #fdecec; color: #b12020; font-weight: 700; }

/* Окно «Счета героя» в стиле игры */
.sim-game-dialog { font-family: Neucha, system-ui, sans-serif; font-size: 1.0625rem; color: #0f172a; background: #f4fbfa; }
.sim-gd-head { display: flex; align-items: center; gap: 12px; }
.sim-gd-avatar { width: 56px; height: 56px; }
.sim-game-dialog h2 { font-size: 1.75rem; text-transform: uppercase; line-height: 1.1; font-weight: 400; }
.sim-gd-head p { color: #206267; }
.sim-game-dialog h3 { margin: 18px 0 6px; font-size: .875rem; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; color: #206267; }
.sim-gd-total { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; background: #fff; border: 1px solid #9ee8dd; border-radius: 12px; }
.sim-gd-total img { width: 36px; margin-top: 4px; }
.sim-gd-total span { display: block; font-size: .9375rem; color: #475569; }
.sim-gd-total strong { display: block; font-size: 2rem; line-height: 1.1; font-weight: 400; color: #206267; }
.sim-gd-total small { display: block; margin-top: 6px; font-size: .9375rem; color: #475569; }
.sim-gd-goal { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: #206267; }
.sim-gd-goal .sim-mini-bar { width: 120px; }
.sim-game-dialog .pds-balance-rows { background: #fff; border-radius: 12px; padding: 4px 14px; border: 1px solid #e2e8f0; }
.sim-game-dialog .pds-balance-rows > div:last-child { border-bottom: 0; }
.sim-game-dialog .pds-balance-rows dt { font-size: 1.0625rem; }
.sim-game-dialog .pds-balance-rows small { font-size: .875rem; }
.sim-game-dialog .pds-balance-rows dd { font-size: 1.125rem; color: #94a3b8; }
.sim-game-dialog .pds-balance-rows .has dd { color: #206267; }
.sim-game-dialog .sim-money-lines { font-family: inherit !important; font-size: 1rem !important; background: #fff; border-radius: 12px; padding: 4px 14px; border: 1px solid #e2e8f0; }
.sim-game-dialog .sim-money-lines li:first-child { border-top: 0; }
.sim-game-dialog .pds-balance-note { font-size: .9375rem; color: #475569; }
.sim-gd-done { width: 100%; max-width: 20rem; margin: 18px auto 0; font-size: 1.5rem; line-height: 2rem; }

/* Откуда свободные деньги: в карточке задачи и в итоге года */
.sim-task-lines { margin-top: 4px; font-size: .9375rem; line-height: 1.3; opacity: .92; }
.sim-task-lines li::before { content: '· '; }
.sim-next { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; font-size: 1rem; line-height: 1.3; }
.sim-next strong { font-weight: 400; color: var(--brand-dark); }
.sim-card-note { margin: 2px 0 0; font-size: 12px; font-weight: 400; color: #b45309; }

.sim-next { padding: 8px 14px !important; font-size: .9375rem !important; }
.sim-next .sim-card-label { display: inline; margin-right: 4px; }
/* Крестик очистки поля – крупнее */
.pds-allocation-clear { font-size: 26px; line-height: 1; width: 44px; height: 44px; color: #206267; }
.pds-allocation-currency { right: 48px; }

/* «Цель»: второстепенная строка «мог накопить» мельче, у цели – процент */
.sim-goal-row.is-minor { font-size: .6875rem; color: #64748b; margin-top: 2px; }
.sim-goal-row.is-minor strong { color: #64748b; }
.sim-bar.is-minor { height: 6px; margin-top: 2px; }
.sim-goal-target strong { color: var(--brand-dark) !important; }

/* Быстрые кнопки распределения */
.sim-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.sim-quick button { padding: 6px 12px; border-radius: 999px; border: 1px solid #31b7bc; background: #e4f7f4; color: #206267; font-size: 13px; }
.sim-quick button:hover { background: #31b7bc; color: #fff; }

/* Перевод между счетами */
.sim-transfer { margin: 8px 0 4px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; background: #fbfdfd; }
.sim-transfer-title { margin: 0; font-size: 15px; font-weight: 700; color: #206267; }
.sim-quick button.is-on { background: #206267; border-color: #206267; color: #fff; }
.sim-transfer-note { margin: 6px 0 8px; font-size: 12px; color: #475569; }
.sim-transfer-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.sim-transfer-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.sim-transfer-form label:nth-child(3) { grid-column: 1 / -1; }
.sim-transfer-form select, .sim-transfer-form input { min-height: 44px; border: 1px solid #94a3b8; border-radius: 8px; padding: 8px; font-size: 16px; font-weight: 400; background: #fff; width: 100%; }
.sim-transfer-form .pds-allocation-amount input { padding-right: 32px; }
.sim-tf-cur { right: 12px !important; }
.sim-transfer-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.sim-transfer-actions button { padding: 8px 14px; border-radius: 999px; border: 1px solid #31b7bc; background: #e4f7f4; color: #206267; font-size: 14px; }
.sim-transfer-actions .sim-tf-go { margin-left: auto; background: #206267; color: #fff; border-color: #206267; }
.sim-transfer-actions button:disabled { opacity: .45; cursor: not-allowed; }
.sim-transfer-list { margin-top: 10px; }
.sim-transfer-list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px dashed #e2e8f0; font-size: 14px; }
.sim-transfer-list button { width: 36px; height: 36px; font-size: 22px; color: #206267; border-radius: 8px; }
.sim-transfer-list button:hover { background: #e4f7f4; }
@media (max-width: 480px) { .sim-transfer-form { grid-template-columns: 1fr; } }
/* Выбор счета: сумма крупно, название мелко под ней; нативный список прозрачный поверх */
.sim-tf-pick { position: relative; display: block; min-height: 64px; border: 1px solid #94a3b8; border-radius: 8px; background: #fff; }
.sim-tf-pick:focus-within { outline: 2px solid #31b7bc; outline-offset: 1px; }
.sim-tf-pick.is-disabled { background: #f1f5f9; border-color: #cbd5e1; }
.sim-tf-pick::after { content: ''; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #206267; border-bottom: 2px solid #206267; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sim-tf-face { display: flex; flex-direction: column; justify-content: center; min-height: 62px; padding: 6px 30px 6px 10px; pointer-events: none; }
.sim-tf-face b { font-size: 20px; line-height: 1.15; font-weight: 700; color: #0f172a; }
.sim-tf-face small { font-size: 13px; line-height: 1.25; font-weight: 400; color: #475569; }
.sim-tf-face.is-empty small { font-size: 16px; color: #64748b; }
.sim-transfer-form .sim-tf-pick select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; border: 0; }
.sim-transfer-form .sim-tf-pick select:disabled { cursor: not-allowed; }

/* Расчет остатка над быстрыми кнопками: до решения – решения = к распределению */
.sim-rest-calc { margin: -4px 0 10px; font-size: 15px; color: #475569; }
.sim-rest-calc b { color: #206267; }

/* Сплит: название крупно, пояснение мелко под ним; Сбросить с крестиком */
.sim-quick { align-items: center; }
.sim-quick .sim-quick-split { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 5px 16px; font-weight: 700; }
.sim-quick .sim-quick-split small { font-size: 11px; font-weight: 400; opacity: .8; }
.sim-quick .sim-quick-reset span { font-size: 18px; line-height: 1; vertical-align: -2px; margin-right: 2px; }
.sim-quick button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
/* Быстрые кнопки в одну строку, «Сбросить» последняя; на узком экране переносятся */
.sim-quick { gap: 6px; }
.sim-quick button { padding: 5px 11px; white-space: nowrap; }
.sim-quick .sim-quick-split { padding: 4px 12px; }
/* «Сумма к распределению до решения»: треугольник справа, вниз и красный; раскрыто – вверх и зеленый */
.sim-modal-money summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sim-modal-money summary::-webkit-details-marker { display: none; }
.sim-modal-money summary::after { content: ''; flex-shrink: 0; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--danger); transition: transform .2s, border-top-color .2s; }
.sim-modal-money[open] summary::after { transform: rotate(180deg); border-top-color: var(--brand); }
/* Плейсхолдер «Сейчас N» в полях распределения – светлее введенной суммы */
.pds-allocation-amount input[data-alloc]::placeholder { color: #94a3b8; opacity: 1; }
/* Итог переводов: что переведено и остатки «было → стало» */
.sim-tf-result { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #e4f7f4; }
.sim-tf-result h5 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #206267; }
.sim-tf-result h5 + ul { margin-bottom: 10px; }
.sim-tf-result .sim-transfer-list { margin-top: 0; }
.sim-tf-result .sim-transfer-list li { display: grid; grid-template-columns: 1fr auto 36px; gap: 8px; align-items: center; border-top: 1px dashed #b6e3dd; }
.sim-tf-result .sim-transfer-list li:first-child { border-top: 0; }
.sim-tf-balances li { display: grid; grid-template-columns: 1fr auto 16px auto; gap: 6px 10px; align-items: baseline; padding: 4px 0; font-size: 14px; border-top: 1px dashed #b6e3dd; }
.sim-tf-balances li.is-head { border-top: 0; padding: 0; font-size: 11px; color: #64748b; text-align: right; }
.sim-tf-balances .sim-tf-was { color: #64748b; text-align: right; }
.sim-tf-balances .sim-tf-arrow { color: #31b7bc; text-align: center; }
.sim-tf-balances b { text-align: right; color: #0f172a; }
.sim-tf-hint { margin: 6px 0 0; font-size: 12px; color: #64748b; }
@media (max-width: 480px) { .sim-tf-balances li { grid-template-columns: 1fr auto 12px auto; gap: 4px 6px; font-size: 13px; } }
/* Итог игры: «Твоя стратегия» */
.sim-strategy-lead { margin: 0 0 12px; color: #475569; }
.sim-strategy-cap { margin: 0 0 6px; font-size: 13px; color: #64748b; }
.sim-strategy-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #f1f5f9; }
.sim-strategy-bar span { display: block; height: 100%; }
.sim-strategy-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 14px; font-size: 13px; color: #334155; }
.sim-strategy-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.sim-strategy-h { margin: 10px 0 6px; font-size: 18px; font-weight: 700; }
.sim-strategy-h.is-good { color: #206267; }
.sim-strategy-h.is-improve { color: #b45309; }
.sim-strategy-list { margin: 0; padding: 0; list-style: none; }
.sim-strategy-list li { position: relative; padding: 6px 0 6px 28px; border-top: 1px dashed #e2e8f0; line-height: 1.4; }
.sim-strategy-list li:first-child { border-top: 0; }
.sim-strategy-list li::before { position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; font-size: 13px; line-height: 20px; text-align: center; font-weight: 700; }
.sim-strategy-list.is-good li::before { content: '✓'; background: #e4f7f4; color: #206267; }
.sim-strategy-list.is-improve li::before { content: '!'; background: #fff3dc; color: #b45309; }
.sim-capped { display: block; margin-top: 4px; font-size: 13px; color: #b45309; }
/* Окно варианта: «Ты выбрал» → «Что произойдет» → «Доступно для распределения» → «Куда распределить» */
.sim-available { margin: 18px 0 6px; padding: 12px 14px; border-radius: 12px; background: #e4f7f4; }
.sim-available-label { display: block; font-size: 15px; color: #206267; }
.sim-available > strong { display: block; font-size: 2rem; line-height: 1.15; font-weight: 400; color: #206267; }
.sim-available .sim-rest-calc { margin: 2px 0 0; font-size: 14px; }
.sim-available .sim-warn { margin: 8px 0 0; }
.sim-available .sim-modal-money { margin-top: 6px; }

/* Окно выбора варианта – в стиле игры, как «Счета героя»: Neucha, без жирного, суммы тем же кеглем, что текст */
.sim-game-dialog.pds-allocation-dialog h3 { font-size: .9375rem; }
.pds-allocation-dialog.sim-game-dialog .sim-chosen { font-size: 1.0625rem; }
.pds-allocation-dialog.sim-game-dialog .pds-allocation-field label { font-weight: 400; font-size: 1.125rem; }
.pds-allocation-dialog.sim-game-dialog .pds-allocation-field small { font-size: .875rem; }
.pds-allocation-dialog.sim-game-dialog .pds-allocation-field { border-bottom-color: #d7ece9; }
.pds-allocation-dialog.sim-game-dialog input { font-family: inherit; font-size: 1.125rem; background: #fff; }
.pds-allocation-dialog.sim-game-dialog .pds-allocation-action { font-size: .9375rem; }
.pds-allocation-dialog.sim-game-dialog .sim-quick button { font-size: .9375rem; font-weight: 400; }
.pds-allocation-dialog.sim-game-dialog .sim-quick .sim-quick-split small { font-size: .75rem; }
.pds-allocation-dialog.sim-game-dialog .sim-available { background: #fff; border: 1px solid #9ee8dd; }
.pds-allocation-dialog.sim-game-dialog .sim-available-label { font-size: .9375rem; color: #475569; }
.pds-allocation-dialog.sim-game-dialog .sim-rest-calc { font-size: .9375rem; color: #475569; }
.pds-allocation-dialog.sim-game-dialog .sim-modal-money summary { font-size: .9375rem; }
.pds-allocation-dialog.sim-game-dialog .sim-money-lines { border: 0; padding: 0; margin-top: 4px; }
.pds-allocation-dialog.sim-game-dialog .sim-money-lines strong,
.pds-allocation-dialog.sim-game-dialog .sim-money-lines b { font-size: inherit; font-weight: 400; color: #206267; }
.pds-allocation-dialog.sim-game-dialog .pds-allocation-footer { background: #f4fbfa; }
.pds-allocation-dialog.sim-game-dialog .pds-allocation-footer > p { font-weight: 400; font-size: 1.125rem; }
.pds-allocation-dialog.sim-game-dialog .sim-card-note { font-weight: 400; font-size: .9375rem; }
.pds-allocation-dialog.sim-game-dialog .pds-balance-done { font-size: 1.25rem; }
.pds-allocation-dialog.sim-game-dialog .pds-allocation-cancel { font-size: 1.0625rem; }
.pds-allocation-dialog.sim-game-dialog .sim-transfer, .pds-allocation-dialog.sim-game-dialog .sim-transfer-form select,
.pds-allocation-dialog.sim-game-dialog .sim-transfer-actions button { font-family: inherit; }
.pds-allocation-dialog.sim-game-dialog .sim-transfer-form label { font-weight: 400; font-size: 1rem; }
.pds-allocation-dialog.sim-game-dialog .sim-tf-face b, .pds-allocation-dialog.sim-game-dialog .sim-tf-result b,
.pds-allocation-dialog.sim-game-dialog .sim-tf-result h5, .pds-allocation-dialog.sim-game-dialog .sim-strategy-h { font-weight: 400; }
.pds-allocation-dialog.sim-game-dialog .sim-check { font-size: 1rem; }
.sim-rules-dialog .pds-balance-done { font-size: 1.25rem; }
.sim-rules-dialog b, .sim-rules-dialog strong { font-weight: 400; color: #206267; }
.pds-allocation-dialog.sim-game-dialog .sim-transfer-note, .pds-allocation-dialog.sim-game-dialog .sim-tf-hint { font-size: .875rem; }
.pds-allocation-dialog.sim-game-dialog .sim-transfer-actions button { font-size: .9375rem; }
.pds-allocation-dialog.sim-game-dialog .sim-tf-face small { font-size: .875rem; }
/* Мобильная версия: иллюстрация сцены и текст «Как играть» – только на вводных экранах (выбор героя, «Как играть», 1-й год); дальше – только иконка, без иллюстрации */
@media (max-width: 767px) {
  .sim-scene-img:not(.is-intro) { display: none; }
  .sim-help.is-icon-mobile .sim-help-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sim-help.is-icon-mobile img { width: 32px; height: 32px; }
}
/* Окно подтверждения */
.sim-confirm-dialog { max-width: 420px; text-align: center; }
.sim-confirm-dialog h2 { margin-top: 4px; }
.sim-confirm-note { margin: 10px 0 0; color: #475569; }
/* Подложка выбора героя переезжает за выбранным героем */
.sim-hero-blob { position: absolute; top: 4%; width: 52%; max-width: 300px; height: auto; transform: translateX(-50%); transition: left .3s ease; pointer-events: none; z-index: 0; }
.sim-hero-btn { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .sim-hero-blob { transition: none; } }
/* Нижняя полоса не перекрывает контент и не перехватывает клики (затухание – только картинка) */
.pds-capital-bar { pointer-events: none; }
.pds-capital-bar button, .pds-capital-bar a { pointer-events: auto; }
.sim-main { padding-bottom: calc(var(--bar-h, 0px) + 1rem); }
@media (max-width: 1279px) { .sim-pad { padding-bottom: 1rem; } }
/* Десктоп с невысоким экраном: иллюстрация уменьшается, прогресс и «Сброс» остаются над полосой и кликабельны */
@media (min-width: 1280px) {
  .sim-scene-col { z-index: 11; }
  .sim-scene-col .sim-scene-img { width: min(100%, calc((100vh - var(--bar-h, 120px) - 22rem) * 1.267)); margin-left: auto; margin-right: auto; }
}
/* Кнопка хода не шире экрана (раньше 22rem = 352px обрезалась на телефонах 320–360px) */
.next-button-box { width: min(22rem, 100%); box-sizing: border-box; }
@media (max-width: 400px) { .next-button-box { padding-left: 1.6rem; padding-right: 1.6rem; font-size: 1.5rem; } }
.sim-ava-side { max-width: 11rem; }

/* Выбор героя на широком экране: место под нижнюю полосу уже дает .sim-main, лишний pb-32 секции давал прокрутку страницы */
@media (min-width: 1280px) {
  .sim-character-section { padding-bottom: 0; }
}