:root {
  --bg: #17130f;
  --panel: #241d17;
  --panel-2: #2f261e;
  --line: #4a3b2e;
  --ink: #f3e9d8;
  --dim: #b5a48d;
  --ember: #f08a24;
  --gold: #e9c46a;
  --good: #7fc97a;
  --bad: #e2574c;
  --cool: #6fb7d6;
  --radius: 8px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
button { font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--ember); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--ember); border-color: var(--ember); color: #1b1208; font-weight: 700; }
button.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
button.small { padding: 2px 7px; font-size: 12px; }
select { font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
h1, h2, h3 { margin: 0; font-weight: 700; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin-bottom: 6px; }

#app { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }

/* top bar */
.top { display: flex; align-items: center; gap: 18px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.top .title { font-weight: 800; letter-spacing: .04em; color: var(--ember); }
.fire { display: flex; align-items: center; gap: 3px; }
.fire i { width: 13px; height: 16px; border-radius: 3px; background: #3a2d22; border: 1px solid var(--line); display: block; }
.fire i.lit { background: var(--ember); border-color: var(--ember); }
.fire i.boss { border-color: var(--bad); }
.stat { color: var(--dim); }
.stat b { color: var(--ink); }
.bossbar { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--bad); border-radius: var(--radius); }
.stage { width: 46px; height: 10px; background: #3a2d22; border-radius: 5px; overflow: hidden; display: inline-block; }
.stage span { display: block; height: 100%; background: var(--bad); }
.spacer { flex: 1; }

/* middle */
.mid { display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
.board { position: relative; min-height: 0; overflow: hidden; }
.board svg { width: 100%; height: 100%; display: block; }
.hint { position: absolute; left: 12px; top: 10px; background: rgba(23, 19, 15, .9); border: 1px solid var(--gold); border-radius: var(--radius); padding: 8px 12px; max-width: 420px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.side { background: var(--panel); border-left: 1px solid var(--line); padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.market { display: grid; gap: 6px; }
.mcard { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 7px; }
.mcard .thumb { width: 44px; height: 44px; border-radius: 5px; background-size: cover; background-position: center; background-color: #1b1510; }
.mcard .nm { font-weight: 600; }
.mcard .tx { font-size: 11.5px; color: var(--dim); }
.log { font-size: 12px; color: var(--dim); display: flex; flex-direction: column-reverse; gap: 2px; max-height: 190px; overflow: auto; }

/* hex board */
.space { fill: rgba(233, 196, 106, .08); stroke: var(--gold); stroke-dasharray: 5 5; cursor: pointer; }
.space:hover { fill: rgba(233, 196, 106, .22); }
.tile-hit { fill: transparent; }
.tile-hit.go { fill: rgba(127, 201, 122, .28); stroke: var(--good); stroke-width: 3; cursor: pointer; }
.wall { stroke: #0e0a07; stroke-width: 7; stroke-linecap: round; opacity: .85; }
.token { cursor: pointer; }
.token .ring { fill: #1b1510; stroke-width: 4; }
.token.hero .ring { stroke: var(--cool); }
.token.enemy .ring { stroke: var(--bad); }
.token.sel .ring { stroke: var(--gold); stroke-width: 6; }
.token.aim .ring { stroke: var(--good); stroke-width: 6; }
.token text { fill: var(--ink); font-size: 13px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #17130f; stroke-width: 4px; }
.intent { stroke: var(--bad); stroke-width: 3; fill: none; }
.intent.walk { stroke-dasharray: 6 6; opacity: .6; }
.intent-n { fill: var(--bad); }
.intent-t { fill: #fff; font-size: 13px; font-weight: 800; text-anchor: middle; }
.env { fill: rgba(23, 19, 15, .85); stroke-width: 2; }
.env.good { stroke: var(--good); }
.env.bad { stroke: var(--bad); }
.envt { font-size: 10px; font-weight: 700; text-anchor: middle; fill: var(--ink); }

/* bottom: hero panel */
.bottom { background: var(--panel); border-top: 1px solid var(--line); padding: 10px 14px; display: grid; grid-template-columns: 250px 1fr 230px; gap: 16px; align-items: start; }
.heroes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.me .name { font-weight: 700; font-size: 15px; }
.bars { display: flex; gap: 12px; margin: 4px 0; flex-wrap: wrap; }
.pips { display: inline-flex; gap: 2px; vertical-align: middle; }
.pips i { width: 9px; height: 12px; border-radius: 2px; background: #3a2d22; display: block; }
.pips.hp i.f { background: var(--bad); }
.pips.en i.f { background: var(--gold); }
.statline { color: var(--dim); font-size: 12.5px; }
.statline b { color: var(--ink); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.chip { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 10px; border: 1px solid; }
.chip.buff { color: var(--good); border-color: var(--good); }
.chip.debuff { color: var(--bad); border-color: var(--bad); }
.hand { display: flex; gap: 8px; flex-wrap: wrap; }
.card { width: 148px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card.dead { opacity: .55; }
.card .art { height: 62px; background-size: cover; background-position: center 30%; background-color: #1b1510; }
.card .body { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card .nm { font-weight: 700; }
.card .tx { font-size: 11.5px; color: var(--dim); }
.card .perk { font-size: 11.5px; color: var(--cool); }
.card .perk.off { color: #7a6c5c; text-decoration: line-through; }
.tiers { display: flex; gap: 4px; margin-top: auto; }
.tiers button { flex: 1; padding: 3px 0; font-size: 12px; }
.acts { display: flex; flex-direction: column; gap: 6px; }
.acts .row { display: flex; gap: 6px; flex-wrap: wrap; }
.toggles { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--dim); }

.feed { position: absolute; left: 12px; bottom: 10px; max-width: 520px; background: rgba(23, 19, 15, .9); border: 1px solid var(--line); border-left: 3px solid var(--ember); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.eventcard { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
.eventcard .art { height: 190px; border-radius: var(--radius); background-size: cover; background-position: center top; background-color: #1b1510; border: 1px solid var(--line); }

/* overlays */
.overlay { position: fixed; inset: 0; background: rgba(10, 8, 6, .72); display: grid; place-items: center; z-index: 10; }
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; width: min(560px, 92vw); display: flex; flex-direction: column; gap: 12px; }
.dialog h2 { font-size: 20px; }
.dialog .opts { display: flex; flex-direction: column; gap: 6px; }
.dialog .opts button { text-align: left; }
.setup-row { display: grid; grid-template-columns: 60px 1fr 1fr 1fr; gap: 8px; align-items: center; }
.big { font-size: 28px; font-weight: 800; }
#toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--bad); color: #fff; padding: 8px 14px; border-radius: var(--radius); opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 20; }
#toast.show { opacity: 1; }

.art.none { display: grid; place-items: center; color: var(--dim); font-size: 12px; text-align: center; padding: 8px; background-image: repeating-linear-gradient(45deg, #221a13 0 10px, #1b1510 10px 20px); }

/* narrower windows: Hero details and actions side by side, hand in one scrolling row */
@media (max-width: 1150px) {
  #app { height: auto; min-height: 100%; grid-template-rows: auto minmax(420px, 62vh) auto; }
  .mid { grid-template-columns: 1fr 250px; }
  .bottom { grid-template-columns: 1fr 1fr; }
  .bottom > div:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .hand { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .card { flex: 0 0 148px; }
}

/* ---- clearer options, guidance, tutorial, lobby ---- */
.board { display: flex; flex-direction: column; }
.board > svg { flex: 1; min-height: 0; }
.guide { padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--panel); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14.5px; }
.guide.go { border-left: 4px solid var(--good); }
.guide.choose { border-left: 4px solid var(--gold); background: #33291c; }
.guide.wait { border-left: 4px solid var(--cool); color: var(--dim); }
.guide .wide { flex-basis: 100%; color: var(--dim); }
.tierpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex-basis: 100%; }
.tierpick button { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 8px 10px; border-color: var(--good); }
.tierpick button:disabled { border-color: var(--line); }
.tierpick .tname { font-weight: 700; color: var(--gold); }
.tierpick em { color: var(--cool); font-style: normal; }
button.can { border-color: var(--good); box-shadow: inset 0 0 0 1px rgba(127, 201, 122, .35); }
button.good { border-color: var(--good); }
button.bad { border-color: var(--bad); }

.card { cursor: default; position: relative; }
.card.playable { border-color: var(--good); box-shadow: 0 0 0 1px var(--good), 0 0 14px rgba(127, 201, 122, .25); cursor: pointer; }
.card.playable:hover { transform: translateY(-3px); }
.card.open { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); transform: translateY(-5px); }
.card.blocked { opacity: .55; }
.card .art { position: relative; }
.card .cost { position: absolute; left: 6px; top: 6px; background: rgba(23, 19, 15, .85); border: 1px solid var(--gold); color: var(--gold); border-radius: 10px; padding: 0 7px; font-size: 11.5px; font-weight: 700; }
.card .why { font-size: 11.5px; color: var(--bad); font-weight: 600; }
.card .purge { margin-top: auto; align-self: flex-start; opacity: .7; font-size: 11px; }
.mcard.afford { border-color: var(--good); }
.mcard .buy { display: flex; flex-direction: column; gap: 3px; }

@keyframes pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 2px var(--gold); } 50% { box-shadow: 0 0 0 5px rgba(233, 196, 106, .35); } }
svg.choosing .token:not(.aim) { opacity: .5; }
svg.choosing .intent, svg.choosing .intent-n, svg.choosing .intent-t { opacity: .25; }
.token.aim .ring { animation: pulse 1s infinite; }
.token.hero.ally .ring { stroke: #8a8f98; }
.token.boss .ring { stroke-width: 6; }
.tile-hit.go { animation: pulse 1s infinite; }
.space { animation: pulse 1.2s infinite; }
.space.picked { fill: transparent; stroke: var(--good); stroke-dasharray: none; stroke-width: 3; animation: none; }
.coach-target { animation: glow 1.2s infinite; border-radius: 6px; }

.coach { position: absolute; right: 12px; bottom: 10px; width: min(330px, 46%); background: #2b2233; border: 1px solid #8f6fd0; border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); z-index: 5; }
.coach h3 { color: #c3acf0; margin: 0; }
.coach .nm { font-weight: 700; font-size: 16px; }
.waiting { color: var(--gold); font-weight: 600; }
.feed h3 { margin-bottom: 2px; }

.party { display: flex; flex-direction: column; gap: 6px; }
.party .pl { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; }
.rdy { color: var(--good); font-weight: 700; }
.nrdy { color: var(--dim); }
details.abilities { margin-top: 6px; font-size: 12px; color: var(--dim); }
details.abilities summary { cursor: pointer; color: var(--ink); }
details.abilities div { margin-top: 4px; }

.overlay.solid { background: var(--bg); }
.dialog.wide { width: min(720px, 94vw); }
.dialog.help { width: min(680px, 94vw); max-height: 90vh; overflow: auto; }
.dialog.help ul { margin: 0; padding-left: 20px; }
.dialog .opts button { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.dialog .res { font-weight: 800; color: var(--bad); white-space: nowrap; }
.dialog .res.zero { color: var(--good); }
.title.big { color: var(--ember); letter-spacing: .06em; }
.field { display: flex; align-items: center; gap: 8px; color: var(--dim); }
.field input { font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; }
.codebox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.codebox .big { letter-spacing: .15em; color: var(--gold); }
.setup-row { grid-template-columns: 60px 1fr 1fr 1fr auto; }
button.ready { min-width: 110px; }

/* ---- narrow windows: everything needed for a turn on one screen, no scrolling ---- */
.narrow-only { display: none; }
#app.narrow { height: 100vh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
#app.narrow .narrow-only { display: inline-block; }
#app.narrow .top { gap: 10px; padding: 6px 10px; }
#app.narrow .top .title, #app.narrow .top [data-a=leave] { display: none; }
#app.narrow .mid { display: block; min-height: 0; }
#app.narrow .board { height: 100%; }
#app.narrow .guide { padding: 6px 10px; font-size: 13.5px; }
#app.narrow .tierpick { grid-template-columns: 1fr; gap: 4px; }
#app.narrow .tierpick button { flex-direction: row; gap: 10px; align-items: baseline; padding: 6px 10px; }
#app.narrow .side { display: none; }
#app.narrow .side.open { display: flex; position: fixed; inset: 0 0 0 auto; width: min(360px, 92vw); z-index: 9; border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(0, 0, 0, .6); }
#app.narrow .closer { align-self: flex-end; }
#app.narrow .bottom { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
#app.narrow .me { order: 1; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
#app.narrow .me .bars { margin: 0; }
#app.narrow .me .more { display: none; flex-basis: 100%; }
#app.narrow.hero-open .me .more { display: block; }
#app.narrow .acts { order: 2; gap: 4px; }
#app.narrow .acts > h3 { display: none; }
#app.narrow .handwrap { order: 3; }
#app.narrow .handwrap > h3 { margin-bottom: 4px; }
#app.narrow .hand { flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 6px; gap: 6px; }
#app.narrow .card { flex: 0 0 132px; width: 132px; }
#app.narrow .card .art { height: 40px; }
#app.narrow .card .tx { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#app.narrow .card .perk, #app.narrow .card .purge { display: none; }
#app.narrow .feed { max-width: 62%; font-size: 12px; padding: 6px 9px; }
#app.narrow .coach { width: min(300px, 60%); font-size: 13px; padding: 9px 11px; }

/* ---- look and feel: Rio's status tokens, motion, atmosphere ---- */
.top .title, .title.big, .dialog h2, .fx-banner b { font-family: Copperplate, "Copperplate Gothic Bold", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: .06em; }
.board { background: radial-gradient(ellipse at 50% 45%, #3b2a1b 0%, #1e1711 58%, #110d09 100%); }
button, .card, .mcard { transition: border-color .12s, box-shadow .12s, transform .12s, background-color .12s; }
button:active:not(:disabled) { transform: translateY(1px); }
.overlay.home { background: linear-gradient(rgba(17, 13, 9, .25), rgba(17, 13, 9, .9)), url(assets/key/gate.png) center / cover no-repeat, var(--bg); }
.overlay.home .dialog { background: rgba(30, 23, 17, .88); backdrop-filter: blur(6px); box-shadow: 0 12px 50px rgba(0, 0, 0, .6); }
.title.big { font-size: 40px; text-shadow: 0 0 22px rgba(240, 138, 36, .55); }
.dialog { box-shadow: 0 14px 50px rgba(0, 0, 0, .55); }
@keyframes dlg { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.dialog.enter { animation: dlg 240ms ease-out both; }

.sticon { width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin-right: 4px; object-fit: cover; }
.chip { display: inline-flex; align-items: center; padding: 1px 8px 1px 2px; }
.chip .sticon { width: 18px; height: 18px; margin-right: 5px; }
.top .chip { padding: 1px 8px; }
.st-ring { fill: none; stroke-width: 2; }
.st-ring.buff { stroke: var(--good); }
.st-ring.debuff { stroke: var(--bad); }
.st-nb { fill: #17130f; stroke: var(--ink); stroke-width: 1; }
.token text.st-n { font-size: 9.5px; stroke: none; fill: var(--ink); }
.token .shadow { fill: rgba(0, 0, 0, .45); }
.token .hp-bg { fill: #17130f; stroke: #0b0806; stroke-width: 1; }
.token .hp-f { fill: var(--bad); }
.token.hero .hp-f { fill: #58b368; }
.token text.hp-t { font-size: 9.5px; stroke-width: 2.5px; fill: #fff; }
.token text.sub { font-size: 10.5px; stroke-width: 3px; }
.token.boss .ring { stroke: #ff7a3c; }

.fire i { width: 12px; height: 17px; border-radius: 50% 50% 46% 46% / 78% 78% 30% 30%; }
.fire i.lit { background: linear-gradient(#ffd56a, var(--ember) 60%, #c8431f); box-shadow: 0 0 7px rgba(240, 138, 36, .7); animation: flicker 1.8s infinite ease-in-out; }
.fire i.lit:nth-child(2n) { animation-delay: -.6s; }
.fire i.lit:nth-child(3n) { animation-delay: -1.1s; }
@keyframes flicker { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(.9) translateY(1px); opacity: .85; } }
@keyframes flare { 0% { transform: scale(.2); filter: brightness(3); } 45% { transform: scale(1.9); filter: brightness(2); } 100% { transform: scale(1); filter: none; } }
.fire i.new { animation: flare both ease-out; }

@keyframes slide { from { transform: translate(var(--dx), var(--dy)); } to { transform: none; } }
@keyframes lunge { 0%, 100% { transform: none; } 45% { transform: translate(var(--dx), var(--dy)); } }
@keyframes shake { 0%, 100% { transform: none; filter: none; } 15% { transform: translate(-5px, 2px); filter: brightness(2.2); } 35% { transform: translate(5px, -2px); } 55% { transform: translate(-3px, 1px); } 75% { transform: translate(2px, 0); } }
@keyframes pop { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes tilein { 0% { transform: scale(.55); opacity: 0; } 70% { transform: scale(1.05); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ghost { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.6); } }
@keyframes floatup { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 12% { opacity: 1; transform: translateY(0) scale(1.25); } 25% { transform: translateY(-4px) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%); } }
@keyframes deal { from { opacity: 0; transform: translateY(26px) rotate(-3deg); } to { opacity: 1; transform: none; } }
.fx-slide { animation: slide both ease-in-out; }
.fx-lunge { animation: lunge both ease-out; }
.fx-shake { animation: shake both linear; }
.fx-pop, .fx-tile, .fx-ghost { transform-box: fill-box; transform-origin: center; }
.fx-pop { animation: pop both ease-out; }
.fx-tile { animation: tilein both ease-out; }
.fx-ghost { opacity: 0; animation: ghost both ease-in; pointer-events: none; }
.fx-float { opacity: 0; animation: floatup both ease-out; pointer-events: none; text-anchor: middle; font-size: 24px; font-weight: 900; paint-order: stroke; stroke: #17130f; stroke-width: 5px; transform-box: fill-box; transform-origin: center; }
.fx-float.dmg { fill: #ff6a5c; }
.fx-float.heal { fill: #8be28a; }
.fx-float.miss { fill: #d9d2c5; font-size: 16px; }
.fx-float.coin { fill: var(--gold); font-size: 16px; }
.fx-banner { position: absolute; left: 50%; top: 20%; opacity: 0; animation: banner both ease-out; pointer-events: none; z-index: 6; text-align: center; display: flex; flex-direction: column; gap: 2px; padding: 12px 34px; background: linear-gradient(90deg, transparent, rgba(17, 13, 9, .88) 18%, rgba(17, 13, 9, .88) 82%, transparent); white-space: nowrap; }
.fx-banner b { font-size: 30px; color: var(--gold); text-shadow: 0 0 18px rgba(240, 138, 36, .6); }
.fx-banner span { color: var(--dim); font-size: 13px; }
.fx-banner.boss b { color: #ff7a3c; font-size: 34px; }
.fx-deal { animation: deal both ease-out; }
#app.narrow .fx-banner b { font-size: 22px; }
#app.narrow .fx-banner.boss b { font-size: 24px; }

@media (prefers-reduced-motion: reduce) {
  .fx-slide, .fx-lunge, .fx-shake, .fx-pop, .fx-tile, .fx-deal, .fire i, .dialog.enter, .token.aim .ring, .tile-hit.go, .space { animation: none !important; }
  .fx-float, .fx-banner { animation-timing-function: step-end; }
}

/* "What just happened" sits under the board instead of over it, so it never hides a piece. */
.feed { position: static; max-width: none; border: 0; border-top: 1px solid var(--line); border-left: 3px solid var(--ember); border-radius: 0; background: var(--panel); padding: 5px 12px; font-size: 12.5px; color: var(--dim); }
.feed h3 { display: none; }
.feed div:last-child { color: var(--ink); }
#app.narrow .feed { max-width: none; padding: 4px 10px; }
.fx-banner.boss { top: 42%; }

/* ---- the hand as a card game: fanned cards, draw and discard piles, drag to play ---- */
.handwrap > h3 { display: none; }
.handzone { display: flex; align-items: flex-end; gap: 8px; }
.pilecol { flex: 0 0 70px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.plabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); text-align: center; line-height: 1.2; }
.plabel.tip { text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.orb { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; }
.orb b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; color: #2a1503; background: radial-gradient(circle at 35% 30%, #fff0b8, #eaa233 55%, #9a5410); box-shadow: 0 0 14px rgba(240, 138, 36, .65), inset 0 -3px 6px rgba(0, 0, 0, .3); }
.orb span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.pile { width: 52px; height: 72px; padding: 0; border-radius: 7px; display: grid; place-items: center; border: 2px solid #8a6a2c; background: repeating-linear-gradient(45deg, #5a2416 0 6px, #4a1c12 6px 12px); box-shadow: 2px 2px 0 #1b1510, 3px 3px 0 #8a6a2c, 5px 5px 0 #1b1510, 6px 6px 0 #6b5223; margin: 0 6px 6px 0; }
.pile b { min-width: 28px; height: 28px; padding: 0 5px; border-radius: 14px; display: grid; place-items: center; background: rgba(23, 19, 15, .88); border: 1px solid var(--gold); color: var(--gold); font-size: 14px; }
.pile.discard { background: var(--panel-2); border: 2px dashed var(--line); box-shadow: 2px 2px 0 #1b1510, 3px 3px 0 var(--line); }
.pile.discard b { border-color: var(--dim); color: var(--ink); }
@keyframes shuffle { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-6deg); } 40% { transform: translateX(6px) rotate(6deg); } 60% { transform: translateX(-4px) rotate(-4deg); } 80% { transform: translateX(4px) rotate(3deg); } }
.pile.fx-shuffle { animation: shuffle .7s ease-in-out; }

.fan { position: relative; flex: 1; min-width: 0; height: 156px; clip-path: inset(-400px -90px 0 -90px); }
.fan .empty { position: absolute; left: 0; right: 0; top: 60px; text-align: center; }
.fan .card, #app.narrow .fan .card { position: absolute; top: 8px; flex: none; width: 128px; height: 192px; transform-origin: 50% 130%; transform: translateY(var(--lift)) rotate(var(--rot)); touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 4px 10px rgba(0, 0, 0, .55); cursor: grab; }
.fan .card.blocked, .fan .card.dead { opacity: 1; filter: saturate(.45) brightness(.7); cursor: default; }
.fan .card.playable { box-shadow: 0 0 0 1px var(--good), 0 0 14px rgba(127, 201, 122, .3), 0 4px 10px rgba(0, 0, 0, .55); }
.fan .card:hover, .fan .card.sel { transform: translateY(-50px) rotate(0deg) scale(1.12); z-index: 60 !important; filter: none; }
.fan .card.sel { box-shadow: 0 0 0 2px var(--gold), 0 8px 22px rgba(0, 0, 0, .6); }
.fan .card.lifted { visibility: hidden; }
.fan .card .art, #app.narrow .fan .card .art { height: 56px; flex: none; }
.fan .card .body { padding: 5px 7px; gap: 3px; }
.fan .card .nm { font-size: 13px; line-height: 1.2; }
.fan .card .tx, #app.narrow .fan .card .tx { font-size: 11px; line-height: 1.3; display: block; overflow: visible; }
.fan .card .perk, #app.narrow .fan .card .perk { display: block; font-size: 10.5px; line-height: 1.25; }
.fan .card .purge, #app.narrow .fan .card .purge { display: none; }
.fan .card:hover .purge, .fan .card.sel .purge { display: block; }
.card .cost { min-width: 22px; text-align: center; font-size: 13px; }
.tiers { display: flex; gap: 3px; }
.tp { flex: 1; padding: 0; height: 18px; font-size: 10.5px; font-weight: 800; border-radius: 4px; }
.tp.on { background: var(--gold); border-color: var(--gold); color: #1b1208; }
@keyframes deal { from { opacity: 0; transform: translate(var(--fromx), 30px) rotate(-25deg) scale(.4); } to { opacity: 1; transform: translateY(var(--lift)) rotate(var(--rot)); } }
.fan .card.fx-deal { animation: deal backwards ease-out; }

.dragcard, .flycard { position: fixed; z-index: 100; pointer-events: none; }
.dragcard .card, .flycard .card { position: static !important; transform: none !important; width: 100% !important; height: 100% !important; animation: none !important; visibility: visible !important; filter: none !important; box-shadow: 0 14px 30px rgba(0, 0, 0, .65), 0 0 0 2px var(--gold); }
.dragcard { transform-origin: 50% 100%; transition: transform .12s, opacity .12s; }
.dragcard.aiming { transform: scale(.5); opacity: .92; }

.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; max-height: 55vh; overflow: auto; }
.mini { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 7px; }
.mini .art { width: 44px; height: 44px; border-radius: 5px; background-size: cover; background-position: center 30%; background-color: #1b1510; }
.mini b { display: block; }
.mini span { font-size: 11.5px; color: var(--dim); }
#app.narrow .handzone { gap: 4px; }
#app.narrow .pilecol { flex-basis: 62px; }
@media (prefers-reduced-motion: reduce) { .fan .card.fx-deal, .pile.fx-shuffle { animation: none !important; } }
.handwrap { align-self: stretch; min-width: 0; }
#app.narrow .handwrap { width: 100%; }
.fan .card .tiers { margin-top: 0; }
#app { overflow: clip; }

/* ---- the board as a 3D tabletop: a tilted plane, thick tiles, pieces standing upright ---- */
@property --tilt { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --rz { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.table3d { position: relative; flex: 1; min-height: 0; overflow: hidden; perspective: 1500px; perspective-origin: 50% 25%; }
.plane { position: absolute; left: 50%; top: 54%; transform-style: preserve-3d; transform: translate(-50%, -50%) scale(var(--k, 1)) rotateX(var(--tilt)) rotateZ(var(--rz)); transition: --tilt .5s ease, --rz .5s ease; }
.plane.flat { top: 50%; }
.plane > svg, .board .plane > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.plane > svg.slab { pointer-events: none; }
.plane > svg.slab polygon { fill: #2a1c12; stroke: #130c07; stroke-width: 2; }
.plane > svg.shadow { pointer-events: none; transform: translateZ(-20px) translateY(10px); filter: blur(9px); opacity: .7; }
.plane > svg.shadow polygon { fill: #000; }
.camctl { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; z-index: 4; }
.camctl button { background: rgba(36, 29, 23, .85); }

.piece { position: absolute; width: 0; height: 0; transform-style: preserve-3d; cursor: pointer; }
.piece.gone { pointer-events: none; }
.fxw { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.base { position: absolute; left: -25px; top: -16px; width: 50px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 3px solid var(--bad); transform: translateZ(.5px); }
.piece.hero .base { border-color: var(--cool); }
.piece.hero.ally .base { border-color: #8a8f98; }
.piece.sel .base { border-color: var(--gold); box-shadow: 0 0 10px var(--gold); }
@keyframes basepulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(127, 201, 122, .9); } 50% { box-shadow: 0 0 0 9px rgba(127, 201, 122, 0); } }
.piece.aim .base { border-color: var(--good); background: rgba(127, 201, 122, .35); animation: basepulse 1s infinite; }
.piece.gone .base { display: none; }
.bb { position: absolute; left: -36px; bottom: 0; width: 72px; transform-origin: 50% 100%; transform: rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--tilt))); }
.bbi { display: flex; flex-direction: column; align-items: center; gap: 2px; transform-origin: 50% 100%; }
.bbi.fx-pop, .bbi.fx-ghost { transform-origin: 50% 100%; }
.psts { display: flex; gap: 2px; justify-content: center; }
.pst { position: relative; width: 19px; height: 19px; }
.pst img { width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid var(--good); display: block; }
.pst.debuff img { border-color: var(--bad); }
.pst b { position: absolute; right: -5px; bottom: -4px; min-width: 12px; font-size: 9px; line-height: 12px; text-align: center; background: #17130f; border: 1px solid var(--ink); border-radius: 6px; }
.php { position: relative; width: 54px; height: 12px; background: #17130f; border: 1px solid #0b0806; border-radius: 4px; overflow: hidden; }
.php i { display: block; height: 100%; background: var(--bad); }
.piece.hero .php i { background: #58b368; }
.php span { position: absolute; inset: 0; font-size: 9.5px; font-weight: 800; line-height: 10px; text-align: center; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.fig { position: relative; width: 58px; height: 70px; border-radius: 29px 29px 8px 8px; overflow: hidden; border: 3px solid var(--bad); background: #1b1510; box-shadow: 0 3px 8px rgba(0, 0, 0, .65); }
.fig svg, .board .fig svg { width: 100%; height: 100%; display: block; }
.fig em { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 8.5px; font-weight: 700; text-align: center; padding: 1px 0; background: rgba(17, 13, 9, .82); color: var(--ink); white-space: nowrap; }
.piece.hero .fig { border-color: var(--cool); }
.piece.hero.ally .fig { border-color: #8a8f98; }
.piece.sel .fig { border-color: var(--gold); }
.piece.aim .fig { border-color: var(--good); box-shadow: 0 0 12px rgba(127, 201, 122, .8); }
.piece.boss .fig { width: 76px; height: 90px; border-radius: 38px 38px 10px 10px; border-color: #ff7a3c; }
.piece.boss .bb { left: -44px; width: 88px; }
.piece.boss .base { left: -33px; top: -21px; width: 66px; height: 42px; border-color: #ff7a3c; }
.plane.choosing .piece:not(.aim) .bbi { filter: brightness(.5); }
.piece:hover .fig { filter: brightness(1.15); }
div.fx-float { position: absolute; left: -50px; right: -50px; text-align: center; white-space: nowrap; font-size: 24px; font-weight: 900; text-shadow: 0 0 3px #17130f, 0 0 3px #17130f, 0 2px 4px #000; }
div.fx-float.dmg { color: #ff6a5c; }
div.fx-float.heal { color: #8be28a; }
div.fx-float.miss { color: #d9d2c5; font-size: 16px; }
div.fx-float.coin { color: var(--gold); font-size: 16px; }
.fig { width: 64px; }
.fig em { font-size: 8px; letter-spacing: -.01em; }
.plane.flat .base { display: none; }
.plane.flat .piece.aim .fig { animation: basepulse 1s infinite; }

/* ---- the game's own symbols everywhere, instant tooltips, choices on the board ---- */
.ic { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; flex: none; }
.cic { width: 1.25em; height: 1.25em; vertical-align: -.28em; margin: 0 2px; }
.tic { height: 1.4em; vertical-align: -.35em; margin-right: 4px; }
.gic { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; vertical-align: -4px; margin-right: 5px; }
button .ic, button .sticon { margin-right: 4px; }
.pips { gap: 1px; }
.pips .ic { width: 15px; height: 15px; }
.pips.hp .ic.f { color: #e5544a; }
.pips.en .ic.f { color: var(--gold); }
.pips .ic.e { color: #4a3b2e; }
.bars b { margin-left: 3px; }
.bcost { color: var(--gold); font-weight: 700; margin-left: 2px; white-space: nowrap; }
.bcost .ic { margin: 0 0 0 1px; }
.acts .row button { display: inline-flex; align-items: center; }
.stats { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.stats .ic { color: var(--dim); }
.orb span .ic { width: 11px; height: 11px; margin-right: 2px; }
.card .cost .ic { width: 11px; height: 11px; margin-left: 1px; }
.fig em .ic { width: 9px; height: 9px; margin-right: 1px; }
.fig em { font-size: 9.5px; }
.stat.sw .ic { color: #e5544a; margin-right: 3px; }
.bossbar .ic { margin-right: 2px; }
.fire { gap: 1px; cursor: default; }
.fire img { height: 22px; display: block; filter: grayscale(1) brightness(.5); }
.fire img.lit { filter: drop-shadow(0 0 4px rgba(240, 138, 36, .9)); animation: flicker 1.8s infinite ease-in-out; }
.fire img.lit:nth-child(2n) { animation-delay: -.6s; }
.fire img.new { animation: flare both ease-out; }

#tip { position: fixed; z-index: 200; max-width: 290px; padding: 7px 10px; border-radius: 7px; background: #120e0a; border: 1px solid var(--gold); color: var(--ink); font-size: 12.5px; line-height: 1.35; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); pointer-events: none; opacity: 0; visibility: hidden; }
#tip.show { opacity: 1; visibility: visible; }
button:disabled { pointer-events: none; }

@keyframes blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(233, 196, 106, 0); border-color: var(--line); } 50% { box-shadow: 0 0 0 3px rgba(233, 196, 106, .45); border-color: var(--gold); } }
button.blink { animation: blink 1.3s infinite; }

.piece.pop { cursor: default; }
.pop .bb { left: -120px; width: 240px; bottom: -58px; display: flex; justify-content: center; pointer-events: none; transform: rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--tilt))) translateZ(4px); }
.pop.ontile .bb { bottom: -20px; }
.popbox { pointer-events: auto; display: flex; gap: 5px; align-items: center; padding: 5px; border-radius: 22px; background: rgba(18, 14, 10, .93); border: 1px solid var(--gold); box-shadow: 0 6px 16px rgba(0, 0, 0, .6); }
.pb { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.pb.wide { width: auto; padding: 0 12px; border-radius: 17px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; }
.pb.ok { background: var(--good); border-color: var(--good); color: #10240f; font-weight: 800; }
.pb.x { color: var(--bad); }
.pb .sticon { width: 26px; height: 26px; margin: 0; }
.pb.rm { position: relative; border-color: var(--bad); }
.pb.rm::after { content: '−'; position: absolute; right: -3px; top: -6px; color: var(--bad); font-weight: 900; }

.craftpal { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5; background: rgba(18, 14, 10, .94); border: 1px solid var(--gold); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, .6); }
.cphead { display: flex; gap: 8px; align-items: center; }
.cphead span { color: var(--dim); flex: 1; }
.cprow { display: flex; flex-wrap: wrap; gap: 5px; }
.cprow button { display: inline-flex; align-items: center; padding: 4px 9px; font-size: 12.5px; }
.cprow.envs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.envic { height: 28px; margin-right: 6px; }
.fire img { filter: grayscale(1) brightness(1.1) opacity(.5) drop-shadow(0 0 1px #b5a48d); }
.fire img.lit { filter: drop-shadow(0 0 1px #ffd56a) drop-shadow(0 0 4px rgba(240, 138, 36, .9)); }
.fire img { filter: grayscale(1) invert(.75) opacity(.4); }
.fire img.lit { filter: drop-shadow(0 0 1px #ffd56a) drop-shadow(0 0 4px rgba(240, 138, 36, .9)); }

/* ---- defending and Events happen on the board ---- */
.popbox.col { flex-direction: column; align-items: stretch; border-radius: 14px; padding: 7px; gap: 6px; }
.poprow { display: flex; gap: 5px; align-items: center; justify-content: center; flex-wrap: wrap; }
.poplbl { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 17px; color: #ff6a5c; padding: 0 6px; white-space: nowrap; }
.poplbl .ic { width: 18px; height: 18px; }
span.poplbl:not(:has(.ic)) { font-size: 12px; color: var(--gold); }
.popstep { display: inline-flex; align-items: center; gap: 3px; }
.popstep .sticon { width: 22px; height: 22px; margin: 0; }
.pb.sm { width: 22px; height: 22px; font-size: 14px; }
.pb.on { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.pb.bad { border-color: var(--bad); color: #ffb3ab; }
.pop.col .bb { left: -150px; width: 300px; }
@keyframes threat { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 87, 76, .9); } 50% { box-shadow: 0 0 0 10px rgba(226, 87, 76, 0); } }
.piece.attacker .fig { border-color: #ff3b2e; animation: threat .9s infinite; }
.piece.attacker .base { border-color: #ff3b2e; background: rgba(226, 87, 76, .4); }
.evcard { display: grid; grid-template-columns: 74px 1fr; gap: 8px; width: 270px; align-items: start; text-align: left; }
.evcard .art { height: 100px; border-radius: 6px; background-size: cover; background-position: center top; background-color: #1b1510; border: 1px solid var(--line); font-size: 9.5px; }
.evcard b { display: block; font-size: 14px; color: var(--gold); margin-bottom: 3px; }
.evcard span { font-size: 12px; line-height: 1.35; }
.fan .card.defcard { box-shadow: 0 0 0 2px var(--cool), 0 0 14px rgba(111, 183, 214, .45), 0 4px 10px rgba(0, 0, 0, .55); }
.card .tx .hurt { color: #ff6a5c; }
.card .tx .safe { color: var(--good); }
.craftpal { position: static; margin: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
.pop.col:not(.ontile) .bb { bottom: -150px; }

/* ---- impact and response: previews, bursts, a shaking table, bumps, hover ---- */
.pv { font-size: 17px; font-weight: 900; color: #ffe08a; text-shadow: 0 0 3px #17130f, 0 0 3px #17130f, 0 2px 3px #000; white-space: nowrap; animation: pvbob 1s infinite ease-in-out; }
.pv.kill { color: #ff6a5c; font-size: 19px; }
.pv.zero { color: #b5a48d; }
@keyframes pvbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.incoming { display: inline-flex; align-items: center; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 800; }
.incoming .ic { width: 11px; height: 11px; margin-right: 2px; }
.piece.ibp { cursor: default; }
.ibp .bb { left: -20px; width: 40px; bottom: -12px; display: flex; justify-content: center; }
.ibadge { display: inline-flex; align-items: center; gap: 1px; height: 22px; padding: 0 7px 0 5px; border-radius: 11px; background: var(--bad); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 2px 5px rgba(0, 0, 0, .6); }
.ibadge .ic { width: 12px; height: 12px; }
.plane.choosing .ibadge { opacity: .35; }

@keyframes burst { 0% { transform: scale(.15) rotate(0deg); opacity: 1; } 60% { opacity: 1; } 100% { transform: scale(1.35) rotate(25deg); opacity: 0; } }
.fx-burst { position: absolute; left: 50%; bottom: 0; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; opacity: 0; pointer-events: none; animation: burst both ease-out; -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
.fx-burst.gold { background: radial-gradient(circle, #fff 0 16%, transparent 17%), repeating-conic-gradient(#ffd56a 0 9deg, transparent 9deg 30deg); }
.fx-burst.red { background: radial-gradient(circle, #fff 0 14%, transparent 15%), repeating-conic-gradient(#ff5a4c 0 11deg, transparent 11deg 30deg); }
.fx-burst.poof { background: radial-gradient(circle, rgba(255, 240, 210, .9) 0 30%, rgba(180, 160, 130, .5) 55%, transparent 70%); }
.fx-burst.block { background: none; border: 7px solid var(--cool); -webkit-mask: none; mask: none; box-shadow: 0 0 14px var(--cool); width: 90px; height: 90px; margin-left: -45px; }
@keyframes quake { 0%, 100% { transform: none; } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -3px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(2px, 2px); } }
@keyframes quakebig { 0%, 100% { transform: none; } 15% { transform: translate(-9px, 4px); } 30% { transform: translate(8px, -6px); } 50% { transform: translate(-6px, -3px); } 70% { transform: translate(5px, 4px); } 85% { transform: translate(-2px, 1px); } }
.table3d.fx-quake { animation: quake both linear; }
.table3d.fx-quake.big { animation-name: quakebig; }
@keyframes bump { 0% { transform: scale(1.6); filter: brightness(1.8); } 100% { transform: none; filter: none; } }
.fx-bump { animation: bump backwards ease-out; }
@keyframes heartlost { 0% { background: #ff6a5c; transform: scale(1.9); } 60% { background: #ff6a5c; transform: scale(1.2) rotate(-12deg); } 100% { background: #4a3b2e; transform: none; } }
.pips .ic.fx-lost { animation: heartlost backwards ease-in; }

.piece .bbi { transition: transform .12s ease-out; }
.piece.token:hover .bbi { transform: scale(1.07); }
.piece.hint .base { border-color: var(--good); box-shadow: 0 0 12px var(--good); }
.piece.hint .fig { border-color: var(--good); box-shadow: 0 0 12px rgba(127, 201, 122, .8); }
.tile-hit { transition: fill .1s; }
.tile-hit:hover { fill: rgba(255, 255, 255, .07); }
.tile-hit.hint { fill: rgba(127, 201, 122, .18); stroke: var(--good); stroke-width: 2; stroke-dasharray: 6 5; }
.tile-hit.go:hover { fill: rgba(127, 201, 122, .5); }
button:active:not(:disabled) { transform: scale(.95); }
.pb:hover:not(:disabled) { transform: scale(1.1); }
.pb.wide:hover:not(:disabled) { transform: scale(1.04); }
.fan .card { transition: transform .13s ease-out, box-shadow .13s, filter .13s; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 138, 36, .9); transform: none; } 50% { box-shadow: 0 0 0 8px rgba(240, 138, 36, 0); transform: scale(1.05); } }
button.ready.nudge { animation: nudge 1.1s infinite; }
@media (prefers-reduced-motion: reduce) { .table3d.fx-quake, .pv, button.blink, button.ready.nudge { animation: none !important; } }

/* ---- Craft: hexagon picture buttons; tile controls float above the tile ---- */
.pop.ontile .bb { bottom: 78px; }
.pop.col.ontile .bb { bottom: 60px; }
.cphead .pb { width: 28px; height: 28px; font-size: 15px; }
.hexrow { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: center; padding: 6px 4px 4px; }
.hexsep { width: 2px; height: 44px; background: var(--line); margin: 0 4px; }
.hexb { position: relative; width: 62px; height: 56px; padding: 0; border: 0; background: none; border-radius: 0; display: grid; place-items: center; transition: transform .13s ease-out, filter .13s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.hexb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hexb img.ghosted { filter: grayscale(1) brightness(.85); }
.hexb.good { filter: drop-shadow(0 0 3px var(--good)) drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.hexb.bad { filter: drop-shadow(0 0 3px var(--bad)) drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.hexb:hover:not(:disabled) { transform: scale(1.45); z-index: 3; border: 0; }
.hexb:active:not(:disabled) { transform: scale(1.3); }
.hexb:disabled { opacity: .3; }
.hbadge { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 17px; line-height: 1; color: #10240f; background: var(--good); border: 2px solid #17130f; }
.hbadge.minus { background: var(--bad); color: #fff; }
.hexrow { gap: 6px; flex-wrap: nowrap; }
.hexb { width: 54px; height: 49px; flex: 0 1 54px; min-width: 38px; }
.hexsep { flex: none; margin: 0 2px; }
.craftpal { padding: 6px 10px 8px; }

/* ---- Environment tokens lie large on their tile; figures are smaller and stand behind them ---- */
.envtok { pointer-events: none; }
.envglow { fill: none; stroke-width: 4; opacity: .9; }
.envtok.good .envglow { stroke: var(--good); filter: drop-shadow(0 0 5px var(--good)); }
.envtok.bad .envglow { stroke: var(--bad); filter: drop-shadow(0 0 5px var(--bad)); }
@keyframes envpulse { 0%, 100% { opacity: .95; } 50% { opacity: .45; } }
.envglow { animation: envpulse 2.2s infinite ease-in-out; }
.fig { width: 54px; height: 60px; border-radius: 27px 27px 7px 7px; }
.php { width: 48px; }
.bb { left: -32px; width: 64px; }
.base { left: -21px; top: -13px; width: 42px; height: 26px; }
.piece.boss .fig { width: 70px; height: 82px; border-radius: 35px 35px 9px 9px; }
.piece.boss .bb { left: -40px; width: 80px; }
.piece.boss .base { left: -29px; top: -18px; width: 58px; height: 36px; }
.pop .bb { left: -120px; width: 240px; }
.pop.col .bb { left: -150px; width: 300px; }
.ibp .bb { left: -20px; width: 40px; }

/* ---- the action bar: square slots holding hexagon pictures ---- */
.abar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.acts > h3 { margin-bottom: 4px; }
#app.narrow .acts > h3 { display: block; font-size: 10.5px; margin-bottom: 3px; }
.slot { position: relative; width: 46px; height: 46px; padding: 0; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; flex: none; transition: transform .12s ease-out, border-color .12s, box-shadow .12s; }
.slot .hx { width: 38px; height: 34px; display: grid; place-items: center; background: #1b1510; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.slot .hx .ic { width: 22px; height: 22px; margin: 0; color: var(--ink); }
.slot .hx .sticon { width: 38px; height: 38px; margin: 0; border-radius: 0; }
.slot .hx .cic { width: 26px; height: 26px; margin: 0; }
.slot .hx .tic { height: 34px; width: 38px; margin: 0; object-fit: cover; }
.slot .hx .hxart { width: 100%; height: 100%; object-fit: cover; }
.slot:hover:not(:disabled) { transform: scale(1.22); z-index: 5; border-color: var(--ember); }
.slot:active:not(:disabled) { transform: scale(1.08); }
.slot.can { border-color: var(--good); box-shadow: inset 0 0 0 1px rgba(127, 201, 122, .4); }
.slot.can .hx { background: #24361f; }
.slot.can .hx .ic { color: #d6f5d2; }
.slot.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(233, 196, 106, .6); }
.slot.on .hx { background: #4a3a14; }
.slot:disabled { opacity: .38; }
.slot.worn:disabled { opacity: 1; }
.slot.blink { animation: blink 1.3s infinite; }
.sbadge { position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 15px; padding: 0 3px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1; color: var(--gold); background: #17130f; border: 1px solid var(--line); white-space: nowrap; }
.sbadge .ic { width: 9px; height: 9px; margin: 0 0 0 1px; }
.sbadge .cic { width: 10px; height: 10px; margin: 0 0 0 1px; }
.asep { width: 2px; height: 34px; background: var(--line); margin: 0 3px; flex: none; }
.swiftstep { display: inline-flex; align-items: center; gap: 3px; padding: 0 4px; }
.swiftstep .sticon { width: 26px; height: 26px; margin: 0; }

/* ---- streamlined: prompts on the board, a one-row top bar, less on screen ---- */
.pb.big { width: 46px; height: 46px; }
.pb.big .sticon { width: 38px; height: 38px; }
.pb.big .ic { width: 24px; height: 24px; margin: 0; }
.pb.big:hover:not(:disabled) { transform: scale(1.2); }
.poplbl.ask { font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.me .name { cursor: pointer; }
.me .name .caret { color: var(--dim); font-size: 11px; }
.menuwrap { position: relative; }
.dropdown { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: 6px; min-width: 150px; background: var(--panel); border: 1px solid var(--gold); border-radius: 9px; box-shadow: 0 10px 26px rgba(0, 0, 0, .65); }
.dropdown button { text-align: left; white-space: nowrap; }
#app.narrow .top .dropdown [data-a=leave] { display: block; }
.top { flex-wrap: nowrap; gap: 12px; }
.top .stat, .top .fire { flex: none; white-space: nowrap; }
.top .bossbar { min-width: 0; flex-shrink: 1; overflow: hidden; white-space: nowrap; }
#app.narrow .top { gap: 8px; }
#app.narrow .top .ready { min-width: 84px; }
.feed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed div { overflow: hidden; text-overflow: ellipsis; }

/* ---- choice boxes float flat above the table so nothing on the board can cover them ---- */
.pops { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.pop2 { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: auto; }
.pop2 .popbox { transform: none !important; }
.piece.anchor { pointer-events: none; }

/* ---- the action bar in labelled groups: where each ability comes from ---- */
.abar { gap: 4px 12px; align-items: flex-end; }
.agroup { display: flex; flex-direction: column; gap: 2px; }
.alabel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--dim); cursor: default; }
.aslots { display: flex; gap: 5px; align-items: center; }
.agroup + .agroup { padding-left: 12px; border-left: 1px solid var(--line); }
.acts > h3 { display: none; }
#app.narrow .acts > h3 { display: none; }
.popnote { font-size: 12px; color: var(--dim); }
.pb.big .hxart { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.poplbl .cic { width: 14px; height: 14px; }

/* ================= visual pass: table, tiles, pieces ================= */
.board { background: radial-gradient(ellipse at 50% 45%, #2a1c12 0%, #150e09 70%, #0b0705 100%); }
.tabletop { position: absolute; left: 50%; top: 50%; width: 3200px; height: 3200px; margin: -1600px 0 0 -1600px; transform: translateZ(-22px); pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 176, 92, .26) 0, rgba(255, 150, 60, .10) 14%, transparent 30%),
    radial-gradient(circle at 50% 50%, transparent 22%, rgba(0, 0, 0, .78) 46%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .34) 0 3px, transparent 3px 190px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 7px, rgba(0, 0, 0, .05) 7px 9px, transparent 9px 23px),
    linear-gradient(180deg, #5a3d26, #4a301d 50%, #3d2717); }
.plane.flat .tabletop { transform: translateZ(-1px); }
.plane > svg.shadow { transform: translateZ(-21px) translateY(8px); filter: blur(12px); opacity: .85; }
.plane > svg.slab polygon { stroke: none; }
.plane > svg.slab.s1 polygon { fill: #6b5138; }
.plane > svg.slab.s2 polygon { fill: #5c452f; }
.plane > svg.slab.s3 polygon { fill: #4d3927; }
.plane > svg.slab.s4 polygon { fill: #3f2e20; }
.plane > svg.slab.s5 polygon { fill: #32241a; }
.plane > svg.slab.s6 polygon { fill: #261b13; }
.plane > svg.slab.s7 polygon { fill: #1a120c; }
.tilelight { fill: url(#tilelight); stroke: #1c130c; stroke-width: 3; pointer-events: none; }
.wall { stroke: #1a110a; opacity: .92; }
.intent { stroke-width: 4; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }

@keyframes ember { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: .9; } 70% { opacity: .55; } 100% { transform: translate(var(--sway), -340px) scale(.3); opacity: 0; } }
.embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.embers i { position: absolute; bottom: -6px; width: var(--sz); height: var(--sz); border-radius: 50%; background: #ffb057; box-shadow: 0 0 6px 1px rgba(255, 140, 50, .8); animation: ember linear infinite; }

/* pieces: a framed standee on a turned base */
.fig { border-width: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 -14px 16px -8px rgba(0, 0, 0, .7), 0 4px 9px rgba(0, 0, 0, .7); }
.fig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 38%); pointer-events: none; }
.fig em { background: linear-gradient(rgba(17, 13, 9, .2), rgba(17, 13, 9, .92) 45%); padding: 6px 0 1px; }
.base { background: radial-gradient(ellipse at 50% 35%, #5a4634, #241a12 70%); border-width: 3px; box-shadow: 0 0 0 1px #0b0705, 0 5px 10px 3px rgba(0, 0, 0, .65); }
.php { height: 13px; border-radius: 7px; border: 1px solid #0b0705; box-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.php i { background: linear-gradient(#ff7a6c, #c8392e); }
.piece.hero .php i { background: linear-gradient(#7fe08a, #3d9a4c); }
.php span { line-height: 11px; }
.pst img { box-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.envtok image { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
@media (prefers-reduced-motion: reduce) { .embers { display: none; } }

/* ================= visual pass: cards, piles, panels, buttons ================= */
:root { --trim: #8a6a2c; --trim-hi: #d9b25a; --parch: #ead9b5; --parch-ink: #2b1d10; }

/* cards: a gilt frame, a name banner and a parchment text box */
.fan .card, #app.narrow .fan .card, .dragcard .card, .flycard .card { background: linear-gradient(#3d2e20, #1f1710); border: 2px solid var(--trim); border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 220, 140, .18), 0 5px 12px rgba(0, 0, 0, .6); }
.fan .card .art, #app.narrow .fan .card .art { height: 64px; margin: 4px 4px 0; border-radius: 5px 5px 0 0; border: 1px solid #120c07; box-shadow: inset 0 0 12px rgba(0, 0, 0, .55); background-position: center 28%; }
.fan .card .body { padding: 0 4px 4px; gap: 3px; }
.fan .card .nm { margin: 0 -4px; padding: 2px 6px; text-align: center; font-size: 12.5px; letter-spacing: .02em; color: #fff3d6; text-shadow: 0 1px 2px #000; background: linear-gradient(90deg, #4d3115, #8a5c24 50%, #4d3115); border-top: 1px solid var(--trim-hi); border-bottom: 1px solid #1a110a; }
.fan .card .tx, #app.narrow .fan .card .tx { background: var(--parch); color: var(--parch-ink); border-radius: 4px; padding: 4px 6px; font-size: 10.8px; line-height: 1.28; box-shadow: inset 0 0 8px rgba(120, 80, 30, .35); }
.fan .card .tx b { color: #7a1d12; }
.fan .card .tx .safe { color: #1f6b2a; }
.fan .card .perk, #app.narrow .fan .card .perk { background: #d7e6ee; color: #173a4c; border-radius: 4px; padding: 3px 6px; }
.fan .card .perk.off { background: #cfc6b4; color: #7a6c5c; }
.fan .card .why { text-align: center; color: #ff8d80; }
.card .cost { left: 2px; top: 2px; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #2a1503; border: 1px solid #5a3a0c; background: radial-gradient(circle at 35% 30%, #fff0b8, #eaa233 60%, #a8650f); box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.card .cost .ic { color: #5a3408; }
.tp { background: #2a2017; border-color: #5b4630; color: #cdbb9c; }
.tp.on { background: linear-gradient(#ffe39a, #e0a93a); border-color: #fff0c0; color: #2a1503; }
.fan .card.playable { border-color: #9be08f; box-shadow: 0 0 0 1px #9be08f, 0 0 16px rgba(127, 201, 122, .45), 0 5px 12px rgba(0, 0, 0, .6); }
.fan .card.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(233, 196, 106, .55), 0 10px 24px rgba(0, 0, 0, .7); }
.fan .card.defcard { border-color: #9ad4ee; box-shadow: 0 0 0 1px #9ad4ee, 0 0 16px rgba(111, 183, 214, .55), 0 5px 12px rgba(0, 0, 0, .6); }
.fan .card.blocked, .fan .card.dead { filter: saturate(.35) brightness(.62); }
.fan .card .purge { background: #3a1c16; border-color: #7a3a2e; color: #ffcfc8; align-self: center; }

/* piles: a real card back with the flame, and a tray for discards */
.pile.deck { border: 2px solid var(--trim); background: url(assets/icons/flame.png) center 42% / 30px no-repeat, radial-gradient(circle at 50% 42%, #7a2c16, #3c140b 70%), #3c140b; box-shadow: inset 0 0 0 2px #2a0e08, inset 0 0 0 3px rgba(217, 178, 90, .5), 2px 2px 0 #1b1510, 3px 3px 0 var(--trim), 5px 5px 0 #1b1510, 6px 6px 0 #6b5223; align-items: end; padding-bottom: 5px; }
.pile.discard { background: repeating-linear-gradient(45deg, #2a2118 0 6px, #251d15 6px 12px); border: 2px dashed #6b5a44; align-items: end; padding-bottom: 5px; }
.pile b { min-width: 24px; height: 20px; font-size: 12.5px; }
.orb b { width: 48px; height: 48px; font-size: 23px; border: 2px solid #fff0c0; box-shadow: 0 0 16px rgba(240, 138, 36, .75), inset 0 -5px 8px rgba(0, 0, 0, .35), inset 0 3px 5px rgba(255, 255, 255, .5); }

/* panels and bars */
.top { background: linear-gradient(#32261b, #211811); border-bottom: 1px solid #0b0705; box-shadow: inset 0 -1px 0 var(--trim), 0 3px 10px rgba(0, 0, 0, .5); position: relative; z-index: 8; }
.bottom { background: linear-gradient(#2a2017, #17110c); border-top: 1px solid var(--trim); box-shadow: inset 0 1px 0 rgba(255, 220, 140, .12), 0 -6px 18px rgba(0, 0, 0, .55); position: relative; z-index: 7; }
.guide { background: linear-gradient(#2e241a, #241b13); }
.guide.choose { background: linear-gradient(#3d3019, #2e2413); }
.feed { background: #17110c; border-top: 1px solid #0b0705; }
.side { background: linear-gradient(#2a2017, #17110c); }
button { background: linear-gradient(#3d3024, #2a2018); border-color: #5b4630; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
button.primary { background: linear-gradient(#ffb04d, #e07a16); border-color: #ffd08a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 8px rgba(240, 138, 36, .35); text-shadow: 0 1px 0 rgba(255, 255, 255, .3); }
button.primary:disabled { background: #5a4026; border-color: #5a4026; box-shadow: none; }
button.ready { font-family: Copperplate, "Copperplate Gothic Bold", "Palatino Linotype", Georgia, serif; letter-spacing: .06em; font-size: 15px; }
.slot { background: linear-gradient(#3a2d21, #241b13); border-color: #5b4630; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .45); }
.slot .hx { background: linear-gradient(#17110c, #0f0a07); box-shadow: inset 0 0 6px #000; }
.slot.can { border-color: #9be08f; box-shadow: inset 0 0 0 1px rgba(127, 201, 122, .4), 0 0 8px rgba(127, 201, 122, .25), 0 2px 4px rgba(0, 0, 0, .45); }
.slot.can .hx { background: linear-gradient(#2c4426, #1b2c18); }
.alabel { color: #c8a45c; }
.me .name { font-family: Copperplate, "Copperplate Gothic Bold", "Palatino Linotype", Georgia, serif; letter-spacing: .04em; color: #ffe7b0; }
.pips.hp .ic.f { color: #ff5a4c; filter: drop-shadow(0 0 2px rgba(255, 70, 50, .6)); }
.popbox { background: linear-gradient(rgba(42, 32, 23, .97), rgba(20, 15, 10, .97)); border: 1px solid var(--trim-hi); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 8px 22px rgba(0, 0, 0, .7); }
.pb { background: linear-gradient(#45372a, #2a2018); border-color: #6b5538; }
.pb.ok { background: linear-gradient(#a6ec9a, #5fb357); border-color: #d6f5d2; }
#tip { background: linear-gradient(#1c150e, #0f0a06); border-color: var(--trim-hi); }
.camctl button { font-size: 11px; opacity: .8; }
.camctl button:hover { opacity: 1; }
#app .fan .card.playable { border-color: #9be08f; box-shadow: 0 0 0 1px #9be08f, 0 0 16px rgba(127, 201, 122, .45), 0 5px 12px rgba(0, 0, 0, .6); }
#app .fan .card.defcard { border-color: #9ad4ee; box-shadow: 0 0 0 1px #9ad4ee, 0 0 16px rgba(111, 183, 214, .55), 0 5px 12px rgba(0, 0, 0, .6); }
#app .fan .card.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(233, 196, 106, .55), 0 10px 24px rgba(0, 0, 0, .7); }

/* ================= visual pass: Market, Event card, end screens ================= */
.side h3 { color: #c8a45c; border-bottom: 1px solid #3a2c1e; padding-bottom: 4px; }
.mcard { grid-template-columns: 62px 1fr auto; gap: 9px; padding: 6px; background: linear-gradient(#35291e, #221a13); border: 1px solid #5b4630; border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 5px rgba(0, 0, 0, .4); }
.mcard.afford { border-color: #9be08f; box-shadow: 0 0 10px rgba(127, 201, 122, .25), inset 0 1px 0 rgba(255, 255, 255, .06); }
.mcard .thumb { width: 62px; height: 62px; border-radius: 6px; border: 1px solid var(--trim); box-shadow: inset 0 0 10px rgba(0, 0, 0, .6); background-position: center 30%; }
.mcard .nm { font-size: 13.5px; color: #fff3d6; }
.mcard .tx { font-size: 11.5px; color: #cdbb9c; line-height: 1.3; }
.mcls { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--cool); border: 1px solid rgba(111, 183, 214, .5); border-radius: 8px; padding: 0 5px; margin-right: 5px; }
.mcard .buy { gap: 4px; align-items: stretch; }
.mcard .buy button { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.mcard .buy button.can { background: linear-gradient(#ffe39a, #e0a93a); border-color: #fff0c0; color: #2a1503; font-weight: 700; box-shadow: 0 2px 6px rgba(233, 196, 106, .3); }
.mcard .buy button .ic { width: 12px; height: 12px; margin-right: 2px; }
.log { color: #a8977e; }

.evcard { grid-template-columns: 96px 1fr; width: 300px; }
.evcard .art { height: 128px; border: 2px solid var(--trim); border-radius: 7px; box-shadow: 0 3px 8px rgba(0, 0, 0, .6); }
.evcard .art.none { font-size: 0; background: url(assets/icons/flame.png) center 45% / 44px no-repeat, radial-gradient(circle at 50% 45%, #5a2416, #2a100a 75%); }
.evcard b { font-family: Copperplate, "Copperplate Gothic Bold", "Palatino Linotype", Georgia, serif; font-size: 15px; letter-spacing: .04em; }
.evcard span { display: block; background: var(--parch); color: var(--parch-ink); border-radius: 5px; padding: 6px 8px; box-shadow: inset 0 0 8px rgba(120, 80, 30, .35); }

.overlay.end { background: radial-gradient(ellipse at 50% 40%, rgba(10, 8, 6, .55), rgba(10, 8, 6, .92)); }
.overlay.end .dialog { align-items: center; text-align: center; padding: 34px 30px; width: min(520px, 92vw); border: 1px solid var(--trim-hi); background: linear-gradient(rgba(23, 17, 11, .55), rgba(23, 17, 11, .96) 62%), url(assets/key/gate.png) center top / cover no-repeat, #17110b; box-shadow: 0 0 0 1px #0b0705, 0 20px 60px rgba(0, 0, 0, .8); }
.overlay.end .dialog h2 { font-size: 30px; color: var(--gold); text-shadow: 0 0 22px rgba(240, 138, 36, .7), 0 2px 3px #000; margin-top: 90px; }
.overlay.end .dialog .sub { font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; letter-spacing: .1em; color: #ffd08a; }
.overlay.end.loss .dialog { filter: saturate(.35); }
.overlay.end.loss .dialog h2 { color: #ff8d80; text-shadow: 0 0 22px rgba(226, 87, 76, .6), 0 2px 3px #000; }
.overlay.end .dialog .toggles { justify-content: center; }
.dialog { border: 1px solid var(--trim); background: linear-gradient(#2e241a, #1c150e); }
.dialog h2 { color: #ffe7b0; }
.mini { background: linear-gradient(#35291e, #221a13); border-color: #5b4630; }
.fx-banner { background: linear-gradient(90deg, transparent, rgba(17, 13, 9, .92) 20%, rgba(17, 13, 9, .92) 80%, transparent); border-top: 1px solid rgba(217, 178, 90, .6); border-bottom: 1px solid rgba(217, 178, 90, .6); }

/* ================= visual pass: Hero setup, portrait, coach ================= */
.overlay.lobby { align-items: start; overflow: auto; padding: 18px 0; }
.overlay.lobby .dialog { width: min(760px, 94vw); gap: 10px; }
.hero-build { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid #4a3b2e; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.hb-head { display: flex; justify-content: space-between; align-items: center; }
.hb-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; }
.hb-label { font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; letter-spacing: .08em; color: #c8a45c; font-size: 13px; }
.hb-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pick { position: relative; padding: 0; height: 84px; border-radius: 9px; overflow: hidden; border: 2px solid #5b4630; background: #1b1510; transition: transform .12s, border-color .12s, box-shadow .12s, filter .12s; filter: saturate(.55) brightness(.7); }
.pick svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pick span { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 4px 3px; font-size: 12.5px; font-weight: 700; color: #fff3d6; text-shadow: 0 1px 2px #000; background: linear-gradient(transparent, rgba(12, 8, 5, .92) 55%); }
.pick:hover { transform: translateY(-3px); filter: none; }
.pick.on { border-color: var(--gold); filter: none; box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(233, 196, 106, .5); }
.hb-note { margin-left: 100px; font-size: 12px; line-height: 1.35; color: #cdbb9c; }
.hb-note b { color: #fff3d6; }
button.big-go { font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; letter-spacing: .06em; font-size: 16px; padding: 9px 20px; }
.invite { opacity: .75; }
@media (max-width: 620px) { .hb-row { grid-template-columns: 1fr; } .hb-note { margin-left: 0; } .pick { height: 70px; } }

.avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid var(--trim-hi); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); cursor: pointer; flex: none; background: #1b1510; }
.avatar svg { width: 100%; height: 100%; display: block; }
.me { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.me .more { flex-basis: 100%; }
.me .bars { margin: 0; }
.coach { background: linear-gradient(#3a2d1c, #221a10); border: 1px solid var(--trim-hi); box-shadow: 0 8px 26px rgba(0, 0, 0, .65); }
.coach h3 { color: #c8a45c; }
.coach .nm { font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; color: #ffe7b0; }
.bossbar { border-color: #ff7a3c; background: linear-gradient(#3a1c12, #24110b); box-shadow: 0 0 10px rgba(255, 122, 60, .3); }
.bossbar b { font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; color: #ffb08a; }
.stage span { background: linear-gradient(#ff7a6c, #c8392e); }
.pick[data-key=ancestryId], .pick[data-key=backgroundId] { background: radial-gradient(circle at 50% 40%, #f3e6c8, #cdb88c); filter: saturate(.6) brightness(.72); }
.pick[data-key=ancestryId] svg, .pick[data-key=backgroundId] svg { inset: 4px 4px 18px; width: calc(100% - 8px); height: calc(100% - 22px); }
.pick.on[data-key], .pick[data-key]:hover { filter: none; }

/* ================= visual pass: light, life, finish ================= */
.top button { white-space: nowrap; }
@keyframes torch { 0%, 100% { opacity: .85; transform: translateZ(-21px) scale(1); } 23% { opacity: .68; } 41% { opacity: .95; transform: translateZ(-21px) scale(1.04); } 62% { opacity: .74; } 80% { opacity: .9; } }
.torchlight { position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; pointer-events: none; transform: translateZ(-21px); background: radial-gradient(circle, rgba(255, 178, 96, .34) 0, rgba(255, 140, 50, .12) 30%, transparent 58%); mix-blend-mode: screen; animation: torch 4.2s infinite ease-in-out; }
@keyframes idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.piece.token .fig { animation: idle 3.2s infinite ease-in-out; }
.piece.token:nth-of-type(2n) .fig { animation-delay: -1.1s; }
.piece.token:nth-of-type(3n) .fig { animation-delay: -2.3s; }
.piece.attacker .fig { animation: threat .9s infinite; }
.piece.gone .fig { animation: none; }
@keyframes selglow { 0%, 100% { box-shadow: 0 0 0 1px #0b0705, 0 0 10px 1px rgba(233, 196, 106, .9), 0 5px 10px 3px rgba(0, 0, 0, .65); } 50% { box-shadow: 0 0 0 1px #0b0705, 0 0 18px 5px rgba(233, 196, 106, .55), 0 5px 10px 3px rgba(0, 0, 0, .65); } }
.piece.sel .base { animation: selglow 2s infinite ease-in-out; }
div.fx-float { font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; font-size: 28px; }
div.fx-float.miss, div.fx-float.coin { font-size: 17px; }
.pv { font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; }
@keyframes titleglow { 0%, 100% { text-shadow: 0 0 18px rgba(240, 138, 36, .5), 0 2px 2px #000; } 50% { text-shadow: 0 0 34px rgba(255, 170, 70, .95), 0 2px 2px #000; } }
.title.big { font-size: 46px; animation: titleglow 3.4s infinite ease-in-out; background: linear-gradient(#ffe39a, #f08a24 60%, #c8531a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.overlay.home .embers { z-index: 0; }
.overlay.home .dialog { position: relative; z-index: 1; border: 1px solid var(--trim-hi); }
.overlay.home .opts button { padding: 10px 14px; }
.fan { border-radius: 12px 12px 0 0; background: radial-gradient(ellipse at 50% 120%, rgba(240, 138, 36, .10), transparent 70%); }
* { scrollbar-width: thin; scrollbar-color: #5b4630 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #5b4630; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .torchlight, .piece.token .fig, .piece.sel .base, .title.big { animation: none !important; } }
.torchlight { mix-blend-mode: normal; background: radial-gradient(circle, rgba(255, 178, 96, .26) 0, rgba(255, 140, 50, .09) 30%, transparent 58%); }
.title.big { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ffb04d; }
/* the page never grows wider than the window; the Boss bar takes its own row when space is short */
#app { grid-template-columns: minmax(0, 1fr); }
.top { flex-wrap: wrap; min-width: 0; }
.top .bossbar { overflow: visible; white-space: nowrap; }
#app.narrow .top .bossbar { order: 9; flex-basis: 100%; justify-content: center; }
.bottom, .mid { min-width: 0; }

/* ---- can't use it right now: a red tint, as in an action bar; plain grey while it is not your turn ---- */
.slot:disabled { opacity: 1; border-color: #6b2a22; background: linear-gradient(#3a1a15, #24100d); }
.slot:disabled .hx { background: #2a0f0c; }
.slot:disabled .hx .ic { color: #c96a5e; }
.slot:disabled .hx img { filter: grayscale(1) brightness(.75); }
.slot:disabled::after { content: ''; position: absolute; inset: 0; border-radius: 8px; background: rgba(190, 30, 20, .42); mix-blend-mode: multiply; pointer-events: none; }
.slot:disabled .sbadge { color: #c96a5e; border-color: #6b2a22; }
.abar.wait .slot:disabled { opacity: .45; border-color: #5b4630; background: linear-gradient(#3a2d21, #241b13); }
.abar.wait .slot:disabled::after { display: none; }
.abar.wait .slot:disabled .hx .ic { color: var(--ink); }
#app .fan .card.blocked, #app .fan .card.dead { filter: none; border-color: #7a2e25; }
#app .fan .card.blocked::after, #app .fan .card.dead::after { content: ''; position: absolute; inset: 0; border-radius: 7px; background: rgba(170, 25, 15, .5); mix-blend-mode: multiply; pointer-events: none; }
#app .fan .card.blocked .art, #app .fan .card.dead .art { filter: grayscale(.85) brightness(.8); }
#app .fan.wait .card.blocked { border-color: var(--trim); filter: saturate(.5) brightness(.72); }
#app .fan.wait .card.blocked::after { display: none; }
#app .fan.wait .card.blocked .art { filter: none; }
#app .fan .card:hover::after, #app .fan .card.sel::after { background: rgba(170, 25, 15, .28); }
.tp:disabled { opacity: 1; background: #2a0f0c; border-color: #6b2a22; color: #c96a5e; }
.fan.wait .tp:disabled { background: #2a2017; border-color: #5b4630; color: #7a6c5c; }
.hexb:disabled { opacity: 1; filter: grayscale(1) sepia(1) hue-rotate(-45deg) saturate(3.2) brightness(.55); }
.pb:disabled { opacity: 1; filter: grayscale(.6) sepia(1) hue-rotate(-45deg) saturate(2.6) brightness(.6); }
.mcard .buy button:disabled { opacity: 1; color: #c96a5e; border-color: #6b2a22; background: #2a0f0c; }
/* a tier you cannot pay for is plainly red */
#app .fan .tp:disabled { opacity: 1; background: linear-gradient(#8a2218, #5a130d); border-color: #d0483a; color: #ffc4bc; }
#app .fan.wait .tp:disabled { background: #2a2017; border-color: #5b4630; color: #7a6c5c; }

/* ---- difficulty choice on the Hero setup screen ---- */
.diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.diff { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 9px; border: 2px solid #5b4630; }
.diff b { color: #fff3d6; font-size: 14px; }
.diff span { font-size: 11.5px; color: #cdbb9c; line-height: 1.3; }
.diff.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(233, 196, 106, .4); }
.diff:disabled { opacity: .7; filter: none; }
.chip.plain { padding: 1px 8px; }
@media (max-width: 620px) { .diffs { grid-template-columns: 1fr; } }

/* ---- end-of-Delve summary ---- */
.overlay.end .dialog h2 { margin-top: 70px; }
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; width: 100%; max-width: 400px; text-align: left; margin-top: 4px; }
.sumrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0; border-bottom: 1px solid rgba(217, 178, 90, .25); font-size: 13px; }
.sumrow span { color: #cdbb9c; display: inline-flex; align-items: center; gap: 5px; }
.sumrow b { color: #fff3d6; font-size: 15px; }
.sumheroes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sumhero { display: grid; grid-template-columns: 40px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; }
.sumhero svg { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--trim-hi); }
.sumhero span { font-weight: 700; font-size: 13px; }
.sumhero small { color: #cdbb9c; font-size: 11px; }
.hb-head .toggles { gap: 6px; }

/* ---- short windows: the board always keeps some height; the page scrolls instead of losing it ---- */
#app { overflow: visible; overflow-x: clip; }
#app.narrow { height: auto; min-height: 100vh; grid-template-rows: auto minmax(240px, 1fr) auto; }
#app.narrow .board { min-height: 240px; }
.bottom { overflow: clip; }

/* ---- hints ---- */
.guide.hintbar { border-left-color: #8fd0ee; background: linear-gradient(#1f3440, #17252e); }
@keyframes hinted { 0%, 100% { box-shadow: 0 0 0 2px #8fd0ee, 0 0 10px rgba(143, 208, 238, .5); } 50% { box-shadow: 0 0 0 4px #8fd0ee, 0 0 22px rgba(143, 208, 238, .9); } }
#app .fan .card.hinted { border-color: #8fd0ee; animation: hinted 1.1s infinite; }
.piece.hinted .fig { border-color: #8fd0ee; animation: hinted 1.1s infinite; }
.piece.hinted .base { border-color: #8fd0ee; }
button.hinted { border-color: #8fd0ee; animation: hinted 1.1s infinite; }
.tile-hit.hinted { fill: rgba(143, 208, 238, .25); stroke: #8fd0ee; stroke-width: 3; animation: pulse 1s infinite; }

/* ---- new version notice ---- */
#newver { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 60; background: linear-gradient(#3a2c14, #2a1f10); border: 1px solid var(--ember); border-radius: 10px; padding: 8px 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .6); display: flex; gap: 10px; align-items: center; font-size: 14px; }
kbd { display: inline-block; min-width: 1.5em; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: #1b1510; font: 600 12px/1.6 ui-monospace, Menlo, monospace; text-align: center; color: var(--ink); }

/* ---- zooming and moving the table ---- */
.plane { transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) scale(var(--k, 1)) rotateX(var(--tilt)) rotateZ(var(--rz)); }
.table3d { cursor: grab; touch-action: none; }
.table3d.panning { cursor: grabbing; }
.table3d.panning .plane { transition: none; }
.camctl .sq { min-width: 30px; font-size: 16px; line-height: 1; padding-left: 0; padding-right: 0; }

/* ---- mood: each floor has its own light, the Boss darkens the room, low Health closes in ---- */
.mood { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at 50% 42%, transparent 48%, rgba(0, 0, 0, .42) 100%); transition: background 1.2s; }
.board.fl2 { background: radial-gradient(ellipse at 50% 45%, #1c2a2e 0%, #0e1518 70%, #070a0c 100%); }
.board.fl2 .tabletop { filter: hue-rotate(-28deg) saturate(.55) brightness(.8); }
.board.fl2 .mood { background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(8, 34, 48, .6) 100%); }
.board.fl2 .torchlight { background: radial-gradient(circle, rgba(170, 220, 235, .2) 0, rgba(90, 160, 190, .08) 30%, transparent 58%); }
.board.fl2 .embers i { background: #9fe0ff; box-shadow: 0 0 6px 1px rgba(110, 200, 255, .8); }
.board.fl3 { background: radial-gradient(ellipse at 50% 45%, #2e140c 0%, #150806 70%, #090403 100%); }
.board.fl3 .tabletop { filter: saturate(1.25) brightness(.66) hue-rotate(-10deg); }
.board.fl3 .mood { background: radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(70, 10, 0, .62) 100%); }
.board.fl3 .torchlight { background: radial-gradient(circle, rgba(255, 120, 60, .32) 0, rgba(255, 70, 30, .12) 30%, transparent 58%); }
.board.fl3 .embers i { background: #ff7a3c; box-shadow: 0 0 7px 2px rgba(255, 80, 30, .85); }
@keyframes bossdark { 0%, 100% { box-shadow: inset 0 0 110px 10px rgba(150, 20, 0, .28); } 50% { box-shadow: inset 0 0 150px 26px rgba(190, 30, 0, .42); } }
.board.bossout .mood { animation: bossdark 3.4s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { box-shadow: inset 0 0 90px 6px rgba(200, 20, 20, .3); } 12% { box-shadow: inset 0 0 130px 26px rgba(230, 30, 30, .55); } 24% { box-shadow: inset 0 0 95px 10px rgba(200, 20, 20, .34); } 36% { box-shadow: inset 0 0 125px 22px rgba(230, 30, 30, .5); } 60% { box-shadow: inset 0 0 90px 6px rgba(200, 20, 20, .3); } }
.board.danger .mood { animation: heartbeat 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .board .mood { animation: none !important; } }

/* ---- records ---- */
.records { border: 1px solid rgba(217, 178, 90, .3); border-radius: 10px; padding: 9px 12px; background: rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 6px; }
.rechead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.rechead b { color: var(--gold); font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; letter-spacing: .06em; }
.rechead span { color: var(--dim); }
.recrow { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.recclass { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); }
.recclass.won { color: var(--ink); }
.medal { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 1px solid #5a4a36; background: #1b1510; }
.medal.m1 { background: radial-gradient(circle at 35% 30%, #e0a070, #8a4f2a); border-color: #c98a58; }
.medal.m2 { background: radial-gradient(circle at 35% 30%, #f4f4f4, #8d95a0); border-color: #d5dbe2; }
.medal.m3 { background: radial-gradient(circle at 35% 30%, #fff1a8, #d39a1c); border-color: #ffd86b; box-shadow: 0 0 6px rgba(255, 200, 80, .7); }
.news { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.news span { color: #ffe08a; font-weight: 700; font-size: 14px; text-shadow: 0 0 10px rgba(255, 190, 60, .45); }

/* ---- Hero setup: starting stats ---- */
.hb-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; flex: 1; font-weight: 700; font-size: 14px; color: var(--dim); }
.hb-stats span { display: inline-flex; align-items: center; gap: 4px; }
.hb-stats span.up { color: #ffe08a; }
.hb-stats .ic { width: 15px; height: 15px; }

/* ---- camera close-ups ease in and out ---- */
@property --k { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --px { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --py { syntax: '<length>'; inherits: false; initial-value: 0px; }
.plane.camease { transition: --tilt .5s ease, --rz .5s ease, --k .7s cubic-bezier(.3, .1, .2, 1), --px .7s cubic-bezier(.3, .1, .2, 1), --py .7s cubic-bezier(.3, .1, .2, 1); }
@media (prefers-reduced-motion: reduce) { .plane { transition: none; } }
/* The Boss bar shares one row with the buttons, so Ready never moves. */
.top .bossbar .stage { width: 46px; }
.top .bossbar { gap: 6px; padding: 4px 8px; }
@media (max-width: 1500px) { .top.hasboss .title { display: none; } }

/* ---- short, narrow windows: the hand sits beside the Hero instead of under it, so it stays on screen ---- */
@media (max-height: 760px) and (min-width: 700px) {
  #app.narrow .bottom { display: grid; grid-template-columns: minmax(250px, 36%) minmax(0, 1fr); gap: 4px 12px; align-items: start; }
  #app.narrow .bottom > .handwrap { grid-column: 2; grid-row: 1 / span 3; }
  #app.narrow .bottom > :not(.handwrap) { grid-column: 1; }
}
@media (max-height: 760px) and (min-width: 700px) { #app.narrow .handzone { zoom: .82; } }

/* ---- a closer look at an enemy ---- */
.inspect { display: grid; grid-template-columns: 92px minmax(0, 250px) auto; gap: 10px; align-items: start; text-align: left; }
.insart { width: 92px; height: 116px; border-radius: 9px; overflow: hidden; border: 2px solid #b0553d; background: #1b1510; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.insart img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.insbody { display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.35; }
.insname { font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; letter-spacing: .05em; font-size: 16px; color: #ffb08a; }
.insrank { color: var(--dim); font-size: 12px; margin-top: -4px; }
.insstats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.insstats span { display: inline-flex; align-items: center; gap: 4px; }
.insstats .ic { width: 16px; height: 16px; }
.inssts { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--dim); }
.inssts span { display: flex; align-items: center; gap: 5px; }
.inssts .sticon { width: 18px; height: 18px; flex: none; }
.inssts .buff b { color: var(--good); } .inssts .debuff b { color: #ff9a8a; }
.instext { color: var(--ink); }
.insplan { color: #ffb4a6; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.insplan .ic { width: 14px; height: 14px; }
.insart svg { width: 100%; height: 100%; display: block; }
#newver { top: auto; bottom: 14px; left: 14px; transform: none; }
#app.narrow .table3d { touch-action: pan-y; }

/* ---- a won Delve glows ---- */
@keyframes winglow { 0%, 100% { box-shadow: 0 0 46px rgba(255, 190, 80, .28), 0 14px 50px rgba(0, 0, 0, .6); } 50% { box-shadow: 0 0 90px rgba(255, 200, 90, .5), 0 14px 50px rgba(0, 0, 0, .6); } }
.overlay.end.win .dialog { animation: dlg 240ms ease-out both, winglow 2.8s ease-in-out 240ms infinite; }
@media (prefers-reduced-motion: reduce) { .overlay.end.win .dialog { animation: none; } }

/* ---- medals on Hero picks, and a pointer after a loss ---- */
.pick { position: relative; }
.pick .pickmedal { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; }
.endtip { max-width: 400px; font-size: 13px; line-height: 1.4; color: #e8d9b8; background: rgba(0, 0, 0, .35); border-left: 3px solid var(--ember); border-radius: 4px; padding: 7px 10px; text-align: left; }

/* ---- Hero setup: a portrait of the Hero being built ---- */
.overlay.lobby .dialog { width: min(900px, 96vw); }
.hero-build { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; }
.hero-build > * { grid-column: 2; }
.hero-build > .hb-head { grid-column: 1 / -1; }
.hero-build > .hb-portrait { grid-column: 1; grid-row: span 8; align-self: stretch; position: relative; min-height: 250px; border-radius: 12px; overflow: hidden; border: 2px solid var(--trim-hi); background: #1b1510; box-shadow: 0 6px 18px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 230, 160, .15); }
.hb-portrait > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hb-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 52%, rgba(12, 8, 5, .94) 86%); }
.hb-portrait b, .hb-portrait em { position: absolute; left: 0; right: 0; z-index: 1; text-align: center; text-shadow: 0 1px 3px #000; }
.hb-portrait b { bottom: 24px; font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; letter-spacing: .05em; font-size: 14px; color: #ffe7b0; padding: 0 4px; }
.hb-portrait em { bottom: 8px; font-style: normal; font-size: 12px; color: #cdbb9c; }
.hbp-anc, .hbp-bg { position: absolute; top: 8px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid var(--trim-hi); background: #e9dcc0; z-index: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.hbp-anc { left: 8px; } .hbp-bg { right: 8px; }
.hbp-anc svg, .hbp-bg svg { width: 100%; height: 100%; display: block; }
@media (max-width: 760px) { .hero-build { grid-template-columns: minmax(0, 1fr); } .hero-build > * { grid-column: 1; } .hero-build > .hb-portrait { display: none; } }

/* ---- Shielded toggle in the defence box ---- */
.pb.tok { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 3px; opacity: .55; }
.pb.tok.on { opacity: 1; }
.pb.tok .sticon { width: 24px; height: 24px; }

/* ---- shorter screens: a tighter Market, so the Equipment row is in view without scrolling ---- */
@media (max-height: 900px) {
  #app:not(.narrow) .side { gap: 8px; padding: 8px 10px; }
  #app:not(.narrow) .side h3 { padding-bottom: 2px; margin: 0; font-size: 11px; }
  #app:not(.narrow) .market { gap: 4px; }
  #app:not(.narrow) .mcard { grid-template-columns: 44px 1fr auto; gap: 7px; padding: 4px 6px; }
  #app:not(.narrow) .mcard .thumb { width: 44px; height: 44px; }
  #app:not(.narrow) .mcard .nm { font-size: 13px; }
  #app:not(.narrow) .mcard .tx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #app:not(.narrow) .mcard .buy { gap: 2px; }
  #app:not(.narrow) .mcard .buy button { padding-top: 2px; padding-bottom: 2px; }
}

/* ---- what is new ---- */
.news-dialog > div { line-height: 1.45; }
.news-dialog > div b { color: #ffe7b0; }
.overlay.home + .overlay { z-index: 30; }

/* ---- narrow layout: two steady rows on top. Facts above, buttons below, Ready always at the right end ---- */
#app.narrow .top { row-gap: 6px; }
#app.narrow .top .spacer { flex-basis: 100%; height: 0; }
#app.narrow .top .spacer + button { margin-left: auto; }
#app.narrow .top.hasboss .title, #app.narrow .top .title { display: none; }
.hero-build > .hb-portrait { align-self: start; height: 280px; min-height: 0; }
/* In a narrow but tall window there is room to show the hand's cards whole. */
@media (min-height: 800px) { #app.narrow .fan { height: 206px; } }
/* While crafting in the narrow layout the hand is not in use, so it steps back and the board gets the room. */
#app.narrow:has(.craftpal) .fan { height: 96px; }
/* Narrow and tall: the stat line (Attack, Armor, Reach...) is always in view; the rest still opens from the Hero's name. */
@media (min-height: 800px) {
  #app.narrow .me .more { display: block; }
  #app.narrow:not(.hero-open) .me .more > :not(.stats) { display: none; }
  #app.narrow .me .more > .stats { margin: 0; }
}

/* ---------- the Boss die ---------- */
/* Drawn after the black six-sided die with white numerals pictured beside the Wicklin King. */
.dieface { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; flex: none; background: radial-gradient(circle at 30% 25%, #4a4a50, #0c0c0e 72%); color: #fff; font: 700 15px/1 Luminari, "Copperplate Gothic Bold", Copperplate, Georgia, serif; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 3px rgba(0, 0, 0, .6); }
.inspect.boss { grid-template-columns: 92px minmax(0, 250px) minmax(0, 300px) auto; }
.bossfaces { display: grid; grid-template-columns: 1fr; gap: 5px; font-size: 11.5px; line-height: 1.3; color: var(--dim); border-left: 1px solid var(--line); padding-left: 10px; }
.bf { display: flex; gap: 6px; align-items: flex-start; }
.bf b { color: var(--ink); }
.bf i { color: var(--gold); font-style: normal; font-size: 10px; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; white-space: nowrap; }
.bf.next .dieface { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(240, 138, 36, .8); }
.bf.next b { color: var(--gold); }
.bf.last .dieface { box-shadow: 0 0 0 2px #b0553d; }
.diebtn { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 3px; border: 1px solid rgba(255, 122, 60, .5); background: rgba(0, 0, 0, .28); border-radius: 7px; color: var(--ink); font-size: 12px; cursor: pointer; white-space: nowrap; }
.diebtn:hover { border-color: #ff7a3c; background: rgba(255, 122, 60, .14); }
.diebtn img { width: 24px; height: 22px; object-fit: contain; }
.fx-dice { position: absolute; left: 50%; top: 40%; z-index: 7; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 14px; transform: translate(-50%, -50%); opacity: 0; animation: dicewrap both linear; }
@keyframes dicewrap { 0% { opacity: 0; } 4% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
.dscene { width: 84px; height: 84px; perspective: 520px; filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .65)); }
.dcube { --rx: 0deg; --ry: 0deg; position: relative; width: 84px; height: 84px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); animation: dieroll both linear; }
.dcube.d2 { --ry: -90deg; } .dcube.d3 { --rx: -90deg; } .dcube.d4 { --rx: 90deg; } .dcube.d5 { --ry: 90deg; } .dcube.d6 { --ry: 180deg; }
.dcube .dieface { position: absolute; inset: 0; width: auto; height: auto; border-radius: 15px; font-size: 56px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), inset 0 0 18px rgba(0, 0, 0, .8); }
.dcube .s1 { transform: translateZ(42px); } .dcube .s2 { transform: rotateY(90deg) translateZ(42px); } .dcube .s3 { transform: rotateX(90deg) translateZ(42px); }
.dcube .s4 { transform: rotateX(-90deg) translateZ(42px); } .dcube .s5 { transform: rotateY(-90deg) translateZ(42px); } .dcube .s6 { transform: rotateY(180deg) translateZ(42px); }
@keyframes dieroll {
  0% { transform: translateY(-120px) rotateX(calc(var(--rx) + 800deg)) rotateY(calc(var(--ry) + 560deg)) rotateZ(170deg); animation-timing-function: cubic-bezier(.45, 0, .9, .55); }
  30% { transform: translateY(0) rotateX(calc(var(--rx) + 110deg)) rotateY(calc(var(--ry) + 70deg)) rotateZ(20deg); animation-timing-function: ease-out; }
  36% { transform: translateY(-24px) rotateX(calc(var(--rx) + 40deg)) rotateY(calc(var(--ry) + 24deg)) rotateZ(6deg); animation-timing-function: ease-in; }
  42% { transform: translateY(0) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(0deg); }
  45% { transform: translateY(-5px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(0deg); }
  48%, 100% { transform: translateY(0) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(0deg); }
}
.dname { display: flex; flex-direction: column; gap: 2px; text-align: center; padding: 8px 30px; max-width: min(460px, 88vw); background: linear-gradient(90deg, transparent, rgba(17, 13, 9, .93) 18%, rgba(17, 13, 9, .93) 82%, transparent); border-top: 1px solid rgba(255, 122, 60, .6); border-bottom: 1px solid rgba(255, 122, 60, .6); opacity: 0; animation: dname both ease-out; }
.dname b { font-family: Copperplate, "Copperplate Gothic Bold", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: .06em; font-size: 26px; color: #ff7a3c; text-shadow: 0 0 18px rgba(240, 138, 36, .6); white-space: nowrap; }
.dname span { color: var(--ink); font-size: 13px; }
@keyframes dname { 0%, 42% { opacity: 0; transform: translateY(8px); } 50%, 100% { opacity: 1; transform: none; } }
.fx-dice.known .dcube { animation: none; }
.fx-dice.known .dname { animation: none; opacity: 1; }
#app.narrow .dname b { font-size: 21px; }
@media (prefers-reduced-motion: reduce) {
  .dcube, .dname { animation: none !important; }
  .dname { opacity: 1; }
}

/* ---------- turn order and the flame tokens ---------- */
/* Each Hero has the flame token of their Class and each Monster one of eight coloured flames: the same token shows on the
   piece and on its place in the turn order, as it would on the board and on the card in the board game. */
.init { position: absolute; left: 8px; top: 8px; z-index: 4; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 5px; max-width: calc(100% - 400px); padding: 5px 7px 4px; border-radius: 9px; background: rgba(17, 13, 9, .66); border: 1px solid rgba(217, 178, 90, .28); }
.inilbl { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); height: 38px; text-align: center; }
.inisep { color: var(--gold); font-size: 13px; opacity: .8; line-height: 38px; }
.ini { position: relative; width: 38px; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: var(--ink); }
.iniart { display: block; width: 34px; height: 34px; border-radius: 8px; overflow: hidden; border: 2px solid var(--bad); background: #1b1510; }
.iniart svg { width: 100%; height: 100%; display: block; }
.ini.hero .iniart { border-color: var(--cool); }
.ini.boss .iniart { border-color: #ff7a3c; }
.initok { position: absolute; left: -4px; top: 19px; width: 19px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 1px #f3e2b0) drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); pointer-events: none; }
.inihp { position: absolute; right: -3px; top: 25px; min-width: 15px; height: 14px; padding: 0 3px; border-radius: 7px; background: #c8392e; color: #fff; font-size: 9.5px; font-weight: 800; line-height: 13px; text-align: center; border: 1px solid #0b0705; }
.ini.hero .inihp { background: #3d9a4c; }
.inito { display: inline-flex; align-items: center; gap: 1px; height: 15px; margin-top: 5px; font-size: 10px; font-weight: 800; color: #ffb4a6; }
.inito img { width: 12px; height: 14px; object-fit: contain; margin-left: 1px; }
.inito .ic { width: 9px; height: 9px; }
.ini.now .iniart { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(240, 138, 36, .85); }
.ini.hit .iniart { box-shadow: 0 0 0 2px #ff3b2e, 0 0 10px rgba(255, 59, 46, .7); }
.ini.down { opacity: .45; }
.ini:hover .iniart, .ini.hot .iniart { filter: brightness(1.25); box-shadow: 0 0 0 2px #fff; }
.piece.hot .fig:not(.flame) { box-shadow: 0 0 0 3px #fff, 0 0 14px rgba(255, 255, 255, .7); }
.piece.hot .figtok { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #fff); }
.bbi { position: relative; }
.ptok { position: absolute; left: 50%; bottom: -8px; margin-left: -37px; width: 23px; height: 27px; object-fit: contain; filter: drop-shadow(0 0 1px #f3e2b0) drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); pointer-events: none; }
.fig.flame { border: 0; background: none; box-shadow: none; overflow: visible; }
.fig.flame::after { display: none; }
.figtok { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 0 1.5px #f3e2b0) drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.fig.flame em { bottom: -6px; left: 4px; right: 4px; border-radius: 6px; background: rgba(17, 13, 9, .88); padding: 1px 0; }
#app.narrow .init { max-width: calc(100% - 450px); }
.fig.flame em { bottom: -15px; }

/* ---------- the log, with symbols ---------- */
.lg { display: flex; align-items: center; gap: 4px; }
.lgl { flex: 1; min-width: 0; }
.lgl .lgtok, .lgl .ic { vertical-align: -2px; }
.lgr { flex: none; min-width: 30px; justify-content: flex-end; }
.lg b { color: var(--ink); font-weight: 600; }
.lg .ic { width: 11px; height: 11px; }
.lgtok { height: 15px; width: 13px; object-fit: contain; flex: none; filter: drop-shadow(0 0 1px rgba(243, 226, 176, .8)); }
.lgarrow { color: var(--gold); opacity: .8; }
.lgdmg { color: #ff9a8a; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.lgok { color: var(--good); display: inline-flex; align-items: center; gap: 2px; }
.lg .dieface { width: 15px; height: 15px; font-size: 11px; border-radius: 4px; }
.feed .lg { flex-wrap: nowrap; }

/* The pieces stand upright on the board, so anything below their feet is hidden by the floor: the token badge sits
   beside the figure's foot, and in the token-only view the stats strip sits under the token, inside the piece. */
.ptok { bottom: 1px; margin-left: -41px; }
.piece.boss .ptok { margin-left: -50px; }
.fig.flame { height: auto; display: flex; flex-direction: column; align-items: center; }
.fig.flame .figtok { width: 54px; height: 60px; }
.fig.flame em { position: static; margin-top: 1px; padding: 1px 6px; border-radius: 6px; background: rgba(17, 13, 9, .9); }

/* A tile that cannot take what is being placed (it already holds an Environment). */
.tile-hit.no { fill: rgba(226, 87, 76, .3); stroke: var(--bad); stroke-width: 3; stroke-dasharray: 7 5; cursor: not-allowed; }
.tile-hit.no:hover { fill: rgba(226, 87, 76, .45); }
.hexb.full { filter: grayscale(.7) brightness(.6); outline: 2px solid var(--bad); }

/* Boost buttons show the card they come from, with what it adds in the corner. */
.pb.big { position: relative; }
.pb.big .hxart { width: 40px; height: 40px; }
.pbn { position: absolute; right: -5px; bottom: -5px; min-width: 18px; height: 16px; padding: 0 3px; border-radius: 8px; background: #17130f; border: 1px solid var(--gold); color: var(--gold); font-size: 10.5px; font-weight: 800; line-height: 14px; text-align: center; pointer-events: none; }
.pb.big.on .pbn { background: var(--gold); color: #17130f; }

.traptag { font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #ff9a8a; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }

/* ---------- the Hero mat: stat tracks with cubes, as on the table ---------- */
.matbtn { margin-left: 6px; padding: 1px 8px; font-size: 11px; }
.matdlg { max-width: min(760px, 96vw); }
.mat { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; border-radius: 10px; border: 2px solid #b5762b; background: linear-gradient(135deg, #5c4a3a, #3d3128 60%, #4b3320); box-shadow: inset 0 0 0 1px rgba(255, 200, 120, .25), 0 4px 14px rgba(0, 0, 0, .5); }
.matart { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.matart svg { width: 96px; height: 124px; border-radius: 9px; border: 2px solid #e0a23c; background: #1b1510; display: block; }
.matart b { font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; font-size: 12px; color: #ffe2a8; text-align: center; letter-spacing: .04em; }
.mattracks { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.trk { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trkname { display: inline-flex; align-items: center; gap: 4px; width: 74px; flex: none; font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; font-size: 12.5px; color: #f1e3c4; letter-spacing: .03em; }
.trkname .ic { width: 15px; height: 15px; }
.cells { display: flex; gap: 2px; flex-wrap: nowrap; }
.cell { position: relative; width: 25px; height: 25px; display: grid; place-items: center; flex: none; background: #14100c; color: #cdbb99; font-size: 11.5px; font-weight: 700; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cell.low { color: #6d6150; }
.cube { position: absolute; inset: 5px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset -2px -3px 4px rgba(0, 0, 0, .35); opacity: .88; }
.cube.g { background: linear-gradient(135deg, #a6f0a0, #2fae4f); }
.cube.y { background: linear-gradient(135deg, #fff39a, #e3b81e); }
/* Two cubes on one space sit side by side, so both can be seen. */
.cube.y:has(+ .cube.g) { inset: 6px 11px 6px 2px; }
.cube.y + .cube.g { inset: 6px 2px 6px 11px; }
.trkpair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eslots { display: flex; gap: 5px; }
.eslot { position: relative; width: 44px; height: 44px; border-radius: 7px; border: 1px dashed rgba(255, 220, 160, .5); display: grid; place-items: center; font-size: 9.5px; color: #cdbb99; background: rgba(0, 0, 0, .3); }
.eslot.shut { border-style: solid; border-color: rgba(0, 0, 0, .5); color: #6d6150; background: rgba(0, 0, 0, .5); }
.eslot img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.eslot b { position: absolute; left: 2px; top: 1px; font-size: 10px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.pipmark { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: #8d8d8d; border: 1px solid #111; display: grid; place-items: center; }
.pipmark + .pipmark { right: 10px; }
.pipmark .ic { width: 10px; height: 10px; }
.matrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.matlbl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.matsts { display: inline-flex; gap: 8px; align-items: center; }
.matsts .sticon { width: 22px; height: 22px; }
.matabil { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--dim); }
.matabil b { color: var(--ink); }
@media (max-width: 620px) { .trkpair { grid-template-columns: 1fr; } }

/* Walls drawn again over an Environment token, a little brighter at the edge so a wall reads as a wall. */
.wallstop { pointer-events: none; }
.wallstop .wall { stroke: #1a110a; stroke-width: 8; opacity: 1; filter: drop-shadow(0 0 1.5px rgba(214, 196, 160, .75)); }

/* A crowded turn order (a full party and its Monsters) uses smaller entries so it stays out of the board's way. */
.init.many { gap: 3px; padding: 4px 5px 3px; }
.init.many .ini { width: 29px; min-height: 31px; }
.init.many .iniart { width: 26px; height: 26px; border-radius: 6px; border-width: 1.5px; }
.init.many .initok { width: 14px; height: 16px; top: 15px; left: -3px; }
.init.many .inihp { top: 18px; right: -3px; min-width: 13px; height: 12px; font-size: 8.5px; line-height: 11px; padding: 0 2px; }
.init.many .inito { height: 12px; margin-top: 4px; font-size: 8.5px; }
.init.many .inito img { width: 9px; height: 11px; }
.init.many .inito .ic { width: 7px; height: 7px; }
.init.many .inilbl { height: 30px; font-size: 7.5px; }
.init.many .inisep { line-height: 30px; }
/* In the narrow layout a crowded turn order takes one row under the camera buttons instead of two beside them. */
#app.narrow .init.many { top: 36px; max-width: calc(100% - 16px); flex-wrap: nowrap; }

.trk .over { color: #a6f0a0; font-size: 12px; margin-left: 2px; }

/* ---------- the Fight die (Lucky Blade): grey with orange numerals, after the grey die in the art ---------- */
.fx-dice.fight { top: 36%; }
.fx-dice.fight .dscene { width: 70px; height: 70px; }
.fx-dice.fight .dcube { width: 70px; height: 70px; }
.fx-dice.fight .dcube .dieface { border-radius: 13px; font-size: 44px; color: #ff8a3a; background: radial-gradient(circle at 30% 25%, #9a9a9c, #4b4b4e 72%); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), inset 0 0 16px rgba(0, 0, 0, .55); }
.fx-dice.fight .dcube .s1 { transform: translateZ(35px); } .fx-dice.fight .dcube .s2 { transform: rotateY(90deg) translateZ(35px); } .fx-dice.fight .dcube .s3 { transform: rotateX(90deg) translateZ(35px); }
.fx-dice.fight .dcube .s4 { transform: rotateX(-90deg) translateZ(35px); } .fx-dice.fight .dcube .s5 { transform: rotateY(-90deg) translateZ(35px); } .fx-dice.fight .dcube .s6 { transform: rotateY(180deg) translateZ(35px); }
.fx-dice.fight .dname b { color: #ffb04a; font-size: 22px; }
.pv .least { font-size: .8em; }

/* ---------- dice drawn from the original art (11 November 2026) ---------- */
.dieface img { width: 62%; height: 72%; object-fit: contain; display: block; pointer-events: none; }
.dieface.ff { background: radial-gradient(circle at 30% 25%, #ffe45c, #e0a800 78%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .6); vertical-align: -5px; }
.dieface.ff img { width: 78%; height: 78%; }
.fx-dice.fight .dcube .dieface { background: radial-gradient(circle at 30% 25%, #ffe86a, #dba400 80%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4), inset 0 0 16px rgba(120, 70, 0, .45); }
.lg .dieface.ff { width: 17px; height: 17px; border-radius: 4px; }

/* ---------- Gates, and pieces whose pictures are not drawn yet (11 November 2026) ---------- */
.noart { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #4a3a2c, #1c1512 78%); }
.noart img { width: 78%; height: 78%; object-fit: contain; opacity: .9; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.noart b { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font: 700 11px/1 "Copperplate Gothic Bold", Copperplate, Georgia, serif; color: #f3e2b0; letter-spacing: .06em; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.iniart, .insart { position: relative; }
.iniart .noart b { font-size: 8px; bottom: 2%; }
.insart .noart b { font-size: 20px; }
.gatename { margin-left: 4px; padding: 1px 6px; border-radius: 8px; border: 1px solid rgba(240, 138, 36, .45); color: var(--gold); font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
.loot { position: absolute; right: -4px; top: -4px; z-index: 3; display: inline-flex; align-items: center; gap: 1px; padding: 0 4px 0 1px; border-radius: 9px; background: rgba(20, 14, 10, .92); border: 1px solid #c9912e; color: #ffd98a; font: 700 10px/14px system-ui, sans-serif; }
.loot img { width: 12px; height: 12px; }
.diffs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.diffs.four .diff { padding-left: 8px; padding-right: 8px; }
@media (max-width: 560px) { .diffs.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.noart b { bottom: auto; top: 7%; font-size: 12px; }
.noart img { margin-top: 12%; width: 70%; height: 70%; }
.iniart .noart b { top: 0; bottom: auto; font-size: 8px; }
.iniart .noart img, .insart .noart img { margin-top: 10%; }
.insart .noart b { top: 5%; bottom: auto; }

/* ---------- Ancestries and Backgrounds with no picture yet (11 November 2026) ---------- */
.pickna { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 14px; font: 700 26px/1 "Copperplate Gothic Bold", Copperplate, Georgia, serif; font-style: normal; color: #c9a85a; background: radial-gradient(circle at 50% 35%, #3d3024, #1a140f 80%); letter-spacing: .04em; }
.hbp-anc .pickna, .hbp-bg .pickna { font-size: 13px; padding-bottom: 0; }

/* ---- board game view: the screen shows the pieces that are in the box ---- */
.tvgone, #app.tv .tvhide { display: none !important; }
/* the dungeon board, in the top bar */
.dboard { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 5px 14px; flex-wrap: wrap; padding: 4px 10px; border-radius: 8px; border: 1px solid #8a5a24; background: linear-gradient(135deg, #4d3c2d, #33271d 60%, #40301f); box-shadow: inset 0 0 0 1px rgba(255, 200, 120, .18), 0 2px 6px rgba(0, 0, 0, .5); }
.dbc { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.dbc.where { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; white-space: nowrap; }
.dbc.where b { font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; letter-spacing: .04em; color: #ffe7b0; font-size: 13px; }
.dbc.where i { font-style: normal; font-size: 11px; color: var(--dim); white-space: nowrap; }
.ftrack { gap: 0; }
.fw { position: relative; width: 19px; height: 24px; display: grid; place-items: center; color: #8d7c62; font-size: 9px; font-weight: 700; }
.fw::before { content: ''; position: absolute; left: 3px; top: 5.5px; width: 13px; height: 13px; transform: rotate(45deg); background: #14100c; border: 1px solid #6a5238; box-sizing: border-box; }
.fw.past::before { background: #4a2a14; border-color: #a0602a; }
.fw.end::before { border-color: #e2574c; background: #2a1210; }
.fw > * { position: relative; font-style: normal; }
.fmark { height: 24px; margin-top: -3px; filter: drop-shadow(0 0 1px #ffd56a) drop-shadow(0 0 5px rgba(240, 138, 36, .95)); }
.fmark.new { animation: flare both ease-out; }
.fboss { height: 17px; opacity: .75; }
.swtok { width: 21px; height: 21px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f6ecd0, #cbb684); display: grid; place-items: center; box-shadow: 0 1px 2px #000, inset 0 0 0 1px rgba(120, 80, 30, .5); }
.swtok .ic { width: 12px; height: 12px; color: #c8392e; margin: 0; }
.swnone { font-style: normal; font-size: 10.5px; color: var(--bad); }
.esccard { font-size: 10.5px; font-weight: 700; padding: 3px 6px; border-radius: 3px; background: #3a1512; border: 1px solid #e2574c; color: #ffd0c8; }
.stacks { display: inline-flex; gap: 7px; }
.mleft { flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding-right: 4px; }
.stack { position: relative; width: 36px; height: 30px; border-radius: 3px; background: linear-gradient(135deg, #5b2a1c, #2c150e); border: 1px solid #b5762b; box-shadow: 2px 2px 0 #1a0d08, 3px 3px 0 #6a4320; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.stack b { font-size: 12px; color: #ffe7b0; }
.stack i { font-style: normal; font-size: 7.5px; color: #d8c39a; text-transform: uppercase; letter-spacing: .03em; }
.bossarea { gap: 7px; }
.bname { font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; color: #ffcf9a; font-size: 13px; letter-spacing: .04em; }
.dial { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #14100c 55%, #6a4320 57%, #b5762b 100%); box-shadow: 0 1px 3px #000; }
.dial b { font-size: 15px; color: #fff; }
.bbars { display: inline-flex; gap: 3px; }
.bbar { width: 11px; height: 17px; border-radius: 2px; background: linear-gradient(#ff8a7c, #c8392e); border: 1px solid #ffb9ad; box-sizing: border-box; }
.bbar.gone { opacity: .18; }
.bbar.on { box-shadow: 0 0 6px #ff7a3c; }
.bst { font-size: 12.5px; white-space: nowrap; }
#app.tv .top .dboard { flex: 0 1 auto; }
#app.narrow.tv .top .spacer { flex: 1 1 0; height: auto; }
#app.narrow.tv .top { flex-wrap: nowrap; }
#app.tv .dboard { flex-wrap: nowrap; overflow: hidden; }
#app.tv .dboard .diebtn { flex: 0 1 auto; min-width: 0; overflow: hidden; }
#app.tv .dboard .diebtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnotes { display: flex; flex-wrap: wrap; gap: 3px; max-width: 150px; }
.mnotes .esccard, .mnotes .chip { font-size: 9.5px; padding: 1px 5px; }
/* the Monster row */
.mrow { flex: none; display: flex; align-items: stretch; gap: 5px; padding: 5px 8px; background: linear-gradient(#241a12, #1a120c); border-bottom: 1px solid #0b0705; overflow-x: auto; }
.mdeck { flex: none; width: 46px; min-height: 44px; border-radius: 5px; background: linear-gradient(135deg, #3b1d14, #1f0f0a); border: 1px solid #8a5a24; box-shadow: 2px 2px 0 #120906; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.mdeck b { font-size: 15px; color: #ffe7b0; }
.mdeck i { font-style: normal; font-size: 7.5px; color: #d8c39a; text-transform: uppercase; }
.mrowempty { align-self: center; color: var(--dim); font-size: 12px; padding: 0 6px; }
.mc { position: relative; flex: none; width: 84px; padding: 0 0 3px; border-radius: 5px; border: 1px solid #b59a6a; background: #efe3c8; color: #2a1c10; display: flex; flex-direction: column; align-items: stretch; text-align: center; cursor: pointer; font: inherit; overflow: hidden; box-shadow: 1px 2px 3px rgba(0, 0, 0, .6); }
.mcart { height: 28px; border-top: 4px solid var(--tc, #b59a6a); background: #1b1510; display: block; overflow: hidden; }
.mcart { position: relative; }
.mcart svg { width: 100%; height: 100%; display: block; }
.mcart .noart b { display: none; }
.mcart .noart img { margin-top: 0; width: auto; height: 92%; }
.mc:has(.noart) .mctok { display: none; }
.mctok { position: absolute; left: 1px; top: 12px; width: 18px; height: 21px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.mcname { font-size: 9.5px; font-weight: 800; line-height: 1.15; padding: 2px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcstats, .mchp, .mcsts { font-size: 9.5px; font-weight: 800; display: flex; justify-content: center; align-items: center; gap: 2px; min-height: 12px; white-space: nowrap; }
.mc .ic { width: 8px; height: 8px; margin: 0; }
.mchp { gap: 1.5px; }
.mchp .ic { color: #c8392e; }
.mchp .cube.r { position: static; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: linear-gradient(135deg, #ff8a7c, #b62a20); opacity: 1; }
.mcsts { flex-wrap: wrap; gap: 1px; }
.mcsts .sticon { width: 13px; height: 13px; border-radius: 50%; }
.mcsts .cic { width: 12px; height: 12px; }
.mcaim { position: absolute; right: 1px; top: 1px; display: inline-flex; align-items: center; gap: 1px; padding: 0 3px; border-radius: 7px; background: #c8392e; color: #fff; font-size: 10px; font-weight: 800; }
.mcaim img { width: 10px; height: 12px; object-fit: contain; }
.mc.boss { border-color: #ff7a3c; background: #f3d9c0; }
.mc.now { box-shadow: 0 0 0 2px #ff3b2e, 0 0 10px rgba(255, 59, 46, .7); }
.mc:hover, .mc.hot { box-shadow: 0 0 0 2px #fff; }
.mrow.many .mc { width: 72px; }
.mrow.many .mcstats { font-size: 8.5px; gap: 1px; }
#app.tv .fig.flame .figtok { filter: drop-shadow(0 0 1.5px var(--tc, #f3e2b0)) drop-shadow(0 0 5px var(--tc, #f3e2b0)) drop-shadow(0 4px 5px rgba(0, 0, 0, .7)); }
/* the Hero mat, in front of the player */
.imat { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid #b5762b; background: linear-gradient(135deg, #5c4a3a, #3d3128 60%, #4b3320); box-shadow: inset 0 0 0 1px rgba(255, 200, 120, .2); cursor: pointer; }
.imat .trk { display: inline-flex; align-items: center; gap: 3px; }
.imat .trkname { width: auto; }
.imat .trkname .ic { width: 13px; height: 13px; color: #f1e3c4; }
.imat .cells { gap: 0; }
.imat .cell { width: 20px; height: 20px; font-size: 9px; }
.imat .cell em { position: relative; z-index: 1; font-style: normal; }
.imat .cell:has(.cube) em { color: #0e1d0c; font-weight: 800; }
.imat .cube { inset: 5px; opacity: 1; }
.imat .cube.y:has(+ .cube.g) { inset: 5px 10px 5px 2px; }
.imat .cube.y + .cube.g { inset: 5px 2px 5px 10px; }
.sttok { display: inline-flex; gap: 1px; margin-right: 3px; }
.sttok .sticon { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 1px 2px #000; }
/* pieces: clear acrylic standees for Heroes and the Boss, wooden flames for Monsters; a Monster's Health and numbers are on its card */
/* A Health bar stays above every piece, Monsters included (Connor, 12 November 2026); the other numbers are on the card. */
#app.tv .piece.enemy .fig em { display: none; }
#app.tv .piece.enemy:not(.boss) .php { margin: 0 auto 2px; }
#app.tv .piece.hero .fig, #app.tv .piece.boss .fig { border-radius: 9px 9px 3px 3px; background: rgba(235, 245, 255, .07); }
#app.tv .piece.hero:not(.sel):not(.aim):not(.hinted):not(.hint) .fig, #app.tv .piece.boss:not(.attacker):not(.aim):not(.hinted):not(.hint) .fig { border: 1.5px solid rgba(235, 245, 255, .6); box-shadow: 0 0 0 1px rgba(160, 210, 255, .18), 0 3px 8px rgba(0, 0, 0, .6); }
#app.tv .piece:not(.sel):not(.aim):not(.attacker):not(.hinted):not(.hint) .base { background: radial-gradient(ellipse at 50% 35%, rgba(235, 245, 255, .3), rgba(235, 245, 255, .08) 70%); border: 1.5px solid rgba(235, 245, 255, .55); box-shadow: 0 4px 8px 2px rgba(0, 0, 0, .45); }
#app.tv .piece.enemy:not(.boss):not(.aim):not(.attacker):not(.hinted):not(.hint) .base { display: none; }
#app.tv:not(.narrow) .bottom { grid-template-columns: 352px 1fr 230px; }
.mcart .noart { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tc, #b59a6a) 60%, #1c1512), #1c1512 85%); }
.mcart .noart img { opacity: 1; }

/* ---- cards in flight, and Teaching captions ---- */
.flyc { position: fixed; z-index: 100; pointer-events: none; }
.flyc.flycard .card { position: static !important; transform: none !important; width: 100% !important; height: 100% !important; animation: none !important; visibility: visible !important; filter: none !important; opacity: 1 !important; }
.flyc.flycard .mcard { background: #2a2017; border: 1px solid var(--trim); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, .6); }
.cback { width: 100%; height: 100%; border-radius: 5px; border: 1px solid #b5762b; background: linear-gradient(135deg, #5b2a1c, #2c150e); box-shadow: inset 0 0 0 3px #3a1c12, inset 0 0 0 4px rgba(226, 150, 60, .5), 0 4px 10px rgba(0, 0, 0, .6); background-image: url(assets/icons/flame.png), linear-gradient(135deg, #5b2a1c, #2c150e); background-repeat: no-repeat; background-position: center; background-size: 46% auto, cover; box-sizing: border-box; }
.flyc.mdraw { perspective: 600px; }
.flyc.mdraw .flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.flyc.mdraw .face { position: absolute; inset: 0; backface-visibility: hidden; }
.flyc.mdraw .face.back { transform: rotateY(180deg); }
.flyc.mdraw .mc { width: 100%; height: 100%; animation: none; opacity: 1; box-shadow: 0 10px 26px rgba(0, 0, 0, .7), 0 0 0 1px #fff; }
.flyc.tilefly img { width: 100%; height: 100%; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
@keyframes mcarrive { 0%, 97% { opacity: 0; } 100% { opacity: 1; } }
.mc.fx-arrive { animation: mcarrive both linear; }
.steps { position: absolute; left: 8px; top: 8px; z-index: 5; width: min(430px, calc(100% - 310px)); pointer-events: none; }
@keyframes stepcap { 0% { opacity: 0; transform: translateY(-6px); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.stepcap { position: absolute; left: 0; top: 0; right: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 8px; border: 1px solid #b5762b; border-left: 4px solid var(--ember); background: rgba(28, 20, 13, .94); box-shadow: 0 4px 12px rgba(0, 0, 0, .6); font-size: 12.5px; line-height: 1.3; animation: stepcap both ease-out; }
.stepcap i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }
#app.narrow .steps { width: min(430px, calc(100% - 300px)); }
@media (prefers-reduced-motion: reduce) { .mc.fx-arrive { animation: none; } }

/* ---- the public demo ---- */
.demoline { max-width: 420px; margin: 0 auto; font-size: 13.5px; line-height: 1.45; }
.ctalink { display: inline-block; padding: 8px 18px; border-radius: 8px; border: 1px solid var(--trim-hi, #d9a04e); background: linear-gradient(#f4b24a, #d98a24); color: #1b130b; font-family: Copperplate, "Copperplate Gothic Bold", Georgia, serif; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.ctalink:hover { filter: brightness(1.1); }
.ctalink.big { font-size: 15px; padding: 10px 22px; margin-top: 4px; }
.demoend { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 10px 0 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--trim, #8a5a24); background: rgba(240, 138, 36, .08); text-align: center; line-height: 1.45; }
.demoend b { font-size: 15px; color: #ffe7b0; }

/* ---- real card backs: the three stacks by the Monster row, the draw pile, and cards in flight ---- */
#tip { white-space: pre-line; }
.cback.mon { background: url(assets/icons/back-monster.png) center / cover no-repeat; border: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.cback.ev { background: url(assets/icons/back-event.png) center / cover no-repeat; border: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.cback.act { background: url(assets/icons/back-action.png) center / cover no-repeat; border: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.stacks { align-items: flex-end; gap: 8px; }
.stack { position: relative; width: 40px; height: auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; background: none; border: 0; border-radius: 0; box-shadow: none; line-height: 1; }
.stack .sback { display: block; filter: drop-shadow(1.5px 1.5px 0 #1a0d08) drop-shadow(1.5px 1.5px 0 #6a4320) drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }
.stack .sback span { display: block; width: 34px; height: 47.6px; border-radius: 3px; background: center / cover no-repeat; }
.stack.mon .sback span { background-image: url(assets/icons/back-monster.png); }
.stack.ev .sback span { background-image: url(assets/icons/back-event.png); }
.stack.tl .sback span { width: 44px; height: 38px; margin: 4.8px 0; border-radius: 0; background-image: url(assets/icons/back-tile.png); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.stack b { position: absolute; right: -4px; top: 31px; min-width: 17px; height: 17px; padding: 0 3px; box-sizing: border-box; border-radius: 9px; background: #17110c; border: 1px solid #d9a04e; color: #ffe7b0; font-size: 10px; line-height: 15px; text-align: center; }
.stack i { font-size: 7.5px; }
/* the Market: what any Hero gets, then what the card's own Class gets on top */
.mperk { margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: var(--dim); }
.mperk .mcls { color: var(--dim); border-color: rgba(200, 180, 150, .35); white-space: nowrap; }
.mperk.mine { color: var(--ink); }
.mperk.mine .mcls { color: var(--good); border-color: var(--good); }
.pile.deck { background: url(assets/icons/back-action.png) center / cover no-repeat; border: 0; }

/* ---- the three Market decks, beside the rows they are dealt from ---- */
.mhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.mhead h3 { margin-bottom: 4px; }
/* The shop's three decks stand together at its head, the same size and style as the Monster and Event decks. */
.mdecks .stacks { display: flex; gap: 14px; align-items: flex-end; padding: 2px 2px 4px; }
.stack.mk { width: 52px; }
.stack.mk b { right: 3px; }
.stack i { font-style: normal; text-transform: uppercase; letter-spacing: .03em; color: #d8c39a; white-space: nowrap; }
.stack.act .sback span { background-image: url(assets/icons/back-action.png); }
.stack.gear .sback span { background-image: url(assets/icons/back-gear.png); }
.stack.eq .sback span { background-image: url(assets/icons/back-equip.png); }
.cback.gear { background: url(assets/icons/back-gear.png) center / cover no-repeat; border: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.cback.eq { background: url(assets/icons/back-equip.png) center / cover no-repeat; border: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
@keyframes mkdeal { 0%, 82% { opacity: 0; transform: rotateY(-70deg); } 100% { opacity: 1; transform: none; } }
.mcard.fx-mkdeal .thumb, .mcard.fx-mkdeal > div:nth-child(2) { animation: mkdeal both ease-out; animation-duration: inherit; animation-delay: inherit; }
.mcard.fx-mkdeal { animation-name: none; }
.flyc.gearfly .slot { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .mcard.fx-mkdeal .thumb, .mcard.fx-mkdeal > div:nth-child(2) { animation: none; } }

/* ---- the demo's Hero setup: picks kept for the full game ---- */
.pick.locked { position: relative; filter: grayscale(.7) brightness(.8); cursor: not-allowed; }
.pick.locked .lockt { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 2; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding: 2px 6px; border-radius: 4px; background: rgba(18, 12, 8, .9); border: 1px solid var(--trim-hi, #d9a04e); color: #ffe7b0; }

/* ---- nothing on one tile covers anything on another ---- */
.pfoot { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 1px; justify-content: center; z-index: 3; pointer-events: none; }
.pfoot .pst { width: 17px; height: 17px; }
.pfoot .pst b { right: -4px; bottom: -3px; min-width: 11px; font-size: 8.5px; line-height: 11px; }
.psts:empty { display: none; }
.piece.boss .fig { width: 62px; height: 72px; }
.piece.boss .bb { left: -36px; width: 72px; }
.piece.boss .base { left: -26px; top: -16px; width: 52px; height: 32px; }
.piece.seethru .bbi { opacity: .18; }
.piece .bbi { transition: transform .12s ease-out, opacity .12s ease-out; }