/* 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:sticky; top:max(8px, env(safe-area-inset-top)); z-index:50; display:flex; align-items:center;
  justify-content:space-between; width:min(1160px,calc(100% - 24px)); height:52px;
  margin:8px auto 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;
}
/* при скролле вниз шапка уезжает, вверх — возвращается */
#topbar.hid{transform:translateY(-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}
.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:-61px;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}
.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(3,minmax(0,1fr)); gap:20px; align-items:start}
.scard{
  position:relative; min-width:0; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); border-radius:21px; background:var(--card);
  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:1.05; background:#131316}
.svis svg.art{position:absolute; inset:0; width:100%; height:100%; 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:14.5px; line-height:1.5; color:rgba(255,255,255,.92);
  display:-webkit-box;-webkit-line-clamp:8;-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 svg.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 svg.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}
.marks{display:flex; gap:8px; flex-wrap:wrap; margin:20px 0}
.mark{border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; background:none; color:var(--fg)}
.mark.on{border-color:var(--red); color:var(--red); font-weight:700}
.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;
}
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 .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 rgba(var(--red-rgb),.55); border-radius:18px; text-align:center;background:color-mix(in srgb,var(--card) 88%,var(--red) 12%);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-kicker{color:var(--red);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}
.marks.center{justify-content:center;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}
.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(--red); stroke-width:2}
#mapCanvas .node.end.good .dot{stroke:#2fb050}
/* серые заглушки — развилки, на которые ещё не ходил: видны, но недоступны */
#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:-59px;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(3,1fr);width:100%}.hstat{padding:0 10px}.hstat b{font-size:22px}.hstat span{font-size:8px;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:1.15}.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}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}