/* XTORYMAZE v0 — чёрный / белый / красный */
:root { --red:#e33131; --red-rgb:227,49,49; }
[data-theme="dark"]{ --bg:#111113; --paper:#171719; --fg:#f2eee9; --muted:#aaa5a0; --card:#1d1d20; --line:#343338; }
[data-theme="light"]{ --bg:#f0ede7; --paper:#faf8f4; --fg:#181716; --muted:#6d6962; --card:#fffdfa; --line:#d7d1c7; }

*{box-sizing:border-box; margin:0}
html,body{height:100%}
/* защита от «прыжков» на iPhone (как на proofofkarl.com):
   запрет двойного тап-зума, стабильный размер шрифта, обрезка бокового скролла */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
html,body{overflow-x:clip}
button,a,select{touch-action:manipulation}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
.r{color:var(--red)}
.muted{color:var(--muted)}
.small{font-size:13px}
.hidden{display:none !important}

/* topbar */
#topbar{
  position:fixed; top:max(8px, env(safe-area-inset-top)); left:50%; z-index:50; display:flex; align-items:center;
  justify-content:space-between; width:min(1160px,calc(100% - 36px)); height:52px;
  margin:0; padding:0 13px; border:1px solid rgba(255,255,255,.12);
  border-radius:15px; background:rgba(15,15,17,.94); color:#f5f1e8;
  backdrop-filter:blur(14px); box-shadow:0 12px 30px rgba(0,0,0,.16);
  transition:transform .28s ease, opacity .28s ease;
  transform:translateX(-50%);
}
[data-theme="light"] #topbar{background:rgba(250,248,244,.94);color:#181716;border-color:rgba(0,0,0,.12);box-shadow:0 12px 30px rgba(70,55,25,.12)}
/* при скролле вниз шапка уезжает, вверх — возвращается */
#topbar.hid{transform:translate(-50%,-160%); opacity:0; pointer-events:none}
.logo{font-weight:950; letter-spacing:.04em; font-size:17px}
.top-right{display:flex; align-items:center; gap:10px}
.icon-btn{background:none;border:none;color:var(--fg);font-size:18px;cursor:pointer;padding:4px}
/* шапка всегда тёмная — иконка темы должна быть светлой в обеих темах */
#topbar .icon-btn{color:#f5f1e8}
[data-theme="light"] #topbar .icon-btn{color:#181716}
.pill{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:3px 12px; font-size:13px; font-weight:600; cursor:pointer}
.pill b{color:var(--red)}
.coin{width:17px; height:17px; border-radius:50%; vertical-align:-3px}
.coin.big{width:26px; height:26px; margin-right:4px; vertical-align:-2px}

/* кнопки */
.btn{
  display:inline-block; border:1px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--fg); padding:11px 20px;
  font-size:15px; font-weight:600; cursor:pointer; text-align:center;
  transition:transform .06s, border-color .15s;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--red); border-color:var(--red); color:#fff}
.btn.ghost{background:none}
.btn.small{padding:7px 14px; font-size:13px; border-radius:8px}
.btn:disabled{opacity:.45; cursor:default}

/* компактная главная — истории видны сразу */
.catalog-head{position:relative;overflow:hidden;margin-top:0;padding:91px 0 28px;background:#101012;color:#f5f1e8;border-bottom:1px solid #2e2d31}
.catalog-head::before{content:"";position:absolute;inset:-100% -10%;background:radial-gradient(circle at 78% 52%,rgba(var(--red-rgb),.2),transparent 27%);pointer-events:none}
[data-theme="light"] .catalog-head{background:#faf8f4;color:#181716;border-bottom-color:#d7d1c7}
[data-theme="light"] .catalog-head::before{background:radial-gradient(circle at 78% 52%,rgba(var(--red-rgb),.13),transparent 30%)}
[data-theme="light"] .catalog-sub,[data-theme="light"] .hstat span{color:#6d6962}
[data-theme="light"] .hstat{border-left-color:rgba(0,0,0,.13)}
.catalog-head-inner{position:relative;width:min(1160px,calc(100% - 36px));margin:auto;display:flex;align-items:end;justify-content:space-between;gap:32px}
.catalog-title{margin:0;font-size:clamp(42px,7vw,76px);font-weight:900;line-height:.9;letter-spacing:-3.5px;text-transform:uppercase}
.catalog-sub{margin-top:12px;color:#aaa5a0;font-size:14px}
.hero-stats{display:flex;align-items:flex-end}
.hstat{display:grid;gap:5px;padding:0 24px;border-left:1px solid rgba(255,255,255,.13)}
.hstat:first-child{padding-left:0;border-left:0}.hstat:last-child{padding-right:0}
.hstat b{font-size:26px;font-weight:850;line-height:1}.hstat:first-child b{color:var(--red)}
.hstat span{color:#aaa5a0;font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}

/* каталог */
.catalog{max-width:1160px; margin:0 auto; padding:28px 18px 80px}
.catalog-bar{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}
.catalog h2{font-size:30px;line-height:1;letter-spacing:-1px}
.catalog-note{color:var(--muted);font-size:12px}
/* ===== карточки историй — по образцу Karl Games ===== */
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start}
.scard{
  position:relative; min-width:0; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); border-radius:21px; background:var(--card);
  isolation:isolate; transform:translateZ(0); background-clip:padding-box;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  box-shadow:0 12px 34px rgba(0,0,0,.055);
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.scard:hover{border-color:rgba(var(--red-rgb),.7); transform:translateY(-2px); box-shadow:0 20px 48px rgba(0,0,0,.15)}
.svis{position:relative; overflow:hidden; aspect-ratio:16/9; background:#131316}
.svis .art{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s, filter .25s}
.sbadge{position:absolute; top:13px; left:13px; z-index:2; display:flex; gap:7px; flex-wrap:wrap; transition:opacity .22s}
.badge{
  padding:8px 14px; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  background:rgba(8,8,11,.68); color:#fff; font-size:13px; font-weight:800; letter-spacing:.3px;
  backdrop-filter:blur(9px); box-shadow:0 5px 18px rgba(0,0,0,.28);
}
.price-circ{
  position:absolute; top:12px; right:12px; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:68px; height:68px; border-radius:50%;
  background:rgba(10,10,12,.66); color:#fff; backdrop-filter:blur(7px);
  box-shadow:0 8px 24px rgba(0,0,0,.3), 0 0 22px rgba(var(--red-rgb),.14);
  border:2px solid rgba(255,255,255,.35); transition:opacity .22s;
}
.price-circ img{width:24px; height:24px; border-radius:50%}
.price-circ b{font-size:13px; font-weight:900; letter-spacing:-.3px; line-height:1}
.stitle{
  position:absolute; left:0; right:0; bottom:0; z-index:2; margin:0; padding:70px 20px 18px;
  background:linear-gradient(180deg,transparent 0,rgba(6,6,10,.18) 28%,rgba(6,6,10,.78) 68%,rgba(6,6,10,.96) 100%);
  color:#fff; font-size:26px; font-weight:820; line-height:1.1; letter-spacing:-.5px;
  text-shadow:0 1px 3px rgba(0,0,0,.82),0 3px 12px rgba(0,0,0,.58); transition:opacity .22s;
}
.stitle .tclamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.smeta{display:flex; gap:13px; margin-top:9px; font-size:12.5px; font-weight:700; color:rgba(255,255,255,.82)}
.tap-cue{
  display:none; position:absolute; right:16px; bottom:16px; z-index:2; width:36px; height:36px;
  border:1px solid rgba(255,255,255,.38); border-radius:50%; background:rgba(10,10,14,.5);
  color:#fff; place-items:center; font-size:17px; backdrop-filter:blur(8px);
}
.tap-cue::before{content:"";position:absolute;inset:-7px;border:1px solid rgba(var(--red-rgb),.75);border-radius:50%;animation:tapPulse 2.2s ease-out infinite}
@keyframes tapPulse{0%{transform:scale(.72);opacity:0}25%{opacity:.8}100%{transform:scale(1.45);opacity:0}}
/* оверлей с описанием — по hover на компе, по тапу на телефоне */
.soverlay{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; gap:10px;
  overflow:hidden; padding:20px 18px 16px;
  background:linear-gradient(180deg,rgba(9,10,14,.9),rgba(9,10,14,.82));
  color:#fff; backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s;
}
.soverlay .otitle{margin:0; font-size:22px; font-weight:820; line-height:1.1; letter-spacing:-.4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.soverlay .oteaser{margin:0; flex:1; min-height:0; font-size:15.5px; line-height:1.52; color:rgba(255,255,255,.92);
  display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
.soverlay .omarks{font-size:13px; font-weight:700; color:rgba(255,255,255,.88)}
.soverlay .ometa{font-size:12px; color:rgba(255,255,255,.65)}
.soverlay .oopen{width:100%; font-size:15px}
@media(hover:hover) and (pointer:fine){
  .scard:hover .soverlay{opacity:1; visibility:visible}
  .scard:hover .stitle, .scard:hover .sbadge, .scard:hover .price-circ, .scard:hover .tap-cue{opacity:0}
  .scard:hover .svis .art{transform:scale(1.05); filter:brightness(.6)}
}
.scard.open .soverlay{opacity:1; visibility:visible}
.scard.open .stitle, .scard.open .sbadge, .scard.open .price-circ, .scard.open .tap-cue{opacity:0}
/* светлая тема — светлый скрим, как в Karl Games */
[data-theme="light"] .badge{background:rgba(253,251,245,.88); border-color:rgba(0,0,0,.13); color:#26200f; box-shadow:0 5px 16px rgba(70,55,25,.16)}
[data-theme="light"] .stitle{background:linear-gradient(180deg,transparent 0,rgba(250,248,243,.22) 28%,rgba(250,248,243,.86) 68%,rgba(250,248,243,.98) 100%); color:#211b15; text-shadow:0 1px 2px rgba(255,255,255,.9)}
[data-theme="light"] .smeta{color:rgba(33,27,21,.72)}
[data-theme="light"] .soverlay{background:linear-gradient(180deg,rgba(250,248,243,.95),rgba(250,248,243,.9)); color:#181716}
[data-theme="light"] .soverlay .oteaser{color:rgba(24,23,22,.9)}
[data-theme="light"] .soverlay .ometa{color:rgba(24,23,22,.6)}
[data-theme="light"] .soverlay .omarks{color:rgba(24,23,22,.85)}
[data-theme="light"] .tap-cue{background:rgba(253,251,245,.72); border-color:rgba(0,0,0,.2); color:#26200f}
[data-theme="light"] .svis{background:#e9e4da}
[data-theme="light"] .scard{box-shadow:0 12px 34px rgba(90,75,40,.09)}
[data-theme="light"] .scard:hover .svis .art{filter:brightness(1.08) opacity(.55)}

/* карточка истории */
.story-page{max-width:640px; margin:0 auto; padding:34px 20px 90px}
.story-page h1{font-size:clamp(26px,5vw,36px); line-height:1.2; margin-bottom:6px}
.story-page .author{color:var(--muted); margin-bottom:18px}
.story-page .teaser{font-size:17px; margin:18px 0 24px}
.statrow{display:flex; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:14px; margin-bottom:26px}
/* оценка = донат автору: плитки-реакции с ценником */
.rate-head{font-size:11px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:24px}
.marks{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:12px 0}
.mark{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  border:1px solid var(--line); border-radius:14px; padding:13px 6px 11px;
  cursor:pointer; background:var(--card); color:var(--fg);
  transition:border-color .15s, transform .06s;
}
.mark:active{transform:scale(.96)}
.mark:hover{border-color:rgba(var(--red-rgb),.6)}
.mark .mi{font-size:24px; line-height:1}
.mark .ml{font-size:12px; font-weight:800; letter-spacing:-.2px}
.mark .mp{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--muted)}
.mark .mp img{width:13px; height:13px; border-radius:50%}
.mark .mc{position:absolute; top:7px; right:9px; font-size:11px; font-weight:800; color:var(--muted)}
.mark.on{border-color:var(--red); box-shadow:0 0 0 1px var(--red), 0 6px 20px rgba(var(--red-rgb),.18)}
.mark.on .mp, .mark.on .mc{color:var(--red)}
.mark:disabled{opacity:.4; cursor:default}

/* читалка */
.reader{max-width:700px; margin:0 auto; padding:20px 24px 150px}
.reader .ep-title{font-size:14px; color:var(--muted); letter-spacing:.04em; margin-bottom:14px}
.reader .ep-body{font-size:clamp(18px,2.2vw,20px); line-height:1.72; letter-spacing:-.08px; white-space:pre-wrap;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.reader-bar{
  position:sticky; top:57px; z-index:40; display:flex; align-items:center; gap:10px;
  padding:10px 0; background:var(--bg); border-bottom:1px solid var(--line); margin-bottom:20px;
  transition:top .28s ease, transform .28s ease, opacity .28s ease;
}
.reader-bar .icon-btn{color:var(--fg)}
.reader-exit,.reader-theme{flex:0 0 36px;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.reader-theme{font-size:17px}
.confirm-box{max-width:390px;text-align:center;padding:28px 24px}
.confirm-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 14px;border:1px solid var(--line);border-radius:50%;background:var(--card);font-size:24px}
.confirm-box h2{font-size:25px;line-height:1.15;margin-bottom:9px}
.confirm-actions{display:flex;gap:9px;justify-content:center;margin-top:24px}
body.hdrhid .reader-bar{top:0}
/* в читалке на мобильных: шапка сайта скрыта совсем, плашка «назад/карта» — сверху
   и прячется при скролле вниз (жест вверх возвращает) */
@media(max-width:820px){
  body.reading #topbar{display:none}
  body.reading .reader-bar{top:0; padding-top:max(10px, env(safe-area-inset-top))}
  body.reading.hdrhid .reader-bar{transform:translateY(-110%); opacity:0; pointer-events:none}
  .reader-bar{gap:7px}
  .reader-bar .btn.small{padding:7px 10px}
  .reader-exit,.reader-theme{flex-basis:34px;width:34px;height:34px}
}
.reader-bar .title{font-size:14px; font-weight:700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.choices{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px; max-width:640px; margin:0 auto;
}
.choices .btn{width:100%; border-color:var(--red); font-size:15px}
.ending{
  margin-top:42px; padding:30px 24px; border:1px solid var(--line); border-radius:18px; text-align:center;background:var(--card);box-shadow:0 18px 48px rgba(0,0,0,.11)
}
.ending.good{border-color:rgba(47,176,80,.6); background:color-mix(in srgb,var(--card) 88%,#2fb050 12%)}
.ending.good .ending-kicker{color:#2fb050}
.ending.bad{border-color:rgba(var(--red-rgb),.55); background:color-mix(in srgb,var(--card) 88%,var(--red) 12%)}
.ending.bad .ending-kicker{color:var(--red)}
.ending-kicker{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}
.ending h2{margin:8px 0 7px;font-size:clamp(28px,6vw,42px);line-height:1;letter-spacing:-1.4px}
.ending-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ending-stat{display:grid;gap:4px;padding:14px 8px;border-left:1px solid var(--line)}.ending-stat:first-child{border-left:0}
.ending-stat b{font-size:22px;color:var(--fg)}.ending-stat span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.ending-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.ending-rate{margin:0 0 22px}
.ending-rate-title{font-size:11px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ending .marks{margin:0}

/* профиль */
.profile{max-width:560px; margin:0 auto; padding:34px 20px 80px}
.profile h1{margin-bottom:14px}
.balance-big{font-size:34px; font-weight:800; margin:10px 0 24px}
.ledger{border-top:1px solid var(--line)}
.ledger .row{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px}
.ledger .row small{display:block;color:var(--muted);margin-top:4px}.deposit-card{margin:24px 0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.deposit-card h2{margin-top:0}.copy-value,.deposit-code{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--fg);padding:13px;text-align:left;cursor:pointer}.copy-value code{overflow:hidden;text-overflow:ellipsis;font-size:12px}.copy-value span,.deposit-code span{flex:0 0 auto;color:var(--red);font-size:12px}.deposit-code{margin:8px 0 12px}.deposit-code b{font-size:20px;letter-spacing:.08em}.asset-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}.asset-list span{border:1px solid var(--line);border-radius:999px;padding:7px 11px;font-size:12px}.wallet-history{margin-top:28px}
.plus{color:#2fb050; font-weight:700}
.minus{color:var(--red); font-weight:700}

/* ===== живая карта-дерево (открывается кнопкой, при чтении скрыта) ===== */
#mapCanvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:0; visibility:hidden;
  transition:opacity .4s, visibility .4s;
}
.reader{position:relative; z-index:2; transition:opacity .45s}
.choices{transition:opacity .45s}
body.mapmode #mapCanvas{opacity:1; visibility:visible; pointer-events:auto; z-index:46; touch-action:none; background:var(--bg)}
body.mapmode .reader, body.mapmode .choices{opacity:0; pointer-events:none}

#treeG{will-change:transform}
#mapCanvas .edge{fill:none; stroke:var(--muted); stroke-width:1.4; opacity:.45; stroke-linecap:round}
#mapCanvas .edge.on{stroke:var(--red); stroke-width:2.4; opacity:1;
  filter:drop-shadow(0 0 4px color-mix(in srgb, var(--red) 60%, transparent))}
#mapCanvas .edge.cross{stroke-dasharray:3 6; opacity:.3}

#mapCanvas .node{cursor:default}
body.mapmode #mapCanvas .node{cursor:pointer}
#mapCanvas .tap{fill:transparent}
#mapCanvas .dot{fill:var(--muted); transition:fill .3s}
#mapCanvas .node.on .dot{fill:var(--red)}
#mapCanvas .node.end .dot{fill:var(--bg); stroke:var(--muted); stroke-width:2}
#mapCanvas .node.end.good .dot{stroke:#2fb050}
#mapCanvas .node.end.bad .dot{stroke:var(--red)}
/* серые заглушки — развилки, на которые ещё не ходил: видны, но недоступны */
#mapCanvas .edge.stub{stroke-dasharray:2 5; opacity:.28}
#mapCanvas .node.stub .dot{fill:var(--muted); opacity:.4}
body.mapmode #mapCanvas .node.stub{cursor:default}
body.mapmode #mapCanvas .node.stub .lbl{opacity:.4; font-style:italic}
#mapCanvas .node.cur .dot{fill:var(--red);
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--red) 80%, transparent))}
#mapCanvas .halo{fill:none}
#mapCanvas .node.cur .halo{fill:var(--red); animation:pulse 1.8s ease-out infinite}
@keyframes pulse{
  0%{r:6; opacity:.45}
  75%{r:19; opacity:0}
  100%{r:19; opacity:0}
}
#mapCanvas .lbl{
  font-size:10px; fill:var(--muted); opacity:0; transition:opacity .4s;
  user-select:none; pointer-events:none;
}
body.mapmode #mapCanvas .lbl{opacity:.9}
body.mapmode #mapCanvas .node.on .lbl{fill:var(--fg); font-weight:600}
body.mapmode #mapCanvas .node.cur .lbl{fill:var(--red); font-weight:700}

#mapZoom{display:none}
body.mapmode #mapZoom{
  display:flex; flex-direction:column; gap:8px;
  position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:48;
}
.zbtn{
  width:42px; height:42px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--fg); font-size:20px; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
#mapUI{display:none}
body.mapmode #mapUI{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  position:fixed; left:0; right:0; bottom:0; z-index:47;
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  pointer-events:none; text-align:center;
  background:linear-gradient(transparent, color-mix(in srgb, var(--bg) 85%, transparent));
}
#mapUI .hint{font-size:12px; color:var(--muted); line-height:1.6}
#mapUI .btn{pointer-events:auto}

/* модалы */
.modal{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:20px}
.modal-box{
  position:relative; background:var(--bg); border:1px solid var(--line); border-radius:16px;
  padding:28px 24px; max-width:360px; width:100%; text-align:center;
  display:flex; flex-direction:column; gap:14px; max-height:85svh; overflow:auto;
}
.modal-close{position:absolute; top:10px; right:12px; background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer}
#qrWrap{display:flex; justify-content:center}
#qrImg{border-radius:10px; background:#fff; padding:8px}
#mapList{display:flex; flex-direction:column; gap:8px; text-align:left}
.map-item{border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; font-size:14px}
.map-item:hover{border-color:var(--red)}
.map-item .muted{font-size:12px}

.toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
  background:var(--fg); color:var(--bg); border-radius:999px; padding:9px 18px;
  font-size:14px; font-weight:600; z-index:200; box-shadow:0 4px 20px rgba(0,0,0,.3);
}

@media(hover:none), (pointer:coarse){
  .tap-cue{display:grid}
}
@media(max-width:820px){
  .catalog-head-inner{display:block}.hero-stats{margin-top:24px}.hstat{flex:1;padding:0 15px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media(max-width:560px){
  #topbar{height:50px}.logo{font-size:14px}.top-right{gap:6px}.pill{padding:3px 8px}.catalog-head{margin-top:0;padding-top:84px}
  .catalog-head-inner{width:calc(100% - 24px)}.catalog-title{font-size:42px;letter-spacing:-2.4px}.catalog-sub{max-width:310px}
  .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);width:100%}.hstat{padding:0 8px}.hstat b{font-size:20px}.hstat span{font-size:7.5px;white-space:normal}
  .catalog{padding:24px 12px 70px}.catalog-bar{align-items:start}.catalog h2{font-size:25px}.catalog-note{max-width:130px;text-align:right}
  .grid{grid-template-columns:1fr;gap:16px}
  .svis{aspect-ratio:16/9}.stitle{padding:60px 16px 15px;font-size:23px}
  .soverlay{padding:16px 14px 13px}.soverlay .otitle{font-size:20px}.soverlay .oteaser{font-size:14px;-webkit-line-clamp:7}
  .price-circ{width:60px;height:60px}.price-circ img{width:20px;height:20px}.price-circ b{font-size:12px}
  .badge{font-size:12px;padding:7px 11px}
  .reader{padding-left:18px;padding-right:18px}.reader .ep-body{font-size:18px;line-height:1.68}
  .ending{padding:25px 15px}.ending-stat b{font-size:18px}.ending-stat span{font-size:8px}
  .marks{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ---------- /stats (админ) ---------- */
.stats-page{max-width:760px;margin:0 auto;padding:28px 20px 60px}
.stats-title{font-size:30px;font-weight:850;letter-spacing:1px;margin:12px 0 18px}
.periods{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.pbtn{border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);
  padding:7px 15px;font-size:13px;font-weight:700;cursor:pointer}
.pbtn.on{background:var(--red);border-color:var(--red);color:#fff}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:30px}
.stile{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:15px 16px;display:grid;gap:5px}
.stile b{font-size:24px;font-weight:850;line-height:1;color:var(--fg)}
.stile:first-child b{color:var(--red)}
.stile span{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}
.stats-h{margin:26px 0 8px;font-size:16px}
.chart-cap{color:var(--muted);font-size:12px;margin-bottom:10px;min-height:16px}
.chart-cap b{color:var(--fg)}
.chart{display:flex;align-items:flex-end;gap:2px;height:130px;border-bottom:1px solid var(--line);padding-bottom:1px}
.barwrap{flex:1;height:100%;display:flex;align-items:flex-end;cursor:pointer;min-width:0}
.bar{width:100%;min-height:2px;background:var(--red);border-radius:3px 3px 0 0;opacity:.85;transition:opacity .15s}
.barwrap:hover .bar,.barwrap.sel .bar{opacity:1}
.barwrap.sel .bar{box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--red)}
.chart-x{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:6px}
.top-list{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:6px 16px}
.top-list .row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.top-list .row:first-child{border-top:0}
@media(max-width:560px){.stat-grid{grid-template-columns:repeat(2,1fr)}.stile b{font-size:20px}}
/* social/profile v17 */
.story-tools{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.story-tools .on{border-color:var(--red);color:var(--red)}
.comments-section,.episode-comments{margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.comments-section h2{margin:0 0 16px}.comment{padding:14px 0;border-bottom:1px solid var(--line)}
.comment-head{display:flex;justify-content:space-between;gap:10px;font-size:13px}.comment-head a{font-weight:700}.comment-head span,.comment-ep{color:var(--muted);font-size:12px}.comment p{margin:7px 0 0;white-space:pre-wrap}.comment.locked p{color:var(--muted);font-style:italic}
.comment-form{display:grid;gap:10px;margin-top:18px}.comment-form textarea,.profile-edit textarea,.profile-edit input,.profile-edit select{width:100%;box-sizing:border-box;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:11px;font:inherit}.comment-form textarea,.profile-edit textarea{min-height:90px;resize:vertical}.spoiler-check{font-size:13px;color:var(--muted)}
.episode-comments{max-width:760px}.episode-comments summary{cursor:pointer;font-weight:700}.episode-comments[open] summary{margin-bottom:16px}
.author-hero{display:grid;grid-template-columns:112px 1fr;gap:24px;align-items:start;margin:24px 0}.author-hero h1{margin:4px 0}.author-hero p{line-height:1.55}.avatar{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--red),#19191d);color:#fff;font-size:34px;font-weight:900}.avatar img{width:100%;height:100%;object-fit:cover}
.social-links a{color:var(--red)}.profile-stats{display:flex;gap:22px;flex-wrap:wrap;padding:14px 0 20px}.profile-stats span{color:var(--muted)}.profile-stats b{color:var(--fg)}
.profile-wide{max-width:1180px}.profile-filters{display:flex;gap:8px;overflow-x:auto;margin:34px 0 22px;padding:3px 0 8px;scrollbar-width:none}.profile-filters::-webkit-scrollbar{display:none}.profile-filter{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);padding:10px 17px;font:700 14px/1 inherit;cursor:pointer}.profile-filter.active{background:var(--fg);border-color:var(--fg);color:var(--bg)}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.profile-feed{min-height:180px}.feed-empty{padding:55px 20px;text-align:center;border:1px dashed var(--line);border-radius:18px;color:var(--muted)}.feed-empty h2{color:var(--fg)}.rated-card{position:relative;min-width:0}.rating-ribbon{position:absolute;right:12px;top:12px;z-index:5;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(10,10,12,.78);border:1px solid rgba(255,255,255,.3);font-size:21px;backdrop-filter:blur(8px)}.profile-comments{max-width:760px}.profile-comment{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg)}.profile-comment span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-edit{margin:24px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.profile-edit label{display:grid;gap:6px;margin-bottom:12px;font-size:13px;color:var(--muted)}.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.privacy-row{grid-template-columns:1fr minmax(170px,220px)!important;align-items:center}.owner-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
@media(max-width:700px){.author-hero{grid-template-columns:76px 1fr;gap:15px}.avatar{width:76px;height:76px;font-size:24px}.profile-grid{grid-template-columns:1fr;gap:16px}.profile-filters{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}.edit-grid{grid-template-columns:1fr}.privacy-row{grid-template-columns:1fr!important}.story-tools .btn{flex:1 1 45%}}