*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden}
body{background:#080604;color:#cbb68a;font:16px/1.4 Georgia,'Times New Roman',serif;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
#stage{position:relative;max-width:430px;margin:0 auto;min-height:100%;padding:8px 12px 24px;
  display:flex;flex-direction:column}
.screen{display:none;flex:1}
.screen.active{display:flex;flex-direction:column}
#screen-title{align-items:center;justify-content:center;gap:14px;text-align:center}
#screen-title h1{font-variant:small-caps;letter-spacing:.1em;color:#d8b878;font-weight:400}
.subtitle{font-style:italic;color:#8a7350;font-size:13px}
.btn{padding:12px 22px;border-radius:3px;cursor:pointer;font:15px Georgia,serif;
  font-variant:small-caps;letter-spacing:.09em;color:#e8cf9a;border:1px solid #6b5327;
  background:linear-gradient(180deg,#3a2c15,#241a0c);touch-action:manipulation}
.btn:disabled{opacity:.4;pointer-events:none}

.gtitle{text-align:center;margin:2px 0 6px}
.gtitle .gttl{
  display:inline-block;font-size:16px;font-weight:400;letter-spacing:.09em;color:#d8b878;
  text-shadow:0 0 14px rgba(216,168,80,.35),0 2px 2px #000;
  font-variant:small-caps;
}
.gtitle .orn{color:#6b5327;font-size:11px;margin:0 6px}

.book{
  position:relative;border:1px solid #4a3a1e;border-radius:4px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 34%, rgba(72,46,16,.5), rgba(16,11,6,0) 70%),
    linear-gradient(180deg,#151009,#0d0906 70%,#0a0705),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.06'/></feComponentTransfer></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.85),
    0 0 0 4px #140d06, 0 0 0 5px #3a2c17,
    0 8px 28px rgba(0,0,0,.9);
  padding:7px 8px 8px;
  display:flex;flex-direction:column;
}
.book::before,.book::after{
  content:'❦';position:absolute;color:#5c4726;font-size:11px;opacity:.8;pointer-events:none;
}
.book::before{left:6px;top:2px}
.book::after{right:6px;top:2px;transform:scaleX(-1)}

.candle{position:absolute;top:-13px;width:12px;height:18px;z-index:5;pointer-events:none}
.candle.cl{left:14px}.candle.cr{right:14px}
.candle .wax{position:absolute;bottom:0;left:1px;width:10px;height:12px;border-radius:2px 3px 1px 2px;
  background:linear-gradient(180deg,#d8c49a,#a8895c 70%,#8a6c3f)}
.candle .fl{position:absolute;left:2px;top:-8px;width:8px;height:13px;border-radius:50% 50% 50% 50%/62% 62% 40% 40%;
  background:radial-gradient(closest-side at 50% 38%,#fff3cd,#ffd98a 34%,#e8963c 70%,rgba(232,150,60,0));
  filter:drop-shadow(0 0 6px rgba(255,180,80,.8));
  animation:flick 1.4s infinite ease-in-out;transform-origin:50% 90%}
.candle.cr .fl{animation-delay:.55s}
@keyframes flick{50%{transform:scaleY(.84) scaleX(1.08) translateY(1px);opacity:.92}}

.scene{position:relative;margin:0 0 4px}
.intent{text-align:center;font-style:italic;font-size:12px;color:#b3762f;min-height:1.2em;margin-bottom:5px}
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:5px;margin-bottom:6px}
.part{border:1px solid #2e2312;border-radius:3px;padding:4px 6px;background:rgba(20,14,8,.6);font-size:10px}
.part .pname{display:flex;justify-content:space-between;gap:4px;font-variant:small-caps}
.part .pfx{font-style:italic;color:#6b5a3c;font-size:8.5px}
.part.brk{color:#c04a26}
.pstats{border-top:1px solid #2e2312;padding-top:5px}
.prow1{display:flex;align-items:center;gap:8px}
.pslabel{font-variant:small-caps;font-size:12px;color:#d8b878}
.hpbar{position:relative;flex:1;height:13px;background:#1c150c;border:1px solid #3a2c17;border-radius:8px;overflow:hidden}
.hpbar i{display:block;height:100%;background:linear-gradient(180deg,#9a8a3a,#6b5c22);transition:width .3s}
.hpbar b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#f0e2b8}
.prow2{display:flex;gap:8px;margin-top:4px}
.chip{font-size:10.5px;font-variant:small-caps;border:1px solid #2e2312;border-radius:3px;padding:1px 7px}
.chip.ghost2{margin-left:auto;color:#8a7350}
.log{min-height:2.4em;margin:5px 4px;font-size:11.5px;font-style:italic;color:#6f5f40}
.hand{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:3px 0 2px;min-height:176px;margin-top:auto}
.card,.mini{
  position:relative;min-width:0;overflow:hidden;padding:7px 6px 5px 8px;
  color:#241708;display:flex;flex-direction:column;gap:2px;
}
.card{
  min-height:172px;
  clip-path:polygon(2.5% 4%,8% 0,52% 1.5%,95% 0,100% 4%,99% 22%,100% 42%,98.5% 62%,100% 82%,98% 96%,92% 100%,55% 98.5%,12% 100%,4% 97%,1% 89%,3.5% 78%,.5% 66%,3% 55%,0 43%,3% 31%,1% 18%);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.09'/></feComponentTransfer></filter><rect width='120' height='120' filter='url(%23n)'/></svg>"),
    linear-gradient(158deg,#e8d8ae 0%,#d3bc8b 55%,#bda06c 100%);
  box-shadow:inset 0 0 16px rgba(84,58,24,.5),inset 0 0 3px rgba(60,40,16,.4);
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.65));
  touch-action:none;user-select:none;-webkit-user-select:none;
  will-change:transform;cursor:grab;
}
.card.drag{z-index:40;cursor:grabbing;filter:drop-shadow(0 12px 22px rgba(0,0,0,.85))}
.card.dim{opacity:.5;filter:grayscale(.4) brightness(.8) drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.card.armed{filter:drop-shadow(0 0 9px rgba(255,215,130,.95))}
.mini{
  min-height:150px;cursor:default;pointer-events:none;
  background:linear-gradient(158deg,#e8d8ae,#bda06c);
  box-shadow:inset 0 0 16px rgba(84,58,24,.5),inset 0 0 3px rgba(60,40,16,.4);
  border-radius:3px;
}

.seal{
  position:absolute;top:3px;right:4px;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#a83a28,#6b1f12 60%,#4a140a);
  color:#f0d9b0;font-size:12px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.6),inset 0 0 4px rgba(0,0,0,.5);
  transform:rotate(-8deg);border:1px solid rgba(240,217,176,.25);z-index:2;
}
.seal::before{content:'';position:absolute;inset:2px;border-radius:50%;
  border:1px dashed rgba(240,217,176,.35)}
.chead{display:flex;align-items:flex-end;gap:2px;padding-right:22px;min-height:24px}
.dropcap{
  width:22px;height:24px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font:700 17px Georgia,serif;color:#5c1f10;
  background:rgba(150,105,50,.16);border:1px solid #a1804a;border-radius:2px;
  box-shadow:inset 0 0 5px rgba(90,62,26,.35);
  text-shadow:0 1px 0 rgba(255,244,214,.4);
}
.cname{font-style:italic;font-size:10px;color:#4a3216;letter-spacing:0;padding-bottom:2px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart{flex:1;display:flex;align-items:center;margin:1px 0}
.cart svg{width:100%;height:auto;display:block}
.crule{height:1px;background:linear-gradient(90deg,transparent,#8a6c3f 30%,#8a6c3f 70%,transparent)}
.cval{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-top:1px}
.cval b{font-size:20px;line-height:1;color:#3a1510;text-shadow:0 1px 0 rgba(255,244,214,.35)}
.cval i{font-style:italic;font-size:8.5px;color:#6b4a22;line-height:1.1}
.chint{font-size:8px;letter-spacing:.08em;color:#8a7350;text-align:center;font-variant:small-caps;margin-top:1px}

.bottombar{display:flex;gap:8px;margin-top:8px}
.btn.ghost{flex:0 0 auto;color:#8a7350;border-color:#3a2c17;background:rgba(20,14,8,.6)}

.zone .base{fill:#120d08}
.zone .hatch{fill:url(#hatch)}
.zone .hatch2{fill:url(#hatch2);opacity:.55}
.zone .line{fill:none;stroke:#b3925c;stroke-width:1.7;stroke-linejoin:round;transition:stroke .15s}
.zone .detail{fill:none;stroke:#8a6c3f;stroke-width:1;opacity:.85;transition:stroke .15s}
.zone{transition:filter .15s,opacity .2s}
.zone.hov{filter:drop-shadow(0 0 7px rgba(255,190,90,.9))}
.zone.hov .line{stroke:#ffd98a}
.zone.hov .detail{stroke:#d8b878}
.zone.brokenz{opacity:.85}
.zone.brokenz .line{stroke:#57452c}
.zone.brokenz .detail{stroke:#453720;opacity:.5}
.zone.brokenz .hatch,.zone.brokenz .hatch2{opacity:.3}
.zone .crack{fill:none;stroke:#e05a2b;stroke-width:2;stroke-linejoin:round;opacity:0;
  filter:drop-shadow(0 0 4px rgba(224,90,43,.9));transition:opacity .4s}
.zone.brokenz .crack{opacity:1}
.tooth{fill:#e3d2a8;stroke:#8a6c3f;stroke-width:.6}
.zone.brokenz .tooth{fill:#57452c;stroke:#3a2c17}
.eyew{fill:#0a0705;stroke:#b3925c;stroke-width:1}
.pupil{fill:#ffb347;filter:drop-shadow(0 0 4px rgba(255,160,50,.95))}
.zone.brokenz .pupil{fill:#6b3a1a;filter:none}
.mcircle{opacity:.5}
.groundln{stroke:#3a2c17;stroke-width:1.4}
.beastwrap svg{width:72%;display:block;margin:0 auto}
.losetitle{font-size:28px;font-variant:small-caps;letter-spacing:.1em;color:#c04a26}
.pile{position:relative;width:52px;height:48px;flex:0 0 auto;cursor:pointer;touch-action:manipulation;
  background:linear-gradient(160deg,#4a3418,#221507);border:1px solid #6b5327;border-radius:3px}
.dmgprev{position:absolute;transform:translate(-50%,-50%);display:none;font-family:inherit;font-size:22px;color:#e8cf9a;text-shadow:0 0 10px rgba(255,140,40,.7);pointer-events:none;z-index:5}
.dmgprev.show{display:block}
@keyframes pileshuffle{0%,100%{transform:none}25%{transform:translateY(-3px) rotate(-4deg)}75%{transform:translateY(-2px) rotate(3deg)}}
.pile.shuffling{animation:pileshuffle .7s ease}
.pcount{position:absolute;right:-2px;top:-6px;min-width:20px;height:20px;padding:0 4px;border-radius:50%;
  background:#1c130a;border:1px solid #6b5327;color:#e8cf9a;font-size:11px;
  display:flex;align-items:center;justify-content:center}
.plabel{position:absolute;left:0;right:0;bottom:-13px;text-align:center;font-size:8.5px;
  font-variant:small-caps;color:#8a7350}
.pileoverlay{position:fixed;inset:0;z-index:90;display:none;flex-direction:column;
  background:rgba(6,4,2,.95);padding:14px}
.pileoverlay.show{display:flex}
.pohead{font-variant:small-caps;font-size:16px;color:#d8b878;margin-bottom:10px}
.pogrid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start}
.poempty{grid-column:1/-1;text-align:center;font-style:italic;color:#6f5f40;margin-top:44px}

/* высокие экраны: зверь и карты крупнее, рука прижата к низу под большой палец */
@media (min-height:740px){
  .beastwrap svg{width:88%}
  .hand{min-height:190px}
  .card{min-height:186px}
  .gtitle .gttl{font-size:17px}
  .intent{font-size:12px}
  .btn{padding:13px 8px}
  .btn.ghost{padding:13px}
  .book{flex:1}
  .scene{flex:1;display:flex;flex-direction:column;justify-content:center}
}
@media (min-height:850px){
  .beastwrap svg{width:100%}
  .hand{min-height:212px}
  .card{min-height:208px}
  .log{min-height:2.7em}
  .bottombar{margin-top:9px}
}

@media (prefers-reduced-motion: reduce){
  .candle .fl{animation:none !important}
  .pile.shuffling{animation:none}
}

.maprow{display:flex;gap:8px;justify-content:center;margin:2px 0 8px}
.mapwrap{flex:1}
#map-svg{width:100%;height:100%;max-height:70vh;display:block}
.medge{stroke:#57452c;stroke-width:.6;stroke-dasharray:2 1.8}
.medge.lit{stroke:#b3925c}
.mapnode circle{fill:#171008;stroke:#57452c;stroke-width:.8;transition:stroke .2s}
.mapnode .micon{fill:#8a7350;font-size:5px;text-anchor:middle;font-family:Georgia,serif}
.mapnode .mname{fill:#8a7350;font-size:3.6px;text-anchor:middle;font-variant:small-caps}
.mapnode .mbeast{fill:#6f5f40;font-size:3.2px;text-anchor:middle;font-style:italic}
.mapnode.open .mbeast{fill:#b3925c}
.mapnode.open{cursor:pointer}
.mapnode.open circle{stroke:#ffd98a;filter:drop-shadow(0 0 3px rgba(255,190,90,.8))}
.mapnode.open .micon,.mapnode.open .mname{fill:#e8cf9a}
.mapnode.done circle{fill:#241a0c;stroke:#3a2c17}
.mapnode.done .micon{fill:#57452c}
.mapnode.current circle{stroke:#e05a2b}
.maphint{text-align:center;font-style:italic;font-size:12px;color:#6f5f40;margin-top:6px}

.rewsub{text-align:center;font-style:italic;font-size:12px;color:#6f5f40;margin:2px 0 8px}
.rgold{text-align:center;font-variant:small-caps;font-size:14px;color:#d8b878;margin-bottom:10px}
.pickgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start}
.mini.pick{pointer-events:auto;cursor:pointer;transition:transform .12s}
.mini.pick:active{transform:scale(.96)}
.btn.wide{margin-top:auto}

.restbox{display:flex;flex-direction:column;gap:12px;flex:1;justify-content:center;align-items:center;text-align:center}
.resttext{font-style:italic;font-size:13.5px;color:#a08a60;line-height:1.5;max-width:300px}

.introbox{display:flex;flex-direction:column;gap:16px;flex:1;justify-content:center;align-items:center;text-align:center}
.introtext{font-style:italic;font-size:14.5px;color:#a08a60;line-height:1.6;max-width:320px}

.hidden{display:none !important}
.eventbox{display:flex;flex-direction:column;gap:12px;flex:1;justify-content:center}
.eventbox h2{font-variant:small-caps;font-weight:400;color:#d8b878;text-align:center;font-size:19px}
.eventtext{font-style:italic;font-size:13.5px;color:#a08a60;text-align:center;line-height:1.5}
#event-options{display:flex;flex-direction:column;gap:8px}
.eventoutcome{font-size:13px;color:#d8b878;text-align:center;min-height:1.4em;font-style:italic}

.shopitem{display:flex;flex-direction:column;gap:4px}
.shopitem.poor{opacity:.45}
.price{text-align:center;font-variant:small-caps;font-size:11px;color:#d8b878}
.shopactions{display:flex;gap:8px;margin-top:auto}
#btn-shop-remove{flex:1}
.shopempty{grid-column:1/-1;text-align:center;font-style:italic;color:#6f5f40;margin-top:20px}

.endbox{display:flex;flex-direction:column;gap:12px;flex:1;justify-content:center;align-items:center;text-align:center}
.endtitle{font-style:italic;color:#d8b878;font-size:15px}
.endline{font-size:13px;color:#8a7350}
.endline b{color:#e8cf9a}
.sealwrap{position:relative;width:74%;max-width:300px}
.sealbeast svg{width:100%;display:block}
.waxstamp{position:absolute;right:-6px;bottom:2px;transform:rotate(-14deg);
  font-variant:small-caps;letter-spacing:.12em;font-size:13px;color:#e8b48a;
  border:2px solid #6b1f12;border-radius:3px;padding:2px 10px;
  background:radial-gradient(circle at 40% 30%,rgba(168,58,40,.55),rgba(74,20,10,.65));
  box-shadow:0 2px 6px rgba(0,0,0,.6)}
.runstats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.runstats .chip b{color:#e8cf9a;margin-left:4px}