/* Stillstone: looks. Owned by "art and sound".
   Shadow Slave fan-game look: near-black skies over a pixel horizon (art.js), dark slate panels
   lit by the Nightmare Spell's pale rune-blue, aged parchment cards; Monogram for words and numbers, Pixelify Sans for big titles. 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;
}
/* Monogram (datagoblin, CC0/MIT): a crisp 16-px-grid face for everything you read. size-adjust 150%: a 16px
   font-size draws it at 24px, each of its pixels 1.5 CSS px (3 device px on a 2x screen) */
@font-face {
  font-family: 'Monogram';
  src: url(../assets/monogram.ttf) format('truetype');
  font-weight: 400;
  font-display: swap;
  size-adjust: 150%;
  unicode-range: U+0000-00B6, U+00B8-FFFF; /* its middle dot sits high: · comes from the next face */
}
:root {
  /* panel text on Monogram's pixel grid (one font pixel = 10.67 px of font-size): body and choices at 2x, small labels
     at 1.5x (never below), effect numbers at 3x */
  --t-body: calc(32px / 1.5); --lh-body: 22px; --t-small: 16px; --lh-small: 17px; --t-num: 32px;
  /* 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: #3d586b; --moss2: #698ba3; --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: Monogram, crisp, for anything you read and every number; Pixelify Sans only for big titles */
  --read: 'Monogram', 'Courier New', monospace;
  --pix: 'Monogram', 'Courier New', monospace;
  --goth: 'Pixelify Sans', 'Monogram', monospace;
}
* { box-sizing: border-box; font-synthesis: none; 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;
  -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed;
  word-spacing: -.2em; /* Monogram's space is a full cell wide: close it to about 4 of its pixels */
  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 .22s cubic-bezier(.45, 0, .2, 1); will-change: transform; }
.card { position: absolute; width: var(--cw); height: var(--ch); perspective: 800px; cursor: default;
  transition: transform .2s cubic-bezier(.3, .7, .2, 1), width .2s ease, height .2s ease, opacity .18s ease, translate .18s 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 .25s 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 */
.card-inner { position: relative; width: 100%; height: 100%; transition: transform .3s 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 .28s 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: normal; hyphens: manual; -webkit-hyphens: manual; }
.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 .22s 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 .25s 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; }
/* the volume step: three small bars under the note, lit rune-blue up to the level */
#mute { position: fixed; --b1: var(--stone3); --b2: var(--stone3); --b3: var(--stone3); }
#mute[data-vol="1"] { --b1: #8ac7f3; }
#mute[data-vol="2"] { --b1: #8ac7f3; --b2: #8ac7f3; }
#mute[data-vol="3"] { --b1: #8ac7f3; --b2: #8ac7f3; --b3: #8ac7f3; }
#mute::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 14px; height: 3px; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--b1) 0 4px, transparent 4px 5px, var(--b2) 5px 9px, transparent 9px 10px, var(--b3) 10px 14px); }
#mute::before { display: block; margin-top: -4px; }

/* 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: 100%; /* the same room fitPanel measures (the overlay inside its padding) */ overflow: auto; padding: 20px; text-align: center;
  animation: panel-in .25s 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 .3s .05s 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: 0; }
