/* Dungeon Drag — Deep Cellar skin.
   One art pixel = var(--px) CSS pixels (a whole number, set in the UI script). Every size below is a multiple of it. */
@font-face { font-family: 'Cellar'; src: url(../assets/cellar.ttf?v=6ebab657) format('truetype'); font-display: block; }
@font-face { font-family: 'CellarBook'; src: url(../assets/cellar-book.ttf?v=6ebab657) format('truetype'); font-display: block; }
@font-face { font-family: 'CellarBig'; src: url(../assets/cellar-big.ttf?v=6ebab657) format('truetype'); font-display: block; }
:root {
  --px: 2px;
  --k: #0a0b0e; --st1: #14181c; --st2: #222830; --st3: #38424a; --st4: #5a6668;
  --wood0: #221812; --wood1: #3a2a1c; --wood2: #56402a; --wood3: #7a5c3a;
  --gold0: #6a3418; --gold1: #b06a20; --gold2: #e8a83c; --gold3: #fde27a;
  --red0: #2e1024; --red1: #6a1a32; --red2: #ac3440; --red3: #e47a6a;
  --blue0: #1c2448; --blue1: #2e4c88; --blue2: #4a86c0; --blue3: #9ccce8;
  --grn0: #24361c; --grn1: #4a6a2a; --grn2: #7e9a38; --grn3: #c0c86a;
  --bone0: #38424a; --bone1: #767a78; --bone2: #b4b29c; --bone3: #e2dcc0;
  --vio2: #8050a8; --vio3: #c49ae0;
  --text: var(--bone3); --muted: var(--bone2); --gold: var(--gold3); --red: var(--red3); --blue: var(--blue3); --green: var(--grn3);
  --f1: calc(var(--px) * 10); /* Cellar Book: 5x7 body face, one font pixel = one art pixel */   /* body text: 5-pixel caps */
  --f2: calc(var(--px) * 16);  /* double size */
  --f3: calc(var(--px) * 24);
  --fx: 'CellarBook', 'Cellar', monospace; --fd: 'Cellar', monospace;
  --serif: var(--fx);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--k); color: var(--text); font-family: var(--fx); font-size: var(--f1); line-height: calc(var(--px) * 11);
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; font-smooth: never; text-rendering: optimizeSpeed;
  overflow: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none; touch-action: none; }
img, canvas, i, .btn, #app, #modalBox { image-rendering: pixelated; image-rendering: crisp-edges; }
canvas { image-rendering: pixelated; }
body { background: var(--k) url(../assets/wall-dark.png?v=6ebab657) repeat; background-size: calc(var(--px) * 224) calc(var(--px) * 174); image-rendering: pixelated; image-rendering: crisp-edges; }
b, strong { font-weight: normal; }
.hidden { display: none !important; }
#app { position: relative; height: 100%; max-width: calc(var(--px) * 260); margin: 0 auto; display: flex; flex-direction: column;
  background: none; } /* the wall is one full-viewport layer on body: no column edge, no seam */
button { font-family: var(--fx); font-size: var(--f1); cursor: pointer; color: var(--text); }
/* framing helpers */
.fr-wood, .tb-info, .hud-row, #modalBox, .iconbtn, #skills {
  border-style: solid; border-color: transparent; border-width: calc(var(--px) * 4);
  border-image: url(../assets/frame-wood.png?v=6ebab657) 10 fill / calc(var(--px) * 10) round; background: none; }

/* ---------- Game screen ---------- */
#game { display: flex; flex-direction: column; height: 100%; padding: max(calc(var(--px) * 3), env(safe-area-inset-top)) calc(var(--px) * 2) max(calc(var(--px) * 2), env(safe-area-inset-bottom)); gap: calc(var(--px) * 2); }
#topbar { display: flex; align-items: stretch; gap: calc(var(--px) * 2); }
.tb-info { flex: 1; display: flex; justify-content: space-around; align-items: center; padding: calc(var(--px) * 2) calc(var(--px) * 2); min-height: calc(var(--px) * 20); }
.tb-info .lbl { color: var(--muted); text-transform: uppercase; }
.tb-info b { color: var(--gold3); text-shadow: var(--px) var(--px) 0 var(--k); }
.iconbtn { color: var(--bone3); min-width: calc(var(--px) * 24); min-height: calc(var(--px) * 20); padding: 0 calc(var(--px) * 2); text-transform: uppercase; text-shadow: var(--px) var(--px) 0 var(--k); }
.iconbtn:active { transform: translateY(var(--px)); }
.burger { display: block; width: calc(var(--px) * 11); height: calc(var(--px) * 9); margin: 0 auto;
  background: linear-gradient(var(--bone3) 0 calc(var(--px) * 1), var(--k) 0 calc(var(--px) * 2), transparent 0 calc(var(--px) * 4), var(--bone3) 0 calc(var(--px) * 5), var(--k) 0 calc(var(--px) * 6), transparent 0 calc(var(--px) * 8), var(--bone3) 0 calc(var(--px) * 9)); }
