/* Deck of Fate: looks. Owned by "art and sound".
   Dark fantasy pixel style: near-black skies over a pixel horizon (art.js), dark stone panels
   with tarnished gold, aged parchment cards, Pixelify Sans. Calm on purpose: nothing blinks,
   bobs or loops; cards and the camera only glide. Reduced-motion devices get no motion at all.
   Class names ui.js uses are listed in ENGINE.md. Pictures come from js/art.js. */
@font-face {
  font-family: 'Pixelify Sans';
  src: url(../assets/pixelify-sans.woff2) format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Pirata One';
  src: url(../assets/pirata-one.woff2) format('woff2');
  font-display: swap;
}
:root {
  /* night and stone */
  --void: #050407; --night: #0a080c; --stone: #121015; --stone2: #1a161d; --stone3: #2a232c; --ash: #5e5662;
  /* bone, parchment, ink */
  --bone: #d4c6a6; --bone2: #a49678; --parch: #a8977a; --parch2: #7a6a50; --ink: #0e0b0e;
  /* tarnished gold, blood, moss, mist, bruise */
  --gold: #a07c34; --gold2: #5e4820; --glim: #d4b060;
  --blood: #5e1218; --blood2: #a02a32; --moss: #4f6a3e; --moss2: #8aa26a; --mist: #7c8c9c; --bruise: #4a2c4e; --bruise2: #8a5a8e;
  --px: 3px; /* one "big pixel" for borders and shadows */
  --sky: #060607; --glow: rgba(120, 110, 140, .06); /* each floor tints these */
  /* fonts: a plain book face for anything you read, the pixel face only for titles and numbers */
  --read: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  --pix: 'Pixelify Sans', 'Courier New', monospace;
  --goth: 'Pirata One', 'UnifrakturMaguntia', 'Old English Text MT', Georgia, serif;
}
* { box-sizing: border-box; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0, 'calt' 0, 'dlig' 0; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--sky);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 35%, var(--glow), transparent 70%),
    radial-gradient(ellipse at center, transparent 25%, rgba(2, 1, 3, .96) 100%);
  color: var(--bone); font-family: var(--read);
  overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 1.2s ease;
}
img.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; pointer-events: none; }
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
button { font-family: inherit; }

/* HUD */
#hud { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px 12px;
  background: var(--night); border-bottom: 2px solid var(--gold2); box-shadow: 0 2px 0 var(--void);
  font-size: 20px; font-weight: 700; text-shadow: 2px 2px 0 var(--void); }
.stat { display: flex; gap: 6px; align-items: center; }
.stat .ico { display: inline-block; width: 24px; height: 24px; font-size: 0; background: center / contain no-repeat;
  image-rendering: pixelated; filter: saturate(.75); }
.stat.hp .ico { background-image: var(--px-heart); }
.stat.food .ico { background-image: var(--px-bread); }
.stat.gold .ico { background-image: var(--px-coin); }
.stat.hp { color: var(--blood2); } .stat.food { color: var(--parch); } .stat.gold { color: var(--glim); }
.stat.floor { color: var(--mist); font-size: 15px; font-weight: 400; margin-left: auto; }
#items { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.item { display: flex; gap: 4px; align-items: center; background: var(--stone2); color: var(--bone);
  border: 2px solid var(--void); box-shadow: inset 0 2px 0 var(--stone3);
  padding: 2px 8px 2px 3px; font-size: 14px; font-weight: 400; cursor: pointer; text-shadow: 1px 1px 0 var(--void); }
.item:hover { background: var(--stone3); }
.item.curse { background: var(--bruise); box-shadow: inset 0 2px 0 var(--bruise2); }
.item-icon { display: inline-flex; font-size: 16px; }
.item-icon img.px { width: 24px; height: 24px; }
/* low health / no food: a steady warning, no blinking */
body.low-hp .stat.hp { color: #e04a4a; text-decoration: underline; text-underline-offset: 4px; }
body.low-hp #table { box-shadow: inset 0 0 80px rgba(124, 29, 36, .55); }
body.low-food .stat.food { color: #e08050; text-decoration: underline; text-underline-offset: 4px; }

/* table and board */
#table { flex: 1; position: relative; min-height: 0; overflow: hidden;
  background: var(--px-land, none) center bottom / auto 36% repeat-x; image-rendering: pixelated; }
/* #board is ui.js's camera: it sets its position and transform; this only makes it glide */
#board { transition: transform .75s cubic-bezier(.45, 0, .2, 1); will-change: transform; }
.card { position: absolute; width: var(--cw); height: var(--ch); perspective: 800px; cursor: default;
  transition: transform .65s cubic-bezier(.3, .7, .2, 1), width .65s ease, height .65s ease, opacity .5s ease, translate .25s ease; }
/* ui.js places cards and the token with an inline transform; the motion below only uses the separate
   translate / rotate / scale properties, which stack on top of it instead of replacing it */
/* dealt: each new card sweeps in from the dealer's hand, tilted, and settles */
#board .card { animation: deal-in .6s cubic-bezier(.2, .75, .25, 1) backwards; }
#board .card.dealing { opacity: 1; }
@keyframes deal-in { from { opacity: 0; translate: 0 -46px; rotate: -8deg; scale: .88; } }
.card.gone { opacity: 0; pointer-events: none; }
.card.behind { opacity: 0; pointer-events: none; }
.card.past { opacity: .45; filter: saturate(.3); }
/* the roads: faint dashes ahead, dull gold where you walked, brighter to your next steps */
svg.roads line { stroke: var(--bone2); stroke-opacity: .25; stroke-width: 3; stroke-dasharray: 3 7; stroke-linecap: butt; }
svg.roads line.taken { stroke: var(--gold); stroke-opacity: .6; stroke-dasharray: none; stroke-width: 4; }
svg.roads line.open { stroke: var(--glim); stroke-opacity: .7; stroke-width: 4; stroke-dasharray: 5 4; }
.card-inner { position: relative; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.4, 0, .2, 1); transform-style: preserve-3d; will-change: transform; }
/* turned over: the card lifts off the table, flips, and lands */
.card.up .card-inner, .chance-card.up .card-inner { animation: flip-lift .65s cubic-bezier(.4, 0, .2, 1); }
@keyframes flip-lift {
  0% { transform: rotateY(0deg); }
  45% { transform: translateY(-9%) rotateY(85deg) scale(1.14); }
  100% { transform: rotateY(180deg); }
}
.card.up .card-inner, .chance-card.up .card-inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: var(--px) solid var(--void); box-shadow: 0 var(--px) 0 var(--void), 0 6px 10px rgba(0, 0, 0, .5); }
.face.back { background-color: #22141a; background-size: 16px 16px; image-rendering: pixelated;
  outline: 2px solid var(--gold2); outline-offset: calc(var(--px) * -3); }
.face.back img.emblem { width: 60%; max-width: 64px; }
.face.front { transform: rotateY(180deg); background: var(--parch); color: var(--ink); padding: 4px 3px;
  box-shadow: inset 0 0 0 2px var(--parch2), 0 var(--px) 0 var(--void), 0 6px 10px rgba(0, 0, 0, .5); gap: 2px; justify-content: space-between; }
.card-icon { font-size: calc(var(--cw) * .4); line-height: 1.1; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.card-icon img.px { width: calc(var(--cw) * .72); height: auto; max-height: 100%; aspect-ratio: 1; }
.card-name { font-size: max(8px, calc(var(--cw) * .115)); line-height: 1.05; font-weight: 700; padding-bottom: 2px;
  max-width: 100%; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.card.done .front { filter: grayscale(.85) brightness(.6); }
.card.here.done .front { filter: none; }
.card.kind-exit .front { background: #c9a860; box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 4px var(--gold2), 0 var(--px) 0 var(--void); }
.card.kind-boss .front { background: #b07a6a; box-shadow: inset 0 0 0 2px var(--blood2), inset 0 0 0 4px var(--blood), 0 var(--px) 0 var(--void); }
.card.kind-start .front { background: var(--bone2); }
.card.reachable { cursor: pointer; }
/* cards you can walk to: a still candle-gold frame */
#board .card.reachable .face { outline: var(--px) solid var(--glim); outline-offset: 2px; }
#board .card.reachable:hover .face { outline-color: #fff0b0; }
#board .card.reachable:hover { translate: 0 -5px; }
.card.here .front { box-shadow: inset 0 0 0 2px var(--parch2), 0 var(--px) 0 var(--void), 0 0 0 var(--px) var(--glim); }
.token { position: absolute; font-size: calc(var(--cw) * .45);
  transition: transform .65s cubic-bezier(.3, .7, .2, 1); pointer-events: none; z-index: 5;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .6)); }
.token img.px { width: calc(var(--cw) * .5); height: auto; }

/* dealer */
#dealer { padding: 10px 56px 10px 14px; background: var(--void); border-top: 2px solid var(--blood);
  min-height: 48px; font-size: 17px; color: var(--bone2); display: flex; align-items: center; gap: 10px; }
#dealer::before { content: ''; flex: none; width: 32px; height: 32px; background: var(--px-emblem) center / contain no-repeat; image-rendering: pixelated; }
.dealer-name { font-weight: 700; color: var(--blood2); flex: none; }
#dealer.speak #dealer-line { animation: fadein .8s ease; }
@keyframes fadein { from { opacity: 0; } }

/* sound button (added by audio.js) */
#mute { position: fixed; right: 8px; bottom: 8px; z-index: 20; width: 40px; height: 36px; padding: 0;
  background: var(--stone2); color: var(--glim); border: 2px solid var(--void); box-shadow: inset 0 2px 0 var(--stone3);
  font-size: 20px; cursor: pointer; }
#mute::before { content: '♪'; }
#mute.muted { color: var(--ash); }
#mute.muted::before { content: '♪̸'; text-decoration: line-through; }

/* panels: dark stone, tarnished gold frame */
#overlay { position: fixed; inset: 0; background: rgba(5, 4, 7, .78); display: flex; align-items: center;
  justify-content: center; padding: 12px; z-index: 10; }
#overlay.hidden { display: none; }
#panel { background: var(--stone); color: var(--bone); border: var(--px) solid var(--void);
  box-shadow: inset 0 0 0 2px var(--gold2), inset 0 0 0 5px var(--stone), inset 0 0 0 6px var(--stone3),
    0 0 0 2px var(--gold2), 0 10px 30px rgba(0, 0, 0, .7);
  max-width: 560px; width: 100%; max-height: calc(100% - 12px); overflow: auto; padding: 20px; text-align: center;
  animation: panel-in .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.encounter-panel .panel-art img.px { animation: art-in .6s .1s cubic-bezier(.2, .8, .3, 1.15) backwards; }
