/* ============================================================
   JOURNEY TO THE HORIZON — solo game
   Same editorial language as the GM manager: Jost, charcoal, hairlines,
   one red (harm), one muted gold (Hope / Soul Echoes).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#ffffff; --bg-soft:#f7f6f3; --ink:#26262a; --ink-soft:#5f5f64; --muted:#9b9aa0; --faint:#c3c2bd;
  --hair:#ebe9e4; --hair-2:#d9d7d1; --danger:#b23b32; --echo:#b08a2e; --fear:#3a3a44;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 10px 30px rgba(20,18,16,.12);
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; background:#fcfbf9; color:var(--ink);
  font-family:"Jost", system-ui, sans-serif; -webkit-font-smoothing:antialiased; letter-spacing:.2px; }
button{ font-family:inherit; }

/* ---------- map ---------- */
#stage{ position:fixed; inset:0; overflow:hidden; }
#map{ position:absolute; left:-30%; top:-30%; width:160%; height:160%; display:block; touch-action:none; user-select:none;
  transform-origin:18.75% 18.75%; will-change:transform; cursor:pointer; }
#map.panning{ cursor:grabbing; }
.fog{ fill:#eceae6; pointer-events:none; }
.m-reach{ fill:none; stroke:var(--ink); stroke-dasharray:3 4; opacity:.45; pointer-events:none; }
.m-hover{ fill:none; stroke:var(--ink); pointer-events:none; }
.m-path{ fill:none; stroke:var(--danger); stroke-linecap:round; stroke-linejoin:round; opacity:.85; pointer-events:none; }
.m-trail{ fill:none; stroke:var(--danger); stroke-linecap:round; opacity:.35; pointer-events:none; }
.m-party{ fill:var(--danger); stroke:#fff; pointer-events:none; }
.m-ring{ fill:none; stroke:var(--ink); opacity:.7; pointer-events:none; }
.m-echo{ fill:none; stroke:var(--echo); pointer-events:none; }
.m-hint{ fill:none; stroke:var(--echo); stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.m-hint-head{ fill:var(--echo); pointer-events:none; }
.m-label{ font-family:"Jost",sans-serif; font-weight:600; fill:var(--ink); text-anchor:middle; paint-order:stroke; stroke:#fff; stroke-linejoin:round; pointer-events:none; }

/* ---------- HUD ---------- */
.hud{ position:fixed; left:18px; top:18px; background:rgba(255,255,255,.94); border:1px solid var(--hair); border-radius:14px;
  padding:14px 16px 12px; box-shadow:var(--shadow); min-width:250px; backdrop-filter:blur(6px); }
.hud__top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:10px; }
.hud__day{ font-weight:300; font-size:28px; line-height:1; }
.hud__day small{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-right:6px; }
.hud__lvl{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.hud__lvl b{ font-size:15px; color:var(--ink); font-weight:500; letter-spacing:0; }
.row{ display:flex; align-items:center; gap:10px; margin:5px 0; }
.row .cap{ width:62px; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.pips{ display:flex; gap:4px; flex-wrap:wrap; }
.pip{ width:13px; height:13px; border-radius:3px; border:1.5px solid var(--hair-2); background:#fff; }
.pip.hp.on{ background:var(--danger); border-color:var(--danger); }
.pip.st.on{ background:var(--fear); border-color:var(--fear); }
.pip.hope{ border-radius:50%; }
.pip.hope.on{ background:var(--echo); border-color:var(--echo); }
.pip.echo{ transform:rotate(45deg) scale(.82); border-radius:2px; }
.pip.echo.on{ background:var(--echo); border-color:var(--echo); }
.pip.rest{ border-radius:50%; width:11px; height:11px; }
.pip.rest.on{ background:var(--ink); border-color:var(--ink); }
.hud__doom{ font-size:10px; color:var(--muted); letter-spacing:.06em; margin-top:6px; }

/* ---------- action bar ---------- */
.actions{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); display:flex; gap:10px; align-items:center;
  background:rgba(255,255,255,.94); border:1px solid var(--hair); border-radius:40px; padding:8px; box-shadow:var(--shadow); }
.act{ border:1px solid var(--hair-2); background:#fff; color:var(--ink); border-radius:30px; padding:12px 20px; cursor:pointer;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; transition:all .2s var(--ease); white-space:nowrap; }
.act:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.act.primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
.act.primary:hover{ background:#000; }
.act.gold{ border-color:var(--echo); color:var(--echo); }
.act.gold:hover{ background:var(--echo); color:#fff; }
.act:disabled{ opacity:.35; pointer-events:none; }
.act-hint{ font-size:12px; color:var(--muted); padding:0 10px; font-weight:300; }

/* ---------- log ---------- */
.log{ position:fixed; left:18px; bottom:22px; width:340px; max-height:30vh; overflow:auto; background:rgba(255,255,255,.9);
  border:1px solid var(--hair); border-radius:12px; padding:8px 14px; box-shadow:var(--shadow); font-size:12.5px; font-weight:300; line-height:1.45; }
.log__row{ padding:5px 0; border-bottom:1px solid var(--hair); display:grid; grid-template-columns:36px 1fr; gap:8px; }
.log__row:last-child{ border-bottom:none; }
.log__d{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; padding-top:2px; }
.log__row.bad{ color:var(--danger); } .log__row.good{ color:var(--echo); }
@media(max-width:1100px){ .log{ display:none; } }

/* ---------- menu + tooltip ---------- */
.menu-btn{ position:fixed; right:18px; top:18px; width:42px; height:42px; border-radius:50%; border:1px solid var(--hair);
  background:rgba(255,255,255,.94); box-shadow:var(--shadow); cursor:pointer; font-size:18px; color:var(--ink-soft); }
.zoom{ position:fixed; right:18px; bottom:22px; display:flex; flex-direction:column; gap:6px; }
.zoom button{ width:38px; height:38px; border-radius:10px; border:1px solid var(--hair-2); background:#fff; color:var(--ink-soft); cursor:pointer; font-size:16px; box-shadow:var(--shadow); }
.zoom button:hover{ background:var(--ink); color:#fff; }
.tip{ position:fixed; pointer-events:none; z-index:50; background:var(--ink); color:#fff; font-size:12px; padding:7px 11px; border-radius:8px;
  transform:translate(14px, 14px); opacity:0; transition:opacity .12s; white-space:nowrap; letter-spacing:.03em; }
.tip.show{ opacity:.95; }
.tip b{ font-weight:600; }

/* ---------- modal ---------- */
.modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; background:rgba(20,18,16,.38); padding:20px; }
.modal.show{ display:flex; }
.card{ background:#fff; border:1px solid var(--hair-2); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.24);
  width:min(520px,100%); max-height:88vh; overflow:auto; padding:26px 26px 22px; animation:rise .28s var(--ease-out); }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.card .kicker{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 10px; }
.card h2{ font-weight:300; font-size:28px; line-height:1.1; margin:0 0 10px; }
.card p{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); font-weight:300; margin:0 0 14px; }
.card .opts{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.opt{ text-align:left; border:1px solid var(--hair-2); background:#fff; border-radius:12px; padding:12px 16px; cursor:pointer; transition:all .18s var(--ease);
  display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:15px; color:var(--ink); }
.opt:hover{ border-color:var(--ink); background:var(--bg-soft); }
.opt small{ font-size:11px; color:var(--muted); letter-spacing:.06em; white-space:nowrap; }
.opt.on{ border-color:var(--ink); background:var(--ink); color:#fff; }
.opt.on small{ color:#ccc; }
.opt:disabled{ opacity:.35; pointer-events:none; }
.hopebox{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft); margin:4px 0 12px; cursor:pointer; user-select:none; }
.hopebox input{ accent-color:var(--echo); width:16px; height:16px; }
.dice{ display:flex; align-items:center; gap:14px; margin:6px 0 16px; }
.die{ width:54px; height:54px; border-radius:12px; display:grid; place-items:center; font-size:24px; font-weight:500; border:2px solid; }
.die.hope{ border-color:var(--echo); color:var(--echo); }
.die.fear{ border-color:var(--fear); color:var(--fear); }
.die small{ display:block; font-size:8px; letter-spacing:.2em; text-transform:uppercase; margin-top:-8px; }
.dice .sum{ font-size:14px; color:var(--ink-soft); }
.dice .sum b{ font-size:22px; color:var(--ink); font-weight:500; }
.verdict{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; margin:0 0 8px; }
.verdict.good{ color:var(--echo); } .verdict.bad{ color:var(--danger); } .verdict.mid{ color:var(--ink-soft); }
.delta{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.delta span{ font-size:12px; border:1px solid var(--hair-2); border-radius:20px; padding:3px 10px; color:var(--ink-soft); }
.delta .minus{ color:var(--danger); border-color:rgba(178,59,50,.35); }
.delta .plus{ color:var(--echo); border-color:rgba(176,138,46,.4); }

/* ---------- title screen ---------- */
.title{ position:fixed; inset:0; z-index:200; background:#fcfbf9; display:flex; align-items:center; justify-content:center; }
.title.hide{ display:none; }
.title__box{ text-align:center; max-width:560px; padding:20px; }
.title__box .kicker{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.title__box h1{ font-weight:300; font-size:54px; margin:14px 0 12px; letter-spacing:.01em; }
.title__box p{ color:var(--ink-soft); font-weight:300; font-size:16px; line-height:1.6; margin:0 0 28px; }
.title__btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.title__status{ margin-top:18px; font-size:12px; color:var(--muted); letter-spacing:.08em; min-height:16px; }

/* ---------- v1 (GDD): resources, party, montage, landmarks ---------- */
.res{ font-size:12px; color:var(--ink-soft); margin-right:10px; }
.res b{ font-weight:600; color:var(--ink); font-size:14px; }
.res.bad, .res.bad b{ color:var(--danger); }
.song{ font-size:12px; color:var(--muted); font-style:italic; }
.song.s1{ color:var(--ink-soft); } .song.s2{ color:var(--echo); } .song.s3{ color:var(--echo); font-weight:600; font-style:normal; }
.mates{ position:fixed; right:72px; top:18px; display:flex; flex-direction:column; gap:6px; }
.mate{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.94); border:1px solid var(--hair); border-radius:12px;
  padding:7px 12px 7px 8px; box-shadow:var(--shadow); min-width:200px; cursor:default; }
.mate__init{ width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:500; font-size:14px; }
.mate__body{ flex:1; display:flex; flex-direction:column; line-height:1.2; }
.mate__body b{ font-weight:500; font-size:13.5px; } .mate__body small{ font-size:10.5px; color:var(--muted); letter-spacing:.04em; }
.mate__bond{ font-size:11px; color:var(--echo); letter-spacing:1px; white-space:nowrap; }
.montage{ position:fixed; left:50%; bottom:92px; transform:translate(-50%, 8px); max-width:min(640px, 70vw); text-align:center;
  background:rgba(38,38,42,.88); color:#f4f2ee; font-size:14px; line-height:1.5; font-weight:300; padding:10px 18px; border-radius:12px;
  opacity:0; transition:opacity .35s, transform .35s var(--ease-out); pointer-events:none; }
.montage.show{ opacity:1; transform:translate(-50%, 0); }
.act.on{ background:var(--echo); border-color:var(--echo); color:#fff; }
.m-mark{ fill:#fff; stroke:var(--echo); pointer-events:none; }
.m-mark.done{ stroke:var(--faint); fill:#f3f2ef; }
.m-mark-t{ font-family:"Jost",sans-serif; font-weight:600; fill:var(--echo); text-anchor:middle; pointer-events:none; }
.m-mark-t.done{ fill:var(--muted); }
.log{ cursor:pointer; max-height:120px; transition:max-height .3s var(--ease); }
.log.open{ max-height:60vh; }
ul.chron{ list-style:none; padding:0; margin:0 0 12px; font-size:13.5px; line-height:1.5; color:var(--ink-soft); font-weight:300; }
ul.chron li{ padding:4px 0; border-bottom:1px solid var(--hair); }
ul.chron li span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-right:6px; }
@media(max-width:1100px){ .mates{ display:none; } }

/* ---------- percent checks ---------- */
.pct{ position:relative; height:14px; border-radius:7px; background:rgba(178,59,50,.14); margin:14px 0 6px; overflow:visible; }
.pct__win{ position:absolute; left:0; top:0; bottom:0; border-radius:7px; background:rgba(176,138,46,.55); }
.pct__roll{ position:absolute; top:-6px; width:3px; height:26px; margin-left:-1.5px; background:var(--ink); border-radius:2px; }
.pct__cap{ font-size:13px !important; color:var(--ink-soft); margin:0 0 10px !important; }
.pct__cap b{ color:var(--ink); font-weight:600; }
.verdict.good{ color:var(--echo); }

/* ---------- v3: pace switch, skill grid, costly verdict ---------- */
.segs{ display:inline-flex; border:1px solid var(--hair-2); border-radius:30px; overflow:hidden; }
.seg{ border:none; background:#fff; color:var(--ink-soft); padding:12px 14px; cursor:pointer; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; transition:all .2s var(--ease); }
.seg + .seg{ border-left:1px solid var(--hair-2); }
.seg:hover{ color:var(--ink); background:var(--bg-soft); }
.seg.on{ background:var(--ink); color:#fff; }
.act.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.sub{ font-size:12px; color:var(--muted); margin:6px 0 10px; }
.verdict.mid{ color:var(--ink-soft); }
.skgrid{ display:flex; flex-direction:column; gap:6px; margin:10px 0 14px; }
.skgrid__row{ display:grid; grid-template-columns:92px repeat(6, 1fr); gap:5px; align-items:center; }
.skgrid__row b{ font-weight:500; font-size:13px; line-height:1.1; }
.skgrid__row small{ display:none; }
.sk{ border:1px solid var(--hair-2); background:#fff; border-radius:8px; padding:6px 2px; font-size:10.5px; cursor:pointer; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; gap:1px; transition:all .15s var(--ease); font-family:inherit; }
.sk i{ font-style:normal; font-size:15px; font-weight:500; color:var(--ink); }
.sk:hover{ border-color:var(--echo); background:#fbf6ea; }
.sk:disabled{ opacity:.35; pointer-events:none; }
@media(max-width:640px){ .skgrid__row{ grid-template-columns:repeat(6, 1fr); } .skgrid__row b{ grid-column:1 / -1; } .actions{ flex-wrap:wrap; justify-content:center; border-radius:20px; max-width:calc(100vw - 32px); } }

/* ---------- v6: world screen, borders ---------- */
.zoom button.on{ background:var(--ink); color:#fff; }
.borders{ pointer-events:none; }
table.rel{ border-collapse:collapse; font-size:11px; margin:8px 0 4px; }
table.rel th, table.rel td{ padding:3px 6px; border-bottom:1px solid var(--hair); text-align:right; font-weight:500; white-space:nowrap; }
table.rel th:first-child{ text-align:left; }
.good{ color:var(--echo); } .bad{ color:var(--danger); }
.m-quest{ fill:var(--echo); stroke:#fff; stroke-width:1.5; pointer-events:none; }
.m-quest-t{ fill:#fff; font-family:"Jost",sans-serif; font-weight:700; text-anchor:middle; pointer-events:none; }

/* narrative sublines are sentences: they wrap, the label keeps its room */
.opt small{ white-space:normal; text-align:right; max-width:62%; line-height:1.35; }
.opt{ gap:16px; }

/* ---------- battle ---------- */
.battle{ position:fixed; inset:0; background:rgba(245,243,238,.97); display:none; z-index:40; padding:24px; gap:20px; align-items:center; justify-content:center; }
.battle.show{ display:flex; }
.battle__field{ flex:1 1 auto; max-width:900px; }
.battle__field svg{ width:100%; height:auto; display:block; }
.battle__panel{ width:340px; max-height:92vh; overflow:auto; }
.cell{ fill:#fff; stroke:var(--hair-2); stroke-width:1; cursor:pointer; }
.cell.cover{ fill:#eef0e6; } .cell.rock{ fill:#d8d6d0; cursor:default; } .cell.mire{ fill:#e4ebea; } .cell.burn{ fill:#f1dcd6; }
.cell.reach{ stroke:var(--ink); stroke-width:1.5; stroke-dasharray:3 3; } .cell.aim{ fill:#f7edd5; stroke:var(--echo); stroke-width:2; } .cell.dest{ stroke:var(--echo); stroke-width:2.5; }
.cell-g{ font-size:18px; text-anchor:middle; fill:#8a9a74; pointer-events:none; } .cell-g.rock{ fill:#8a8780; }
.unit{ cursor:pointer; } .unit circle{ stroke:#fff; stroke-width:2; } .unit.party circle{ fill:var(--ink); } .unit.foe circle{ fill:var(--danger); }
.unit.cur circle{ stroke:var(--echo); stroke-width:4; }
.u-init{ fill:#fff; font-family:"Jost",sans-serif; font-weight:600; font-size:17px; text-anchor:middle; pointer-events:none; }
.hpbg{ fill:#ddd; } .hp{ fill:var(--echo); } .unit.foe .hp{ fill:var(--danger); }
.u-st{ font-size:13px; fill:var(--echo); pointer-events:none; } .u-st.poison{ fill:#5c8a3a; }
.u-hit{ font-family:"Jost",sans-serif; font-weight:700; font-size:13px; text-anchor:middle; fill:var(--echo); paint-order:stroke; stroke:#fff; stroke-width:3; pointer-events:none; }
.u-ic{ filter:invert(1); pointer-events:none; } .u-ic.elite{ filter:invert(1) drop-shadow(0 0 2px #f3d27a); }
.ghost{ fill:none; stroke:var(--ink); stroke-width:2; stroke-dasharray:4 3; pointer-events:none; }
.blog{ margin-top:12px; font-size:12.5px; color:var(--ink-soft); line-height:1.5; } .blog div:first-child{ color:var(--ink); }
@media(max-width:900px){ .battle{ flex-direction:column; padding:12px; } .battle__panel{ width:100%; max-height:40vh; } }

/* ---------- pictograms (GDD «Инфографика»): silhouettes tinted by currentColor, like KDM Sheets ---------- */
.ic{ display:inline-block; width:18px; height:18px; flex:0 0 auto; background-color:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; vertical-align:-3px; }
.ic.lead{ width:20px; height:20px; color:var(--muted); }
.act .ic{ width:20px; height:20px; } .seg .ic{ width:22px; height:22px; }
.chp{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 6px; border:1px solid var(--hair); border-radius:20px; background:#fff; font-size:13px; line-height:1; white-space:nowrap; }
.chp b{ font-weight:500; font-variant-numeric:tabular-nums; }
.chp.big{ font-size:20px; font-weight:300; padding:4px 12px 4px 8px; } .chp.big .ic{ width:22px; height:22px; }
.chp.good{ color:var(--echo); border-color:#e8dcc0; } .chp.bad{ color:var(--danger); border-color:#efd3cf; } .chp.gold{ color:var(--echo); }
.chp.txt{ font-size:12px; color:var(--ink-soft); }
.trk{ display:inline-flex; gap:3px; } .trk .ic{ width:16px; height:16px; } .trk .ic.off{ opacity:.18; }
.trk.bad .ic.on{ color:var(--danger); } .trk.gold .ic.on{ color:var(--echo); } .trk.ink .ic.on{ color:var(--ink); } .trk.mini .ic{ width:12px; height:12px; }
.pbar{ display:inline-block; width:90px; height:6px; border-radius:3px; background:var(--hair); overflow:hidden; vertical-align:middle; }
.pbar i{ display:block; height:100%; background:var(--ink); border-radius:3px; } .pbar.gold i{ background:var(--echo); } .pbar.thin{ height:4px; width:100px; }
.pnum{ font-size:12px; font-weight:600; margin-left:6px; font-variant-numeric:tabular-nums; }
.hud{ min-width:0; } .hud__top{ display:flex; gap:6px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.hrow{ display:flex; align-items:center; gap:10px; margin:6px 0; } .hrow.res{ gap:5px; flex-wrap:wrap; }
.dlt{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; }
.mate__sk{ display:flex; gap:4px; margin-top:3px; } .mate__sk .chp{ padding:1px 7px 1px 4px; font-size:11.5px; } .mate__sk .ic{ width:14px; height:14px; }
.mate__bond{ display:flex; align-items:center; gap:4px; }
.act{ display:inline-flex; align-items:center; gap:8px; }
/* tooltips carry the words the pictograms leave out */
[data-tip]{ position:relative; }
[data-tip]:hover::after{ content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); background:var(--ink); color:#fff; font-size:12px; font-weight:400;
  letter-spacing:0; text-transform:none; line-height:1.4; padding:6px 10px; border-radius:8px; white-space:normal; width:max-content; max-width:260px; z-index:60; pointer-events:none; }
.hud [data-tip]:hover::after, .mates [data-tip]:hover::after{ left:0; transform:none; bottom:auto; top:calc(100% + 6px); }
.opt__l{ flex:1 1 auto; } .opt__r{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
.odds{ display:inline-flex; align-items:center; gap:5px; color:var(--ink); }
.odds .who{ font-size:11px; font-weight:600; width:18px; height:18px; border-radius:50%; background:var(--ink); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.odds .foes{ font-size:12px; font-weight:600; } .odds .pbar{ width:56px; }
.opt.on .odds{ color:#fff; } .opt.on .pbar{ background:#555; } .opt.on .pbar i{ background:#fff; }
.kicker .ic{ width:14px; height:14px; vertical-align:-2px; }
/* sanctuary services: tiles — the pictogram, a verb, what it costs and gives; the story in the tooltip */
.tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin-top:6px; }
.tile{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:12px; border:1px solid var(--hair-2); border-radius:12px; background:#fff; cursor:pointer; text-align:left; font:inherit; color:var(--ink); transition:all .15s var(--ease); }
.tile:hover{ border-color:var(--ink); background:var(--bg-soft); } .tile:disabled{ opacity:.35; pointer-events:none; }
.tile .ic.big{ width:30px; height:30px; } .tile__l{ font-size:13.5px; font-weight:500; line-height:1.2; }
.tile__c{ display:flex; flex-wrap:wrap; gap:4px; } .tile__c .chp{ font-size:11.5px; padding:1px 7px 1px 4px; } .tile__c .ic{ width:13px; height:13px; }
/* battle abilities: pictogram rows */
.abl{ display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; width:100%; padding:9px 12px; margin-bottom:6px; border:1px solid var(--hair-2); border-radius:12px; background:#fff; cursor:pointer; text-align:left; font:inherit; color:var(--ink); }
.abl .ic.el{ grid-row:1 / 3; width:26px; height:26px; } .abl__n{ font-size:14px; font-weight:500; } .abl__g{ display:flex; align-items:center; gap:6px; color:var(--ink-soft); }
.abl__g b{ font-size:13px; font-weight:600; color:var(--danger); } .abl__g .cd{ display:inline-flex; align-items:center; gap:2px; font-size:11px; }
.abl.on{ background:var(--ink); color:#fff; border-color:var(--ink); } .abl.on .abl__g{ color:#ddd; } .abl:disabled{ opacity:.35; pointer-events:none; }
.abl-row{ display:flex; gap:6px; margin-top:4px; } .abl.mini{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; font-size:11.5px; }
.abl.mini .ic{ width:22px; height:22px; }
.tile.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.facts{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 12px; } .facts .chp{ font-size:12px; }
/* world screen: tabs of pictograms */
.tabs{ display:flex; gap:4px; margin:4px 0 14px; border-bottom:1px solid var(--hair); padding-bottom:8px; }
.tab{ border:1px solid transparent; background:none; border-radius:10px; padding:7px 9px; cursor:pointer; color:var(--muted); }
.tab .ic{ width:22px; height:22px; } .tab.on{ color:var(--ink); border-color:var(--hair-2); background:var(--bg-soft); }
.tabbody{ max-height:58vh; overflow:auto; }
.wrow{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--hair); } .wrow .ic.big{ width:26px; height:26px; margin-top:2px; } .grow{ flex:1; }
.facts.tight{ margin:5px 0 0; gap:4px; } .facts.tight .chp{ font-size:11.5px; }
.chp.fac{ border-color:var(--fc); } .chp.fac .ic{ color:var(--fc); }
.repline{ display:flex; align-items:center; gap:8px; margin-top:5px; font-size:12px; }
.rbar{ position:relative; display:inline-block; width:140px; height:6px; background:var(--hair); border-radius:3px; }
.rbar::before{ content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--muted); }
.rbar i{ position:absolute; top:0; bottom:0; border-radius:3px; } .rbar i.pos{ background:var(--echo); } .rbar i.neg{ background:var(--danger); }
.tline{ border-left:2px solid var(--hair-2); margin-left:6px; }
.tl__i{ position:relative; padding:6px 0 8px 16px; font-size:13px; line-height:1.45; }
.tl__i::before{ content:""; position:absolute; left:-6px; top:11px; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--ink); }
.tl__i.e1::before{ border-color:var(--danger); } .tl__i.e2::before{ background:var(--ink); }
.tl__d{ display:block; font-size:10px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; } .tl__d::after{ content:" л. назад"; }
.frag{ font-size:13px; padding:6px 0 6px 12px; border-left:2px solid var(--echo); margin:6px 0; }

/* slice 8: the living world and legacy */
.m-scar{ fill:#8f8a86; fill-opacity:.35; stroke:#6d6865; stroke-opacity:.4; stroke-width:1; pointer-events:none; }
.tl__i.e3::before{ background:var(--echo); border-color:var(--echo); }
.tl__i.wn .tl__d{ display:flex; align-items:center; gap:4px; } .tl__i.wn .tl__d::after{ content:none; }
.modal.over{ z-index:300; }
.tl__i.wn.enemy::before, .tl__i.wn.cult::before, .tl__i.wn.doom::before{ border-color:var(--danger); }
.tl__i.wn.promise::before{ border-color:var(--echo); }
.tab__n{ font-size:10px; margin-left:3px; color:var(--ink-soft); font-weight:600; }
.act.sm{ padding:6px 8px; min-width:0; }
.title__btns .act small{ display:block; font-size:10px; color:var(--muted); letter-spacing:0; text-transform:none; }
.route{ width:100%; height:auto; display:block; margin:10px 0; background:var(--bg-soft); border-radius:10px; }
.r-land{ fill:#e4e1da; stroke:#fff; stroke-width:.4; } .r-scar{ fill:#9b958f; stroke:#fff; stroke-width:.4; }
.r-trail{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linejoin:round; stroke-dasharray:3 2; }
.r-shard{ fill:#fff; stroke:var(--echo); stroke-width:1.6; } .r-shard.on{ fill:var(--echo); }
.r-start{ fill:var(--ink); } .r-end{ fill:#fff; stroke:var(--ink); stroke-width:2; }
details.chaps{ margin:10px 0; } details.chaps summary{ cursor:pointer; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
.chap{ display:grid; grid-template-columns:86px 1fr; gap:8px; padding:8px 0; border-top:1px solid var(--hair); }
.chap__n{ display:flex; flex-direction:column; gap:2px; font-size:12px; } .chap__n b{ font-size:16px; }
.chap ul{ margin:0; padding-left:16px; font-size:12.5px; line-height:1.45; color:var(--ink-soft); }

/* slice 9: feedback — every change is seen, every cost previewed */
.doomring{ position:relative; width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.doomring svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.doomring circle{ fill:none; stroke-width:4; stroke-linecap:round; }
.dr-track{ stroke:var(--hair); } .dr-fill{ stroke:var(--ink); transition:stroke-dasharray .6s var(--ease-out); } .dr-ghost{ stroke:var(--danger); opacity:.55; stroke-dasharray:2 3; }
.doomring .ic{ width:15px; height:15px; margin-top:-8px; color:var(--ink-soft); } .doomring b{ position:absolute; bottom:9px; font-size:11px; font-weight:700; }
.doomring.dark .dr-fill{ stroke:var(--danger); } .doomring.cross{ animation:pulse 1s ease-in-out infinite; } .doomring.cross .ic{ color:var(--danger); }
.daylbl{ display:flex; flex-direction:column; line-height:1; margin-right:4px; } .daylbl b{ font-size:22px; font-weight:300; } .daylbl small{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.chp.meter small{ font-size:10px; color:var(--muted); margin-left:4px; display:inline-flex; align-items:center; gap:2px; } .chp.meter small .ic{ width:12px; height:12px; }
.chp.meter .to{ font-style:normal; color:var(--muted); margin:0 3px; font-weight:400; }
.chp.meter.low{ color:var(--danger); border-color:#efd3cf; animation:pulse 1.4s ease-in-out infinite; }
.chp.meter.starve{ color:var(--danger); border-color:var(--danger); } .chp.meter.starve small{ color:var(--danger); }
.mtr{ display:inline-flex; border-radius:6px; }
@keyframes pulse{ 50%{ transform:scale(1.06); } }
.bump{ animation:bump .42s var(--ease-out); } .hurt{ animation:hurt .5s var(--ease-out); }
@keyframes bump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.22); } 100%{ transform:scale(1); } }
@keyframes hurt{ 0%{ transform:translateX(0); background:rgba(178,59,50,.0); } 20%{ transform:translateX(-4px); background:rgba(178,59,50,.18); } 45%{ transform:translateX(4px); } 70%{ transform:translateX(-2px); } 100%{ transform:translateX(0); background:rgba(178,59,50,0); } }
.fly{ position:fixed; left:0; top:0; z-index:500; pointer-events:none; display:inline-flex; align-items:center; gap:3px; filter:drop-shadow(0 4px 10px rgba(20,18,16,.18)); }
.fly .chp{ background:#fff; font-size:14px; } .fly .ic.cause{ width:18px; height:18px; color:var(--danger); }
.hint{ position:fixed; z-index:450; max-width:280px; display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--ink); color:#fff; border-radius:12px; font-size:13px; line-height:1.4; box-shadow:var(--shadow); animation:hintIn .35s var(--ease-out); pointer-events:none; }
.hint .ic.big{ width:26px; height:26px; color:var(--echo); }
.hint::after{ content:""; position:absolute; left:var(--ax); width:12px; height:12px; background:var(--ink); transform:translateX(-50%) rotate(45deg); }
.hint.down::after{ top:-5px; } .hint.up::after{ bottom:-5px; }
.hint.right::after{ left:-5px; top:var(--ay); transform:translateY(-50%) rotate(45deg); }
@keyframes hintIn{ from{ opacity:0; transform:translateY(6px); } }
.hinted{ outline:2px solid var(--echo); outline-offset:3px; border-radius:10px; }
.stamp{ position:fixed; left:50%; top:26%; z-index:460; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 28px; background:rgba(252,251,249,.96); border:2px solid var(--ink); border-radius:4px; box-shadow:var(--shadow); text-align:center; pointer-events:none; animation:stampIn .45s cubic-bezier(.2,1.6,.4,1); max-width:360px; }
.stamp.bad{ border-color:var(--danger); } .stamp.bad .ic{ color:var(--danger); }
.stamp .ic.huge{ width:42px; height:42px; } .stamp b{ font-size:20px; font-weight:400; letter-spacing:.04em; } .stamp span{ font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.stamp.out{ opacity:0; transform:translate(-50%,-60%); transition:all .5s var(--ease); }
@keyframes stampIn{ from{ opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(-4deg); } }
.outc{ display:flex; gap:10px; margin-top:4px; } .outc__w, .outc__l{ display:inline-flex; gap:4px; align-items:center; }
.outc__l{ padding-left:10px; border-left:1px solid var(--hair-2); }
.eff{ display:inline-flex; align-items:center; gap:1px; font-style:normal; font-size:11px; } .eff .ic{ width:14px; height:14px; }
.eff.g{ color:var(--echo); } .eff.b{ color:var(--danger); } .eff b{ font-weight:600; }
.opt__l.col{ display:flex; flex-direction:column; align-items:flex-start; }
.tile.need{ border-color:var(--echo); box-shadow:0 0 0 2px rgba(176,138,46,.25); position:relative; }
.need__b{ position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background:var(--echo); color:#fff; display:flex; align-items:center; justify-content:center; animation:pulse 1.4s ease-in-out infinite; } .need__b .ic{ width:13px; height:13px; }
.pct__win{ animation:grow .5s var(--ease-out) both; } @keyframes grow{ from{ width:0; } }
.pct__roll{ animation:roll .9s cubic-bezier(.15,.9,.25,1) .35s both; } @keyframes roll{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } }
.pct__cap, .verdict{ animation:fadeUp .35s var(--ease-out) 1.15s both; } #modalCard .dlt{ animation:fadeUp .35s var(--ease-out) 1.3s both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px); } }
@media (prefers-reduced-motion: reduce){ .fly, .stamp, .hint{ animation:none; } .pct__roll, .pct__cap, .verdict, #modalCard .dlt{ animation:none; } }

/* slice 9: the battle — paper, ink, tokens that move */
.battle{ background:rgba(240,237,230,.97); }
.battle__field{ display:flex; flex-direction:column; gap:10px; }
.b-svg{ width:100%; height:auto; display:block; border-radius:6px; box-shadow:0 1px 0 var(--hair), 0 18px 40px rgba(20,18,16,.08); }
.hx{ cursor:default; } .hx.can{ cursor:pointer; }
.hx__f{ fill:rgba(255,255,255,.55); } .hx.rock .hx__f{ fill:#cfccc5; } .hx.mire .hx__f{ fill:#e3ebe9; } .hx.burn .hx__f{ fill:#f3e2dc; } .hx.cover .hx__f{ fill:#eef0e4; }
.hx__s{ fill:none; stroke:#8d8980; stroke-width:1; opacity:.55; } .hx:hover .hx__f{ fill:rgba(255,255,255,.95); }
.hx__i{ opacity:.55; pointer-events:none; } .hx__h{ pointer-events:none; }
.reach{ fill:var(--echo); opacity:.75; pointer-events:none; } .reach.dest{ fill:none; stroke:var(--echo); stroke-width:3; opacity:1; }
.plan{ stroke:var(--echo); stroke-width:2.2; stroke-dasharray:2 5; stroke-linecap:round; pointer-events:none; }
.aim{ fill:rgba(176,138,46,.16); stroke:var(--echo); stroke-width:2; pointer-events:none; }
.threat{ fill:url(#hThreat); stroke:#b23b32; stroke-width:1.2; stroke-opacity:.5; pointer-events:none; animation:threat 1.6s ease-in-out infinite; }
.threat-l{ stroke:#b23b32; stroke-width:1.4; stroke-dasharray:3 3; pointer-events:none; } .threat-m{ stroke:#b23b32; stroke-width:1; stroke-dasharray:1 4; opacity:.7; pointer-events:none; } .threat-to{ fill:none; stroke:#b23b32; stroke-width:1.2; opacity:.7; }
.threat.dim, .threat-l.dim, .threat-m.dim, .threat-to.dim, .intent.dim{ opacity:.15; }
@keyframes threat{ 50%{ fill-opacity:.55; } }
.tok{ cursor:pointer; } .tok.gone{ display:none; }
.tok__body{ fill:#fff; stroke:var(--ink); stroke-width:2.2; } .tok.party .tok__body{ fill:var(--ink); }
.tok.foe .tok__body{ fill:#fffdf9; stroke:#b23b32; stroke-width:3; } .tok.foe.elite .tok__body{ stroke-width:4.5; } .tok.foe.boss .tok__body{ stroke-width:5; }
.tok__l{ fill:#fff; font-family:"Jost",sans-serif; font-weight:600; font-size:16px; text-anchor:middle; pointer-events:none; }
.tok__ring-bg{ fill:none; stroke:rgba(38,38,42,.1); stroke-width:4; } .tok__ring{ fill:none; stroke:var(--ink); stroke-width:4; stroke-linecap:round; transition:stroke-dasharray .35s var(--ease-out); }
.tok.foe .tok__ring{ stroke:#b23b32; } .tok__ghost{ fill:none; stroke:#fff; stroke-width:4.4; animation:blink .7s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.1; } }
.tok__hp{ font-family:"Jost",sans-serif; font-size:10.5px; font-weight:600; text-anchor:middle; fill:var(--ink-soft); paint-order:stroke; stroke:#fbf9f4; stroke-width:3; pointer-events:none; }
.tok.cur .tok__body{ stroke:var(--echo); stroke-width:4; } .tok.cur .tok__in{ animation:curPulse 1.4s ease-in-out infinite; transform-origin:0 0; }
@keyframes curPulse{ 50%{ transform:scale(1.06); } }
.tok.hl .tok__body{ stroke:var(--echo); stroke-width:4; }
.tok.stun .tok__body{ stroke-dasharray:4 3; } .tok.defend .tok__ring-bg{ stroke:rgba(176,138,46,.45); stroke-width:6; }
.tok.hit .tok__body{ fill:#b23b32; } .tok.party.hit .tok__body{ fill:#fff; }
.tok.dying .tok__in{ animation:die .46s var(--ease) forwards; transform-origin:0 0; } @keyframes die{ to{ transform:scale(.4) rotate(18deg); opacity:0; } }
.tok__g{ pointer-events:none; } .tok__boss{ pointer-events:none; }
.st__b{ fill:#fff; stroke:var(--ink); stroke-width:1.2; } .st__b.vuln{ stroke:var(--echo); stroke-width:2; }
.st__n{ font-family:"Jost",sans-serif; font-size:9px; font-weight:700; fill:var(--ink); paint-order:stroke; stroke:#fff; stroke-width:2.5; }
.intent rect{ fill:#fff; stroke:#b23b32; stroke-width:1.4; } .intent__o{ fill:#b23b32; } .intent__n{ font-family:"Jost",sans-serif; font-size:10px; font-weight:700; fill:#fff; text-anchor:middle; }
.intent__d{ font-family:"Jost",sans-serif; font-size:12px; font-weight:700; fill:#b23b32; } .intent{ pointer-events:none; }
.pv{ pointer-events:none; } .pv rect{ fill:var(--ink); } .pv text{ font-family:"Jost",sans-serif; font-size:12.5px; font-weight:700; text-anchor:middle; fill:#fff; } .pv__d{ fill:#f0b4ae !important; }
.pv.heal rect{ fill:var(--echo); }
.flt{ font-family:"Jost",sans-serif; font-weight:700; font-size:17px; text-anchor:middle; paint-order:stroke; stroke:#fbf9f4; stroke-width:4; pointer-events:none; }
.flt.dmg{ fill:#b23b32; } .flt.crit{ fill:var(--echo); font-size:22px; } .flt.big{ font-size:24px; } .flt.poison{ fill:#5c8a3a; } .flt.heal{ fill:var(--echo); }
.flt.miss{ fill:var(--muted); text-decoration:line-through; font-size:14px; } .flt.st{ fill:var(--ink); font-size:12px; font-weight:600; letter-spacing:.04em; }
.flt.round{ font-size:13px; letter-spacing:.3em; text-transform:uppercase; fill:var(--ink-soft); font-weight:500; }
.ablbl text{ font-family:"Jost",sans-serif; font-size:12px; font-weight:600; text-anchor:middle; fill:#fff; } .ablbl rect{ fill:var(--ink); opacity:.92; } .ablbl{ pointer-events:none; }
.shot{ stroke:var(--ink); stroke-width:3; stroke-linecap:round; } .shot.foe{ stroke:#b23b32; }
.fell path{ stroke:#b23b32; stroke-width:3; stroke-linecap:round; opacity:.55; } .fell.ours path{ stroke:var(--ink); }
.b-order{ display:flex; align-items:center; gap:6px; min-height:40px; padding:4px 2px; }
.ord{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border:2px solid var(--ink); background:#fff; transition:transform .2s var(--ease-out); }
.ord.party{ background:var(--ink); color:#fff; } .ord.party b{ font-size:13px; } .ord.foe{ border-color:#b23b32; } .ord .ic{ width:17px; height:17px; }
.ord.now{ transform:scale(1.3); border-color:var(--echo); border-width:3px; margin:0 6px; }
.ord.xs{ width:20px; height:20px; border-width:1.5px; } .ord.xs .ic{ width:12px; height:12px; } .ord.xs b{ font-size:10px; }
.ord__r{ display:inline-flex; align-items:center; gap:3px; font-size:12px; color:var(--ink-soft); margin-right:6px; } .ord__r .ic{ width:15px; height:15px; }
.ord__next{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-left:6px; }
.bp__who{ display:flex; align-items:center; gap:12px; margin:6px 0 12px; } .bp__who .ord{ width:40px; height:40px; transform:none; margin:0; } .bp__who b{ display:block; font-size:18px; font-weight:400; } .bp__who small{ color:var(--ink-soft); display:inline-flex; align-items:center; gap:3px; } .bp__who small .ic{ width:12px; height:12px; }
.bp__step{ font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin:8px 2px 0; } .bp__step .ic{ width:14px; height:14px; }
.ledger{ display:flex; flex-direction:column; gap:4px; margin-top:12px; }
.lg{ display:flex; align-items:center; gap:5px; font-size:12.5px; opacity:.55; } .lg:first-child{ opacity:1; } .lg:nth-child(2){ opacity:.8; } .lg .ic{ width:14px; height:14px; color:var(--ink-soft); }
.lg.new{ animation:fadeUp .3s var(--ease-out); } .lg__d{ color:#b23b32; } .lg__d.crit{ color:var(--echo); } .lg__h{ color:var(--echo); } .lg__m{ color:var(--muted); text-decoration:line-through; }
details.blog{ margin-top:10px; font-size:12px; color:var(--ink-soft); } details.blog summary{ cursor:pointer; display:flex; align-items:center; gap:5px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; } details.blog div{ margin:4px 0; }