#hud { display: flex; flex-direction: column; gap: calc(var(--px) * 2); }
.hud-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--px) * 2); padding: var(--px) calc(var(--px) * 3); min-height: calc(var(--px) * 36); }
.hud-row > div { display: flex; align-items: center; gap: calc(var(--px) * 3); }
.hud-row b { font-family: 'CellarBig', var(--fx); font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 10); text-shadow: var(--px) var(--px) 0 var(--k); }
.hud-row .sub { color: var(--muted); }
.hud-row .cap { display: block; color: var(--muted); text-transform: uppercase; margin-top: var(--px); }
.hud-gold b { color: var(--gold3); } .hud-armor b { color: var(--blue3); } .hud-hp b { color: var(--red3); }
.hud-hp { text-align: right; }
#cvGold, #cvArmor, #cvHp { width: calc(var(--px) * 20); height: calc(var(--px) * 20); flex: none; }
.minibar { width: calc(var(--px) * 40); height: calc(var(--px) * 5); background: var(--st1); border: var(--px) solid var(--k); margin-top: calc(var(--px) * 2); overflow: hidden; }
.minibar i { display: block; height: 100%; width: 0; background: linear-gradient(var(--gold2) 0 var(--px), var(--gold1) 0); transition: width .4s steps(6); }
.dmgline { color: var(--muted); display: flex; gap: calc(var(--px) * 3); margin-top: calc(var(--px) * 2); white-space: nowrap; }
.dmgline b { font-family: var(--fx); color: var(--bone3); }
#hStatus { position: absolute; right: calc(var(--px) * 4); bottom: calc(var(--px) * -2); color: var(--grn3); background: var(--k); padding: 0 var(--px); line-height: calc(var(--px) * 9); white-space: nowrap; max-width: 60%; overflow: hidden; }
#hStatus:empty { display: none; }
.bar { position: relative; height: calc(var(--px) * 10); background: var(--st1); border: var(--px) solid var(--k); overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width .45s steps(8); }
.bar.upg i { background: linear-gradient(var(--blue2) 0 var(--px), var(--blue1) 0 calc(100% - var(--px)), var(--blue0) 0); }
.bar.xp i { background: linear-gradient(var(--grn2) 0 var(--px), var(--grn1) 0 calc(100% - var(--px)), var(--grn0) 0); }
.bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(var(--px) * 15), var(--k) 0 calc(var(--px) * 16)) bottom / 100% var(--px) no-repeat; }
.bar span { position: relative; z-index: 1; display: block; text-align: center; line-height: calc(var(--px) * 10); color: var(--bone3); text-transform: uppercase; text-shadow: var(--px) var(--px) 0 var(--k); }
#banner { height: calc(var(--px) * 9); line-height: calc(var(--px) * 11); text-align: center; color: var(--red3); overflow: hidden; white-space: nowrap; }
#banner span { display: inline-block; padding: 0 calc(var(--px) * 3); background: var(--k); transition: opacity .3s steps(3); }
#boardWrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; --bs: calc(var(--px) * 168); }
#boardFrame { position: relative; z-index: 1; padding: calc(var(--px) * 6); border-image: url(../assets/frame-board.png?v=6ebab657) 10 fill / calc(var(--px) * 10) round; }
#board { display: block; touch-action: none; image-rendering: pixelated; }
#boardFrame .web { position: absolute; left: calc(var(--px) * 4); top: calc(var(--px) * 4); width: calc(var(--px) * 12); height: calc(var(--px) * 12); background: url(../assets/web.png?v=6ebab657) 0 0 / 100% 100%; pointer-events: none; opacity: .9; }
#chainInfo { position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; color: var(--bone3); white-space: nowrap; background: var(--k); padding: 0 calc(var(--px) * 3); text-transform: uppercase; }
#chainInfo:empty { display: none; }
/* cellar decorations around the board (purely visual) */
#cellarDeco { position: absolute; inset: 0; pointer-events: none; }
#cellarDeco i { position: absolute; display: block; background-size: 100% 100%; }
#cellarDeco .torch { width: calc(var(--px) * 8); height: calc(var(--px) * 13); top: calc(50% + var(--bs) / 2 + var(--px) * 10); background: url(../assets/torch.png?v=6ebab657) 0 0 / 300% 100%; animation: flick .45s steps(1) infinite; }
#cellarDeco .torch.l { left: calc(50% - var(--bs) / 2 - var(--px) * 2); }
#cellarDeco .torch.r { right: calc(50% - var(--bs) / 2 - var(--px) * 2); animation-delay: -.2s; animation-duration: .55s; }
#cellarDeco .glow { width: calc(var(--px) * 64); height: calc(var(--px) * 64); top: calc(50% + var(--bs) / 2 + var(--px) * -16); background-image: url(../assets/glow.png?v=6ebab657); animation: glow 1.1s steps(1) infinite; }
#cellarDeco .glow.l { left: calc(50% - var(--bs) / 2 - var(--px) * 30); }
#cellarDeco .glow.r { right: calc(50% - var(--bs) / 2 - var(--px) * 30); animation-delay: -.5s; }
#cellarDeco .chain { width: calc(var(--px) * 3); height: calc(var(--px) * 24); top: calc(50% + var(--bs) / 2 + var(--px) * 6); background-image: url(../assets/chain.png?v=6ebab657); }
#cellarDeco .c1 { left: calc(50% - var(--bs) / 4); } #cellarDeco .c2 { left: calc(50% + var(--px) * 10); height: calc(var(--px) * 15); } #cellarDeco .c3 { left: calc(50% + var(--bs) / 3); }
#cellarDeco .rat { width: calc(var(--px) * 12); height: calc(var(--px) * 8); top: calc(50% + var(--bs) / 2 + var(--px) * 15); left: calc(50% + var(--px) * 22); background-image: url(../assets/rat.png?v=6ebab657); }
@keyframes flick { 0% { background-position: 0 0; } 33% { background-position: 50% 0; } 66% { background-position: 100% 0; } }
@keyframes glow { 0% { transform: scale(1); } 40% { transform: scale(.9375); } 70% { transform: scale(1.03125); } }
/* skills: the clickable row at the bottom */
#skills { display: flex; gap: calc(var(--px) * 3); justify-content: space-around; align-items: center; min-height: calc(var(--px) * 44); padding: var(--px) calc(var(--px) * 2) calc(var(--px) * 2); }
.skill { position: relative; width: calc(var(--px) * 33); height: calc(var(--px) * 33); border: 0; padding: 0; background: url(../assets/ring-iron.png?v=6ebab657) 0 0 / 100% 100%; display: flex; align-items: center; justify-content: center; flex: none; }
.skill canvas { display: block; }
.skill.ready { background-image: url(../assets/ring-gold.png?v=6ebab657); animation: ready 1.2s steps(1) infinite; }
.skill.active { background-image: url(../assets/ring-blue.png?v=6ebab657); }
.skill.empty { opacity: .45; }
.skill.empty::after { content: ''; width: calc(var(--px) * 3); height: calc(var(--px) * 3); background: var(--st3); }
.skill .cd { position: absolute; inset: calc(var(--px) * 4); display: flex; align-items: center; justify-content: center; background: var(--k); color: var(--bone3); font-family: 'CellarBig', var(--fx); font-size: calc(var(--px) * 8); }
.skill .lv { position: absolute; bottom: calc(var(--px) * -2); left: 50%; transform: translateX(-50%); line-height: calc(var(--px) * 9); padding: 0 var(--px); background: var(--k); color: var(--muted); text-transform: uppercase; }
.skill.ready .lv { color: var(--gold3); }
@keyframes ready { 50% { filter: brightness(1.18); } }

