/* ─── токены ──────────────────────────────────────────────── */
:root{
  --bg:#ECECEF;        /* холодный «пластик корпуса» */
  --surface:#FFFFFF;
  --surface-2:#F5F5F8;
  --ink:#16161C;
  --ink-soft:#5C5C6A;
  --line:#D8D8DF;
  --red:#D22630;       /* акцент: красный Famicom */
  --blue:#1F3FD8;
  --led:#2FC178;
  --shadow:0 1px 0 rgba(22,22,28,.05), 0 12px 32px -18px rgba(22,22,28,.45);
  --radius:14px;
  --pad:20px;
}
[data-theme="dark"]{
  --bg:#111116;
  --surface:#1B1B22;
  --surface-2:#232330;
  --ink:#F2F2F5;
  --ink-soft:#9C9CAC;
  --line:#33333F;
  --red:#FF4F58;
  --blue:#7B92FF;
  --shadow:0 12px 40px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.55 "IBM Plex Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100dvh;
  /* сетка пикселей — тихая отсылка к предмету */
  background-image:
    linear-gradient(to right,rgba(22,22,28,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(22,22,28,.028) 1px,transparent 1px);
  background-size:8px 8px;
}
[data-theme="dark"] body{
  background-image:
    linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ─── верхняя панель ──────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) var(--pad) 10px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand__name{font-family:"Unbounded",sans-serif;font-weight:800;font-size:13px;letter-spacing:.02em}
.brand__tag{
  font-family:"Pixelify Sans",monospace;font-size:14px;color:var(--ink-soft);
  padding-left:9px;border-left:1px solid var(--line);
}
.led{
  width:8px;height:8px;border-radius:50%;
  background:var(--line);box-shadow:none;transition:background .2s,box-shadow .2s;
}
.led.on{background:var(--led);box-shadow:0 0 0 3px color-mix(in srgb,var(--led) 22%,transparent)}
.led.on.beat{animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.45}}
.bar__right{display:flex;align-items:center;gap:10px}
.clock{font-family:"Pixelify Sans",monospace;font-size:15px;color:var(--ink-soft);white-space:nowrap}
.theme{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  color:var(--ink-soft);border:1px solid var(--line);background:var(--surface);
}

/* ─── экраны ──────────────────────────────────────────────── */
main{padding:0 var(--pad) 200px}
.screen{display:none}
.screen.is-on{display:block;animation:rise .38s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* стартовый экран */
.hero{max-width:640px;margin:0 auto;padding:44px 0 0}
.eyebrow{
  margin:0 0 14px;font-family:"Pixelify Sans",monospace;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--red);
}
.hero__title{
  font-family:"Unbounded",sans-serif;font-weight:800;
  font-size:clamp(38px,12vw,66px);line-height:.98;letter-spacing:-.03em;margin:0 0 20px;
}
.hero__lead{margin:0 0 22px;color:var(--ink-soft);max-width:38ch}
.hero__meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0}
.hero__meta li{
  font-family:"Pixelify Sans",monospace;font-size:14px;
  padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
}
.hint{margin:14px 0 0;font-size:13.5px;color:var(--ink-soft)}

.cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:17px 26px;border-radius:999px;
  background:var(--ink);color:var(--bg);
  font-weight:600;font-size:17px;letter-spacing:-.01em;
  box-shadow:var(--shadow);transition:transform .12s ease,filter .2s;
}
.cta:active{transform:scale(.97)}
.cta--wide{width:100%;justify-content:center;margin-top:18px}
.cta[disabled]{opacity:.35;pointer-events:none}
.cta__glyph{
  width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent currentColor;
}
.ghost{
  display:block;width:100%;margin-top:12px;padding:14px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-soft);font-size:15px;background:var(--surface);
}

/* ─── карточка приставки ──────────────────────────────────── */
.card{
  max-width:640px;margin:20px auto 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.card.swap{animation:swap .45s ease both}
@keyframes swap{
  0%{opacity:0;clip-path:inset(0 0 100% 0)}
  100%{opacity:1;clip-path:inset(0 0 0 0)}
}
.card--plain .card__photo{display:none}
.card--plain .card__head{padding-top:28px}
.card--plain .card__summary{font-size:18px;margin-bottom:26px}
.card__photo{margin:0;aspect-ratio:16/10;background:var(--surface-2);position:relative;overflow:hidden}
.card__photo img{width:100%;height:100%;object-fit:cover}
.ph{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg,transparent 0 10px,color-mix(in srgb,var(--ink) 5%,transparent) 10px 20px),
    var(--surface-2);
}
.card__head{padding:20px var(--pad) 0}
.year{
  font-family:"Pixelify Sans",monospace;font-size:16px;color:var(--red);letter-spacing:.04em;
}
.card__title{
  font-family:"Unbounded",sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,7.5vw,38px);line-height:1.05;margin:4px 0 3px;
}
.card__maker{margin:0;color:var(--ink-soft);font-size:14.5px}
.card__summary{padding:0 var(--pad);margin:14px 0 20px;font-size:16.5px}

