:root {
  --bg: #1a120d; --wood: #4a2e1c; --wood2: #6b4429; --felt: #1f4a3a; --felt2: #2a5d49; --panel: #231a2e; --panel2: #2f2540;
  --edge: #f4ecd8; --ink: #f4ecd8; --muted: #c4b8a4; --accent: #e4572e; --gold: #f2c94c; --heart: #ff5a6a; --good: #7fd35a; --bad: #ff6b6b;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 50% 30%, #3a2618, var(--bg) 70%); color: var(--ink); font: 20px/1.15 "VT323", ui-monospace, monospace; }
button, input { font: inherit; color: inherit; }
h1, h2, .primary, .badge, .moment, .logo { font-family: "Press Start 2P", monospace; }
button { background: var(--panel2); border: 3px solid var(--edge); padding: 6px 12px; cursor: pointer; box-shadow: inset -3px -3px 0 #120f1c; border-radius: 0; }
button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); font-size: 11px; padding: 12px 16px; }
input { background: #120f1c; border: 3px solid var(--edge); padding: 6px 8px; border-radius: 0; }
.panel { background: var(--panel); border: 3px solid var(--edge); box-shadow: inset -3px -3px 0 #120f1c, inset 3px 3px 0 var(--panel2), 4px 4px 0 #000a; }
#app { max-width: 980px; margin: 0 auto; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 10px; }

.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.top h1 { font-size: 14px; margin: 0; color: var(--gold); text-shadow: 3px 3px 0 var(--accent); }
.top > span { color: var(--muted); }
.tbtns { margin-left: auto; display: flex; gap: 6px; }
.tbtns button { font-size: 17px; padding: 3px 8px; }
#fast.on { background: var(--good); color: #15121f; }

/* First-person scene: the Keeper across the table */
.scene { position: relative; margin: -12px -12px 10px; border-radius: 24px 24px 0 0; overflow: hidden; border-bottom: 4px solid #2a1a10; height: clamp(170px, 32vh, 300px); background: #2a190f; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; image-rendering: pixelated; image-rendering: crisp-edges; }
.me { position: sticky; bottom: 0; z-index: 5; }
.keeperTag { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); font-family: "Press Start 2P"; font-size: 9px; color: var(--gold); background: #15121fcc; padding: 4px 8px; border: 2px solid #f2c94c88; white-space: nowrap; }
.keeperTag #keeperName { color: inherit; font-family: inherit; font-size: inherit; }
.keeperTag span { color: var(--muted); font-family: "VT323"; font-size: 16px; }
.keeperHand { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; }
.runes.huge { gap: 6px; flex-wrap: nowrap; }
.runes.huge .rune { width: 46px; height: 62px; font-size: 16px; border-width: 3px; box-shadow: inset -3px -3px 0 #0003, 3px 3px 0 #0006; }
.runes.huge .rune.back { font-size: 34px; }
.keeperTotal { font-family: "Press Start 2P"; font-size: 13px; color: var(--gold); background: #15121fcc; padding: 6px 8px; border: 2px solid #f2c94c88; white-space: nowrap; }
.scene.busted .keeperTotal { color: var(--bad); border-color: var(--bad); }
.scene.turn .keeperTag { border-color: var(--gold); animation: pickPulse .6s steps(2) infinite; }
.scene.pick { cursor: crosshair; outline: 3px dashed var(--accent); outline-offset: -6px; }
.resTable tr.keeperRow td { color: var(--gold); border-bottom: 3px solid #f2c94c55; }
.resTable .res { font-size: 16px; white-space: nowrap; }
.resTable .res.win { color: var(--good); } .resTable .res.push { color: #9db7ff; } .resTable .res.lose { color: var(--bad); }

/* Bets, stacks, multiple hands */
.stack { color: var(--gold); font-size: 19px; }
.betchip { margin-left: auto; color: #15121f; background: var(--gold); padding: 0 5px; border: 2px solid #15121f; font-size: 15px; }
.seat .hand { display: inline-flex; gap: 2px; }
.seat .hand.act { outline: 2px solid var(--gold); }
.seat .hand.bust { opacity: .55; }
.seat .sep { color: var(--muted); margin: 0 2px; font-weight: normal; }
.myHands { display: flex; gap: 14px; flex-wrap: wrap; min-height: 54px; }
.myHand { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border: 2px solid transparent; }
.myHand.act { border-color: var(--gold); }
.myHand.bust { opacity: .6; }
.myHand .hbet { color: #ffb38a; font-size: 18px; }
.actions button { min-width: 0; }
#double, #split { font-family: "Press Start 2P"; font-size: 10px; }
.betBox { text-align: center; width: min(420px, 100%); }
.betRow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0; }
.betRow button { font-size: 26px; width: 52px; }
.betAmt { font-family: "Press Start 2P"; font-size: 22px; color: var(--gold); min-width: 120px; }
.betQuick button { font-size: 17px; padding: 6px 4px; }
.betGo { width: 100%; margin-top: 6px; }
.resTable .bet { color: #ffb38a; text-align: right; white-space: nowrap; }
.resTable .net { text-align: right; font-weight: bold; }
.resTable .net.up { color: var(--good); } .resTable .net.down { color: var(--bad); }
.resTable .res.natural { color: var(--gold); }
.resTable .tag { font-style: normal; font-size: 14px; color: var(--muted); border: 1px solid currentColor; padding: 0 3px; }

/* The table */
.table { background: var(--wood); border: 4px solid #2a1a10; box-shadow: inset 0 0 0 4px var(--wood2), 0 6px 0 #000a; padding: 12px; border-radius: 28px; }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.seat { position: relative; background: var(--felt); border: 3px solid #0f2a20; box-shadow: inset 0 0 0 2px var(--felt2); padding: 6px; min-height: 120px; display: flex; flex-direction: column; gap: 3px; transition: transform .15s; }
.seat .face { width: 40px; height: 40px; image-rendering: pixelated; position: absolute; top: 4px; right: 4px; }
.seat .who { display: flex; flex-direction: column; padding-right: 44px; line-height: 1; }
.seat .who b { font-size: 19px; }
.hearts { color: var(--heart); letter-spacing: 1px; }
.seat .meta { display: flex; gap: 6px; align-items: center; font-size: 17px; margin-top: auto; }
.seat .meta .tot { color: var(--gold); }
.seat .meta .sh, .sh { color: #ffb38a; }
.seat .meta .sh { margin-left: auto; }
.seat .charms i { font-style: normal; font-size: 14px; }
.seat.turn { outline: 3px solid var(--gold); outline-offset: 2px; transform: translateY(-3px); }
.seat.stood { filter: saturate(.75); }
.seat.busted { background: #4a1f24; box-shadow: inset 0 0 0 2px #6a2a30; }
.seat.out { opacity: .35; filter: grayscale(1); }
.seat.pick { cursor: crosshair; outline: 3px dashed var(--accent); outline-offset: 2px; animation: pickPulse .6s steps(2) infinite; }
@keyframes pickPulse { 50% { outline-color: var(--gold); } }
.badge { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-8deg); font-size: 9px; padding: 3px 6px; background: #15121f; border: 2px solid var(--edge); pointer-events: none; }
.seat.busted .badge { color: var(--bad); border-color: var(--bad); }
.seat.stood .badge { color: var(--good); }

.runes { display: flex; flex-wrap: wrap; gap: 3px; }
.rune { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 26px; font-size: 18px; color: #15121f; background: #e8dcc0; border: 2px solid #15121f; box-shadow: inset -2px -2px 0 #b9a984; font-family: "Press Start 2P"; font-size: 8px; }
.rune.back { background: #5a3f8a; color: #c9a2ff; box-shadow: inset -2px -2px 0 #3a2860; font-family: "VT323"; font-size: 18px; }
.rune.r1 { background: #ffe08a; box-shadow: inset -2px -2px 0 #c99a2a; }
.rune.r2, .rune.r3, .rune.r4, .rune.r5 { background: #bfe0ff; box-shadow: inset -2px -2px 0 #7fa8d0; }
.rune.r6, .rune.r7, .rune.r8, .rune.r9 { background: #c9f0b0; box-shadow: inset -2px -2px 0 #8fbf72; }
.rune.r10 { background: #e3c9ff; box-shadow: inset -2px -2px 0 #a88ad0; }
.runes.big .rune { width: 38px; height: 50px; font-size: 13px; }

.center { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 10px; margin-top: 10px; }
.bag { padding: 8px 10px; }
.bagTop { display: flex; align-items: center; gap: 8px; }
.bagIcon { font-size: 30px; color: #c9a2ff; }
.bars { display: flex; gap: 3px; height: 48px; align-items: flex-end; margin-top: 4px; }
.bars span { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bars i { width: 100%; background: var(--gold); min-height: 2px; }
.bars b { font-size: 15px; font-weight: normal; color: var(--muted); }
.peek { margin-top: 6px; color: var(--gold); display: flex; gap: 6px; align-items: center; }
.feed { list-style: none; margin: 0; padding: 8px 10px; font-size: 18px; min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; }
.feed li { color: var(--muted); }
.feed li:last-child { color: var(--ink); }

/* You */
.me { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.me.turn { outline: 3px solid var(--gold); outline-offset: 2px; }
.me.busted { background: #3a1a22; }
.meTop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.me .face { width: 36px; height: 36px; image-rendering: pixelated; background: var(--felt); border: 2px solid var(--edge); }
.status { margin-left: auto; color: var(--gold); }
.meHand { display: flex; align-items: center; gap: 14px; min-height: 54px; }
.total { font-family: "Press Start 2P"; font-size: 14px; color: var(--gold); }
.charmBar { display: flex; flex-direction: column; gap: 6px; }
.charmRow { display: flex; gap: 6px; flex-wrap: wrap; }
.charmRow:empty { display: none; }
.charmBar .none { color: var(--muted); }
.targetBar { color: var(--accent); display: flex; gap: 8px; align-items: center; }
.actions { display: flex; gap: 8px; }
.actions button { flex: 1; font-size: 14px; padding: 14px; }
#stand { font-family: "Press Start 2P"; font-size: 12px; }

/* Moments + effects */
.moment { position: fixed; left: 50%; top: 38%; transform: translate(-50%, 0) scale(.6); transform-origin: 50% 0; opacity: 0; pointer-events: none; z-index: 20; padding: 14px 18px; font-size: 13px; line-height: 1.5; text-align: center; background: #15121f; border: 4px solid var(--gold); color: var(--gold); box-shadow: 6px 6px 0 #000c; max-width: 90vw; transition: transform .2s steps(4), opacity .2s steps(4); }
.moment.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.moment.red { border-color: var(--bad); color: #ffd0d0; background: #3a0f16; }
.fx-drew { animation: drew .35s steps(3); }
@keyframes drew { 40% { transform: translateY(-6px); } }
.fx-busted { animation: busted .45s steps(6); }
@keyframes busted { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
body.shake #app { animation: busted .4s steps(6); }

/* Overlays */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; background: #0c0810cc; z-index: 10; }
.overlay[hidden] { display: none; }
.box { width: min(560px, 100%); max-height: calc(100vh - 28px); overflow: auto; padding: 14px 16px; }
.box.wide { width: min(760px, 100%); }
.box h2 { font-size: 12px; line-height: 1.5; margin: 0 0 8px; color: var(--gold); }
.logo { font-size: 30px; line-height: 1.3; color: var(--gold); text-shadow: 4px 4px 0 var(--accent); margin: 6px 0 10px; }
.nameRow { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.nameRow input { flex: 1; }
#start { width: 100%; }
.fine, .hint { color: var(--muted); font-size: 17px; }
.row { display: flex; gap: 8px; } .row > * { flex: 1; }
.resTable { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 19px; }
.resTable td { padding: 4px 6px; border-bottom: 2px dashed #f4ecd822; vertical-align: middle; }
.resTable img { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: middle; }
.resTable .hand { white-space: nowrap; }
.resTable .hand .rune { width: 16px; height: 20px; font-size: 7px; }
.resTable .score { color: var(--gold); text-align: right; }
.resTable .sh { color: #ffb38a; text-align: right; }
.resTable tr.youRow td:first-child { color: var(--gold); }
.resTable tr.lost { background: #3a141a; }
#resultsNext { width: 100%; }
.order { display: flex; gap: 6px; flex-wrap: wrap; font-size: 17px; }
.order span { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border: 2px solid #f4ecd833; }
.order span.now { border-color: var(--gold); color: var(--gold); }
.order img { width: 18px; height: 18px; image-rendering: pixelated; }
.shopStatus { color: var(--gold); }
.mine { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.mine > span { flex: 1 1 100%; }
.mine button { font-size: 17px; padding: 3px 8px; }
#shopPass { width: 100%; margin-top: 8px; }
.rulesList { padding-left: 18px; margin: 4px 0 12px; }
.rulesList li { margin: 6px 0; }
.board { padding-left: 0; list-style: none; }
.board li { display: flex; gap: 8px; align-items: center; margin: 3px 0; }
.board li.youRow { color: var(--gold); }
.board img { width: 22px; height: 22px; image-rendering: pixelated; }

@media (max-width: 640px) {
  #app { padding: 6px; gap: 6px; }
  .top h1 { font-size: 11px; }
  .tbtns button { font-size: 15px; padding: 2px 6px; }
  .table { padding: 6px; border-radius: 16px; }
  .scene { margin: -6px -6px 6px; border-radius: 14px 14px 0 0; }
  .keeperTag { font-size: 7px; padding: 2px 5px; }
  .keeperTag span { font-size: 13px; }
  .runes.huge .rune { width: 30px; height: 40px; font-size: 11px; border-width: 2px; }
  .runes.huge .rune.back { font-size: 22px; }
  .keeperTotal { font-size: 9px; padding: 4px 6px; }
  .keeperHand { gap: 8px; bottom: 8%; }
  /* compact seats: four across */
  .seats { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .seat { min-height: 0; padding: 3px; gap: 1px; }
  .seat .face { width: 22px; height: 22px; top: 2px; right: 2px; }
  .seat .who { padding-right: 22px; }
  .seat .who b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seat .hearts { font-size: 14px; }
  .seat .rune { width: 13px; height: 17px; font-size: 6px; border-width: 1px; }
  .seat .rune.back { font-size: 13px; }
  .seat .meta { font-size: 14px; gap: 3px; flex-wrap: wrap; }
  .seat .charms i { font-size: 11px; }
  .badge { font-size: 7px; padding: 2px 4px; }
  .center { grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
  .bag { padding: 4px 8px; }
  .bars { height: 26px; }
  .bars b { font-size: 13px; }
  .feed { min-height: 0; max-height: 64px; overflow: hidden; font-size: 16px; padding: 4px 8px; }
  /* your hand + buttons stay on screen */
  .me { position: sticky; bottom: 0; z-index: 5; padding: 8px; gap: 6px; }
  .status { margin-left: 0; flex: 1 1 100%; font-size: 17px; }
  .runes.big .rune { width: 30px; height: 40px; font-size: 11px; }
  .meHand { min-height: 42px; }
  .actions button { padding: 12px; }
}

/* your own seat, in the row with everyone else */
.seat.mine { border-color: var(--gold); box-shadow: inset 0 0 0 2px #f2c94c55; }
.seat.mine .who b { color: var(--gold); }

/* ---------- pixel symbols ---------- */
.px { image-rendering: pixelated; width: 24px; height: 24px; vertical-align: middle; }
.px.sm { width: 16px; height: 16px; }
.px.mi { width: 18px; height: 18px; }
.shd { display: inline-block; width: .85em; height: .85em; background: var(--shd) center / contain no-repeat; image-rendering: pixelated; vertical-align: -0.08em; margin-left: 1px; }
.seat .charms { display: flex; gap: 1px; flex-wrap: wrap; min-height: 14px; }
.seat .charms:empty { min-height: 0; }
.seat .charms i { line-height: 0; }
.seat .charms .px.mi { width: 14px; height: 14px; }

/* ---------- charm and tonic cards ---------- */
.k-active { --kc: #5aa9ff; --kd: #2e5fa8; }
.k-target { --kc: #e4572e; --kd: #8a2a18; }
.k-passive { --kc: #7fd35a; --kd: #3f7f2a; }
.k-tonic { --kc: #c58cff; --kd: #6a3fa0; }
#shopOffers h3 { font-family: "Press Start 2P"; font-size: 10px; color: var(--gold); margin: 10px 0 6px; }
#shopOffers h3 small { font-family: "VT323"; font-size: 16px; color: var(--muted); margin-left: 6px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; text-align: center; color: #15121f;
  background: #f4ecd8; border: 4px solid var(--kd); box-shadow: inset 0 0 0 3px var(--kc), 4px 4px 0 #000a; min-height: 220px; transition: transform .1s; }
.card:not(:disabled):hover { transform: translateY(-4px); }
.card .cardName { background: var(--kd); color: #f4ecd8; font-family: "Press Start 2P"; font-size: 8px; line-height: 1.5; padding: 6px 4px 5px; margin: 3px 3px 0; }
.card .cardArt { margin: 6px 10px 4px; height: 76px; display: grid; place-items: center; border: 3px solid #15121f;
  background: radial-gradient(circle at 50% 45%, var(--kc) 0 22%, transparent 60%), repeating-linear-gradient(45deg, #2a2238 0 4px, #231a2e 4px 8px); box-shadow: inset 0 0 0 2px var(--kd); }
.card .cardArt .px { width: 60px; height: 60px; filter: drop-shadow(3px 3px 0 #000a); }
.card .cardText { font-size: 17px; line-height: 1; padding: 2px 8px; flex: 1; }
.card .cardFoot { display: flex; justify-content: space-between; align-items: center; gap: 4px; border-top: 3px dashed var(--kd); margin: 0 3px 3px; padding: 4px 5px; font-size: 15px; }
.card .cardFoot i { font-style: normal; color: var(--kd); white-space: nowrap; }
.card .stamp { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-12deg); background: #15121f; color: var(--accent); border: 3px solid var(--accent); font-family: "Press Start 2P"; font-size: 8px; line-height: 1.5; padding: 6px 8px; white-space: nowrap; box-shadow: 3px 3px 0 #000a; }
.card .cardFoot b { font-family: "Press Start 2P"; font-size: 9px; color: #9a4a10; white-space: nowrap; }
.card.sold { opacity: 1; }
.card.sold > :not(.stamp) { opacity: .4; filter: grayscale(.8); }
.card:disabled { cursor: default; }
.cards.tonics .card { min-height: 200px; }
.mine .held { font-size: 17px; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }

/* mini cards in your panel */
button.mini { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; padding: 3px 8px 3px 4px; background: var(--panel2); border-color: var(--kc); box-shadow: inset 4px 0 0 var(--kd), inset -3px -3px 0 #120f1c; }
button.mini .px { background: #15121f; border: 2px solid var(--kd); padding: 1px; width: 22px; height: 22px; }
button.mini.on { background: var(--accent); }
button.mini:disabled { opacity: .55; }

/* ---------- omens ---------- */
.omenCard { display: flex; align-items: center; gap: 8px; background: #15121fe6; border: 3px solid var(--gold); box-shadow: 3px 3px 0 #000a; padding: 4px 8px 4px 4px; color: var(--edge); font-size: 16px; line-height: 1; max-width: 260px; }
.omenCard .px { width: 32px; height: 32px; background: #2a2238; border: 2px solid var(--gold); padding: 2px; flex: none; }
.omenCard b { display: block; font-family: "Press Start 2P"; font-size: 8px; color: var(--gold); margin-bottom: 3px; line-height: 1.4; }
.omenCard.boss { border-color: var(--accent); animation: bossPulse 1.2s steps(2) infinite; }
.omenCard.boss b { color: var(--accent); }
.omenCard.boss .px { border-color: var(--accent); }
@keyframes bossPulse { 50% { box-shadow: 0 0 0 3px #e4572e66, 3px 3px 0 #000a; } }
.scene .omenCard { position: absolute; left: 6px; top: 34px; z-index: 2; }
#betOmen { margin: 0 auto 8px; text-align: left; }
@media (max-width: 640px) {
  .scene .omenCard { max-width: 150px; font-size: 13px; padding: 2px 4px 2px 2px; gap: 4px; }
  .scene .omenCard .px { width: 22px; height: 22px; }
  .scene .omenCard b { font-size: 6px; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .card { min-height: 190px; }
  .card .cardArt { height: 58px; }
  .card .cardArt .px { width: 44px; height: 44px; }
  .card .cardText { font-size: 15px; }
}

/* ================= Fit everything on one screen (no page scroll) ================= */
html, body { height: 100%; overflow: hidden; }
#app { height: 100vh; height: 100dvh; max-width: 1180px; padding: 8px 12px; gap: 8px; }
.top { flex: none; }
.table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.scene { flex: 1 1 auto; height: auto; min-height: 110px; }
.me { position: static; flex: none; padding: 8px 10px; gap: 6px; }

/* all eight patrons in one row */
.seats { flex: none; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.seat { min-height: 0; padding: 4px 5px; gap: 2px; }
.seat .face { width: 28px; height: 28px; top: 3px; right: 3px; }
.seat .who { padding-right: 30px; }
.seat .who b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .stack { font-size: 16px; }
.seat .runes { flex-wrap: nowrap; overflow: hidden; min-height: 26px; }
.seat .hand .rune + .rune { margin-left: -3px; }
.seat .meta { font-size: 15px; gap: 3px; flex-wrap: wrap; }
.seat .betchip { font-size: 13px; padding: 0 3px; }

/* bag + feed: one short strip */
.center { flex: none; grid-template-columns: 240px 1fr; gap: 8px; margin-top: 8px; }
.bag { padding: 4px 8px; }
.bagIcon { font-size: 22px; }
.bars { height: 30px; }
.feed { min-height: 0; height: 64px; overflow: hidden; font-size: 16px; padding: 4px 8px; }
.myHands { min-height: 0; }

/* short desktop windows: shrink the scene first, then the feed */
@media (max-height: 760px) {
  .feed { height: 48px; }
  .bars { height: 22px; }
  .runes.big .rune { width: 32px; height: 42px; }
  .actions button { padding: 10px; }
}

/* phones: same layout, smaller pieces */
@media (max-width: 640px) {
  #app { padding: 4px; gap: 4px; }
  .table { padding: 4px; border-radius: 12px; }
  .scene { margin: -4px -4px 4px; min-height: 96px; }
  .seats { gap: 2px; }
  .seat { padding: 2px; border-width: 2px; box-shadow: none; }
  .seat .face { width: 14px; height: 14px; top: 2px; right: 2px; }
  .seat .who { padding-right: 14px; }
  .seat .who b { font-size: 11px; }
  .seat .stack { font-size: 11px; }
  .seat .runes { min-height: 15px; }
  .seat .rune { width: 10px; height: 14px; font-size: 5px; border-width: 1px; box-shadow: none; }
  .seat .rune.back { font-size: 10px; }
  .seat .hand .rune + .rune { margin-left: -3px; }
  .seat .sep { margin: 0; }
  .seat .meta { font-size: 11px; gap: 1px; }
  .seat .betchip { font-size: 10px; padding: 0 2px; border-width: 1px; margin-left: 0; }
  .seat .charms .px.mi { width: 9px; height: 9px; }
  .seat.turn { outline-width: 2px; outline-offset: 1px; }
  .badge { font-size: 5px; padding: 1px 2px; border-width: 1px; }
  .center { grid-template-columns: 96px 1fr; gap: 4px; margin-top: 4px; }
  .bag { padding: 2px 4px; }
  .bagTop { font-size: 13px; gap: 3px; }
  .bagIcon { font-size: 14px; }
  .bars { height: 18px; gap: 1px; }
  .bars b { font-size: 9px; }
  .peek { font-size: 13px; margin-top: 2px; }
  .feed { height: 44px; font-size: 13px; padding: 2px 6px; }
  .me { padding: 6px; gap: 4px; }
  .meTop { gap: 6px; }
  .me .face { width: 24px; height: 24px; }
  .status { font-size: 14px; }
  .myHands { gap: 8px; }
  .runes.big .rune { width: 26px; height: 34px; font-size: 9px; }
  .total { font-size: 11px; }
  .charmBar { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .charmBar .none { font-size: 13px; }
  button.mini { padding: 2px; gap: 0; }
  button.mini span { display: none; }
  button.mini .px { width: 20px; height: 20px; }
  .actions { gap: 4px; }
  .actions button { padding: 10px 2px; font-size: 11px; }
  #stand { font-size: 10px; }
  #double, #split { font-size: 8px; }
}
.charmBar { flex-direction: row; flex-wrap: wrap; }
.scene canvas { object-position: 50% 45%; }

/* ---------- special runes ---------- */
.rune.t1 { background: linear-gradient(135deg, #fff3b0, #f2c94c 60%, #c99a2a); border-color: #7a5410; box-shadow: inset -2px -2px 0 #a8781a, 0 0 0 1px #f2c94c, 0 0 6px #f2c94caa; }
.rune.t2 { background: #6a2a48; color: #ffb0d0; border-color: #2a0f1c; box-shadow: inset -2px -2px 0 #3a1428, 0 0 0 1px #b04a7a; }
.rune.t3 { background: linear-gradient(135deg, #ff7ab0, #f2c94c 35%, #7fd35a 55%, #5aa9ff 75%, #c58cff); color: #15121f; }
.rune.t4 { background: #2aa0b8; color: #e8fbff; border-color: #0f3a44; box-shadow: inset -2px -2px 0 #1a6a7a, 0 0 0 1px #7ff0ff; }
.rune.t1::after, .rune.t2::after { content: ''; position: absolute; top: 1px; right: 1px; width: 3px; height: 3px; background: #fff; }
.rune.t2::after { background: #ff5a8a; }
.rune { position: relative; }
.bagSpecial { display: flex; gap: 8px; margin-top: 3px; font-size: 15px; color: var(--muted); }
.bagSpecial .sp { display: inline-flex; align-items: center; gap: 3px; }
.bagSpecial .rune { width: 12px; height: 15px; font-size: 6px; border-width: 1px; }
.bagSpecial .rune::after { display: none; }
@media (max-width: 640px) { .bagSpecial { gap: 3px; font-size: 11px; margin-top: 1px; } .bagSpecial .rune { width: 8px; height: 10px; font-size: 4px; } }

/* ---------- relics and bosses ---------- */
.k-relic { --kc: #f2c94c; --kd: #a8781a; }
button.mini.k-relic:disabled { opacity: 1; cursor: default; }
.seat .charms i.relic .px { outline: 1px solid var(--gold); background: #15121f; }
.relicNote { color: var(--gold); font-weight: normal; }
.omenCard.boss .px { image-rendering: pixelated; }

/* ================= Rarity, shop without scrolling, collection, hover tags ================= */
/* rarity: a gem on the name banner and a glow for the rare ones */
.card .cardName { position: relative; }
.card.r-uncommon .cardName::after, .card.r-rare .cardName::after, .card.r-legendary .cardName::after {
  content: ''; position: absolute; right: 3px; top: 50%; width: 6px; height: 6px; transform: translateY(-50%) rotate(45deg); border: 1px solid #15121f; }
.card.r-uncommon .cardName::after { background: #7fd35a; }
.card.r-rare .cardName::after { background: #5aa9ff; }
.card.r-legendary .cardName::after { background: #ffb347; }
.card.r-rare { box-shadow: inset 0 0 0 3px var(--kc), 0 0 0 2px #5aa9ff, 4px 4px 0 #000a; }
.card.r-legendary { box-shadow: inset 0 0 0 3px var(--kc), 0 0 0 2px #ffb347, 0 0 10px #ffb34799, 4px 4px 0 #000a; animation: legend 1.6s steps(2) infinite; }
@keyframes legend { 50% { box-shadow: inset 0 0 0 3px var(--kc), 0 0 0 2px #ffe08a, 0 0 14px #ffb347cc, 4px 4px 0 #000a; } }
.card .cardFoot .rar { font-size: 12px; text-transform: uppercase; color: #6a5a8a; }
.card.r-rare .rar { color: #2e5fa8; } .card.r-legendary .rar { color: #c0641a; } .card.r-uncommon .rar { color: #3f7f2a; }
.card.locked { background: #3a3448; color: var(--muted); }
.card.locked .cardArt .px { filter: brightness(0) opacity(.55) !important; }
.card.locked .cardName { background: #4a4258; }
.card .lockText { font-size: 13px; line-height: 1; padding: 2px 6px; flex: 1; color: #d8cce8; }

/* the shop: one screen, no scrolling */
.shopBox { display: flex; flex-direction: column; gap: 6px; max-height: calc(100dvh - 28px); overflow: hidden; width: min(1100px, 100%); }
.shopHead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.shopHead h2 { margin: 0; }
.shopHead .hint { font-size: 15px; }
#shop .order { gap: 4px; font-size: 15px; }
#shop .order span { padding: 1px 4px; }
#shop .shopStatus { margin: 0; font-size: 17px; }
.shopCards { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 8px; min-height: 0; }
.shopCards .card { min-height: 0; }
.shopCards .card .cardArt { height: clamp(40px, 9vh, 70px); }
.shopCards .card .cardArt .px { width: clamp(32px, 7vh, 56px); height: clamp(32px, 7vh, 56px); }
.shopCards .card .cardText { font-size: 15px; }
.shopFoot { display: flex; gap: 8px; align-items: center; }
.shopFoot .mine { flex: 1; margin: 0; font-size: 15px; gap: 4px; }
.shopFoot .mine > span { flex: 1 1 100%; }
.shopFoot .mine button { font-size: 14px; padding: 1px 5px; display: inline-flex; align-items: center; gap: 3px; }
#shopPass { width: auto; margin: 0; flex: none; }
.shopLog { margin: 0; font-size: 14px; min-height: 1em; }
@media (max-width: 760px) {
  .shopCards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .shopCards .card .cardName { font-size: 6px; padding: 4px 2px; }
  .shopCards .card .cardArt { margin: 3px 4px; height: 34px; border-width: 2px; }
  .shopCards .card .cardArt .px { width: 26px; height: 26px; }
  .shopCards .card .cardText { font-size: 12px; padding: 1px 3px; }
  .shopCards .card .cardFoot { padding: 2px 3px; font-size: 11px; border-top-width: 2px; }
  .shopCards .card .cardFoot .rar { display: none; }
  .shopCards .card .cardFoot b { font-size: 7px; }
  .shopCards .card .stamp { font-size: 6px; padding: 3px 4px; }
  .shopHead .hint { display: none; }
  #shop .order { font-size: 12px; }
  #shop .order img { width: 12px; height: 12px; }
  .shopBox { padding: 8px; }
}

/* collection */
.colBox { display: flex; flex-direction: column; gap: 8px; height: calc(100dvh - 28px); max-height: none; overflow: hidden; width: min(1100px, 100%); }
.colTabs { display: flex; gap: 6px; }
.colTabs button { font-size: 16px; padding: 3px 10px; }
.colTabs button.on { background: var(--gold); color: #15121f; }
#colGrid { flex: 1; min-height: 0; overflow: auto; align-content: start; }
.cards.mini { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.cards.mini .card { min-height: 0; }
.cards.mini .card .cardName { font-size: 7px; padding: 4px 2px; }
.cards.mini .card .cardArt { height: 46px; margin: 4px 6px; }
.cards.mini .card .cardArt .px { width: 36px; height: 36px; }
.cards.mini .card .cardText { font-size: 13px; }
.cards.mini .card .cardFoot { font-size: 12px; padding: 2px 4px; }
.cards.mini .card:hover { transform: none; }
.featList { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.feat { border: 2px solid #f4ecd833; padding: 5px 8px; display: flex; flex-direction: column; font-size: 16px; line-height: 1.05; }
.feat b { font-family: "Press Start 2P"; font-size: 8px; color: var(--muted); margin-bottom: 4px; }
.feat i { font-style: normal; color: var(--muted); font-size: 13px; margin-top: 3px; }
.feat.done { border-color: var(--gold); }
.feat.done b { color: var(--gold); }
#colClose { flex: none; }
.introCards { width: 100%; margin-top: 8px; }
.endUnlocks h3 { font-family: "Press Start 2P"; font-size: 10px; color: var(--gold); margin: 10px 0 4px; }
.endUnlocks .cards.mini { max-height: 40vh; overflow: auto; }

/* hover tags: instant pixel popups */
.tip { position: fixed; z-index: 50; pointer-events: none; display: flex; gap: 8px; align-items: flex-start; max-width: 260px; padding: 6px 8px 6px 6px;
  background: #15121f; color: var(--edge); border: 3px solid var(--kc, var(--gold)); box-shadow: inset 0 0 0 2px var(--kd, #a8781a), 4px 4px 0 #000c; font-size: 16px; line-height: 1.05; }
.tip[hidden] { display: none !important; }
.tip .tipArt { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: #2a2238; border: 2px solid var(--kd, #a8781a); }
.tip .tipArt .px { width: 28px; height: 28px; }
.tip .tipArt .rune { width: 18px; height: 24px; font-size: 8px; }
.tip b { display: block; font-family: "Press Start 2P"; font-size: 8px; line-height: 1.4; color: var(--kc, var(--gold)); margin-bottom: 2px; }
.tip i { display: block; font-style: normal; color: var(--muted); font-size: 13px; margin-top: 3px; text-transform: capitalize; }
.k-rune { --kc: #f2c94c; --kd: #a8781a; }
.k-rune.t2 { --kc: #b04a7a; --kd: #6a2a48; }
.k-rune.t3 { --kc: #ff7ab0; --kd: #8a3a6a; }
.k-rune.t4 { --kc: #7ff0ff; --kd: #2aa0b8; }
[data-tip] { cursor: help; }
button[data-tip] { cursor: pointer; }
.seat .charms i.lockedTag .px { outline: 1px solid var(--accent); }
button.mini.passive:disabled { opacity: .9; }
.shopCards .card .cardFoot .rar { display: none; }
.shopCards .card .cardFoot i { overflow: hidden; text-overflow: ellipsis; }
button.mini[aria-disabled="true"] { opacity: .55; cursor: help; }
button.mini.passive[aria-disabled="true"], button.mini.k-relic[aria-disabled="true"] { opacity: .9; }
button.mini[aria-disabled="true"]:active { transform: none; box-shadow: inset 4px 0 0 var(--kd), inset -3px -3px 0 #120f1c; }
/* targeting prompt floats over your panel so the table doesn't jump */
.me { position: relative; }
.targetBar { position: absolute; right: 10px; top: 8px; z-index: 3; background: var(--panel); padding: 0 0 0 8px; font-size: 17px; }
.targetBar button { font-size: 15px; padding: 1px 8px; }
@media (max-width: 640px) { .targetBar { top: 4px; right: 6px; font-size: 13px; } }
#collection { z-index: 12; }
.cards.mini { grid-auto-rows: max-content; }
.cards.mini .card { min-height: 160px; }
.cards.mini .card:disabled { opacity: 1; }
.cards.mini .card .cardName { flex: none; }
.card.locked .cardArt { background: repeating-linear-gradient(45deg, #2a2238 0 4px, #231a2e 4px 8px); }
.card.locked .cardArt .px { filter: brightness(0) opacity(.8) drop-shadow(1px 1px 0 #6a5a8a) !important; }
.card.locked { --kc: #6a6080; --kd: #4a4258; box-shadow: inset 0 0 0 3px #5a5070, 4px 4px 0 #000a; animation: none; }
.card.locked .cardName::after { display: none; }
.actions button small { display: block; font-family: "VT323"; font-size: 14px; margin-top: 2px; }

/* ================= Runs: Bags, Candles, Marks, sets, upgrades, quests, Tavern ================= */
.seat { background: var(--felt); border-color: var(--feltEdge, #0f2a20); box-shadow: inset 0 0 0 2px var(--felt2); }
.shortWarn { color: var(--bad); font-weight: normal; }
.px.mk { width: 15px; height: 15px; vertical-align: -2px; }
/* setup: pick a bag */
.setupBox { display: flex; flex-direction: column; gap: 8px; width: min(1100px, 100%); max-height: calc(100dvh - 28px); }
.bagGrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; min-height: 0; overflow: auto; }
.bagCard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; text-align: center; background: #15121f; border-color: var(--bc); box-shadow: inset 0 0 0 2px #2a2238; font-size: 14px; line-height: 1; }
.bagCard.on { background: #2f2540; box-shadow: inset 0 0 0 3px var(--bc), 0 0 0 3px var(--gold); }
.bagCard b { font-family: "Press Start 2P"; font-size: 7px; line-height: 1.4; color: var(--bc); }
.bagCard .bagArt .px { width: 36px; height: 36px; }
.bagCard .good { color: var(--good); } .bagCard .bad { color: #ff9a9a; }
.bagCard .stickers { color: var(--muted); font-size: 12px; margin-top: auto; }
.bagCard.locked { border-color: #4a4258; } .bagCard.locked b { color: var(--muted); } .bagCard .lockText { color: #d8cce8; font-size: 12px; }
.bagCard:disabled { opacity: .6; }
.candleBar { display: flex; align-items: center; gap: 10px; }
.candleBar b { font-family: "Press Start 2P"; font-size: 9px; color: var(--gold); }
.candleRow { display: flex; gap: 4px; flex-wrap: wrap; }
.candleRow button { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; font-size: 16px; }
.candleRow button.on { background: var(--gold); color: #15121f; }
.candleText { margin: 0; min-height: 2.1em; }
.candleText b { color: var(--gold); font-weight: normal; }
@media (max-width: 760px) { .bagGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bagCard { font-size: 12px; } .bagCard .bagArt .px { width: 24px; height: 24px; } }
/* intro */
.introMarks { margin: 4px 0; color: var(--gold); }
.introBtns { margin-top: 8px; }
.introQuests h3, .tavern h3, .endMarks h3 { font-family: "Press Start 2P"; font-size: 9px; color: var(--gold); margin: 10px 0 4px; }
.quest, .fbar { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; align-items: center; font-size: 16px; margin: 3px 0; }
.quest i, .fbar i { grid-column: 1 / -1; order: 3; height: 6px; background: linear-gradient(90deg, var(--gold) var(--p), #2a2238 var(--p)); border: 1px solid #15121f; }
.quest em, .fbar em { font-style: normal; color: var(--muted); font-size: 14px; white-space: nowrap; }
.quest.done span { color: var(--good); text-decoration: line-through; }
.fbar span b { font-family: "Press Start 2P"; font-size: 7px; color: var(--gold); margin-right: 4px; font-weight: normal; }
.fbar.mini { display: grid; margin: 3px 0 0; }
.questList { display: flex; flex-direction: column; gap: 4px; }
/* end screen */
.endCols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.endMarks h3 small { font-family: "VT323"; font-size: 15px; color: var(--muted); margin-left: 6px; }
.markLines { list-style: none; padding: 0; margin: 0; font-size: 16px; }
.markLines li { display: flex; justify-content: space-between; border-bottom: 1px dashed #f4ecd822; }
.markLines b { color: var(--gold); font-weight: normal; }
.markLines li.q span { color: var(--good); }
.newCandle { color: var(--gold); margin: 6px 0 0; font-size: 16px; }
@media (max-width: 640px) { .endCols { grid-template-columns: 1fr; } }
/* shop extras */
.shopBtns { display: flex; gap: 6px; flex: none; }
#shopReroll { font-size: 15px; padding: 4px 8px; }
#shopCash { background: var(--good); color: #15121f; font-size: 15px; padding: 4px 8px; }
.ownCharm { display: inline-flex; align-items: center; gap: 2px; border: 2px solid #f4ecd833; padding: 1px 3px; }
.ownCharm button { font-size: 13px !important; padding: 0 4px !important; }
.upBtn { background: #2e5fa8; }
.lvl { font-style: normal; font-family: "Press Start 2P"; font-size: 7px; color: var(--gold); margin-left: 3px; }
/* charm sets */
.setChip { display: inline-block; font-size: 13px; padding: 0 5px; border: 2px solid var(--c); color: var(--c); opacity: .65; margin-left: 4px; white-space: nowrap; }
.setChip.on { opacity: 1; background: #15121f; box-shadow: 0 0 6px var(--c); }
.charmRow .setChip { align-self: center; }
.card .cardArt { position: relative; }
.setTag { position: absolute; left: 2px; bottom: 2px; font-size: 11px; line-height: 1; padding: 1px 3px; background: #15121f; color: var(--c); border: 1px solid var(--c); white-space: nowrap; }
.card.setHit .setTag { background: var(--c); color: #15121f; }
.tip .setDot { display: block; width: 20px; height: 20px; border: 2px solid #15121f; }
.k-set { --kc: #c9a2ff; --kd: #6a3fa0; } .k-candle { --kc: #f2c94c; --kd: #a8781a; }
.tip i { text-transform: none; }
/* vault */
.colTabs { flex-wrap: wrap; }
.badgeN { font-style: normal; background: var(--accent); color: #fff; padding: 0 4px; font-size: 13px; }
.marksNow { color: var(--gold); }
.card .buyMk { color: #9a4a10; display: inline-flex; align-items: center; gap: 2px; }
.card.v-sale:not(:disabled) { cursor: pointer; }
.card.v-sale:not(:disabled):hover { transform: translateY(-3px); }
.card.v-sale:disabled .buyMk { color: #888; }
.card.v-own .cardFoot i { color: #3f7f2a; }
/* tavern */
.tavern { overflow: auto; }
.cosRow { display: flex; gap: 6px; flex-wrap: wrap; }
.cos { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 112px; padding: 6px 4px; font-size: 15px; }
.cos b { font-family: "Press Start 2P"; font-size: 7px; line-height: 1.4; font-weight: normal; }
.cos em { font-style: normal; color: var(--gold); display: inline-flex; align-items: center; gap: 2px; }
.cos.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.cos .sw { display: flex; gap: 3px; align-items: center; justify-content: center; width: 64px; height: 40px; border: 2px solid #15121f; background: #2a2238; }
.cos img.sw { image-rendering: pixelated; object-fit: contain; padding: 2px; }
/* rune styles (plain runes only; special runes keep their colours) */
.rs-bone .rune.t0, .sw.rs-bone .rune { background: #efe6d2; color: #3a2a1a; box-shadow: inset -2px -2px 0 #c8b894; }
.rs-jade .rune.t0, .sw.rs-jade .rune { background: #6fc29a; color: #0f2a20; box-shadow: inset -2px -2px 0 #3f8f6a; }
.rs-obsidian .rune.t0, .sw.rs-obsidian .rune { background: #2a2238; color: #e8dcc0; border-color: #8a7aa8; box-shadow: inset -2px -2px 0 #15121f; }
.rs-gilt .rune.t0, .sw.rs-gilt .rune { background: linear-gradient(135deg, #fff3b0, #e8c060 55%, #b8862a); color: #3a2406; box-shadow: inset -2px -2px 0 #9a6a14; }
.sw .rune { width: 18px; height: 24px; font-size: 8px; }
.shopFoot .mine > span.ownCharm { flex: none; }

/* ================= Main menu ================= */
.menuScreen { background: radial-gradient(circle at 50% 35%, #2a1a10cc, #0c0810f2 75%); }
.menuWrap { display: grid; grid-template-columns: minmax(280px, 380px) minmax(260px, 340px); gap: 14px; align-items: stretch; max-height: calc(100dvh - 28px); }
.menuWrap .box { width: auto; max-height: none; overflow: auto; }
.menuMain { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.menuMain .logo { font-size: 34px; margin: 4px 0 0; }
.tagline { margin: 0; color: var(--muted); font-size: 17px; }
.menuPlayer { display: flex; justify-content: center; gap: 14px; color: var(--gold); font-size: 17px; }
.menuMain .nameRow { margin: 0; }
.menuBtns { display: flex; flex-direction: column; gap: 6px; }
.menuBtns button { font-family: "Press Start 2P"; font-size: 10px; padding: 11px 10px; text-align: center; }
.menuBtns button:not(.primary):hover { background: #3a2f52; border-color: var(--gold); }
.menuBtns #start { font-size: 13px; padding: 14px; }
.menuMain .fine { margin: 0; font-size: 14px; }
.menuSide h3 { font-family: "Press Start 2P"; font-size: 9px; color: var(--gold); margin: 4px 0 6px; }
.menuStats ul { list-style: none; padding: 0; margin: 0; font-size: 17px; }
.menuStats li { display: flex; justify-content: space-between; border-bottom: 1px dashed #f4ecd822; padding: 2px 0; }
.menuStats b { color: var(--gold); font-weight: normal; }
#leave { z-index: 14; }
#intro { z-index: 11; }
@media (max-width: 700px) {
  .menuWrap { grid-template-columns: 1fr; overflow: auto; }
  .menuSide { display: none; }
  .menuMain .logo { font-size: 26px; }
}
#rules { z-index: 13; }

/* ================= Accounts ================= */
.menuAccount { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; text-align: left; border: 2px dashed #f4ecd833; padding: 4px 6px; }
.menuAccount b { color: var(--gold); font-weight: normal; }
.menuAccount button { font-size: 14px; padding: 2px 8px; flex: none; }
.sync { font-style: normal; color: var(--muted); font-size: 13px; display: block; }
.sync.s-saved { color: var(--good); } .sync.s-offline, .sync.s-expired { color: var(--bad); }
#login { z-index: 15; }
.loginBox { width: min(380px, 100%); display: flex; flex-direction: column; gap: 8px; }
.loginBox label { display: flex; flex-direction: column; gap: 2px; font-size: 17px; }
.loginTabs button { flex: 1; }
.loginErr { color: var(--bad); margin: 0; min-height: 1em; }
.menuStats .px.mk { margin-right: 2px; }
.menuStats li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= Pause menu + audio ================= */
#pause { z-index: 16; }
#rules, #collection { z-index: 17; }
#login { z-index: 18; }
.pauseBox { width: min(360px, 100%); text-align: center; display: flex; flex-direction: column; gap: 10px; }
.pauseBox h2 { font-size: 16px; margin: 4px 0; }
.audioSet { display: flex; flex-direction: column; gap: 4px; font-size: 16px; text-align: left; }
.audioSet label { display: flex; align-items: center; gap: 8px; }
.audioSet input[type=range] { flex: 1; accent-color: var(--gold); }
.audioSet .chk input { accent-color: var(--gold); width: 18px; height: 18px; }
.nowPlaying { margin: 0; font-size: 13px; }

/* Mobile: no double-tap zoom, no grey tap flash, no long-press text selection on game controls */
html, body, button, input, .seat, .scene, .card { touch-action: manipulation; }
* { -webkit-tap-highlight-color: transparent; }
button, .seat, .card, .rune, .scene { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input { font-size: 16px; }

/* ================= Phones: a layout built for a tall, narrow screen ================= */
@media (max-width: 640px) {
  /* header on one line; Vault/Rules/Sound live in the pause menu */
  .top { flex-wrap: nowrap; gap: 6px; min-height: 30px; }
  .top h1 { font-size: 10px; flex: none; }
  .top > span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #round { flex: none; }
  #left { flex: 1 1 auto; }
  .tbtns { gap: 4px; flex: none; }
  .tbtns button { font-size: 14px; padding: 4px 8px; }
  #cardsBtn, #rulesBtn, #mute { display: none; }

  /* the Keeper: a shorter window across the table */
  .scene { flex: 0 0 auto; height: clamp(120px, 22dvh, 190px); min-height: 0; }
  .scene canvas { object-position: 50% 40%; }
  .keeperTag { font-size: 7px; padding: 3px 6px; top: 3%; }
  .keeperTag span { font-size: 13px; }
  .runes.huge .rune { width: 32px; height: 42px; font-size: 12px; }
  .keeperTotal { font-size: 10px; padding: 4px 6px; }
  .keeperHand { bottom: 6%; gap: 8px; }

  /* patrons: 4 a row (7 bots in two rows); your own seat is your panel below */
  .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .seat.mine { display: none; }
  .seat { padding: 3px 4px; border-width: 2px; gap: 1px; min-height: 0; }
  .seat .face { width: 20px; height: 20px; top: 2px; right: 2px; }
  .seat .who { padding-right: 20px; }
  .seat .who b { font-size: 14px; }
  .seat .stack { font-size: 14px; }
  .seat .runes { min-height: 20px; flex-wrap: nowrap; }
  .seat .rune { width: 14px; height: 19px; font-size: 7px; border-width: 1px; }
  .seat .rune.back { font-size: 13px; }
  .seat .hand .rune + .rune { margin-left: -2px; }
  .seat .meta { font-size: 13px; gap: 2px; }
  .seat .betchip { font-size: 12px; padding: 0 2px; }
  .seat .charms .px.mi { width: 12px; height: 12px; }
  .badge { font-size: 6px; padding: 2px 3px; top: 58%; }

  /* bag + log side by side, compact */
  .center { grid-template-columns: 110px 1fr; gap: 4px; margin-top: 4px; }
  .bars { height: 20px; }
  .bars b { font-size: 10px; }
  .feed { height: auto; min-height: 0; max-height: 60px; font-size: 14px; line-height: 1.05; padding: 3px 6px; overflow: hidden; }
  .feed li:not(:nth-last-child(-n+3)) { display: none; }

  /* your panel */
  .me { padding: 6px 8px; gap: 5px; }
  .meTop { flex-wrap: nowrap; }
  .meTop > div { white-space: nowrap; }
  .status { font-size: 14px; margin-left: 0; flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .runes.big .rune { width: 32px; height: 42px; font-size: 11px; }
  .total { font-size: 12px; }
  .myHand { gap: 8px; padding: 2px 4px; }
  .myHand .hbet { font-size: 15px; }
  .charmBar { gap: 5px; }
  button.mini { padding: 3px; }
  button.mini .px { width: 26px; height: 26px; }
  .charmRow .setChip { font-size: 12px; margin-left: 0; }
  .actions button { padding: 14px 2px; font-size: 12px; }
  #stand { font-size: 11px; }
  #double, #split { font-size: 9px; }

  /* overlays: full width, thumb-sized buttons */
  .overlay { padding: 8px; align-items: center; }
  .box { padding: 10px; }
  .betRow button { width: 56px; height: 52px; }
  .betQuick { display: grid; grid-template-columns: 1fr 1fr; }
  .betQuick button { padding: 10px 4px; }
  .resTable { font-size: 15px; }
  .resTable td { padding: 3px 2px; }
  .resTable .hand .rune { width: 13px; height: 17px; font-size: 6px; }
  .resTable img { width: 16px; height: 16px; }
  .shopBox { padding: 8px; gap: 4px; }
  .shopFoot { flex-direction: column; align-items: stretch; }
  .shopBtns { justify-content: stretch; }
  .shopBtns button { flex: 1; padding: 10px 6px !important; }
  #shopPass { width: auto; }
  .colBox { padding: 8px; }
  .colTabs button { font-size: 14px; padding: 4px 6px; flex: 1 1 auto; }
  .cards.mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .cards.mini .card { min-height: 150px; }
  .cards.mini .card .cardText { font-size: 12px; }
  .cos { width: calc(33% - 4px); }
  .tip { max-width: calc(100vw - 16px); }
}
/* very short phones (landscape or small): give the table back some room */
@media (max-width: 640px) and (max-height: 700px) {
  .scene { height: clamp(96px, 18dvh, 140px); }
  .feed { max-height: 44px; }
  .feed li:not(:nth-last-child(-n+2)) { display: none; }
}
@media (max-width: 640px) {
  .scene { flex: 1 1 auto; height: auto; min-height: 110px; }
  .badge { top: auto; bottom: 3px; right: 3px; left: auto; transform: none; font-size: 6px; }
  .seat .meta { padding-right: 34px; }
}
@media (max-width: 760px) {
  #colSummary, #setupMarks { display: inline !important; font-size: 13px; }
  .card.v-sale .cardFoot > i:first-child { display: none; }
  .card.v-sale .cardFoot { justify-content: center; }
}

/* ================= Rune pouch ================= */
.pouchRow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pouchRow:empty { display: none; }
.pouchLbl, .srLbl { font-family: "Press Start 2P"; font-size: 8px; color: #c9a2ff; }
.pouchRune { position: relative; padding: 2px 3px; background: #2a2238; border-color: #c9a2ff; box-shadow: inset -2px -2px 0 #15121f; }
.pouchRune .rune { width: 26px; height: 34px; font-size: 10px; }
.pouchRune[aria-disabled="true"] { opacity: .5; cursor: help; }
.pouchRune:not([aria-disabled]):hover { background: #3a2f52; transform: translateY(-2px); }
.pouchRune.resting .rune { filter: grayscale(.8) brightness(.7); }
.pouchRune em { position: absolute; right: -4px; top: -6px; font-style: normal; font-family: "Press Start 2P"; font-size: 7px; background: #15121f; color: var(--muted); border: 1px solid var(--muted); padding: 1px 2px; }
.pouchCap { color: var(--muted); font-size: 14px; }
.shopRunes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 14px; }
.runeOffer { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 3px; font-size: 14px; }
.runeOffer .rune, .ownRune .rune { width: 18px; height: 24px; font-size: 8px; }
.runeOffer.sold { opacity: .45; }
.runeOffer b { color: var(--gold); font-weight: normal; }
.ownRune { display: inline-flex; align-items: center; gap: 2px; border: 2px solid #c9a2ff55; padding: 1px 3px; }
.ownRune button { font-size: 12px; padding: 0 4px; }
.shopRunes .srLbl:nth-of-type(2) { margin-left: 8px; }
@media (max-width: 640px) {
  .pouchRune .rune { width: 24px; height: 32px; }
  .shopRunes .srLbl:nth-of-type(2) { margin-left: 0; flex-basis: 100%; }
}
.noRunes { color: var(--muted); font-size: 14px; }

/* ================= Paint performance ================= */
/* card art shadows and charm colours are baked into the images now (no per-image filters) */
.card .cardArt .px { filter: none; }
/* stood seats: a dimmed frame instead of a saturate() filter, which re-rasterized the seat on every change */
.seat.stood { filter: none; box-shadow: inset 0 0 0 2px #00000066; }
.seat.stood .runes, .seat.stood .who { opacity: .85; }
/* the animated scene gets its own compositor layer, so its 30fps redraw doesn't repaint the text on top */
.scene canvas { will-change: transform; transform: translateZ(0); }
.moment, .tip { will-change: transform; }

/* ================= Charm costs ================= */
.costTag { position: absolute; right: 2px; top: 2px; font-size: 11px; line-height: 1; padding: 1px 3px; background: #15121f; color: var(--gold); border: 1px solid var(--gold); white-space: nowrap; }
.costTag.up { color: #ff9a9a; border-color: #ff9a9a; }
.useCost { font-style: normal; font-size: 13px; color: var(--gold); margin-left: 2px; white-space: nowrap; }
.useCost.short { color: var(--bad); }
.useCost.up { color: #ff9a9a; }
button.mini.dormant { opacity: .45; }
button.mini.dormant .px { filter: grayscale(1); }
.seat .charms i.dormant { opacity: .35; }
.tip .tipCost { display: inline; font-family: "VT323"; font-size: 15px; color: var(--gold); margin: 0; }
@media (max-width: 640px) { button.mini .useCost { position: absolute; right: -4px; bottom: -6px; font-size: 11px; background: #15121f; padding: 0 2px; } button.mini { position: relative; } .costTag { font-size: 9px; } }
/* energy */
.px.en { width: 12px; height: 12px; vertical-align: -1px; }
.px.pip { width: 16px; height: 16px; vertical-align: -3px; margin-right: -2px; }
.energy { margin-left: 4px; }
.k-energy { --kc: #f2c94c; --kd: #a8781a; }
.costTag { color: #fff3b0; border-color: #f2c94c; }
.costTag.up { color: #ffd27a; border-color: #e8892e; }
.px.pip { width: 20px; height: 20px; vertical-align: -4px; margin-right: -3px; }
.useCost .px.en { width: 14px; height: 14px; }
@media (max-width: 640px) { .px.pip { width: 16px; height: 16px; } }
/* run Marks earned per hand, charm lifetimes */
.mkEarn { font-style: normal; display: block; font-size: 13px; color: #c9a2ff; font-weight: normal; }
.runMarks { color: #c9a2ff; margin-left: 4px; }
button.mini { position: relative; }
button.mini .life { position: absolute; left: -5px; top: -7px; font-style: normal; font-family: "Press Start 2P"; font-size: 7px; background: #15121f; color: var(--muted); border: 1px solid var(--muted); padding: 1px 2px; }
button.mini .life.last { color: var(--bad); border-color: var(--bad); }
.ownCharm .life { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 2px; }
.runMk { color: #c9a2ff; font-weight: normal; }

/* ================= Tutorial coach ================= */
.coach { position: fixed; z-index: 40; width: min(380px, calc(100vw - 16px)); display: flex; gap: 10px; padding: 10px; border-color: var(--gold); box-shadow: 0 0 0 3px #15121f, 6px 6px 0 #000c; }
.coach[hidden] { display: none !important; }
.coachFace { width: 48px; height: 48px; image-rendering: pixelated; background: #2a190f; border: 2px solid var(--gold); flex: none; }
.coachBody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.coachBody b { font-family: "Press Start 2P"; font-size: 10px; color: var(--gold); line-height: 1.4; }
.coachBody p { margin: 0; font-size: 17px; line-height: 1.1; }
.coachBtns { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.coachBtns #coachSkip { font-size: 14px; padding: 3px 8px; }
.coachBtns .hint { flex: 1; text-align: center; font-size: 13px; }
.coachBtns #coachNext { padding: 8px 14px; font-size: 10px; }
.coachFocus { outline: 3px solid var(--gold) !important; outline-offset: 3px; animation: coachPulse 1s steps(2) infinite; position: relative; z-index: 2; }
@keyframes coachPulse { 50% { outline-color: #fff3b0; } }
#introTutorial em { font-style: normal; font-family: "VT323"; font-size: 15px; color: var(--muted); margin-left: 6px; display: none; }
#introTutorial.newbie { border-color: var(--gold); color: var(--gold); }
#introTutorial.newbie em { display: inline; color: var(--gold); }
@media (max-width: 640px) { .coachBody p { font-size: 15px; } .coachFace { width: 36px; height: 36px; } }
.costTag.one { color: #ff9a9a; border-color: #ff5a6a; }
/* charges and the charm pot */
button.mini .chg { position: absolute; left: -4px; top: -6px; display: flex; gap: 2px; background: #15121f; padding: 2px; border: 1px solid var(--gold); }
button.mini .chg i { width: 5px; height: 5px; background: var(--gold); }
.potEarn { font-style: normal; display: block; font-size: 13px; color: var(--gold); font-weight: normal; }

/* ================= Phones in landscape: table on the left, your hand and buttons on the right ================= */
@media (orientation: landscape) and (max-height: 520px) {
  #app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 34%); grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding: 4px 8px; height: 100dvh; max-width: none; }
  .top { grid-column: 1 / -1; flex-wrap: nowrap; min-height: 24px; gap: 8px; }
  .top h1 { font-size: 10px; flex: none; }
  .top > span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .tbtns button { font-size: 13px; padding: 2px 7px; }
  #cardsBtn, #rulesBtn, #mute { display: none; }

  .table { grid-column: 1; grid-row: 2; min-height: 0; padding: 4px; border-radius: 12px; }
  .scene { flex: 1 1 auto; height: auto; min-height: 64px; margin: -4px -4px 4px; border-radius: 10px 10px 0 0; }
  .keeperTag { font-size: 7px; padding: 2px 5px; top: 3%; } .keeperTag span { font-size: 12px; }
  .runes.huge .rune { width: 26px; height: 34px; font-size: 10px; border-width: 2px; }
  .keeperTotal { font-size: 9px; padding: 3px 5px; }
  .keeperHand { bottom: 5%; gap: 6px; }
  .scene .omenCard { max-width: 170px; font-size: 12px; top: 22px; padding: 2px 4px 2px 2px; } .scene .omenCard b { font-size: 6px; } .scene .omenCard .px { width: 20px; height: 20px; }

  .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .seat.mine { display: none; }
  .seat { padding: 2px 4px; border-width: 2px; gap: 0; min-height: 0; }
  .seat .face { width: 18px; height: 18px; top: 2px; right: 2px; }
  .seat .who { padding-right: 18px; } .seat .who b, .seat .stack { font-size: 13px; }
  .seat .runes { min-height: 16px; } .seat .rune { width: 12px; height: 16px; font-size: 6px; border-width: 1px; } .seat .rune.back { font-size: 11px; }
  .seat .meta { font-size: 12px; padding-right: 32px; } .seat .betchip { font-size: 11px; padding: 0 2px; }
  .seat .charms .px.mi { width: 10px; height: 10px; }
  .badge { top: auto; bottom: 2px; right: 2px; left: auto; transform: none; font-size: 5px; padding: 1px 2px; }

  .center { grid-template-columns: 104px 1fr; gap: 4px; margin-top: 4px; }
  .bag { padding: 2px 4px; } .bagTop { font-size: 12px; } .bars { height: 16px; } .bars b { font-size: 9px; }
  .feed { height: auto; max-height: 38px; font-size: 13px; padding: 2px 6px; overflow: hidden; }
  .feed li:not(:nth-last-child(-n+2)) { display: none; }

  /* your side: hand, pouch, charms, then the buttons pinned to the bottom */
  #me { grid-column: 2; grid-row: 2; min-height: 0; overflow: hidden; padding: 6px 8px; gap: 4px; display: flex; flex-direction: column; }
  .meTop { flex-wrap: wrap; gap: 4px 8px; font-size: 15px; } .me .face { width: 22px; height: 22px; }
  .status { font-size: 13px; flex-basis: 100%; margin-left: 0; text-align: left; }
  .myHands { gap: 6px; min-height: 0; } .myHand { gap: 6px; padding: 2px 4px; }
  .runes.big .rune { width: 26px; height: 34px; font-size: 10px; } .total { font-size: 11px; } .myHand .hbet { font-size: 14px; }
  .charmBar { flex-direction: row; flex-wrap: wrap; gap: 4px; overflow: hidden; }
  .charmBar .none { font-size: 12px; }
  button.mini { padding: 2px; gap: 0; } button.mini span { display: none; } button.mini .px { width: 22px; height: 22px; }
  .charmRow .setChip { font-size: 11px; margin-left: 0; }
  .pouchRune .rune { width: 20px; height: 27px; }
  .actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .actions button { padding: 9px 2px; font-size: 11px; } #stand { font-size: 10px; } #double, #split { font-size: 8px; }
  .targetBar { top: 4px; right: 6px; font-size: 13px; }

  /* overlays: fit the short screen, scroll inside the box if they must */
  .overlay { padding: 6px; }
  .box, .shopBox, .colBox, .setupBox, .pauseBox { max-height: calc(100dvh - 12px); overflow: auto; padding: 8px 10px; }
  .box h2 { font-size: 10px; margin-bottom: 4px; }
  .betRow { margin: 4px 0; } .betBox p { margin: 4px 0; }
  .resTable { font-size: 14px; margin: 4px 0 6px; } .resTable td { padding: 2px 4px; } .resTable .hand .rune { width: 13px; height: 17px; font-size: 6px; }
  .shopCards { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 5px; }
  .shopCards .card .cardName { font-size: 6px; padding: 3px 2px; }
  .shopCards .card .cardArt { height: 30px; margin: 3px 4px; } .shopCards .card .cardArt .px { width: 24px; height: 24px; }
  .shopCards .card .cardText { font-size: 12px; line-height: 1; padding: 1px 4px; }
  .shopCards .card .cardFoot { font-size: 11px; padding: 1px 3px; } .shopCards .card .cardFoot b { font-size: 7px; }
  .costTag, .setTag { font-size: 9px; }
  .menuWrap { max-height: calc(100dvh - 12px); } .menuMain .logo { font-size: 20px; } .menuBtns button { padding: 7px 8px; font-size: 9px; } .tagline { font-size: 14px; }
  .bagGrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .bagCard { font-size: 11px; } .bagCard .bagArt .px { width: 22px; height: 22px; }
  .coach { width: min(360px, calc(100vw - 16px)); } .coachBody p { font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .menuWrap { height: calc(100dvh - 12px); max-height: none; }
  .menuWrap .box { max-height: 100%; overflow: auto; }
  .menuMain { gap: 5px; }
  .tagline, .menuMain .fine { display: none; }
  .menuMain .logo { font-size: 16px; }
  .menuMain .logo br { display: none; }
}

/* ================= Leaderboard ================= */
#board { z-index: 17; }
.boardBox { width: min(520px, 100%); display: flex; flex-direction: column; gap: 8px; }
.boardList { list-style: none; padding: 0; margin: 0; max-height: 52dvh; overflow: auto; }
.boardList li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: baseline; padding: 3px 6px; border-bottom: 1px dashed #f4ecd822; font-size: 18px; }
.boardList li:nth-child(-n+3) b { color: var(--gold); }
.boardList li b { font-family: "Press Start 2P"; font-size: 9px; color: var(--muted); }
.boardList li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boardList li em { font-style: normal; color: var(--gold); text-align: right; white-space: nowrap; }
.boardList li em i { font-style: normal; color: var(--muted); font-size: 14px; margin-left: 4px; }
.boardList li.mine { background: #f2c94c22; outline: 1px solid var(--gold); }
.boardList li.hint { display: block; }
.boardMe { margin: 0; color: var(--gold); font-size: 16px; }

/* ================= Cards: rarity by colour, equal heights, text that fits ================= */
/* frame + banner colour = rarity (tonics keep their purple) */
.card.r-common { --kc: #b8bec8; --kd: #5d6370; }
.card.r-uncommon { --kc: #7fd35a; --kd: #2f7a2a; }
.card.r-rare { --kc: #6ab0ff; --kd: #1f58b0; }
.card.r-legendary { --kc: #ffcf5a; --kd: #b0640f; }
.card.r-tonic { --kc: #c58cff; --kd: #6a3fa0; }
.card.r-rare { box-shadow: inset 0 0 0 3px var(--kc), 0 0 0 2px #6ab0ff, 4px 4px 0 #000a; }
.card.r-legendary { box-shadow: inset 0 0 0 3px var(--kc), 0 0 0 2px #ffcf5a, 0 0 12px #ffb347aa, 4px 4px 0 #000a; }
.card .cardName::after { display: none !important; }
.card .rar { display: none; }
.card.locked { --kc: #6a6080; --kd: #4a4258; }
/* hover tags: border in the card's rarity colour */
.tip.tr-common { --kc: #b8bec8; --kd: #5d6370; } .tip.tr-uncommon { --kc: #7fd35a; --kd: #2f7a2a; }
.tip.tr-rare { --kc: #6ab0ff; --kd: #1f58b0; } .tip.tr-legendary { --kc: #ffcf5a; --kd: #b0640f; }
/* colour key in the Vault */
.rarKey { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; font-size: 14px; color: var(--muted); }
.rarKey i { width: 10px; height: 10px; border: 1px solid #15121f; display: inline-block; margin-left: 4px; }
.rk-common { background: #b8bec8; } .rk-uncommon { background: #7fd35a; } .rk-rare { background: #6ab0ff; } .rk-legendary { background: #ffcf5a; }

/* equal heights: the name banner is always two lines, the text box takes the rest, the foot sits at the bottom */
.card { overflow: hidden; }
.card .cardName { flex: none; height: calc(2 * 1.5em + 10px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card .cardArt { flex: none; }
.card .cardText, .card .lockText { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.card .cardFoot { flex: none; }
/* shop: the cards share the space left in the box, so every card in a row is exactly as tall */
.shopBox { display: flex; flex-direction: column; }
.shopCards { flex: 1 1 auto; min-height: 150px; grid-auto-rows: 1fr; }
.shopCards .card { height: 100%; min-height: 0; }
/* Vault and end screen: a fixed card height */
.cards.mini { grid-auto-rows: 200px; }
.cards.mini .card { height: 200px; min-height: 0; }
.endUnlocks .cards.mini { grid-auto-rows: 180px; } .endUnlocks .cards.mini .card { height: 180px; }
@media (max-width: 640px) {
  .cards.mini { grid-auto-rows: 176px; } .cards.mini .card { height: 176px; }
  .shopCards { min-height: 0; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .shopCards { min-height: 140px; }
  .cards.mini { grid-auto-rows: 160px; } .cards.mini .card { height: 160px; }
}
/* shop cards: a fixed height that scales with the screen (the box sizes to its content) */
.shopCards { flex: none; min-height: 0; grid-auto-rows: clamp(200px, 38vh, 270px); }
@media (max-width: 760px) { .shopCards { grid-auto-rows: clamp(150px, 25vh, 210px); } }
@media (orientation: landscape) and (max-height: 520px) { .shopCards { grid-auto-rows: clamp(130px, 44vh, 170px); } }
/* held pop-ups (boss arrivals): clickable, a bit bigger, with a hint */
.moment.held { pointer-events: auto; cursor: pointer; max-width: min(560px, 92vw); font-size: 14px; }
.moment small { display: block; margin-top: 8px; font-family: "VT323"; font-size: 15px; color: var(--muted); }

/* ================= Side bets ================= */
.sideBet { margin-top: 8px; padding-top: 6px; border-top: 2px dashed #f4ecd833; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.sideBet .sbTitle { font-family: "Press Start 2P"; font-size: 8px; color: #c9a2ff; font-weight: normal; }
.sideBet .sbTitle i { font-family: "VT323"; font-style: normal; font-size: 14px; color: var(--muted); }
.sbTypes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sbTypes button { font-size: 14px; padding: 4px 2px; }
.sbTypes button em { font-style: normal; color: var(--gold); }
.sbTypes button.on, .sbItems button.on { background: #c9a2ff; color: #15121f; border-color: #c9a2ff; }
.sbTypes button.on em { color: #15121f; }
.sbItems { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; }
.sbItems button { display: inline-flex; align-items: center; gap: 2px; padding: 2px 5px; font-size: 13px; }
.sbItems em { font-style: normal; }
.sbNote { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.1; }
.sbNote b { color: var(--gold); font-weight: normal; }
@media (max-width: 640px) { .sbTypes { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Friends and private tables ---------- */
#friends { z-index: 17; }
.friendsBox { width: min(620px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; max-height: 92dvh; overflow: auto; }
.friendsBox > .shopHead, .friendsBox > #friendsClose { grid-column: 1 / -1; }
.friendsBox h3 { margin: 0 0 6px; font-family: "Press Start 2P"; font-size: 10px; color: var(--gold); }
.frAdd { display: flex; gap: 6px; }
.frAdd input, .joinRow input { flex: 1; min-width: 0; font: inherit; font-size: 18px; padding: 4px 8px; background: #0006; color: var(--ink, #f4ecd8); border: 2px solid #f4ecd844; }
.joinRow { display: flex; gap: 6px; margin-top: 8px; }
.joinRow input { text-transform: uppercase; letter-spacing: 3px; }
.friendList { list-style: none; padding: 0; margin: 0; }
.friendList li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed #f4ecd822; font-size: 18px; }
.friendList li span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.friendList li em { font-style: normal; color: var(--muted); font-size: 14px; }
.friendList button { font-size: 14px; padding: 3px 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #f4ecd833; flex: none; }
.dot.on { background: #5fd36a; box-shadow: 0 0 6px #5fd36a; }
.tableCode { font-family: "Press Start 2P"; font-size: 22px; letter-spacing: 4px; color: var(--gold); margin: 4px 0; user-select: all; }
.members { list-style: none; padding: 0; margin: 6px 0; }
.members li { padding: 2px 0; font-size: 18px; }
.members li b { color: var(--gold); font-weight: normal; }
#tableArea .primary, #tableArea > button { width: 100%; margin-top: 6px; }
.inviteToast { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 40; display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: #1b1424; border: 2px solid var(--gold); font-size: 18px; max-width: calc(100% - 32px); }
.inviteToast button { font-size: 14px; padding: 4px 10px; }
@media (max-width: 640px) { .friendsBox { grid-template-columns: 1fr; } }
.seat.betting .badge { color: var(--gold); border-color: var(--gold); animation: betPulse 1.2s ease-in-out infinite; }
@keyframes betPulse { 50% { opacity: .45; } }

/* Long hands: runes overlap, with the label moved to the visible left edge. Sizes are in em so it works at every breakpoint. */
.fan .rune { place-items: center start; padding-left: .45em; }
.fan .rune + .rune { margin-left: -.95em; }
.fan.lots .rune + .rune { margin-left: -1.3em; }
.fan .rune.back { place-items: center; padding-left: 0; }
.myHand { min-width: 0; }
.myHand .runes.big { flex-wrap: nowrap; }
.runes.fan { gap: 0; }

/* Split hands: a compact grid, small runes, total and bet on one line under each hand. */
.myHands.split { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 4px 8px; overflow-y: auto; min-height: 0; flex: 0 1 auto; position: relative; }
.myHands.split .myHand { flex-wrap: wrap; gap: 2px 8px; padding: 2px 4px; align-items: baseline; }
.myHands.split .myHand .runes { flex-basis: 100%; }
.myHands.split .runes.big .rune { width: 2.9em; height: 3.8em; font-size: 10px; }
.myHands.split .total { font-size: 11px; white-space: nowrap; }
.myHands.split .hbet { font-size: 14px; white-space: nowrap; }
@media (max-height: 500px), (max-width: 640px) { .myHands.split .runes.big .rune { font-size: 8px; } .myHands.split { grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); gap: 3px 6px; } .myHands.split .myHand { padding: 1px 3px; } .myHands.split .hbet { font-size: 12px; } .myHands.split .total { font-size: 10px; } }
.fan.packed .rune { padding-left: .25em; }
.fan.packed .rune + .rune { margin-left: -1.6em; }

/* Charm levels: blue border at II, gold at III. */
.mini.lv2, .seat .charms i.lv2, .card.lv2 { box-shadow: inset 0 0 0 2px #7fd1ff; }
.mini.lv3, .seat .charms i.lv3, .card.lv3 { box-shadow: inset 0 0 0 2px var(--gold), 0 0 6px #f2c94c66; }
.card.lv2 .lvl { color: #7fd1ff; }
.tipLv { color: #9fd8ff; font-size: .92em; }

/* ---------- Character editor ---------- */
#heroEdit { z-index: 17; }
.heroBox { width: min(760px, 100%); max-height: 94dvh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.heroMain { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; }
.heroPreview { display: flex; flex-direction: column; gap: 8px; align-items: center; position: sticky; top: 0; }
#heroCanvas { width: 192px; height: 192px; image-rendering: pixelated; background: var(--felt, #1f4a3a); border: 3px solid var(--edge, #15121f); }
.heroOpts { display: flex; flex-direction: column; gap: 6px; }
.heroOpt { display: grid; grid-template-columns: 112px 1fr; gap: 6px; align-items: center; }
.heroOpt > b { font-weight: normal; color: var(--muted); font-size: 16px; }
.heroOpt > div { display: flex; flex-wrap: wrap; gap: 4px; }
.heroOpt button { font-size: 14px; padding: 3px 7px; }
.heroOpt button.on { outline: 2px solid var(--gold); color: var(--gold); }
.heroOpt button.locked { opacity: .75; }
.heroOpt button em { font-style: normal; color: var(--gold); margin-left: 3px; }
.heroOpt .sw { width: 24px; height: 24px; padding: 0; border: 2px solid #15121f; }
.heroOpt .sw.on { outline: 2px solid var(--gold); outline-offset: 1px; }
.menuFace { width: 40px; height: 40px; image-rendering: pixelated; vertical-align: middle; background: var(--felt, #1f4a3a); border: 2px solid var(--edge, #15121f); }
@media (max-width: 640px) {
  .heroMain { grid-template-columns: 1fr; }
  .heroPreview { flex-direction: row; justify-content: center; background: var(--panel, #241c30); z-index: 1; padding: 4px 0; }
  #heroCanvas { width: 128px; height: 128px; }
  .heroOpt { grid-template-columns: 1fr; gap: 3px; }
}
#menuFaceBtn { background: none; border: none; padding: 0; cursor: pointer; box-shadow: none; }
.menuPlayer { align-items: center; }

/* Boss warning pop-up: short, red, flickering. The details are on the bet screen. */
.moment.boss { background: radial-gradient(circle, #4a1018 0%, #15121f 80%); border-color: var(--bad); color: #ffd0d0; padding: 18px 26px; }
.moment.boss.show { animation: bossFlicker .45s steps(2) 5; }
.moment.boss .bossWarn { display: block; font-size: 24px; color: #ff5a5a; text-shadow: 3px 3px 0 #000; letter-spacing: 3px; margin-bottom: 10px; }
.moment.boss span { display: block; font-family: "VT323", monospace; font-size: 21px; color: #f4ecd8; }
@keyframes bossFlicker { 50% { border-color: var(--gold); box-shadow: 0 0 24px #ff5a5a99, 6px 6px 0 #000c; } }
/* On the bet screen the boss card is big and pulses so it's hard to miss. */
#betOmen.boss { max-width: none; width: 100%; font-size: 19px; line-height: 1.15; padding: 8px 10px 8px 8px; gap: 10px; border-color: var(--bad); background: #2a0c12; animation: betBoss 1.1s ease-in-out infinite; }
#betOmen.boss .px { width: 48px; height: 48px; border-color: var(--bad); }
#betOmen.boss b { font-size: 10px; color: #ff5a5a; }
@keyframes betBoss { 0%, 100% { box-shadow: 0 0 0 #ff5a5a00, 3px 3px 0 #000a; transform: scale(1); } 50% { box-shadow: 0 0 20px #ff5a5acc, 3px 3px 0 #000a; transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce) { #betOmen.boss, .moment.boss.show { animation: none; } }
.moment.boss .bossWarn { word-spacing: -6px; }
/* Icons inside the card text stay icon-sized (only the portrait gets the framed box). */
.omenCard span .px, #betOmen.boss span .px { width: 1.2em; height: 1.2em; background: none; border: 0; padding: 0; vertical-align: middle; }

/* Gear tab */
#heroTabs { margin-bottom: 2px; }
.gearSlot { margin: 4px 0 2px; font-family: "Press Start 2P"; font-size: 10px; color: var(--gold); }
.gearList { display: flex; flex-direction: column; gap: 4px; }
.gearItem { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 4px 6px; border: 2px solid #f4ecd822; font-size: 16px; line-height: 1.15; }
.gearItem b { display: block; color: var(--ink, #f4ecd8); font-weight: normal; font-size: 17px; }
.gearItem span { color: var(--muted); }
.gearItem.own { border-color: #f4ecd855; }
.gearItem.eq { border-color: var(--gold); background: #f2c94c14; }
.gearItem button { font-size: 13px; padding: 3px 8px; white-space: nowrap; }
.gem { width: 12px; height: 16px; border: 2px solid #15121f; display: inline-block; clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); }
.gem.trink { background: #a8842a; clip-path: none; border-radius: 50%; width: 14px; height: 14px; }
.mini.k-gear { border-color: #a8842a; }
.mini.k-gear .gem { width: 10px; height: 13px; margin-right: 3px; vertical-align: middle; }

/* Bot personality tags on seats */
.btype { font-style: normal; font-family: "Press Start 2P"; font-size: 6px; padding: 1px 3px; margin-left: 4px; border: 1px solid currentColor; vertical-align: middle; white-space: nowrap; }
.bt-thief { color: #c58cff; } .bt-bully { color: #ff7a6a; } .bt-banker { color: #f2c94c; } .bt-gambler { color: #7fd35a; } .bt-sage { color: #7fd1ff; }
@media (max-width: 640px) { .btype { font-size: 5px; padding: 0 2px; } }

/* Backing a winner after you're knocked out */
.backBox { text-align: left; margin: 6px 0; }
.backBox p { margin: 4px 0; }
.backList { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; }
.backList button, .backStake button { display: flex; align-items: center; gap: 6px; font-size: 15px; padding: 3px 6px; }
.backList img { width: 22px; height: 22px; image-rendering: pixelated; }
.backList em { margin-left: auto; font-style: normal; color: var(--gold); font-size: 13px; }
.backList button.on, .backStake button.on { outline: 2px solid var(--gold); color: var(--gold); }
.backStake { display: flex; gap: 6px; align-items: center; margin-top: 6px; }

/* The Keeper reaching into the bag: a face-down rune that wobbles before it flips */
.runes.huge .rune.reach { animation: reachIn .7s steps(4) both; }
.runes.huge .rune.reach.risky { animation: reachIn .5s steps(4) both, reachShake .18s steps(2) .5s infinite; box-shadow: 0 0 0 3px var(--bad), 3px 3px 0 #0006; }
@keyframes reachIn { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes reachShake { 0% { transform: translateX(-2px) rotate(-3deg); } 100% { transform: translateX(2px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .runes.huge .rune.reach, .runes.huge .rune.reach.risky { animation: none; } }

/* Logo: a tavern sign, "Rune & Ruin" */
.logo.sign { display: flex; flex-direction: column; align-items: center; gap: 10px; text-shadow: none; margin: 6px 0 4px; }
.signBoard { display: flex; flex-direction: column; align-items: center; border: 4px solid var(--gold); background: #15121f; padding: 14px 22px 12px; box-shadow: 6px 6px 0 #000; }
.signBoard span { color: var(--gold); text-shadow: 3px 3px 0 #6b3d0e, 6px 6px 0 #000; font-size: 1em; line-height: 1.15; letter-spacing: 2px; }
.signBoard i { font-style: normal; color: var(--gold); font-size: .34em; margin: 8px 0 6px; }
.logo.sign em { font-family: "VT323", monospace; font-style: normal; font-size: 19px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.top h1.topSign { border: 2px solid #f2c94c99; padding: 4px 7px 3px; background: #15121f; text-shadow: 2px 2px 0 #6b3d0e; white-space: nowrap; }
.top h1.topSign i { font-style: normal; font-size: .7em; }
@media (max-height: 760px), (max-width: 420px) {
  .signBoard { flex-direction: row; gap: 10px; padding: 9px 14px; box-shadow: 4px 4px 0 #000; }
  .signBoard i { margin: 0; font-size: .5em; align-self: center; }
  .logo.sign em { font-size: 16px; }
}

/* ---------- Main menu, compact layout ---------- */
.menuMain { gap: 10px; }
.menuProfile { display: grid; gap: 6px; background: #1c1729; border: 2px solid #f4ecd81f; padding: 8px; }
.menuPlayer { justify-content: flex-start; align-items: center; gap: 12px; font-size: 17px; }
.menuPlayer .mpStat b { color: var(--gold); font-weight: normal; font-size: 22px; margin-right: 3px; }
.menuPlayer .mpStat { color: var(--muted); display: inline-flex; align-items: center; gap: 2px; }
.menuProfile .nameRow { margin: 0; font-size: 16px; color: var(--muted); }
.menuProfile .nameRow input { padding: 5px 8px; }
.menuAccount { border: 0; border-top: 1px dashed #f4ecd826; padding: 6px 0 0; font-size: 14px; color: var(--muted); }
.menuBtns { gap: 8px; }
.menuBtns #start { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16px; padding: 14px 10px 10px; }
.menuBtns button em { font-style: normal; font-family: "VT323", monospace; font-size: 15px; letter-spacing: 0; }
.menuBtns #start em { color: #ffe9d6; opacity: .85; }
.menuPair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menuPair button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 7px; }
.menuPair button em { display: block; color: var(--muted); }
#introTutorial em { display: block; margin: 0; }
.menuTiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.menuTiles button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; font-size: 8px; }
.menuTiles .tileIco { width: 24px; height: 24px; image-rendering: pixelated; }
.menuTiles button:hover .tileIco { transform: translateY(-2px); }
.menuFoot { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--muted); }
.soundBtn { font-family: "Press Start 2P"; font-size: 8px; padding: 7px 8px; flex: none; }
.soundBtn.off { color: var(--muted); border-color: #f4ecd833; }
.musicRow { display: flex; align-items: center; gap: 8px; flex: 1; }
.musicRow input { flex: 1; accent-color: var(--gold); }
.menuMain .nowPlaying { margin: -4px 0 0; text-align: right; }
.statGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.statGrid div { background: #1c1729; border: 1px solid #f4ecd81a; padding: 6px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.statGrid b { color: var(--gold); font-weight: normal; font-size: 22px; line-height: 1; }
.statGrid span { color: var(--muted); font-size: 13px; line-height: 1.1; }
@media (max-width: 420px) {
  .statGrid { grid-template-columns: repeat(2, 1fr); }
  .menuTiles button { font-size: 7px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .menuTiles { grid-template-columns: repeat(6, 1fr); }
  .menuTiles .tileIco { width: 18px; height: 18px; }
  .menuPair button em, .menuBtns #start em { display: none; }
}

/* ---------- Bag picker: compact tiles + one detail panel ---------- */
.setupBody { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 10px; min-height: 0; }
.setupBody .bagGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; }
.setupBody .bagCard { gap: 4px; padding: 8px 4px 6px; position: relative; opacity: 1; }
.setupBody .bagCard .bagArt { position: relative; }
.setupBody .bagCard .bagArt .px:first-child { width: 30px; height: 30px; }
.setupBody .bagCard.locked { background: #120f1a; }
.setupBody .bagCard.locked .bagArt .px:first-child { opacity: .45; }
.setupBody .bagCard.peeked { box-shadow: inset 0 0 0 2px #2a2238, 0 0 0 2px var(--muted); }
.bagLock { position: absolute; width: 16px !important; height: 16px !important; left: 50%; top: 50%; transform: translate(-50%, -40%); }
.bagWon { position: absolute; top: 3px; right: 4px; font-size: 13px; color: var(--gold); display: inline-flex; align-items: center; }
.bagDetail { background: #1c1729; border: 2px solid #f4ecd81f; padding: 10px; font-size: 16px; display: flex; flex-direction: column; gap: 6px; }
.bagDetail p { margin: 0; line-height: 1.2; }
.bagDetail .good { color: var(--good); } .bagDetail .bad { color: #ff9a9a; }
.bdHead { display: flex; align-items: center; gap: 8px; }
.bdHead .px { width: 36px; height: 36px; }
.bdHead b { font-family: "Press Start 2P"; font-size: 9px; line-height: 1.5; color: var(--bc, var(--muted)); font-weight: normal; }
@media (max-width: 760px) {
  .setupBody { grid-template-columns: 1fr; }
  .setupBody .bagGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .setupBody .bagCard b { font-size: 6px; }
}

/* ---------- Vault: search and filters ---------- */
.colFilter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.colFilter[hidden] { display: none; }
.colFilter input { flex: 1 1 180px; min-width: 0; padding: 4px 8px; font-size: 16px; }
.colStates { display: flex; gap: 4px; flex-wrap: wrap; }
.colStates button { font-size: 15px; padding: 2px 8px; }
.colStates button em { font-style: normal; color: var(--muted); }
.colStates button.on { background: #f4ecd81a; border-color: var(--gold); color: var(--gold); }
.colStates button.on em { color: var(--gold); }
/* Close buttons are quiet: the colored button is for the real action */
.closeBtn { font-family: "Press Start 2P"; font-size: 10px; padding: 10px; width: 100%; }

/* ---------- Table screen, decluttered ---------- */
.top { gap: 8px; }
#round, #left { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; min-width: 0; }
.top .chip { font-size: 16px; padding: 1px 7px; border: 1px solid #f4ecd82e; background: #15121f; color: var(--text, #f4ecd8); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.top .chip.strong { color: var(--gold); border-color: #f2c94c77; }
.top .chip.dim { color: var(--muted); }
.tbtns #menuBtn { color: var(--gold); border-color: var(--gold); }
.pauseNote { margin: -6px 0 4px; text-align: center; }
.seat.mine { display: none; }
#myBet:empty, #myRunMarks:empty { display: none; }
#myBet { color: var(--gold); border: 1px solid #f2c94c55; padding: 0 6px; }
.me .status { margin-left: auto; color: var(--muted); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .status.go { font-family: "Press Start 2P", monospace; font-size: 10px; color: #15121f; background: var(--gold); padding: 6px 9px; animation: goPulse 1s steps(2) infinite; }
@keyframes goPulse { 50% { background: #ffe08a; } }
@media (prefers-reduced-motion: reduce) { .me .status.go { animation: none; } }
.charmBar[hidden] { display: none !important; }
@media (max-width: 640px) {
  .top .topSign { display: none; }
  .top .chip { font-size: 14px; padding: 0 5px; }
  .top .chip.dim { display: none; }
  .me .status.go { font-size: 8px; padding: 5px 7px; }
}

.seats { grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); }
.myHand .hbet:empty { display: none; }
@media (max-width: 760px) { .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (orientation: landscape) and (max-height: 520px) { .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Sabotage spotlight: the attacker glows, the target panel flashes red */
.keeperTotal:empty { display: none; }
.seat.aiming { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad), 0 0 18px #ff5a5a88; animation: aimPulse .3s steps(2) infinite; z-index: 2; }
.seat.aimed { box-shadow: 0 0 0 3px var(--bad); }
.scene.aiming .keeperTag { border-color: var(--bad); color: #ff9a9a; animation: aimPulse .3s steps(2) infinite; }
.me.targeted { border-color: var(--bad) !important; box-shadow: inset 0 0 0 3px #ff5a5a66, 0 0 22px #ff5a5a66; animation: targetFlash .35s steps(2) 4; }
@keyframes aimPulse { 50% { filter: brightness(1.35); } }
@keyframes targetFlash { 50% { background: #3a0f16; } }
@media (prefers-reduced-motion: reduce) { .seat.aiming, .scene.aiming .keeperTag, .me.targeted { animation: none; } }

/* Bag picker side panel: the chosen bag, then its Candles */
.setupBody { grid-template-columns: minmax(0, 1fr) 230px; }
.bagSide { background: #1c1729; border: 2px solid #f4ecd81f; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bagSide .bagDetail { background: none; border: 0; padding: 0 0 8px; border-bottom: 1px dashed #f4ecd826; }
.bagSide .candleBar { flex-direction: column; align-items: stretch; gap: 6px; }
.bagSide .candleRow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.bagSide .candleRow button { justify-content: center; padding: 2px 0; }
.bagSide .candleText { min-height: 0; font-size: 15px; line-height: 1.2; }
@media (max-width: 760px) { .setupBody { grid-template-columns: 1fr; } .bagSide .candleRow { grid-template-columns: repeat(9, 1fr); } }

/* The move log fills the height of the bag panel beside it (newest at the bottom, older lines clipped at the top) */
.center { align-items: stretch; }
.center .feed { contain: size; height: auto; max-height: none; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.center .feed li { display: block; flex: none; }
.center .feed { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }

/* Purchase confirm */
#buyAsk { z-index: 30; }
.buyAskBox { width: min(340px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; border-color: var(--gold); }
.buyAskBox h2 { margin: 0; font-size: 12px; line-height: 1.5; color: var(--gold); }
.buyAskArt:empty { display: none; }
.buyAskArt .sw, .buyAskArt .px, .buyFace { width: 64px; height: 64px; image-rendering: pixelated; display: inline-block; }
.buyAskArt .sw.rs-plain, .buyAskArt [class*="rs-"] { width: auto; height: auto; display: inline-flex; gap: 4px; }
.buyAskText { margin: 0; font-size: 18px; color: var(--muted); }
.buyAskText b { color: var(--gold); font-weight: normal; font-size: 22px; }
.buyAskBal { margin: 0; }
.buyAskBox .row { width: 100%; }

/* Refund / penalty lines under a losing hand's net */
.resTable .refundLine { display: block; font-style: normal; font-size: 13px; color: var(--good); white-space: nowrap; }
.resTable .refundLine.neg { color: #ff9a9a; }

/* ================= Wide PC screens: use the whole window ================= */
.side { display: none; }
@media (min-width: 1280px) and (min-height: 640px) {
  #app { max-width: 1760px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 21vw, 400px); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; }
  #app > .top { grid-column: 1 / -1; }
  #app > .table { grid-column: 1; grid-row: 2; }
  #app > #me { grid-column: 1; grid-row: 3; }
  .side { display: flex; flex-direction: column; grid-column: 2; grid-row: 2 / 4; min-height: 0; }
  .side .center { display: flex; flex-direction: column; gap: 10px; margin: 0; height: 100%; min-height: 0; }
  .side .bag { flex: none; padding: 10px 12px; }
  .side .bars { height: 54px; }
  .side .feed { flex: 1 1 auto; font-size: 18px; padding: 8px 12px; line-height: 1.25; }
  .side .feed li { padding: 2px 0; border-bottom: 1px dashed #f4ecd814; }
  .side .peek { margin-top: 6px; }
}
/* Big windows: bigger runes, seats and buttons */
@media (min-width: 1500px) and (min-height: 850px) {
  .top .chip { font-size: 18px; padding: 2px 9px; }
  .tbtns button { font-size: 18px; padding: 4px 12px; }
  .runes.huge .rune { width: 58px; height: 78px; font-size: 20px; }
  .keeperTotal { font-size: 15px; }
  .seat { padding: 6px 8px; gap: 4px; }
  .seat .who b { font-size: 20px; }
  .seat .stack, .seat .meta { font-size: 18px; }
  .seat .face { width: 36px; height: 36px; }
  .seat .who { padding-right: 40px; }
  .seat .runes { min-height: 36px; }
  .seat .rune { width: 26px; height: 34px; font-size: 10px; }
  .seat .rune.back { font-size: 22px; }
  .seat .betchip { font-size: 15px; }
  .runes.big .rune { width: 54px; height: 72px; font-size: 18px; }
  .runes.big .rune.back { font-size: 36px; }
  .total { font-size: 20px; }
  .me { padding: 12px 16px; gap: 10px; }
  .meTop { font-size: 20px; }
  .me .face { width: 40px; height: 40px; }
  .me .status.go { font-size: 12px; padding: 8px 12px; }
  .actions button { font-size: 17px; padding: 18px; }
  .charmRow .mini { font-size: 16px; }
  .moment { font-size: 16px; padding: 18px 24px; }
}
/* Big windows: menus and pop-ups scale up with the screen (pixel art stays crisp). Heights are divided by
   the zoom so the scaled boxes still fit the window. */
@media (min-width: 1500px) and (min-height: 850px) {
  :root { --oz: 1.25; }
  .overlay > .box, .overlay > .menuWrap, .overlay > .panel { zoom: var(--oz); }
  .overlay > .box, .overlay > .panel { max-height: calc((100dvh - 28px) / var(--oz)); }
  .overlay > .menuWrap { max-height: calc((100dvh - 28px) / var(--oz)); }
  .overlay > .colBox { height: calc((100dvh - 28px) / var(--oz)); }
}
@media (min-width: 1900px) and (min-height: 1000px) { :root { --oz: 1.45; } }
@media (min-width: 1500px) and (min-height: 850px) {
  .overlay > .colBox { width: calc(92vw / var(--oz)); max-width: none; }
  .overlay > .shopBox { width: min(calc(92vw / var(--oz)), 1400px); max-width: none; }
}