/* ---------- Title: "Hero at the Door" ---------- */
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#title { --tpx: var(--px); background: none; }
#titleBg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; z-index: 1; }
.title-inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.home-b .scene { position: relative; width: calc(var(--tpx) * 195); height: calc(var(--tpx) * (293 - var(--crop, 0))); background: url(../assets/home-scene.png?v=6ebab657) 0 calc(var(--tpx) * var(--crop, 0) * -1) / calc(var(--tpx) * 195) calc(var(--tpx) * 293); flex: none; }
.home-b .scene .torch { position: absolute; left: calc(var(--tpx) * 17); top: calc(var(--tpx) * (240 - var(--crop, 0))); width: calc(var(--tpx) * 8); height: calc(var(--tpx) * 13); background: url(../assets/torch.png?v=6ebab657) 0 0 / 300% 100%; animation: flick .45s steps(1) infinite; }
.home-b .scene .glow { position: absolute; left: calc(var(--tpx) * -11); top: calc(var(--tpx) * (214 - var(--crop, 0))); width: calc(var(--tpx) * 64); height: calc(var(--tpx) * 64); background: url(../assets/glow.png?v=6ebab657) 0 0 / 100% 100%; animation: glow 1.1s steps(1) infinite; opacity: .7; }
.home-b .menu { display: flex; flex-direction: column; gap: calc(var(--px) * 3); align-items: center; margin-top: calc(var(--px) * 5); position: relative; z-index: 2; }
.home-b .menu .btn { position: relative; width: calc(var(--px) * 128); min-width: 0; height: calc(var(--px) * 18); padding: 0 calc(var(--px) * 14); color: var(--bone3); text-shadow: var(--px) var(--px) 0 var(--k);
  border: calc(var(--px) * 4) solid transparent; border-image: url(../assets/plank.png?v=6ebab657) 5 fill / calc(var(--px) * 5) stretch; outline: none; }
.home-b .menu .btn.sel { border-image-source: url(../assets/plank-sel.png?v=6ebab657); color: var(--gold3); }
.home-b .menu .btn.sel::before { content: ''; position: absolute; left: calc(var(--px) * 3); top: 50%; transform: translateY(-50%); width: calc(var(--px) * 6); height: calc(var(--px) * 6); background: url(../assets/cursor-sword.png?v=6ebab657) 0 0 / 100% 100%; }
.home-b .menu .btn:active { transform: translateY(var(--px)); }
.home-b .credit { margin-top: calc(var(--px) * 6); color: var(--bone2); background: var(--k); padding: 0 calc(var(--px) * 3); text-transform: uppercase; position: relative; z-index: 2; }
#title.two .home-b .menu { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 3); }
#title.two .home-b .menu .btn { width: calc(var(--px) * 94); padding: 0 calc(var(--px) * 9); }
#title.land .title-inner { flex-direction: row; justify-content: center; gap: calc(var(--px) * 12); flex-wrap: wrap; }
#title.land .home-b .menu { margin-top: 0; }
#title.land .home-b .credit { position: absolute; bottom: calc(var(--px) * -10); left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* door eyes: single pixels over the scene art; .shut hides them, .glance shifts them right */
.home-b .scene .eye { position: absolute; top: calc(var(--tpx) * (207 - var(--crop, 0))); width: calc(var(--tpx) * 2); height: calc(var(--tpx) * 2); background: #f0402e;
  box-shadow: inset var(--tpx) var(--tpx) 0 0 transparent; background-image: linear-gradient(#ffc890, #ffc890); background-size: var(--tpx) var(--tpx); background-repeat: no-repeat; }
.home-b .scene .e1 { left: calc(var(--tpx) * 100); } .home-b .scene .e2 { left: calc(var(--tpx) * 104); }
.home-b .scene .g1, .home-b .scene .g2 { display: none; }
.home-b .scene.shut .e1, .home-b .scene.shut .e2 { display: none; }
.home-b .scene.glance .e1, .home-b .scene.glance .e2 { transform: translateX(var(--tpx)); background-position: var(--tpx) 0; }

/* ---------- Buttons ---------- */
.btn { min-width: calc(var(--px) * 110); padding: calc(var(--px) * 4) calc(var(--px) * 8); color: var(--bone3); text-transform: uppercase; letter-spacing: 0;
  border: calc(var(--px) * 4) solid transparent; border-image: url(../assets/btn.png?v=6ebab657) 5 fill / calc(var(--px) * 5) stretch; background: none; text-shadow: var(--px) var(--px) 0 var(--k); }
.btn:active { border-image-source: url(../assets/btn-down.png?v=6ebab657); transform: translateY(var(--px)); }
.btn.primary { color: var(--k); text-shadow: var(--px) var(--px) 0 var(--gold2); border-image-source: url(../assets/btn-gold.png?v=6ebab657); }
.btn.primary:active { border-image-source: url(../assets/btn-gold-down.png?v=6ebab657); }
.btn.small { min-width: 0; padding: calc(var(--px) * 2) calc(var(--px) * 5); }
.btn.danger { border-image-source: url(../assets/plate.png?v=6ebab657); color: var(--red3); }
.btn:disabled { opacity: .4; }

/* ---------- Modal ---------- */
#modal { position: fixed; inset: 0; z-index: 20; background: rgba(10, 11, 14, .82); display: flex; align-items: center; justify-content: center; padding: calc(var(--px) * 4); }
#modalBox { width: 100%; max-width: calc(var(--px) * 252); max-height: 100%; overflow-y: auto; touch-action: pan-y; padding: calc(var(--px) * 6); animation: pop .2s steps(2); scrollbar-width: thin; scrollbar-color: var(--wood2) var(--k); }
@keyframes pop { from { transform: translateY(calc(var(--px) * 4)); opacity: .3; } }
#modalBox h2 { margin: 0 0 calc(var(--px) * 3); text-align: center; color: var(--gold3); font-size: var(--f2); line-height: calc(var(--px) * 16); text-transform: uppercase; font-weight: normal; text-shadow: var(--px) var(--px) 0 var(--gold0), calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--k); }
#modalBox h3 { margin: calc(var(--px) * 6) 0 calc(var(--px) * 3); color: var(--gold2); font-size: var(--f1); font-weight: normal; text-transform: uppercase; padding-bottom: var(--px); border-bottom: var(--px) solid var(--wood2); }
#modalBox p { margin: calc(var(--px) * 3) 0; line-height: calc(var(--px) * 11); }
#modalBox b { color: var(--gold3); }
.subtitle { text-align: center; color: var(--muted); margin-bottom: calc(var(--px) * 4); }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 3); }
.card, .item, .herodesc, .beast, .seg button, .field input, .scores, .help-tiles > div, .kv {
  border-style: solid; border-color: transparent; border-width: calc(var(--px) * 2); border-image: url(../assets/plate.png?v=6ebab657) 4 fill / calc(var(--px) * 4) stretch; background: none; }