@keyframes art-in { from { opacity: 0; transform: scale(.8); } }
#panel h1 { font-size: 44px; margin: 10px 0; color: var(--blood2); text-shadow: 3px 3px 0 var(--void); letter-spacing: 1px; }
#panel h2 { margin: 6px 0; font-size: 26px; color: var(--glim); text-shadow: 2px 2px 0 var(--void); }
.panel-art { font-size: 64px; display: flex; justify-content: center; margin: 4px 0; }
.panel-art img.px, .panel-art .item-icon img.px { width: 128px; height: 128px; }
.panel-art .item-icon { font-size: 64px; }
.text { font-size: 18px; line-height: 1.4; color: var(--bone); }
.choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.choice { font-size: 17px; padding: 9px 14px; border: 2px solid var(--gold2);
  background: var(--stone2); color: var(--bone); cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center;
  box-shadow: inset 0 2px 0 var(--stone3), 0 3px 0 var(--void); transition: background .2s, border-color .2s; }
.choice:hover:not(:disabled) { background: var(--stone3); border-color: var(--gold); }
.choice:active:not(:disabled) { background: var(--stone); }
.choice:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(1); }
.choice.risky { background: #3a1418; border-color: var(--blood2); box-shadow: inset 0 2px 0 #5a2026, 0 3px 0 var(--void); }
.choice.risky:hover:not(:disabled) { background: #4c1a20; }
.choice .odds { font-size: 14px; background: var(--void); color: var(--glim); padding: 1px 6px; }
.choice .hint { width: 100%; font-size: 13px; color: var(--bone2); }
.notes { list-style: none; padding: 0; font-weight: 700; font-size: 17px; }
.notes .good { color: var(--moss2); } .notes .bad { color: #e0606a; }
.stats { color: var(--ash); }

/* chance cards: they glide, nothing shakes */
.chance-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; min-height: 130px; }
.chance-card { width: 84px; height: 118px; perspective: 800px; transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .4s ease; }
/* dealt one by one, only on the first lay-out (ui.js adds .dealing then) */
.chance-row.dealing .chance-card { animation: deal-in .5s cubic-bezier(.2, .75, .25, 1) backwards; }
.chance-row.dealing .chance-card:nth-child(2) { animation-delay: .08s; } .chance-row.dealing .chance-card:nth-child(3) { animation-delay: .16s; }
.chance-row.dealing .chance-card:nth-child(4) { animation-delay: .24s; } .chance-row.dealing .chance-card:nth-child(5) { animation-delay: .32s; }
.chance-row.dealing .chance-card:nth-child(6) { animation-delay: .4s; } .chance-row.dealing .chance-card:nth-child(n+7) { animation-delay: .48s; }
.chance-card.other .card-inner { animation-delay: .2s; animation-fill-mode: backwards; }
.chance-card .face.back img.emblem { width: 48px; }
.chance-card .front { font-weight: 700; font-size: 14px; justify-content: center; gap: 4px; }
.chance-card .front img.chance-art { width: 64px; height: 64px; }
.chance-card .front.kind-huge_success { background: #c9a860; }
.chance-card .front.kind-success { background: #9cb08a; }
.chance-card .front.kind-failure { background: #8a8494; }
.chance-card .front.kind-huge_failure { background: var(--blood); color: var(--bone); }
.chance-card.pickable { cursor: pointer; }
.chance-card.pickable:hover { transform: translateY(-6px); }
.chance-card.pickable:hover .face { outline: 2px solid var(--glim); outline-offset: 2px; }
.chance-card.picked { transform: translateY(-14px) scale(1.1); }
.chance-card.picked .front { box-shadow: 0 0 18px rgba(224, 192, 112, .55), 0 var(--px) 0 var(--void); }
.chance-card.other { transform: translateY(4px) scale(.95); }
.chance-card.picked .face { outline: var(--px) solid var(--glim); outline-offset: 2px; }
.chance-card.other { opacity: .45; }
.result-panel.kind-huge_success #panel, .result-panel.kind-success #panel { background: #1c2219; }
.result-panel.kind-failure #panel, .result-panel.kind-huge_failure #panel { background: #24161a; }
.over-panel.won #panel h2 { color: var(--moss2); }
.over-panel.lost #panel h2 { color: var(--blood2); }

/* title extras, collection, unlocks */
.title-panel .stats { font-size: 15px; }
#panel h3 { margin: 14px 0 4px; font-size: 18px; color: var(--glim); text-align: left; border-bottom: 2px solid var(--gold2); }
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; margin: 8px 0 16px; }
.mini-card { position: relative; aspect-ratio: 5 / 7; border-radius: 0; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 3px; text-align: center; border: 2px solid var(--void);
  box-shadow: 0 2px 0 var(--void); }
.mini-card.found { background: var(--parch); color: var(--ink); box-shadow: inset 0 0 0 2px var(--parch2), 0 2px 0 var(--void); }
.mini-card.found.mini-item { background: #b8aa88; }
.mini-card.unknown, .mini-card.locked { background-color: #22141a; background-size: 12px 12px; image-rendering: pixelated;
  color: var(--bone); opacity: 1; filter: brightness(.8); }
.mini-card.locked { filter: grayscale(.7) brightness(.6); }
.mini-card.locked::after { content: ''; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  background: var(--px-lock) center / contain no-repeat; image-rendering: pixelated; }
.mini-card img.emblem { width: 60%; }
.mini-card .card-icon { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.mini-card .card-icon img.px, .mini-card .item-icon img.px { width: 48px; height: 48px; }
.mini-card .card-name { font-size: 11px; line-height: 1.05; font-weight: 700; text-shadow: none; }
.mini-card.unknown .card-name, .mini-card.locked .card-name { font-size: 14px; color: var(--glim); text-shadow: 1px 1px 0 var(--void); }
.over-panel .unlocks-title { margin: 12px 0 4px; color: var(--glim); text-shadow: 2px 2px 0 var(--void); font-weight: 700; }
.result-panel .chance-card.result-card { margin: 0 auto 8px; transform: none; opacity: 1; }
.notes li.unlock { color: var(--glim); }

/* timed statuses and walking pop-ups (ui.js fades the pop-ups in and out) */
.item.timed { background: #1e2834; box-shadow: inset 0 2px 0 #2c3a4a; }
.item.timed.curse { background: var(--bruise); box-shadow: inset 0 2px 0 var(--bruise2); }
.item-timer { background: var(--void); color: var(--glim); padding: 0 4px; margin-left: 4px; font-size: 12px; }
#toasts { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: 6px; z-index: 15; pointer-events: none; }
.toast { background: var(--void); color: var(--bone); padding: 6px 14px; font-weight: 700; font-size: 18px; border-radius: 0;
  border: 2px solid var(--stone3); box-shadow: 0 3px 0 rgba(0, 0, 0, .6); text-shadow: 1px 1px 0 #000; }
.toast.good { color: var(--moss2); border-color: var(--moss); }
.toast.bad { color: #e0606a; border-color: var(--blood); }

/* classes: dealt at the start, chips in the HUD, class-only choices */
.class-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.class-card { width: 172px; padding: 10px 8px; border-radius: 0; background: var(--parch); color: var(--ink); display: flex; flex-direction: column;
  align-items: center; gap: 4px; border: var(--px) solid var(--void);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 4px var(--parch), inset 0 0 0 6px var(--parch2), 0 var(--px) 0 var(--void); }
.class-card.class-major { background: #cdb682; }
.class-card.class-minor { transform: scale(.94); background: #a4a0a8; box-shadow: inset 0 0 0 2px var(--ash), inset 0 0 0 4px #a4a0a8, inset 0 0 0 6px #7a7480, 0 var(--px) 0 var(--void); }
.class-card.dealing { animation: fadein .9s ease both; }
.class-card.dealing + .class-card.dealing { animation-delay: .4s; }
.class-rank { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #5a4628; }
.class-minor .class-rank { color: #3a3442; }
.class-art { font-size: 48px; line-height: 1; }
.class-art img.px { width: 96px; height: 96px; }
.class-name { font-size: 22px; font-weight: 700; color: var(--blood); }
.class-minor .class-name { color: #2e2836; }
.class-text { font-size: 13px; opacity: .85; }
.class-bonus { font-size: 14px; font-weight: 700; color: #34502a; }
.item.class-chip { background: #1e2834; box-shadow: inset 0 2px 0 #2c3a4a; }
.item.class-chip.class-minor { background: var(--stone2); box-shadow: inset 0 2px 0 var(--stone3); }
.choice.class-choice { background: #1a2430; border-color: var(--mist); box-shadow: inset 0 2px 0 #263444, 0 3px 0 var(--void); }
.choice.class-choice:hover:not(:disabled) { background: #22303e; }
.choice.class-choice.risky { background: #3a1418; border-color: var(--blood2); }
.class-tag { font-size: 13px; padding: 1px 6px 1px 2px; background: #2c3a4a; color: var(--bone); display: inline-flex; gap: 3px; align-items: center; border-radius: 0; }
.class-tag .item-icon img.px { width: 18px; height: 18px; }

/* phones */
@media (max-width: 520px) {
  #hud { font-size: 17px; gap: 4px 12px; }
  #dealer { font-size: 15px; }
  #panel { padding: 16px 14px; }
  .panel-art img.px, .panel-art .item-icon img.px { width: 96px; height: 96px; }
  #mute { width: 34px; height: 30px; font-size: 16px; right: 6px; bottom: 6px; }
  #overlay { padding-bottom: 44px; }
  .choices { gap: 7px; margin-top: 10px; }
  .choice { padding: 6px 10px; font-size: 16px; }
  .text { font-size: 16px; }
  .class-card { width: 46%; min-width: 140px; }
  .class-art img.px { width: 72px; height: 72px; }
}

/* each floor of the dark land: a sky colour and a faint glow (art.js sets body[data-look]) */
body[data-look=road] { --sky: #0b0c0d; --glow: rgba(110, 120, 100, .10); }
body[data-look=wood] { --sky: #09070d; --glow: rgba(110, 70, 140, .12); } /* the Shadow Wood: dusk purple */
body[data-look=sunken] { --sky: #040507; --glow: rgba(50, 80, 110, .08); } /* the Fallen Moon: eternal night */
body[data-look=table] { --sky: #0a0907; --glow: rgba(200, 180, 120, .08); } /* the Throne of Chance: gold and silver */
body[data-look=frost] { --sky: #0a0d13; --glow: rgba(150, 170, 200, .10); }
body[data-look=desert] { --sky: #0f0706; --glow: rgba(170, 50, 40, .12); } /* the Whirlwind: holy red */
body[data-look=harbour] { --sky: #070a0d; --glow: rgba(90, 120, 140, .10); }
body[data-look=riverboat] { --sky: #0c0609; --glow: rgba(170, 120, 50, .08); }
body[data-look=table] #dealer { border-top-color: var(--gold); }
body[data-look=riverboat] #dealer { border-top-color: var(--blood2); }
body[data-look=sunken] #dealer, body[data-look=harbour] #dealer, body[data-look=frost] #dealer { border-top-color: #2c4a5e; }
body[data-look=wood] #dealer { border-top-color: var(--bruise2); }
body[data-look=desert] #dealer { border-top-color: var(--gold2); }

/* the warrens: other realms, each its own sky */
body[data-look=shadow] { --sky: #0c0b0e; --glow: rgba(140, 130, 160, .10); }
body[data-look=death] { --sky: #0e0e10; --glow: rgba(200, 200, 210, .07); }
body[data-look=dark] { --sky: #020203; --glow: rgba(60, 60, 110, .07); }
body[data-look=light] { --sky: #221f15; --glow: rgba(255, 240, 180, .18); }
body[data-look=life] { --sky: #080f09; --glow: rgba(120, 200, 110, .12); }
body[data-look=fire] { --sky: #120403; --glow: rgba(240, 110, 40, .15); }
body[data-look=land] { --sky: #0f0c07; --glow: rgba(190, 150, 80, .11); }
body[data-look=chaos] { --sky: #0a040e; --glow: rgba(180, 80, 200, .13); }
body[data-look=light] #dealer, body[data-look=land] #dealer { border-top-color: var(--gold); }
body[data-look=fire] #dealer { border-top-color: #c0502a; }
body[data-look=life] #dealer { border-top-color: var(--moss2); }
body[data-look=chaos] #dealer, body[data-look=shadow] #dealer { border-top-color: var(--bruise2); }

/* readability: pixel font only for titles and numbers; nothing you read under 14px; brighter text */
#panel h1, #panel h2, #panel h3, .stat, .class-name, .class-rank, .dealer-name, .choice .odds, .item-timer, #mute,
.chance-card .front, .over-panel .unlocks-title { font-family: var(--pix); }
.stat.floor { font-family: var(--read); font-size: 15px; font-weight: 400; color: #c8bca0; }
.item { font-size: 15px; }
.card-name { font-size: max(11px, calc(var(--cw) * .13)); line-height: 1.1; font-weight: 700; }
.choice { font-size: 18px; }
.choice .hint { font-size: 15px; color: #c4b89c; }
.text { font-size: 18px; line-height: 1.45; }
.notes { font-size: 17px; }
.class-text { font-size: 15px; } .class-bonus { font-size: 15px; } .class-tag { font-size: 14px; }
.mini-card .card-name { font-size: 12px; }
.toast { font-size: 17px; }
.stats { color: #a89c88; font-size: 15px; }
/* the dealer's footer: name on top, the line underneath at full width */
#dealer { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; row-gap: 2px; align-items: center; color: var(--bone); }
#dealer::before { grid-row: 1 / span 2; align-self: center; }
.dealer-name { color: #e8747c; font-size: 15px; grid-column: 2; }
#dealer-line { grid-column: 2; font-size: 17px; line-height: 1.35; }
@media (max-width: 520px) {
  .text { font-size: 17px; }
  .choice { font-size: 17px; }
  #dealer-line { font-size: 16px; }
  .stat.floor { font-size: 14px; }
}

/* warrens: the button to open one, cards and roads that lead into one */
#warren-buttons { position: absolute; left: 50%; transform: translateX(-50%); top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; z-index: 6; }
.warren-button { font-family: var(--read); font-size: 16px; padding: 8px 14px; border-radius: 0; border: 2px solid var(--bruise2);
  background: #22182e; color: var(--bone); cursor: pointer; box-shadow: inset 0 2px 0 #34264a, 0 3px 0 var(--void); }
.warren-button:hover { background: #2e2040; }
#board .card.warren .face { box-shadow: 0 0 0 var(--px) var(--bruise2), 0 0 14px rgba(138, 90, 142, .7); }
svg.roads line.warren { stroke: var(--bruise2); stroke-opacity: .8; }
.warren-button.warren-light, .warren-button.warren-land { border-color: var(--gold); }
.warren-button.warren-fire { border-color: #c0502a; }
.warren-button.warren-life { border-color: var(--moss2); }
.warren-button.warren-death, .warren-button.warren-shadow { border-color: var(--ash); }
.warren-button.warren-dark { border-color: #3a3a5a; }
.warren-button.warren-chaos { border-color: #2ce8f5; }

/* devices set to reduce motion: nothing moves at all */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* houses of the deck: a coloured back and a big sigil (art.back sets .house-<id> and the colours) */
.face.back img.sigil { width: 66%; max-width: 72px; }
.face.back.house-life { outline-color: #8aa26a; }
.face.back.house-coin { outline-color: #e0c070; }
.face.back.house-war { outline-color: #b0353c; }
.face.back.house-shadow { outline-color: #8a84a0; }
.face.back.house-death { outline-color: #c8c0b0; }
.face.back.house-paths { outline-color: #7cb0b8; }
.face.back.house-sorcery { outline-color: #2ce8f5; }

/* house labels and unlock badges */
.back-house { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font-family: var(--read); font-weight: 700;
  font-size: max(11px, calc(var(--cw) * .13)); line-height: 1.05; color: var(--bone); text-shadow: 1px 1px 0 #000, 0 0 3px #000; padding: 0 3px; pointer-events: none; }
.face.back.house-life .back-house { color: #b8d898; } .face.back.house-coin .back-house { color: #f0d890; }
.face.back.house-war .back-house { color: #f0a0a0; } .face.back.house-paths .back-house { color: #b0e0e8; }
.face.back.house-sorcery .back-house { color: #b0f4ff; }
.face.back:has(.back-house) img.sigil { margin-bottom: 14%; }
.house-line { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 0 0 6px; font-size: 16px; color: var(--bone2); }
.house-line img.px { width: 24px; height: 24px; }
#house-info { background: var(--stone); color: var(--bone); border: 2px solid var(--gold2); border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--stone3), 0 8px 24px rgba(0, 0, 0, .7); font-size: 16px; line-height: 1.4; }
#house-info { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); width: min(340px, calc(100% - 30px)); z-index: 35; padding: 12px 14px; }
.house-info-head { display: flex; gap: 8px; align-items: center; font-family: var(--pix); font-size: 18px; color: var(--glim); }
.house-info-head img.px { width: 32px; height: 32px; }
#house-info p { margin: 6px 0 0; }
.token-badge { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 0; background: var(--gold2); color: var(--glim);
  font-size: 13px; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--void); font-family: var(--read); }
.token-note { font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 6px; color: var(--glim); }
.token-note .token-badge { position: static; }
.token-tag { font-size: 14px; padding: 1px 6px; background: var(--gold2); color: var(--glim); border-radius: 0; }

/* an event as a short scene: parts appear one after another (ui.js toggles .beat-wait) */
#panel.scene .beat-wait { opacity: 0; translate: 0 8px; pointer-events: none; }
#panel.scene > *, #panel.scene .beat, #panel.scene .choice { transition: opacity .45s ease, translate .45s cubic-bezier(.2, .8, .2, 1), background .2s, border-color .2s; }
#panel.scene .beat { display: inline; }
/* what a choice costs and gives, and why your odds are what they are */
.choice .effects, .choice .bonuses { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; width: 100%; }
.choice .fx, .choice .bonus { font-size: 14px; padding: 1px 7px; border-radius: 0; background: var(--void); border: 1px solid var(--stone3); color: var(--bone2); }
.choice .fx.good { color: var(--moss2); border-color: var(--moss); }
.choice .fx.bad { color: #e8868c; border-color: var(--blood); }
.choice .bonus { color: var(--glim); border-color: var(--gold2); }
.choice .bonus.bad { color: #e8868c; border-color: var(--blood); }
.choice .needs { width: 100%; font-size: 14px; font-style: italic; color: #d8a070; }
/* threads that follow you: notoriety, favor, debt, omens, allies, taint, secrets */
.item.mark-chip { font-style: italic; background: var(--night); box-shadow: inset 0 2px 0 var(--stone2); border-color: var(--stone3); }
.item.mark-chip.mark-notoriety { color: #e8868c; } .item.mark-chip.mark-favor { color: var(--glim); }
.item.mark-chip.mark-debt { color: #d8a070; } .item.mark-chip.mark-omens { color: var(--bruise2); }
.item.mark-chip.mark-allies { color: var(--moss2); } .item.mark-chip.mark-taint { color: #a0c070; }
.item.mark-chip.mark-secrets { color: var(--mist); }

/* gothic: blackletter titles, a pointed-arch window around each event's picture, darker backs */
#panel h1, #panel h2, .class-name, .house-info-head, .over-panel .unlocks-title { font-family: var(--goth); font-weight: 400; letter-spacing: .5px; }
#panel h1 { font-size: 52px; color: var(--blood2); text-shadow: 0 0 18px rgba(160, 42, 50, .35), 3px 3px 0 var(--void); }
#panel h2 { font-size: 32px; color: var(--glim); }
.class-name { font-size: 26px; }
.dealer-name { font-family: var(--goth); font-size: 19px; font-weight: 400; color: #c85a62; }
.panel-art { position: relative; isolation: isolate; width: 156px; height: 176px; margin: 2px auto 8px; align-items: flex-end; padding-bottom: 12px;
  background: var(--gold2); clip-path: polygon(0 100%, 0 38%, 12% 16%, 30% 5%, 50% 0, 70% 5%, 88% 16%, 100% 38%, 100% 100%); }
.panel-art::before { content: ''; position: absolute; inset: 3px; z-index: -1;
  background: radial-gradient(ellipse at 50% 60%, #1c1820, #070609 75%);
  clip-path: polygon(0 100%, 0 38%, 12% 16%, 30% 5%, 50% 0, 70% 5%, 88% 16%, 100% 38%, 100% 100%); }
@media (max-width: 520px) { .panel-art { width: 120px; height: 136px; padding-bottom: 8px; } }
.face.back { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .25), 0 var(--px) 0 var(--void), 0 6px 10px rgba(0, 0, 0, .6); }
#board .card.reachable .face.back { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .08), 0 var(--px) 0 var(--void), 0 6px 10px rgba(0, 0, 0, .6); }
.card.kind-exit .front { background: #8e7a48; }
.card.kind-boss .front { background: #7a4a44; }
.card.kind-start .front { background: #7e735e; }
#panel { box-shadow: inset 0 0 0 2px var(--gold2), inset 0 0 0 5px var(--stone), inset 0 0 0 6px var(--stone3),
  0 0 0 2px var(--gold2), 0 0 0 5px var(--void), 0 12px 40px rgba(0, 0, 0, .85); }
#panel::before { content: '✠'; display: block; color: var(--gold2); font-size: 18px; line-height: 1; margin: -8px 0 4px; }

/* card crawl fights: dark cards, a blood-red edge on monsters */
.crawl-status, .crawl-log { font-size: 16px; margin: 4px 0; color: var(--bone2); }
.crawl-log { font-style: italic; min-height: 1.4em; }
.crawl-row, .crawl-you { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 10px 0; }
.crawl-you { grid-template-columns: repeat(3, 1fr); }
.crawl-card { font-family: var(--read); position: relative; aspect-ratio: 5 / 7; width: 100%; border-radius: 0; border: 2px solid var(--void);
  background: var(--parch); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px;
  cursor: pointer; box-shadow: inset 0 0 0 2px var(--parch2), 0 3px 0 var(--void), 0 6px 10px rgba(0, 0, 0, .5);
  animation: deal-in .45s cubic-bezier(.2, .75, .25, 1) backwards; transition: translate .25s ease, outline-color .2s; }
.crawl-row .crawl-card:nth-child(2) { animation-delay: .07s; } .crawl-row .crawl-card:nth-child(3) { animation-delay: .14s; } .crawl-row .crawl-card:nth-child(4) { animation-delay: .21s; }
.crawl-card.kind-monster { background: #8a6a62; box-shadow: inset 0 0 0 2px var(--blood2), 0 3px 0 var(--void), 0 6px 10px rgba(0, 0, 0, .5); }
.crawl-card.kind-weapon { background: #8a8a90; }
.crawl-card.kind-shield { background: #7a8696; }
.crawl-card.kind-potion { background: #7e9070; }
.crawl-card.kind-coin { background: #a8925a; }
.crawl-card:hover { translate: 0 -3px; }
.crawl-card.selected { outline: var(--px) solid var(--glim); outline-offset: 2px; translate: 0 -6px; }
.crawl-art { font-size: 26px; line-height: 1; flex: 1; display: flex; align-items: center; }
.crawl-art img.px { width: 100%; max-width: 64px; height: auto; }
.crawl-name { font-size: 13px; line-height: 1.1; text-align: center; font-weight: 700; }
.crawl-value { position: absolute; top: 2px; right: 3px; min-width: 22px; padding: 1px 4px; font-family: var(--pix); font-weight: 700; font-size: 16px;
  background: var(--void); color: var(--glim); text-align: center; }
.crawl-card.kind-monster .crawl-value { color: #f08890; }
.crawl-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; color: var(--bone2); }
.crawl-slot .crawl-card { width: 72%; animation: none; }
.crawl-slot-name { font-family: var(--goth); font-size: 17px; color: var(--glim); }
.crawl-empty { opacity: .45; padding: 22px 0; font-style: italic; }
.crawl-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0; }
.crawl-actions button, .crawl-flee { font-family: var(--read); font-size: 17px; padding: 8px 14px; border: 2px solid var(--gold2);
  background: var(--stone2); color: var(--bone); cursor: pointer; box-shadow: inset 0 2px 0 var(--stone3), 0 3px 0 var(--void); }
.crawl-actions button:hover:not(:disabled), .crawl-flee:hover { background: var(--stone3); border-color: var(--gold); }
.crawl-actions button:disabled { opacity: .4; cursor: not-allowed; }
.crawl-flee { border-color: var(--blood2); background: #2a0e12; }
.result-panel.crawl-win #panel { background: #141a12; }
.result-panel.crawl-lose #panel { background: #1e0c10; }
.result-panel.crawl-flee #panel { background: #16141c; }

/* choices you can feel: a gold marker and warm glow on hover, a firm press, and once chosen
   (ui.js marks .chosen / .unchosen) the pick flares like a seal pressed into wax while the rest fall away */
.choice { position: relative; overflow: hidden; }
.choice::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--glim); opacity: 0;
  transition: opacity .2s ease, width .2s ease; }
.choice:hover:not(:disabled)::before, .choice:focus-visible::before { opacity: 1; }
.choice:hover:not(:disabled) { box-shadow: inset 0 2px 0 var(--stone3), 0 3px 0 var(--void), 0 0 16px rgba(212, 176, 96, .22); }
.choice.risky:hover:not(:disabled) { box-shadow: inset 0 2px 0 #5a2026, 0 3px 0 var(--void), 0 0 18px rgba(160, 42, 50, .4); }
.choice:active:not(:disabled) { translate: 0 2px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6), 0 1px 0 var(--void); }
.choice.chosen { border-color: var(--glim); background: #3a2e18; animation: seal .55s cubic-bezier(.2, .8, .2, 1) both; }
.choice.chosen::before { opacity: 1; width: 100%; background: radial-gradient(circle at 50% 50%, rgba(240, 210, 130, .45), transparent 70%); }
.choice.risky.chosen { background: #4a141a; border-color: #e05a62; }
@keyframes seal { 0% { scale: 1; } 35% { scale: 1.04; box-shadow: 0 0 0 2px var(--glim), 0 0 30px rgba(240, 200, 110, .6); } 100% { scale: 1; box-shadow: 0 0 0 1px var(--glim), 0 0 16px rgba(240, 200, 110, .3); } }
.choice.unchosen { opacity: .25; translate: 0 4px; filter: grayscale(1); transition: opacity .35s ease, translate .35s ease, filter .35s; pointer-events: none; }

/* things you can act on show it without words */
.chance-card.pickable .face { outline: 2px solid var(--gold2); outline-offset: 2px; animation: beckon 2.6s ease-in-out infinite; }
@keyframes beckon { 50% { outline-color: var(--glim); box-shadow: 0 0 16px rgba(212, 176, 96, .45), 0 var(--px) 0 var(--void); } }
.crawl-row .crawl-card { outline: 2px solid transparent; outline-offset: 2px; }
.crawl-row .crawl-card:hover, .crawl-slot.pack .crawl-card:hover { outline-color: var(--gold2); }
.crawl-card:active { translate: 0 -2px; scale: .97; }
.crawl-slot.pack .crawl-card { cursor: pointer; box-shadow: inset 0 0 0 2px var(--parch2), 0 3px 0 var(--void), 0 0 12px rgba(212, 176, 96, .3); }
/* the unlock badge: a little star sprite instead of a text glyph */
.token-badge { font-size: 0 !important; background: var(--px-star) center / 18px 18px no-repeat, var(--void) !important; image-rendering: pixelated;
  box-shadow: 0 0 0 2px var(--gold2), 0 0 10px rgba(212, 176, 96, .5) !important; }

/* fights: four cards always fit; with nothing picked the row beckons, once a card is picked the actions do */
.crawl-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crawl-you { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crawl-card { min-width: 0; }
.crawl-name { overflow-wrap: anywhere; }
@media (max-width: 380px) { .crawl-row, .crawl-you { gap: 5px; } .crawl-name { font-size: 12px; } .crawl-value { font-size: 14px; } }
.crawl-row:not(:has(.selected)) .crawl-card { animation: deal-in .45s cubic-bezier(.2, .75, .25, 1) backwards, beckon-card 2.6s ease-in-out .6s infinite; }
@keyframes beckon-card { 50% { outline-color: var(--glim); box-shadow: inset 0 0 0 2px var(--parch2), 0 3px 0 var(--void), 0 0 14px rgba(212, 176, 96, .45); } }
.crawl-panel:has(.crawl-row .selected) .crawl-actions button:not(:disabled) { border-color: var(--glim); box-shadow: inset 0 2px 0 var(--stone3), 0 3px 0 var(--void), 0 0 14px rgba(212, 176, 96, .35); }

/* fate cards: your own small tarot cards, played onto a chance draw */
.fate-hand { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--stone3); }
.fate-card { font-family: var(--read); width: min(88px, calc(25% - 6px)); min-width: 0; padding: 6px 5px 7px; border-radius: 0; border: 2px solid var(--bruise2); cursor: pointer;
  background: linear-gradient(#24182c, #140e18); color: var(--bone); display: flex; flex-direction: column; align-items: center; gap: 3px;
  box-shadow: inset 0 0 0 2px #2e2238, 0 3px 0 var(--void), 0 0 10px rgba(138, 90, 142, .3); transition: translate .2s ease, box-shadow .2s, opacity .3s;
  animation: deal-in .45s cubic-bezier(.2, .75, .25, 1) backwards; }
.fate-card:nth-child(2) { animation-delay: .07s; } .fate-card:nth-child(3) { animation-delay: .14s; } .fate-card:nth-child(n+4) { animation-delay: .21s; }
.fate-card:hover:not(:disabled) { translate: 0 -5px; box-shadow: inset 0 0 0 2px #2e2238, 0 3px 0 var(--void), 0 0 18px rgba(176, 120, 200, .6); }
.fate-card:active:not(:disabled) { translate: 0 -1px; }
.fate-card:disabled { opacity: .35; cursor: default; filter: grayscale(.8); }
.fate-card.played { opacity: 0; translate: 0 -36px; scale: 1.08; transition: opacity .35s ease, translate .35s ease, scale .35s ease; }
.fate-art img.px { width: 48px; height: 48px; }
.fate-name { font-family: var(--goth); font-size: 16px; line-height: 1.05; text-align: center; color: #d8b0e0; }
.fate-text { font-size: 12px; line-height: 1.2; text-align: center; color: var(--bone2); }
.fate-armed { align-self: center; width: 32px; height: 32px; font-size: 0; background: var(--px-dice) center / contain no-repeat; image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(212, 176, 96, .7)); }
.chance-card.peeked .face { animation: none; outline: 2px solid var(--bruise2); outline-offset: 2px; box-shadow: 0 0 14px rgba(176, 120, 200, .55), 0 var(--px) 0 var(--void); }
.chance-card.burned { opacity: .5; filter: grayscale(1) brightness(.55); }
.chance-card.burned::after { content: ''; position: absolute; inset: 20% 10%; background:
  linear-gradient(45deg, transparent 45%, var(--blood2) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--blood2) 45% 55%, transparent 55%); }
.chance-card { position: relative; }

/* the collection: tabs and pages instead of scrolling */
.collection-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 6px 0 8px; }
.collection-tab { flex: 1; font-family: var(--read); font-size: 15px; padding: 7px 6px; border: 2px solid var(--stone3); background: var(--stone2);
  color: var(--bone2); cursor: pointer; }
.collection-tab:hover { border-color: var(--gold2); }
.collection-tab.active { border-color: var(--glim); color: var(--glim); background: var(--stone3); outline: none; }
.collection-nav { display: flex; gap: 10px; align-items: center; justify-content: center; color: var(--bone2); font-size: 15px; }
.collection-nav .choice { width: 56px; padding: 6px; }
.collection-page { min-height: 1px; }

/* ---------- fights: hero on the left, foes on the right (FTL side-on), your hand below ---------- */
#panel.fight-panel, .fight-panel #panel { padding: 10px 10px 12px; }
.fight-panel h2 { font-size: 22px; margin: 2px 0 6px; }
.fight-stage {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px;
  height: clamp(176px, 31vh, 270px); padding: 0 8px 16px; margin: 0 -10px; overflow: visible;
  background:
    var(--px-floor) 0 100% / 48px 48px repeat-x,
    linear-gradient(to bottom, rgba(3, 5, 4, .95), rgba(3, 5, 4, .6) 55%, rgba(3, 5, 4, .5)),
    var(--px-land) 50% 100% / auto 100% repeat-x, var(--sky);
  image-rendering: pixelated;
  border-top: var(--px) solid var(--void); border-bottom: var(--px) solid var(--void);
  box-shadow: inset 0 -26px 0 -2px rgba(0, 0, 0, .35), inset 0 0 40px rgba(0, 0, 0, .8);
}
/* the ground line the fighters stand on */
.fight-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; background: rgba(0, 0, 0, .55); pointer-events: none; }
.fight-stage .foes { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 4px; flex: 1; min-width: 0; }
.fighter {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 0 1 92px; min-width: 0; z-index: 1; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit;
  transition: opacity .5s ease, translate .5s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
}
.fighter.hero { flex-basis: 100px; }
.fighter-art { position: relative; order: 3; width: 100%; display: flex; justify-content: center; line-height: 1; font-size: 48px; }
.fighter-art img.px { width: min(100%, 76px); height: auto; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)); }
.fighter.hero .fighter-art img.px { width: min(100%, 88px); }
/* a shadow on the ground under each fighter */
.fighter-art::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 70%; height: 8px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); z-index: -1; }
/* foes face the hero */
.fighter.foe .fighter-art img.px { transform: scaleX(-1); }
.hpbar { order: 2; position: relative; width: min(100%, 76px); height: 12px; background: var(--void); border: 2px solid var(--void);
  box-shadow: 0 0 0 1px var(--stone3); }
.hpfill { height: 100%; background: linear-gradient(to bottom, #e0505a, var(--blood2) 60%, var(--blood)); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.hero .hpfill { background: linear-gradient(to bottom, #9ad06a, var(--moss) 60%, #2c3e22); }
.hp-text { position: absolute; inset: -3px 0 0; font-family: var(--pix); font-size: 12px; line-height: 14px; text-align: center; color: #fff;
  text-shadow: 1px 1px 0 var(--void), -1px -1px 0 var(--void), 1px -1px 0 var(--void), -1px 1px 0 var(--void); }
.hpbar .hp-text { inset: -2px 0 0; }
.statuses { order: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 20px; }
.status { display: inline-flex; align-items: center; gap: 1px; font-family: var(--pix); font-size: 14px; color: var(--bone);
  text-shadow: 1px 1px 0 var(--void); }
.status img.px { width: 18px; height: 18px; }
.status-block { color: #9cc8f0; } .status-strength { color: #f0a070; } .status-bleed { color: #f07078; } .status-stun { color: var(--glim); }
/* what the foe will do next: above its head */
.intent {
  order: 0; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 2px; max-width: 100%; padding: 1px 4px 1px 2px; min-height: 28px;
  font-family: var(--pix); font-size: 17px; line-height: 1; font-weight: 700; color: var(--bone);
  background: rgba(5, 4, 7, .82); border: 2px solid var(--stone3); text-shadow: 1px 1px 0 var(--void);
  animation: intent-in .35s cubic-bezier(.2, .8, .2, 1) both;
}
.intent img.px { width: 24px; height: 24px; }
.intent-attack { color: #ff8a90; border-color: var(--blood2); }
.intent-block { color: #9cc8f0; border-color: #2c4a6e; }
.intent-buff { color: #f0a070; border-color: #7a4020; }
.intent-heal { color: var(--moss2); border-color: var(--moss); }
.intent-curse, .intent-bleed { color: var(--bruise2); border-color: var(--bruise); }
/* a wind-up: the bigger it is, the hotter it glows */
.intent-charge { color: #ffc070; border-color: #c06a20; box-shadow: 0 0 10px rgba(240, 140, 40, .45); }
@keyframes intent-in { from { opacity: 0; translate: 0 6px; } }
.fighter.foe { cursor: pointer; }
/* the foe your strikes go to: a red ring on the ground and a marker over it */
.fighter.foe.target .fighter-art::after { background: radial-gradient(closest-side, rgba(220, 50, 60, .85), rgba(160, 30, 40, .3) 70%, transparent); height: 10px; }
.fighter.foe.target .hpbar { box-shadow: 0 0 0 1px #e0505a, 0 0 8px rgba(224, 80, 90, .6); }
.fighter.foe.target .intent { border-color: #e0505a; }
.fighter.dead { opacity: .18; filter: grayscale(1); translate: 0 6px; pointer-events: none; }
.fighter.dead .intent, .fighter.dead .statuses { visibility: hidden; }

/* hits and flashes (engine sets the class for ~400ms) */
.fighter::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 72px; height: 72px; translate: -50% 0;
  background: center / contain no-repeat; image-rendering: pixelated; pointer-events: none; opacity: 0; z-index: 2; }
.fighter.fx-hit .fighter-art { animation: fx-shake .35s ease-out; }
.fighter.fx-hit .fighter-art img.px { animation: fx-flash .35s ease-out; }
.fighter.fx-hit::after { background-image: var(--px-fx-slash); animation: fx-pop .4s ease-out; }
.fighter.fx-block::after { background-image: var(--px-fx-block); animation: fx-pop .45s ease-out; }
.fighter.fx-heal::after { background-image: var(--px-fx-heal); animation: fx-rise .6s ease-out; }
.fighter.fx-stun::after { background-image: var(--px-fx-impact); animation: fx-pop .4s ease-out; }
.fighter.fx-bleed::after { background-image: var(--px-fx-curse); animation: fx-pop .4s ease-out; }
.fighter.fx-buff .fighter-art img.px { animation: fx-glow .5s ease-out; }
.fighter.fx-death .fighter-art { animation: fx-fall .6s ease-in both; }
/* the attacker lunges at the other side */
.fighter.hero.fx-attack .fighter-art { animation: lunge-right .32s cubic-bezier(.3, 0, .2, 1); }
.fighter.foe.fx-attack .fighter-art { animation: lunge-left .32s cubic-bezier(.3, 0, .2, 1); }
@keyframes fx-shake { 20% { translate: -5px 0; } 45% { translate: 4px 0; } 70% { translate: -2px 0; } }
@keyframes fx-flash { 0%, 30% { filter: brightness(3) saturate(0) drop-shadow(0 3px 0 rgba(0, 0, 0, .6)); } }
@keyframes fx-glow { 40% { filter: brightness(1.6) drop-shadow(0 0 6px #f0a040); } }
@keyframes fx-pop { 0% { opacity: 0; scale: .6; } 25% { opacity: 1; scale: 1.1; } 100% { opacity: 0; scale: 1.2; } }
@keyframes fx-rise { 0% { opacity: 0; translate: -50% 10px; } 30% { opacity: 1; } 100% { opacity: 0; translate: -50% -18px; } }
@keyframes fx-fall { to { rotate: 80deg; translate: 0 10px; opacity: .3; } }
@keyframes lunge-right { 45% { translate: 26px 0; } }
@keyframes lunge-left { 45% { translate: -26px 0; } }
/* the number that floats up off a fighter */
.fx-num { position: absolute; left: 50%; top: 18%; z-index: 5; translate: -50% 0; pointer-events: none;
  font-family: var(--pix); font-size: 26px; font-weight: 700; color: #ff6a72;
  text-shadow: 2px 2px 0 var(--void), -1px -1px 0 var(--void), 1px -1px 0 var(--void), -1px 1px 0 var(--void);
  animation: num-up .9s cubic-bezier(.2, .8, .2, 1) both; }
.fx-num.block { color: #9cc8f0; } .fx-num.heal { color: #9ad06a; } .fx-num.stun, .fx-num.buff { color: var(--glim); font-size: 20px; } .fx-num.bleed { color: #f07078; }
@keyframes num-up { 0% { opacity: 0; translate: -50% 8px; scale: .7; } 20% { opacity: 1; scale: 1.15; } 70% { opacity: 1; } 100% { opacity: 0; translate: -50% -30px; scale: 1; } }


.fighter-name { order: 4; font-family: var(--read); font-size: 12px; line-height: 1.1; color: var(--bone2); text-align: center; margin-top: 3px;
  text-shadow: 1px 1px 0 var(--void); max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.fighter.hero .fighter-name { color: var(--moss2); }
.fighter.hero .intent { display: none; }
.fighter.foe.target .fighter-name { color: #f08890; }
.intent-num { font-size: 17px; }
.intent-turns { font-size: 13px; color: #ffc070; }
.intent-text { flex-basis: 100%; font-family: var(--read); font-size: 11px; font-weight: 400; color: var(--bone2); text-align: center; }
.intent-art { display: inline-flex; }
.status-art { display: inline-flex; }
.fighter.fx-hit, .fighter.fx-attack { animation: none; }
.fight-actions { display: flex; flex-direction: row; gap: 8px; margin-top: 4px; }
.fight-actions .choice { margin: 0; padding: 8px 10px; text-align: center; }
.fight-actions .choice::before { display: none; }
.fight-actions .end-turn { flex: 2; font-family: var(--goth); font-size: 22px; color: var(--bone); border-color: var(--gold);
  background: linear-gradient(to bottom, var(--stone3), var(--stone2)); }
.fight-actions .end-turn.ready { outline: 2px solid transparent; outline-offset: 2px; animation: beckon 1.6s ease-in-out infinite; }
.fight-actions .flee { flex: 1; font-size: 14px; color: var(--bone2); background: #1e0c10; border-color: var(--blood); }
.pile { width: auto; min-width: 34px; padding: 0 4px; }
/* energy, piles, end turn */
.fight-bar { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; }
.energy { display: flex; gap: 2px; align-items: center; }
.energy .pip { width: 26px; height: 26px; background: var(--px-energy-out) center / contain no-repeat; image-rendering: pixelated; transition: scale .2s; }
.energy .pip.full { background-image: var(--px-energy); }
.pile { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 38px; font-family: var(--pix); font-size: 15px; color: var(--bone);
  background: var(--stone3); border: 2px solid var(--void); box-shadow: 2px 2px 0 var(--stone2), 4px 4px 0 var(--void); text-shadow: 1px 1px 0 var(--void); }
.draw-pile { background: linear-gradient(135deg, var(--blood) 25%, #3a0c10 25% 50%, var(--blood) 50% 75%, #3a0c10 75%) 0 0 / 8px 8px; }
.discard-pile { opacity: .75; }

/* your hand: a gentle fan. ui.js may set --i (index) and --n (count) on each card */
.hand { display: flex; justify-content: center; align-items: flex-end; padding: 14px 10px 14px; min-height: 128px; }
.fcard {
  --d: calc(var(--i, 0) - (var(--n, 1) - 1) / 2);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px;
  flex: 0 1 80px; min-width: 0; aspect-ratio: 5 / 7; margin: 0 -2px; padding: 18px 4px 4px;
  font-family: var(--read); color: var(--ink); text-align: center; cursor: pointer;
  background: var(--parch); border: 3px solid #4a1418; outline: 1px solid var(--void);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 4px 0 var(--void), 0 8px 14px rgba(0, 0, 0, .55);
  rotate: calc(var(--d) * 3deg); translate: 0 calc(var(--d) * var(--d) * 3px);
  transform-origin: 50% 120%;
  transition: translate .22s cubic-bezier(.2, .8, .2, 1), rotate .22s, scale .22s, filter .2s, opacity .2s;
}
.fcard:hover:not(.cant), .fcard:focus-visible:not(.cant) { translate: 0 -14px; rotate: 0deg; scale: 1.08; z-index: 3; }
.fcard:active:not(.cant) { scale: 1.02; translate: 0 -20px; }
.fcard.type-strike { border-color: #6a1a20; background: linear-gradient(to bottom, #b89a80, var(--parch) 40%); }
.fcard.type-guard { border-color: #24364e; background: linear-gradient(to bottom, #9aa6b0, #8e9298 40%); }
.fcard.type-skill { border-color: #3e2244; background: linear-gradient(to bottom, #a894a8, #988898 40%); }
.fcard.type-item { border-color: var(--gold2); background: linear-gradient(to bottom, #c0a868, #a8925a 40%); }
.fcard.type-curse { border-color: var(--void); background: linear-gradient(to bottom, #4a4048, #2e282e); color: var(--bone2); cursor: default; }
.fcard.cant { filter: grayscale(.7) brightness(.6); cursor: default; }
.fcard-cost { position: absolute; top: -10px; left: -6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-family: var(--pix); font-size: 17px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 var(--void), -1px -1px 0 var(--void);
  background: var(--px-energy) center / contain no-repeat; image-rendering: pixelated; }
.fcard.cant .fcard-cost { background-image: var(--px-energy-out); }
.fcard-art { display: flex; align-items: center; justify-content: center; height: 36%; min-height: 30px; font-size: 26px; line-height: 1; }
.fcard-art img.px { height: 100%; width: auto; max-width: 48px; }
.fcard-name { font-weight: 700; font-size: 12px; line-height: 1.05; letter-spacing: -.2px; }
.fcard-text { font-size: 12px; line-height: 1.1; color: #2a1e18; }
.fcard.type-curse .fcard-text { color: var(--bone2); }
/* newly drawn cards slide in from the draw pile (left) */
.fcard.drawn { animation: draw-in .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes draw-in { from { opacity: 0; translate: -120px 30px; rotate: -20deg; } }
/* a played card flies up into the fight and burns away */
.fcard.played { pointer-events: none; animation: card-play .45s ease-in forwards; z-index: 4; }
@keyframes card-play { 40% { translate: 0 -60px; scale: 1.12; rotate: 0deg; opacity: 1; filter: brightness(1.4); } 100% { translate: 0 -110px; scale: .7; rotate: 0deg; opacity: 0; } }

/* after a win: take one of three cards */
.fight-reward .hand { gap: 10px; padding-top: 16px; }
.fight-reward .fcard { flex-basis: 100px; margin: 0; rotate: 0deg; translate: 0; animation: deal-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.fight-reward .fcard:nth-child(2) { animation-delay: .1s; } .fight-reward .fcard:nth-child(3) { animation-delay: .2s; }
.fight-reward .fcard .fcard-name { font-size: 13px; } .fight-reward .fcard .fcard-text { font-size: 13px; }
.fight-reward .skip { font-family: var(--read); font-size: 15px; margin-top: 10px; padding: 6px 14px; color: var(--bone2); background: transparent; border: 2px solid var(--stone3); cursor: pointer; }
.fight-log { font-size: 14px; font-style: italic; color: var(--bone2); min-height: 1.3em; margin: 2px 0 0; }
@media (max-width: 380px) {
  .fcard { flex-basis: 74px; padding-top: 16px; }
  .fcard-name, .fcard-text { font-size: 11.5px; }
  .fighter-art img.px { width: min(100%, 64px); }
}

/* =====================================================================================
   THE GREEN-FIRE CRYPT: the whole game's look. Crypt stone, bone and iron frames,
   witch-green fire for everything that's lit or yours to pick. Later rules win, so this
   layer re-dresses everything above it. Frames are pixel border-images from art.js.
   ===================================================================================== */
:root {
  --void: #030504; --night: #070a08; --stone: #0e1311; --stone2: #151b18; --stone3: #233029; --ash: #56605a;
  --bone: #ddd5bf; --bone2: #a8a290; --parch: #c9c0a6; --parch2: #8a826c; --ink: #0b0d0c;
  --gold: #3f9a5e; --gold2: #24452f; --glim: #8cf0a4;
  --fire: #4ade80; --fire2: #1f8a4a; --fireglow: rgba(80, 240, 140, .35);
  --coin: #e2c46a;
}
body { background-color: var(--sky);
  background-image:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(60, 200, 110, .10), transparent 70%),
    linear-gradient(to bottom, rgba(3, 5, 4, .55), rgba(3, 5, 4, .9) 80%),
    var(--px-wall);
  background-size: auto, auto, 96px 96px; image-rendering: pixelated; }
body[data-look] { --glow: rgba(70, 220, 120, .07); }
body[data-look=road], body[data-look=wood], body[data-look=sunken], body[data-look=table], body[data-look=frost],
body[data-look=desert], body[data-look=harbour], body[data-look=riverboat], body[data-look=crypt] { --sky: #050706; }
#table { background: var(--px-land, none) center bottom / auto 30% repeat-x; image-rendering: pixelated; }
#table::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 40% at 50% 100%, rgba(60, 220, 110, .12), transparent 70%); }

/* HUD: a stone ledge */
#hud { background: linear-gradient(to bottom, #18201b, #0b0f0d); border-bottom: 2px solid var(--void);
  box-shadow: inset 0 -1px 0 #2c3a31, 0 2px 0 var(--void), 0 6px 18px rgba(0, 0, 0, .6); }
.stat.gold { color: var(--coin); }
.stat.food { color: var(--bone2); }
.item { background: linear-gradient(to bottom, #1a221e, #111613); border: 2px solid var(--void); box-shadow: inset 0 1px 0 #2e3c34; }
.item:hover { background: #22302a; box-shadow: inset 0 1px 0 #3c5044, 0 0 8px var(--fireglow); }
.item.curse { background: linear-gradient(to bottom, #2a1830, #1a0e1e); box-shadow: inset 0 1px 0 #4a2c52; }
.item.timed, .item.class-chip { background: linear-gradient(to bottom, #15241c, #0c1510); box-shadow: inset 0 1px 0 #2a4a36; }

/* board cards: iron-framed backs, bone-framed fronts with a lit art window and a bone name plate */
.face { border: 8px solid transparent; border-image: var(--px-frame-iron) 8 / 8px / 0 stretch; image-rendering: pixelated;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .7), 0 8px 14px rgba(0, 0, 0, .6); }
.face.back { outline: none; background-color: #0d1310; }
.face.back::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(80, 240, 140, .14), transparent 60%), linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .45)); }
.face.back img.emblem { filter: drop-shadow(0 0 6px rgba(80, 240, 140, .35)); z-index: 1; position: relative; }
.face.front { border-image-source: var(--px-frame-bone); padding: 2px 1px 0; color: var(--bone);
  background: radial-gradient(ellipse 80% 55% at 50% 40%, #3c4a40, #1a211c 70%, #0e1310);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .7), 0 8px 14px rgba(0, 0, 0, .6); }
.face.front img.px { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7)); }
.card-name { align-self: stretch; margin: 0 -1px; padding: 2px 2px 3px; color: var(--ink); text-shadow: none;
  background: linear-gradient(to bottom, #d8cfb6, #b4aa8e); box-shadow: inset 0 1px 0 #efe6cc, inset 0 -1px 0 #7a7058; }
.card.kind-exit .front { border-image-source: var(--px-frame-gilt); background: radial-gradient(ellipse 80% 55% at 50% 40%, #4a5a3a, #1c2216 70%); box-shadow: 0 4px 0 rgba(0, 0, 0, .7), 0 0 16px rgba(226, 196, 106, .3); }
.card.kind-boss .front { border-image-source: var(--px-frame-blood); background: radial-gradient(ellipse 80% 55% at 50% 40%, #4a2a2c, #1c1012 70%); }
.card.kind-start .front { background: radial-gradient(ellipse 80% 55% at 50% 40%, #2a5a3a, #101c14 70%); }
.card.past { opacity: .4; filter: saturate(.2); }
.card.done .front { filter: grayscale(.8) brightness(.55); }
/* where you can step: witch-fire around the card */
#board .card.reachable .face { outline: 2px solid var(--glim); outline-offset: 2px; box-shadow: 0 4px 0 rgba(0, 0, 0, .7), 0 0 18px var(--fireglow); }
#board .card.reachable:hover .face { outline-color: #d8ffe0; box-shadow: 0 4px 0 rgba(0, 0, 0, .7), 0 0 26px rgba(80, 240, 140, .55); }
.card.here .front { box-shadow: 0 4px 0 rgba(0, 0, 0, .7), 0 0 0 2px var(--glim), 0 0 16px var(--fireglow); }
svg.roads line { stroke: #6a7a6e; stroke-opacity: .3; }
svg.roads line.taken { stroke: var(--fire2); stroke-opacity: .7; }
svg.roads line.open { stroke: var(--glim); stroke-opacity: .85; filter: drop-shadow(0 0 3px rgba(80, 240, 140, .8)); }
.token { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 8px rgba(80, 240, 140, .35)); }
.back-house { color: var(--bone); text-shadow: 1px 1px 0 #000, 0 0 4px #000, 0 0 4px #000; bottom: 2px; z-index: 1; }

/* the dealer: a lich at the foot of the table */
#dealer { background: linear-gradient(to bottom, #0c110e, #040605); border-top: 2px solid #1f3a28; box-shadow: 0 -6px 18px rgba(0, 0, 0, .6); }
#dealer::before { background-image: var(--px-lich); width: 40px; height: 40px; filter: drop-shadow(0 0 6px rgba(80, 240, 140, .4)); }
#dealer { grid-template-columns: 40px 1fr; }
.dealer-name { color: var(--glim); font-family: var(--goth); font-size: 18px; text-shadow: 0 0 8px rgba(80, 240, 140, .35); }
body[data-look] #dealer { border-top-color: #1f3a28; }

/* panels: a crypt slab in an iron frame with a green brazier on top */
#overlay { background: radial-gradient(ellipse at 50% 40%, rgba(6, 14, 9, .7), rgba(2, 4, 3, .9)); }
#panel { border: 16px solid transparent; border-image: var(--px-frame-iron) 8 / 16px / 0 stretch; image-rendering: pixelated;
  background: linear-gradient(to bottom, rgba(14, 20, 17, .94), rgba(8, 11, 9, .97)), var(--px-wall) 0 0 / 64px 64px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .85), 0 0 60px rgba(60, 200, 110, .08); padding: 12px 14px 16px; }
#panel::before { content: ''; display: block; width: 36px; height: 36px; margin: -6px auto 0; background: var(--px-brazier) center / contain no-repeat;
  image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(80, 240, 140, .6)); }
#panel h1 { color: var(--bone); font-family: var(--goth); text-shadow: 3px 3px 0 var(--void), 0 0 18px rgba(80, 240, 140, .45); }
#panel h2 { color: var(--glim); font-family: var(--goth); font-weight: 400; letter-spacing: .5px; text-shadow: 2px 2px 0 var(--void), 0 0 12px rgba(80, 240, 140, .35); }
#panel h3 { color: var(--glim); border-bottom-color: #24452f; }
.panel-art img.px { filter: drop-shadow(0 0 12px rgba(80, 240, 140, .25)) drop-shadow(0 4px 0 rgba(0, 0, 0, .7)); }

/* choices: stone slabs that catch the green fire when touched */
.choice { background: linear-gradient(to bottom, #1c2520, #121815); border: 2px solid #2e4236; color: var(--bone);
  box-shadow: inset 0 1px 0 #34483c, 0 3px 0 var(--void); }
.choice:hover:not(:disabled) { background: linear-gradient(to bottom, #22302a, #16201b); border-color: var(--fire);
  box-shadow: inset 0 1px 0 #3c5446, 0 3px 0 var(--void), 0 0 16px rgba(80, 240, 140, .25); }
.choice.risky { background: linear-gradient(to bottom, #2e1418, #1c0c0f); border-color: #7a2630; box-shadow: inset 0 1px 0 #4a1e24, 0 3px 0 var(--void); }
.choice.risky:hover:not(:disabled) { background: linear-gradient(to bottom, #3c1a1f, #240f13); border-color: #c0404a; box-shadow: 0 3px 0 var(--void), 0 0 16px rgba(200, 60, 70, .3); }
.choice.chosen { background: linear-gradient(to bottom, #1e3a28, #12241a); border-color: var(--glim); }
.choice.chosen::before { background: radial-gradient(circle at 50% 50%, rgba(120, 255, 160, .4), transparent 70%); }
.choice .odds { background: var(--void); color: var(--glim); border: 1px solid #24452f; }
.choice .bonus { color: var(--glim); border-color: #24452f; }
@keyframes seal { 0% { scale: 1; } 35% { scale: 1.04; box-shadow: 0 0 0 2px var(--glim), 0 0 30px rgba(80, 240, 140, .6); } 100% { scale: 1; box-shadow: 0 0 0 1px var(--glim), 0 0 16px rgba(80, 240, 140, .3); } }
@keyframes beckon { 50% { outline-color: var(--glim); box-shadow: 0 0 16px rgba(80, 240, 140, .45), 0 var(--px) 0 var(--void); } }
@keyframes beckon-card { 50% { outline-color: var(--glim); box-shadow: 0 0 16px rgba(80, 240, 140, .5); } }

/* chance cards: same frames; the fronts tell good from bad by their light */
.chance-card .front { color: var(--bone); }
.chance-card .front.kind-huge_success { border-image-source: var(--px-frame-gilt); background: radial-gradient(circle at 50% 40%, #4a6a3a, #18240f 75%); }
.chance-card .front.kind-success { background: radial-gradient(circle at 50% 40%, #2a6a40, #0e2216 75%); }
.chance-card .front.kind-failure { background: radial-gradient(circle at 50% 40%, #3a3a44, #121216 75%); }
.chance-card .front.kind-huge_failure { border-image-source: var(--px-frame-blood); background: radial-gradient(circle at 50% 40%, #5a1a22, #1a080a 75%); }
.chance-card.picked .front { box-shadow: 0 0 22px rgba(80, 240, 140, .55), 0 4px 0 var(--void); }
.result-panel.kind-huge_success #panel, .result-panel.kind-success #panel { background: linear-gradient(to bottom, rgba(16, 34, 22, .95), rgba(8, 14, 10, .97)), var(--px-wall) 0 0 / 64px 64px; }
.result-panel.kind-failure #panel, .result-panel.kind-huge_failure #panel { background: linear-gradient(to bottom, rgba(34, 14, 18, .95), rgba(14, 6, 8, .97)), var(--px-wall) 0 0 / 64px 64px; }

/* callings dealt at the start */
.class-card { background: radial-gradient(ellipse 80% 50% at 50% 35%, #34443a, #141a16 75%); color: var(--bone);
  border: 8px solid transparent; border-image: var(--px-frame-bone) 8 / 8px / 0 stretch; box-shadow: 0 4px 0 var(--void), 0 10px 20px rgba(0, 0, 0, .6); }
.class-card.class-major { background: radial-gradient(ellipse 80% 50% at 50% 35%, #3a5a40, #141e17 75%); border-image-source: var(--px-frame-gilt); }
.class-card.class-minor { background: radial-gradient(ellipse 80% 50% at 50% 35%, #2e3432, #121514 75%); border-image-source: var(--px-frame-iron); box-shadow: 0 4px 0 var(--void); }
.class-rank, .class-minor .class-rank { color: var(--bone2); }
.class-name, .class-minor .class-name { color: var(--glim); font-family: var(--goth); font-weight: 400; font-size: 24px; text-shadow: 0 0 8px rgba(80, 240, 140, .3); }
.class-bonus { color: #9ae0a8; }
.class-text { color: var(--bone2); opacity: 1; }

/* collection */
.mini-card { border: 6px solid transparent; border-image: var(--px-frame-iron) 8 / 6px / 0 stretch; }
.mini-card.found { background: radial-gradient(ellipse at 50% 40%, #34443a, #141a16 75%); color: var(--bone); border-image-source: var(--px-frame-bone); }
.mini-card.found.mini-item { background: radial-gradient(ellipse at 50% 40%, #3a3a2a, #161610 75%); }

/* toasts, house info */
.toast { background: #0a0f0c; border-color: #2e4236; }
.toast.good { color: var(--glim); border-color: var(--fire2); box-shadow: 0 0 14px rgba(80, 240, 140, .25); }
#house-info { border: 12px solid transparent; border-image: var(--px-frame-iron) 8 / 12px / 0 stretch; background: #0e1311; }
.token-badge, .token-tag { background: #1f3a28; color: var(--glim); }

/* fights in the crypt */
.fight-stage { box-shadow: inset 0 -26px 0 -2px rgba(0, 0, 0, .35), inset 0 0 40px rgba(0, 0, 0, .8), inset 0 -40px 60px -30px rgba(60, 220, 110, .18); }
.fcard { color: var(--bone); border: 3px solid #2e4236; background: radial-gradient(ellipse 90% 45% at 50% 30%, #34443a, #141a16 80%); outline: 1px solid var(--void); }
.fcard.type-strike { border-color: #8a2a30; background: radial-gradient(ellipse 90% 45% at 50% 30%, #4a2a2c, #1a1012 80%); }
.fcard.type-guard { border-color: #3c5a7a; background: radial-gradient(ellipse 90% 45% at 50% 30%, #2c3a4a, #10161c 80%); }
.fcard.type-skill { border-color: var(--fire2); background: radial-gradient(ellipse 90% 45% at 50% 30%, #2a5a3a, #0e1c13 80%); }
.fcard.type-item { border-color: #8a6a2c; background: radial-gradient(ellipse 90% 45% at 50% 30%, #4a3e22, #19140a 80%); }
.fcard.type-curse { border-color: #4a2c52; background: radial-gradient(ellipse 90% 45% at 50% 30%, #2e1a34, #100a12 80%); color: var(--bone2); }
.fcard-text, .fcard.type-curse .fcard-text { color: var(--bone2); }
.fcard-name { color: var(--bone); }
.fcard:hover:not(.cant) { box-shadow: 0 4px 0 var(--void), 0 0 18px rgba(80, 240, 140, .45); }
.fight-actions .end-turn { border-color: var(--fire2); }
.boon { position: relative; }

/* between floors: a gift from one of the Houses you walked (gilt frame for the strong ones) */
.house-life { --hc: #8aa26a; } .house-coin { --hc: #e0c070; } .house-war { --hc: #c84a52; } .house-shadow { --hc: #9a94b0; }
.house-death { --hc: #c8c0b0; } .house-paths { --hc: #7cb0b8; } .house-sorcery { --hc: #5ae8f0; }
.house-tally { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 10px; }
.tally { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; font-size: 14px; color: var(--hc, var(--bone));
  background: #0a0f0c; border: 2px solid var(--void); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc, #888) 45%, transparent); }
.tally-icon img.px { width: 22px; height: 22px; }
.tally-num { font-family: var(--pix); font-weight: 700; }
.boons { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.boon { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: 'art name' 'art text' 'art house'; align-items: center; gap: 1px 10px; padding: 4px 8px; text-align: left; cursor: pointer; font-family: var(--read); color: var(--bone);
  border: 8px solid transparent; border-image: var(--px-frame-iron) 8 / 8px / 0 stretch; image-rendering: pixelated;
  background: radial-gradient(ellipse 85% 50% at 50% 30%, color-mix(in srgb, var(--hc, #3c4a40) 30%, #141a16), #0e1310 80%);
  box-shadow: 0 4px 0 var(--void), 0 8px 16px rgba(0, 0, 0, .6);
  animation: deal-in .5s cubic-bezier(.2, .8, .2, 1) backwards; transition: translate .2s, box-shadow .2s, opacity .4s, scale .2s; }
.boon:nth-child(2) { animation-delay: .1s; } .boon:nth-child(3) { animation-delay: .2s; }
.boon:hover { translate: 4px 0; box-shadow: 0 4px 0 var(--void), 0 0 20px rgba(80, 240, 140, .4); }
.boon.strong { border-image-source: var(--px-frame-gilt); box-shadow: 0 4px 0 var(--void), 0 0 18px rgba(226, 196, 106, .3); }
.boon-art { grid-area: art; } .boon-name { grid-area: name; } .boon-text { grid-area: text; } .boon-house { grid-area: house; }
.boon-art img.px { width: 56px; height: 56px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .7)); }
.boon-name { font-family: var(--goth); font-size: 18px; line-height: 1.05; color: var(--glim); }
.boon.strong .boon-name { color: var(--coin); }
.boon-text { font-size: 14px; line-height: 1.2; color: var(--bone); }
.boon-house { font-size: 12px; color: var(--hc, var(--bone2)); margin-top: auto; }
.boon.chosen { scale: 1.06; box-shadow: 0 0 0 2px var(--glim), 0 0 28px rgba(80, 240, 140, .6); }
.boon.unchosen { opacity: .25; translate: 0 10px; }
@media (max-width: 380px) { .boon { grid-template-columns: 44px 1fr; } .boon-art img.px { width: 44px; height: 44px; } }

/* fate cards on phones: a row each (picture left, words right) so the text has room */
@media (max-width: 520px) {
  .fate-hand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .fate-hand > :not(.fate-card) { grid-column: 1 / -1; }
  .fate-card { width: auto; display: grid; grid-template-columns: 36px 1fr; grid-template-areas: 'art name' 'art text'; align-items: center; gap: 0 6px; padding: 4px 6px; text-align: left; }
  .fate-card .fate-art { grid-area: art; } .fate-card .fate-name { grid-area: name; text-align: left; font-size: 15px; }
  .fate-card .fate-text { grid-area: text; text-align: left; font-size: 13px; }
  .fate-card .fate-art img.px { width: 36px; height: 36px; }
}
body[data-look=graveyard] { --sky: #070a12; }
body[data-look=graveyard] #table::before { background: radial-gradient(ellipse 50% 30% at 78% 8%, rgba(190, 210, 240, .10), transparent 70%), radial-gradient(ellipse 70% 40% at 50% 100%, rgba(60, 220, 110, .08), transparent 70%); }
body[data-look=graveyard] { background-image: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(150, 170, 210, .10), transparent 70%), linear-gradient(to bottom, #0a1120, #04060a 80%); }

/* the title: the lich on his dais between two green braziers, a carved rule under the name */
.title-panel #panel { padding-top: 18px; }
.title-panel #panel::before { width: min(260px, 90%); height: 124px; margin: -4px auto 0;
  background:
    var(--px-brazier) 0 100% / 48px 48px no-repeat,
    var(--px-brazier) 100% 100% / 48px 48px no-repeat,
    var(--px-lich) 50% 0 / 112px 112px no-repeat,
    radial-gradient(ellipse 50% 45% at 50% 55%, rgba(80, 240, 140, .22), transparent 70%);
  filter: drop-shadow(0 0 12px rgba(80, 240, 140, .35)) drop-shadow(0 4px 0 rgba(0, 0, 0, .7));
  border-bottom: 4px solid #2a3530; box-shadow: 0 1px 0 #3c4a42; }
.title-panel #panel h1 { font-size: clamp(40px, 12vw, 58px); line-height: .95; margin: 12px 0 4px; letter-spacing: 1px; }
.title-panel #panel h1::after { content: ''; display: block; height: 20px; margin: 8px auto 0; width: min(240px, 80%);
  background: var(--px-skull) 50% 50% / 20px 20px no-repeat,
    linear-gradient(to right, transparent, #3f9a5e 30%, transparent 44%, transparent 56%, #3f9a5e 70%, transparent) 50% 50% / 100% 2px no-repeat;
  image-rendering: pixelated; }
.title-panel .text { color: var(--bone2); font-style: italic; }
.title-panel .choice:first-of-type { font-family: var(--goth); font-size: 26px; padding: 8px; border-color: var(--fire2); color: var(--glim);
  background: linear-gradient(to bottom, #1e3a28, #12201a); text-shadow: 0 0 10px rgba(80, 240, 140, .4); }

/* the moon, top middle of the HUD: phase picture, name, rising/waning, steps to the next phase.
   #moon.moon-<0..7>.waxing|.waning > .moon-art(img) .moon-name .moon-next; .moon-change for a moment when it turns */
#moon { position: absolute; left: 50%; top: 2px; translate: -50% 0; z-index: 4; display: grid; grid-template-columns: auto auto; grid-template-areas: 'art name' 'art next';
  align-items: center; gap: 0 6px; padding: 2px 10px 2px 4px; pointer-events: auto;
  background: linear-gradient(to bottom, #111814, #070a08); border: 2px solid var(--void); box-shadow: inset 0 0 0 1px #24452f, 0 3px 0 var(--void); }
#hud { position: relative; }
#moon .moon-art { grid-area: art; } #moon .moon-name { grid-area: name; } #moon .moon-next { grid-area: next; }
#moon img.px { width: 40px; height: 40px; }
.moon-name { font-family: var(--goth); font-size: 17px; line-height: 1; color: var(--bone); white-space: nowrap; }
.moon-next { font-family: var(--read); font-size: 12px; line-height: 1.1; color: var(--bone2); white-space: nowrap; }
#moon.waxing .moon-name::after { content: ' ▲'; font-size: 11px; color: var(--glim); }
#moon.waning .moon-name::after { content: ' ▼'; font-size: 11px; color: var(--bone2); }
/* the fuller, the fiercer: the frame and name burn greener toward Full */
#moon.moon-3, #moon.moon-5 { box-shadow: inset 0 0 0 1px var(--fire2), 0 3px 0 var(--void), 0 0 12px rgba(80, 240, 140, .25); }
#moon.moon-4 { box-shadow: inset 0 0 0 2px var(--fire), 0 3px 0 var(--void), 0 0 22px rgba(80, 240, 140, .55); }
#moon.moon-4 .moon-name { color: var(--glim); text-shadow: 0 0 8px rgba(80, 240, 140, .6); }
#moon.moon-0 img.px { filter: drop-shadow(0 0 3px rgba(200, 210, 230, .25)); }
#moon.moon-change { animation: moon-turn 1.2s cubic-bezier(.2, .8, .2, 1); }
#moon.moon-change img.px { animation: moon-spin 1.2s cubic-bezier(.2, .8, .2, 1); }
@keyframes moon-turn { 30% { scale: 1.18; box-shadow: inset 0 0 0 2px var(--glim), 0 0 30px rgba(80, 240, 140, .7); } }
@keyframes moon-spin { 0% { opacity: .2; rotate: -90deg; } 60% { opacity: 1; } }
/* when the moon is full, the whole crypt glows a little greener */
body.moon-full { --glow: rgba(80, 240, 140, .14); }
body.moon-full #table::before { background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(60, 220, 110, .2), transparent 70%), radial-gradient(ellipse 50% 30% at 50% 0%, rgba(80, 240, 140, .12), transparent 70%); }
@media (max-width: 420px) { #moon { top: 2px; padding: 1px 6px 1px 2px; } #moon img.px { width: 32px; height: 32px; } .moon-name { font-size: 15px; } .moon-next { font-size: 11px; } }
/* the shell-game shuffle (ui.js animates transforms itself): nothing of ours may fight it */
.chance-row.shuffling .chance-card, .chance-row.shuffling .chance-card .card-inner { transition: none; animation: none; }
/* narrow screens: the moon over its own strip, so it never covers health or gold */
@media (max-width: 700px) {
  /* phones: the moon gets its own strip across the top of the HUD, centred */
  #moon { position: static; translate: none; order: -1; flex: 0 0 calc(100% + 24px); margin: -8px -12px 2px; justify-content: center;
    border: 0; border-bottom: 1px solid #1c2a22; box-shadow: none; background: linear-gradient(to bottom, #0c1410, #070a08); padding: 2px 0; }
  #moon.moon-3, #moon.moon-5 { box-shadow: inset 0 -12px 18px -12px rgba(80, 240, 140, .35); }
  #moon.moon-4 { box-shadow: inset 0 -14px 22px -10px rgba(80, 240, 140, .6); }
}
@media (max-width: 700px) {
  #moon { grid-template-columns: auto auto auto; grid-template-areas: 'art name next'; gap: 0 8px; padding: 1px 0; }
  #moon img.px { width: 28px; height: 28px; }
  .moon-next::before { content: '· '; }
}
@media (max-width: 520px) {
  #hud { padding: 6px 10px; gap: 3px 10px; }
  #items { gap: 4px; }
  .item { font-size: 13px; padding: 1px 6px 1px 2px; }
  .item-icon img.px { width: 20px; height: 20px; }
  .stat.floor { font-size: 13px; }
}
.card-name { overflow-wrap: normal; word-break: normal; }
@media (max-width: 520px) { .warren-button { font-size: 14px; padding: 4px 10px; } #warren-buttons { top: 4px; } }

/* the moon, made obvious: its own strip across the top on every screen, a big moon, its name,
   and one word for how fierce the night is (engine sets .intensity-0..4) */
#moon { position: static; translate: none; order: -1; flex: 0 0 calc(100% + 24px); margin: -8px -12px 4px;
  display: grid; grid-template-columns: auto auto auto; grid-template-areas: 'art name name' 'art word next'; justify-content: center; align-items: center; gap: 0 8px;
  padding: 3px 0; border: 0; border-bottom: 1px solid #1c2a22; background: linear-gradient(to bottom, #0c1410, #070a08); box-shadow: none; }
#moon img.px, #moon .moon-art img.px { width: 48px; height: 48px; }
#moon .moon-name { font-size: 20px; text-align: left; }
#moon .moon-next { font-size: 12px; }
#moon .moon-next::before { content: '· '; }
#moon::after { grid-area: word; font-family: var(--pix); font-size: 14px; font-weight: 700; letter-spacing: .5px; }
#moon.intensity-0::after { content: 'Calm'; color: #9ab0c8; }
#moon.intensity-1::after { content: 'Uneasy'; color: #a8c8a0; }
#moon.intensity-2::after { content: 'Restless'; color: #8ce0a0; }
#moon.intensity-3::after { content: 'Grim'; color: #6af090; text-shadow: 0 0 6px rgba(80, 240, 140, .5); }
#moon.intensity-4::after { content: 'The dead walk'; color: #b0ffc0; text-shadow: 0 0 8px rgba(80, 240, 140, .8); }
#moon.intensity-3 { box-shadow: inset 0 -14px 20px -12px rgba(80, 240, 140, .35); }
#moon.intensity-4 { box-shadow: inset 0 -18px 26px -10px rgba(80, 240, 140, .6); }
@media (max-width: 700px) { #moon { grid-template-columns: auto auto auto; grid-template-areas: 'art name name' 'art word next'; padding: 2px 0; } #moon img.px, #moon .moon-art img.px { width: 40px; height: 40px; } #moon .moon-name { font-size: 18px; } }

/* bonuses on show: chips with the bonus already in, little pixel badges for where it came from */
.fx-src { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 22px; height: 22px; margin-left: 4px; padding: 0;
  background: #0a100c; border: 1px solid #2f8a4f; box-shadow: 0 0 6px rgba(80, 240, 140, .25); cursor: pointer; font-size: 13px; line-height: 1; }
.fx-src img.px { width: 18px; height: 18px; }
.choice .fx.fx-boost { color: var(--glim); border-color: var(--fire2); box-shadow: inset 0 0 0 1px rgba(80, 240, 140, .15), 0 0 8px rgba(80, 240, 140, .2); }
.choice .fx { display: inline-flex; align-items: center; gap: 2px; }
.choice .fx-odds { font-family: var(--pix); font-size: 15px; color: var(--bone); border-color: #3c4a42; }
.choice .fx-fight { color: #f0a0a6; border-color: #7a2630; }
.choice .fx-random { color: #d8c890; border-color: #6a5a2c; }
.choice .fx-mystery { color: var(--bruise2); border-color: var(--bruise); }
.why { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: -2px 0 6px; }
.why .fx-src { width: 28px; height: 28px; margin: 0; padding: 0; background: #0a100c; border-color: #24452f; }
.why .fx-src img.px { width: 24px; height: 24px; }
.text-more { font-family: var(--pix); font-size: 18px; color: var(--glim); background: none; border: 0; cursor: pointer; display: block; margin: -4px auto 4px; opacity: .85; }
.text-more:hover { opacity: 1; text-shadow: 0 0 8px rgba(80, 240, 140, .6); }
.toast.info { color: var(--bone); border-color: var(--fire2); }
.chance-tally { display: flex; gap: 18px; justify-content: center; margin: 2px 0 8px; font-family: var(--pix); font-size: 22px; font-weight: 700; }
.tally-good { color: var(--glim); text-shadow: 0 0 8px rgba(80, 240, 140, .4); }
.tally-bad { color: #e8868c; text-shadow: 0 0 8px rgba(200, 60, 70, .35); }
.chance-card .front .fx-src { position: absolute; top: 2px; right: 2px; margin: 0; width: 20px; height: 20px; z-index: 2; }
.chance-card .front .fx-src img.px { width: 16px; height: 16px; }
.chance-card.chance-bonus .front { box-shadow: 0 4px 0 var(--void), 0 0 0 2px var(--fire2), 0 0 14px rgba(80, 240, 140, .35); }
.choice .fx.fx-boost { border-style: solid; }