/* =========================================================
   Fumy — «Страна чудес — симуляция»
   Токены и решения описаны в docs/design.md
   ========================================================= */

:root {
  --ink: #2e2759;          /* текст: 13.5:1 на белом */
  --ink-2: #4a4380;        /* вторичный текст: 8.7:1 на белом */
  --line: #6c61a6;         /* контуры окон и жёсткие тени */
  --accent: #5a4fa0;       /* главная кнопка и выбранное; белый текст 6.9:1 */
  --peri: #6f7fe9;         /* фокус, свечение; не для мелкого текста */
  --sky: #a9c6f4;
  --lilac: #c3b6e1;
  --pale: #e3daf5;
  --blush: #ddb3b7;
  --pink: #f4c9da;
  --paper: #ffffff;
  --paper-2: #f8f5ff;
  --check: #ece6fa;        /* тёмная клетка «шашек прозрачности» */
  --night: #2a2550;
  --glow: #e3daf5;

  --font-px: "Handjet", ui-monospace, "Courier New", monospace;
  --font-text: "Alice", Georgia, "Times New Roman", serif;

  --radius: 6px;
  --glow-soft: 0 0 8px rgba(124, 104, 222, .35), 0 0 26px rgba(124, 104, 222, .45);   /* мягкое свечение по контуру окон */
  --shadow: 4px 4px 0 var(--line), var(--glow-soft);
  --shadow-sm: 3px 3px 0 var(--line);
  --bar-h: 32px;
  --taskbar-h: 48px;
  --wrap: 1140px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(72px, 10vw, 144px);

  --cursor: url("../img/px/cursor-arrow.png") 0 0, auto;
  --cursor-hand: url("../img/px/cursor-paw.png") 15 4, pointer;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 16px;
  scroll-padding-bottom: calc(var(--taskbar-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  padding-bottom: var(--taskbar-h);
  font: 18px/1.6 var(--font-text);
  color: var(--ink);
  background: #211d42;
  text-rendering: optimizeLegibility;
}
@media (pointer: fine) {
  body { cursor: var(--cursor); }
  a, button, label, summary, select, [role="button"], input[type="radio"], input[type="checkbox"] { cursor: var(--cursor-hand); }
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
button, input { font: inherit; color: inherit; }
dialog { color: inherit; }

.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.muted { color: var(--ink-2); }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius);
  font: 600 18px/1 var(--font-px); text-decoration: none; box-shadow: var(--shadow-sm);
}
.skip:focus { top: 12px; }

:focus { outline: none; }
:focus-visible { outline: 3px dashed var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* без JavaScript прячем элементы, которые без него не работают */
.no-js [data-close], .no-js .taskbar__start, .no-js .taskbar__tray, .no-js [data-currency-switch],
.no-js #calc-copy, .no-js #calc-reset, .no-js .receipt__stages, .no-js .crt { display: none !important; }
.no-js .floor { background: repeating-conic-gradient(#ddd3f7 0 25%, #fff 0 50%) 0 0 / 64px 64px; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px;
  font: 600 20px/1 var(--font-px); letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
}
.btn:hover { background: var(--pale); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--line); }
.btn--primary { color: #fff; background: var(--accent); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn--primary:hover { background: #4d4391; box-shadow: 4px 4px 0 var(--ink); }
.btn--primary:active { box-shadow: 0 0 0 var(--ink); }
.btn--small { min-height: 40px; padding: 8px 14px; font-size: 18px; }
.btn:disabled, .btn[aria-disabled="true"] {
  color: #7d77a3; background: var(--paper-2); border-style: dashed; box-shadow: none; transform: none; cursor: not-allowed;
}

/* ---------- Окно ---------- */
.win {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.win__bar {
  display: flex; align-items: center; gap: 8px;
  height: var(--bar-h); padding: 0 6px 0 10px;
  background: linear-gradient(90deg, #bccbf7 0%, var(--lilac) 55%, #efc6d8 100%);
  border-bottom: 2px solid var(--line);
  border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  font: 600 19px/1 var(--font-px); letter-spacing: .02em; color: var(--ink);
  user-select: none;
}
.win__icon { width: auto; height: 18px; flex: none; }
.win__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win__ctl { display: flex; gap: 4px; flex: none; }
.win__body { padding: clamp(18px, 2.4vw, 24px); }

.ctl {
  display: block; width: 22px; height: 20px; padding: 0;
  background: var(--paper) center / 8px 7px no-repeat;
  border: 2px solid var(--line); border-radius: 4px;
  image-rendering: pixelated;
}
.ctl--min { background-image: url("../img/px/ctl-min.svg"); }
.ctl--max { background-image: url("../img/px/ctl-max.svg"); background-size: 9px 7px; }
.ctl--close { background-image: url("../img/px/ctl-close.svg"); }
button.ctl:hover { background-color: var(--pink); }
button.ctl:active { transform: translate(1px, 1px); }

.h3 { font: 400 24px/1.25 var(--font-text); margin-bottom: 12px; }

/* =========================================================
   Первый экран
   ========================================================= */
.hero {
  --mh: clamp(300px, 54svh, 560px);   /* высота маскота */
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(16px, 3svh, 40px) var(--gutter) calc(var(--taskbar-h) + 15svh);
  background: linear-gradient(180deg, #a9c6f4 0%, #b6c0f1 26%, #c3b6e1 46%, #dcd2f6 60%, #f1d8e5 70%, #f6e3ed 100%);
}
.hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* звёзды — квадратные пиксели в верхней трети */
.hero__stars {
  position: absolute; left: 0; top: 0; width: 3px; height: 3px; background: transparent; opacity: .9;
  box-shadow:
    6vw 7svh #fff, 14vw 22svh rgba(255,255,255,.6), 22vw 4svh #fff, 31vw 15svh rgba(255,255,255,.7),
    38vw 6svh #fff, 47vw 2svh rgba(255,255,255,.6), 58vw 9svh #fff, 66vw 4svh rgba(255,255,255,.7),
    73vw 18svh #fff, 81vw 7svh #fff, 89vw 13svh rgba(255,255,255,.6), 95vw 3svh #fff,
    3vw 28svh rgba(255,255,255,.5), 52vw 24svh rgba(255,255,255,.5), 92vw 27svh rgba(255,255,255,.5);
}

.cloud { position: absolute; height: auto; }
.cloud--a { width: 270px; left: 3vw; top: 13svh; }
.cloud--b { width: 200px; right: 6vw; top: 8svh; }
.cloud--c { width: 126px; right: 21vw; top: 33svh; }
.cloud--d { width: 98px; left: 18vw; top: 44svh; }

.hero__hills { position: absolute; left: 0; right: 0; bottom: calc(30svh - 2px); width: 100%; height: 12svh; }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30svh; min-height: 170px; background: #fff; overflow: hidden; }
.floor__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.floor__tiles { fill: #ddd3f7; }
.floor::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #f1d8e5 0%, rgba(241, 216, 229, 0) 32%);
}

.hero__stage { position: relative; width: min(640px, 100%); z-index: 2; }

/* маскот выглядывает из-за окна: тело позади, лапки поверх заголовка */
/* чиби: верх окна на 63% её высоты, видимая часть = половина --mh */
.mascot { --ms: 1.25; position: relative; width: calc(var(--mh) * .4513 * var(--ms)); height: calc(var(--mh) * .5 * var(--ms)); margin: 0 auto; }
.mascot img { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--mh) * .7924 * var(--ms)); max-width: none; }
.mascot__body { z-index: 1; }
.mascot__paw { z-index: 3; pointer-events: none; }
.mascot__paw--left { clip-path: inset(60% 64% 29.5% 0); }
.mascot__paw--right { clip-path: inset(60% 0 29.5% 64%); }
.win--hero { z-index: 2; }

.screen {
  position: relative; overflow: hidden;
  margin: 12px 12px 0;
  padding: clamp(14px, 2.4svh, 22px) 12px clamp(10px, 2svh, 18px);
  border: 2px solid var(--line); border-radius: 4px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 118%, rgba(246, 184, 214, .95) 0%, rgba(246, 184, 214, 0) 70%),
    linear-gradient(180deg, #4a4fc4 0%, #6b74e4 52%, #9a8fe2 100%);
}
.screen::before {          /* звёзды экрана */
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: transparent;
  box-shadow: 30px 14px #fff, 88px 40px rgba(255,255,255,.6), 150px 18px #fff, 210px 52px rgba(255,255,255,.7),
    290px 12px #fff, 350px 36px rgba(255,255,255,.6), 420px 20px #fff, 480px 48px rgba(255,255,255,.7),
    540px 16px #fff, 600px 40px rgba(255,255,255,.6), 60px 70px rgba(255,255,255,.5), 520px 76px rgba(255,255,255,.5);
}
.screen::after {           /* линии развёртки ЭЛТ */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);
}
.screen__mark { position: relative; z-index: 1; display: flex; justify-content: center; }
.screen__mark img {
  width: min(96%, 600px); height: auto; max-height: clamp(56px, 13svh, 100px); object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .85)) drop-shadow(0 0 26px rgba(186, 196, 255, .95));
}

.hero__body { text-align: center; }
.hero__lead { font-size: clamp(20px, 2.3vw, 24px); line-height: 1.35; }
.hero__price { margin-top: 6px; color: var(--ink-2); font-size: 17px; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 18px; }

.win--error { position: absolute; z-index: 3; right: max(3vw, calc((100vw - 1320px) / 2)); top: 54svh; width: 260px; display: none; }
.error__body { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: start; padding: 16px; font-size: 17px; line-height: 1.4; }
.error__icon { width: 33px; margin-top: 3px; }
.error__body .btn { grid-column: 2; justify-self: start; min-width: 76px; }
.win--error[hidden] { display: none !important; }

.hero__props { position: absolute; inset: 0 0 var(--taskbar-h) 0; z-index: 1; pointer-events: none; }
.prop { position: absolute; height: auto; }
.prop--watch { width: 60px; left: 7vw; top: 52svh; }
.prop--king { width: 44px; left: 12vw; bottom: 9svh; }
.prop--rabbit { width: 64px; right: 23vw; bottom: 2svh; }
.prop--knight { width: 78px; right: 8vw; bottom: 3svh; }
.prop--rose { width: 52px; left: 25vw; bottom: 1svh; }
.hero__stage .prop--cursor { position: absolute; z-index: 3; width: 36px; left: -84px; top: 62%; display: none; }

@media (min-width: 1280px) {
  .win--error { display: block; }
  .hero__stage .prop--cursor { display: block; }
}
@media (max-width: 1023px) {
  .prop--watch, .prop--knight { display: none; }
}
@media (max-width: 699px) {
  .hero { --mh: clamp(260px, 44svh, 380px); padding-bottom: calc(var(--taskbar-h) + 18svh); }
  .floor { height: 26svh; }
  .hero__hills { bottom: calc(26svh - 2px); }
  .cloud--a { width: 180px; left: -40px; top: 6svh; }
  .cloud--b { width: 140px; right: -20px; top: 2svh; }
  .cloud--c, .cloud--d { display: none; }
  .prop--king { width: 33px; left: 7vw; bottom: 6svh; }
  .prop--rabbit { width: 48px; right: 9vw; bottom: 7svh; }
  .prop--rose { width: 39px; left: 45vw; bottom: 1svh; }
  .hero__actions .btn { flex: 1 1 100%; }
}
@media (max-width: 379px) { .win--hero .ctl--min, .win--hero .ctl--max { display: none; } }

@media (max-height: 780px) and (min-width: 700px) {
  .hero { padding-bottom: calc(var(--taskbar-h) + 7svh); }
}
@media (max-height: 740px) and (min-width: 700px) {
  .prop--rabbit, .prop--rose { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero { --mh: clamp(150px, 46svh, 210px); padding-top: 6px; padding-bottom: calc(var(--taskbar-h) + 6svh); }
  .screen { padding: 6px 10px; margin: 8px 8px 0; }
  .screen__mark img { max-height: clamp(36px, 12svh, 52px); }
  .hero__body { padding: 10px 16px 12px; }
  .hero__lead { font-size: 18px; }
  .hero__price { font-size: 15px; margin-top: 2px; }
  .hero__actions { margin-top: 10px; gap: 8px 10px; }
  .hero__actions .btn { flex: 0 1 auto; min-height: 40px; padding: 8px 14px; font-size: 18px; }
  .floor { height: 20svh; min-height: 0; }
  .hero__hills { bottom: calc(20svh - 2px); height: 9svh; }
  .prop--watch, .prop--king, .prop--rabbit, .prop--knight, .prop--rose, .win--error { display: none; }
}

/* полоса пиксельного перехода от пола к странице */
.dither {
  position: relative; z-index: 2; height: 32px; margin-top: -32px;
  background: url("../img/px/dither.svg") 0 0 / 64px 32px repeat-x;
  image-rendering: pixelated;
}

/* =========================================================
   Страница-небо: секции
   ========================================================= */
main {
  background: linear-gradient(180deg,
    #f6e3ed 0%, #e9eefc 9%, #e1e9fb 24%, #f6e6f0 40%, #f1e4f5 54%, #ddd7f5 70%, #bfc0ee 86%, #aeb2ea 100%);
}
.section { position: relative; padding-block: var(--section-y); }
.section + .section { padding-top: 0; }
.section__head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.section__head--split {
  max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px;
}
.section__title {
  display: flex; align-items: center; gap: 16px;
  font: 800 clamp(56px, 8vw, 92px)/.9 var(--font-px); letter-spacing: .01em;
  color: var(--ink);
}
.section__suit { width: clamp(33px, 4vw, 44px); height: auto; flex: none; transform: translateY(-4px); }
.section__note { margin-top: 12px; font-size: clamp(18px, 1.8vw, 20px); color: var(--ink-2); max-width: 62ch; }

.section .cloud { position: absolute; z-index: 0; }
.cloud--s1 { width: 180px; right: 4vw; top: 24px; }
.cloud--s2 { width: 240px; left: -30px; top: -10px; }
.section .wrap { position: relative; z-index: 1; }

/* ---------- Галерея ---------- */
.gallery { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 24px); }
.gallery::before { content: ""; flex-basis: 100%; order: 1; height: 0; }
.art { order: 0; flex: var(--r) 1 4px; min-width: 0; }
.art--row2 { order: 2; }
.art--row3 { order: 4; }
.gallery::after { content: ""; flex-basis: 100%; order: 3; height: 0; }
.art__win {
  display: block; text-decoration: none;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.art__bar {
  display: flex; align-items: center; gap: 8px; height: var(--bar-h); padding: 0 6px 0 10px;
  background: linear-gradient(90deg, #bccbf7 0%, var(--lilac) 55%, #efc6d8 100%);
  border-bottom: 2px solid var(--line); border-radius: 4px 4px 0 0;
  font: 600 19px/1 var(--font-px); letter-spacing: .02em;
}
.art__icon { width: auto; height: 16px; flex: none; }
.art__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art__ctl { flex: none; }
.art__canvas {
  display: block; aspect-ratio: var(--r); overflow: hidden; border-radius: 0 0 4px 4px;
  background: repeating-conic-gradient(var(--check) 0 25%, #fff 0 50%) 0 0 / 24px 24px;
}
.art__canvas img { width: 100%; height: 100%; object-fit: cover; background-color: var(--avg, transparent); }
.art__win:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--line), var(--glow-soft); }
.art__win:hover .art__bar { background: linear-gradient(90deg, #9fb3f4 0%, #b3a5e6 55%, #eab3cc 100%); }
.art__win:focus-visible { outline-offset: 4px; }

@media (max-width: 699px) {
  .gallery { flex-direction: column; }
  .gallery::before, .gallery::after { display: none; }
  .art { flex: none; width: 100%; }
}

/* ---------- Переключатель валюты ---------- */
.seg {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--paper); border: 2px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-sm);
}
.seg__opt { position: relative; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.seg__opt span {
  display: block; padding: 9px 14px; border: 2px solid transparent; border-radius: 5px;
  font: 600 19px/1 var(--font-px); letter-spacing: .02em; white-space: nowrap;
}
.seg__opt:hover span { background: var(--pale); }
.seg__opt input:checked + span { background: var(--accent); color: #fff; border-color: var(--ink); }
.seg__opt input:focus-visible + span { outline: 3px dashed var(--accent); outline-offset: 2px; }
.seg--small .seg__opt span { padding: 6px 10px; font-size: 17px; }

/* ---------- Карточки форматов ---------- */
.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.format { display: flex; flex-direction: column; }
.format__canvas {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  margin: 12px 12px 0; border: 2px solid var(--line); border-radius: 4px;
  background: repeating-conic-gradient(var(--check) 0 25%, #fff 0 50%) 0 0 / 20px 20px;
}
.format__canvas img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.format--waist .format__canvas img, .format--full .format__canvas img { object-fit: contain; background: #fff; }
.ants {                    /* «бегущие муравьи» выделения из Paint */
  position: absolute; inset: 10px; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 50%, transparent 0) 0 0 / 12px 2px repeat-x,
    linear-gradient(90deg, var(--ink) 50%, transparent 0) 0 100% / 12px 2px repeat-x,
    linear-gradient(0deg, var(--ink) 50%, transparent 0) 0 0 / 2px 12px repeat-y,
    linear-gradient(0deg, var(--ink) 50%, transparent 0) 100% 0 / 2px 12px repeat-y;
}
.format__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; flex: 1; min-width: 0; }
.format__name { font: 400 26px/1.2 var(--font-text); }
.format__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.format__main { font: 800 44px/1 var(--font-px); font-variant-numeric: tabular-nums; }
.format__alt { font: 400 18px/1.2 var(--font-text); color: var(--ink-2); }
.format .btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 899px) {
  .formats { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .format { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .format .win__bar { grid-column: 1 / -1; }
  .format__canvas { margin: 12px 0 12px 12px; }
  .format__body { padding: 14px 14px 16px; }
  .format__main { font-size: 38px; }
  .format .btn { white-space: normal; text-align: left; }
}

/* ---------- Калькулятор ---------- */
.win--calc { margin-top: clamp(32px, 5vw, 56px); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.calc__options { padding: clamp(18px, 2.6vw, 28px); }
.calc__lead { margin-bottom: 8px; max-width: 60ch; font-size: 17px; }
.group { margin-top: 20px; }
.group__label { padding: 0; margin-bottom: 10px; font: 700 22px/1 var(--font-px); letter-spacing: .03em; color: var(--ink); }
.tiles { display: grid; gap: 10px; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tile {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px;
  align-content: start; min-height: 64px; padding: 11px 12px;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--line);
  transition: background-color .1s ease, transform .08s ease, box-shadow .08s ease;
}
.tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; }
.tile__mark {
  grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 3px;
  background: var(--paper) center / 10px 10px no-repeat; border: 2px solid var(--line);
  image-rendering: pixelated;
}
.tile--radio .tile__mark { transform: rotate(45deg) scale(.85); border-radius: 2px; } /* бубна вместо кружка */
.tile__name { font-size: 17px; line-height: 1.25; }
.tile__tag { grid-column: 2; font: 400 17px/1.3 var(--font-text); color: var(--ink-2); }
.tile:hover { background: var(--pale); }
.tile:has(input:checked), .tile.is-checked {
  color: #fff; background: var(--accent); border-color: var(--ink);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.18); transform: translate(2px, 2px);
}
.tile:has(input:checked) .tile__tag, .tile.is-checked .tile__tag { color: var(--glow); }
.tile--radio:has(input:checked) .tile__mark, .tile--radio.is-checked .tile__mark { background-color: var(--pink); border-color: #fff; }
.tile--checkbox:has(input:checked) .tile__mark, .tile--checkbox.is-checked .tile__mark { background-color: #fff; background-image: url("../img/px/check.svg"); border-color: #fff; }
.tile:has(input:focus-visible) { outline: 3px dashed var(--accent); outline-offset: 3px; }
.tile__pct { font-size: 15px; }

/* чек */
.calc__side { background: var(--paper-2); border-left: 2px dashed var(--line); border-radius: 0 0 calc(var(--radius) - 2px) 0; }
.receipt { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 2.4vw, 24px); }
.receipt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.receipt__title { font: 800 30px/1 var(--font-px); letter-spacing: .02em; }
.crt {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px 16px; border: 2px solid var(--line); border-radius: 8px;
  background: radial-gradient(ellipse 80% 70% at 50% 120%, #5b4fa8 0%, var(--night) 70%);
  box-shadow: inset 0 0 0 3px #3d3670, var(--shadow-sm);
  color: var(--glow);
}
.crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }
.crt__label { font: 600 18px/1 var(--font-px); letter-spacing: .08em; color: #c9c1ef; }
.crt__total {
  font: 800 clamp(44px, 4.4vw, 54px)/1 var(--font-px); font-variant-numeric: tabular-nums;
  font-variation-settings: "ELSH" 2;
  text-shadow: 0 0 10px rgba(227, 218, 245, .55);
}
.crt.is-changed .crt__total { animation: flicker .14s steps(2) 1; }
.receipt__lines, .receipt__stages { display: grid; gap: 6px; font-size: 16px; }
.line, .stage { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.line__name small { color: var(--ink-2); font-size: 14px; }
.line__sum, .stage__sum { font: 400 17px/1.3 var(--font-text); white-space: nowrap; }
.line--base { padding-bottom: 8px; border-bottom: 2px dashed var(--lilac); }
.receipt__stages { padding-top: 10px; border-top: 2px solid var(--line); }
.stage__name { color: var(--ink-2); }
.receipt__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.receipt__actions .btn { flex: 1 1 auto; }
.receipt__status { min-height: 1.4em; font-size: 16px; color: var(--accent); }
.receipt__note { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.receipt__fallback { width: 100%; min-height: 150px; padding: 10px; font: 15px/1.4 var(--font-text); border: 2px solid var(--line); border-radius: var(--radius); }

@media (min-width: 1000px) {
  .receipt { position: sticky; top: 16px; align-self: start; }
}
@media (max-width: 999px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc__side { border-left: 0; border-top: 2px dashed var(--line); border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px); }
}
@media (max-width: 599px) {
  .tiles--3, .tiles--2 { grid-template-columns: 1fr; }
  .tile { min-height: 0; grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; }
  .tile__mark { grid-row: auto; margin-top: 0; }
  .tile__tag { grid-column: 3; }
}

/* ---------- Информационные окна ---------- */
.info-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(32px, 5vw, 56px); align-items: start;
}
@media (max-width: 999px) { .info-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 699px) { .info-grid { grid-template-columns: 1fr; } }

.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px;
  background: var(--paper) url("../img/px/check.svg") center / 10px 10px no-repeat;
  border: 2px solid var(--line); image-rendering: pixelated;
}

.progress { display: flex; height: 22px; margin: 14px 0 12px; border: 2px solid var(--line); border-radius: 4px; overflow: hidden; }
.progress__done { flex: 1; background: repeating-linear-gradient(90deg, var(--accent) 0 12px, #fff 12px 14px); }
.progress__todo { flex: 1; background: repeating-conic-gradient(var(--check) 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.steps { display: grid; gap: 8px; counter-reset: step; }
.steps li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; counter-increment: step; }
.steps__name::before { content: counter(step) ". "; font-family: var(--font-px); font-weight: 700; color: var(--accent); }
.steps__meta { font: 700 19px/1 var(--font-px); color: var(--ink-2); white-space: nowrap; }

.rights { display: grid; gap: 14px; }
.right { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: start; }
.right__suit { width: 22px; margin-top: 4px; }
.right__name { font-size: 18px; }
.right__desc { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.chip {
  padding: 4px 8px; border: 2px solid var(--line); border-radius: 4px; background: var(--pale);
  font: 700 16px/1 var(--font-px); letter-spacing: .02em; white-space: nowrap;
}
.chip--ok { background: #e6f1ff; }
.chip--muted { background: var(--paper-2); color: var(--ink-2); border-style: dashed; }

/* ---------- Условия ---------- */
.terms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
@media (max-width: 699px) { .terms-grid { grid-template-columns: 1fr; } }
.notepad {
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(180deg, transparent 0 31px, #ebe6f8 31px 32px);
}
.suits { display: grid; gap: 8px; font-size: 19px; }
.suits li { position: relative; padding-left: 32px; line-height: 1.4; }
.suits li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; background: center / contain no-repeat; image-rendering: pixelated; }
.suits--yes li::before { background-image: url("../img/px/suit-heart.svg"); }
.suits--no li::before { background-image: url("../img/px/ctl-close.svg"); background-size: 14px 12px; border: 2px solid var(--line); width: 22px; height: 22px; }
.notepad__aside { margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--lilac); color: var(--ink-2); }

/* =========================================================
   Ночь: оплата, соцсети, подвал
   ========================================================= */
.night {
  position: relative; overflow: hidden; overflow: clip; color: #fff;
  padding: var(--section-y) 0 calc(var(--section-y) * .6);
  background: linear-gradient(180deg, rgba(174, 178, 234, 0) 0, #9597dd 45px, #6e6bc2 95px, #5c58b4 200px, #46408e 45%, var(--night) 78%, #211d42 100%);
}
.night__stars {
  position: absolute; left: 0; top: 0; width: 3px; height: 3px; background: transparent;
  box-shadow:
    4vw 30vh #fff, 11vw 52vh rgba(255,255,255,.6), 19vw 38vh #fff, 27vw 70vh rgba(255,255,255,.7), 34vw 46vh #fff,
    43vw 62vh rgba(255,255,255,.6), 51vw 34vh #fff, 58vw 78vh rgba(255,255,255,.7), 64vw 44vh #fff, 71vw 58vh rgba(255,255,255,.6),
    78vw 31vh #fff, 84vw 66vh rgba(255,255,255,.7), 90vw 41vh #fff, 96vw 73vh rgba(255,255,255,.6), 8vw 88vh #fff,
    23vw 96vh rgba(255,255,255,.6), 39vw 84vh #fff, 55vw 99vh rgba(255,255,255,.6), 68vw 92vh #fff, 87vw 104vh rgba(255,255,255,.6);
}
.night__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
@media (max-width: 899px) { .night__grid { grid-template-columns: minmax(0, 1fr); } }
.night__block { scroll-margin-top: 16px; }
.section__title--night { color: #fff; margin-bottom: clamp(24px, 3vw, 36px); text-shadow: 3px 3px 0 rgba(33, 29, 66, .55); }
.night .win { color: var(--ink); }

.pay { display: grid; gap: 12px; margin-bottom: 14px; }
.pay__item {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
}
.pay__icon { width: 32px; height: auto; justify-self: center; }
.pay__name { font: 800 30px/1 var(--font-px); letter-spacing: .02em; }
.pay__hint { font: 600 18px/1 var(--font-px); color: var(--ink-2); }
@media (max-width: 459px) {
  .pay__item { grid-template-columns: 40px 1fr auto; }
  .pay__item .btn { grid-column: 1 / -1; justify-self: start; white-space: normal; }
}

.desktop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 459px) { .desktop { grid-template-columns: 1fr; } }
.icon-link {
  display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%;
  padding: 18px 10px 16px; text-align: center; text-decoration: none; color: #fff;
  border: 2px solid transparent; border-radius: var(--radius);
}
.icon-link__img { width: 64px; height: auto; filter: drop-shadow(3px 3px 0 rgba(20, 16, 50, .55)); }
.icon-link__pic { position: relative; flex: none; height: 60px; display: flex; align-items: flex-end; }
.icon-link__pic::after {   /* стрелка ярлыка Windows */
  content: ""; position: absolute; left: -4px; bottom: -4px; width: 27px; height: 27px;
  background: url("../img/px/shortcut.svg") 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
.icon-link__name { font: 700 22px/1.1 var(--font-px); letter-spacing: .02em; }
.icon-link__text { display: flex; flex-direction: column; align-items: inherit; gap: 6px; min-width: 0; }
.icon-link__handle { font: 600 18px/1.1 var(--font-px); letter-spacing: .02em; color: #f1edff; overflow-wrap: anywhere; }
.icon-link:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); border-style: dashed; }
.icon-link:hover .icon-link__name { text-decoration: underline; text-underline-offset: 4px; }
.icon-link:focus-visible { outline-color: #fff; }
@media (max-width: 459px) {
  .icon-link { flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; padding: 12px; gap: 14px; }
  .icon-link__img { width: 48px; }
  .icon-link__pic { height: 45px; }
  .icon-link__pic::after { width: 18px; height: 18px; }
  .icon-link__text { align-items: flex-start; }
}

.footer { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: clamp(64px, 9vw, 120px); }
.win--wake { width: min(420px, 100%); }
.win--wake[hidden] { display: none; }
.wake__body { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; }
.wake__icon { width: 45px; }
.wake__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; }
.wake__actions .btn { min-width: 84px; }
.footer__copy { font-size: 18px; color: #d6d0f5; }
.night :focus-visible { outline-color: #fff; }
.night .win :focus-visible { outline-color: var(--accent); }

/* =========================================================
   Панель задач
   ========================================================= */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 6px;
  height: var(--taskbar-h); padding: 0 8px; padding-bottom: env(safe-area-inset-bottom);
  background: rgba(248, 245, 255, .94); border-top: 2px solid var(--line);
  box-shadow: 0 -2px 0 #fff inset;
}
@supports (backdrop-filter: blur(6px)) {
  .taskbar { background: rgba(248, 245, 255, .82); backdrop-filter: blur(8px); }
}
.taskbar__start {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; flex: none;
  font: 800 21px/1 var(--font-px); letter-spacing: .02em;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: 2px 2px 0 var(--line);
}
.taskbar__start img { width: 22px; }
.taskbar__start .taskbar__mark { width: 54px; height: auto; }
.taskbar__start[aria-expanded="true"], .taskbar__start:active { transform: translate(2px, 2px); box-shadow: none; background: var(--pale); }
.taskbar__tasks { display: flex; gap: 4px; min-width: 0; overflow: hidden; flex: 1; }
.taskbar__tasks a {
  display: block; padding: 8px 12px; white-space: nowrap; text-decoration: none;
  font: 600 19px/1 var(--font-px); letter-spacing: .02em;
  border: 2px solid transparent; border-radius: 5px;
}
.taskbar__tasks a:hover { background: var(--pale); border-color: var(--lilac); }
.taskbar__tasks a:focus-visible { outline-offset: -5px; }
.taskbar__tasks a[aria-current="true"] { background: var(--accent); color: #fff; border-color: var(--ink); }
.taskbar__tray {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; margin-left: auto; flex: none;
  border: 2px solid var(--lilac); border-radius: 5px; background: rgba(255,255,255,.6);
  font: 700 20px/1 var(--font-px); font-variant-numeric: tabular-nums; letter-spacing: .03em;
}
.taskbar__tray img { width: 20px; }
.taskbar__tray.is-total { background: var(--accent); color: #fff; border-color: var(--ink); }
.taskbar__tray.is-total img { display: none; }

.startmenu {
  position: absolute; left: 8px; bottom: calc(100% + 6px);
  display: flex; width: min(290px, calc(100vw - 16px));
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.startmenu[hidden] { display: none; }
.startmenu__side {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 12px 6px; background: linear-gradient(0deg, var(--accent), #8f86d6);
  color: #fff; font: 800 22px/1 var(--font-px); letter-spacing: .08em; border-radius: 0 4px 4px 0;
}
.startmenu__list { flex: 1; padding: 6px; }
.startmenu__list a {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 4px;
  font: 600 21px/1 var(--font-px); text-decoration: none;
}
.startmenu__list a:hover, .startmenu__list a:focus-visible { background: var(--accent); color: #fff; }
.startmenu__list img { width: 24px; height: auto; flex: none; }

@media (max-width: 899px) {
  .taskbar__tasks { display: none; }
}

/* =========================================================
   Просмотр арта
   ========================================================= */
.viewer {
  width: 100vw; max-width: none; height: 100%; max-height: none; margin: 0; padding: clamp(8px, 2vw, 24px);
  border: 0; background: transparent;
}
html.is-locked { overflow: hidden; }
.viewer { overscroll-behavior: contain; }
.viewer::backdrop { background: rgba(227, 218, 245, .93); }
.viewer[open] { display: flex; align-items: center; justify-content: center; }
.viewer__win { display: flex; flex-direction: column; max-width: 100%; max-height: 100%; }
.viewer__count { font: 600 18px/1 var(--font-px); color: var(--ink-2); margin-right: 6px; flex: none; }
.viewer__stage {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; flex: 1;
  background: repeating-conic-gradient(var(--check) 0 25%, #fff 0 50%) 0 0 / 24px 24px;
}
.viewer__pic img {
  display: block; width: auto; height: auto;
  max-width: calc(100vw - 2 * clamp(8px, 2vw, 24px) - 4px);
  max-height: calc(100dvh - 2 * clamp(8px, 2vw, 24px) - var(--bar-h) - 64px);
}
.viewer__nav {
  position: absolute; top: 50%; z-index: 1; width: 48px; height: 48px; margin-top: -24px;
  font: 700 22px/1 var(--font-px); color: var(--ink);
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.viewer__nav img { width: 12px; height: 22px; margin: 0 auto; }
.viewer__nav:hover { background: var(--pale); }
.viewer__nav:active { transform: translate(3px, 3px); box-shadow: none; }
.viewer__nav--prev { left: 10px; }
.viewer__nav--next { right: 10px; }
.viewer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; padding: 10px 12px 10px 14px; border-top: 2px solid var(--line); }
.viewer__nav:disabled { opacity: .35; box-shadow: none; transform: none; cursor: default; }

/* =========================================================
   Движение: одна сцена загрузки + отклики на действия
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .win--hero { animation: boot .5s cubic-bezier(.2, .8, .2, 1) both; }
  .mascot__body { animation: rise .9s cubic-bezier(.2, .8, .2, 1) .35s both; }
  .mascot__paw { animation: plop .32s cubic-bezier(.3, 1.6, .5, 1) 1.05s both; }
  .win--error { animation: boot .4s ease-out 1.5s both; }
  .format:hover .ants, .format:focus-within .ants { animation: ants .9s linear infinite; }
  .viewer[open] .viewer__win { animation: boot .22s ease-out both; }
}
@keyframes boot { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rise { from { transform: translateY(22%); } to { transform: none; } }
@keyframes plop { from { opacity: 0; transform: translateY(-8%); } to { opacity: 1; transform: none; } }
@keyframes ants {
  to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; }
}
@keyframes flicker { 0% { opacity: .55; } 100% { opacity: 1; } }

/* Режим высокой контрастности Windows: выбранное видно и без наших цветов */
@media (forced-colors: active) {
  .tile:has(input:checked), .tile.is-checked { outline: 3px solid Highlight; outline-offset: -6px; }
  .tile--radio:has(input:checked) .tile__mark, .tile--radio.is-checked .tile__mark { forced-color-adjust: none; background: Highlight; }
  .seg__opt input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .taskbar__tasks a[aria-current="true"] { outline: 2px solid Highlight; }
}