.card { position: relative; text-align: left; padding: calc(var(--px) * 3); color: var(--text); display: flex; flex-direction: column; gap: calc(var(--px) * 2); min-height: calc(var(--px) * 56); }
.card.sel { border-image-source: url(../assets/plate-on.png?v=6ebab657); }
.card .ct { display: flex; align-items: center; gap: calc(var(--px) * 3); color: var(--gold3); text-transform: uppercase; }
.card .ct canvas { width: calc(var(--px) * 24); height: calc(var(--px) * 24); flex: none; }
.card .cd2 { color: var(--bone2); }
.card .tag { color: var(--muted); text-transform: uppercase; }
.card .check { position: absolute; top: calc(var(--px) * 2); right: calc(var(--px) * 3); color: var(--gold3); display: none; }
.card.sel .check { display: block; }
.diff-plus { color: var(--grn3); } .diff-minus { color: var(--red3); }
.actions { display: flex; gap: calc(var(--px) * 4); justify-content: center; margin-top: calc(var(--px) * 6); flex-wrap: wrap; }
.confirm { min-width: calc(var(--px) * 80); }
.row { display: flex; gap: calc(var(--px) * 3); flex-wrap: wrap; }
.seg { display: flex; gap: calc(var(--px) * 2); flex-wrap: wrap; }
.seg button { flex: 1; min-width: calc(var(--px) * 36); padding: calc(var(--px) * 2); color: var(--bone2); text-transform: uppercase; }
.seg button.on { border-image-source: url(../assets/plate-on.png?v=6ebab657); color: var(--gold3); }
.field { display: flex; gap: calc(var(--px) * 3); }
.field input { flex: 1; min-width: 0; font-family: var(--fx); font-size: var(--f1); padding: calc(var(--px) * 3); color: var(--bone3); outline: none; user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.heroes { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--px) * 2); justify-items: center; }
.hero { padding: var(--px); background: none; border: var(--px) solid transparent; line-height: 0; }
.hero canvas { width: calc(var(--px) * 24); height: calc(var(--px) * 24); display: block; }
.hero.on { border-color: var(--gold3); background: var(--gold1); }
.hero.locked { opacity: .7; }
.herodesc { padding: calc(var(--px) * 4); margin-top: calc(var(--px) * 4); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: var(--px) calc(var(--px) * 5); padding: calc(var(--px) * 3); }
.kv span:nth-child(even) { color: var(--gold3); text-align: right; }
.items { display: flex; flex-direction: column; gap: calc(var(--px) * 2); }
.item { display: flex; gap: calc(var(--px) * 3); align-items: flex-start; padding: calc(var(--px) * 2); }
.item canvas { width: calc(var(--px) * 24); height: calc(var(--px) * 24); flex: none; }
.ench { color: var(--vio3); }
.scores { width: 100%; border-collapse: separate; border-spacing: 0; }
.scores td, .scores th { padding: calc(var(--px) * 2); border-bottom: var(--px) solid var(--st2); text-align: left; vertical-align: top; }
.scores th { color: var(--muted); font-weight: normal; text-transform: uppercase; }
.scores td:last-child, .scores th:last-child { text-align: right; color: var(--gold3); }
.scores tr.me td { background: var(--wood1); }
.tabs { display: flex; gap: calc(var(--px) * 2); margin-bottom: calc(var(--px) * 4); flex-wrap: wrap; }
.help-tiles { display: grid; grid-template-columns: calc(var(--px) * 36) 1fr; gap: calc(var(--px) * 3) calc(var(--px) * 4); align-items: center; }
.help-tiles canvas { width: calc(var(--px) * 36); height: calc(var(--px) * 36); }
.beast { display: grid; grid-template-columns: calc(var(--px) * 36) 1fr; gap: calc(var(--px) * 4); align-items: center; padding: calc(var(--px) * 2); margin-bottom: calc(var(--px) * 2); }
.beast canvas { width: calc(var(--px) * 36); height: calc(var(--px) * 36); }
.beast b { color: var(--gold3); text-transform: uppercase; }
.nem { color: var(--red3); }
.intro { line-height: calc(var(--px) * 12); text-align: center; padding: calc(var(--px) * 4); color: var(--bone2); }
.big { font-family: 'CellarBig', var(--fx); font-size: var(--f3); line-height: calc(var(--px) * 24); text-align: center; color: var(--gold3); text-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--k); }
.toggle { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--px) * 3) 0; border-bottom: var(--px) solid var(--st2); text-transform: uppercase; }
.toggle input[type=checkbox] { -webkit-appearance: none; appearance: none; margin: 0; width: calc(var(--px) * 12); height: calc(var(--px) * 12); background: var(--st1); border: var(--px) solid var(--k); box-shadow: inset var(--px) var(--px) 0 var(--st3); cursor: pointer; }
.toggle input[type=checkbox]:checked { background: var(--gold2); box-shadow: inset var(--px) var(--px) 0 var(--gold3), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--gold1); }
.toggle input[type=range] { -webkit-appearance: none; appearance: none; width: calc(var(--px) * 70); height: calc(var(--px) * 5); background: var(--st1); border: var(--px) solid var(--k); }
.toggle input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(var(--px) * 6); height: calc(var(--px) * 11); background: var(--gold2); border: var(--px) solid var(--k); }
.toggle input[type=range]::-moz-range-thumb { width: calc(var(--px) * 6); height: calc(var(--px) * 11); background: var(--gold2); border: var(--px) solid var(--k); border-radius: 0; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--px) * 6); }
.dots { display: flex; gap: calc(var(--px) * 2); } .dots i { width: calc(var(--px) * 3); height: calc(var(--px) * 3); background: var(--st3); } .dots i.on { background: var(--gold3); }
#toast { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 30; pointer-events: none; font-size: var(--f2); line-height: calc(var(--px) * 16); color: var(--gold3); text-transform: uppercase;
  text-shadow: calc(var(--px) * 2) 0 0 var(--k), calc(var(--px) * -2) 0 0 var(--k), 0 calc(var(--px) * 2) 0 var(--k), 0 calc(var(--px) * -2) 0 var(--k), calc(var(--px) * 3) calc(var(--px) * 3) 0 var(--k); opacity: 0; transition: opacity .3s steps(3), transform .3s steps(3); white-space: nowrap; }