#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 .35s cubic-bezier(.2, .75, .25, 1) backwards; }
.chance-row.dealing .chance-card:nth-child(2) { animation-delay: .05s; } .chance-row.dealing .chance-card:nth-child(3) { animation-delay: .1s; }
.chance-row.dealing .chance-card:nth-child(4) { animation-delay: .15s; } .chance-row.dealing .chance-card:nth-child(5) { animation-delay: .2s; }
.chance-row.dealing .chance-card:nth-child(6) { animation-delay: .25s; } .chance-row.dealing .chance-card:nth-child(n+7) { animation-delay: .3s; }
.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 { gap: 2px; }
.chance-card .front img.chance-art { width: 40px; height: 40px; }
.chance-card .front .chance-mark { font-family: sans-serif; font-size: 30px; line-height: 1; letter-spacing: -4px; font-weight: 900; text-shadow: 0 2px 0 #181425, 2px 0 0 #181425, -2px 0 0 #181425, 0 -1px 0 #181425; }
.chance-card .front.kind-huge_success .chance-mark { color: #f6cf5a; } /* golden thread */
.chance-card .front.kind-success .chance-mark { color: #e6f0fa; } /* bright silver thread */
.chance-card .front.kind-failure .chance-mark { color: #8f8c98; } /* frayed grey thread */
.chance-card .front.kind-huge_failure .chance-mark { color: #ff3a4e; } /* cut crimson thread */
.chance-card .front > span { font-size: 9px; font-weight: 400; opacity: .8; line-height: 1.1; }
.chance-card .front.kind-huge_success { background: #c9a860; }
.chance-card .front.kind-success { background: #89a0b1; }
.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: #191e22; }
.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 .45s ease both; }
.class-card.dealing + .class-card.dealing { animation-delay: .2s; }
.class-rank { font-size: 12px; text-transform: uppercase; letter-spacing: 0; 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: #294051; }
.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: #0b0d11; --glow: rgba(140, 160, 190, .10); } /* the Mountain Road: cold stone */
body[data-look=wood] { --sky: #0d0607; --glow: rgba(160, 40, 50, .12); } /* the Coral Labyrinth: crimson coral */
body[data-look=sunken] { --sky: #04070b; --glow: rgba(50, 100, 140, .10); } /* the Drowned Streets */
body[data-look=table] { --sky: #0e0506; --glow: rgba(190, 40, 50, .14); } /* the Crimson Spire */
body[data-look=frost] { --sky: #06080c; --glow: rgba(70, 110, 150, .10); } /* the Black Cliffs */
body[data-look=desert] { --sky: #0d0d0e; --glow: rgba(150, 150, 160, .08); } /* the Ashen Flats */
body[data-look=harbour] { --sky: #05080c; --glow: rgba(70, 120, 160, .10); } /* the Chained Isle */
body[data-look=riverboat] { --sky: #0c0907; --glow: rgba(200, 130, 60, .10); } /* the Citadel Gate */
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: #080c0f; --glow: rgba(108, 163, 202, .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); }
.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: #698ba3; }
.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; padding: 0 3px; pointer-events: none; }
.face.back.house-life .back-house { color: #96beda; } .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 .22s ease, translate .22s 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); }

/* titles (the pixel face is set in the theme pass at the end), 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; word-spacing: normal; }
#panel h1 { font-size: 52px; color: var(--blood2); text-shadow: 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; word-spacing: normal; }
.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: #6f8391; }
.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); word-spacing: normal; }
.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: #12171a; }
.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: break-word; hyphens: auto; -webkit-hyphens: auto; }
@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; word-spacing: normal; }
.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, 4, 5, .95), rgba(3, 4, 5, .6) 55%, rgba(3, 4, 5, .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 .25s ease, translate .25s cubic-bezier(.2, .8, .2, 1), filter .25s 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, #67a6d3, var(--moss) 60%, #21323f); }
.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: #67a6d3; } .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)); word-spacing: normal; }
.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 NIGHTMARE SPELL: the whole game's look. Dream Realm stone, bone and iron frames,
   pale rune-blue light 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: #030405; --night: #07090a; --stone: #0e1113; --stone2: #15191b; --stone3: #232b30; --ash: #56605a;
  --bone: #ddd5bf; --bone2: #a8a290; --parch: #c9c0a6; --parch2: #8a826c; --ink: #0b0d0c;
  --gold: #3d749c; --gold2: #233746; --glim: #8ac7f3;
  --fire: #46a1e2; --fire2: #1c5e8d; --fireglow: rgba(76, 174, 244, .35);
  --coin: #e2c46a;
}
body { background-color: var(--sky);
  background-image:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(56, 142, 204, .10), transparent 70%),
    linear-gradient(to bottom, rgba(3, 4, 5, .55), rgba(3, 4, 5, .9) 80%),
    var(--px-wall);
  background-size: auto, auto, 96px 96px; image-rendering: pixelated; }
body[data-look] { --glow: rgba(66, 158, 224, .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: #050607; }
#table { background: var(--px-land, none) center bottom / auto 30% repeat-x,
  linear-gradient(var(--light-tint, transparent), var(--light-tint, transparent)), var(--board-sky, none) 25% 100% / cover no-repeat; image-rendering: pixelated; }
/* the board's sky, never turning: the Mile Road a warm band and a low sun, the Wild Reach the Glare far off, the Nightward cold stars.
   The light meter only tints it: gold by day, rose at the Gloam, indigo and darker at Deep Night (not on the Nightward) */
body { --board-sky: var(--px-sky-reach); }
body[data-look=road] { --board-sky: var(--px-sky-mile); }
body:is(.fae, [data-look='table'], [data-look='riverboat']) { --board-sky: var(--px-sky-night); }
body:has(#moon:is(.moon-0, .moon-1, .moon-7)) { --light-tint: rgba(240, 200, 120, .05); }
body:has(#moon:is(.moon-2, .moon-3)) { --light-tint: rgba(170, 80, 110, .06); }
body:has(#moon:is(.moon-4, .moon-5)) { --light-tint: rgba(6, 6, 26, .5); }
body:has(#moon.moon-6) { --light-tint: rgba(150, 160, 180, .04); }
body:is(.fae, [data-look='table'], [data-look='riverboat']):has(#moon) { --light-tint: transparent; }
#table::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 40% at 50% 100%, rgba(56, 154, 224, .12), transparent 70%); }

/* HUD: a stone ledge */
#hud { background: linear-gradient(to bottom, #181d20, #0b0d0f); border-bottom: 2px solid var(--void);
  box-shadow: inset 0 -1px 0 #2c343a, 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, #1a1f22, #111416); border: 2px solid var(--void); box-shadow: inset 0 1px 0 #2e363c; }
.item:hover { background: #222a30; box-shadow: inset 0 1px 0 #3c4850, 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, #151e24, #0c1115); box-shadow: inset 0 1px 0 #293d4b; }

/* 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: #0d1113; }
.face.back::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(76, 174, 244, .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(76, 174, 244, .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%, #0e1113);
  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%, #394d5b, #161d22 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%, #29465b, #10171c 70%); }
.card.past { opacity: .4; filter: saturate(.2); }
.card.done .front { filter: grayscale(.8) brightness(.55); }
/* where you can step: rune-light 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: #d8efff; box-shadow: 0 4px 0 rgba(0, 0, 0, .7), 0 0 26px rgba(76, 174, 244, .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); }
.token { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 8px rgba(76, 174, 244, .35)); }
.back-house { color: var(--bone); text-shadow: 1px 1px 0 #000; bottom: 2px; z-index: 1; }

/* the dealer: the Nightmare Spell at the foot of the table (its sigil, its [bracketed] line) */
#dealer { background: linear-gradient(to bottom, #0c0f11, #040506); border-top: 2px solid #1e2f3b; 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(76, 174, 244, .4)); }
#dealer { grid-template-columns: 40px 1fr; }
.dealer-name { color: var(--glim); font-family: var(--goth); font-size: 18px; text-shadow: none; word-spacing: normal; }
body[data-look] #dealer { border-top-color: #1e2f3b; }

/* panels: a slate slab in an iron frame with a rune-blue lamp on top */
#overlay { background: radial-gradient(ellipse at 50% 40%, rgba(6, 11, 14, .7), rgba(2, 3, 4, .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, 18, 20, .94), rgba(8, 10, 11, .97)), var(--px-wall) 0 0 / 64px 64px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .85), 0 0 60px rgba(56, 142, 204, .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(76, 174, 244, .6)); }
#panel h1 { color: var(--bone); font-family: var(--goth); text-shadow: 3px 3px 0 var(--void); word-spacing: normal; }
#panel h2 { color: var(--glim); font-family: var(--goth); font-weight: 400; letter-spacing: .5px; text-shadow: 2px 2px 0 var(--void); word-spacing: normal; }
#panel h3 { color: var(--glim); border-bottom-color: #233746; }
.panel-art img.px { filter: drop-shadow(0 0 12px rgba(76, 174, 244, .25)) drop-shadow(0 4px 0 rgba(0, 0, 0, .7)); }

/* choices: stone slabs that catch the rune-light when touched */
.choice { background: linear-gradient(to bottom, #1c2125, #121618); border: 2px solid #2d3a42; color: var(--bone);
  box-shadow: inset 0 1px 0 #344048, 0 3px 0 var(--void); }
.choice:hover:not(:disabled) { background: linear-gradient(to bottom, #222a30, #161c20); border-color: var(--fire);
  box-shadow: inset 0 1px 0 #3b4a55, 0 3px 0 var(--void), 0 0 16px rgba(76, 174, 244, .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, #1d2e3b, #121d24); border-color: var(--glim); }
.choice.chosen::before { background: radial-gradient(circle at 50% 50%, rgba(120, 199, 255, .4), transparent 70%); }
.choice .odds { background: var(--void); color: var(--glim); border: 1px solid #233746; }
.choice .bonus { color: var(--glim); border-color: #233746; }
@keyframes seal { 0% { scale: 1; } 35% { scale: 1.04; box-shadow: 0 0 0 2px var(--glim), 0 0 30px rgba(76, 174, 244, .6); } 100% { scale: 1; box-shadow: 0 0 0 1px var(--glim), 0 0 16px rgba(76, 174, 244, .3); } }
@keyframes beckon { 50% { outline-color: var(--glim); box-shadow: 0 0 16px rgba(76, 174, 244, .45), 0 var(--px) 0 var(--void); } }
@keyframes beckon-card { 50% { outline-color: var(--glim); box-shadow: 0 0 16px rgba(76, 174, 244, .5); } }

/* Threads of Fate: same frames; the fronts tell good from bad by the thread: gold, silver, frayed grey, cut crimson */
.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%, #5a4a22, #1c1608 75%); }
.chance-card .front.kind-success { background: radial-gradient(circle at 50% 40%, #3d566c, #0e1a22 75%); }
.chance-card .front.kind-failure { background: radial-gradient(circle at 50% 40%, #32323a, #121216 75%); }
.chance-card .front.kind-huge_failure { border-image-source: var(--px-frame-blood); background: radial-gradient(circle at 50% 40%, #6a1424, #1a050a 75%); }
.chance-card.picked .front { box-shadow: 0 0 22px rgba(76, 174, 244, .55), 0 4px 0 var(--void); }
.result-panel.kind-huge_success #panel, .result-panel.kind-success #panel { background: linear-gradient(to bottom, rgba(16, 27, 34, .95), rgba(8, 12, 14, .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%, #343d44, #14181a 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%, #394d5b, #141a1e 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: none; word-spacing: normal; }
.class-bonus { color: #98c3e2; }
.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%, #343d44, #14181a 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: #0a0d0f; border-color: #2d3a42; }
.toast.good { color: var(--glim); border-color: var(--fire2); box-shadow: 0 0 14px rgba(76, 174, 244, .25); }
#house-info { border: 12px solid transparent; border-image: var(--px-frame-iron) 8 / 12px / 0 stretch; background: #0e1113; }
.token-badge, .token-tag { background: #1e2f3b; color: var(--glim); }

/* fights against Nightmare Creatures */
.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(56, 154, 224, .18); }
.fcard { color: var(--bone); border: 3px solid #2d3a42; background: radial-gradient(ellipse 90% 45% at 50% 30%, #343d44, #14181a 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%, #29465b, #0e161c 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(76, 174, 244, .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: #698ba3; } .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: #0a0d0f; 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%, #14181a), #0e1113 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(76, 174, 244, .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); word-spacing: normal; }
.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(76, 174, 244, .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(56, 154, 224, .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 Spell's sigil between two rune-blue lamps, 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(76, 174, 244, .22), transparent 70%);
  filter: drop-shadow(0 0 12px rgba(76, 174, 244, .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: 0; }
.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, #3d749c 30%, transparent 44%, transparent 56%, #3d749c 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, #1d2e3b, #121a20); text-shadow: none; word-spacing: normal; }

/* the tide strip (id stays #moon), top of the HUD: tide picture, name, rising/falling, steps to the next tide.
   #moon.moon-<0..7>.waxing|.waning > .moon-art(img) .moon-name .moon-next; .moon-change for a moment when the tide 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, #111518, #07090a); border: 2px solid var(--void); box-shadow: inset 0 0 0 1px #233746, 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; word-spacing: normal; }
.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 higher the tide, the fiercer: frame and name burn brighter toward High Tide (4) */
#moon.moon-3, #moon.moon-5 { box-shadow: inset 0 0 0 1px var(--fire2), 0 3px 0 var(--void), 0 0 12px rgba(76, 174, 244, .25); }
#moon.moon-4 { box-shadow: inset 0 0 0 2px #a8203a, 0 3px 0 var(--void), 0 0 22px rgba(150, 20, 36, .5); }
#moon.moon-4 .moon-name { color: #f0b8be; text-shadow: none; }
#moon.moon-0 img.px { filter: drop-shadow(0 0 3px rgba(200, 210, 230, .25)); } /* Low Water: still and pale */
#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(76, 174, 244, .7); } }
@keyframes moon-spin { 0% { opacity: .2; rotate: -90deg; } 60% { opacity: 1; } }
/* High Tide: no bright moon. Black water climbs the table from below, with a crimson edge at its crest */
body.moon-full { --glow: rgba(120, 18, 30, .12); }
body.moon-full #table::before { background: linear-gradient(to top, rgba(2, 4, 8, .85) 0, rgba(4, 8, 14, .55) 14%, rgba(6, 10, 16, .0) 34%),
  linear-gradient(to top, transparent 12%, rgba(176, 28, 44, .22) 14%, transparent 18%),
  radial-gradient(ellipse 80% 40% at 50% 100%, rgba(120, 18, 30, .22), 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 tide strip over its own line, so it never covers health or gold */
@media (max-width: 700px) {
  /* phones: the tide 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 #1c242a; box-shadow: none; background: linear-gradient(to bottom, #0c1114, #07090a); padding: 2px 0; }
  #moon.moon-3, #moon.moon-5 { box-shadow: inset 0 -12px 18px -12px rgba(76, 174, 244, .35); }
  #moon.moon-4 { box-shadow: inset 0 -14px 22px -10px rgba(0, 0, 0, .9), inset 0 -2px 0 #a8203a; }
}
@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 tide, made obvious: its own strip across the top on every screen, a big tide picture, its name,
   and one word for how fierce the Dark Sea 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 #1c242a; background: linear-gradient(to bottom, #0c1114, #07090a); 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: 0; }
#moon.intensity-0::after { content: 'Calm'; color: #9ab0c8; }
#moon.intensity-1::after { content: 'Uneasy'; color: #9fb7c9; }
#moon.intensity-2::after { content: 'Restless'; color: #8abde2; }
#moon.intensity-3::after { content: 'Grim'; color: #67b9f3; text-shadow: none; }
#moon.intensity-4::after { content: 'Drowning'; color: #ff7a86; text-shadow: none; }
#moon.intensity-3 { box-shadow: inset 0 -14px 20px -12px rgba(76, 174, 244, .35); }
#moon.intensity-4 { background: linear-gradient(to bottom, #05070b, #010203); box-shadow: inset 0 -16px 24px -8px rgba(0, 0, 0, .9), inset 0 -2px 0 #a8203a, 0 2px 14px rgba(150, 20, 36, .4); }
#moon.intensity-4 .moon-name { color: #f0b8be; }
@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: #0a0e10; border: 1px solid #2d648c; box-shadow: 0 0 6px rgba(76, 174, 244, .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(76, 174, 244, .15), 0 0 8px rgba(76, 174, 244, .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: #0a0e10; border-color: #233746; }
.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: none; }
.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: none; }
.tally-bad { color: #e8868c; text-shadow: none; }
.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(76, 174, 244, .35); }
.choice .fx.fx-boost { border-style: solid; }
/* boons with chips instead of words */
.boon .boon-chips { grid-area: text; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; margin: 2px 0; }
.boon .fx, .note-chips .fx { font-size: 14px; padding: 1px 7px; background: var(--void); border: 1px solid var(--stone3); color: var(--bone2); display: inline-flex; align-items: center; gap: 2px; }
.boon .fx.good, .note-chips .fx.good { color: var(--moss2); border-color: var(--moss); }
.boon .fx.bad, .note-chips .fx.bad { color: #e8868c; border-color: var(--blood); }
.boon .fx.fx-boost { color: var(--glim); border-color: var(--fire2); }
.boon-house { display: inline-flex; align-items: center; gap: 3px; font-family: var(--pix); font-size: 13px; }
.boon-house img.px, .tally-icon img.px { width: 22px; height: 22px; }
.tally { padding: 2px 6px 2px 3px; }

/* ---------- phone HUD that breathes (DESIGN.md #4): three short lines at most ----------
   moon on one line; health, gold and floor on one; items and marks one row that scrolls sideways.
   If ui.js hides the moon on a first run (#moon.hidden / [hidden] / display none), the rest moves up;
   #moon.moon-reveal plays when it first shows. */
@media (max-width: 520px) {
  #hud { gap: 2px 10px; padding: 4px 10px 5px; flex-wrap: wrap; }
  #moon { grid-template-columns: auto auto auto auto; grid-template-areas: 'art name word next'; align-items: center; gap: 0 8px; padding: 1px 0; margin-bottom: 2px; }
  #moon img.px, #moon .moon-art img.px { width: 30px; height: 30px; }
  #moon .moon-name { font-size: 17px; }
  #moon::after { font-size: 12px; }
  #moon .moon-next { font-size: 11px; }
  /* the floor line wraps to two short lines rather than cutting off the steps left */
  .stat.floor { flex: 1 1 0; min-width: 0; text-align: right; overflow: hidden; font-size: 12px; line-height: 1.15;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  /* long creature names: smaller, up to three lines */
  /* whole names on the phone: 'Rank Class' small above, the name below, no cut-off */
  .fighter-name { font-size: 11px; display: block; overflow: visible; }
  .fighter-rank { font-size: 9px; line-height: 1.05; opacity: .75; margin-bottom: 1px; }
  #items { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 1px;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  #items::-webkit-scrollbar { display: none; }
  #items:empty { display: none; }
  #items .item { flex: none; white-space: nowrap; }
}
#moon.hidden, #moon[hidden] { display: none !important; }
#moon.moon-reveal { animation: moon-reveal 1s cubic-bezier(.2, .8, .2, 1); }
@keyframes moon-reveal { 0% { opacity: 0; translate: 0 -10px; filter: brightness(2.5); } 60% { opacity: 1; } 100% { translate: 0 0; filter: none; } }
@media (prefers-reduced-motion: reduce) { #moon.moon-reveal { animation: none; } }

/* ---------- path cards: what's under the card, first (art.back with a category) ----------
   .face.back.has-cat.cat-<key> > .back-cat > img.cat-art + .cat-word, then the House small:
   its sigil in the top-left corner and ui.js's .back-house name in small type at the foot. */
.face.back.has-cat { --cat: var(--bone); --catglow: rgba(220, 210, 180, .35); }
.face.back.cat-heal { --cat: #ff8a96; --catglow: rgba(255, 110, 130, .45); }
.face.back.cat-fight { --cat: #ff5a5a; --catglow: rgba(255, 70, 60, .5); }
.face.back.cat-danger { --cat: #ff7ab0; --catglow: rgba(200, 40, 90, .55); }
.face.back.cat-gold { --cat: #ffd860; --catglow: rgba(255, 200, 70, .45); }
.face.back.cat-trade, .face.back.cat-shop { --cat: #f0b070; --catglow: rgba(240, 160, 80, .4); }
.face.back.cat-gamble { --cat: #c8a0ff; --catglow: rgba(170, 120, 255, .45); }
.face.back.cat-mystery { --cat: #90d0ff; --catglow: rgba(110, 180, 255, .4); }
.face.back.cat-rest { --cat: #9ccef2; --catglow: rgba(97, 176, 233, .4); }
.face.back.cat-item { --cat: #ffc070; --catglow: rgba(255, 170, 70, .4); }
.face.back.cat-boss { --cat: #6ac1ff; --catglow: rgba(76, 174, 244, .6); }
.face.back.cat-exit { --cat: #e8e0c8; --catglow: rgba(230, 220, 190, .4); }
.back-cat { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: -10%; }
.back-cat img.cat-art { width: 62%; max-width: 64px; min-width: 30px; aspect-ratio: 1; height: auto;
  filter: drop-shadow(0 0 6px var(--catglow)) drop-shadow(0 2px 0 rgba(0, 0, 0, .8)); }
.back-cat .cat-emoji { font-size: 30px; line-height: 1; }
.back-cat .cat-word { font-family: var(--pix); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: 0; color: var(--cat);
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000; white-space: nowrap; }
.face.back.has-cat::after { background: radial-gradient(circle at 50% 42%, var(--catglow), transparent 58%), linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .5)); }
.face.back.has-cat img.sigil.corner { position: absolute; top: 1px; left: 1px; width: 30%; max-width: 26px; min-width: 14px; margin: 0; z-index: 2; opacity: .9; filter: drop-shadow(0 1px 0 #000); }
.face.back.has-cat .back-house { display: none; }
.back-cat .cat-house { margin-top: 2px; font-family: var(--read); font-size: 10px; line-height: 1; color: var(--bone2); opacity: .9;
  text-shadow: 1px 1px 0 #000; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.face.back.has-cat.house-life .cat-house { color: #96beda; } .face.back.has-cat.house-coin .cat-house { color: #f0d890; }
.face.back.has-cat.house-war .cat-house { color: #f0a0a0; } .face.back.has-cat.house-paths .cat-house { color: #b0e0e8; }
.face.back.has-cat.house-sorcery .cat-house { color: #b0f4ff; } .face.back.has-cat.house-shadow .cat-house { color: #b8b4cc; }
@media (min-width: 700px) { .back-cat .cat-word { font-size: 15px; } .back-cat .cat-house { font-size: 12px; } }

/* =====================================================================================
   SHADOW SLAVE THEME PASS (last, so it wins): titles in the pixel face, the Spell's
   [bracketed] line in the footer, the fan-game credit, High Tide as rising black water.
   ===================================================================================== */
/* titles: the pixel face reads cleanly at every size; the blackletter is retired from headings */
#panel h1, #panel h2, .class-name, .class-minor .class-name, .house-info-head, .over-panel .unlocks-title, .dealer-name, .title-panel .choice:first-of-type, .fight-actions .end-turn {
  font-family: var(--pix); font-weight: 700; letter-spacing: 0; }
#panel h1 { font-size: 44px; color: #dfeaf5; text-shadow: 3px 3px 0 var(--void); }
.title-panel #panel h1 { font-size: clamp(34px, 10vw, 52px); letter-spacing: 0; }
#panel h2 { font-size: 28px; }
.class-name, .class-minor .class-name { font-size: 22px; }
.title-panel .choice:first-of-type { font-size: 22px; }
.fight-actions .end-turn { font-size: 19px; }
@media (max-width: 420px) { #panel h1 { font-size: 36px; } #panel h2 { font-size: 24px; } .title-panel #panel h1 { font-size: clamp(32px, 10vw, 40px); } .class-name, .class-minor .class-name { font-size: 20px; } }
/* title rule: a plain thread of light, no skull */
.title-panel #panel h1::after { background: linear-gradient(to right, transparent, #3d749c 30%, transparent 44%, transparent 56%, #3d749c 70%, transparent) 50% 50% / 100% 2px no-repeat,
  radial-gradient(circle, #8ac7f3 0 2px, transparent 3px) 50% 50% / 12px 12px no-repeat; }
.title-panel #panel::before { border-bottom-color: #233746; box-shadow: 0 1px 0 #2f5878; }
/* the fan-game credit: small, but readable and always shown */
.credit { margin: 8px 0 4px; font-family: var(--read); font-size: 13px; line-height: 1.3; font-style: normal; text-align: center; color: var(--bone2); opacity: 1; letter-spacing: 0; }
/* the dealer is the Nightmare Spell: cool, flat, system-like; a calm blue lamp on top */
#dealer { border-top: 2px solid #2c6a99; box-shadow: 0 -6px 18px rgba(0, 0, 0, .6), 0 -1px 10px rgba(76, 174, 244, .18); }
body[data-look] #dealer { border-top-color: #2c6a99; }
.dealer-name { color: #6fa8d6; font-size: 14px; letter-spacing: 0; text-transform: uppercase; text-shadow: none; }
#dealer-line { font-family: var(--read); font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.35; color: #b6dcf8;
  text-shadow: none; font-style: normal; }
@media (max-width: 520px) { #dealer-line { font-size: 15px; } }
/* Threads of Fate: thin frames tinted to the thread (face colours are above) */
.chance-card .front.kind-huge_success { box-shadow: 0 0 14px rgba(246, 207, 90, .3), 0 4px 0 var(--void); }
.chance-card .front.kind-success { box-shadow: 0 0 10px rgba(230, 240, 250, .22), 0 4px 0 var(--void); }
.chance-card .front.kind-failure { box-shadow: 0 4px 0 var(--void); }
.chance-card .front.kind-huge_failure { box-shadow: 0 0 14px rgba(200, 30, 50, .35), 0 4px 0 var(--void); }
.chance-card.picked .front { box-shadow: 0 0 22px rgba(76, 174, 244, .55), 0 4px 0 var(--void); }

/* the Aspect card: one card now (C4), so it gets the room: a wider card and a big portrait */
.class-card:only-child { width: min(300px, 86%); padding: 12px 14px; }
.class-art .class-icon, .class-art .class-icon img { width: 72px; height: 72px; image-rendering: pixelated; }
.class-card:only-child .class-art .class-icon, .class-card:only-child .class-art .class-icon img { width: 96px; height: 96px; }
.class-card:only-child .class-text { font-size: 15px; }
.class-card:only-child .class-bonus { font-size: 16px; }

/* unlocks on the end screen and the collection: names break between words, never mid-word;
   on the end screen the cards are wider (three a row on a phone) */
.mini-card .card-name { overflow-wrap: normal; word-break: normal; hyphens: manual; -webkit-hyphens: manual; max-width: 100%; }
.over-panel .collection-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.over-panel .mini-card .card-name { font-size: 12px; }

/* toasts over an open panel go to the very top, on the panel's title: the choices are low, where a toast would cover them */
body:has(#overlay:not(.hidden)) #toasts { top: max(6px, env(safe-area-inset-top)); z-index: 60; }

/* health and shards on a shop's panel: the HUD's colours, as two small rune-stone tabs */
.panel-stats { display: flex; gap: 8px; justify-content: center; margin: 0 0 6px; font-family: var(--pix); font-size: 15px; font-weight: 700; }
.panel-stats > span { padding: 1px 8px; background: var(--void); border: 1px solid var(--stone3); text-shadow: 1px 1px 0 var(--void); }
.panel-stats .ps-hp { color: var(--blood2); border-color: var(--blood); }
.panel-stats .ps-gold { color: var(--glim); border-color: #2f5a78; }

/* ========== the soul, Aspect abilities, push your luck, the profile (DESIGN.md 'Soul, Aspects and unlocks') ==========
   Class names agreed with engine (ui.js); colours: Dormant pale grey-blue, Awakened the Spell's blue, Ascended gold-white. */
.soul-meter { --soul: #8aa0b4; display: flex; align-items: center; gap: 6px; font-family: var(--pix); font-size: 13px; font-weight: 700; color: var(--soul); }
.soul-meter.rank-awakened { --soul: #4caef4; }
.soul-meter.rank-ascended { --soul: #f4e6b0; }
.soul-rank { white-space: nowrap; text-shadow: 1px 1px 0 var(--void); }
.soul-bar { position: relative; width: 64px; height: 10px; background: var(--void); border: 1px solid #2c3a46; box-shadow: inset 0 1px 0 #000; }
.soul-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--soul) 80%, #fff), var(--soul) 60%, color-mix(in srgb, var(--soul) 60%, #000));
  box-shadow: 0 0 6px var(--soul); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.soul-meter.filling .soul-bar { animation: soul-fill .6s ease-out; }
@keyframes soul-fill { 40% { box-shadow: 0 0 10px var(--soul), inset 0 1px 0 #000; } }
.soul-meter.rank-up { animation: soul-rank .5s ease-out 3; }
@keyframes soul-rank { 50% { filter: brightness(1.8) drop-shadow(0 0 6px var(--soul)); scale: 1.08; } }
/* on a phone, "Soul: Awakened" over its bar, the bar as wide as the words */
@media (max-width: 520px) { .soul-meter { flex-direction: column; align-items: stretch; font-size: 11px; gap: 2px; } .soul-bar { width: auto; min-width: 44px; height: 7px; } }

/* the rank-up moment */
.rankup-panel h2 { color: #f4e6b0; }
.rankup-art { display: flex; justify-content: center; margin: 4px 0 8px; animation: art-in .5s cubic-bezier(.2, .8, .3, 1.15) backwards; }
.rankup-art img.px { width: 112px; height: 112px; filter: drop-shadow(0 0 14px rgba(76, 174, 244, .55)); }
.rankup-ability { margin: 6px auto 10px; padding: 8px 12px; max-width: 320px; background: rgba(8, 14, 20, .8); border: 1px solid #2f5a78; text-align: center; }

/* Aspect ability and push your luck, under the chance hand */
.chance-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; width: 100%; }
.ability-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 15px; color: var(--glim); background: #0d1a24;
  border: 1px solid #4caef4; box-shadow: 0 0 10px rgba(76, 174, 244, .3), 0 3px 0 var(--void); cursor: pointer; }
.ability-btn .ability-name { font-family: var(--pix); font-weight: 700; }
.ability-icon { display: inline-flex; font-size: 18px; } .ability-icon img.px { width: 22px; height: 22px; }
#ability-buttons { display: flex; gap: 6px; } #ability-buttons .ability-btn { padding: 2px 8px; font-size: 13px; }
.fight-actions .ability-btn { flex: 1; justify-content: center; }
.ability-uses { font-family: var(--pix); font-size: 13px; padding: 0 6px; background: var(--void); color: var(--bone); border: 1px solid #2f5a78; }
.ability-btn:disabled { opacity: .4; box-shadow: 0 3px 0 var(--void); filter: grayscale(.6); cursor: default; }
.push-row { display: flex; gap: 8px; width: 100%; max-width: 360px; }
.push-row button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 8px; font-size: 17px; font-family: var(--pix); font-weight: 700;
  background: var(--stone2, #1b2026); color: var(--bone); border: 1px solid var(--stone3, #39424b); box-shadow: 0 3px 0 var(--void); cursor: pointer; }
.push-row .push-stop { border-color: var(--moss2); }
.push-row .push-go { border-color: #4caef4; color: #dfeaf5; background: #0d1a24; animation: beckon 2.2s ease-in-out infinite; outline: 2px solid transparent; outline-offset: 2px; }
.push-keep, .push-bonus, .push-left { font-family: var(--read); font-weight: 400; font-size: 13px; }
.push-keep { color: var(--moss2); } .push-bonus { color: #8fd0ff; } .push-left { color: var(--bone2); }
.push-row button:active, .ability-btn:active { translate: 0 2px; box-shadow: 0 1px 0 var(--void); }

/* the Aspect screen: Flaw, Attributes, three ability tiers (locked ones dim, with the rank that opens them) */
.class-flaw { font-size: 14px; color: #e8868c; font-style: italic; }
.class-flaw::before { content: 'Flaw: '; font-style: normal; font-family: var(--pix); font-weight: 700; color: #c85a62; }
.attributes { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 2px 0; }
.attr { font-family: var(--pix); font-size: 12px; color: #8fd0ff; padding: 0 5px; background: rgba(0, 0, 0, .35); border: 1px solid #2f5a78; white-space: nowrap; }
.ability-tiers { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 4px; text-align: left; }
.ability-tier { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'rank uses' 'name name' 'text text'; gap: 0 6px; align-items: baseline;
  padding: 5px 8px; background: rgba(6, 10, 14, .7); border: 1px solid #2c3a46; border-left: 3px solid #8aa0b4; }
.ability-tier.tier-awakened { border-left-color: #4caef4; } .ability-tier.tier-ascended { border-left-color: #f4e6b0; }
.tier-rank { grid-area: rank; font-family: var(--pix); font-size: 12px; text-transform: uppercase; letter-spacing: 0; color: var(--bone2); }
.tier-name { grid-area: name; font-family: var(--pix); font-weight: 700; font-size: 15px; color: var(--glim); }
.tier-uses { grid-area: uses; font-family: var(--pix); font-size: 12px; color: var(--bone2); }
.tier-text { grid-area: text; font-size: 14px; line-height: 1.25; color: var(--bone); }
/* a tier not reached yet: dimmed by colour, not opacity, so its text stays readable */
.ability-tier.locked { background: rgba(4, 6, 8, .8); border-color: #232c34; border-left-color: #4a5560; }
.ability-tier.locked .tier-name { color: #b8c2ca; }
.ability-tier.locked .tier-text { color: #a9b4bc; }
.ability-tier.locked .path-trade { color: #c8bf9c; }
.ability-tier.locked .path-opt.path-chosen { border-color: #3d749c; background: rgba(13, 26, 36, .7); box-shadow: none; }
.ability-tier.locked .tier-rank::before { content: '🔒 '; }

/* the profile: your rank between Nightmares, kept Memories, True Names */
.profile-rank { font-family: var(--pix); font-size: 24px; font-weight: 700; text-align: center; color: #8aa0b4; margin: 2px 0; }
.profile-rank.rank-awakened { color: #4caef4; } .profile-rank.rank-ascended { color: #f4e6b0; }
.profile-rank.rank-transcendent { color: #fff; text-shadow: none; }
.profile-wins { text-align: center; color: var(--bone2); font-size: 14px; }
.rank-ladder { display: flex; justify-content: center; gap: 4px; margin: 8px 0; flex-wrap: wrap; }
.rank-step { font-family: var(--pix); font-size: 12px; padding: 2px 8px; border: 1px solid #2c3a46; color: var(--bone2); opacity: .5; }
.rank-step.reached { opacity: 1; color: #dfeaf5; border-color: #4caef4; background: #0d1a24; }
.kept-memories { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.true-names { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 12px; }
.true-name { padding: 6px 10px; background: rgba(6, 10, 14, .7); border: 1px solid #2f5a78; }
.tn-name { display: block; font-family: var(--pix); font-weight: 700; font-size: 16px; color: #f4e6b0; text-shadow: none; }
.tn-deed { display: block; font-size: 13px; color: var(--bone2); }
.true-name-earned { margin: 8px auto; padding: 6px 12px; max-width: 320px; text-align: center; font-family: var(--pix); color: #f4e6b0;
  border: 1px solid #f4e6b0; background: rgba(40, 34, 14, .5); animation: art-in .6s .3s cubic-bezier(.2, .8, .3, 1.15) backwards; }
@media (prefers-reduced-motion: reduce) { .push-row .push-go, .soul-meter.rank-up { animation: none; } }
.soul-meter.hidden { display: none; }
/* push chips sit inside the buttons: keep them small and centred */
.push-row .effects, .push-row .fx-list, .push-keep > *, .push-bonus > * { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.push-row .fx { font-size: 13px; padding: 0 6px; background: var(--void); border: 1px solid var(--stone3); }
.push-row .fx.good { color: var(--moss2); border-color: var(--moss); } .push-row .fx.bad { color: #e8868c; border-color: var(--blood); }
/* abilities in an encounter's choices and on the board */
.encounter-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
#ability-buttons .ability-btn { box-shadow: 0 0 10px rgba(76, 174, 244, .4), 0 3px 0 var(--void); }
/* phone HUD with the soul: health, shards and floor on the first line; the soul meter starts the second,
   before the Aspect and Memories (which scroll sideways) */
@media (max-width: 520px) {
  #hud::after { content: ''; order: 1; flex-basis: 100%; height: 0; }
  #hud #soul { order: 2; }
  #hud #items { order: 3; flex: 1 1 0; min-width: 0; width: auto; }
}

/* choosing among Aspects (profile rank 2+): the chosen one at full width with its abilities;
   the others small (portrait, name, Attributes), dim, a tap to switch */
.class-row.class-choose { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 8px; width: 100%; max-width: 420px; margin: 8px auto; }
.class-choose .class-card { width: auto; min-width: 0; cursor: pointer; animation: none; }
.class-choose .class-card:not(.chosen) { opacity: .6; filter: saturate(.6); border-image-source: var(--px-frame-iron); padding: 6px; gap: 2px; }
.class-choose .class-card:not(.chosen) :is(.class-text, .class-bonus, .class-flaw, .ability-tiers, .class-rank) { display: none; }
.class-choose .class-card:not(.chosen) .class-name { font-size: 15px; }
.class-choose .class-card:not(.chosen) .class-art .class-icon, .class-choose .class-card:not(.chosen) .class-art .class-icon img { width: 48px; height: 48px; }
.class-choose .class-card:not(.chosen):hover { opacity: .85; }
.class-choose .class-card.chosen { grid-column: 1 / -1; border-image-source: var(--px-frame-gilt); box-shadow: 0 0 16px rgba(76, 174, 244, .35), 0 4px 0 var(--void); }
.class-choose .class-card.chosen .class-art .class-icon, .class-choose .class-card.chosen .class-art .class-icon img { width: 80px; height: 80px; }
/* bound Memories to bring, the harder Nightmare */
.kept-memories.bring { grid-template-columns: repeat(auto-fill, minmax(72px, 88px)); justify-content: center; }
.kept-memories .mini-card.pickable { cursor: pointer; opacity: .6; }
.kept-memories .mini-card.chosen { opacity: 1; outline: 2px solid #4caef4; outline-offset: 2px; box-shadow: 0 0 12px rgba(76, 174, 244, .5); }
.bring-title, .keep-title { margin: 10px 0 4px; font-family: var(--pix); font-size: 16px; color: var(--glim); text-align: center; }
.choice.hard-toggle.chosen { border-color: var(--blood2); color: #f0b8be; background: #2a1014; }
/* the profile's rank: a big name, its gift in plain words */
.profile-rank { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 16px; }
.profile-art img.px { width: 72px; height: 72px; }
.profile-rank-name { font-size: 26px; }
.profile-rank-text { font-family: var(--read); font-weight: 400; font-size: 15px; color: var(--bone2); text-shadow: none; max-width: 300px; }

/* D1 creature tricks: ambush, summon, armor (engine sets .fx-<type> on the fighter for ~400ms) */
.fighter.fx-ambush .fighter-art { animation: fx-ambush .45s cubic-bezier(.2, .8, .2, 1); }
.fighter.fx-ambush::after { background-image: var(--px-fx-impact); animation: fx-pop .45s ease-out .1s backwards; }
.fighter.fx-summon .fighter-art { animation: fx-summon .6s ease-out; }
.fighter.fx-summon::after { background-image: var(--px-fx-curse); animation: fx-pop .6s ease-out; }
.fighter.fx-trick .fighter-art img.px { animation: fx-trick .5s ease-out; }
.fighter.fx-armor .fighter-art { animation: fx-clank .3s ease-out; }
.fighter.fx-armor::after { background-image: var(--px-fx-block); animation: fx-pop .4s ease-out; filter: grayscale(1) brightness(1.2); }
@keyframes fx-ambush { 0% { translate: 0 -14px; scale: .8; filter: brightness(0); } 40% { translate: 0 2px; scale: 1.12; filter: brightness(1.8); } }
@keyframes fx-summon { 0% { opacity: 0; translate: 0 14px; filter: brightness(0) drop-shadow(0 0 6px #b070e0); } 60% { opacity: 1; filter: brightness(1.3) drop-shadow(0 0 6px #b070e0); } }
@keyframes fx-trick { 40% { filter: brightness(1.4) drop-shadow(0 0 6px #b070e0); } }
@keyframes fx-clank { 30% { translate: 2px 0; filter: brightness(1.5) saturate(0); } }
.fx-num.armor { color: #b8b2a6; font-size: 20px; }
.status-armor { color: #b8b2a6; }
.choice .fx.fx-fight-trick { color: #d8a8f0; border-color: #5a2f78; display: inline-flex; align-items: center; gap: 2px; }
.choice .fx-fight-trick .fx-art { display: inline-flex; }
/* the class icon sits in the rank line, before 'Awakened Monster' */
.fighter-name .fighter-class { display: inline; }
.fighter-class img { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.fighter-name .fighter-class + .fighter-rank { display: inline; }
.fighter-name .fighter-class + .fighter-rank::after { content: '\A'; white-space: pre; }
@media (max-width: 520px) { .fighter-class img { width: 11px; height: 11px; vertical-align: -1px; } }

/* D2 the Soul Sea: the HUD count of Memories held, tier pips (small pale crystals), the full-sea
   panel (same iron frame as #panel) and the Raise picker's before/after. */
.item.sea-count { font-family: var(--pix); font-weight: 700; font-size: 13px; color: #9fc4dc; padding: 2px 7px;
  background: linear-gradient(to bottom, #12202a, #0b141a); border-color: #050a0d; box-shadow: inset 0 2px 0 #1d3342; cursor: help; }
.item.sea-count::before { content: ''; width: 6px; height: 6px; margin: 0 3px 0 1px; rotate: 45deg; border: 1px solid currentColor; opacity: .8; }
.item.sea-count.full { color: #f0a090; background: linear-gradient(to bottom, #2a1216, #170a0c); box-shadow: inset 0 2px 0 #4a1e24; }
.item-pips { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; align-items: center; }
.item-pips .pip { width: 6px; height: 6px; border: 0; border-radius: 0; rotate: 45deg; background: transparent;
  box-shadow: 0 0 0 1px #4a6476; opacity: 1; scale: 1; }
.item-pips .pip.on { background: #dff0ff; box-shadow: 0 0 0 1px #6fa8d0, 0 0 4px rgba(140, 200, 245, .7); }
.item-pips.tier-3 .pip.on { background: #fff6d8; box-shadow: 0 0 0 1px #c8b070, 0 0 5px rgba(244, 230, 176, .8); }
#panel h2 .item-pips { margin-left: 8px; vertical-align: 4px; }
#panel h2 .item-pips .pip { width: 8px; height: 8px; }

#sea-overlay { background: radial-gradient(ellipse at 50% 40%, rgba(6, 11, 14, .75), rgba(2, 3, 4, .92)); z-index: 30; }
.sea-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, 18, 20, .95), rgba(8, 10, 11, .97)), var(--px-wall) 0 0 / 64px 64px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .85), 0 0 60px rgba(56, 142, 204, .1); padding: 12px 14px 16px; color: var(--bone);
  max-width: 480px; animation: panel-in .25s cubic-bezier(.2, .8, .2, 1); }
.sea-panel h2 { font-family: var(--pix); font-weight: 700; font-size: 26px; letter-spacing: 0; color: var(--glim);
  text-shadow: 2px 2px 0 var(--void); }
.sea-panel .text { font-size: 17px; }
.raise-head { justify-content: center; flex-wrap: wrap; width: 100%; }
.raise-head .item-icon img.px { width: 24px; height: 24px; }
.choice.sea-held:hover:not(:disabled) { border-color: #a04048; box-shadow: inset 0 1px 0 #3b4a55, 0 3px 0 var(--void), 0 0 14px rgba(200, 60, 70, .25); }
.choice.sea-new { border-style: dashed; background: linear-gradient(to bottom, #15191b, #0e1113); }
.choice.sea-new .item-name { font-weight: 400; color: var(--bone2); }
.raise-tier { font-family: var(--pix); font-size: 15px; color: var(--glim); margin-left: 4px; }
.choice .hint.raise-before { color: var(--bone2); }
.choice .hint.raise-after { color: #bfe3ff; font-weight: 700; margin-top: -2px; }
.choice.raise-option:disabled .raise-after { color: var(--bone2); }
@media (max-width: 520px) {
  .item.sea-count { font-size: 12px; padding: 1px 5px; }
  .sea-panel { padding: 8px 10px 12px; } .sea-panel h2 { font-size: 22px; } .sea-panel .text { font-size: 16px; }
  .choice.sea-held, .choice.sea-new, .choice.raise-option { padding: 7px 10px; font-size: 16px; }
}

/* D3 Echoes: a pale, cold ghost of a beaten foe. Rune-blue, never gold; dashed edges where it's a chip. */
.echo-art { opacity: .75; filter: grayscale(.7) brightness(1.35) sepia(.2) hue-rotate(170deg) drop-shadow(0 0 3px rgba(150, 210, 255, .8)); }
.item.echo-chip { color: #cfe6f7; background: linear-gradient(to bottom, #13202a, #0b1318); border: 2px dashed #2f5f80; box-shadow: none; }
.item.echo-chip:hover { background: #182a36; }
.item.echo-chip .echo-art img, .item.echo-chip .echo-art canvas { width: 22px; height: 22px; }
.choice .fx.fx-fight-echo { color: #9fd8ff; border-color: #2f5f80; border-style: dashed; }
/* in a fight a guarding Echo stands at your back, its number on a small rune-blue tag */
.fighter.hero .fight-echo { position: absolute; left: -10px; bottom: 30px; z-index: 2; flex-direction: column; gap: 0; pointer-events: auto;
  transition: opacity .4s ease, filter .4s ease; }
.fight-echo .echo-art img, .fight-echo .echo-art canvas { width: 34px; height: 34px; image-rendering: pixelated; }
.fight-echo-guard { font-family: var(--pix); font-size: 12px; line-height: 1; color: #dff0ff; background: #0b1820; border: 1px solid #3d749c;
  padding: 1px 4px 2px; margin-top: -4px; text-shadow: 1px 1px 0 var(--void); }
.fight-echo.used { opacity: .25; filter: grayscale(1); }
.fighter.hero.fx-echo .fight-echo { animation: fx-echo-guard .45s cubic-bezier(.2, .8, .2, 1); }
.fighter.hero.fx-echo::after { background-image: var(--px-fx-block); animation: fx-pop .45s ease-out; filter: hue-rotate(10deg) brightness(1.5) saturate(.6); }
@keyframes fx-echo-guard { 0% { translate: 0 0; } 40% { translate: 18px -6px; scale: 1.25; filter: brightness(2); } 100% { translate: 0 0; } }
.fx-num.fx-num-echo { color: #bfe3ff; font-size: 20px; text-shadow: 1px 1px 0 var(--void); }
/* keep or take: the new one lit, yours plain */
.echo-offer .raise-head { flex-wrap: nowrap; text-align: left; justify-content: center; }
.echo-offer .raise-head .echo-art img, .echo-offer .raise-head .echo-art canvas { width: 32px; height: 32px; }
.choice.echo-take { border-color: #3d749c; box-shadow: inset 0 1px 0 #344048, 0 3px 0 var(--void), 0 0 12px rgba(76, 174, 244, .18); }
.mini-card.mini-echo { box-shadow: 0 0 0 1px #2f5f80, 0 0 8px rgba(76, 174, 244, .2); }
.echo-bring .mini-card.chosen { outline: 2px solid #8ac7f3; outline-offset: 2px; }
@media (max-width: 520px) { .fighter.hero .fight-echo { left: -6px; bottom: 26px; } .fight-echo .echo-art img, .fight-echo .echo-art canvas { width: 28px; height: 28px; } }

/* phone HUD with everything on (Aspect, Echo, Soul Sea count, tiered Memories, marks): no sideways scroll that
   hides the Memories. Chips wrap onto a second line; Memories and the Echo show as icon + pips (a tap names them);
   the Aspect and the marks keep their words. With three chips or fewer, everything keeps its name. */
@media (max-width: 520px) {
  #hud #items { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; gap: 4px; row-gap: 4px; }
  #items:has(> .item:nth-child(4)) .item:not(.class-chip):not(.mark-chip):not(.sea-count) .item-name { display: none; }
  #items:has(> .item:nth-child(4)) .item:not(.class-chip):not(.mark-chip):not(.sea-count) { padding: 2px 4px 2px 3px; min-height: 30px; }
  #items .item .item-pips { flex-direction: column; gap: 3px; margin-left: 1px; }
  #items .item .item-pips .pip { width: 4px; height: 4px; }
  #items .item.class-chip .item-name { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
  #items .item.timed .item-timer { font-size: 10px; }
}

/* D4 Citadels and the Cohort. A Citadel is safe ground: a steady warm lamp-glow round its card (no tide there).
   Shut (Grudge too high): the glow turns blood-red and the card dims. The toll line reads as the Spell's voice. */
#board .card.citadel .face { box-shadow: 0 0 0 2px rgba(230, 205, 150, .55), 0 0 14px rgba(230, 200, 140, .35); }
#board .card.citadel.shut .face { box-shadow: 0 0 0 2px rgba(160, 42, 50, .8), 0 0 14px rgba(200, 50, 60, .35); filter: saturate(.6) brightness(.85); }
#board .card.citadel.here .face { box-shadow: 0 0 0 2px rgba(240, 220, 170, .8), 0 0 20px rgba(230, 200, 140, .45); }
.text.citadel-cut { color: #8ac7f3; font-size: 16px; margin: 4px auto 8px; padding: 4px 10px; max-width: 30ch;
  border-top: 1px dashed #2f5a78; border-bottom: 1px dashed #2f5a78; text-shadow: none; }
/* the Cohort: allies, not your soul, so bone and lamp-light instead of rune-blue */
.ability-btn.cohort { color: #ecdfbf; background: linear-gradient(to bottom, #221d16, #15120d); border-color: #a89060;
  box-shadow: 0 0 10px rgba(230, 200, 140, .22), 0 3px 0 var(--void); }
.ability-btn.cohort:hover:not(:disabled) { border-color: #e6cd96; box-shadow: 0 0 14px rgba(230, 200, 140, .35), 0 3px 0 var(--void); }
.ability-btn.cohort .ability-uses { border-color: #6a5a3a; color: #ecdfbf; }
.ability-btn.cohort .ability-icon img.px { width: 26px; height: 26px; }
.fight-actions .ability-btn.cohort .ability-name { font-size: 14px; line-height: 1.1; }

/* D5 the tide on the board. Ground marks: a small pixel badge in the back's top-right corner (the House sits
   top-left, its name along the bottom): low ground = two rune-blue waves, high ground = a bone-grey peak.
   The emoji glyph is hidden; the shape is drawn with clip-paths so it stays crisp and on-theme. */
.face.back .back-ground { top: 4px; right: 4px; bottom: auto; width: 18px; height: 14px; padding: 0; font-size: 0; color: transparent;
  background: rgba(3, 4, 5, .7); border: 1px solid #2c3a46; border-radius: 0; }
.face.back .back-ground::before { content: ''; position: absolute; inset: 2px 2px; }
.face.back .back-ground.ground-low { border-color: #2f5f80; }
.face.back .back-ground.ground-low::before { background: #7fc4ff;
  clip-path: polygon(0 30%, 25% 0, 50% 30%, 75% 0, 100% 30%, 100% 50%, 75% 20%, 50% 50%, 25% 20%, 0 50%,
    0 80%, 25% 50%, 50% 80%, 75% 50%, 100% 80%, 100% 100%, 75% 70%, 50% 100%, 25% 70%, 0 100%); }
.face.back .back-ground.ground-high::before { background: #d8cfb8; inset: 2px 2px 2px; clip-path: polygon(0 100%, 38% 15%, 55% 50%, 70% 30%, 100% 100%); }
@media (max-width: 520px) { .face.back .back-ground { width: 15px; height: 12px; top: 3px; right: 3px; } }
/* drowned: the Dark Sea stands over the card's lower half, a still wave-line on top (nothing moves) */
#board .card.drowned .face.front { filter: saturate(.65) brightness(.85); }
#board .card.drowned .face.front::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, rgba(70, 150, 220, .55) 0 2px, rgba(14, 40, 70, .62) 2px, rgba(4, 12, 24, .82));
  clip-path: polygon(0 6px, 12% 0, 25% 6px, 37% 0, 50% 6px, 62% 0, 75% 6px, 87% 0, 100% 6px, 100% 100%, 0 100%); }
#board .card.drowned .face { box-shadow: 0 0 0 2px rgba(70, 150, 220, .45), 0 0 14px rgba(40, 110, 190, .3); }
#board .card.drowned .face.front::after { height: 42%; background: linear-gradient(to bottom, rgba(120, 190, 250, .8) 0 2px, rgba(30, 90, 160, .32) 2px, rgba(8, 30, 60, .55)); }
/* a first-time Spell intro: the Spell's lamp turns up once, then holds still (no blinking) */
#dealer.intro { background: linear-gradient(to bottom, #0d2236, #06111c); border-top-color: #8ac7f3;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .6), 0 -2px 16px rgba(138, 199, 243, .35), inset 0 1px 0 rgba(223, 240, 255, .25); }
body[data-look] #dealer.intro { border-top-color: #8ac7f3; }
#dealer.intro::before { filter: drop-shadow(0 0 9px rgba(138, 199, 243, .75)); }
#dealer.intro .dealer-name { color: #bfe3ff; }
#dealer.intro .dealer-name::after { content: 'new'; margin-left: 8px; padding: 1px 5px 0; font-family: var(--pix); font-size: 10px; letter-spacing: 0;
  color: #06111c; background: #8ac7f3; vertical-align: 1px; }
#dealer.intro #dealer-line { color: #e6f4ff; text-shadow: none; }
#dealer.intro.speak { animation: intro-lamp 1.1s ease-out; }
@keyframes intro-lamp { from { box-shadow: 0 -6px 18px rgba(0, 0, 0, .6), 0 -6px 34px rgba(138, 199, 243, .7), inset 0 1px 0 rgba(223, 240, 255, .5); } }
/* D6 Nightmares: a short pick on the start screen; the deeper ones darker, the chosen one lit rune-blue */
.nightmare-pick { gap: 8px; margin: 10px 0 4px; }
.nightmare-opt { font-family: var(--pix); font-size: 13px; letter-spacing: 0; line-height: 1.2; padding: 7px 12px 6px; min-height: 36px;
  border-radius: 0; border: 2px solid #3a4652; background: linear-gradient(to bottom, #161c22, #0b0f13); color: var(--bone2); opacity: 1;
  box-shadow: 0 2px 0 var(--void); cursor: pointer; }
.nightmare-opt:nth-child(n+2) { border-color: #3b2a4a; background: linear-gradient(to bottom, #171222, #0b0812); }
.nightmare-opt:hover { color: var(--bone); border-color: #5a7088; }
.nightmare-opt.chosen { color: #e6f4ff; border-color: #8ac7f3; background: linear-gradient(to bottom, #12304a, #081a2a);
  box-shadow: 0 2px 0 var(--void), 0 0 10px rgba(138, 199, 243, .35); }
.nightmare-line { font-family: var(--read); font-style: normal; font-size: 14px;
  line-height: 1.35; color: #b6dcf8; text-shadow: none; margin: 6px 4px 0; min-height: 2.7em; }
@media (max-width: 520px) { .nightmare-opt { font-size: 12px; padding: 6px 9px 5px; } .nightmare-line { font-size: 13px; } }
/* in a deeper Nightmare the Spell's lamp burns a colder violet-blue */
body[data-nightmare]:not([data-nightmare='']):not([data-nightmare='first']) #dealer:not(.intro) { border-top-color: #5a5ab0; }
/* phone HUD at three rows even with the tide showing: the tide (small) shares the top row with the floor line;
   health, shards, the soul and every chip flow together below it, two rows at most */
@media (max-width: 520px) {
  #hud:has(> #moon:not(.hidden)) { gap: 4px 6px; }
  #hud:has(> #moon:not(.hidden)) #moon { order: 0; flex: 0 0 auto; margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
    grid-template-columns: auto auto auto; grid-template-areas: 'art name name' 'art word next'; justify-content: start; gap: 0 5px; }
  #hud:has(> #moon:not(.hidden)) #moon img.px { width: 26px; height: 26px; }
  #hud:has(> #moon:not(.hidden)) #moon .moon-name { font-size: 14px; }
  #hud:has(> #moon:not(.hidden)) #moon::after { font-size: 10px; }
  #hud:has(> #moon:not(.hidden)) #moon .moon-next { font-size: 10px; }
  #hud:has(> #moon:not(.hidden)) .stat.floor { font-size: 11px; }
  #hud:has(> #moon:not(.hidden)) :is(.stat.hp, .stat.gold) { order: 2; margin-right: 4px; }
  #hud:has(> #moon:not(.hidden)) #items { display: contents; }
  #hud:has(> #moon:not(.hidden)) #items > .item { order: 3; }
}
@media (max-width: 520px) {
  #hud:has(> #moon:not(.hidden)) { font-size: 15px; }
  #hud:has(> #moon:not(.hidden)) #soul { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 10px; }
  #hud:has(> #moon:not(.hidden)) #soul .soul-bar { width: 52px; height: 6px; }
  #hud:has(> #moon:not(.hidden)) .mark-chip { font-size: 12px; padding: 1px 5px; }
  /* crowded: the Aspect chip shows its portrait only (a tap names it), so a long name is never cut */
  #items:has(> .item:nth-child(5)) .item.class-chip .item-name { display: none; }
  #items:has(> .item:nth-child(5)) .item.class-chip { padding: 2px 4px 2px 3px; min-height: 30px; }
}
/* the Soul Sea count says what it counts: 'Sea 4/4' (full: a warm warning, not an error) */
.item.sea-count::before { content: 'Sea'; width: auto; height: auto; margin: 0 4px 0 0; rotate: none; border: 0; opacity: .75; font-size: .85em; letter-spacing: 0; }
.item.sea-count.full { color: #f0c0a0; }
/* fight energy is not money: round rune-lit orbs (pixel octagons), never the Soul Shard's diamond. Spent ones are dark sockets.
   A card's cost sits in the same orb. */
.energy { gap: 4px; }
.energy .pip, .energy .pip.full { width: 18px; height: 18px; background: #0a141c; image-rendering: auto;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  box-shadow: inset 0 0 0 2px #2a3e4e; }
.energy .pip.full { background: radial-gradient(circle at 38% 34%, #f2faff 0 2px, #9fd4fa 3px 4px, #3f8fd0 7px, #1d4c78 9px);
  box-shadow: inset 0 0 0 2px #0d2a44; }
.fcard-cost, .fcard.cant .fcard-cost { width: 24px; height: 24px; top: -9px; left: -7px; font-size: 15px;
  background: radial-gradient(circle at 38% 34%, #9fd4fa 0 3px, #3f8fd0 8px, #1d4c78 12px); image-rendering: auto;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.fcard.cant .fcard-cost { background: #26323c; color: #8a98a4; }
/* a crowded hand on a phone: smaller names so 'Guard' and the like fit whole */
@media (max-width: 520px) {
  .hand:has(> .fcard:nth-child(6)) .fcard { padding-left: 2px; padding-right: 2px; }
  .hand:has(> .fcard:nth-child(6)) .fcard-name { font-size: 10px; letter-spacing: -.4px; }
  .hand:has(> .fcard:nth-child(6)) .fcard-text { font-size: 10.5px; }
}
/* a foe's strength gain pops up beside it, not over the number of its next hit */
.fighter .fx-num.buff { top: 46%; left: 84%; }
/* two or more abilities in a fight on a phone: they take a row of their own, End turn and Run the row below */
@media (max-width: 520px) {
  .fight-actions:has(.ability-btn + .ability-btn) { flex-wrap: wrap; row-gap: 6px; }
  .fight-actions:has(.ability-btn + .ability-btn) .ability-btn { flex: 1 1 40%; padding: 3px 8px; gap: 6px; }
  .fight-actions:has(.ability-btn + .ability-btn) .ability-btn .ability-name { font-size: 12px; line-height: 1.1; }
  .fight-actions:has(.ability-btn + .ability-btn) .ability-btn .ability-icon img.px { width: 22px; height: 22px; }
  .fight-actions:has(.ability-btn + .ability-btn) .end-turn { flex: 2 1 50%; padding: 6px 10px; }
  .fight-actions:has(.ability-btn + .ability-btn) .flee { flex: 1 1 30%; padding: 6px 8px; }
}
/* a Citadel or any long list of choices on a phone: a smaller picture and tighter buttons, so the way out stays on screen */
@media (max-width: 520px) {
  #panel:has(.choices > .choice:nth-child(6)) .panel-art { width: 96px; height: 100px; padding-bottom: 6px; margin-bottom: 4px; }
  #panel:has(.choices > .choice:nth-child(6)) .panel-art img.px { width: 76px; height: 76px; }
  #panel:has(.choices > .choice:nth-child(6)) .choices { margin-top: 4px; }
  #panel:has(.choices > .choice:nth-child(6)) .choices .choice { padding-top: 5px; padding-bottom: 5px; }
  #panel:has(.choices > .choice:nth-child(6)) .text { margin-top: 4px; margin-bottom: 4px; }
}
/* board cards on a phone are narrow: names a size smaller and tighter, so 'Drowned' or 'Waystone' stays one word */
@media (max-width: 520px) { #board .card-name { font-size: min(11px, max(8.5px, calc(var(--cw) * .15))); letter-spacing: -.3px; padding-left: 1px; padding-right: 1px;
  margin-left: -3px; margin-right: -3px; max-width: none; } }

/* ---------- engine's playthrough marks: ☠ could kill, Citadel inside, Cohort flash, Absorb in the raise picker ---------- */
/* '☠ could kill you' (and a fight's deadly hits): a solid blood chip, louder than an ordinary cost, still and calm */
.choice .fx.fx-deadly { background: var(--blood); color: #ffe0e2; border-color: #e05a62; font-family: var(--pix); letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
/* a Citadel stay: its walls in a stone window over the title */
.result-art.citadel-inside { display: flex; justify-content: center; align-items: center; width: 136px; height: 136px; margin: 0 auto 8px;
  background: #0a0e10; border: 2px solid var(--stone3); box-shadow: inset 0 0 0 2px #05080a, 0 0 14px rgba(76, 174, 244, .18), 0 3px 0 var(--void); }
.result-art.citadel-inside img.px { width: 128px; height: 128px; image-rendering: pixelated; }
@media (max-width: 520px) {
  .result-art.citadel-inside { width: 104px; height: 104px; margin-bottom: 6px; }
  .result-art.citadel-inside img.px { width: 96px; height: 96px; }
}
/* the Cohort is called: its figure in a soft dark halo, its name on a rune-lit plate */
.cohort-flash { padding: 18px 26px 14px; background: radial-gradient(closest-side, rgba(5, 8, 10, .85), rgba(5, 8, 10, .6) 70%, transparent); }
.cohort-flash img.px { filter: drop-shadow(0 0 12px rgba(76, 174, 244, .35)) drop-shadow(0 4px 0 rgba(0, 0, 0, .7)); }
.cohort-flash-name { font-family: var(--pix); font-weight: normal; font-size: 16px; color: #8ac7f3; background: var(--void); border: 1px solid #3d749c;
  padding: 3px 10px; text-shadow: none; box-shadow: 0 0 10px rgba(76, 174, 244, .25); }
/* Absorb first in the raise picker: a little apart from the Memories under it */
.raise-panel .absorb-choice { margin-bottom: 6px; }
/* ---------- designer's replay, phone ---------- */
/* names never break mid-word: they wrap at spaces and hyphens, and ui.js shrinks a word too long for its card */
@media (max-width: 520px) { .over-panel .mini-card .card-name { font-size: 10px; letter-spacing: -.2px; } }
/* the floor line: two balanced lines that fit even on a wide phone font */
@media (max-width: 520px) {
  .stat.floor { text-wrap: balance; }
  #hud:has(> #moon:not(.hidden)) .stat.floor { font-size: 10.5px; letter-spacing: -.2px; }
}
/* a touch screen keeps :hover on the last card tapped: no lift there, so it never sits over its neighbours.
   A held or keyboard-focused card still lifts. */
@media (hover: none) {
  .fcard:hover:not(.cant):not(:focus-visible) { translate: 0 calc(var(--d) * var(--d) * 3px); rotate: calc(var(--d) * 3deg); scale: 1; z-index: auto; }
}
/* five cards on a phone: the smaller names too, and a flatter fan so no name hides under the next card */
@media (max-width: 520px) {
  .hand:has(> .fcard:nth-child(5)) .fcard { padding-left: 2px; padding-right: 2px; rotate: calc(var(--d) * 1.5deg); }
  .hand:has(> .fcard:nth-child(5)) .fcard-name { font-size: 10px; letter-spacing: -.4px; }
  .hand:has(> .fcard:nth-child(5)) .fcard-text { font-size: 10.5px; }
}
/* the hit number floats off a foe's body, below its intent box, not on it */
.fighter.foe .fx-num:not(.buff) { top: 40%; }
/* a beaten foe stays as a faint shape only: its name and health go, so they never lie over a neighbour's */
.fighter.dead :is(.fighter-name, .fighter-rank, .hpbar, .hp) { visibility: hidden; }
/* the Memory and Aspect icons in the HUD read as buttons (a tap names them) */
@media (max-width: 520px) {
  #items button.item { border: 1px solid #3d749c; background: #0c141a; box-shadow: 0 2px 0 var(--void); }
}

/* ---------- D7: the Ascended choice, two paths side by side ---------- */
.path-pick { width: 100%; max-width: 460px; margin: 6px auto 4px; gap: 8px; }
/* a path is a big tap target: the whole card, dark stone, rune-blue edge; nothing blinks */
.path-pick .path-opt { position: relative; min-height: 132px; padding: 10px 9px 9px; color: var(--bone); background: #0c141a;
  border: 1px solid #3d749c; border-top: 3px solid #f4e6b0; box-shadow: 0 3px 0 var(--void); cursor: pointer; transition: opacity .25s, box-shadow .25s, border-color .25s; }
.path-pick .path-opt:hover, .path-pick .path-opt:focus-visible { border-color: #4caef4; box-shadow: 0 0 10px rgba(76, 174, 244, .3), 0 3px 0 var(--void); }
.path-pick .path-opt:active { translate: 0 2px; box-shadow: 0 1px 0 var(--void); }
.path-opt .path-name { font-family: var(--pix); font-weight: 700; font-size: 15px; line-height: 1.15; color: var(--glim); overflow-wrap: normal; }
.path-opt .path-icon { font-weight: 400; }
/* the trade-off: its own line, set off by a rule so it reads before the long text */
.path-opt .path-trade { font-size: 14px; line-height: 1.25; color: #f4e6b0; padding-bottom: 4px; border-bottom: 1px solid #2c3a46; }
.path-opt .path-text { font-size: 13.5px; line-height: 1.3; color: var(--bone); flex: 1; }
.path-opt .tier-uses { align-self: flex-start; padding: 0 5px; background: var(--void); border: 1px solid #2f5a78; }
.path-opt .path-mine { align-self: flex-start; font-family: var(--pix); font-size: 12px; letter-spacing: 0; color: #8fd0ff; opacity: 1; padding: 0 5px; border: 1px solid #4caef4; }
.path-pick .path-opt.your-path { border-color: #4caef4; }
.path-pick .path-opt.chosen { border-color: #8fd0ff; background: #0d1a24; box-shadow: 0 0 14px rgba(76, 174, 244, .5), 0 3px 0 var(--void); }
.path-pick.picked .path-opt:not(.chosen) { opacity: .3; filter: grayscale(.7); }
@media (max-width: 520px) {
  .path-pick { gap: 6px; }
  .path-pick .path-opt { padding: 8px 7px 7px; min-height: 120px; }
  /* the pixel font reads a size smaller than it is: a step up on the rank-up pick */
  .path-pick .path-opt .path-name { font-size: 16px; }
  .path-pick .path-opt .path-trade { font-size: 15px; }
  .path-pick .path-opt .path-text { font-size: 15px; line-height: 1.28; }
}
/* the Aspect screen: the branching tier holds both, this run's (or your) path lit, the other faded */
.ability-tier.ability-paths .path-pair { grid-area: auto; grid-column: 1 / -1; gap: 6px; margin-top: 3px; }
.path-pair .path-opt { padding: 5px 6px; background: rgba(0, 0, 0, .3); border: 1px solid #2c3a46; gap: 2px; }
.path-pair .path-opt .path-name { font-size: 14px; }
.path-pair .path-opt .path-trade { font-size: 14px; padding-bottom: 2px; }
.path-pair .path-opt .path-text { font-size: 14px; line-height: 1.25; }
.path-pair .path-opt.path-chosen { border-color: #4caef4; background: #0d1a24; box-shadow: 0 0 8px rgba(76, 174, 244, .35); }
.path-pair .path-opt.path-other { opacity: 1; filter: none; background: rgba(0, 0, 0, .45); border-style: dashed; }
.path-pair .path-opt.path-other .path-name { color: var(--bone2); }
.path-pair .path-opt.path-other :is(.path-trade, .path-text) { color: #a9b4bc; }

/* ---------- D8: Nightmare Gates. A rift on a card's back, the cards it spreads to, sealed once closed ----------
   still light, nothing pulses: a violet tear while open, rune-blue once sealed */
#board .card.gate .face.back { background-color: #0b0612; }
#board .card.gate .face.back.has-cat { --cat: #e2b8ff; --catglow: rgba(170, 70, 220, .6); }
#board .card.gate .face.back.has-cat::after { background: radial-gradient(ellipse 34% 52% at 50% 42%, rgba(200, 120, 255, .45), rgba(90, 30, 130, .25) 60%, transparent 80%), linear-gradient(to bottom, rgba(0, 0, 0, .15), rgba(0, 0, 0, .6)); }
#board .card.gate-open .face { box-shadow: 0 0 0 2px #a060d0, 0 0 16px rgba(160, 70, 220, .6), 0 var(--px) 0 var(--void); }
#board .card.gate-open.reachable .face { box-shadow: 0 0 0 2px #c890f0, 0 0 20px rgba(170, 80, 230, .7), 0 var(--px) 0 var(--void); }
#board .card.gate-shut .face { box-shadow: 0 0 0 2px #5a3a70, 0 0 8px rgba(120, 60, 160, .35); filter: brightness(.75); }
#board .card.gate.closed .face { box-shadow: 0 0 0 2px #3d749c, 0 0 10px rgba(76, 174, 244, .35); filter: grayscale(.6) brightness(.7); }
#board .card.gate.closed .face.back.has-cat { --cat: #8fd0ff; --catglow: rgba(76, 174, 244, .35); }
/* spread: face-up creature cards with the rift's violet seeping in from the edges */
#board .card.spread .face { box-shadow: 0 0 0 2px #8a4ab8, 0 0 12px rgba(150, 60, 210, .5), 0 var(--px) 0 var(--void); }
#board .card.spread .face.front::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(90, 30, 140, .45) 100%); }
#board .card.spread.done .face { box-shadow: 0 0 0 2px #4a3060; }
#board .card.spread.done .face.front::after { opacity: .4; }

/* ---------- D9: Weaving. A Memory's [Tag] in the Spell's rune-blue; the Weave panel's two steps ---------- */
.ench-tag { font-family: var(--pix); font-style: normal; font-size: 11px; letter-spacing: 0; color: #8fd0ff; text-shadow: none; }
.item.enchanted { box-shadow: inset 0 2px 0 var(--stone3), inset 0 -2px 0 #3d749c; }
.item.enchanted .ench-tag { margin-left: 2px; }
.ench-line .ench-tag { font-size: 13px; }
.weave-panel .weave-step { margin: 4px 0 8px; }
.weave-panel .choice.weave-from, .weave-panel .choice.weave-to { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; padding: 8px 10px; }
.weave-panel .weave-head { width: 100%; }
.weave-panel .weave-head .item-name { min-width: 0; overflow-wrap: anywhere; }
.weave-panel .weave-head .ench-tag { font-size: 12px; }
.weave-panel .choice .ench-text { color: var(--bone); }
/* step one: the Memory you take from is lost; say so in blood, not as an afterthought */
.weave-panel .weave-from .chips { justify-content: flex-start; }
.weave-panel .weave-from .chip { background: #3a1418; border-color: var(--blood2); color: #f0a0a0; }
.weave-panel .weave-from:hover:not(:disabled) { border-color: var(--blood2); }
/* step two: what it has now goes dim (struck through when it is replaced), what it gets is lit */
.weave-panel .weave-before { color: var(--ash); font-size: 12.5px; }
.weave-panel .weave-to.replaces .weave-before { text-decoration: line-through; text-decoration-color: rgba(160, 42, 50, .85); }
.weave-panel .weave-after { color: #8fd0ff; font-size: 13.5px; }
.weave-panel .weave-to:hover:not(:disabled), .weave-panel .weave-to:focus-visible { border-color: #4caef4; box-shadow: 0 0 10px rgba(76, 174, 244, .3), 0 3px 0 var(--void); }
@media (max-width: 520px) { .weave-panel .choice.weave-from, .weave-panel .choice.weave-to { padding: 7px 8px; font-size: 15px; } }

/* the Aspect screen on a phone: panels shrink to fit rather than scroll, so this tall one is packed tight
   (a smaller portrait, the card the panel's full width) to keep its text near full size */
@media (max-width: 520px) {
  .class-card:only-child { width: 100%; padding: 8px 9px; }
  .class-card:only-child .class-art .class-icon, .class-card:only-child .class-art .class-icon img { width: 56px; height: 56px; }
  .class-card:only-child .ability-tiers { gap: 4px; }
  .class-card:only-child .ability-tier { padding: 4px 7px; }
  .class-card:only-child .ability-paths .path-pair .path-opt { padding: 4px 6px; }
}

/* the rank-up's 'Choose your path': a pale-gold banner across the panel, the two paths hang below it */
#panel h3.path-title { margin: 12px 0 2px; padding: 5px 8px; font-size: 18px; text-align: center; color: #f4e6b0; background: linear-gradient(to right, transparent, rgba(244, 230, 176, .14), transparent);
  border-top: 1px solid #6a6040; border-bottom: 1px solid #6a6040; text-shadow: 1px 1px 0 var(--void); }
#panel h3.path-title::before, #panel h3.path-title::after { content: '◆'; margin: 0 8px; font-size: 11px; color: #c8b878; vertical-align: 2px; }
/* a path's own sprite (art.js), beside its name */
.path-icon.path-art { display: inline-flex; vertical-align: middle; margin-right: 4px; }
.path-icon.path-art :is(img, svg, canvas) { width: 24px; height: 24px; image-rendering: pixelated; }
.path-pick .path-icon.path-art :is(img, svg, canvas) { width: 32px; height: 32px; }
/* toasts: the card's name (pale, as the Spell would say it), a Gate's news (violet) */
.toast.title-toast { color: var(--glim); border-color: #3d749c; font-family: var(--pix); }
.toast.gate-toast { color: #e2b8ff; background: #0b0612; border-color: #a060d0; box-shadow: 0 0 12px rgba(160, 70, 220, .35), 0 3px 0 rgba(0, 0, 0, .6); }
/* the health a weave costs: a blood chip, like the Memory it destroys */
.fx.fx-weave-lost-hp { background: #3a1418; border-color: var(--blood2); color: #f0a0a0; }

/* ---------- engine's replay marks: a deadly flee, the True Name moment, 'Tap one' ---------- */
/* running would kill you: the flee button edged in blood, its ☠ chip as on any choice */
.fight-actions .flee.flee-deadly { border-color: #e05a62; box-shadow: inset 0 0 0 1px rgba(224, 90, 98, .35), 0 3px 0 var(--void); }
/* a True Name earned: its picture in a pale crystal glow, the line in the pixel font */
.true-name-moment { gap: 6px; margin: 6px auto 10px; }
.true-name-moment .tn-art { display: flex; justify-content: center; align-items: center; width: 84px; height: 84px; background: #0a0e10;
  border: 2px solid #3d749c; box-shadow: inset 0 0 0 2px #05080a, 0 0 14px rgba(76, 174, 244, .3), 0 3px 0 var(--void); }
.true-name-moment .tn-art img, .true-name-moment .tn-art svg, .true-name-moment .tn-art canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.true-name-moment .tn-line { font-family: var(--pix); font-weight: normal; font-size: 16px; color: #f4e6b0; text-shadow: 1px 1px 0 var(--void); }
.fx.fx-true-name { color: #f4e6b0; border-color: #c8a85a; background: #16120a; }
.fx.fx-soul-rank { color: #8fd0ff; border-color: #3d749c; background: #0b141c; }
/* 'Tap one' under 'Choose your path' */
#panel .path-tap { margin: 2px 0 6px; text-align: center; font-size: 13px; color: #a9b4bc; }
/* a short phone: the rank-up pictures give way so the path pick keeps its full size */
@media (max-width: 520px) and (max-height: 700px) {
  #panel:has(.path-pick) .rankup-art { margin: 0 0 4px; }
  #panel:has(.path-pick) .rankup-art img.px { width: 84px; height: 84px; }
}

/* D11 the Runes: your token opens them; the Spell's own ledger, rune-blue labels on dark glass */
#board .token { cursor: pointer; }
#board .token::after { content: ''; position: absolute; inset: -8px; } /* a bigger finger target than the 29px piece */
.runes-panel .runes-title { color: #8fd0ff; text-shadow: 2px 2px 0 var(--void); }
.runes-panel .runes { margin: 8px 0 4px; padding: 8px 12px; background: #0a0e12; border: 2px solid #1e2f3b;
  box-shadow: inset 0 0 0 1px #0b141c, inset 0 0 18px rgba(76, 174, 244, .08); font-family: var(--pix); }
.runes-panel .rune { margin: 0; padding: 5px 0; font-size: 17px; line-height: 1.45; color: #8fd0ff;
  border-top: 1px solid #16222c; overflow-wrap: break-word; }
.runes-panel .rune:first-child, .runes-panel .rune-more { border-top: 0; }
.runes-panel .rune-more { padding: 0 0 4px 1.2em; }
.runes-panel .rune-label { color: #8fd0ff; text-shadow: none; }
.runes-panel .rune-value { color: #f0e6cc; }
.runes-panel .rune-extra { font-size: 14px; color: #a9b4bc; opacity: 1; }
.runes-panel .rune-empty .rune-value { color: #6c7a84; opacity: 1; }
.runes-panel .rune-name .rune-value { color: #f4e6b0; }
.runes-panel .rune-soul .rune-value { color: #8fd0ff; }
.runes-panel .rune-memory.curse { color: #c49ad0; }
.runes-panel .rune .ench-tag { font-size: 13px; margin-left: 4px; }
.runes-panel .choice { margin-top: 10px; }
@media (max-width: 520px) {
  .runes-panel .runes { padding: 6px 10px; }
  .runes-panel .rune { font-size: 16px; padding-top: 4px; padding-bottom: 4px; }
  .runes-panel .rune-more { padding-top: 0; }
  .runes-panel .rune-extra { font-size: 14px; }
}
/* the path's picture always sits beside its name, a long name wraps beside it rather than under it */
.path-opt .path-name { display: flex; align-items: center; gap: 6px; }
.path-opt .path-name .path-icon { flex: none; margin-right: 0; }
/* the end screen on a phone: Memories and unlocks as short tiles, two a row, picture beside the name, so the
   panel isn't shrunk to fit and a long name ('Blade of the Kneeling Echo') reads whole */
@media (max-width: 520px) {
  .over-panel .collection-grid { grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 10px; }
  .over-panel .collection-grid .mini-card { aspect-ratio: auto; flex-direction: row; justify-content: flex-start; gap: 6px; min-height: 46px; padding: 4px 6px; text-align: left; }
  .over-panel .collection-grid .mini-card .card-icon { flex: none; font-size: 24px; }
  .over-panel .collection-grid .mini-card .card-icon :is(img, canvas, svg) { width: 32px; height: 32px; }
  .over-panel .collection-grid .mini-card .card-name { font-size: 13px; line-height: 1.15; letter-spacing: 0; text-align: left; flex: 1; min-width: 0; }
}

/* ---------- rarity (DESIGN.md 'Companions' + rarity): one ladder, Common plain grey, Uncommon green, Rare blue,
   Fated gold with a white-gold thread. Each .rarity-<id> sets its colours; frames and words use them. Still, no pulse. ---------- */
.rarity-common { --rar: #5a6268; --rar-hi: #b4bcc2; --rar-bg: #12161a; --rar-glow: rgba(150, 160, 170, 0); }
.rarity-uncommon { --rar: #3f8a46; --rar-hi: #a8e6a0; --rar-bg: #0c160e; --rar-glow: rgba(110, 210, 110, .25); }
.rarity-rare { --rar: #2f6ea0; --rar-hi: #8fd0ff; --rar-bg: #0b141c; --rar-glow: rgba(76, 174, 244, .3); }
.rarity-fated { --rar: #c8a050; --rar-hi: #f8e8b0; --rar-bg: #16120a; --rar-glow: rgba(240, 200, 100, .4); --rar-thread: #fff4d0; }
.rarity-word { font-family: var(--pix); font-weight: 700; letter-spacing: 0; color: var(--rar-hi, var(--bone)); }
.rarity-fated .rarity-word, .rarity-word.rarity-fated { text-shadow: none; }
/* '[Rare] only' at the top of a choice */
.choice .rarity-only { font-family: var(--pix); font-size: 13px; color: var(--rar-hi); margin-bottom: 3px; padding-bottom: 2px; border-bottom: 1px solid var(--rar); text-align: left; }
.choice:has(> .rarity-only) { border-color: var(--rar, var(--gold2)); }
.choice:has(> .rarity-only.rarity-uncommon) { --rar: #3f8a46; } .choice:has(> .rarity-only.rarity-rare) { --rar: #2f6ea0; }
.choice:has(> .rarity-only.rarity-fated) { --rar: #c8a050; box-shadow: inset 0 0 0 1px #fff4d0, 0 3px 0 var(--void), 0 0 10px rgba(240, 200, 100, .3); }
.choice:has(> .rarity-only.rarity-common) { --rar: #5a6268; }
@media (max-width: 520px) { .choice .rarity-only { font-size: 13px; } }

/* a rarity frame on anything (a chip, a portrait, a card): the tier's edge; Fated is purple with a gold thread inside */
.rar-frame, .companion-chip, .joins-art, .roll-card, .reel-tile { border: 2px solid var(--rar, #5a6268); background-color: var(--rar-bg, #12161a); }
.rarity-fated:is(.rar-frame, .companion-chip, .joins-art, .roll-card, .reel-tile) { box-shadow: inset 0 0 0 1px var(--rar-thread), 0 0 10px var(--rar-glow); }
.rarity-rare:is(.rar-frame, .companion-chip, .joins-art, .roll-card, .reel-tile), .rarity-uncommon:is(.rar-frame, .companion-chip, .joins-art, .roll-card, .reel-tile) { box-shadow: 0 0 8px var(--rar-glow); }

/* companions on the HUD: a small portrait in its rarity frame and the name */
.companion-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; min-height: 30px; color: var(--bone); font-family: var(--pix); font-size: 13px; cursor: pointer; }
.companion-chip :is(.comp-art, .comp-portrait) { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.companion-chip :is(img, canvas, svg) { width: 24px; height: 24px; image-rendering: pixelated; }
.companion-chip .comp-name { color: var(--rar-hi); white-space: nowrap; }
.companion-chip.used, .companion-chip .comp-ability-left:empty { opacity: .6; }
@media (max-width: 520px) {
  #items:has(> .item:nth-child(5)) .companion-chip .comp-name { display: none; }
  #items:has(> .item:nth-child(5)) .companion-chip { padding: 2px; }
}

/* someone joins: their portrait big in its frame, the name in their rarity's colour, the rarity word, their Attributes */
.joins-panel .joins-art { width: 96px; height: 96px; margin: 6px auto 8px; display: flex; align-items: center; justify-content: center; }
.joins-panel .joins-art :is(img, canvas, svg) { width: 80px; height: 80px; image-rendering: pixelated; }
.joins-panel .joins-name { font-family: var(--pix); font-size: 22px; color: var(--rar-hi, #f4e6b0); margin: 2px 0; text-shadow: 2px 2px 0 var(--void); }
.joins-panel .rarity-word { display: block; font-size: 14px; margin-bottom: 6px; }
.joins-panel .joins-attrs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 4px 0 8px; font-family: var(--pix); font-size: 14px; }
.joins-panel .joins-attrs > * { padding: 1px 6px; border: 1px solid var(--rar, #2c3a46); color: var(--rar-hi, var(--bone)); background: rgba(0, 0, 0, .3); }
.joins-panel :is(.joins-ability, .comp-ability) { font-size: 15px; line-height: 1.35; color: var(--bone); margin: 4px 0; }
@media (max-width: 520px) and (max-height: 700px) { .joins-panel .joins-art { width: 76px; height: 76px; } .joins-panel .joins-art :is(img, canvas, svg) { width: 64px; height: 64px; } }

/* the Runes' companion block: one line each, the name in its rarity colour */
.runes-panel .rune-companion .rune-value [class*='rarity-'] { color: var(--rar-hi); }
.runes-panel .rune-companion .rarity-word { font-size: 13px; }

/* ---------- the rarity reel: four tier tiles, the light steps along them and settles on the rolled one ---------- */
.roll-panel h2 { color: #8fd0ff; }
.roll-stage { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.roll-reel { display: flex; gap: 8px; justify-content: center; margin: 8px 0 10px; }
.reel-tile { width: 56px; min-width: 0; height: 56px; padding: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--pix); font-size: 11px; color: var(--rar-hi); opacity: .3; filter: grayscale(.6);
  transition: opacity .08s linear, filter .08s linear, transform .2s ease-out; }
.reel-tile :is(img, canvas, svg) { width: 40px; height: 40px; image-rendering: pixelated; }
.reel-tile.on { opacity: 1; filter: none; }
.reel-tile.landed { transform: translateY(-3px) scale(1.1); box-shadow: 0 0 0 1px var(--rar-hi), 0 0 14px var(--rar-glow), 0 3px 0 var(--void); }
.reel-tile.rarity-common.landed { box-shadow: 0 0 0 1px var(--rar-hi), 0 3px 0 var(--void); }
.reel-tile.rarity-fated.landed { box-shadow: inset 0 0 0 1px var(--rar-thread), 0 0 0 1px var(--rar-thread), 0 0 18px var(--rar-glow), 0 3px 0 var(--void); }
.roll-reel:has(.landed) .reel-tile:not(.landed) { opacity: .2; }
@media (max-width: 380px) { .roll-reel { gap: 6px; } }

/* the result: a card in the tier's frame, the tier word on top, the name in the tier's light */
.roll-card { width: 100%; max-width: 340px; margin: 4px auto 6px; padding: 10px 12px; text-align: center; animation: art-in .3s ease-out backwards; }
.roll-card > .rarity-word { display: block; font-size: 13px; margin-bottom: 2px; }
.roll-card .roll-name, .roll-card .joins-name { font-family: var(--pix); font-size: 21px; font-weight: 700; line-height: 1.15; color: var(--rar-hi); margin: 2px 0 4px; text-shadow: 2px 2px 0 var(--void); }
.roll-card .roll-text { font-size: 15px; line-height: 1.35; color: var(--bone); margin: 2px 0 4px; }
.roll-card .class-art { display: flex; justify-content: center; margin: 4px 0; }
.roll-card .class-art :is(img, canvas, svg) { width: 72px; height: 72px; image-rendering: pixelated; }
.roll-card .attributes { margin: 4px 0 6px; }
.roll-card .rankup-ability { margin: 6px auto; max-width: none; }
.roll-card .class-flaw { margin-top: 4px; }
.roll-note { margin: 4px 0; font-size: 14px; color: #a9b4bc; }
.roll-option.roll-take { border-color: #3d749c; box-shadow: inset 0 1px 0 #344048, 0 3px 0 var(--void), 0 0 10px rgba(76, 174, 244, .18); }
.roll-option.roll-pass, .roll-option.roll-keep { color: var(--bone2); }
.roll-option.roll-drop { font-size: 15px; }
@media (max-width: 520px) {
  .roll-card { padding: 8px 10px; }
  .roll-card .roll-name, .roll-card .joins-name { font-size: 20px; }
  .roll-card .roll-text, .roll-card .tier-text { font-size: 15px; }
}
@media (max-width: 520px) and (max-height: 700px) { .roll-card .class-art :is(img, canvas, svg) { width: 56px; height: 56px; } .roll-reel { margin: 4px 0 6px; } }

/* companions: the card (joins moment, chip tap), its Attributes framed by their own rarity, the ability button */
.comp-card .comp-aspect { font-size: 15px; }
.comp-card .attr[class*='rarity-'] { color: var(--rar-hi); border-color: var(--rar); }
.comp-card .attr.rarity-common { color: #c8d0d6; border-color: #5a6268; }
.comp-card .joins-art { width: 88px; height: 88px; margin: 4px auto 6px; }
.comp-card .joins-art :is(img, canvas, svg) { width: 72px; height: 72px; }
.comp-card .joins-art img.px { image-rendering: pixelated; }
.ability-btn.companion-ability { border-color: var(--rar); }
.ability-btn.companion-ability .ability-name { color: var(--rar-hi); }
.ability-btn.companion-ability.rarity-fated { box-shadow: inset 0 0 0 1px var(--rar-thread), 0 3px 0 var(--void); }
.rankup-companions { margin: 2px 0 6px; font-size: 14px; color: #a9b4bc; }
#items .companion-chip { background: var(--rar-bg); box-shadow: 0 0 6px var(--rar-glow); }
#items .companion-chip.rarity-fated { box-shadow: inset 0 0 0 1px var(--rar-thread), 0 0 8px var(--rar-glow); }
#items .companion-chip.comp-used { opacity: .5; filter: grayscale(.5); }
#items button.item.companion-chip { border-color: var(--rar); } /* the HUD chip keeps its rarity edge: grey, green, blue, gold */
.runes-panel .rune-companion-name { color: var(--rar-hi); }
@media (max-width: 520px) and (max-height: 700px) { .roll-panel #panel h2, #overlay.roll-panel h2 { font-size: 21px; margin: 2px 0; } }

/* ---------- every card makes sense on its own (DESIGN.md rule 5): the encounter panel stands in its House's own
   scene, tinted with the House's colour, its sigil big and faint behind the words. The scene and sigil come from
   --house-scene / --house-sigil (set from art); without them it's the tint over the wall. Darkened hard so text reads. ---------- */
#panel:is([class*='house-'], :has(> .house-line)) { --house-tint: 120, 140, 160; }
#panel:is(.house-life, :has(> .house-line.house-life)) { --house-tint: 105, 139, 163; }
#panel:is(.house-coin, :has(> .house-line.house-coin)) { --house-tint: 224, 192, 112; }
#panel:is(.house-war, :has(> .house-line.house-war)) { --house-tint: 176, 53, 60; }
#panel:is(.house-shadow, :has(> .house-line.house-shadow)) { --house-tint: 138, 132, 160; }
#panel:is(.house-death, :has(> .house-line.house-death)) { --house-tint: 200, 192, 176; }
#panel:is(.house-paths, :has(> .house-line.house-paths)) { --house-tint: 124, 176, 184; }
#panel:is(.house-sorcery, :has(> .house-line.house-sorcery)) { --house-tint: 44, 232, 245; }
.encounter-panel #panel:is([class*='house-'], :has(> .house-line)) {
  background:
    linear-gradient(to bottom, rgba(var(--house-tint), .16), rgba(10, 12, 15, .80) 34%, rgba(8, 10, 12, .9) 70%, rgba(6, 8, 10, .95)),
    var(--house-sigil, none) 50% 46% / min(78%, 300px) auto no-repeat,
    linear-gradient(rgba(6, 8, 10, .55), rgba(6, 8, 10, .55)),
    var(--house-scene, none) 50% 0 / cover no-repeat,
    var(--px-wall) 0 0 / 64px 64px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .85), 0 0 60px rgba(var(--house-tint), .1), inset 0 0 40px rgba(var(--house-tint), .06);
}
/* text over a picture: a touch of shadow so every word holds */
.encounter-panel #panel:is([class*='house-'], :has(> .house-line)) :is(.text, .beat, .house-line) { text-shadow: 1px 1px 0 rgba(0, 0, 0, .8); }

/* the House line: sigil, the House's name in its colour, then what it means in words ('those who see the way') */
#panel .house-line { flex-wrap: wrap; gap: 4px 6px; font-family: var(--pix); font-size: 16px; line-height: 1.25; color: rgb(var(--house-tint, 200, 200, 200)); }
#panel .house-line .house-name { font-weight: 700; }
#panel .house-line .house-meaning { color: #b4bcc2; font-size: 14px; }
@media (max-width: 520px) { #panel .house-line { font-size: 15px; } #panel .house-line .house-meaning { font-size: 14px; } }

/* chip words: a chip says what it is ('+Soul-lit · better odds, next 2 draws', 'Seer +1 💎') */
.fx .fx-word { font-family: var(--pix); }
.fx .fx-what { color: #b4bcc2; font-size: .9em; }
.fx .fx-what::before { content: ' · '; color: #6c7a84; }
.fx .fx-from { color: #8fd0ff; margin-right: 3px; }

/* High Tide: dark water risen at the panel's foot, still. A sticky strip after the content, so it stays at the
   visible bottom while the panel scrolls; faint where it meets the buttons, clicks go through */
body:is(.high-tide, :has(#moon.intensity-4)) .encounter-panel #panel::after {
  content: ''; display: block; position: sticky; bottom: -16px; z-index: 2; height: 34px; margin: -16px -14px -16px; pointer-events: none;
  background:
    var(--tide-water, var(--px-tide-water, linear-gradient(transparent, transparent))) 0 100% / 64px 24px repeat-x,
    linear-gradient(to top, transparent 14px, rgba(140, 200, 240, .35) 14px, rgba(140, 200, 240, .35) 16px, transparent 16px) 0 0 / 100% 100% no-repeat,
    linear-gradient(to top, rgba(8, 34, 60, .9), rgba(16, 60, 100, .6) 14px, rgba(30, 90, 140, .15) 26px, transparent 34px) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}

/* ---------- numbers and tier words that read: the pixel face at its regular weight (bold closes C into O and
   blurs 1/7, 3/8), bigger, light on a dark pill, good green, bad red ---------- */
.rarity-word { font-weight: 400; text-transform: none; letter-spacing: 0; }
.roll-card > .rarity-word, .joins-panel .rarity-word { font-size: 15px; }
.chance-tally { gap: 12px; font-weight: 400; font-size: 24px; line-height: 1; }
.chance-tally :is(.tally-good, .tally-bad) { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 5px; border: 2px solid; text-shadow: 1px 1px 0 #000; box-shadow: 0 3px 0 var(--void); }
.chance-tally .tally-good { color: #7ef09a; background: #0a160e; border-color: #2f7a46; }
.chance-tally .tally-bad { color: #ff7d86; background: #1a0a0d; border-color: #8a2a34; }
.fx-odds, .choice .fx-odds { font-weight: 400; font-size: 16px; color: #e8eef2; background: #0b0f12; }
.fx-odds :is(.odds-good, .odds-bad) { font-weight: 400; }
.odds-good, .odds-good .odds-n { color: #7ef09a; }
.odds-bad, .odds-bad .odds-n { color: #ff7d86; }
.odds-n { font-family: var(--pix); font-weight: 400; font-size: 1.15em; }
/* the small good/bad card pips beside each count */
.odds-pips { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.odds-pips i { display: block; width: 5px; height: 8px; border: 1px solid #000; }
.odds-pips .pip-good { background: #4fd072; } .odds-pips .pip-bad { background: #e0505a; }
.chance-tally .odds-pips i { width: 7px; height: 11px; }
@media (max-width: 520px) { .chance-tally { font-size: 22px; } .fx-odds, .choice .fx-odds { font-size: 15px; } }
/* engine's odds parts: '3 ✔' green, '2 ✖' red, a pip per card; a Triumph a brighter, taller pip, a Disaster a darker one */
.odds { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.odds :is(.odds-good, .odds-bad) { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.odds-pips i.pip { display: block; width: 5px; height: 8px; border: 1px solid #000; border-radius: 0; }
.odds-pips i.pip-good { background: #4fd072; } .odds-pips i.pip-bad { background: #e0505a; }
.odds-pips i.pip-triumph { background: #b8ffc8; box-shadow: 0 0 0 1px #4fd072; }
.odds-pips i.pip-disaster { background: #7a1820; box-shadow: 0 0 0 1px #e0505a; }
.chance-tally .odds-pips i.pip { width: 6px; height: 10px; }
.chance-tally .odds { gap: 12px; }
.push-left .odds-n { font-size: 1.1em; }
/* the reel: the tier's gem above its word */
.reel-tile { flex-direction: column; gap: 2px; width: 64px; height: 64px; }
.reel-tile :is(img, canvas, svg) { width: 34px; height: 34px; }
.reel-tile .reel-word { font-family: var(--pix); font-weight: 400; font-size: 11px; line-height: 1; color: var(--rar-hi); letter-spacing: 0; }
@media (max-width: 380px) { .reel-tile { width: 60px; height: 60px; } .reel-tile :is(img, canvas, svg) { width: 30px; height: 30px; } .reel-tile .reel-word { font-size: 10px; } }
.comp-guard-died { color: #e8868c; font-style: italic; }

/* ---------- the Gloaming: the tide strip is now the light ----------
   #moon.moon-<0..7> = Full Day, Afternoon, Late Light, Dusk, Deep Night, Small Hours, Grey Dawn, Morning;
   .intensity-<0..4> sets how dark. A thin meter along the strip's foot runs day gold to Deep Night indigo,
   a pale notch where the light stands. Floor 3, the Nightward (body.fae), stays twilight violet. */
#moon { position: relative; left: auto; top: auto; --lp: 0%; --sky: 240, 210, 130; }
#moon.intensity-1 { --lp: 25%; } #moon.intensity-2 { --lp: 50%; } #moon.intensity-3 { --lp: 75%; } #moon.intensity-4 { --lp: 100%; }
#moon.moon-0 { --sky: 244, 214, 128; } #moon.moon-1 { --sky: 240, 200, 120; } #moon.moon-2 { --sky: 236, 170, 96; }
#moon.moon-3 { --sky: 210, 140, 170; } #moon.moon-4 { --sky: 136, 142, 255; } #moon.moon-5 { --sky: 120, 132, 220; }
#moon.moon-6 { --sky: 184, 190, 204; } #moon.moon-7 { --sky: 240, 220, 160; }
#moon, #moon.intensity-3, #moon.intensity-4, #moon.moon-3, #moon.moon-4, #moon.moon-5 {
  background: linear-gradient(to bottom, rgba(var(--sky), .14), rgba(var(--sky), .03) 60%, transparent), linear-gradient(to bottom, #0c0e12, #07080b);
  box-shadow: none; }
#moon.intensity-4 { background: linear-gradient(to bottom, rgba(60, 56, 150, .3), rgba(20, 18, 60, .2) 60%, transparent), linear-gradient(to bottom, #07071a, #030309); }
#moon::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(#fff6dc, #fff6dc) var(--lp) 0 / 4px 100% no-repeat,
    linear-gradient(to right, #e8c060, #e09a50 30%, #b0709a 55%, #5a50b8 80%, #2a2470); opacity: .85; }
#moon .moon-name, #moon.moon-4 .moon-name, #moon.intensity-4 .moon-name { color: rgb(var(--sky)); text-shadow: 1px 1px 0 #000; }
#moon img.px { filter: drop-shadow(0 0 4px rgba(var(--sky), .35)); }
#moon::after { font-weight: 400; }
#moon.intensity-0::after { content: 'Calm'; color: #e8d49a; text-shadow: none; }
#moon.intensity-1::after { content: 'Uneasy'; color: #e0c48a; text-shadow: none; }
#moon.intensity-2::after { content: 'Restless'; color: #d8a07a; text-shadow: none; }
#moon.intensity-3::after { content: 'Grim'; color: #c8a0d8; text-shadow: none; }
#moon.intensity-4::after { content: 'Deadly'; color: #b8bcff; text-shadow: none; }
@keyframes moon-turn { 30% { scale: 1.12; box-shadow: 0 0 24px rgba(var(--sky), .6); } }
@media (max-width: 520px) { #hud:has(> #moon:not(.hidden)) #moon { padding-bottom: 4px; } #hud:has(> #moon:not(.hidden)) #moon::before { height: 2px; } }
/* the Nightward floor: twilight that never turns */
body:is(.fae, [data-look='table'], [data-look='riverboat']) #moon { --sky: 196, 160, 240;
  background: linear-gradient(to bottom, rgba(150, 100, 210, .22), rgba(60, 30, 100, .12) 60%, transparent), linear-gradient(to bottom, #0e0a16, #07050c); }
body:is(.fae, [data-look='table'], [data-look='riverboat']) #moon::before {
  background: linear-gradient(#f4e8ff, #f4e8ff) var(--lp) 0 / 4px 100% no-repeat, linear-gradient(to right, #c8a0e8, #9070c8 50%, #3a2470); }

/* Deep Night on the table: the dark comes down from above, indigo, a few still stars (no crimson, no water) */
body.moon-full { --glow: rgba(70, 60, 180, .12); }
body.moon-full #table::before { background:
  radial-gradient(1px 1px at 12% 8%, #dfe4ff 99%, transparent), radial-gradient(1px 1px at 31% 15%, #b8c0ff 99%, transparent),
  radial-gradient(1px 1px at 57% 6%, #dfe4ff 99%, transparent), radial-gradient(1px 1px at 78% 13%, #c8d0ff 99%, transparent),
  radial-gradient(1px 1px at 91% 4%, #b8c0ff 99%, transparent), radial-gradient(1px 1px at 44% 21%, #a8b0f0 99%, transparent),
  linear-gradient(to bottom, rgba(8, 8, 30, .82) 0, rgba(14, 12, 48, .5) 16%, transparent 40%),
  linear-gradient(to top, rgba(4, 4, 14, .7) 0, transparent 26%); }
body:is(.fae, [data-look='table'], [data-look='riverboat']).moon-full #table::before { filter: hue-rotate(25deg); }

/* the panel's foot at Deep Night: night pooled at the bottom, three still stars and the art's treeline strip */
body:is(.high-tide, .deep-night, :has(#moon.intensity-4)) .encounter-panel #panel::after {
  background:
    radial-gradient(1px 1px at 18% 40%, #dfe4ff 99%, transparent), radial-gradient(1px 1px at 52% 62%, #b8c0ff 99%, transparent),
    radial-gradient(1px 1px at 83% 48%, #dfe4ff 99%, transparent),
    var(--px-tide-night, linear-gradient(transparent, transparent)) 0 100% / 64px 24px repeat-x,
    linear-gradient(to top, rgba(10, 8, 40, .92), rgba(30, 26, 90, .55) 16px, rgba(60, 50, 150, .12) 28px, transparent 34px); }

/* sunward and nightward on face-down road cards: nightward = a pale crescent moon, sunward = a gold sun.
   (.ground-low = duskward, .ground-high = dawnward until the engine renames them .lean-dusk / .lean-dawn) */
.face.back .back-ground:is(.ground-low, .lean-dusk, .lean-nightward) { border-color: #4a428a; background: rgba(8, 6, 24, .8); }
.face.back .back-ground:is(.ground-low, .lean-dusk, .lean-nightward)::before { inset: 1px 3px 1px 2px; clip-path: none; background: none; border-radius: 50%;
  box-shadow: inset -3px -1px 0 0 #d0d4ff; }
.face.back .back-ground:is(.ground-high, .lean-dawn, .lean-sunward) { border-color: #8a6a2a; background: rgba(24, 16, 4, .8); }
.face.back .back-ground:is(.ground-high, .lean-dawn, .lean-sunward)::before { inset: 1px; clip-path: none;
  background: radial-gradient(circle, #ffe08a 0 30%, transparent 33% 45%, #d8a848 47% 56%, transparent 58%); }
.face.back .back-ground:is(.lean-dusk, .lean-dawn, .lean-nightward, .lean-sunward) { position: absolute; font-size: 0; color: transparent; }

/* a night card (was drowned): the dark stands over its lower half, a soft violet edge, two still stars */
#board .card:is(.drowned, .night) .face { box-shadow: 0 0 0 2px rgba(120, 110, 230, .45), 0 0 14px rgba(70, 60, 190, .3); }
#board .card:is(.drowned, .night) .face.front::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44%; pointer-events: none; z-index: 2;
  clip-path: none;
  background: radial-gradient(1px 1px at 22% 50%, #dfe4ff 99%, transparent), radial-gradient(1px 1px at 70% 30%, #c8d0ff 99%, transparent),
    linear-gradient(to bottom, rgba(170, 150, 255, .8) 0 2px, rgba(30, 24, 90, .45) 2px, rgba(8, 6, 30, .72)); }

/* the Gloaming's Houses: Lantern Troupes (warm amber), Tallyhouses (gold), Quiet Blades (steel-red), the Unlit's shadow
   (frost blue-grey), the Nightward (violet-black), the Milestones (grey stone), the Collegium (rune-blue) */
.house-life { --hc: #e29a50; } .house-war { --hc: #b8606a; } .house-shadow { --hc: #9ab4c8; } .house-death { --hc: #9a80c8; } .house-paths { --hc: #aab4a2; }
.face.back.house-life { outline-color: #d08a40; } .face.back.house-war { outline-color: #9a4850; } .face.back.house-shadow { outline-color: #7894aa; }
.face.back.house-death { outline-color: #5a3e80; } .face.back.house-paths { outline-color: #8a9484; }
.face.back.house-life .back-house, .face.back.has-cat.house-life .cat-house { color: #f4c088; }
.face.back.house-war .back-house, .face.back.has-cat.house-war .cat-house { color: #e8aab0; }
.face.back.house-shadow .back-house, .face.back.has-cat.house-shadow .cat-house { color: #d4e4f0; }
.face.back.house-death .back-house, .face.back.has-cat.house-death .cat-house { color: #c8b4ec; }
.face.back.house-paths .back-house, .face.back.has-cat.house-paths .cat-house { color: #d4dccc; }
#panel:is(.house-life, :has(> .house-line.house-life)) { --house-tint: 226, 154, 80; }
#panel:is(.house-war, :has(> .house-line.house-war)) { --house-tint: 184, 96, 106; }
#panel:is(.house-shadow, :has(> .house-line.house-shadow)) { --house-tint: 154, 180, 200; }
#panel:is(.house-death, :has(> .house-line.house-death)) { --house-tint: 150, 120, 200; }
#panel:is(.house-paths, :has(> .house-line.house-paths)) { --house-tint: 170, 180, 162; }
.face.back .back-ground:is(.lean-dusk, .lean-dawn, .lean-nightward, .lean-sunward) { width: 18px; height: 18px; }
@media (max-width: 520px) { .face.back .back-ground:is(.lean-dusk, .lean-dawn, .lean-nightward, .lean-sunward) { width: 16px; height: 16px; } }

/* ---------- the fate deck (DESIGN.md 'The fate deck'): the outcomes face up, gathered into a deck, riffled, drawn.
   Engine sets one phase class on .fate-deck; for gather it puts --gx/--gy (px to the pile's centre) on each card.
   Calm: every motion runs once and stops; nothing loops or blinks ---------- */
.fate-deck { --fd-w: 46px; --fd-h: 64px; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.fd-spread { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; padding: 2px; }
.fd-card { position: relative; width: var(--fd-w); height: var(--fd-h); flex: 0 0 auto; box-sizing: border-box;
  border: 2px solid var(--rar, #5a6268); background: var(--rar-bg, #12161a); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 2px;
  font-family: var(--pix); font-weight: 400; font-size: 10px; line-height: 1.05; color: var(--rar-hi, var(--bone)); text-align: center;
  box-shadow: 0 2px 0 var(--void), 0 0 8px var(--rar-glow, transparent); image-rendering: pixelated;
  transition: transform .45s cubic-bezier(.5, 0, .3, 1), opacity .45s ease, box-shadow .3s ease; }
.fd-card.rarity-fated { box-shadow: inset 0 0 0 1px var(--rar-thread), 0 2px 0 var(--void), 0 0 10px var(--rar-glow); }
.fd-card .fd-icon { width: 24px; height: 24px; font-size: 18px; line-height: 24px; }
.fd-card .fd-word { max-width: 100%; overflow-wrap: normal; word-break: keep-all; hyphens: none; letter-spacing: -.02em; }
/* gamble threads: success green, failure red, Triumph and Disaster brighter with a gold or blood edge */
.fd-card.good { --rar: #2f7a48; --rar-hi: #9ff0b4; --rar-bg: #0a1810; }
.fd-card.bad { --rar: #8a2a30; --rar-hi: #ffa0a6; --rar-bg: #1a0a0c; }
.fd-card.triumph { --rar: #4fd072; --rar-hi: #d8ffe2; --rar-bg: #0c2014; box-shadow: inset 0 0 0 1px #c8a050, 0 2px 0 var(--void), 0 0 10px rgba(79, 208, 114, .35); }
.fd-card.disaster { --rar: #e0505a; --rar-hi: #ffd0d4; --rar-bg: #240a0e; box-shadow: inset 0 0 0 1px #3a0a10, 0 2px 0 var(--void), 0 0 10px rgba(224, 80, 90, .35); }

/* a card cut from the spread fades and sinks; a card added slides in from the right, once */
.fd-card.fd-cut { opacity: 0; transform: translateY(10px) scale(.85); filter: grayscale(1); pointer-events: none; transition: opacity .4s ease, transform .4s ease, filter .4s; }
.fd-card.fd-add { animation: fd-add .45s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes fd-add { from { opacity: 0; transform: translateX(28px) rotate(6deg); box-shadow: 0 0 14px rgba(143, 208, 255, .7); } to { opacity: 1; transform: none; } }
/* a cut on a roll that leaves copies: the card flinches and stays */
.fd-card.fd-hit { animation: fd-hit .45s ease-out both; }
@keyframes fd-hit { 0% { transform: none; } 20% { transform: translate(-3px, 2px) rotate(-4deg) scale(.95); opacity: .6; } 55% { transform: translate(2px, 0) rotate(2deg); } 100% { transform: none; opacity: 1; } }
/* a roll hides its odds: no count on the pile */
.fate-deck.fd-hidden-odds .fd-count { display: none; }
/* cut mode: the cards you may take out are outlined in rune-blue */
.fate-deck:is(.fd-cutting, .fd-choosing-cut) .fd-spread .fd-card:not(.fd-cut) { cursor: pointer; outline: 1px dashed rgba(143, 208, 255, .6); outline-offset: 2px; }
.fate-deck:is(.fd-cutting, .fd-choosing-cut) .fd-spread .fd-card:not(.fd-cut):hover { outline-style: solid; outline-color: #8fd0ff; }

/* gather: one after another (--gd), each card rises along an arc (--gmx/--gmy, the top) and drops onto the pile (--gx/--gy),
   turning a little, gone as it lands */
.fate-deck.fd-gathering .fd-spread .fd-card:not(.fd-cut) { animation: fd-gather .4s cubic-bezier(.45, 0, .35, 1) var(--gd, 0ms) both; transition: none; }
@keyframes fd-gather {
  0% { transform: none; opacity: 1; }
  50% { transform: translate(var(--gmx, 0), var(--gmy, 0)) rotate(-6deg) scale(1.04); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  88% { opacity: 1; }
  100% { transform: translate(var(--gx, 0), var(--gy, 0)) rotate(2deg) scale(.9); opacity: 0; } }
/* once gathered, the spread stays as the deck's contents: faded in again, dimmer, still (a cut or add still shows) */
.fate-deck:is(.fd-deck, .fd-riffling, .fd-drawn) .fd-spread .fd-card:not(.fd-cut, .fd-add) { transition: opacity .3s ease; animation: fd-contents .4s ease both; }
@keyframes fd-contents { from { opacity: 0; } to { opacity: .6; } }
.fate-deck.fd-cutting .fd-spread .fd-card:not(.fd-cut) { animation: none; opacity: 1; }

/* the table under the pile: pile, drawn slot and the tools side by side */
.fd-table { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.fd-pile, .fd-card .face.back, .fd-flip .face.back { --fd-back: var(--px-deck-back, none); }
.fd-pile { position: relative; width: calc(var(--fd-w) + 10px); height: calc(var(--fd-h) + 12px); padding: 0; border: 0; background: none; cursor: pointer; }
.fd-pile::before, .fd-pile::after, .fd-pile .fd-top { content: ''; position: absolute; inset: 0 6px 6px 0; border-radius: 4px; border: 2px solid #2d648c;
  background: var(--fd-back) center / cover no-repeat, radial-gradient(circle at 50% 50%, rgba(143, 208, 255, .25) 0 5px, transparent 6px),
    repeating-linear-gradient(45deg, #0e1a24 0 4px, #0b141c 4px 8px); box-shadow: 0 2px 0 var(--void); }
.fd-pile::before { transform: translate(4px, 4px); filter: brightness(.6); }
.fd-pile::after { transform: translate(2px, 2px); filter: brightness(.8); }
.fd-pile .fd-top { z-index: 1; box-shadow: 0 0 0 1px rgba(143, 208, 255, .2), 0 2px 0 var(--void); transition: transform .2s ease; }
.fd-pile:hover .fd-top, .fd-pile:focus-visible .fd-top { transform: translateY(-3px); box-shadow: 0 0 0 1px #8fd0ff, 0 0 10px rgba(143, 208, 255, .35); }
.fd-pile:disabled { cursor: default; filter: saturate(.4) brightness(.7); }
.fd-pile:disabled .fd-top { transform: none; }
.fd-count { position: absolute; z-index: 2; right: 0; bottom: 0; min-width: 18px; padding: 1px 4px; border-radius: 8px; background: #0b141c;
  border: 1px solid #2d648c; font-family: var(--pix); font-weight: 400; font-size: 12px; line-height: 14px; color: #cfe8ff; }

/* riffle: the pile parts into two halves (split), they bow into a bridge leaning together while the cards fall in,
   then square back into one pile (merge) */
.fd-pile .fd-half { position: absolute; inset: 0 6px 6px 0; z-index: 2; border-radius: 4px; border: 2px solid #2d648c; opacity: 0; pointer-events: none;
  background: var(--fd-back) center / cover no-repeat, repeating-linear-gradient(45deg, #0e1a24 0 4px, #0b141c 4px 8px); box-shadow: 0 2px 0 var(--void);
  transition: transform .15s cubic-bezier(.3, .7, .4, 1.2); }
.fd-pile .fd-half-a { transform-origin: 100% 100%; }
.fd-pile .fd-half-b { transform-origin: 0 100%; filter: brightness(.85); }
.fate-deck.fd-riffling .fd-pile .fd-half { opacity: 1; }
.fate-deck.fd-riffling .fd-pile .fd-top { opacity: 0; }
.fate-deck.fd-riffle-split .fd-pile .fd-half { transition: transform .18s cubic-bezier(.3, .7, .4, 1); }
.fate-deck.fd-riffle-split .fd-pile .fd-half-a { transform: translate(-16px, -3px) rotate(-7deg); }
.fate-deck.fd-riffle-split .fd-pile .fd-half-b { transform: translate(16px, 0) rotate(7deg); }
.fate-deck.fd-riffle-bridge .fd-pile .fd-half { transition: transform .22s ease-in-out; }
.fate-deck.fd-riffle-bridge .fd-pile .fd-half-a { transform: translate(-6px, -8px) rotate(9deg) scaleY(.94); }
.fate-deck.fd-riffle-bridge .fd-pile .fd-half-b { transform: translate(6px, -8px) rotate(-9deg) scaleY(.94); }
.fate-deck.fd-riffle-merge .fd-pile .fd-half { transition: transform .15s cubic-bezier(.3, .7, .4, 1.3); transform: none; }

/* the drawn card: slides off the pile and flips face up */
.fd-draw-slot { width: var(--fd-w); height: var(--fd-h); perspective: 400px; }
.fd-draw-slot:has(> :nth-child(2)) { width: auto; display: flex; gap: 6px; }
.fd-draw-slot > .fd-card { cursor: pointer; animation: fd-add .35s cubic-bezier(.2, .8, .3, 1) both; }
.fd-draw-slot > .fd-card:nth-child(2) { animation-delay: .12s; }
.fd-draw-slot > .fd-card:hover { box-shadow: 0 0 0 1px #8fd0ff, 0 0 10px rgba(143, 208, 255, .4); }
.fd-draw-slot:empty { border: 1px dashed rgba(143, 208, 255, .2); border-radius: 4px; }
/* a peek: the card keeps its size, Put back / Bury sit under it */
.fd-draw-slot > .fd-flip { width: var(--fd-w); height: var(--fd-h); flex: none; }
.fd-draw-slot:has(> .fd-peeked) { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fd-peek-row { display: flex; gap: 4px; }
.fd-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; --fd-from: calc(-1 * var(--fd-w) - 14px);
  transform: translateX(var(--fd-from)); transition: transform .15s ease-out; }
/* the draw: on the pile, the top card lifts, slides over toward you (larger), a Fated one holds a beat, then turns in 3D,
   overshooting a little and settling. A roll's card glows in its rarity's colour from the lift (a glow layer that only fades in) */
.fd-flip.fd-lift { transform: translateX(var(--fd-from)) translateY(-10px) rotate(-3deg) scale(1.04); transition: transform .15s ease-out; }
.fd-flip.fd-slide, .fd-flip.fd-hold { transform: translateY(-6px) scale(1.14); transition: transform .2s cubic-bezier(.25, .8, .35, 1); }
.fd-flip.fd-turn { transform: none; animation: fd-turn .35s cubic-bezier(.3, .6, .35, 1) both; transition: none; }
@keyframes fd-turn { 0% { transform: translateY(-6px) scale(1.14) rotateY(0); } 65% { transform: translateY(-2px) scale(1.06) rotateY(196deg); }
  100% { transform: rotateY(180deg); } }
.fd-flip::after { content: ''; position: absolute; inset: -2px; border-radius: 6px; pointer-events: none; opacity: 0; transform: translateZ(-1px);
  box-shadow: 0 0 0 2px var(--fd-glow, transparent), 0 0 14px 2px var(--fd-glow, transparent); transition: opacity .3s ease; }
.fd-flip.fd-glow { --fd-glow: rgba(180, 188, 194, .45); }
.fd-flip.fd-glow.glow-uncommon { --fd-glow: rgba(143, 208, 255, .7); }
.fd-flip.fd-glow.glow-rare { --fd-glow: rgba(244, 210, 122, .75); }
.fd-flip.fd-glow.glow-fated { --fd-glow: rgba(230, 192, 238, .85); }
.fd-flip.fd-glow:is(.fd-lift, .fd-slide, .fd-hold, .fd-turn)::after { opacity: 1; }
.fd-flip.fd-glow.fd-hold::after { transition-duration: .6s; box-shadow: 0 0 0 2px #c8a050, 0 0 22px 4px var(--fd-glow); }
/* a Fated card: a ring of gold light bursts out as it turns (once) */
.fd-flip.glow-fated::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(244, 210, 122, .55) 0 30%, rgba(230, 192, 238, .25) 45%, transparent 68%); transform: translateZ(-2px) scale(.5); }
.fd-flip.glow-fated.fd-turn::before { animation: fd-flare .7s ease-out both; }
@keyframes fd-flare { 0% { opacity: 0; transform: translateZ(-2px) scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateZ(-2px) scale(1.7); } }
.fd-flip > .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 4px; }
.fd-flip > .face.back { outline: none; border: 2px solid #2d648c; background: var(--fd-back) center / cover no-repeat, repeating-linear-gradient(45deg, #0e1a24 0 4px, #0b141c 4px 8px); }
.fd-flip > .face.front { transform: rotateY(180deg); }
.fd-flip > .face.front.fd-card { width: 100%; height: 100%; background: var(--rar-bg, #12161a); color: var(--rar-hi, var(--bone)); padding: 3px 2px;
  justify-content: center; box-shadow: 0 2px 0 var(--void), 0 0 8px var(--rar-glow, transparent); }
/* a peeked card lies half turned, rune-blue, until you keep it or bury it */
.fd-flip.fd-peeked { transform: none; animation: fd-peek .3s ease both; }
.fd-flip.fd-peeked > .face.front { box-shadow: 0 0 0 1px #8fd0ff, 0 0 10px rgba(143, 208, 255, .4); }
@keyframes fd-peek { from { transform: rotateY(0); } to { transform: rotateY(180deg) translateY(-6px); } }
.fd-flip.fd-buried { animation: fd-bury .35s ease-in both; }
@keyframes fd-bury { from { transform: rotateY(180deg); opacity: 1; } to { transform: translateX(calc(-1 * var(--fd-w) - 14px)) translateY(6px) rotateY(0); opacity: 0; } }

/* the manipulation tools beside the deck: small pixel buttons with their uses counted */
.fd-tools { display: flex; flex-direction: column; gap: 4px; }
.fd-tool { position: relative; display: flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 26px 3px 7px; border-radius: 4px; cursor: pointer;
  border: 1px solid #2d648c; background: #0b141c; color: #cfe8ff; font-family: var(--pix); font-weight: 400; font-size: 13px; text-align: left; }
.fd-tool:hover:not(:disabled), .fd-tool:focus-visible { border-color: #8fd0ff; box-shadow: 0 0 8px rgba(143, 208, 255, .3); }
.fd-tool .fd-uses { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-width: 16px; padding: 0 3px; border-radius: 7px;
  background: #16283a; color: #fff; font-size: 12px; line-height: 15px; text-align: center; }
.fd-tool:disabled { cursor: default; opacity: .45; filter: grayscale(.8); }
/* after a peek: put back or bury, small buttons under the peeked card */
.fate-deck :is(.fd-putback, .fd-bury) { min-height: 30px; padding: 3px 8px; border-radius: 4px; cursor: pointer; border: 1px solid #2d648c;
  background: #0b141c; color: #cfe8ff; font-family: var(--pix); font-weight: 400; font-size: 13px; }
.fate-deck .fd-bury { border-color: #5a50b8; color: #d8d0ff; }
.fate-deck :is(.fd-putback, .fd-bury):hover { border-color: #8fd0ff; box-shadow: 0 0 8px rgba(143, 208, 255, .3); }
.fd-tool.fd-active { border-color: #8fd0ff; background: #12243a; }

@media (max-width: 520px) {
  .fate-deck { --fd-w: 38px; --fd-h: 54px; gap: 8px; }
  .fd-spread { gap: 4px; }
  .fd-card { font-size: 8px; padding: 2px 1px; }
  .fd-card .fd-icon { width: 20px; height: 20px; font-size: 15px; line-height: 20px; }
  .fd-table { gap: 10px; }
  .fd-tools { flex-direction: row; flex-wrap: wrap; justify-content: center; flex-basis: 100%; }
  .fd-tool { min-height: 32px; font-size: 12px; padding-right: 24px; }
}
@media (max-width: 340px) { .fate-deck { --fd-w: 52px; --fd-h: 70px; } }
@media (prefers-reduced-motion: reduce) {
  .fd-card, .fd-card.fd-cut { transition-duration: .01s; }
  .fd-card.fd-add, .fd-flip, .fd-flip.fd-peeked, .fd-flip.fd-buried, .fd-flip.fd-turn, .fd-flip::before, .fd-card.fd-hit,
  .fate-deck.fd-gathering .fd-spread .fd-card { animation-duration: .01s !important; animation-delay: 0s !important; }
  .fd-flip, .fd-pile .fd-half { transition-duration: .01s !important; }
}

/* ---------- 360x640 polish: no words under 13px, taps 44px+, panels fit with less shrinking ---------- */
@media (max-width: 420px) {
  /* the HUD: the light's line and the floor line */
  .moon-next, #moon .moon-next, #hud:has(> #moon:not(.hidden)) #moon .moon-next { font-size: 13px; }
  .stat.floor, #hud:has(> #moon:not(.hidden)) .stat.floor { font-size: 13px; letter-spacing: -.3px; line-height: 1.1; }
  .item.mark-chip, #hud:has(> #moon:not(.hidden)) .mark-chip { font-size: 13px; }
  /* chips in the HUD: a 44px finger target around the 24px chip */
  #hud .item { position: relative; }
  #hud .item::after { content: ''; position: absolute; inset: -10px -2px; }
  #mute { width: 44px; height: 44px; right: 4px; bottom: 4px; font-size: 18px; }
  /* house names under board cards ran into their neighbours: the card's colour says the House; the panel names it */
  #board .back-cat .cat-house { display: none; }
  /* buttons: at least 44px tall; the "more" ellipsis a 44px target without moving the text */
  #panel .choice, .fight-panel .end-turn, .fight-panel .flee { min-height: 44px; }
  .text-more { min-width: 44px; min-height: 44px; margin: -14px auto -6px; }
  /* the Aspect card */
  .class-rank, .attr, .tier-rank, .tier-uses { font-size: 13px; }
  /* fights */
  .fighter-name, .intent-text, .hp-text { font-size: 13px; }
  .fcard-name, .fcard-text, .hand:has(> .fcard:nth-child(5)) .fcard-name, .hand:has(> .fcard:nth-child(6)) .fcard-name,
  .hand:has(> .fcard:nth-child(6)) .fcard-text { font-size: 13px; letter-spacing: -.4px; }
  .fcard-text { line-height: 1.05; }
  /* the fate deck: cards big enough for a 13px word and a fingertip */
  .fate-deck { --fd-w: 58px; --fd-h: 78px; }
  .fate-deck .fd-card { font-size: 13px; padding: 3px 1px; }
  .fd-card .fd-icon { width: 28px; height: 28px; font-size: 20px; line-height: 28px; }
  .fd-card .fd-word { letter-spacing: -.06em; }
  .fd-tool { min-height: 44px; font-size: 13px; }
  .fd-uses, .fate-deck :is(.fd-putback, .fd-bury) { font-size: 13px; }
  .fate-deck :is(.fd-putback, .fd-bury) { min-height: 44px; padding: 3px 12px; }
  /* small labels that slipped under 13px */
  .soul-rank, .item.sea-count, .ench-tag, .fighter-rank, small.fighter-rank, .fx-what { font-size: 13px; }
  #board .card-name { font-size: max(12px, calc(var(--cw) * .13)); letter-spacing: -.3px; }
  .ability-btn.on-board { min-height: 44px; }
  .over-panel .mini-card .card-name, .over-panel .collection-grid .mini-card .card-name { font-size: 13px; letter-spacing: -.3px; }
  .over-panel .stats, .tn-name, .tn-deed { font-size: 13px; }
  .fd-count { font-size: 13px; }
}
/* short phones: a smaller picture window and tighter text, so fewer panels shrink */
@media (max-width: 420px) and (max-height: 700px) {
  .panel-art { width: 100px; height: 112px; padding-bottom: 6px; margin-bottom: 4px; }
  .panel-art img.px, .panel-art .item-icon img.px { width: 84px; height: 84px; }
  #panel .text { margin-top: 8px; margin-bottom: 8px; }
  /* four or more choices: tighter buttons (still 44px+) */
  #panel:has(.choices > .choice:nth-child(4)) .choices { gap: 5px; margin-top: 6px; }
  #panel:has(.choices > .choice:nth-child(4)) .choice { padding: 4px 10px; row-gap: 2px; }
  #panel:has(.choices > .choice:nth-child(4)) .choice .needs { font-size: 13px; line-height: 1.1; }
  /* the end screen */
  .over-panel #panel h2 { margin: 0 0 4px; }
  .over-panel #panel .text { font-size: 15px; line-height: 1.3; margin: 4px 0 6px; }
  .over-panel .unlocks-title { margin: 6px 0 2px; }
  .over-panel .collection-grid { margin: 4px 0 6px; }
}

/* the Gloaming's first screen: the title scene (the Glare, the Nightward, the Mile Road, the Spell's mark), the Spell's mark on the rule */
.title-panel #panel::before { width: min(256px, 92%); height: auto; aspect-ratio: 2 / 1; margin: -4px auto 0;
  background: var(--px-title) 50% 50% / 100% 100% no-repeat; image-rendering: pixelated; border: 3px solid #181425; border-radius: 2px;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .7)); box-shadow: 0 0 0 1px #3a4466; }
.title-panel #panel h1::after { background: var(--px-lich) 50% 50% / 20px 20px no-repeat,
  linear-gradient(to right, transparent, #feae34 25%, transparent 44%, transparent 56%, #3a4466 75%, transparent) 50% 50% / 100% 2px no-repeat; }

/* the encounter's title on its House's nameplate (9-slice pixel plaques: wagon board, brass, iron, frosted tin, black glass, stone, copper) */
#panel[class*="house-"] > h2 { width: fit-content; max-width: calc(100% - 8px); margin: 6px auto 4px; padding: 3px 14px 4px; box-sizing: border-box;
  border-style: solid; border-color: transparent; border-width: 12px; image-rendering: pixelated; line-height: 1.05; }
#panel.house-life > h2 { border-image: var(--px-plate-life) 6 fill / 12px stretch; }
#panel.house-coin > h2 { border-image: var(--px-plate-coin) 6 fill / 12px stretch; }
#panel.house-war > h2 { border-image: var(--px-plate-war) 6 fill / 12px stretch; }
#panel.house-shadow > h2 { border-image: var(--px-plate-shadow) 6 fill / 12px stretch; }
#panel.house-death > h2 { border-image: var(--px-plate-death) 6 fill / 12px stretch; }
#panel.house-paths > h2 { border-image: var(--px-plate-paths) 6 fill / 12px stretch; }
#panel.house-sorcery > h2 { border-image: var(--px-plate-sorcery) 6 fill / 12px stretch; }
@media (max-width: 480px) { #panel[class*="house-"] > h2 { border-width: 8px; padding: 2px 8px 3px; }
  #panel[class*="house-"] > h2 { border-image-width: 8px; } }

/* the kind word on a face-down card sits on a small pixel ribbon of its colour */
.face.back.has-cat .back-cat .cat-word { border-style: solid; border-color: transparent; border-width: 3px 8px; padding: 1px 3px 2px; image-rendering: pixelated; color: #fff8e8; }
.face.back.cat-heal .cat-word, .face.back.cat-rest .cat-word { border-image: var(--px-ribbon-heal) 3 8 fill / 3px 8px stretch; }
.face.back.cat-fight .cat-word, .face.back.cat-danger .cat-word { border-image: var(--px-ribbon-fight) 3 8 fill / 3px 8px stretch; }
.face.back.cat-trade .cat-word, .face.back.cat-shop .cat-word { border-image: var(--px-ribbon-trade) 3 8 fill / 3px 8px stretch; }
.face.back.cat-gamble .cat-word { border-image: var(--px-ribbon-gamble) 3 8 fill / 3px 8px stretch; }
.face.back.cat-gold .cat-word, .face.back.cat-item .cat-word { border-image: var(--px-ribbon-gold) 3 8 fill / 3px 8px stretch; }
.face.back.cat-mystery .cat-word, .face.back.cat-other .cat-word { border-image: var(--px-ribbon-mystery) 3 8 fill / 3px 8px stretch; }
.face.back.cat-boss .cat-word { border-image: var(--px-ribbon-boss) 3 8 fill / 3px 8px stretch; }
.face.back.cat-citadel .cat-word { border-image: var(--px-ribbon-citadel) 3 8 fill / 3px 8px stretch; }
@media (max-width: 420px) { .face.back.has-cat .back-cat .cat-word { border-width: 3px 5px; border-image-width: 3px 5px; padding: 1px; } } /* narrow card backs: 'Gamble' fits */

/* Monogram on phones: the fate card word at its own 16 px grid (one of its pixels = 1 CSS px), so "Disaster" fits a 58 px card;
   HUD chips never spill */
@media (max-width: 420px) {
  .fate-deck .fd-card .fd-word, .fd-flip > .face.front.fd-card .fd-word { font-size: calc(16px / 1.5); letter-spacing: 0; }
  #hud .item.mark-chip { max-width: 46vw; white-space: normal; line-height: 1.05; }
}

/* ---------- roads behind the board cards (ui.js svg.roads > path.road): worn pixel tracks, quieter than the cards.
   Crisp (aliased) curves; walked = a pale lit track, open = brighter dashed ruts, ahead = dotted and fading (--ahead).
   Sunward roads (.road-high) warm, nightward (.road-low) cool. No glow, no motion. ---------- */
svg.roads path.road { fill: none; shape-rendering: crispEdges; stroke-linecap: butt; stroke-linejoin: miter;
  --road: #9aa8b6; --road-lit: #8fd0ff; --road-walked: #c4d2de; }
svg.roads path.road.road-high { --road: #b49a6a; --road-lit: #f0c878; --road-walked: #e6d2a8; }
svg.roads path.road.road-low { --road: #7080b0; --road-lit: #94b0ff; --road-walked: #a8b6e0; }
svg.roads path.road.warren { --road: #8a78b8; --road-lit: #c8b0ff; --road-walked: #c0b0e0; }
svg.roads path.road.taken { stroke: var(--road-walked); stroke-opacity: .42; stroke-width: 3px; stroke-dasharray: none; }
svg.roads path.road.open { stroke: var(--road-lit); stroke-opacity: .85; stroke-width: 3px; stroke-dasharray: 6 3; }
svg.roads path.road.ahead { stroke: var(--road); stroke-opacity: max(.08, calc(.42 - .11 * var(--ahead, 0))); stroke-width: 2px; stroke-dasharray: 2 4; }

/* ---------- your fight deck (DESIGN.md 'Your fight deck grows') ----------
   #deck-overlay / #pick-overlay / #gear-overlay over the screen, framed like the Soul Sea's; the deck as a grid of small
   cards, each with its level pips (.fcard-lv, art lvl_<n>) and where it came from (.fcard-from) */
:is(#deck-overlay, #pick-overlay, #gear-overlay) { position: fixed; inset: 0; z-index: 31; display: flex; align-items: center; justify-content: center;
  padding: 10px; background: radial-gradient(ellipse at 50% 40%, rgba(6, 11, 14, .78), rgba(2, 3, 4, .93)); }
:is(.deck-panel, .pick-panel, .gear-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, 18, 20, .96), rgba(8, 10, 11, .98)), var(--px-wall) 0 0 / 64px 64px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .85); padding: 10px 10px 12px; color: var(--bone); width: min(560px, 100%);
  max-height: calc(100dvh - 20px); overflow: auto; overscroll-behavior: contain; animation: panel-in .25s cubic-bezier(.2, .8, .2, 1); }
:is(.deck-panel, .pick-panel, .gear-panel) h2 { margin: 2px 0 6px; text-align: center; font-family: var(--goth); font-weight: 400; font-size: 24px;
  color: #8fd0ff; text-shadow: 2px 2px 0 var(--void); word-spacing: normal; }
:is(.deck-panel, .pick-panel) .choices { margin-top: 8px; }
.deck-title { margin: 14px 0 4px; font-family: var(--goth); font-weight: 400; font-size: 18px; color: #8fd0ff; text-shadow: 2px 2px 0 var(--void); word-spacing: normal; }

.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px 6px; margin: 6px 0; padding-top: 8px; }
.deck-grid .fcard { width: auto; flex: none; margin: 0; rotate: none; translate: none; aspect-ratio: 5 / 7.6; padding: 15px 3px 3px;
  justify-content: flex-start; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06), 0 3px 0 var(--void); cursor: default; animation: none; }
.deck-grid .fcard:disabled { opacity: 1; filter: none; }
.deck-grid .fcard:hover:not(.cant) { translate: none; scale: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06), 0 3px 0 var(--void); }
.deck-grid .fcard-art { height: auto; min-height: 0; flex: 0 0 34px; font-size: 22px; }
.deck-grid .fcard-art img.px { height: 32px; }
.deck-grid .fcard-name { font-size: 13px; line-height: 1; }
.deck-grid .fcard-text { font-size: 12px; line-height: 1.05; margin-top: 2px; flex: 1; }
.deck-grid .fcard-cost { top: -8px; left: -5px; width: 24px; height: 24px; font-size: 14px; }
/* where it came from: a small dark tag at the foot of the card */
.fcard-from { display: block; align-self: stretch; margin-top: auto; padding: 1px 2px; font-size: 11px; line-height: 1.1; color: var(--bone2);
  background: rgba(5, 4, 7, .6); border-top: 1px solid rgba(255, 255, 255, .08); white-space: normal; overflow-wrap: anywhere; }
/* the level: pips top right (art), or a numeral; a frame by level when art draws one (9-slice, 6 px) */
.fcard-lv { position: absolute; top: 2px; right: 3px; z-index: 2; display: flex; gap: 1px; font-family: var(--pix); font-size: 12px; line-height: 1; color: #f4d27a;
  text-shadow: 1px 1px 0 var(--void); pointer-events: none; }
.fcard-lv img.px { height: 8px; width: auto; }
.fcard { border-image: var(--lv-frame, none) 6 / 6px / 0 stretch; }
.fcard.lv-2 { box-shadow: inset 0 0 0 1px rgba(143, 208, 255, .35), 0 4px 0 var(--void); }
.fcard.lv-3 { box-shadow: inset 0 0 0 1px rgba(244, 210, 122, .5), 0 4px 0 var(--void); }

/* picking a card to lose or raise: the cards lift under your finger; lose = a red edge, raise = gold, with what it becomes */
.deck-grid.deck-picking .fcard { cursor: pointer; transition: translate .15s ease, box-shadow .15s ease; }
.deck-grid.deck-picking .fcard:hover, .deck-grid.deck-picking .fcard:focus-visible { translate: 0 -4px; }
.deck-grid.pick-remove .fcard:hover, .deck-grid.pick-remove .fcard:focus-visible { box-shadow: 0 0 0 2px #e0505a, 0 3px 0 var(--void); }
.deck-grid.pick-raise .fcard:hover, .deck-grid.pick-raise .fcard:focus-visible { box-shadow: 0 0 0 2px #f4d27a, 0 3px 0 var(--void); }
.fcard-next { display: block; align-self: stretch; padding: 1px 2px; font-size: 12px; line-height: 1.1; color: #1a1206; background: #c8a050; }
.pick-skip { opacity: .9; }
#pick-overlay.pick-remove .pick-panel h2 { color: #ffa0a6; }
#pick-overlay.pick-raise .pick-panel h2 { color: #f4d27a; }
.fight-deck-btn { min-height: 44px; padding: 4px 12px; font-family: var(--pix); font-size: 15px; color: #cfe8ff; background: #0b141c;
  border: 2px solid #2d648c; cursor: pointer; }
.fight-deck-btn:hover, .fight-deck-btn:focus-visible { border-color: #8fd0ff; }

/* a card joins, leaves or rises (.deck-fx.deck-fx-<add|remove|raise>, ~1.4 s): the card in the middle of the screen, its word on a plate.
   add: drops in and flies off into your deck; remove: burns away from the foot up, an ember line climbing; raise: pulses, its pips pop, a gold glow */
.deck-fx { position: fixed; left: 50%; top: 42%; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translate(-50%, -50%); pointer-events: none; animation: deck-fx-in 1.4s linear both; }
@keyframes deck-fx-in { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
.deck-fx .fcard.deck-fx-card { width: 110px; height: 154px; flex: none; margin: 0; rotate: none; translate: none; aspect-ratio: auto; padding: 18px 4px 4px; opacity: 1; filter: none; }
.deck-fx-word { padding: 3px 10px; font-family: var(--pix); font-size: 16px; color: var(--bone); background: #0b141c; border: 2px solid #2d648c;
  box-shadow: 0 2px 0 var(--void); text-shadow: none; white-space: nowrap; }
.deck-fx-add .deck-fx-word { color: #9ff0b4; border-color: #2f7a48; }
.deck-fx-remove .deck-fx-word { color: #ffa0a6; border-color: #8a2a30; }
.deck-fx-raise .deck-fx-word { color: #f4d27a; border-color: #c8a050; }
.deck-fx-add .deck-fx-card { animation: deck-fx-add 1.4s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes deck-fx-add { 0% { transform: translateY(-40px) scale(.7); } 18% { transform: translateY(4px) scale(1.04); } 26%, 64% { transform: none; }
  100% { transform: translate(110px, 260px) scale(.25) rotate(14deg); opacity: 0; } }
.deck-fx-remove .deck-fx-card { animation: deck-fx-burn 1.4s linear both; }
@keyframes deck-fx-burn { 0%, 35% { clip-path: inset(0 0 0 0); filter: none; } 45% { filter: sepia(.6) brightness(.8); }
  95%, 100% { clip-path: inset(0 0 100% 0); filter: sepia(1) brightness(.5); } }
.deck-fx-remove::before { content: ''; position: absolute; top: 151px; left: 50%; width: 114px; height: 3px; margin-left: -57px; z-index: 1;
  background: repeating-linear-gradient(90deg, #ffd070 0 3px, #f77622 3px 6px, #ffd070 6px 8px); box-shadow: 0 -2px 0 rgba(247, 118, 34, .5);
  animation: deck-fx-ember 1.4s linear both; }
@keyframes deck-fx-ember { 0%, 35% { transform: none; opacity: 0; } 38% { opacity: 1; } 95% { transform: translateY(-151px); opacity: 1; } 100% { transform: translateY(-151px); opacity: 0; } }
.deck-fx-raise .deck-fx-card { animation: deck-fx-raise 1.4s ease-out both; }
@keyframes deck-fx-raise { 0% { transform: scale(.85); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } 60%, 100% { transform: scale(1); } }
.deck-fx-raise .deck-fx-card .fcard-lv { animation: deck-fx-pips .6s steps(4) .55s both; }
@keyframes deck-fx-pips { 0% { transform: scale(0); } 60% { transform: scale(1.6); } 100% { transform: scale(1); } }
.deck-fx-raise::after { content: ''; position: absolute; left: 50%; top: 77px; width: 200px; height: 200px; margin: -100px 0 0 -100px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(244, 210, 122, .45) 0 25%, transparent 62%); animation: deck-fx-glow 1.4s ease-out both; }
@keyframes deck-fx-glow { 0%, 35% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } }

/* gear: the HUD chip of a worn piece shows its slot (art slot_<slot>) before its name */
#hud .item.gear { gap: 4px; }
#hud .item.gear .slot-icon { display: inline-flex; width: 16px; height: 16px; flex: none; opacity: .85; }
#hud .item.gear .slot-icon img.px { width: 16px; height: 16px; }
#hud .item.gear.slot-weapon { border-color: #8a2a30; } #hud .item.gear.slot-armour { border-color: #3c5a7a; }
#hud .item.gear:is(.slot-trinket, .slot-trinket2) { border-color: #8a6a2c; }
.gear-panel .choice.gear-new { border-style: dashed; }

/* a foe's next card, face up above it (.intent-card > .foe-card): a small dark card with its art, name and pips; readable at 360 */
.intent.intent-card { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
.foe-card { position: relative; flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0 auto 2px; padding: 2px 16px 2px 4px;
  max-width: 100%; min-height: 26px; padding-right: 13px; background: #1a1012; border: 2px solid #8a2a30; box-shadow: 0 2px 0 var(--void); color: #ffd0d4; font-family: var(--pix); font-size: 13px; line-height: 1; }
.foe-card-art { display: inline-flex; width: 20px; height: 20px; flex: none; font-size: 15px; align-items: center; justify-content: center; }
.foe-card-art img.px { width: 20px; height: 20px; }
.foe-card-name { min-width: 0; white-space: normal; line-height: 1; text-align: left; }
.foe-card .fcard-lv { top: 2px; right: 3px; }
.intent-block .foe-card { border-color: #3c5a7a; background: #10161c; color: #cfe8ff; }
.intent-buff .foe-card { border-color: #7a4020; color: #ffd8b0; }
.intent-heal .foe-card { border-color: #2f7a48; background: #0a1810; color: #c8f0d0; }
.intent-curse .foe-card { border-color: #4a2c52; background: #160c1a; color: #e6c0ee; }
/* its play (when ui marks it .foe-card-play): it slides out at you, strikes, and is thrown on its discard */
.foe-card.foe-card-play { animation: foe-card-play .6s cubic-bezier(.3, .6, .4, 1) both; pointer-events: none; }
@keyframes foe-card-play { 0% { transform: none; } 30% { transform: translateY(18px) scale(1.15); } 42% { transform: translateY(26px) scale(1.25) rotate(-4deg); }
  100% { transform: translate(40px, -6px) rotate(18deg) scale(.6); opacity: 0; } }

/* max health up: the HUD heart grows in pixel steps and the number glows gold for a moment (ui's .hp-grow, ~1.2 s) */
#hud .stat.hp.hp-grow { animation: hp-grow-px 1.2s steps(8) both; color: #f4d27a; transition: color .6s ease .6s; }
#hud .stat.hp.hp-grow .ico { animation: hp-grow-ico 1.2s steps(6) both; }
@keyframes hp-grow-px { 0% { transform: none; } 20% { transform: scale(1.25); } 45% { transform: scale(1.1); } 65% { transform: scale(1.18); } 100% { transform: none; } }
@keyframes hp-grow-ico { 0% { filter: none; } 25% { filter: sepia(1) saturate(3) hue-rotate(5deg) brightness(1.3); } 100% { filter: none; } }
.fx.fx-max-hp, .note-chips .fx.fx-max-hp { color: #f4d27a; border-color: #c8a050; background: #1a1406; }
.toast.toast-max-hp { color: #f4d27a; border-color: #c8a050; }

@media (max-width: 420px) {
  .deck-grid { grid-template-columns: repeat(3, 1fr); gap: 8px 5px; }
  :is(.deck-panel, .pick-panel, .gear-panel) { padding: 8px 6px 10px; border-width: 12px; border-image-width: 12px; }
  .deck-fx .fcard.deck-fx-card { width: 100px; height: 140px; }
  .deck-fx-remove::before { top: 137px; width: 104px; margin-left: -52px; }
  @keyframes deck-fx-ember { 0%, 35% { transform: none; opacity: 0; } 38% { opacity: 1; } 95% { transform: translateY(-137px); opacity: 1; } 100% { transform: translateY(-137px); opacity: 0; } }
  .deck-fx-raise::after { top: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-fx-card, .deck-fx::before, .deck-fx::after, .deck-fx .fcard-lv, .foe-card.foe-card-play, #hud .stat.hp.hp-grow, #hud .stat.hp.hp-grow .ico { animation: none !important; }
}

/* ---------- gamble cards that read without words (owner): the designer's faces (art.js --px-fate-*, 29x40, the frame drawn):
   good = gold frame, a star, a bright thread; Triumph = white-gold, the Glare's sun; bad = ash-red chamfered frame, a cracked disc,
   a frayed thread; Disaster = near-black, a red sawtooth frame, a shattered disc, a cut thread. The word sits small in the calm field
   above the thread ---------- */
.fd-card:is(.good, .triumph, .bad, .disaster) { border: 0; border-radius: 0; box-shadow: 0 2px 0 var(--void); image-rendering: pixelated;
  background: var(--fd-face) center / 100% 100% no-repeat, var(--rar-bg); justify-content: flex-end; padding: 0 2px calc(var(--fd-h) * .3); }
.fd-card.good { --fd-face: var(--px-fate-good, none); --rar-hi: #ffe8a8; --rar-bg: #2a1c08; }
.fd-card.triumph { --fd-face: var(--px-fate-triumph, none); --rar-hi: #fff4cc; box-shadow: 0 2px 0 var(--void), 0 0 10px rgba(244, 210, 122, .45); }
.fd-card.bad { --fd-face: var(--px-fate-bad, none); --rar-hi: #f0b0b4; --rar-bg: #160a0b; }
.fd-card.disaster { --fd-face: var(--px-fate-disaster, none); --rar-hi: #ffb0b4; --rar-bg: #050203; }
/* the faces draw their own thread and mark: no thread layer over them */
.fd-card:is(.good, .triumph, .bad, .disaster)::before { content: none; }
.fate-deck .fd-card:is(.triumph, .good, .bad, .disaster) .fd-word, .fd-flip > .face.front.fd-card:is(.triumph, .good, .bad, .disaster) .fd-word {
  align-self: center; background: none; padding: 0; font-size: calc(16px / 1.5); line-height: 1; color: var(--rar-hi); }
.fd-flip > .face.front.fd-card:is(.triumph, .good, .bad, .disaster) { border: 0; background: var(--fd-face) center / 100% 100% no-repeat, var(--rar-bg); padding: 0 2px calc(var(--fd-h) * .3); justify-content: flex-end; }
/* the tally chips follow: good gold, bad red */
.chance-tally .tally-good { color: #ffe8a8; background: #1e1406; border-color: #c8a050; }
.fate-deck .odds-good, .fate-deck .odds-good .odds-n { color: #ffe8a8; }

/* ---------- the shuffle (owner): gathered into one pile, split into two halves, the halves riffle together card by card with a soft
   bounce, squared up; then the pile rests fanned and the chosen card lifts and turns. ui.js puts span.fd-leaf.fd-leaf-<a|b> (--k 0..7)
   in the pile; transforms and opacity only ---------- */
.fd-pile .fd-leaf { position: absolute; inset: 0 6px 6px 0; z-index: calc(3 + var(--k, 0)); border-radius: 4px; border: 2px solid #2d648c; opacity: 0; pointer-events: none;
  background: var(--fd-back) center / cover no-repeat, repeating-linear-gradient(45deg, #0e1a24 0 4px, #0b141c 4px 8px); box-shadow: 0 1px 0 var(--void);
  transform-origin: 50% 100%; }
.fd-pile .fd-leaf-a { --lx: -16px; --lr: -7deg; }
.fd-pile .fd-leaf-b { --lx: 16px; --lr: 7deg; filter: brightness(.9); }
/* the interleave: each leaf leaves its half in turn (45 ms apart), arcs in and lands with a small bounce; the halves empty as it goes */
.fate-deck.fd-riffle-bridge .fd-pile .fd-leaf { opacity: 1; animation: fd-leaf .22s cubic-bezier(.3, .6, .4, 1) calc(var(--k, 0) * 45ms) both; }
.fate-deck.fd-riffle-merge .fd-pile .fd-leaf { opacity: 1; transform: translateY(calc(var(--k, 0) * -.5px)); transition: transform .15s ease-out; }
@keyframes fd-leaf {
  0% { transform: translate(var(--lx), -3px) rotate(var(--lr)); }
  55% { transform: translate(calc(var(--lx) * -.15), calc(-6px - var(--k, 0) * 1px)) rotate(calc(var(--lr) * -.4)); }
  80% { transform: translate(0, 1px) rotate(0); }
  100% { transform: translate(0, calc(var(--k, 0) * -.5px)) rotate(calc((var(--k, 0) - 3.5) * .5deg)); } }
.fd-pile:has(.fd-leaf) .fd-half { transition: transform .18s cubic-bezier(.3, .7, .4, 1), opacity .3s linear; }
.fate-deck.fd-riffle-bridge .fd-pile:has(.fd-leaf) .fd-half { opacity: 0; transition-delay: 0s, .2s; }
.fate-deck.fd-riffle-bridge .fd-pile:has(.fd-leaf) .fd-half-a { transform: translate(-16px, -3px) rotate(-7deg); }
.fate-deck.fd-riffle-bridge .fd-pile:has(.fd-leaf) .fd-half-b { transform: translate(16px, 0) rotate(7deg); }
/* at rest, ready to draw: the top cards fanned a little behind the top one */
.fate-deck.fd-deck:not(.fd-riffling) .fd-pile .fd-leaf:nth-of-type(-n+4) { opacity: 1; z-index: 0;
  transform: translateY(2px) rotate(calc((var(--k, 0) - 1.5) * 6deg)); transition: transform .25s cubic-bezier(.3, .7, .4, 1.2), opacity .2s; filter: brightness(.7); }
.fate-deck.fd-deck:not(.fd-riffling) .fd-pile:has(.fd-leaf)::before, .fate-deck.fd-deck:not(.fd-riffling) .fd-pile:has(.fd-leaf)::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fd-pile .fd-leaf { animation: none !important; transition: none !important; } }

/* ---------- phone panels fit one screen (360x640, 390x780): Monogram at 16px (24px drawn, its 1.5x grid) with tight lines; each
   choice in two rows (its name; then its chips with what it needs); big shops in two columns; the House line just its name;
   smaller art and a shorter title plate ---------- */
@media (max-width: 420px) {
  #overlay #panel .text { font-size: var(--t-body); line-height: var(--lh-body); margin: 4px 0 6px; }
  #overlay #panel .panel-stats { margin-bottom: 2px; }
  #overlay #panel .panel-art { width: 84px; height: 92px; margin: 0 auto 2px; padding-bottom: 4px; }
  #overlay #panel .panel-art img.px, #overlay #panel .panel-art .item-icon img.px { width: 72px; height: 72px; }
  #overlay #panel .house-line { margin: 0 0 2px; font-size: var(--t-small); line-height: var(--lh-small); }
  #overlay #panel .house-line img.px { width: 16px; height: 16px; }
  #overlay #panel .house-line .house-meaning { display: none; }
  #overlay #panel[class*="house-"] > h2 { margin: 2px auto 2px; padding: 0 6px 1px; border-width: 6px; border-image-width: 6px; font-size: 22px; line-height: 1; }
  #overlay #panel > h2 { margin-top: 2px; margin-bottom: 2px; }
  /* choices: name on top, then chips + needs on one wrapping row */
  #overlay #panel .choices, #overlay #panel:has(.choices > .choice:nth-child(4)) .choices { gap: 5px; margin-top: 4px; }
  #overlay #panel .choices > .choice, #overlay #panel:has(.choices > .choice:nth-child(4)) .choices > .choice {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 5px; padding: 4px 8px; min-height: 44px; font-size: var(--t-body); line-height: var(--lh-body); }
  #overlay #panel .choice .label { flex: 1 1 100%; line-height: var(--lh-body); }
  /* a choice's tag (what it unlocks, the Aspect it needs) sits on the name's row, not a row of its own */
  #overlay #panel .choice:has(> :is(.token-tag, .class-tag)) .label { flex: 1 1 0; min-width: 0; }
  #overlay #panel .choice > :is(.token-tag, .class-tag) { flex: none; margin: 0; }
  #overlay #panel .choice .effects, #overlay #panel .choice .bonuses { width: auto; flex: 0 1 auto; gap: 3px; }
  #overlay #panel .choice .fx { padding: 1px 4px; font-size: var(--t-small); line-height: var(--lh-small); }
  #overlay #panel .choice .needs, #overlay #panel:has(.choices > .choice:nth-child(4)) .choice .needs { width: auto; flex: 0 1 auto; font-size: var(--t-small); line-height: var(--lh-small); font-style: normal; }
  #overlay #panel .choice .hint { font-size: var(--t-small); line-height: var(--lh-small); }
  /* five or more choices: their chips at Monogram's own 16 px grid (one of its pixels = 1 CSS px), the names stay large */
  #overlay #panel:has(.choices > .choice:nth-child(5)) .choice :is(.fx, .hint, .odds, .stake, .token-tag, .class-tag) { font-size: var(--t-small); line-height: var(--lh-small); }
  #overlay #panel:has(.choices > .choice:nth-child(5)) .choice .fx { padding: 1px 3px; }
  #overlay #panel:has(.choices > .choice:nth-child(5)) .choice .fx img.px { width: 12px; height: 12px; }
  /* an item's chip says what it does; the hint under it says it again: keep the hint */
  #overlay #panel .choice:has(.hint) .fx-what { display: none; }
  /* a big shop (6 or more goods): two columns, the last way out across both */
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice { padding: 2px 4px; min-width: 0; }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .panel-art { display: none; }
  /* in a big shop each good says its name, its price and what it does, at Monogram's own 16 px grid (one of its pixels = 1 CSS px);
     the name again on a chip and the shards it needs (the price says it; the button dims) are left out */
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice { min-height: 44px; gap: 1px 4px; }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice :is(.label, .fx, .hint) { font-size: var(--t-small); line-height: var(--lh-small); }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice .fx { padding: 0 3px; border-width: 1px; }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice .fx img.px { width: 12px; height: 12px; }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice :is(.fx-item, .needs) { display: none; }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice:not(:last-child) { justify-content: flex-start; align-items: flex-start; align-content: center; text-align: left; }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice .effects { flex: none; }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice .hint { flex: 1 1 0; min-width: 0; width: auto; padding-top: 2px; }
  /* and its story in a line or two, at the same small grid */
  #overlay #panel:has(.choices > .choice:nth-child(6)) .text { font-size: var(--t-small); line-height: var(--lh-small); margin: 2px 0 4px; }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice:last-child { font-size: var(--t-body); }
}

/* short phones (up to 700 px tall): "needs N shards" is left out (the price and your shards
   above say it, and the button dims); the picture a little smaller */
@media (max-width: 420px) and (max-height: 700px) {
  #overlay #panel .choice .needs, #overlay #panel:has(.choices > .choice:nth-child(4)) .choice .needs { display: none; }
  /* five or more choices: their chips at Monogram's own 16 px grid (one of its pixels = 1 CSS px), the names stay large */
  #overlay #panel:has(.choices > .choice:nth-child(4)) .choice :is(.fx, .hint, .odds, .stake, .token-tag, .class-tag) { font-size: var(--t-small); line-height: var(--lh-small); }
  #overlay #panel:has(.choices > .choice:nth-child(4)) .choice .fx { padding: 1px 3px; }
  #overlay #panel:has(.choices > .choice:nth-child(4)) .choice .fx img.px { width: 12px; height: 12px; }
  #overlay #panel .text { margin: 2px 0 4px; }
  #overlay #panel[class*="house-"] > h2, #overlay #panel > h2 { margin-top: 1px; margin-bottom: 1px; }
  #overlay #panel .choices, #overlay #panel:has(.choices > .choice:nth-child(4)) .choices { margin-top: 2px; gap: 4px; }
  #overlay #panel .panel-art { width: 72px; height: 76px; }
  /* five or more choices: no picture (the title plate and House still say where you are); a big shop's grid a pixel tighter */
  #overlay #panel:has(.choices > .choice:nth-child(5)) .panel-art { display: none; }
  #overlay #panel:has(.choices > .choice:nth-child(6)) .choices { gap: 2px; }
  #overlay #panel .panel-art img.px, #overlay #panel .panel-art .item-icon img.px { width: 64px; height: 64px; }
}

/* L6: a Milestone card's back shows the stone mark where others show sun or moon (--px-mark-still) */
.face.back .back-ground:is(.ground-still, .lean-still) { position: absolute; font-size: 0; color: transparent; width: 18px; height: 18px;
  border-color: #8a8a7a; background: rgba(16, 16, 12, .8); }
.face.back .back-ground:is(.ground-still, .lean-still)::before { inset: 1px; clip-path: none; border-radius: 0; box-shadow: none;
  background: var(--px-mark-still) center / contain no-repeat; image-rendering: pixelated; }
@media (max-width: 520px) { .face.back .back-ground:is(.ground-still, .lean-still) { width: 16px; height: 16px; } }
/* L7 names: a night-glass card is dark glass with a cold edge; a foe it marks goes grey and its gain cannot take hold */
.fcard.fcard-unnamed { box-shadow: inset 0 0 0 2px #1a1626, inset 0 0 10px rgba(138, 120, 160, .55), 0 0 0 1px #8a78a0; }
.fcard.fcard-unnamed .fcard-art { filter: saturate(.7) brightness(.95) drop-shadow(0 0 3px rgba(176, 128, 224, .5)); }
.fighter.foe.foe-unnamed .fighter-art { filter: grayscale(.7) brightness(.85) drop-shadow(0 0 4px rgba(192, 203, 220, .7)); transition: filter .3s ease; }
.fighter.foe.foe-unnamed .intent { opacity: .6; filter: grayscale(1); }
.fighter.fx-unnamed .fighter-art { animation: fx-unnamed .5s ease-out; }
@keyframes fx-unnamed { 30% { filter: grayscale(1) brightness(1.8) drop-shadow(0 0 8px #c0cbdc); } }
.fx-num.fx-num-unnamed { color: #c8c0d8; font-size: 15px; letter-spacing: .3px; text-shadow: 1px 1px 0 var(--void), 0 0 6px rgba(138, 120, 160, .8); }

/* L6: a Stillstone on the board (.card.ground-still): a steady pale stone frame glow that the light doesn't touch
   (no animation, no light-tint vars); its road (path.road.road-still) laid as pale stone slabs, not ruts */
#board .card.ground-still .face { box-shadow: 0 0 0 2px rgba(206, 200, 176, .7), 0 4px 0 rgba(0, 0, 0, .7), 0 0 12px rgba(206, 200, 176, .4); }
#board .card.ground-still.reachable .face { box-shadow: 0 0 0 2px rgba(206, 200, 176, .7), 0 4px 0 rgba(0, 0, 0, .7), 0 0 14px rgba(206, 200, 176, .4), 0 0 18px var(--fireglow); }
#board .card.ground-still.here .face { box-shadow: 0 0 0 2px rgba(220, 214, 190, .8), 0 4px 0 rgba(0, 0, 0, .7), 0 0 14px rgba(220, 214, 190, .45); }
svg.roads path.road.road-still { --road: #a6a290; --road-lit: #dcd6be; --road-walked: #cec8b2; }
svg.roads path.road.road-still.open { stroke-dasharray: 7 1; stroke-opacity: .8; }
svg.roads path.road.road-still.taken { stroke-dasharray: 7 1; stroke-opacity: .5; }
svg.roads path.road.road-still.ahead { stroke-dasharray: 4 2; }
/* stepping onto one: the light strip holds (ui.js adds #moon.moon-holds for a moment): one soft stone ring, the notch
   brightens in place, and the line under the name reads 'the light holds' */
#moon.moon-holds { animation: moon-holds 1.4s ease-out; }
#moon.moon-holds::before { animation: moon-holds-notch 1.4s ease-out; }
@keyframes moon-holds { 25% { box-shadow: inset 0 0 0 2px rgba(214, 208, 184, .8), 0 0 14px rgba(214, 208, 184, .4); } }
@keyframes moon-holds-notch { 25% { opacity: 1; filter: brightness(1.4); } }
#moon.moon-holds .moon-next { position: relative; color: transparent; text-shadow: none; }
#moon.moon-holds .moon-next::after { content: 'the light holds'; position: absolute; left: 0; top: 0; white-space: nowrap; color: #ddd6bc; text-shadow: 1px 1px 0 #000; }
@media (max-width: 700px) { #moon.moon-holds .moon-next::after { content: '· the light holds'; } }
@media (prefers-reduced-motion: reduce) { #moon.moon-holds, #moon.moon-holds::before { animation: none; } }

/* ---------- the choice panel speaks in icons and numbers (DESIGN.md, owner 2026-10-21): CSS for engine's rows ----------
   button.choice:is(.ch-row, .ch-group) > span.ch-icon + span.label + span.ch-outs > span.ch-out.out-good|out-triumph|out-bad|out-disaster
   (i.mini-face, then .fx chips: span.fx.good|bad > span.fx-ic + b.fx-n) + span.odds-pips + span.ch-info; .ch-words when held.
   Sub menus: .choice.ch-group (span.ch-more), #panel.sub-panel with .choice.ch-back; the way out: .choice.ch-leave.
   Numbers at Monogram's 2x grid (32px / 1.5: one font pixel = 2 CSS px), weight from a 1 px copy, never synthetic bold.
   Mini faces: the designer's --px-fate-mini-* (8x11), 2x on an outcome line, 1x as a pip; plain blocks until they land. */
#overlay #panel .choices > .choice:is(.ch-row, .ch-group), #overlay #panel:has(.choices > .choice:nth-child(4)) .choices > .choice:is(.ch-row, .ch-group),
#overlay #panel:has(.choices > .choice:nth-child(6)) .choices > .choice:is(.ch-row, .ch-group) {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; grid-template-areas: 'icon name pips info' 'icon outs outs info';
  align-items: center; align-content: center; justify-content: stretch; gap: 2px 8px; padding: 5px 8px 5px 6px; min-height: 48px; text-align: left; }
#overlay #panel .choices:has(> .ch-row) { gap: 6px; }
.choice:is(.ch-row, .ch-group) > .ch-icon { grid-area: icon; width: 24px; height: 24px; display: grid; place-items: center; font-size: 20px; line-height: 1; }
.choice:is(.ch-row, .ch-group) > .ch-icon img.px { width: 24px; height: 24px; image-rendering: pixelated; }
#overlay #panel .choice:is(.ch-row, .ch-group) > .label { grid-area: name; flex: none; font-size: var(--t-body); line-height: var(--lh-body); color: var(--bone); }
.choice:is(.ch-row, .ch-group) > .ch-outs { grid-area: outs; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; }
.choice:is(.ch-row, .ch-group) > .ch-outs:empty { display: none; }
#overlay #panel .choices > .choice:is(.ch-row, .ch-group):not(:has(> .ch-outs > *)) { grid-template-areas: 'icon name pips info'; }
.ch-out { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; max-width: 100%; }
.ch-out .effects, .ch-outs > .effects { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; width: auto; min-width: 0; margin: 0; }
/* the fate face that starts each outcome line */
i.mini-face { flex: none; display: block; width: 16px; height: 22px; background: center / 100% 100% no-repeat; image-rendering: pixelated; }
.out-good > i.mini-face { background-image: var(--px-fate-mini-good, linear-gradient(#c8962c, #c8962c)); }
.out-triumph > i.mini-face { background-image: var(--px-fate-mini-triumph, linear-gradient(#f4e2a0, #f4e2a0)); filter: drop-shadow(0 0 3px rgba(244, 210, 122, .6)); }
.out-bad > i.mini-face { background-image: var(--px-fate-mini-bad, linear-gradient(#6a6058, #6a6058)); }
.out-disaster > i.mini-face { background-image: var(--px-fate-mini-disaster, linear-gradient(#0c0808, #0c0808)); box-shadow: 0 0 0 1px #7a1820; }
/* an effect: the icon, then the number big */
#overlay #panel .choice:is(.ch-row, .ch-group) .fx { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; box-shadow: none; font-size: var(--t-small); line-height: var(--lh-small); }
.choice:is(.ch-row, .ch-group) .fx-ic { flex: none; display: grid; place-items: center; width: 16px; height: 16px; font-size: 14px; line-height: 1; }
.choice:is(.ch-row, .ch-group) .fx-ic img.px { width: 16px; height: 16px; image-rendering: pixelated; }
.choice:is(.ch-row, .ch-group) b.fx-n { font-family: var(--read); font-weight: 400; font-size: var(--t-num); line-height: 26px; letter-spacing: 0;
  color: var(--bone); text-shadow: 1px 0 0 currentColor, 1px 2px 0 #000, 2px 2px 0 #000; }
.choice:is(.ch-row, .ch-group) .fx.good b.fx-n { color: #f2c75c; }
.choice:is(.ch-row, .ch-group) .fx.bad b.fx-n { color: #ef5a62; }
/* a named thing (an item, a companion) keeps its short words, at the 1x grid */
.choice:is(.ch-row, .ch-group) .fx .fx-word { font-size: var(--t-small); line-height: var(--lh-small); color: var(--bone2); }
/* the odds: one mini face per card in the deck, good first */
.choice:is(.ch-row, .ch-group) .odds-pips { grid-area: pips; display: inline-flex; gap: 1px; align-items: center; }
.choice:is(.ch-row, .ch-group) > .ch-outs .odds-pips { grid-area: auto; flex: 1 0 100%; }
.choice:is(.ch-row, .ch-group) .odds-pips i.pip { width: 8px; height: 11px; border: 0; border-radius: 0; background: center / 100% 100% no-repeat; image-rendering: pixelated; }
.choice:is(.ch-row, .ch-group) .odds-pips i.pip-good { background-image: var(--px-fate-mini-good, linear-gradient(#c8962c, #c8962c)); }
.choice:is(.ch-row, .ch-group) .odds-pips i.pip-bad { background-image: var(--px-fate-mini-bad, linear-gradient(#6a6058, #6a6058)); }
.choice:is(.ch-row, .ch-group) .odds-pips i.pip-triumph { background-image: var(--px-fate-mini-triumph, linear-gradient(#f4e2a0, #f4e2a0)); box-shadow: 0 0 3px rgba(244, 210, 122, .7); }
.choice:is(.ch-row, .ch-group) .odds-pips i.pip-disaster { background-image: var(--px-fate-mini-disaster, linear-gradient(#0c0808, #0c0808)); box-shadow: 0 0 0 1px #7a1820; }
.choice:is(.ch-row, .ch-group) .odds-pips i.pip-bad:not(.pip-disaster) + i.pip-good, .choice:is(.ch-row, .ch-group) .odds-pips i.pip-good + i.pip-bad { margin-left: 4px; }
/* hold for the words: the ⓘ, and the full words under the row */
.choice:is(.ch-row, .ch-group) > .ch-info { grid-area: info; display: grid; place-items: center; min-width: 20px; height: 22px; color: var(--mist); font-size: var(--t-small); line-height: 1; opacity: .8; }
.choice:is(.ch-row, .ch-group) > .ch-words { display: none; grid-column: 1 / -1; font-size: var(--t-small); line-height: var(--lh-small); color: var(--bone2); white-space: normal; padding-top: 2px; }
.choice:is(.ch-row, .ch-group).show-words > .ch-words { display: block; }
/* sub menus: a group row opens its own panel (›); its Back (‹) sits first and plain; the way out always quieter */
.choice.ch-group > .ch-more { grid-area: info; font-size: calc(32px / 1.5); line-height: 16px; color: var(--glim); }
.choice.ch-group { border-style: solid; }
#overlay #panel .choices > .choice.ch-back { min-height: 40px; justify-content: flex-start; text-align: left; color: var(--bone2); background: transparent; box-shadow: none; }
#overlay #panel .choices > .choice.ch-back::before { content: '‹ '; color: var(--glim); }
#overlay #panel .choices > .choice.ch-leave { color: var(--bone2); }
#overlay #panel .choices > .choice:is(.ch-row, .ch-group):disabled { opacity: .5; }

/* bigger panels (owner): nearly the whole phone, 6 px either side, up to 460 px wide; under the HUD (--hud-h, set by
   ui.js; the HUD stays readable) and above the volume button; body and choices at Monogram's 2x grid (see :root) */
#overlay { padding: calc(var(--hud-h, 0px) + 6px) 6px 6px; }
#panel { max-width: 460px; }
.text, #panel .choice { font-size: var(--t-body); line-height: var(--lh-body); }
@media (max-width: 520px) {
  #overlay { padding: calc(var(--hud-h, 0px) + 6px) 6px 40px; }
  #overlay #panel { padding: 8px 6px 10px; }
}
/* short phones, four or more choices: the picture gives its room to the bigger words */
@media (max-width: 520px) and (max-height: 700px) { #overlay #panel:has(.choices > .choice:nth-child(4)) .panel-art { display: none; } }
/* effect icons (designer's --px-ico-*, 16x16): span.fx-ic.ic-<name> shows the pixel icon instead of the emoji; a Fated face glows */
.choice:is(.ch-row, .ch-group) .fx-ic:is(.ic-shard, .ic-hp, .ic-maxhp, .ic-food, .ic-card, .ic-day, .ic-night, .ic-item) { font-size: 0; color: transparent; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; }
.fx-ic.ic-shard { background-image: var(--px-ico-shard); } .fx-ic.ic-hp { background-image: var(--px-ico-hp); } .fx-ic.ic-maxhp { background-image: var(--px-ico-maxhp); } .fx-ic.ic-food { background-image: var(--px-ico-food); } .fx-ic.ic-card { background-image: var(--px-ico-card); } .fx-ic.ic-day { background-image: var(--px-ico-day); } .fx-ic.ic-night { background-image: var(--px-ico-night); } .fx-ic.ic-item { background-image: var(--px-ico-item); }
:is(.out-fated > i.mini-face, i.mini-face.face-fated), .choice:is(.ch-row, .ch-group) .odds-pips i.pip-fated { background-image: var(--px-fate-mini-fated, linear-gradient(#b080e0, #b080e0)); filter: drop-shadow(0 0 3px rgba(176, 128, 224, .7)); }
/* engine's markup: the gamble's pips (span.ch-odds) lead the outcome line; mini faces also by .face-<k> */
.choice:is(.ch-row, .ch-group) .ch-outs > .ch-odds { order: -1; display: inline-flex; align-items: center; }
.choice:is(.ch-row, .ch-group) .ch-odds .odds { display: inline-flex; padding: 0; border: 0; background: none; }
i.mini-face.face-good { background-image: var(--px-fate-mini-good, linear-gradient(#c8962c, #c8962c)); }
i.mini-face.face-triumph { background-image: var(--px-fate-mini-triumph, linear-gradient(#f4e2a0, #f4e2a0)); filter: drop-shadow(0 0 3px rgba(244, 210, 122, .6)); }
i.mini-face.face-bad { background-image: var(--px-fate-mini-bad, linear-gradient(#6a6058, #6a6058)); }
i.mini-face.face-disaster { background-image: var(--px-fate-mini-disaster, linear-gradient(#0c0808, #0c0808)); box-shadow: 0 0 0 1px #7a1820; }
/* long words in an outcome (a named item) wrap; the sources that changed the odds ride small after the pips */
.choice:is(.ch-row, .ch-group) .fx .fx-word { white-space: normal; overflow-wrap: anywhere; }
.choice:is(.ch-row, .ch-group) .ch-odds .fx-src img.px { width: 16px; height: 16px; }
/* the ⓘ isn't in Monogram: drawn, a small ringed i; an item's description stays in the held words, its name on the row */
.choice:is(.ch-row, .ch-group) > .ch-info { font-size: 0; }
.choice:is(.ch-row, .ch-group) > .ch-info::before { content: 'i'; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%;
  font-size: var(--t-small); line-height: 1; }
.choice:is(.ch-row, .ch-group) .ch-outs .fx-what { display: none; }

/* standing with the Quiet Blades (DESIGN.md): the designer's meter at 2x (104x14 on the Runes, the slim 104x7 at a Blade
   panel's top), one picture per value; the value in words stays for screen readers only. Choices that move it: an arrow
   and a number, ash red toward displeasure (left), steel blue toward favour (right). The slim one slides in, once. */
.standing-meter { position: relative; display: block; width: 208px; max-width: 100%; height: 28px; margin: 4px auto; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; }
.standing-meter.standing-slim { height: 14px; margin: 0 auto 4px; }
.standing-meter .standing-value { position: absolute; left: 0; top: 0; font-size: 0; line-height: 0; color: transparent; }
.standing-meter.standing-n5 { background-image: var(--px-blades-meter-n5); } .standing-meter.standing-slim.standing-n5 { background-image: var(--px-blades-slim-n5); }
.standing-meter.standing-n4 { background-image: var(--px-blades-meter-n4); } .standing-meter.standing-slim.standing-n4 { background-image: var(--px-blades-slim-n4); }
.standing-meter.standing-n3 { background-image: var(--px-blades-meter-n3); } .standing-meter.standing-slim.standing-n3 { background-image: var(--px-blades-slim-n3); }
.standing-meter.standing-n2 { background-image: var(--px-blades-meter-n2); } .standing-meter.standing-slim.standing-n2 { background-image: var(--px-blades-slim-n2); }
.standing-meter.standing-n1 { background-image: var(--px-blades-meter-n1); } .standing-meter.standing-slim.standing-n1 { background-image: var(--px-blades-slim-n1); }
.standing-meter.standing-0 { background-image: var(--px-blades-meter-0); } .standing-meter.standing-slim.standing-0 { background-image: var(--px-blades-slim-0); }
.standing-meter.standing-p1 { background-image: var(--px-blades-meter-p1); } .standing-meter.standing-slim.standing-p1 { background-image: var(--px-blades-slim-p1); }
.standing-meter.standing-p2 { background-image: var(--px-blades-meter-p2); } .standing-meter.standing-slim.standing-p2 { background-image: var(--px-blades-slim-p2); }
.standing-meter.standing-p3 { background-image: var(--px-blades-meter-p3); } .standing-meter.standing-slim.standing-p3 { background-image: var(--px-blades-slim-p3); }
.standing-meter.standing-p4 { background-image: var(--px-blades-meter-p4); } .standing-meter.standing-slim.standing-p4 { background-image: var(--px-blades-slim-p4); }
.standing-meter.standing-p5 { background-image: var(--px-blades-meter-p5); } .standing-meter.standing-slim.standing-p5 { background-image: var(--px-blades-slim-p5); }
.standing-meter.standing-slide { animation: standing-slide .35s ease-out; }
@keyframes standing-slide { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .standing-meter.standing-slide { animation: none; } }
.fx.fx-standing.standing-left, .fx.fx-standing.standing-left b.fx-n, .choice:is(.ch-row, .ch-group) .fx.fx-standing.standing-left b.fx-n { color: #d8646c; }
.fx.fx-standing.standing-right, .fx.fx-standing.standing-right b.fx-n, .choice:is(.ch-row, .ch-group) .fx.fx-standing.standing-right b.fx-n { color: #8cb8e8; }
.choice:is(.ch-row, .ch-group) .fx.fx-standing b.fx-n { font-size: var(--t-body); line-height: var(--lh-body); }


/* ---------- Sunward and nightward: a sun-hardened foe (engine adds .sun-hardened at Day): its hide glazed, a hard pale sheen ---------- */
.fighter.foe.sun-hardened .fighter-art { filter: sepia(.25) brightness(1.12) contrast(1.08) drop-shadow(0 0 2px #fff4c0) drop-shadow(0 0 1px #c8e4ec); }

/* a chip whose icon is a word (a companion, a mark): the word sits small before the number, not under it */
.choice:is(.ch-row, .ch-group) .fx-ic:not(:is(.ic-shard, .ic-hp, .ic-maxhp, .ic-food, .ic-card, .ic-day, .ic-night, .ic-item)) { width: auto; min-width: 16px; padding-right: 2px;
  font-size: var(--t-small); line-height: var(--lh-small); color: var(--bone2); white-space: nowrap; }

/* ---------- the scene (DESIGN.md 'The scene'; engine's #scene, ENGINE.md 'The scene and the title') ----------
   #scene: data-kind (the open event's, else where you stand), data-resolved ('1' on the board), data-light, data-floor;
   .scene-sky (the floor's picture: sky, horizon and road, --px-scene-<body's look>), .scene-road (spare), .scene-place (the
   kind's scene, its resolved picture on the board), .scene-branches > .scene-branch (one per next card, in board order;
   data-kind, data-lean sun|night|still|plain, data-known; .lit when pointed at), .scene-hero.
   The designer's layers are 240x200 in register, the vanishing point at (120, 84): each is drawn at a whole scale (--sc, 4 on
   a phone, more on bigger screens) with its vanishing point in the middle, 42% down. A branch's place comes from how many
   there are (l2 l1 c r1 r2, the designer's five roads); it's the road (::before, the pale branch as a mask over its lean's
   colour) and its landmark at the end (::after). The walk (.scene-walk, 0.6 s) eases every layer toward the vanishing point,
   turned by --turn (-1 the leftmost branch .. 1 the rightmost). Transform and opacity only; reduced motion: a crossfade. */
#scene { --sc: 4; --vy: 42%; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #050407; }
@media (min-width: 961px), (min-height: 801px) { #scene { --sc: 5; } }
@media (min-width: 1201px), (min-height: 1001px) { #scene { --sc: 6; } }
@media (min-width: 1441px), (min-height: 1201px) { #scene { --sc: 7; } }
@media (min-width: 1681px), (min-height: 1401px) { #scene { --sc: 8; } }
#scene > :is(.scene-sky, .scene-road, .scene-place, .scene-branches) { position: absolute; left: calc(50% - 120px * var(--sc)); top: calc(var(--vy) - 84px * var(--sc));
  width: calc(240px * var(--sc)); height: calc(200px * var(--sc)); background-position: 0 0; background-size: 100% 100%; background-repeat: no-repeat;
  image-rendering: pixelated; transform-origin: calc(120px * var(--sc)) calc(84px * var(--sc)); }
/* the floor's picture (the Nightward borrows the crypt's dark until it has its own; the warrens the road) */
#scene .scene-sky { background-image: var(--px-scene-road); }
body[data-look=harbour] #scene .scene-sky { background-image: var(--px-scene-harbour, var(--px-scene-road)); }
body[data-look=wood] #scene .scene-sky { background-image: var(--px-scene-wood, var(--px-scene-road)); }
body[data-look=frost] #scene .scene-sky { background-image: var(--px-scene-frost, var(--px-scene-road)); }
body[data-look=graveyard] #scene .scene-sky { background-image: var(--px-scene-graveyard, var(--px-scene-road)); }
body[data-look=sunken] #scene .scene-sky { background-image: var(--px-scene-sunken, var(--px-scene-road)); }
body[data-look=desert] #scene .scene-sky { background-image: var(--px-scene-desert, var(--px-scene-road)); }
body[data-look=crypt] #scene .scene-sky { background-image: var(--px-scene-crypt, var(--px-scene-road)); }
body:is([data-look=riverboat], [data-look=table]) #scene .scene-sky { background-image: var(--px-scene-crypt, var(--px-scene-road)); }
/* the event's scene while it's open, its resolved picture once you're back on the board (the fight cleared, the fire banked) */
#scene[data-kind=fight] .scene-place { background-image: var(--px-scene-kind-fight, none); } #scene[data-kind=fight][data-resolved='1'] .scene-place { background-image: var(--px-scene-kind-fight-done, var(--px-scene-kind-fight, none)); }
#scene[data-kind=shop] .scene-place { background-image: var(--px-scene-kind-shop, none); } #scene[data-kind=shop][data-resolved='1'] .scene-place { background-image: var(--px-scene-kind-shop-done, var(--px-scene-kind-shop, none)); }
#scene[data-kind=rest] .scene-place { background-image: var(--px-scene-kind-rest, none); } #scene[data-kind=rest][data-resolved='1'] .scene-place { background-image: var(--px-scene-kind-rest-done, var(--px-scene-kind-rest, none)); }
#scene[data-kind=story] .scene-place { background-image: var(--px-scene-kind-story, none); } #scene[data-kind=story][data-resolved='1'] .scene-place { background-image: var(--px-scene-kind-story-done, var(--px-scene-kind-story, none)); }
#scene[data-kind=gamble] .scene-place { background-image: var(--px-scene-kind-gamble, none); } #scene[data-kind=gamble][data-resolved='1'] .scene-place { background-image: var(--px-scene-kind-gamble-done, var(--px-scene-kind-gamble, none)); }
#scene[data-kind=hold] .scene-place { background-image: var(--px-scene-kind-hold, none); } #scene[data-kind=hold][data-resolved='1'] .scene-place { background-image: var(--px-scene-kind-hold-done, var(--px-scene-kind-hold, none)); }
#scene[data-kind=gate] .scene-place { background-image: var(--px-scene-kind-gate, none); } #scene[data-kind=gate][data-resolved='1'] .scene-place { background-image: var(--px-scene-kind-gate-done, var(--px-scene-kind-gate, none)); }
#scene[data-kind=boss] .scene-place { background-image: var(--px-scene-kind-boss, none); } #scene[data-kind=boss][data-resolved='1'] .scene-place { background-image: var(--px-scene-kind-boss-done, var(--px-scene-kind-boss, none)); }
/* the roads ahead: faint until known, bright when pointed at; warm sunward, cool nightward, stone-pale on a Stillstone */
#scene .scene-branch { position: absolute; inset: 0; --lean: #8a8076; --x: 120; --mask: var(--px-scene-branch-c); opacity: .45; transition: opacity .25s ease; }
#scene .scene-branch[data-known='1'] { opacity: .65; }
#scene .scene-branch.lit { opacity: 1; }
#scene .scene-branch[data-lean=sun] { --lean: #e2b464; }
#scene .scene-branch[data-lean=night] { --lean: #6c8ed0; }
#scene .scene-branch[data-lean=still] { --lean: #d6d0b8; }
#scene .scene-branch:nth-child(1):nth-last-child(1) { --mask: var(--px-scene-branch-c); --x: 120; }
#scene .scene-branch:nth-child(1):nth-last-child(2) { --mask: var(--px-scene-branch-l1); --x: 92; }
#scene .scene-branch:nth-child(2):nth-last-child(1) { --mask: var(--px-scene-branch-r1); --x: 148; }
#scene .scene-branch:nth-child(1):nth-last-child(3) { --mask: var(--px-scene-branch-l1); --x: 92; }
#scene .scene-branch:nth-child(2):nth-last-child(2) { --mask: var(--px-scene-branch-c); --x: 120; }
#scene .scene-branch:nth-child(3):nth-last-child(1) { --mask: var(--px-scene-branch-r1); --x: 148; }
#scene .scene-branch:nth-child(1):nth-last-child(4) { --mask: var(--px-scene-branch-l2); --x: 64; }
#scene .scene-branch:nth-child(2):nth-last-child(3) { --mask: var(--px-scene-branch-l1); --x: 92; }
#scene .scene-branch:nth-child(3):nth-last-child(2) { --mask: var(--px-scene-branch-r1); --x: 148; }
#scene .scene-branch:nth-child(4):nth-last-child(1) { --mask: var(--px-scene-branch-r2); --x: 176; }
#scene .scene-branch:nth-child(1):nth-last-child(5) { --mask: var(--px-scene-branch-l2); --x: 64; }
#scene .scene-branch:nth-child(2):nth-last-child(4) { --mask: var(--px-scene-branch-l1); --x: 92; }
#scene .scene-branch:nth-child(3):nth-last-child(3) { --mask: var(--px-scene-branch-c); --x: 120; }
#scene .scene-branch:nth-child(4):nth-last-child(2) { --mask: var(--px-scene-branch-r1); --x: 148; }
#scene .scene-branch:nth-child(5):nth-last-child(1) { --mask: var(--px-scene-branch-r2); --x: 176; }
#scene .scene-branch::before { content: ''; position: absolute; inset: 0; background: var(--lean);
  -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat; }
/* its landmark at the branch's end on the horizon (x 64/92/120/148/176, y 86), the card's kind, or mist */
#scene .scene-branch::after { content: ''; position: absolute; left: calc(var(--x) * 1px * var(--sc)); top: calc(86px * var(--sc)); width: calc(12px * var(--sc)); height: calc(12px * var(--sc));
  transform: translate(-50%, -100%); background: var(--px-scene-mist, none) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
#scene .scene-branch[data-kind=fight]::after { background-image: var(--px-scene-mark-fight, var(--px-scene-mist, none)); }
#scene .scene-branch[data-kind=shop]::after { background-image: var(--px-scene-mark-shop, var(--px-scene-mist, none)); }
#scene .scene-branch[data-kind=rest]::after { background-image: var(--px-scene-mark-rest, var(--px-scene-mist, none)); }
#scene .scene-branch[data-kind=story]::after { background-image: var(--px-scene-mark-story, var(--px-scene-mist, none)); }
#scene .scene-branch[data-kind=gamble]::after { background-image: var(--px-scene-mark-gamble, var(--px-scene-mist, none)); }
#scene .scene-branch[data-kind=hold]::after { background-image: var(--px-scene-mark-hold, var(--px-scene-mist, none)); }
#scene .scene-branch[data-kind=gate]::after { background-image: var(--px-scene-mark-gate, var(--px-scene-mist, none)); }
#scene .scene-branch[data-kind=boss]::after { background-image: var(--px-scene-mark-boss, var(--px-scene-mist, none)); }
#scene .scene-branch[data-kind=loot]::after { background-image: var(--px-scene-mark-loot, var(--px-scene-mist, none)); }
#scene .scene-branch[data-kind=exit]::after { background-image: var(--px-scene-mark-exit, var(--px-scene-mist, none)); }
#scene .scene-branch[data-lean=sun]::after { filter: drop-shadow(0 0 2px rgba(226, 180, 100, .6)); }
#scene .scene-branch[data-lean=night]::after { filter: drop-shadow(0 0 2px rgba(108, 142, 208, .6)); }
/* the light over it all: gold by day, rose at the Gloam, indigo and darker into Deep Night (data-light: the moon phase 0..7) */
#scene::after { content: ''; position: absolute; inset: 0; background-color: transparent; transition: background-color 1.2s ease; }
#scene:is([data-light='0'], [data-light='1'], [data-light='7'])::after { background-color: rgba(240, 200, 120, .05); }
#scene:is([data-light='2'], [data-light='3'])::after { background-color: rgba(170, 80, 110, .08); }
#scene:is([data-light='4'], [data-light='5'])::after { background-color: rgba(6, 6, 30, .45); }
#scene[data-light='6']::after { background-color: rgba(150, 160, 180, .04); }
/* the hero, from behind, at the foot of the road (art 120, 168); its 4 frames step only while it walks */
#scene .scene-hero { position: absolute; z-index: 1; left: calc(50% - 6px * var(--sc)); top: calc(var(--vy) + 68px * var(--sc));
  width: calc(12px * var(--sc)); height: calc(16px * var(--sc)); overflow: hidden; }
#scene .scene-hero::before { content: ''; position: absolute; left: 0; top: 0; width: 400%; height: 100%;
  background: var(--px-hero-walk, none) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
#scene.scene-walk .scene-hero::before { animation: hero-steps .6s steps(4) infinite; }
@keyframes hero-steps { to { transform: translateX(-100%); } }
/* the walk: toward the vanishing point, turned toward the branch taken; the event's scene is passed by */
#scene.scene-walk > :is(.scene-sky, .scene-branches) { animation: scene-walk .6s ease-in-out forwards; }
/* each walking layer keeps its first raster while it scales (else Chrome repaints it at every new scale, the masks too) */
#scene > :is(.scene-sky, .scene-place, .scene-branches), #scene .scene-hero::before { will-change: transform; } /* kept: the layers are made once, not again at every step */
/* kinds with no scene of their own: nothing to move (an empty layer still costs a full-screen composite) */
#scene:is([data-kind=road], [data-kind=loot], [data-kind=exit]).scene-walk > .scene-place { animation: none; will-change: auto; }
#scene.scene-walk > .scene-place { animation: scene-pass .6s ease-in forwards; }
@keyframes scene-walk { to { transform: translateX(calc(var(--turn, 0) * -56px * var(--sc))) scale(1.25); } }
@keyframes scene-pass { to { transform: translateX(calc(var(--turn, 0) * -56px * var(--sc))) scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #scene.scene-walk > :is(.scene-sky, .scene-road, .scene-branches, .scene-place) { animation: scene-fade .6s ease forwards; }
  #scene.scene-walk .scene-hero::before { animation: none; }
}
@keyframes scene-fade { to { opacity: .35; } }
/* with the scene in, the old board skies and the bottom strip go; the panel's veil thins so the event's scene shows */
body:has(#scene) #table { background: none; }
body:has(#scene) #table::before { display: none; }
body:has(#scene) #overlay { background: radial-gradient(ellipse at 50% 42%, rgba(5, 4, 7, .2), rgba(5, 4, 7, .55)); }

/* ---------- the title (owner: 'improve the title screen and logo'; engine's #overlay.title-screen) ----------
   Full-bleed, no panel box: .title-scene behind, the floor's road at its vanishing point (the designer's title picture until
   the road is made), slowly breathing: a lantern glow that swells and settles, motes drifting up, a glint along the logo's
   thread. h1.title-logo is the designer's logo (--px-logo, 136x60) at 2x on a phone, 3x on a desktop, a third of the way
   down (its words kept for screen readers); the blurb and credit small under it; .title-choices as card plates in the lower
   half, the first lit rune-blue; the stats small. Transform and opacity only, slow (nothing blinks); reduced motion: still. */
#overlay.title-screen { padding: 0; background: #050407; overflow: hidden; }
#overlay #panel.title-screen { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: none;
  height: 100%; max-height: none; padding: 0 12px 52px; border: 0; border-image: none; background: none; box-shadow: none; overflow: hidden; animation: none; zoom: 1; }
#overlay #panel.title-screen::before { display: none; }
#overlay #panel.title-screen > .title-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(to bottom, rgba(5, 4, 7, .25), rgba(5, 4, 7, .1) 40%, rgba(5, 4, 7, .75) 75%, rgba(5, 4, 7, .92)),
    var(--px-scene-road, var(--px-title, none)) 50% 42% / cover no-repeat, #050407; image-rendering: pixelated; }
#overlay #panel.title-screen > :not(.title-scene) { position: relative; z-index: 1; }
/* the lantern at the road's side, breathing */
#overlay #panel.title-screen > .title-scene::before { content: ''; position: absolute; left: 50%; top: 42%; width: 260px; height: 200px; margin: -100px 0 0 -130px;
  background: radial-gradient(ellipse at 50% 55%, rgba(244, 196, 110, .22), rgba(244, 160, 80, .08) 40%, transparent 70%);
  animation: title-lantern 5s ease-in-out infinite alternate; }
@keyframes title-lantern { from { opacity: .65; } to { opacity: 1; } } /* opacity only: a scale would repaint the glow every frame */
/* motes: a few soft points of light rising slowly through the dusk */
#overlay #panel.title-screen > .title-scene::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 200%; opacity: .7;
  background-image: radial-gradient(circle, rgba(220, 200, 150, .7) 0 1px, transparent 2px), radial-gradient(circle, rgba(120, 170, 220, .55) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(220, 200, 150, .5) 0 1px, transparent 2px);
  background-size: 97px 131px, 151px 173px, 211px 89px; background-position: 13px 40px, 71px 5px, 140px 60px;
  animation: title-motes 60s linear infinite; will-change: transform; }
@keyframes title-motes { to { transform: translateY(-50%); } }
/* the logo, a third of the way down, a glint running along its thread (43% down the logo, across the emblem) */
#overlay #panel.title-screen h1.title-logo { flex: none; width: 272px; height: 120px; margin: max(8px, calc(30vh - 120px)) auto 6px; padding: 0; overflow: hidden;
  font-size: 0; color: transparent; text-shadow: none; letter-spacing: 0; background: var(--px-logo, none) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
#overlay #panel.title-screen h1.title-logo::after { content: ''; position: absolute; left: 35%; top: 39%; width: 12px; height: 8px; margin: 0; border: 0; box-shadow: none;
  background: linear-gradient(to right, transparent, rgba(255, 244, 200, .9), transparent); opacity: 0; animation: title-glint 7s ease-in-out 2s infinite; }
#overlay #panel.title-screen h1.title-logo::before { display: none; }
@keyframes title-glint { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: .9; } 22%, 100% { opacity: 0; transform: translateX(84px); } }
@media (min-width: 900px) and (min-height: 700px) { #overlay #panel.title-screen h1.title-logo { width: 408px; height: 180px; } #overlay #panel.title-screen h1.title-logo::after { width: 18px; height: 12px; animation-name: title-glint3; } }
@keyframes title-glint3 { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: .9; } 22%, 100% { opacity: 0; transform: translateX(126px); } }
#overlay #panel.title-screen .title-blurb { flex: none; margin: 4px 8px 2px; font-size: var(--t-small); line-height: var(--lh-small); font-style: normal; color: var(--bone); text-shadow: 1px 1px 0 #000; }
#overlay #panel.title-screen .title-credit { flex: none; margin: 0 0 4px; font-size: calc(16px / 1.5); line-height: 12px; color: var(--bone2); opacity: .85; }
/* the buttons: card plates in the lower half, big for a thumb; the first (Begin or Resume) lit */
#overlay #panel.title-screen .title-choices { margin: auto 0 0; width: 100%; max-width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#overlay #panel.title-screen .title-choices > .choice.title-choice { grid-column: auto; min-height: 56px; margin: 0; padding: 6px 10px; display: grid; place-items: center;
  font-family: var(--read); font-size: var(--t-body); line-height: var(--lh-body); color: var(--bone);
  background: linear-gradient(to bottom, #1c1a22, #121016); border: 2px solid #4a4250; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #121016, inset 0 0 0 3px #2c2832, 0 3px 0 #000, 0 6px 12px rgba(0, 0, 0, .5); }
#overlay #panel.title-screen .title-choices > .choice.title-choice:first-child { grid-column: 1 / -1; min-height: 64px; font-size: var(--t-num); line-height: 32px; color: #dff0ff;
  border-color: #5aa8dc; background: linear-gradient(to bottom, #16283a, #0c1620);
  box-shadow: inset 0 0 0 2px #0c1620, inset 0 0 0 3px #2e5a7c, 0 3px 0 #000, 0 0 16px rgba(76, 174, 244, .35); text-shadow: 1px 0 0 currentColor, 2px 2px 0 #000; }
#overlay #panel.title-screen .title-choices > .choice.title-choice:nth-child(2):last-child, #overlay #panel.title-screen .title-choices > .choice.title-choice:nth-child(4):last-child { grid-column: 1 / -1; }
#overlay #panel.title-screen .title-stats { flex: none; order: 9; margin: 8px 0 0; font-size: calc(16px / 1.5); line-height: 12px; color: var(--bone2); }
@media (prefers-reduced-motion: reduce) { #overlay #panel.title-screen > .title-scene::before, #overlay #panel.title-screen > .title-scene::after, #overlay #panel.title-screen h1.title-logo::after { animation: none; } }
/* the HUD's floor line beside a long light line (the Gloam and its mood, signed light) may take a third line on a phone
   rather than lose its end */
@media (max-width: 420px) { #hud .stat.floor, #hud:has(> #moon:not(.hidden)) .stat.floor { -webkit-line-clamp: 3; line-clamp: 3; } }

/* ---------- weapons on fight cards (ENGINE.md): the type mark, modifier chips, raised numbers, trait cards, a lowered cost ---------- */
.fcard-wmark { position: absolute; top: 3px; right: 3px; z-index: 2; width: 16px; height: 16px; pointer-events: none; filter: drop-shadow(1px 1px 0 var(--void)); }
.fcard-wmark img.px { display: block; width: 16px; height: 16px; }
.fcard:has(.fcard-wmark) .fcard-lv { right: 21px; }
.fcard-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; margin: -1px 0 1px; }
.fcard-mod { display: inline-flex; align-items: center; gap: 1px; height: 14px; padding: 0 3px 0 1px; font-family: var(--pix); font-size: 10px; line-height: 1;
  color: #f4e4c0; background: #1a1418; border: 1px solid #6a5434; border-radius: 3px; white-space: nowrap; }
.fcard-mod img.px { width: 12px; height: 12px; }
.fcard-text b.fcard-num-up { color: #f4d27a; font-weight: 800; text-shadow: 0 0 4px rgba(244, 210, 122, .55), 1px 1px 0 var(--void); }
.fcard.fcard-trait { border: 6px solid transparent; border-image: var(--px-frame-trait) 8 / 6px / 0 stretch;
  background: radial-gradient(ellipse 90% 45% at 50% 30%, #3e2a1c, #120c0a 80%); box-shadow: 0 4px 0 var(--void), 0 0 10px rgba(247, 118, 34, .35); }
.fcard.fcard-trait .fcard-name { color: #f4d27a; }
.fcard-cost.fcard-cost-free { color: #fff4c0; text-shadow: 0 0 4px #f4d27a, 1px 1px 0 var(--void); animation: cost-free 1.6s ease-in-out infinite; }
@keyframes cost-free { 50% { filter: brightness(1.35) drop-shadow(0 0 3px #f4d27a); } }
.fighter.fx-burn::after { background-image: var(--px-fx-burn); animation: fx-rise .6s ease-out; }
.fighter.fx-weaken::after { background-image: var(--px-fx-curse); animation: fx-pop .45s ease-out; filter: grayscale(.6) brightness(1.2); }
.fx-num.fx-num-burn { color: #f7a040; text-shadow: 1px 1px 0 var(--void), 0 0 6px rgba(247, 118, 34, .8); }
.fx-num.fx-num-weaken { color: #c8b0d8; text-shadow: 1px 1px 0 var(--void), 0 0 6px rgba(181, 80, 136, .6); }
@media (prefers-reduced-motion: reduce) { .fcard-cost.fcard-cost-free { animation: none; } }
/* ---------- the HUD's floor line: icons for its words, two lines at most on a phone ----------
   #floorname > span.fl-floor '1/3', span.fl-place, span.fl-steps.to-stairs|to-end|at-stairs '7' (full words: its title).
   The icons are masks in the line's own colour, 7x7 drawn at 2x. */
#hud .stat.floor { display: grid; grid-template-columns: auto auto; grid-template-areas: 'fl st' 'pl pl';
  justify-content: end; justify-items: end; align-items: center; gap: 1px 10px; overflow: visible; text-wrap: wrap;
  -webkit-line-clamp: none; line-clamp: none; letter-spacing: 0; line-height: 17px; }
#hud .stat.floor > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#hud .stat.floor .fl-floor { grid-area: fl; }
#hud .stat.floor .fl-steps { grid-area: st; color: #e8dcb8; }
#hud .stat.floor .fl-place { grid-area: pl; white-space: normal; text-align: right; }
#hud .stat.floor :is(.fl-floor, .fl-steps)::before { content: ''; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--fl-ic) 0 0 / 100% 100% no-repeat; mask: var(--fl-ic) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; opacity: .8; }
#hud .stat.floor .fl-floor { --fl-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1'/%3E%3Crect x='1' y='2' width='5' height='1'/%3E%3Crect x='0' y='4' width='7' height='1'/%3E%3Crect x='0' y='6' width='7' height='1'/%3E%3Crect x='0' y='5' width='1' height='1'/%3E%3Crect x='6' y='5' width='1' height='1'/%3E%3C/svg%3E"); }
#hud .stat.floor .fl-steps { --fl-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='2' height='7'/%3E%3Crect x='2' y='2' width='2' height='5'/%3E%3Crect x='4' y='4' width='2' height='3'/%3E%3Crect x='6' y='6' width='1' height='1'/%3E%3C/svg%3E"); }
#hud .stat.floor .fl-steps.to-end { --fl-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='5' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='5'/%3E%3Crect x='6' y='2' width='1' height='5'/%3E%3Crect x='3' y='4' width='1' height='1'/%3E%3C/svg%3E"); }
#hud .stat.floor .fl-steps.at-stairs::before { display: none; }
@media (min-width: 700px) {
  #hud .stat.floor { grid-template-columns: auto auto auto; grid-template-areas: 'fl pl st'; gap: 0 12px; }
  #hud .stat.floor .fl-place { white-space: nowrap; }
}
@media (max-width: 420px) {
  #hud .stat.floor, #hud:has(> #moon:not(.hidden)) .stat.floor { font-size: 16px; line-height: 16px; -webkit-line-clamp: none; line-clamp: none; display: grid; }
  #hud .stat.floor .fl-place { font-size: 13px; line-height: 14px; }
  /* the light's box: the words 'moves as you walk' go (the meter says it), the slim meter is the strip */
  #hud #moon.signed .moon-next { display: none; }
  #hud:has(> #moon:not(.hidden)) #moon.signed { grid-template-areas: 'art name' 'art word'; grid-template-columns: auto auto; }
}
/* the two-sided light: the slim meter along the box's foot (104x7) in place of the old strip; the full one 208x28 */
#hud #moon.signed::before { display: none; }
#moon .light-meter.light-slim { position: absolute; left: 50%; bottom: -3px; translate: -50% 0; width: 104px; height: 7px;
  background: var(--px-light-slim-0) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; pointer-events: none; }
.light-meter:not(.light-slim) { width: 208px; max-width: 100%; height: 28px; margin: 4px auto; background: var(--px-light-meter-0) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.light-meter.light-n4 { background-image: var(--px-light-meter-n4); } #moon .light-meter.light-slim.light-n4 { background-image: var(--px-light-slim-n4); }
.light-meter.light-n3 { background-image: var(--px-light-meter-n3); } #moon .light-meter.light-slim.light-n3 { background-image: var(--px-light-slim-n3); }
.light-meter.light-n2 { background-image: var(--px-light-meter-n2); } #moon .light-meter.light-slim.light-n2 { background-image: var(--px-light-slim-n2); }
.light-meter.light-n1 { background-image: var(--px-light-meter-n1); } #moon .light-meter.light-slim.light-n1 { background-image: var(--px-light-slim-n1); }
.light-meter.light-0 { background-image: var(--px-light-meter-0); } #moon .light-meter.light-slim.light-0 { background-image: var(--px-light-slim-0); }
.light-meter.light-p1 { background-image: var(--px-light-meter-p1); } #moon .light-meter.light-slim.light-p1 { background-image: var(--px-light-slim-p1); }
.light-meter.light-p2 { background-image: var(--px-light-meter-p2); } #moon .light-meter.light-slim.light-p2 { background-image: var(--px-light-slim-p2); }
.light-meter.light-p3 { background-image: var(--px-light-meter-p3); } #moon .light-meter.light-slim.light-p3 { background-image: var(--px-light-slim-p3); }
.light-meter.light-p4 { background-image: var(--px-light-meter-p4); } #moon .light-meter.light-slim.light-p4 { background-image: var(--px-light-slim-p4); }
@media (max-width: 420px) {
  /* the light's box, narrower: its word beside its name, the steps line under both (room for a long place name) */
  #hud:has(> #moon:not(.hidden)) #moon:not(.signed) { grid-template-areas: 'art name word' 'art next next'; grid-template-columns: auto auto 1fr; column-gap: 6px; }
  #hud:has(> #moon:not(.hidden)) #moon:not(.signed)::after { align-self: center; }
  #hud:has(> #moon:not(.hidden)) #moon:not(.signed) .moon-next::before { content: none; }
}

/* ---------- a reward roll's deck (ENGINE.md 'Rolls hide their odds'): all show, so a flourish of its own, in the same time.
   1. the 7 backs fan out from a stack at the middle, the middle card first (--fi -3..3 by place);
   2. one pale rune-light shimmer runs across the backs, card after card; 3. the drawn card's lift is a single big one,
   high and tilted, lit from under; its rarity still shows as it turns. Each runs once ---------- */
.fd-roll .fd-spread > .fd-back-card { overflow: hidden; --fi: 0; }
.fd-roll .fd-spread > .fd-back-card:nth-child(1) { --fi: -3; } .fd-roll .fd-spread > .fd-back-card:nth-child(2) { --fi: -2; }
.fd-roll .fd-spread > .fd-back-card:nth-child(3) { --fi: -1; } .fd-roll .fd-spread > .fd-back-card:nth-child(5) { --fi: 1; }
.fd-roll .fd-spread > .fd-back-card:nth-child(6) { --fi: 2; } .fd-roll .fd-spread > .fd-back-card:nth-child(7) { --fi: 3; }
.fd-roll:not(.fd-gathering, .fd-deck, .fd-riffling, .fd-drawn) .fd-spread > .fd-back-card {
  --fa: max(var(--fi), calc(-1 * var(--fi)));
  animation: fd-fan .5s cubic-bezier(.2, .7, .25, 1) calc(var(--fa) * 50ms) both; transform-origin: 50% 120%; }
@keyframes fd-fan {
  0% { opacity: 0; transform: translate(calc(var(--fi) * -34px), 14px) rotate(calc(var(--fi) * 7deg)) scale(.86); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: none; } }
.fd-roll .fd-spread > .fd-back-card::after { content: ''; position: absolute; inset: -2px; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(143, 208, 255, .22) 42%, rgba(232, 246, 255, .55) 50%, rgba(143, 208, 255, .22) 58%, transparent 70%) 0 0 / 300% 100% no-repeat; }
.fd-roll:not(.fd-gathering, .fd-deck, .fd-riffling, .fd-drawn) .fd-spread > .fd-back-card::after {
  animation: fd-shimmer .36s linear calc(300ms + (var(--fi) + 3) * 35ms) both; }
@keyframes fd-shimmer { 0% { opacity: 1; background-position: 100% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }
.fd-roll .fd-flip.fd-lift { transform: translateX(var(--fd-from)) translateY(-28px) rotate(-7deg) scale(1.2);
  transition: transform .15s cubic-bezier(.2, .9, .3, 1.25); }
.fd-roll .fd-flip.fd-lift > .face.back { box-shadow: 0 16px 10px -4px rgba(0, 0, 0, .55), 0 0 0 1px #8fd0ff; }
.fd-roll .fd-flip:is(.fd-lift, .fd-slide):not(.fd-turn)::after { opacity: 1; --fd-glow: rgba(143, 208, 255, .55); }
@media (prefers-reduced-motion: reduce) {
  .fd-roll .fd-spread > .fd-back-card, .fd-roll .fd-spread > .fd-back-card::after { animation: none !important; }
}