.specs{
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr;
}
.spec{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px var(--pad);border-bottom:1px solid var(--line);font-size:14.5px;
}
.spec:nth-child(odd){background:var(--surface-2)}
.spec dt{color:var(--ink-soft);margin:0;flex:0 0 auto}
.spec dd{margin:0;text-align:right;font-weight:500}

.shots{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.shots:empty{display:none}
.shot{background:var(--surface);margin:0}
.shot img{aspect-ratio:4/3;object-fit:cover;width:100%}
.shot figcaption{
  padding:8px 12px 12px;font-family:"Pixelify Sans",monospace;
  font-size:13.5px;color:var(--ink-soft);
}

/* ─── оценка ──────────────────────────────────────────────── */
.rate,.done{max-width:520px;margin:0 auto;padding:44px 0 0;text-align:left}
.rate__title{font-family:"Unbounded",sans-serif;font-weight:800;font-size:clamp(30px,9vw,44px);letter-spacing:-.03em;margin:0 0 10px;line-height:1.05}
.rate__lead{margin:0 0 26px;color:var(--ink-soft)}
.stars{display:flex;gap:6px;margin-bottom:8px}
.star{
  flex:1;aspect-ratio:1;max-width:62px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;transition:transform .12s,border-color .2s,background .2s;
}
.star::before{
  content:"";width:56%;height:56%;background:var(--line);
  transition:background .2s,transform .2s;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.star:active{transform:scale(.93)}
.star.lit{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,var(--surface))}
.star.lit::before{background:var(--red)}
.stars__label{margin:0 0 20px;font-family:"Pixelify Sans",monospace;font-size:15px;color:var(--ink-soft)}
.note{
  width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:15.5px;resize:vertical;
}
.done__mark{
  width:54px;height:54px;border-radius:14px;margin-bottom:18px;
  background:var(--led);position:relative;
}
.done__mark::after{
  content:"";position:absolute;left:17px;top:14px;width:14px;height:24px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(43deg);
}

/* ─── панель управления ───────────────────────────────────── */
.deck{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:12px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--line);
}
/* сигнатурный элемент: «полка картриджей» */
.track{
  display:flex;gap:2px;height:30px;margin-bottom:10px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.track::-webkit-scrollbar{display:none}
.cart{
  position:relative;flex:0 0 auto;width:auto;
  min-width:16px;max-width:16px;
  border:1px solid var(--line);border-radius:3px 3px 6px 6px;
  background:var(--surface);overflow:hidden;
  font-family:"Pixelify Sans",monospace;font-size:12px;color:var(--ink-soft);
  display:grid;place-items:center;white-space:nowrap;
  transition:max-width .38s cubic-bezier(.2,.7,.3,1),border-color .2s,color .2s,background .2s;
}
.cart::before{ /* «этикетка» картриджа = прогресс главы */
  content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));
  background:color-mix(in srgb,var(--red) 14%,transparent);transition:transform .25s linear;
}
.cart span{
  position:relative;padding:0 12px;
  opacity:0;transition:opacity .22s ease .08s;
}
.cart.done{background:var(--surface-2)}
.cart.now{
  min-width:0;max-width:min(64vw,260px);
  border-color:var(--red);color:var(--red);background:var(--surface);
  font-weight:700;
}
.cart.now span{opacity:1}

.scrub{padding:2px 0 6px}
.range{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;
}
.range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--line)}
.range::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--ink);border:3px solid var(--bg);margin-top:-6px;
}
.range::-moz-range-thumb{width:14px;height:14px;border:3px solid var(--bg);border-radius:50%;background:var(--ink)}

.controls{display:flex;align-items:center;justify-content:center;gap:22px}
.ctl{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;
  font-family:"Pixelify Sans",monospace;font-size:13px;color:var(--ink-soft);
  transition:transform .12s;
}
.ctl:active{transform:scale(.92)}
.ctl--main{
  width:62px;height:62px;background:var(--ink);border-color:var(--ink);
  position:relative;
}
.ctl--main::before{
  content:"";position:absolute;
  width:16px;height:20px;
  border-left:5px solid var(--bg);border-right:5px solid var(--bg);
}
.ctl--main.paused::before{
  width:0;height:0;border:solid transparent;border-width:11px 0 11px 18px;
  border-left-color:var(--bg);margin-left:4px;
}

/* ─── тост ────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);z-index:60;
  padding:11px 18px;border-radius:999px;background:var(--ink);color:var(--bg);
  font-size:14.5px;opacity:0;pointer-events:none;transition:.25s;max-width:88vw;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ─── планшет и десктоп ───────────────────────────────────── */
@media (min-width:760px){
  :root{--pad:28px}
  main{padding-bottom:210px}
  .card{max-width:760px}
  .specs{grid-template-columns:1fr 1fr}
  .spec:nth-child(odd){background:transparent}
  .spec:nth-child(4n+1),.spec:nth-child(4n+2){background:var(--surface-2)}
  .spec:nth-child(odd){border-right:1px solid var(--line)}
  .shots{grid-template-columns:repeat(2,1fr)}
  .deck{padding-left:max(28px,calc(50vw - 380px));padding-right:max(28px,calc(50vw - 380px))}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}