#toast.show { opacity: 1; transform: translate(-50%, -60%); }
.c-red { color: var(--red3) !important; } .c-blue { color: var(--blue3) !important; } .c-white { color: var(--bone3) !important; } .c-vio { color: var(--vio3) !important; } .c-muted { color: var(--muted) !important; } .c-gold { color: var(--gold3) !important; }
/* Short landscape screens (phones on their side): board on the left, info + skill buttons in a side column. */
html.side #app { max-width: none; }
html.side #modalBox { max-width: none; }
/* Wide desktop windows: menus and pop-ups sit in a centred panel instead of stretching edge to edge. */
@media (min-width: 900px) {
  html.side #modalBox { max-width: min(100%, max(calc(var(--px) * 252), 720px)); }
  html.side .heroes { grid-template-columns: repeat(10, auto); justify-content: space-evenly; }
  html.side .hero { padding: calc(var(--px) * 2); }
  html.side .hero canvas { width: calc(var(--px) * 28); height: calc(var(--px) * 28); }
}
html.side #game { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--px) * 190); grid-template-rows: auto auto auto 1fr auto; column-gap: calc(var(--px) * 4);
    padding-left: max(calc(var(--px) * 4), env(safe-area-inset-left)); padding-right: max(calc(var(--px) * 4), env(safe-area-inset-right)); }
html.side #topbar { grid-column: 2; grid-row: 1; }
html.side #hud { grid-column: 2; grid-row: 2; }
html.side #banner { grid-column: 2; grid-row: 3; }
html.side #skills { grid-column: 2; grid-row: 5; }
html.side #boardWrap { grid-column: 1; grid-row: 1 / -1; }
html.side .hud-row { min-height: calc(var(--px) * 34); }
html.side #cellarDeco .torch,html.side #cellarDeco .glow { top: calc(50% - var(--px) * 6); }
html.side #cellarDeco .glow { top: calc(50% - var(--px) * 32); }
html.side #cellarDeco .torch.l { left: calc(50% - var(--bs) / 2 - var(--px) * 18); }
html.side #cellarDeco .torch.r { right: calc(50% - var(--bs) / 2 - var(--px) * 18); }
html.side #cellarDeco .glow.l { left: calc(50% - var(--bs) / 2 - var(--px) * 46); }
html.side #cellarDeco .glow.r { right: calc(50% - var(--bs) / 2 - var(--px) * 46); }
html.side #cellarDeco .chain,html.side #cellarDeco .rat { display: none; }

.actions.top { margin: 0 0 calc(var(--px) * 4); }
#title.two .home-b .menu { margin-top: calc(var(--px) * 2); }
#title.two .home-b .menu .btn { height: calc(var(--px) * 16); }
#title.two .home-b .credit { margin-top: calc(var(--px) * 3); }

/* press-and-hold tile info */
#board, #boardWrap { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none; }
#tileInfo { position: absolute; z-index: 25; display: none; width: calc(var(--px) * 150); max-width: calc(100% - var(--px) * 6); padding: calc(var(--px) * 4);
  border: calc(var(--px) * 4) solid transparent; border-image: url(../assets/frame-wood.png?v=6ebab657) 10 fill / calc(var(--px) * 10) round; pointer-events: none; -webkit-touch-callout: none; }
#tileInfo.show { display: block; }
#tileInfo .ti-h { display: flex; align-items: center; gap: calc(var(--px) * 3); color: var(--gold3); text-transform: uppercase; margin-bottom: calc(var(--px) * 2); }
#tileInfo .ti-h canvas { width: calc(var(--px) * 36); height: calc(var(--px) * 36); flex: none; }
#tileInfo p { margin: calc(var(--px) * 2) 0; }
#tileInfo b { color: var(--gold3); }
#tileInfo .ti-st { margin-top: calc(var(--px) * 3); padding: calc(var(--px) * 2) calc(var(--px) * 3); background: var(--st1); border-left: calc(var(--px) * 2) solid var(--st3); }
#tileInfo .ti-st.frozen { border-color: var(--blue2); } #tileInfo .ti-st.frozen b { color: var(--blue3); }
#tileInfo .ti-st.burn { border-color: var(--red2); } #tileInfo .ti-st.burn b { color: var(--red3); }
#tileInfo .ti-st.elite { border-color: var(--gold2); }
#tileInfo .ti-st.poison { border-color: var(--grn2); } #tileInfo .ti-st.poison b { color: var(--grn3); }

