/* Nostalginator — Soviet department-store (Детский мир) shelf — decade dial, category chips, grid of price-tag cards with Russian names */
:root{
  --bg:#EDEBE8; --panel:#FFFFFF; --ink:#211A1A; --muted:#64595A; --line:#D7D0CE;
  --red:#C3201E; --accent:#C3201E; --accent-ink:#FFFFFF; --had:#2F7D4A; --gold:#B8860B;
  --display:"Rubik Mono One", "Arial Black", Impact, sans-serif;
  --body:"Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pixel:"VT323", ui-monospace, "Courier New", monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#171213; --panel:#231C1D; --ink:#F1EAE8; --muted:#B3A6A5; --line:#3D3232; --had:#4CC277; --gold:#E0B03C; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#171213; --panel:#231C1D; --ink:#F1EAE8; --muted:#B3A6A5; --line:#3D3232; --had:#4CC277; --gold:#E0B03C; color-scheme:dark}
body[data-d="1960s"]{--accent:#2E6E9E}
body[data-d="1970s"]{--accent:#C76B12}
body[data-d="1980s"]{--accent:#C3201E}
body[data-d="1990s"]{--accent:#8A3FB8}
body[data-d="2000s"]{--accent:#1A7FA6}

body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:24px 48px;}
.wrap{max-width:1040px; margin:0 auto; display:flex; flex-direction:column; gap:24px}
header{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:16px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red)}
.eyebrow svg{width:16px; height:16px}
h1{font-family:var(--display); font-weight:400; font-size:clamp(1.8rem, 6.5vw, 3.2rem); line-height:1.05; margin:4px 0 0; text-wrap:balance}
h1 span{color:var(--accent); transition:color .3s}
.tag{margin:8px 0 0; color:var(--muted); max-width:46ch}
.tally{font-family:var(--pixel); font-size:1.4rem; line-height:1.1; text-align:right; color:var(--muted)}
.tally b{display:block; font-family:var(--display); font-weight:400; font-size:2rem; color:var(--ink)}

.dial{display:grid; grid-template-columns:repeat(auto-fit,minmax(60px,1fr)); gap:8px}
.dial button{font-family:var(--display); font-size:clamp(1rem,4vw,1.5rem); padding:14px 4px; border:2px solid var(--ink); background:var(--panel); color:var(--ink); border-radius:4px; cursor:pointer; box-shadow:0 4px 0 var(--ink); transition:transform .1s, box-shadow .1s}
.dial button small{display:block; font-family:var(--body); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; opacity:.8; margin-top:2px}
.dial button:active{transform:translateY(3px); box-shadow:0 1px 0 var(--ink)}
.dial button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
button:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

.bar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips button{font:500 .9rem var(--body); text-transform:uppercase; letter-spacing:.08em; padding:6px 14px; border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--muted); cursor:pointer}
.chips button[aria-pressed="true"]{border-color:var(--ink); color:var(--ink); background:var(--panel)}
.random{font:700 .95rem var(--body); padding:8px 16px; border-radius:4px; border:2px dashed var(--accent); background:transparent; color:var(--ink); cursor:pointer}
.blurb{font-family:var(--pixel); font-size:1.35rem; color:var(--muted); margin:0}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px}
.card{background:var(--panel); border:1.5px solid var(--line); border-radius:4px; padding:16px; display:flex; flex-direction:column; gap:8px; min-width:0; transition:border-color .2s, transform .2s}
.card.flash{animation:flash .9s ease}
@keyframes flash{0%,100%{transform:none}30%{transform:translateY(-6px) rotate(-1deg); border-color:var(--accent)}}
.top{display:flex; justify-content:space-between; align-items:center; gap:8px}
.cat{font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); display:flex; align-items:center; gap:6px}
.cat svg{width:18px; height:18px; flex:none}
.year{font-family:var(--pixel); font-size:1.5rem; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums}
.card h3{margin:0; font-size:1.12rem; line-height:1.25; text-wrap:balance}
.ru{margin:-4px 0 0; font-size:.88rem; font-weight:500; color:var(--gold)}
.card p{margin:0; color:var(--muted); font-size:.93rem; flex:1}
.card button{align-self:flex-start; font:500 .85rem var(--body); padding:6px 12px; border-radius:4px; border:1.5px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; margin-top:4px}
.card.had{border-color:var(--had)}
.card.had button{background:var(--had); border-color:var(--had); color:#fff}
footer{color:var(--muted); font-size:.85rem; max-width:70ch}
.card{cursor:pointer}
.card:hover{border-color:var(--accent)}
.card:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.more{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.back{position:fixed; inset:0; background:rgba(10,6,6,.55); z-index:20; display:flex; align-items:flex-end; justify-content:center}
.sheet{background:var(--panel); color:var(--ink); width:100%; max-width:520px; border-radius:12px 12px 0 0; padding:20px max(16px, env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px)); display:flex; flex-direction:column; gap:12px; max-height:88vh; overflow:auto; animation:up .25s ease}
@keyframes up{from{transform:translateY(30px); opacity:.4}}
@media (min-width:640px){.back{align-items:center}.sheet{border-radius:12px; padding:24px}}
.sheet h2{margin:0; font-size:1.5rem; line-height:1.2; text-wrap:balance}
.sheet .x{align-self:flex-end; margin-bottom:-36px; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--line); background:transparent; color:var(--ink); font-size:1.1rem; cursor:pointer}
.sheet p{margin:0; color:var(--muted)}
.buy{font-family:var(--display); font-size:1.05rem; padding:14px; border-radius:4px; border:2px solid var(--ink); background:var(--accent); color:var(--accent-ink); box-shadow:0 4px 0 var(--ink); cursor:pointer}
.buy:active{transform:translateY(3px); box-shadow:0 1px 0 var(--ink)}
.shops{display:grid; gap:8px}
.shops h4{margin:4px 0 0; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.shops a{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid var(--line); border-radius:6px; color:var(--ink); text-decoration:none; font-weight:500}
.shops a:hover,.shops a:focus-visible{border-color:var(--accent); outline:none}
.shops a span{color:var(--muted); font-size:.82rem; font-weight:400; text-align:right}
.note{font-size:.85rem}

.acct{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; border:1.5px dashed var(--line); border-radius:6px; font-size:.92rem; color:var(--muted)}
.acct>span:not(.dot){flex:1; min-width:0}
.acct b{color:var(--ink)}
.dot{width:10px; height:10px; border-radius:50%; background:var(--had); flex:none}
.dot.off{background:var(--muted)} .dot.warn{background:var(--gold)}
.addbtn{font-family:var(--display); font-size:.9rem; padding:10px 14px; border-radius:4px; border:2px solid var(--ink); background:var(--accent); color:var(--accent-ink); box-shadow:0 3px 0 var(--ink); cursor:pointer}
.vote{display:inline-flex; align-items:center; gap:8px}
.votes{font-family:var(--pixel); font-size:1.2rem; line-height:1; padding:1px 6px; border-radius:3px; background:var(--bg); color:var(--ink); font-variant-numeric:tabular-nums}
.card.had .votes{background:rgba(255,255,255,.25); color:#fff}
.card.community{border-style:dashed}
.by{font-size:.8rem!important; color:var(--gold)!important; flex:0!important}
.form{display:grid; gap:12px}
.form label{display:grid; gap:4px; font-size:.82rem; font-weight:500; color:var(--muted)}
.form input,.form select,.form textarea{font:inherit; font-size:1rem; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:4px; padding:10px 12px; width:100%; box-sizing:border-box}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--accent)}
.form .row{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px}
.form .actions{display:flex; gap:10px; flex-wrap:wrap}
.ghost{font:500 .95rem var(--body); padding:12px 16px; border-radius:4px; border:1.5px solid var(--line); background:transparent; color:var(--ink); cursor:pointer}
.err{color:var(--red); font-size:.88rem; min-height:1.2em; margin:0}
.remove{align-self:flex-start; font:500 .85rem var(--body); background:none; border:none; color:var(--red); text-decoration:underline; cursor:pointer; padding:0}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:30; background:var(--ink); color:var(--bg); padding:12px 16px; border-radius:6px; font-size:.92rem; max-width:calc(100% - 32px); box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

html{-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
.topbar{display:flex; justify-content:flex-end; gap:10px; align-items:center; flex-wrap:wrap}
.linkbtn{font:500 .9rem var(--body); background:none; border:none; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:4px 0}
.banner{padding:12px 14px; border-radius:6px; background:var(--gold); color:#1a1300; font-size:.92rem}
.sep{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em}
.sep::before,.sep::after{content:""; flex:1; height:1px; background:var(--line)}
.google{display:flex; justify-content:center; align-items:center; gap:10px; font:500 1rem var(--body); padding:12px; border-radius:4px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer}
.ok{color:var(--had); font-size:.92rem; margin:0}
.skeleton{height:190px; border-radius:4px; background:var(--panel); border:1.5px solid var(--line); opacity:.6}

.pic{position:relative; margin:-16px -16px 2px; aspect-ratio:4/3; max-width:none; overflow:hidden; border-radius:3px 3px 0 0; background:var(--bg); border-bottom:1.5px solid var(--line)}
.pic img{display:block; width:100%; height:100%; object-fit:cover}
.pic.empty{display:grid; place-items:center; color:var(--accent); background:repeating-linear-gradient(135deg, var(--bg) 0 10px, var(--panel) 10px 20px)}
.pic.empty svg{width:42%; height:42%; opacity:.55}
.pic.empty span{position:absolute; bottom:8px; left:10px; font-family:var(--pixel); font-size:1.1rem; color:var(--muted)}
.sheet .pic{margin:0; border-radius:6px; border:1.5px solid var(--line); aspect-ratio:4/3; max-height:46vh; width:100%}
.sheet .pic img{object-fit:contain; background:var(--bg)}
.credit{font-size:.78rem!important}
.photo-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.filebtn{font:500 .9rem var(--body); padding:8px 14px; border-radius:4px; border:1.5px dashed var(--accent); background:transparent; color:var(--ink); cursor:pointer}
.preview{width:72px; height:54px; border-radius:4px; object-fit:cover; border:1.5px solid var(--line)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.vote,.more{white-space:nowrap}
.card .top:last-child{flex-wrap:wrap}
@media (max-width:520px){.dial button small{display:none}.dial button{padding-inline:2px}}
.era{color:var(--accent)}
.grid>.blurb{grid-column:1/-1; max-width:70ch}
.pic img.pixel{image-rendering:pixelated; object-fit:cover}
.sheet .pic img.pixel{object-fit:cover}
.tabs{display:grid; grid-template-columns:1fr 1fr; border:1.5px solid var(--line); border-radius:6px; padding:3px; gap:3px}
.tabs button{font:500 .95rem var(--body); padding:9px; border:none; border-radius:4px; background:transparent; color:var(--muted); cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--bg); color:var(--ink)}
.regions{display:flex; gap:6px; flex-wrap:wrap; border-bottom:2px solid var(--line)}
.regions button{font:700 .95rem var(--body); letter-spacing:.04em; padding:10px 16px; border:2px solid transparent; border-bottom:none; border-radius:6px 6px 0 0; background:transparent; color:var(--muted); cursor:pointer; margin-bottom:-2px}
.regions button[aria-selected="true"]{background:var(--panel); color:var(--ink); border-color:var(--line); border-bottom:2px solid var(--panel)}
.regions button:hover{color:var(--ink)}
.eyebrow span{display:inline}

/* ── Region pages ── */
:root{--ussr:#C3201E; --usa:#2A55C9; --europe:#1E5FA8; --europe2:#E0B100}
body[data-region="usa"] .eyebrow{color:var(--usa)}
body[data-region="europe"] .eyebrow{color:var(--europe)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--usa:#7FA2FF; --europe:#6FA8FF}}
:root[data-theme="dark"]{--usa:#7FA2FF; --europe:#6FA8FF}
.regions a{font:700 .95rem var(--body); letter-spacing:.04em; padding:10px 16px; border:2px solid transparent; border-bottom:none; border-radius:6px 6px 0 0; color:var(--muted); text-decoration:none; margin-bottom:-2px}
.regions a:hover{color:var(--ink)}
.regions a[aria-current="page"]{background:var(--panel); color:var(--ink); border-color:var(--line); border-bottom:2px solid var(--panel)}
.regions a:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.home-link{font-family:var(--display); font-size:1rem; color:var(--ink); text-decoration:none; margin-right:auto}
.topbar{justify-content:space-between}
h1 a{color:inherit; text-decoration:none}

/* ── Home page ── */
.home h1{font-size:clamp(2.2rem, 9vw, 4.4rem)}
.home .lead{color:var(--muted); max-width:52ch; margin:10px 0 0; font-size:1.05rem}
.pick{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px}
.region-card{display:flex; flex-direction:column; background:var(--panel); border:2px solid var(--ink); border-radius:6px; overflow:hidden; color:var(--ink); text-decoration:none; box-shadow:0 5px 0 var(--ink); transition:transform .12s, box-shadow .12s}
.region-card:hover{transform:translateY(-3px); box-shadow:0 8px 0 var(--ink)}
.region-card:active{transform:translateY(3px); box-shadow:0 2px 0 var(--ink)}
.region-card:focus-visible{outline:3px solid var(--accent); outline-offset:4px}
.strip{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:2px solid var(--ink)}
.strip img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; image-rendering:pixelated}
.region-card .body{display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px}
.region-card .band{height:8px}
.region-card h2{margin:0; font-family:var(--display); font-weight:400; font-size:1.5rem; line-height:1.1}
.region-card p{margin:0; color:var(--muted); font-size:.95rem}
.region-card .go{margin-top:6px; font-weight:700; color:var(--ink)}
.region-card .ex{font-family:var(--pixel); font-size:1.15rem; color:var(--muted)}