/* scoring */
.mtag { display: inline-block; margin-left: var(--px); padding: 0 var(--px); font-style: normal; color: var(--k); background: var(--gold2); line-height: calc(var(--px) * 9); vertical-align: middle; }
.oldtag { display: inline-block; padding: 0 var(--px); color: var(--bone2); background: var(--st2); text-transform: uppercase; }
.kv.breakdown .sb-sub { border-top: var(--px) solid var(--st3); padding-top: var(--px); }
.kv.breakdown .sb-tot { color: var(--gold3); }
.c-gold { color: var(--gold3); }
.scorelist { margin: calc(var(--px) * 2) 0; padding-left: calc(var(--px) * 6); } .scorelist li { margin: calc(var(--px) * 1) 0; }

/* online leaderboard */
.initials { display: flex; justify-content: center; gap: calc(var(--px) * 6); margin: calc(var(--px) * 3) 0; }
.ini { display: flex; flex-direction: column; align-items: center; gap: var(--px); }
.ini b { font-family: var(--fd); font-size: var(--f2); line-height: 1; color: var(--bone3); min-width: calc(var(--px) * 14); text-align: center; padding: calc(var(--px) * 2) 0; border-bottom: calc(var(--px) * 2) solid var(--st3); cursor: pointer; }
.ini.on b { color: var(--gold3); border-color: var(--gold2); }
.ini .iconbtn { min-height: calc(var(--px) * 12); min-width: calc(var(--px) * 16); color: var(--bone2); }
.lb-note { text-align: center; color: var(--bone2); margin: calc(var(--px) * 3) 0; }
.lb-note.ok { color: var(--gold3); } .lb-note.off { color: var(--bone2); font-size: var(--f1); }
table.scores tr.me td { color: var(--gold3); background: var(--st2); }

/* display face stays Cellar for big titles */
#modalBox h2, #toast, .home-b h1 { font-family: var(--fd); }
/* Option B: Cellar Book with 2-pixel tracking */
/* HUD keeps to one line with the larger face */
.tb-info { padding-left: 0; padding-right: 0; } .tb-info > div, .hud-row .sub, .hud-row .cap { white-space: nowrap; }
.tb-info > div, .hud-row { letter-spacing: calc(var(--px) * -1); }
.hud-row .sub { font-size: calc(var(--px) * 10); }
.mtag, .oldtag { text-shadow: none; letter-spacing: 0; }
.tb-info > div { letter-spacing: 0; } .tb-info .lbl { font-family: var(--fd); font-size: calc(var(--px) * 8); }
#modalBox .tabs .btn, #modalBox .btn.small { padding-left: calc(var(--px) * 2); padding-right: calc(var(--px) * 2); letter-spacing: calc(var(--px) * -1); }
.seg button { flex: 1 1 auto; min-width: 0; padding: calc(var(--px) * 2) var(--px); letter-spacing: calc(var(--px) * -1); }
/* Hall of Heroes: the three mode buttons always share one row (display face, no wrap) */
#hsM { flex-wrap: nowrap; gap: var(--px); }
#hsM button { flex: 1 1 auto; min-width: 0; white-space: nowrap; font-family: var(--fd); font-size: calc(var(--px) * 8); letter-spacing: 0; padding: calc(var(--px) * 3) 0; }
table.scores td:last-child, table.scores th:last-child { white-space: nowrap; }
/* Title menu + footer: display caps face so every label sits on one line inside its plank */
.home-b .menu .btn { font-family: var(--fd); font-size: calc(var(--px) * 8); letter-spacing: 0; white-space: nowrap; }
.home-b .credit { font-family: var(--fd); font-size: calc(var(--px) * 8); letter-spacing: 0; white-space: nowrap; }
.hud-row .sub { font-family: var(--fd); font-size: calc(var(--px) * 8); letter-spacing: 0; }
.dmgline { white-space: nowrap; letter-spacing: calc(var(--px) * -1); }
html.side #game { grid-template-columns: minmax(0, 1fr) calc(var(--px) * 206); }

/* HUD row: tighter so the HP flask stays inside the frame with the wider body face */
.hud-row { padding: var(--px) calc(var(--px) * 2); gap: var(--px); }
.hud-row > div { gap: calc(var(--px) * 2); }
.hud-row .minibar { width: calc(var(--px) * 30); }
.hud-row .cap { font-family: var(--fd); font-size: calc(var(--px) * 8); letter-spacing: 0; }
.dmgline { gap: var(--px); }
#banner { height: calc(var(--px) * 11); min-width: 0; }
#banner span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
/* Tutorial: Skip on every page */
.help-top { display: flex; justify-content: flex-end; margin: calc(var(--px) * -2) 0 calc(var(--px) * -2); }
.help-top .btn.small { min-width: 0; font-family: var(--fd); font-size: calc(var(--px) * 8); padding: calc(var(--px) * 2) calc(var(--px) * 5); }
/* Choice cards (level-up / enchant / merchant): never wider than the panel; names in the caps display face */
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { min-width: 0; overflow-wrap: break-word; word-break: normal; hyphens: none; } /* wrap between words, never mid-word */
.card .ct, .card .tag { font-family: var(--fd); font-size: calc(var(--px) * 8); letter-spacing: 0; }
.card .ct { line-height: calc(var(--px) * 9); }
@media (max-width: 300px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.subtitle { overflow-wrap: break-word; }
/* How to Play pages: fit without scrolling. .tight trims spacing; .compact switches body text to the caps display face */
#modalBox.tight .help p { margin: calc(var(--px) * 2) 0; }
#modalBox.tight h2 { margin-bottom: var(--px); }
#modalBox.tight .pager { margin-top: calc(var(--px) * 3); }
#modalBox.tight .help-tiles { gap: calc(var(--px) * 2) calc(var(--px) * 3); }
#modalBox.compact .help { font-family: var(--fd); font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 9); letter-spacing: 0; }
#app { overflow: hidden; } /* torch glow decorations never widen the page (no sideways scroll in a frame) */
/* choice screens that would overflow (worst-case merchant items) */
#modalBox.tight .cards { gap: calc(var(--px) * 2); }
#modalBox.tight .card { min-height: 0; padding: calc(var(--px) * 2); gap: var(--px); }
#modalBox.tight .subtitle { margin-bottom: calc(var(--px) * 2); }
#modalBox.tight .actions { margin-top: calc(var(--px) * 3); }
#modalBox.compact .card .cd2 { font-family: var(--fd); font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 9); letter-spacing: 0; }
#modalBox.compact .card .ct canvas { width: calc(var(--px) * 16); height: calc(var(--px) * 16); }
/* last resort for item-heavy merchant cards: enchantments run on as one wrapped line */
#modalBox.dense .card .cd2 > div { display: inline; }
#modalBox.dense .card .cd2 > div:not(:last-child)::after { content: ' · '; color: var(--muted); }
#modalBox.dense { padding: calc(var(--px) * 4); }
#modalBox.dense h2 { margin-bottom: 0; }
.card .unench { color: var(--muted); font-family: var(--fd); font-size: calc(var(--px) * 8); letter-spacing: 0; white-space: nowrap; text-transform: uppercase; }

/* Class levels: pips, hero level tags, Customize screen */
.pips { display: inline-flex; gap: var(--px); vertical-align: middle; margin: 0 calc(var(--px) * 3); }
.pips i { width: calc(var(--px) * 4); height: calc(var(--px) * 4); background: var(--k); box-shadow: 0 0 0 var(--px) var(--wood2); }
.pips i.on { background: var(--gold3); box-shadow: 0 0 0 var(--px) var(--gold0); }
.clv { margin: calc(var(--px) * 2) 0; font-family: var(--fd); font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 10); letter-spacing: 0; }
.clv .c-muted { display: block; font-family: var(--fx); font-size: var(--f1); overflow-wrap: break-word; }
.hero { position: relative; }
.hero .hlv { position: absolute; right: 0; bottom: 0; font-family: var(--fd); font-style: normal; font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 8); color: var(--gold3); background: var(--k); padding: 0 var(--px); }
.herodesc .actions.top { margin: calc(var(--px) * 2) 0; justify-content: flex-start; }
.cust .subtitle { font-family: var(--fd); letter-spacing: 0; white-space: nowrap; }
.cust .subtitle .pips { margin: 0 0 0 calc(var(--px) * 2); }
.cust #cTabs button { font-family: var(--fd); letter-spacing: 0; white-space: nowrap; }
.cbody { margin-top: calc(var(--px) * 4); display: flex; flex-direction: column; gap: calc(var(--px) * 3); }
.cpair { display: flex; flex-direction: column; gap: calc(var(--px) * 2); min-width: 0; }
.cpair.off { flex-direction: row; justify-content: space-between; gap: calc(var(--px) * 3); opacity: .7; }
.cpair .cap { font-family: var(--fd); font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 9); letter-spacing: 0; color: var(--gold2); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpair.off .c-muted { font-family: var(--fd); font-size: calc(var(--px) * 8); letter-spacing: 0; white-space: nowrap; }
.crow { display: flex; align-items: stretch; gap: calc(var(--px) * 2); min-width: 0; }
.crow .cyc { flex: 0 0 calc(var(--px) * 16); font-family: var(--fd); font-size: calc(var(--px) * 12); color: var(--gold3); background: var(--wood1, #2a1a10); border: var(--px) solid var(--wood2); padding: 0; }
.crow .cyc:disabled { opacity: .35; }
.crow .cval { flex: 1 1 auto; min-width: 0; padding: calc(var(--px) * 2) calc(var(--px) * 3); background: var(--k); border: var(--px) solid var(--wood2); overflow-wrap: break-word; }
.crow .cval b { display: block; font-family: var(--fd); font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 9); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .cval span { display: block; line-height: calc(var(--px) * 10); }
.crow.lock .cval { opacity: .75; }
.cnote { margin: 0 !important; }
.cerr { min-height: 0; text-align: center; }
.cerr:not(:empty) { margin-top: calc(var(--px) * 3); }
.cust .actions .btn { white-space: nowrap; }
#modalBox.tight .cbody { gap: calc(var(--px) * 2); margin-top: calc(var(--px) * 2); }
#modalBox.compact .crow .cval span, #modalBox.compact .cnote { font-family: var(--fd); font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 9); letter-spacing: 0; }
#modalBox.dense .crow .cval { padding: var(--px) calc(var(--px) * 2); }
.lvup { text-align: center; }
.lvup .pips { margin: calc(var(--px) * 3) 0; }
.hallcl { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--px) * 110), 1fr)); gap: calc(var(--px) * 2) calc(var(--px) * 4); margin: calc(var(--px) * 3) 0; font-family: var(--fd); font-size: calc(var(--px) * 8); letter-spacing: 0; }
.hallcl > div { display: flex; justify-content: space-between; align-items: center; white-space: nowrap; gap: calc(var(--px) * 2); }
.hallcl .pips { margin: 0; }
.hallcl .pips i { width: calc(var(--px) * 3); height: calc(var(--px) * 3); }
.cpair:not(.off) { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (orientation: landscape), (min-width: 600px) {
  .cpair:not(.off) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--px) * 3); }
  .cpair:not(.off) > .cap { grid-column: 1 / -1; }
}
#modalBox.dense .crow .cval span { display: none; }
#modalBox.dense .crow.sel .cval span { display: block; }
#modalBox.dense .cnote { display: none; }
/* Hall of Heroes score tables: include the frame border in the width and fix the columns so nothing pokes past the frame */
table.scores { box-sizing: border-box; width: 100%; max-width: 100%; table-layout: fixed; }
table.scores td, table.scores th { overflow-wrap: break-word; }
table.scores th:first-child, table.scores td:first-child { width: calc(var(--px) * 14); padding-right: 0; }
table.scores th:last-child, table.scores td:last-child { width: 34%; padding-left: 0; }
table.scores td[colspan] { width: auto; text-align: center; white-space: normal; }
.scores .nw { white-space: nowrap; }

/* narrow/tall frames: let the layout use the full width so the board can grow */
/* #app max-width is set by pxScale() so the stacked layout can widen with the room */

/* help popups: attributes & enchantments (tile-info look) */
#helpPop { position: fixed; z-index: 30; display: none; width: calc(var(--px) * 150); max-width: calc(100% - var(--px) * 6); padding: calc(var(--px) * 4); color: var(--bone2);
  border-style: solid; border-color: transparent; border-width: calc(var(--px) * 4); border-image: url(../assets/frame-wood.png?v=6ebab657) 10 fill / calc(var(--px) * 10) round; image-rendering: pixelated; pointer-events: auto; }
#helpPop.show { display: block; }
#helpPop .ti-h { color: var(--gold3); text-transform: uppercase; font-family: var(--fd); margin-bottom: calc(var(--px) * 2); }
#helpPop p { margin: calc(var(--px) * 2) 0; }
#helpPop b { color: var(--gold3); }
#helpPop .ti-st { margin-top: calc(var(--px) * 3); padding: calc(var(--px) * 2) calc(var(--px) * 3); background: var(--st1); border-left: calc(var(--px) * 2) solid var(--vio2, var(--st3)); color: var(--muted); }
.hq { cursor: pointer; }
.hq { --ul: color-mix(in srgb, currentColor 55%, transparent); padding-bottom: var(--px);
  background-image: linear-gradient(to right, var(--ul) 50%, transparent 50%); background-size: calc(var(--px) * 2) var(--px); background-repeat: repeat-x; background-position: 0 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-stat], [data-ench], [data-help] { cursor: pointer; }
.qmark { display: inline-block; flex: none; width: calc(var(--px) * 9); height: calc(var(--px) * 9); margin-left: auto; font-size: 0; color: transparent; overflow: hidden; background: var(--ibadge) 0 0 / 100% 100% no-repeat; }
.card .ct .qmark { margin-right: calc(var(--px) * 9); }
#modalBox h3.h-help { display: flex; align-items: center; }
#modalBox .hint { color: var(--muted); font-family: var(--fd); font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 9); text-transform: uppercase; margin: calc(var(--px) * -1) 0 calc(var(--px) * 2); }

/* Compact side column for short-wide frames (CrazyGames small previews, 707x480 etc.): 150 art px wide, so the board gets the rest */
html.side.narrow #game { grid-template-columns: minmax(0, 1fr) calc(var(--px) * 150); }
html.side.narrow #topbar { flex-wrap: wrap; row-gap: calc(var(--px) * 2); }
html.side.narrow #topbar .tb-info { order: 3; flex: 1 1 100%; min-height: calc(var(--px) * 16); }
html.side.narrow #btnMenu { margin-right: auto; }
html.side.narrow .hud-row { flex-wrap: wrap; justify-content: space-around; row-gap: var(--px); min-height: 0; }
html.side.narrow #skills { gap: var(--px); padding-left: var(--px); padding-right: var(--px); min-height: calc(var(--px) * 40); }
/* short frames: help popups go wider so long explanations never run off the bottom */
@media (max-height: 520px) and (orientation: landscape) { #helpPop { width: calc(var(--px) * 240); } }

:root { --ibadge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%235a6668' d='M1 0h7v1H1zM0 1h1v7H0zM8 1h1v7H8zM1 8h7v1H1z'/%3E%3Cpath fill='%23222830' d='M1 1h7v7H1z'/%3E%3Cpath fill='%23e2dcc0' d='M4 2h1v1H4zM3 4h2v3H4V5H3zM3 6h3v1H3z'/%3E%3C/svg%3E"); }
.sheet-top { position: sticky; top: calc(var(--px) * -6); z-index: 3; display: flex; justify-content: flex-start; margin: calc(var(--px) * -6) calc(var(--px) * -6) 0; padding: calc(var(--px) * 6) calc(var(--px) * 6) calc(var(--px) * 3); background: var(--k); box-shadow: 0 var(--px) 0 var(--wood2); }
.sheet-top .btn.small { pointer-events: auto; min-width: 0; background: var(--k); padding: calc(var(--px) * 2) calc(var(--px) * 4); box-shadow: 0 var(--px) 0 var(--k); }
#modalBox h2.sheet-h { padding: calc(var(--px) * 3) 0 0; }
#modalBox .subtitle + .hint { text-align: center; margin-top: calc(var(--px) * -2); }
#modalBox.nohint .hint { display: none; }
.kv .hq { justify-self: start; }
/* trophy moments: new hero / class level */
.trophypop .tp-head { display: flex; align-items: center; justify-content: center; gap: calc(var(--px) * 5); margin: calc(var(--px) * 3) 0; }
.trophypop .tp-ic { padding: calc(var(--px) * 2); background: var(--k); box-shadow: 0 0 0 var(--px) var(--gold0), 0 0 0 calc(var(--px) * 2) var(--gold3); animation: tpGlow 1.2s steps(2) infinite; }
.trophypop .tp-ic canvas { width: calc(var(--px) * 48); height: calc(var(--px) * 48); display: block; }
.trophypop .tp-name { display: flex; flex-direction: column; gap: calc(var(--px) * 2); }
.trophypop .tp-name b { font-family: var(--fd); font-size: var(--f2); line-height: calc(var(--px) * 14); }
.trophypop .tp-name .pips { margin: 0; }
.trophypop .tp-desc { text-align: center; }
.trophypop .tp-rows { background: var(--k); box-shadow: 0 0 0 var(--px) var(--wood2); padding: calc(var(--px) * 3) calc(var(--px) * 4); }
.trophypop .tp-row { margin: calc(var(--px) * 2) 0; line-height: calc(var(--px) * 11); }
.trophypop .tp-lab { display: inline-block; color: var(--gold2); text-transform: uppercase; margin-right: calc(var(--px) * 2); }
.trophypop .tp-gains .tp-lab { display: block; margin: 0; }
.trophypop .tp-note { text-align: center; }
#modalBox.tight .trophypop .tp-ic canvas { width: calc(var(--px) * 36); height: calc(var(--px) * 36); }
#modalBox.tight .trophypop .tp-row { margin: var(--px) 0; }
#modalBox.compact .trophypop .tp-row, #modalBox.compact .trophypop .tp-desc { font-family: var(--fd); font-size: calc(var(--px) * 8); line-height: calc(var(--px) * 9); letter-spacing: 0; }
@keyframes tpGlow { 50% { box-shadow: 0 0 0 var(--px) var(--gold0), 0 0 0 calc(var(--px) * 2) var(--gold2), 0 0 0 calc(var(--px) * 4) rgba(255, 216, 74, .25); } }