/* Layout: one narrow column (enemy, board, hero), like a handheld screen.
   Art direction: an old adventurer's tome. Parchment pages, carved wood frames,
   brass rivets, crimson ribbons. Frames are pixel 9-slices generated in
   js/sprites.js and exposed as --frame-* custom properties. Single deliberate look. */
:root {
  --bg: #1e130c;
  --bg-plank: #24170e;
  --bg-seam: #140c07;
  --parchment: #e9d3a3;
  --parchment-deep: #dcc28c;
  --ink: #3b2416;
  --ink-soft: #7a5434;
  --cream: #f6e7c1;
  --wood: #5a3420;
  --wood-dark: #24140b;
  --gold: #d9a441;
  --gold-hi: #f2cc63;
  --crimson: #a8322a;
  --leaf: #4f9a3a;
  --leaf-hi: #8fcf62;
  --sky: #3f7fd6;

  /* Summon rarity colours, reserved for the summoning screens. */
  --rarity-common: #a7a39a;    /* 3 stars, iron */
  --rarity-epic: #8a5ad8;      /* 4 stars, amethyst */
  --rarity-legendary: #e8b84a; /* 5 stars, gold */
  --rarity-mythic: #d0364a;    /* 6 stars, crimson with a rainbow shimmer */

  --font-title: "Jacquard 12", "Silkscreen", ui-monospace, monospace;
  --font-label: "Silkscreen", ui-monospace, "Courier New", monospace;
  --font-body: "Pixelify Sans", ui-monospace, "Courier New", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { background: var(--bg); color: var(--ink); }

body {
  margin: 0;
  font-variant-ligatures: none;   /* the pixel fonts' fi/fl ligatures read as a capital A */
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.35;
  /* wooden floor planks behind the book */
  background:
    repeating-linear-gradient(0deg, var(--bg-plank) 0 45px, var(--bg-seam) 45px 48px),
    var(--bg);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 8px 16px;
  -webkit-tap-highlight-color: transparent;
}

.game {
  max-width: 448px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- framed surfaces */
.panel, .guide, .sheet {
  border: 18px solid var(--wood);
  border-image: var(--frame-parchment) 18 fill / 18px;
  background: var(--parchment);
  image-rendering: pixelated;
}

.panel {
  position: relative;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }

.eyebrow {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

/* crimson ribbon title */
.ribbon {
  align-self: center;
  max-width: 100%;
  margin: 0;
  border: solid var(--crimson);
  border-width: 18px 27px;
  border-image: var(--frame-ribbon) 18 27 fill / 18px 27px;
  padding: 0 4px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 30px;
  line-height: 0.9;
  color: var(--cream);
  text-shadow: 2px 2px 0 #2b1008;
  text-align: center;
  text-wrap: balance;
}
.enemy-name { margin-top: -8px; }

/* ---- bars: dark trough, brass ring, glossy pixel fill */
.bar {
  position: relative;
  flex: 1;
  height: 20px;
  background: var(--wood-dark);
  border: 3px solid var(--wood-dark);
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px var(--wood-dark);
  margin: 6px;
  overflow: hidden;
}
.bar .fill {
  height: 100%;
  width: 100%;
  transition: width 0.35s steps(8);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}
.enemy-hp { flex: none; }
.enemy-hp .fill { background: var(--crimson); }
.player-hp .fill { background: var(--leaf); }
/* mana shimmers like the lightning gem that fills it */
.mana .fill {
  background: linear-gradient(90deg, #c0504a, #d9a441, #5aa83a, #3f7fd6, #8a5ad8, #c0504a) 0 0 / 200% 100%;
  animation: shimmer 3s linear infinite;
}
.bar-text {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--cream);
  text-shadow: 2px 0 0 var(--wood-dark), -2px 0 0 var(--wood-dark), 0 2px 0 var(--wood-dark), 0 -2px 0 var(--wood-dark);
  font-variant-numeric: tabular-nums;
}

.stat-row { display: flex; align-items: center; gap: 4px; }
.label {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-label); font-size: 13px; font-weight: 700; color: var(--ink);
  width: 84px; flex: none;
}
.label img { width: 24px; height: 24px; image-rendering: pixelated; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  border: 9px solid var(--parchment-deep);
  border-image: var(--frame-inset) 9 fill / 9px;
  padding: 0 2px;
}
.chip img { width: 16px; height: 16px; image-rendering: pixelated; }
.block-chip { min-width: 64px; justify-content: center; }
.block-chip.empty { color: var(--ink-soft); }
.block-chip.empty img { filter: grayscale(1) sepia(0.6) brightness(0.8); }

/* ---- views: the journey map and the battle share the column */
.view { display: flex; flex-direction: column; gap: 8px; }

/* ---- journey map */
.purse { display: flex; gap: 6px; }
.purse .chip { font-size: 12px; }
.map-panel { gap: 6px; }
.area-nav { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.area-nav .ribbon { flex: 1; font-size: 26px; margin: 0; }
.area-nav .btn { font-size: 22px; line-height: 1; padding: 0 4px; }
.area-nav .btn:disabled { opacity: 0.35; cursor: default; }
.area-sub { text-align: center; }
.map-box {
  position: relative;
  border: 3px solid var(--wood-dark);
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px var(--wood-dark);
  margin: 6px;
  line-height: 0;
}
#mapCanvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.map-nodes { position: absolute; inset: 0; }
.node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 58px;
  border: 9px solid var(--parchment-deep);
  border-image: var(--frame-inset) 9 fill / 9px;
  background: none;
  padding: 0 2px;
  cursor: pointer;
  line-height: 1.1;
  font-family: var(--font-label);
  color: var(--ink);
}
.node-id { font-size: 13px; font-weight: 700; }
.node-stars { display: flex; gap: 0; }
.node-stars img { width: 14px; height: 14px; image-rendering: pixelated; }
.node.boss { border-image-source: var(--frame-insetAlert); }
.node.boss .node-id { color: var(--crimson); }
.node.next { animation: beckon 1s steps(2) infinite; }
.node.locked { filter: grayscale(1) brightness(0.75); cursor: not-allowed; }
.node:not(:disabled):active { transform: translate(-50%, calc(-50% + 2px)); }
.area-desc { margin: 0; font-size: 15px; color: var(--ink-soft); text-align: center; text-wrap: balance; }

/* ---- stage card and results */
.foe { display: flex; align-items: center; gap: 10px; }
.foe-portrait { width: 84px; height: auto; image-rendering: pixelated; flex: none; }
.foe p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.objectives { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.objectives li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-soft); }
.objectives li.met { color: var(--ink); }
.objectives li img { width: 39px; height: 39px; image-rendering: pixelated; flex: none; }
.objectives li span { flex: 1; }
.new-tag {
  font-family: var(--font-label); font-size: 10px; color: var(--cream);
  background: var(--crimson); padding: 1px 5px; box-shadow: 0 0 0 2px #2b1008;
}
.star-row { display: flex; justify-content: center; gap: 6px; }
.star-row img.big { width: 52px; height: 52px; image-rendering: pixelated; animation: star-pop 0.45s steps(4) both; }
.star-row .pop-1 { animation-delay: 0.35s; width: 76px !important; height: 76px !important; margin-top: -8px; }
.star-row .pop-2 { animation-delay: 0.7s; }
.run-stats .total { border-bottom: none; padding-top: 6px; }
.run-stats .total dt { font-family: var(--font-label); font-weight: 700; color: var(--ink); }
.run-stats .total dd { font-size: 18px; color: var(--crimson); }
.rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rewards .chip { font-size: 12px; }
.result-tip, .stage-best { margin: 0; font-size: 15px; color: var(--ink-soft); text-align: center; }
.result-actions { display: flex; justify-content: center; gap: 8px; }
.sheet .result-actions .btn { font-size: 14px; }

/* ---- top bar */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.topbar .eyebrow { color: var(--cream); text-shadow: 1px 1px 0 var(--wood-dark); }
.btn.small { font-size: 11px; border-width: 12px; }

/* ---- battle stage: pixel scene with the enemy card on the sky */
.stage {
  position: relative;
  border: 3px solid var(--wood-dark);
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px var(--wood-dark);
  margin: 6px;
  line-height: 0;
  overflow: hidden;
}
#stage { width: 100%; height: auto; max-width: 100%; display: block; image-rendering: pixelated; }
.enemy-card {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: min(64%, 270px);
  line-height: 1.35;
  display: flex; flex-direction: column; gap: 2px;
  border: 9px solid var(--parchment-deep);
  border-image: var(--frame-inset) 9 fill / 9px;
  padding: 0 2px 2px;
}
.enemy-card .ribbon { font-size: 22px; border-width: 18px 27px; margin: -24px -26px 0; align-self: stretch; max-width: none; }
.enemy-card .bar { margin: 6px 4px 4px; height: 20px; }
.enemy-card .intent { border: none; padding: 0 2px; gap: 6px; flex-wrap: wrap; }
.enemy-card .intent img { width: 20px; height: 20px; }
.enemy-card .intent-text { font-size: 14px; line-height: 1.1; }
.enemy-card .intent-cd { font-size: 10px; }
.enemy-card.dead { filter: grayscale(1); opacity: 0.6; }
.stage .armor-chip { position: absolute; right: 6px; top: 46%; line-height: 1.2; }
.stage .traits { position: absolute; right: 6px; bottom: 8px; justify-content: flex-end; flex-wrap: nowrap; max-width: 46%; line-height: 1.2; }
.hero-bar {
  position: absolute; left: 6px; bottom: 4px;
  width: 50%;
  display: flex; align-items: center; gap: 2px;
  line-height: 1.2;
}
.hero-bar .bar { height: 20px; margin: 6px; }
.hero-bar .block-chip { min-width: 0; border-width: 6px; padding: 0 1px; font-size: 11px; }
.floats.enemy-floats { left: auto; right: 0; width: 45%; top: 40%; bottom: auto; height: 30%; }
.floats.hero-floats { right: auto; width: 45%; top: 40%; bottom: auto; height: 30%; }

/* ---- menu */
.dev-note { margin: 0; font-size: 14px; color: var(--ink-soft); text-align: center; font-style: italic; }
.menu-sheet { max-height: calc(100% - 8px); overflow-y: auto; }
.menu-sheet .toolbar { justify-content: center; }
.menu-heading { font-family: var(--font-title); font-weight: 400; font-size: 26px; color: var(--crimson); margin: 6px 0 0; line-height: 1; }
.menu-sheet .guide-body h3 { font-family: var(--font-title); font-weight: 400; font-size: 22px; color: var(--crimson); margin: 10px 0 2px; line-height: 1; }
.menu-sheet .guide-body p, .menu-sheet .guide-body li { font-size: 15px; }
.menu-sheet .guide-body ul { padding-left: 18px; margin: 6px 0; }

/* ---- enemy weaknesses */
.traits { list-style: none; margin: -2px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 0; }
.traits:empty { display: none; }
.trait {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-label); font-size: 11px; font-weight: 700;
  padding: 2px 6px 2px 3px;
  box-shadow: 0 0 0 2px var(--wood-dark);
}
.trait img { width: 16px; height: 16px; image-rendering: pixelated; }
.trait.weak { background: var(--gold-hi); color: var(--ink); }
.trait.resist { background: #6a5847; color: var(--cream); }

/* ---- enemy intent */
.intent {
  display: flex; align-items: center; gap: 8px;
  border: 9px solid var(--parchment-deep);
  border-image: var(--frame-inset) 9 fill / 9px;
  padding: 0 4px;
}
.intent img { width: 24px; height: 24px; image-rendering: pixelated; }
.intent-text { flex: 1; font-size: 17px; font-weight: 600; min-width: 0; color: var(--ink); }
.intent-cd {
  font-family: var(--font-label); font-size: 11px; color: var(--ink-soft);
  white-space: nowrap; text-transform: uppercase;
}
.intent.imminent { border-image-source: var(--frame-insetAlert); }
.intent.imminent .intent-cd {
  color: var(--cream);
  background: var(--crimson);
  padding: 2px 6px;
  box-shadow: 0 0 0 2px #2b1008;
  animation: blink 0.8s steps(2) infinite;
}

/* ---- board in its carved wood frame */
.board-wrap {
  width: 88%;
  align-self: center;
  border: 18px solid var(--wood);
  border-image: var(--frame-wood) 18 fill / 18px;
  background: #2a1a10;
  line-height: 0;
}
#board {
  width: 100%;
  height: auto;
  max-width: 100%;
  image-rendering: pixelated;
  touch-action: none;
  cursor: pointer;
  display: block;
}

/* ---- skills: crimson buttons with gold trim */
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.skill {
  position: relative;
  text-align: left;
  font-family: var(--font-body);
  color: var(--cream);
  border: 12px solid var(--crimson);
  border-image: var(--frame-btnRed) 12 fill / 12px;
  background: none;
  padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
  min-width: 0;
  text-shadow: 1px 1px 0 #2b1008;
}
.skill-name { font-family: var(--font-label); font-size: 10px; font-weight: 700; padding-right: 32px; white-space: nowrap; }
.skill-desc { font-size: 13px; color: #f0c9a8; line-height: 1.15; }
.skill .cost {
  position: absolute; top: -2px; right: -4px;
  min-width: 30px;
  text-align: center;
  font-family: var(--font-label); font-size: 12px; font-weight: 700;
  color: var(--cream);
  background: var(--sky);
  padding: 1px 4px;
  box-shadow: 0 0 0 2px #10203a, inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.skill.ready { animation: ready 1.2s steps(2) infinite; }
/* a ready skill: a stepped gold outline pulse and a light sweeping across it */
.skill.ready:not(:disabled) { outline: 3px solid #ffe08a; outline-offset: 1px; animation: ready-glow 1s steps(2) infinite; }
.skill.ready:not(:disabled)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 244, 200, 0.5) 50%, transparent 58%) 0 0 / 300% 100% no-repeat;
  animation: skill-shine 2.6s linear infinite;
}
.skill.ready.just-ready:not(:disabled) { animation: ready-pop 0.42s ease-out, ready-glow 1s steps(2) 0.42s infinite; }
.skill:disabled {
  cursor: not-allowed;
  border-image-source: var(--frame-btnOff);
  color: #b9a88c;
  animation: none;
}
.skill:disabled .skill-desc { color: #9a8a70; }
.skill:disabled .cost { background: #55463a; box-shadow: 0 0 0 2px #1a120c; }
.skill:not(:disabled):active { transform: translateY(2px); }

.relics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.relics li {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px;
  color: var(--ink);
  border: 9px solid var(--parchment-deep);
  border-image: var(--frame-inset) 9 fill / 9px;
  padding: 0 2px;
}
.relics li img { width: 16px; height: 16px; image-rendering: pixelated; }
.relics li.trained { border-image-source: var(--frame-insetAlert); }
.relics li.none { color: var(--ink-soft); font-style: italic; }

/* ---- toolbar + buttons */
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.btn {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  border: 12px solid var(--wood);
  border-image: var(--frame-btnWood) 12 fill / 12px;
  background: none;
  padding: 0 4px;
  cursor: pointer;
  text-shadow: 1px 1px 0 #1a0e07;
}
.btn.primary { border-image-source: var(--frame-btnGold); color: var(--ink); text-shadow: 1px 1px 0 var(--gold-hi); }
.btn:disabled, .stage-card .result-actions .btn:disabled, .menu-sheet.parch .btn:disabled { border-image-source: var(--frame-btnOff); color: #b9a88c; text-shadow: 1px 1px 0 #3a2c1c; cursor: not-allowed; transform: none; }
.stage-card .result-actions .btn.primary:disabled { color: #b9a88c; filter: none; }
.btn:active { transform: translateY(2px); }
button:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }

/* ---- guide */
.guide { padding: 2px 6px; }
.guide summary { font-family: var(--font-label); font-size: 13px; font-weight: 700; cursor: pointer; color: var(--ink); }
.guide-body { max-width: 65ch; }
.guide h3 { font-family: var(--font-title); font-weight: 400; font-size: 26px; color: var(--crimson); margin: 12px 0 2px; line-height: 1; }
.guide p, .guide li { font-size: 15px; }
.guide ul { padding-left: 18px; margin: 6px 0; }
.gem-key { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.gem-key li { display: flex; gap: 8px; align-items: flex-start; }
.gem-key img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }

/* ---- floating numbers */
.floats { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.pop {
  position: absolute;
  top: 40%;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 18px;
  text-shadow: 2px 0 0 var(--wood-dark), -2px 0 0 var(--wood-dark), 0 2px 0 var(--wood-dark), 0 -2px 0 var(--wood-dark);
  animation: rise 1.1s ease-out forwards;
  white-space: nowrap;
}
.pop.dmg { color: #ff8a6a; }
.pop.big { color: var(--gold-hi); font-size: 26px; }
.pop.armor { color: var(--gold-hi); font-size: 13px; }
.pop.heal { color: var(--leaf-hi); }
.pop.weak { color: #ffd86a; font-size: 18px; margin-top: -1.4em; }
.pop.resist { color: #bfae94; font-size: 16px; margin-top: -1.4em; }

.hit { animation: hit 0.25s steps(3); }
.lunge { animation: lunge 0.45s steps(5); }
.enemy-panel.dead .enemy-name, .enemy-panel.dead .intent { filter: grayscale(1); opacity: 0.6; }

/* ---- modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(20, 12, 7, 0.85);
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  z-index: 20;
  overflow-y: auto;
}
.sheet {
  width: 100%; max-width: 448px;
  padding: 4px 6px;
  display: flex; flex-direction: column; gap: 8px;
}
.sheet .eyebrow { text-align: center; }
.sheet h2 { margin: 0 auto; font-size: 28px; }
.cards { display: flex; flex-direction: column; gap: 4px; }
.card {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  text-align: left;
  color: var(--ink);
  border: 9px solid var(--parchment-deep);
  border-image: var(--frame-inset) 9 fill / 9px;
  background: none;
  padding: 2px;
  cursor: pointer;
  font-family: var(--font-body);
}
.card:hover, .card:focus-visible { border-image-source: var(--frame-insetAlert); }
.card img { grid-row: 1 / 3; width: 48px; height: 48px; image-rendering: pixelated; }
.card-name { font-family: var(--font-label); font-weight: 700; font-size: 14px; align-self: end; }
.card-desc { font-size: 15px; color: var(--ink-soft); }
.run-stats { margin: 0; display: grid; gap: 2px; }
.run-stats div { display: flex; justify-content: space-between; border-bottom: 3px dotted #c9a46a; padding: 4px 0; }
.run-stats dt { color: var(--ink-soft); }
.run-stats dd { margin: 0; font-family: var(--font-label); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.sheet .btn { align-self: center; font-size: 14px; }

@keyframes rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-34px); opacity: 0; } }
@keyframes hit { 0% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 100% { transform: none; } }
@keyframes lunge { 0% { transform: none; } 40% { transform: translateY(10px) scale(1.02); } 100% { transform: none; } }
@keyframes blink { 50% { opacity: 0.45; } }
@keyframes ready { 50% { filter: brightness(1.18); } }
@keyframes skill-shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
@keyframes ready-glow { 50% { filter: brightness(1.2); outline-color: #fff6c8; } }
@keyframes ready-pop { 0% { transform: scale(1); } 40% { transform: scale(1.07); filter: brightness(1.6); } 100% { transform: scale(1); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes beckon { 50% { filter: brightness(1.15) drop-shadow(0 0 0 #fff0b0); transform: translate(-50%, calc(-50% - 2px)); } }
@keyframes star-pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .skill.ready::after { animation: none; display: none; }
  .ov-intent.acting, .ov-block.struck,
  .hit, .lunge, .skill.ready, .skill.ready:not(:disabled), .skill.just-ready, .intent.imminent .intent-cd, .mana .fill, .node.next, .star-row img.big { animation: none; }
  .pop { animation-duration: 1.6s; }
}

/* ===================================================================== battle screen
   1:1 with the north-star concept. The screen is a container; --u is one concept
   pixel (the concept is 1320 px wide), and every overlay is placed with --x/--y/--w/--h
   in concept pixels. The painted plate behind supplies frames; overlays supply data. */
.battle-screen {
  --u: calc(100cqw / 1320);
  position: relative;
  width: 100%;
  aspect-ratio: 1320 / 2480;
  container-type: inline-size;
  background: var(--bg) 0 0 / 100% 100% no-repeat;
  overflow: hidden;
  line-height: 1.2;
}
.battle-screen .abs {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  margin: 0;
}
.battle-view { overflow: hidden; }
.battle-view .battle-screen { will-change: transform; }   /* the screen kick moves it on the GPU */
.battle-screen #ambient, .battle-screen #stage, .battle-screen #board, .battle-screen #overlay {
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  max-width: none; aspect-ratio: auto; image-rendering: pixelated;
}
.battle-screen #stage, .battle-screen #ambient, .battle-screen #overlay { pointer-events: none; }
.battle-screen .storm-layer { pointer-events: none; image-rendering: pixelated; }
.battle-screen .storm-layer[hidden] { display: none; }
.fps-meter {
  display: grid; place-items: center;
  font-family: var(--font-label); font-weight: 700; font-size: calc(24 * var(--u));
  color: #9bff8a; background: rgba(10, 6, 3, 0.7);
}
.battle-screen #board { touch-action: none; cursor: pointer; }

.ov-eyebrow {
  font-family: var(--font-label); font-weight: 700; font-size: calc(20 * var(--u));
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap; line-height: calc(26 * var(--u)); text-align: center;
}
.ov-name {
  display: grid; place-items: center;
  font-family: var(--font-title); font-weight: 400; font-size: calc(46 * var(--u));
  color: var(--cream); line-height: 1; white-space: nowrap;
  text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #2b1008;
}
.ov-bar { background: #1a0e07; overflow: hidden; }
.ov-bar .fill {
  height: 100%; width: 100%;
  transition: width 0.35s steps(8);
  box-shadow: inset 0 calc(6 * var(--u)) 0 rgba(255, 255, 255, 0.3), inset 0 calc(-6 * var(--u)) 0 rgba(0, 0, 0, 0.28);
}
.ov-bar.enemy-hp .fill { background: #d23a32; }
.ov-bar.player-hp .fill { background: #46b43a; }
.ov-bar .bar-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-label); font-weight: 700; font-size: calc(27 * var(--u)); color: #fff;
  --o: calc(3 * var(--u));
  text-shadow: var(--o) 0 0 #1a0e07, calc(-1 * var(--o)) 0 0 #1a0e07, 0 var(--o) 0 #1a0e07, 0 calc(-1 * var(--o)) 0 #1a0e07;
}
.ov-traits { list-style: none; padding: 0; display: flex; justify-content: center; align-items: center; gap: calc(12 * var(--u)); }
.ov-traits .trait {
  font-size: calc(17 * var(--u)); gap: calc(7 * var(--u));
  padding: calc(2 * var(--u)) calc(11 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u));
  box-shadow: 0 0 0 calc(4 * var(--u)) #2b1008;
  white-space: nowrap;
}
.ov-traits .trait img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.ov-intent { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.ov-intent img { width: calc(38 * var(--u)); height: calc(38 * var(--u)); image-rendering: pixelated; flex: none; }
.ov-intent .intent-text {
  flex: 1; min-width: 0; font-size: calc(33 * var(--u)); font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-intent .intent-cd {
  font-family: var(--font-label); font-size: calc(18 * var(--u)); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.ov-intent.imminent .intent-cd { color: var(--crimson); animation: blink 0.8s steps(2) infinite; }
/* the enemy is acting now: its intent flares */
.ov-intent.acting { animation: intent-act 0.6s steps(4); }
.ov-block.struck { animation: block-clang 0.36s steps(3); }
@keyframes intent-act { 0%, 100% { filter: none; transform: none; } 25%, 75% { filter: brightness(1.5) saturate(1.3); transform: scale(1.05); } 50% { filter: brightness(1.2); transform: scale(1.02); } }
@keyframes block-clang { 0% { filter: brightness(2.2); transform: scale(1.3); } 100% { filter: none; transform: none; } }
.enemy-ov.dead .ov-name, .enemy-ov.dead .ov-intent { filter: grayscale(1); }
.ov-armor { font-size: calc(22 * var(--u)); border-width: calc(9 * var(--u)); border-image-width: calc(9 * var(--u)); }
.ov-armor img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.ov-block {
  display: grid; place-items: center;
  font-family: var(--font-label); font-weight: 700; font-size: calc(26 * var(--u)); color: var(--ink);
}
.ov-block.empty { color: var(--ink-soft); }
.ov-label {
  display: flex; align-items: center;
  font-family: var(--font-label); font-weight: 700; font-size: calc(22 * var(--u)); color: var(--ink);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.battle-screen .skill {
  border-width: calc(14 * var(--u));
  border-image-width: calc(14 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  gap: calc(4 * var(--u));
  text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 #2b1008;
}
.battle-screen .skill-name { font-size: calc(28 * var(--u)); padding-right: calc(70 * var(--u)); letter-spacing: 0.08em; }
.battle-screen .skill-desc { font-size: calc(30 * var(--u)); line-height: 1.12; }
.battle-screen .skill .cost {
  top: calc(-2 * var(--u)); right: calc(-2 * var(--u)); min-width: calc(62 * var(--u));
  font-size: calc(24 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u));
  box-shadow: 0 0 0 calc(4 * var(--u)) #10203a, inset 0 calc(4 * var(--u)) 0 rgba(255, 255, 255, 0.35);
}
.battle-screen .skill.ready:not(:disabled) { outline-width: calc(6 * var(--u)); outline-offset: calc(2 * var(--u)); }
.battle-screen .skill:disabled .cost { box-shadow: 0 0 0 calc(4 * var(--u)) #1a120c; }
.ov-tool {
  display: grid; place-items: center; padding: 0;
  border-width: calc(12 * var(--u)); border-image-width: calc(12 * var(--u));
  font-size: calc(25 * var(--u)); letter-spacing: 0.1em;
  text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 #1a0e07;
}
.ov-guide { background: none; border: 0; padding: 0; cursor: pointer; }
.battle-screen .pop { font-size: calc(46 * var(--u)); top: 30%; }
.battle-screen .pop.big { font-size: calc(64 * var(--u)); }
.battle-screen .pop.weak, .battle-screen .pop.resist { font-size: calc(38 * var(--u)); top: 18%; }
/* Thunderclap damage: electric blue-white with a crackling glow */
.pop.shock { color: #eef8ff; text-shadow: 0 0 6px #6fb6ff, 0 0 14px #3f7fff, 2px 2px 0 #10204a; animation: rise 1.1s ease-out forwards, shock-flicker 0.12s steps(2) 6; }
.battle-screen .pop.shock { font-size: calc(72 * var(--u)); }
@keyframes shock-flicker { 50% { color: #a9d4ff; text-shadow: 0 0 10px #a9d4ff, 0 0 22px #6fb6ff, 2px 2px 0 #10204a; } }
.battle-screen .pop.armor { font-size: calc(28 * var(--u)); }
.battle-screen .pop.heal { font-size: calc(40 * var(--u)); }

/* ---- painted journey map: the plate is 1320 x 2844 layout units, one per art pixel, overlays use --x/--y/--w/--h */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.map-screen {
  --u: calc(100cqw / 1320);
  position: relative;
  width: 100%;
  aspect-ratio: 1320 / 2844;
  container-type: inline-size;
  background: var(--map-bg) 0 0 / 100% 100% no-repeat;
  overflow: hidden;
  line-height: 1.2;
}
.map-screen .abs {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  margin: 0;
}
.map-screen #mapFx { pointer-events: none; image-rendering: pixelated; }
.map-screen #mapPlateCv { pointer-events: none; }
.map-screen #mapAir { pointer-events: none; }
.mp-val {
  display: flex; align-items: center;
  font-family: var(--font-label); font-weight: 700; font-size: calc(40 * var(--purse-k, 1) * var(--u));
  color: #2a1a10;
}
/* top-bar values shrink with their length (setPurse sets data-len) so they stay inside the painted slot */
.mp-val[data-len="4"], .camp-val[data-len="4"] { --purse-k: 0.75; }
.mp-val[data-len="5"], .camp-val[data-len="5"] { --purse-k: 0.6; }
.mp-val[data-len="6"], .camp-val[data-len="6"], .mp-val[data-len="7"], .camp-val[data-len="7"] { --purse-k: 0.5; }
.mp-hit { background: none; border: 0; padding: 0; cursor: pointer; }
.mp-hit:focus-visible, .mp-node:focus-visible { outline: calc(6 * var(--u)) solid #fff3b0; outline-offset: calc(2 * var(--u)); }
.mp-nav { display: grid; place-items: center; padding: 0; font-size: calc(40 * var(--u)); border-width: calc(10 * var(--u)); border-image-width: calc(10 * var(--u)); }
.mp-nav[hidden] { display: none; }
.mp-sub {
  display: flex; align-items: center;
  font-family: var(--font-label); font-weight: 700; font-size: calc(var(--fs, 30) * var(--u));
  letter-spacing: 0.1em; text-transform: uppercase; color: #5e4128; white-space: nowrap; overflow: hidden;
}
.mp-stars { display: flex; align-items: center; justify-content: space-between; }
.mp-stars .mstar { width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
.mp-nodes { pointer-events: none; }
.mp-nodes > * { pointer-events: auto; }
/* a stage plaque, cut from the painted art; 9-sliced so the boss plaque can be wider */
.mp-node {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(2 * var(--u));
  padding: 0; cursor: pointer;
  border: calc(22 * var(--u)) solid transparent;
  border-image: var(--plaque-stone) 22 fill / calc(22 * var(--u));
  background: none;
  font-family: var(--font-label); font-weight: 700; font-size: calc(38 * var(--u)); color: #2a1a10;
  image-rendering: pixelated;
}
.mp-node.cleared, .mp-node.open { border-image-source: var(--plaque-parch); }
.mp-node.next { border-image-source: var(--plaque-gold); animation: plaque-glow 1.1s steps(2) infinite; transform: scale(1.1); }
.mp-node.locked { cursor: not-allowed; color: #3a3632; }
.mp-node .mp-id { line-height: 1; letter-spacing: 0.04em; }
.mp-node .mp-node-stars { display: flex; }
.mp-node .mp-node-stars .mstar { width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin: 0 calc(-1 * var(--u)); }
.mp-node:not(:disabled):active { transform: translateY(calc(4 * var(--u))); }
.mp-node.next:not(:disabled):active { transform: scale(1.1) translateY(calc(4 * var(--u))); }
.mp-banner { pointer-events: none !important; image-rendering: pixelated; transform-origin: 50% 20%; animation: banner-wave 1.6s steps(4) infinite; }
.mp-poi { background: none; border: 0; padding: 0; cursor: pointer; }
/* a closed shop: its painted sign dimmed, with a small padlock */
.mp-poi.locked { background: rgba(20, 12, 6, 0.45); border-radius: calc(8 * var(--u)); }
.mp-poi.locked::after {
  content: ""; position: absolute; right: calc(-10 * var(--u)); bottom: calc(-12 * var(--u));
  width: calc(52 * var(--u)); height: calc(56 * var(--u)); background: var(--padlock) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
/* the unlock: the lock rattles, the open lock takes its place and drops away, the dimming
   lifts and the sign flares gold */
.mp-poi.locked::before {
  content: ""; position: absolute; right: calc(-10 * var(--u)); bottom: calc(-12 * var(--u)); opacity: 0;
  width: calc(64 * var(--u)); height: calc(60 * var(--u)); background: var(--padlock-open) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
.mp-poi.unlocking { animation: shop-unlock-sign 1.4s 0.75s both ease-out; }
.mp-poi.unlocking::after { animation: shop-lock-rattle 0.75s steps(1) both; }
.mp-poi.unlocking::before { animation: shop-lock-drop 1.3s 0.75s forwards; }   /* forwards only: hidden until the rattle ends */
@keyframes shop-lock-rattle {
  0% { transform: rotate(0); } 10% { transform: rotate(-14deg); } 20% { transform: rotate(12deg); } 30% { transform: rotate(0); }
  45% { transform: rotate(-16deg) translateY(calc(-4 * var(--u))); } 55% { transform: rotate(14deg); } 65% { transform: rotate(-8deg); } 75% { transform: rotate(0); }
  99% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes shop-lock-drop {
  0% { opacity: 1; transform: translateY(calc(-8 * var(--u))) scale(1.15); }
  20% { opacity: 1; transform: translateY(calc(-14 * var(--u))) rotate(-8deg) scale(1.1); }
  100% { opacity: 0; transform: translateY(calc(90 * var(--u))) rotate(28deg); }
}
@keyframes shop-unlock-sign {
  0% { background: rgba(20, 12, 6, 0.45); box-shadow: 0 0 0 0 rgba(255, 216, 106, 0); }
  25% { background: rgba(255, 230, 150, 0.45); box-shadow: 0 0 calc(40 * var(--u)) calc(14 * var(--u)) rgba(255, 216, 106, 0.85); }
  100% { background: rgba(255, 230, 150, 0); box-shadow: 0 0 0 0 rgba(255, 216, 106, 0); }
}
.mp-toast {
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-body); font-size: calc(30 * var(--u)); color: var(--cream);
  background: rgba(26, 14, 7, 0.86); box-shadow: 0 0 0 calc(4 * var(--u)) #d9a441;
  padding: 0 calc(20 * var(--u));
}
.mp-toast[hidden] { display: none; }
@keyframes plaque-glow {
  0%, 100% { filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(255, 214, 90, 0.7)); }
  50% { filter: drop-shadow(0 0 calc(22 * var(--u)) rgba(255, 230, 120, 0.95)) brightness(1.08); }
}
@keyframes banner-wave {
  0%, 100% { transform: skewY(0deg); }
  25% { transform: skewY(-2deg) scaleX(0.98); }
  50% { transform: skewY(0deg); }
  75% { transform: skewY(2deg) scaleX(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-node.next, .mp-banner { animation: none; }
}

/* the stage star is painted art: scale it smoothly, never let it spill out of its box */
img.star { image-rendering: auto !important; object-fit: contain; display: block; }

/* map stars: carved into the plaque, at the map's pixel scale. The empty socket is the
   background; an earned star sits in it, catches the light now and then, and a newly
   earned one drops in. */
.mstar { position: relative; display: block; flex: none; background: var(--mstar-empty) center / 100% 100% no-repeat; image-rendering: pixelated; }
.mstar img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.mstar:not(.on) img { visibility: hidden; }
.mstar.on::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 44%, rgba(255, 252, 225, 0.7) 50%, transparent 56%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: var(--mstar-gold) center / 100% 100% no-repeat; mask: var(--mstar-gold) center / 100% 100% no-repeat;
  animation: mstar-glint 5.5s linear var(--g, 0s) infinite;
}
.mstar.earn img { animation: mstar-drop 0.5s cubic-bezier(.3, 1.6, .5, 1) var(--delay, 0ms) both; }
.mstar.earn::after { animation-delay: calc(var(--delay, 0ms) + 600ms); }
@keyframes mstar-glint { 0% { background-position: 100% 0; } 12%, 100% { background-position: 0 0; } }
@keyframes mstar-drop {
  0% { transform: translateY(-90%) scale(1.8); opacity: 0; filter: brightness(2); }
  55% { opacity: 1; }
  100% { transform: none; opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mstar.on::after, .mstar.earn img { animation: none; }
}

/* the painted map keeps its own shape: on taller screens it sits centred, never stretched */
.map-view:has(.map-screen:not([hidden])) { min-height: calc(100svh - 24px); justify-content: center; }

/* Layering: every battle effect sits under the enemy card. The card's painted frame is
   repeated as its own image above the effects, with its live text above that. */
.battle-screen #overlay { z-index: 3; }
.battle-screen .enemy-card-art { z-index: 4; pointer-events: none; image-rendering: auto; }
.battle-screen #enemyPanel > * { z-index: 5; }
.battle-screen #enemyFloats, .battle-screen #enemyArmor { z-index: 5; }

/* ---- painted player HUD (assets/art/hud.png): the art supplies every frame; these rules
   only place the live values on it and strip the old drawn frames */
.battle-screen .hud-art { pointer-events: none; image-rendering: auto; }
.battle-screen .ov-bar.player-hp, .battle-screen .ov-bar.mana { background: none; border-radius: calc(10 * var(--u)); }
.battle-screen .ov-bar.player-hp .fill {
  background: var(--hud-hp-fill) 0 0 / calc(563 * var(--u)) 100% no-repeat;
  box-shadow: none; border-radius: calc(10 * var(--u));
}
.battle-screen .ov-bar.mana { border-radius: calc(8 * var(--u)); }
.battle-screen .ov-bar.mana .fill {
  background: var(--hud-mana-fill) 0 0 / calc(656 * var(--u)) 100% no-repeat;
  animation: none; box-shadow: none; border-radius: calc(8 * var(--u));
}
.battle-screen .ov-bar.player-hp .bar-text, .battle-screen .ov-bar.mana .bar-text { font-size: calc(30 * var(--u)); }
.battle-screen .ov-block { background: none; border: 0; }
.battle-screen .skill {
  border: 0; border-image: none; background: none;
  padding: calc(14 * var(--u)) calc(24 * var(--u)) calc(10 * var(--u));
  justify-content: flex-start; gap: calc(2 * var(--u)); color: #ead6aa;
}
.battle-screen .skill-name { color: #ead6aa; }
.battle-screen .skill .skill-desc { font-size: calc(27 * var(--u)); line-height: 1.08; }
.battle-screen .skill-desc { color: #d8c398; }
.battle-screen .skill:disabled { border-image: none; color: #a8987c; }
.battle-screen .skill:disabled .skill-name, .battle-screen .skill:disabled .skill-desc { color: #a8987c; }
.battle-screen .skill .cost, .battle-screen .skill:disabled .cost {
  top: calc(5 * var(--u)); right: calc(9 * var(--u)); width: calc(65 * var(--u)); height: calc(44 * var(--u));
  min-width: 0; padding: 0; display: grid; place-items: center;
  background: none; box-shadow: none; color: #f6e7c1; font-size: calc(26 * var(--u));
}
.battle-screen .skill.ready:not(:disabled) .cost { color: #9fd0ff; }
.battle-screen .ov-tool { border: 0; border-image: none; background: none; color: #f6e7c1; }

/* low HP: the screen edges pulse red with the heartbeat */
.battle-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(190, 10, 20, 0.45) 75%, rgba(150, 0, 10, 0.8) 100%);
  transition: opacity 0.4s;
}
.battle-screen.low-hp::after { opacity: 1; animation: low-hp 1.1s ease-in-out infinite; }
@keyframes low-hp { 0%, 100% { opacity: 0.55; } 18% { opacity: 1; } 36% { opacity: 0.7; } 50% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) { .battle-screen.low-hp::after { animation: none; } }

/* the move preview plate, fixed above the board so the dragging thumb never hides it */
.battle-screen .move-preview {
  z-index: 6; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: calc(26 * var(--u));
  width: fit-content; max-width: calc(1000 * var(--u)); margin: 0 auto; left: 0; right: 0;
  padding: 0 calc(26 * var(--u));
  background: #3a2412; border: calc(5 * var(--u)) solid #d9a441; box-shadow: 0 0 0 calc(5 * var(--u)) #1a0e07, 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.5);
  font-family: var(--font-label); font-weight: 700; font-size: calc(40 * var(--u));
  --o: calc(3 * var(--u));
  text-shadow: var(--o) 0 0 #1a0e07, calc(-1 * var(--o)) 0 0 #1a0e07, 0 var(--o) 0 #1a0e07, 0 calc(-1 * var(--o)) 0 #1a0e07;
}
.battle-screen .move-preview[hidden] { display: none; }
.battle-screen .mv-part { display: flex; align-items: center; gap: calc(8 * var(--u)); white-space: nowrap; }
.battle-screen .mv-part img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); image-rendering: pixelated; }

/* coach tips: the move-preview plate's wood and gold, with an arrow at what it explains */
:is(.battle-screen, .map-screen) .coach-tip {
  z-index: 7; height: auto; cursor: pointer;
  padding: calc(20 * var(--u)) calc(30 * var(--u)) calc(14 * var(--u));
  background: #3a2412; border: calc(5 * var(--u)) solid #d9a441;
  box-shadow: 0 0 0 calc(5 * var(--u)) #1a0e07, 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.6);
  color: #fff3d6; font-family: var(--font-body); font-size: calc(38 * var(--u)); line-height: 1.25; text-align: center;
}
:is(.battle-screen, .map-screen) .coach-tip[data-dir="down"] { transform: translateY(-100%); }
:is(.battle-screen, .map-screen) .coach-tip[hidden] { display: none; }
:is(.battle-screen, .map-screen) .coach-tip p { margin: 0; }
:is(.battle-screen, .map-screen) .coach-tip b { color: #ffd86a; }
:is(.battle-screen, .map-screen) .coach-close { display: block; margin-top: calc(8 * var(--u)); font-family: var(--font-label); font-size: calc(22 * var(--u)); color: #d9a441; opacity: 0.85; }
:is(.battle-screen, .map-screen) .coach-tip::before, :is(.battle-screen, .map-screen) .coach-tip::after {
  content: ""; position: absolute; left: calc(var(--ax) * var(--u)); width: 0; height: 0;
  border: solid transparent; transform: translateX(-50%);
}
:is(.battle-screen, .map-screen) .coach-tip[data-dir="up"]::before { bottom: 100%; border-width: 0 calc(26 * var(--u)) calc(26 * var(--u)); border-bottom-color: #d9a441; }
:is(.battle-screen, .map-screen) .coach-tip[data-dir="up"]::after { bottom: calc(100% - 7 * var(--u)); border-width: 0 calc(18 * var(--u)) calc(18 * var(--u)); border-bottom-color: #3a2412; }
:is(.battle-screen, .map-screen) .coach-tip[data-dir="down"]::before { top: 100%; border-width: calc(26 * var(--u)) calc(26 * var(--u)) 0; border-top-color: #d9a441; }
:is(.battle-screen, .map-screen) .coach-tip[data-dir="down"]::after { top: calc(100% - 7 * var(--u)); border-width: calc(18 * var(--u)) calc(18 * var(--u)) 0; border-top-color: #3a2412; }
:is(.battle-screen, .map-screen) .coach-tip.in { animation: coach-in 0.28s cubic-bezier(.2, 1.4, .4, 1); }
:is(.battle-screen, .map-screen) .coach-tip[data-dir="down"].in { animation-name: coach-in-down; }
@keyframes coach-in { from { opacity: 0; transform: translateY(calc(-14 * var(--u))) scale(0.96); } }
@keyframes coach-in-down { from { opacity: 0; transform: translateY(calc(-100% + 14 * var(--u))) scale(0.96); } }

/* Shop: full width, exactly like the map, so going from the map to the shop never
   changes the picture's width. The whole plate shows, uncropped. */
.shop-screen {
  --u: calc(100cqw / 1152);
  position: relative; width: 100%; margin-inline: auto;
  aspect-ratio: 1152 / 2064; container-type: inline-size; overflow: hidden; background: #0c1623;
}
.shop-screen .abs { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); margin: 0; }
.shop-screen .shop-plate, .shop-screen .shop-keeper, .shop-screen .shop-item, .shop-screen .shop-fx { image-rendering: pixelated; pointer-events: none; }
.shop-screen .shop-keeper-hit { background: none; border: 0; padding: 0; cursor: pointer; }
.shop-screen .shop-speech {
  display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--u)); text-align: center;
  font-family: var(--font-body); font-size: calc(36 * var(--u)); line-height: 1.2; color: #3b2416;
}
.shop-screen .shop-speech b { color: #7a2f12; }
.shop-screen .shop-speech small { font-family: var(--font-label); font-size: calc(26 * var(--u)); color: #8a5a2b; }
.shop-screen .shop-limit { color: #fff; background: #7a2f12; padding: 0 calc(8 * var(--u)); }
.shop-screen .shop-slot { background: none; border: 0; padding: 0; cursor: pointer; }
.shop-screen .shop-item { position: absolute; left: calc(var(--ix) * var(--u)); top: calc(var(--iy) * var(--u)); width: calc(var(--iw) * var(--u)); height: calc(var(--ih) * var(--u)); transition: opacity .2s, filter .2s; }
.shop-screen .shop-slot.picked { outline: calc(6 * var(--u)) solid #ffd86a; outline-offset: calc(-3 * var(--u)); box-shadow: 0 0 calc(24 * var(--u)) rgba(255, 216, 106, 0.55); }
.shop-screen .shop-slot.poor .shop-item { opacity: 0.55; }
.shop-screen .shop-slot.sold-out .shop-item { opacity: 0.25; filter: grayscale(1); }
.shop-screen .shop-slot.bought .shop-item { animation: shop-bought 0.45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes shop-bought { 40% { transform: scale(1.18) translateY(calc(-10 * var(--u))); } }
.shop-screen .shop-tag {
  position: absolute; right: calc(8 * var(--u)); top: calc(8 * var(--u));
  font-family: var(--font-label); font-size: calc(24 * var(--u)); color: #f6e7c1; text-transform: uppercase;
}
.shop-screen .shop-tag:not(:empty) { background: rgba(26, 14, 7, 0.85); padding: calc(2 * var(--u)) calc(8 * var(--u)); }
.shop-screen .shop-price {
  pointer-events: none; display: flex; align-items: center; justify-content: flex-end;
  font-family: var(--font-label); font-weight: 700; font-size: calc(36 * var(--u)); color: #f6e7c1;
  text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #1a0e07;
}
.shop-screen .shop-price.poor { color: #ff8a6a; }
.shop-screen .shop-leave {
  background: none; border: 0; cursor: pointer; color: #f6e7c1;
  font-family: var(--font-label); font-weight: 700; font-size: calc(44 * var(--u)); letter-spacing: 0.06em;
  text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #1a0e07;
}
.shop-screen .shop-gold {
  display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  background: #3a2412; border: calc(4 * var(--u)) solid #d9a441; box-shadow: 0 0 0 calc(4 * var(--u)) #1a0e07;
  font-family: var(--font-label); font-weight: 700; font-size: calc(36 * var(--u)); color: #ffd86a;
}
.shop-screen .shop-gold .coin { width: calc(44 * var(--u)); height: calc(44 * var(--u)); background: var(--icon-coin, radial-gradient(circle at 35% 35%, #fff3b0, #ffc93a 45%, #c27a12)) center / contain no-repeat; image-rendering: pixelated; }
.relics.bag em { font-style: normal; font-size: 0.8em; opacity: 0.75; }

/* Full-screen fit (fitScreen in js/game.js): the active painted screen fills the phone.
   Its view becomes a fixed full-screen layer; the code places the screen in pixels. */
body.fill { padding: 0; overflow: hidden; background: #0b0806; }
body.fill .game { max-width: none; }
body.fill .view.fill-view:not([hidden]) { position: fixed; inset: 0; overflow: hidden; display: block; min-height: 0; }
.fit-backdrop, .fit-bleed { position: absolute; pointer-events: none; }
.fit-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; filter: brightness(0.5) saturate(1.1); }
.fit-bleed { image-rendering: pixelated; }
body:not(.fill) .fit-backdrop, body:not(.fill) .fit-bleed { display: none; }

/* The shop is a panel over the live map: the map shows, dimmed, around it. */
.shop-view:not([hidden]) { position: fixed; inset: 0; z-index: 15; display: block; min-height: 0; overflow: hidden; background: rgba(12, 7, 4, 0.45); }
.shop-view .shop-screen { box-shadow: 0 0 0 2px #1a0e07, 0 12px 40px rgba(0, 0, 0, 0.7); }
.shop-view.opening { animation: shop-dim 0.25s ease-out; }
.shop-view.opening .shop-screen { animation: shop-pop 0.3s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes shop-dim { from { background: rgba(12, 7, 4, 0); } }
@keyframes shop-pop { from { opacity: 0; transform: translateY(24px) scale(0.96); } }

/* Stage card: the battle card's painted brass frame, a window onto the stage with its
   enemy, and wooden buttons from the shop's Leave bar. */
.sheet.stage-card, .sheet.parch {
  position: relative; isolation: isolate; background: none; border: 0; border-radius: 0;
  padding: 32px 36px 36px; box-shadow: none; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
}
.sheet.stage-card { gap: 6px; }
/* the paper: texture and stains right out to the brass, with a worn ragged rim under it */
.sheet.stage-card::before, .sheet.parch::before {
  content: ""; position: absolute; inset: 13px; z-index: -1; pointer-events: none;
  background: var(--parch-stain) 8% 62% no-repeat, var(--parch-stain) 88% 30% no-repeat, var(--parch-tile) 0 0 repeat, #eacc91;
  background-clip: border-box; border: 24px solid transparent;
  border-image: var(--parch-edge) 24 / 24px round; image-rendering: pixelated;
}
/* the brass frame on top, its inner parchment band cut away so the paper shows through */
.sheet.stage-card::after, .sheet.parch::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border: 22px solid transparent; border-image: var(--card-frame) 48 / 22px stretch; image-rendering: pixelated;
}
.stage-card .foe-window {
  position: relative; width: 100%; margin: 6px 0 4px; overflow: hidden; background-repeat: no-repeat;
  image-rendering: pixelated; border: 4px solid #d9a441; box-shadow: 0 0 0 3px #3a2412, inset 0 0 0 2px #1a0e07;
}
.stage-card .foe-window img { position: absolute; image-rendering: pixelated; height: auto; }
.stage-card .foe-note { margin: 4px 0 2px; text-align: center; color: #5a3a1c; }
.stage-card .result-actions .btn {
  background: none; border: 12px solid transparent; border-image: var(--frame-btnWood) 12 fill / 12px; border-radius: 0;
  box-shadow: none; color: #f6e7c1; text-shadow: 2px 2px 0 #1a0e07; image-rendering: pixelated; min-width: 120px;
}
.stage-card .result-actions .btn.primary { color: #ffd86a; filter: brightness(1.15); }

.title-screen { position: relative; overflow: hidden; background: var(--title-bg) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.title-screen .abs { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); margin: 0; }
/* a patch of the screen's own painting (--patch-src), taken from --sx/--sy, over a painted purse icon,
   with the PixelLab icon on top (--iw in screen units) */
.purse-patch { position: absolute; display: grid; place-items: center; pointer-events: none;
  background: var(--patch-src) calc(-1 * var(--sx) * var(--u)) calc(-1 * var(--sy) * var(--u)) / calc(var(--pw) * var(--u)) auto no-repeat; }
.purse-patch img { width: calc(var(--iw) * var(--u)); height: calc(var(--iw) * var(--u)); image-rendering: pixelated; }
.map-screen .purse-patch { --pw: 1320; }
.camp-screen .purse-patch { --pw: 851; --patch-src: var(--title-bg); }
#stamValP, #campStam { white-space: nowrap; }
.stage-card .stage-cost { margin: 2px 0 6px; text-align: center; color: #5a3a1c; font-size: 13px; }
.stage-card .stage-cost b { color: #7a2f12; }
.title-screen #titleFx { pointer-events: none; image-rendering: pixelated; }
.title-screen .title-btn { background: none; border: 0; padding: 0; cursor: pointer; color: transparent; font-size: 0; border-radius: calc(16 * var(--u)); }
.title-screen .title-btn:active { background: rgba(255, 240, 200, 0.12); }
.title-screen .title-btn:focus-visible { outline: 3px solid #ffd86a; }
.title-screen .title-toast {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: #3a2412; border: calc(5 * var(--u)) solid #d9a441; box-shadow: 0 0 0 calc(4 * var(--u)) #1a0e07;
  color: #fff3d6; font-family: var(--font-body); font-size: calc(28 * var(--u));
}

/* menu on parchment: scrolls inside the frame; frame and paper stay put */
.sheet.parch.menu-sheet { overflow: hidden; display: flex; flex-direction: column; max-height: calc(100% - 8px); padding: 30px 26px 30px 34px; }
.sheet.parch.menu-sheet > * { flex: none; }
.sheet.parch.menu-sheet #menuClose { margin: 10px auto 0; display: block; }
.menu-sheet.parch .menu-scroll { overflow-y: auto; flex: 1 1 auto; padding-right: 8px; }
.menu-sheet.parch .btn { background: none; border: 12px solid transparent; border-image: var(--frame-btnWood) 12 fill / 12px; border-radius: 0; box-shadow: none; color: #f6e7c1; text-shadow: 2px 2px 0 #1a0e07; image-rendering: pixelated; }
.gem-key img[data-board-icon] { width: 36px; height: 36px; image-rendering: pixelated; }
.gem-key li.later { opacity: 0.6; }
.gem-key li.later span::after { content: " (later areas)"; font-style: italic; color: #8a5a2b; }

/* ---- summoning */
.summon-hit .summon-tag {
  position: absolute; left: 50%; bottom: calc(-30 * var(--u)); transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-label); font-size: calc(22 * var(--u)); color: #f6e7c1; text-shadow: 2px 2px 0 #1a0e07;
  background: #4a2a7a; border: calc(3 * var(--u)) solid #c8b0ff; padding: 0 calc(10 * var(--u)); opacity: 0; transition: opacity .3s;
}
.summon-hit.ready .summon-tag { opacity: 1; animation: summon-tag 1.6s ease-in-out infinite; }
@keyframes summon-tag { 50% { box-shadow: 0 0 calc(18 * var(--u)) #b98cff; } }
.summon-sheet { width: min(420px, 100%); }
.summon-stage { position: relative; display: grid; justify-items: center; gap: 6px; min-height: 230px; padding: 8px 0; }
.summon-orb img { width: 120px; height: 120px; image-rendering: pixelated; filter: drop-shadow(0 0 14px #b98cff); animation: orb-bob 2.4s ease-in-out infinite; }
@keyframes orb-bob { 50% { transform: translateY(-8px); } }
.summon-orb.charging img { animation: orb-charge 1.1s steps(12) forwards; }
@keyframes orb-charge {
  0% { transform: none; } 20% { transform: translateX(-4px) rotate(-6deg); } 40% { transform: translateX(4px) rotate(6deg) scale(1.08); }
  60% { transform: translateX(-5px) rotate(-8deg) scale(1.15); filter: drop-shadow(0 0 30px #e0c8ff) brightness(1.6); }
  85% { transform: scale(1.35); filter: drop-shadow(0 0 60px #fff) brightness(3); }
  100% { transform: scale(0.2); opacity: 0; filter: brightness(4); }
}
.summon-line { margin: 0; text-align: center; color: #3b2416; }
.summon-skill { margin: 0; text-align: center; font-size: 14px; color: #5a3a1c; }
.summon-purse { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0; color: #4a2a7a; font-family: var(--font-label); font-size: 13px; }
.summon-purse img { width: 18px; height: 18px; image-rendering: pixelated; }
.summon-hint { text-align: center; font-size: 13px; color: #8a5a2b; margin: 6px 0 0; }
.summon-burst { position: absolute; top: 4px; left: 50%; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 240, 200, 0.55) 0 8deg, transparent 8deg 22deg); animation: burst-spin 6s linear infinite, burst-in .5s ease-out; }
.summon-burst.r4 { background: repeating-conic-gradient(rgba(200, 160, 255, 0.6) 0 8deg, transparent 8deg 22deg); }
.summon-burst.r5 { background: repeating-conic-gradient(rgba(255, 215, 90, 0.75) 0 8deg, transparent 8deg 18deg); }
@keyframes burst-spin { to { transform: rotate(360deg); } }
@keyframes burst-in { from { opacity: 0; transform: scale(0.3); } }
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.hero-card {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 1px; padding: 8px 4px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint, #6a5a4a) 35%, #2a1a0e), #1e130a);
  border: 3px solid #8a6a3a; box-shadow: 0 0 0 2px #1a0e07; color: #f6e7c1; image-rendering: pixelated;
}
.hero-card.r4 { border-color: #b98cff; }
.hero-card.r5 { border-color: #ffd86a; box-shadow: 0 0 0 2px #1a0e07, 0 0 12px rgba(255, 216, 106, 0.6); }
.hero-card .hero-gem { width: 44px; height: 44px; image-rendering: pixelated; }
.hero-card .hero-name { font-family: var(--font-label); font-size: 13px; }
.hero-card .hero-title { font-size: 10px; opacity: 0.8; text-align: center; line-height: 1.1; }
.hero-card .hero-stars { font-size: 11px; color: #ffd86a; letter-spacing: 1px; }
.hero-card.unknown { background: #1e130a; border-color: #4a3a2a; color: #6a5a4a; min-height: 92px; align-content: center; }
.hero-card.unknown .hero-stars { color: #6a5a4a; }
.hero-card .hero-q { font-family: var(--font-title); font-size: 34px; line-height: 1; }
.hero-card.reveal { width: 150px; padding: 14px 8px 10px; z-index: 1; animation: card-flip .6s cubic-bezier(.2, 1.4, .4, 1); }
.hero-card.reveal .hero-gem { width: 72px; height: 72px; }
.hero-card.reveal .hero-name { font-size: 18px; }
.hero-card.reveal .hero-title { font-size: 12px; }
.hero-card.reveal .hero-stars { font-size: 18px; }
@keyframes card-flip { from { transform: rotateY(90deg) scale(0.6); opacity: 0; } }

/* the instant splash while the game loads */
.splash { position: fixed; inset: 0; z-index: 50; background: #0b0806; display: grid; place-items: center; transition: opacity .35s; }
.splash img { width: min(100vw, calc(100dvh * 851 / 1849)); height: auto; filter: blur(3px) brightness(0.85); }
.splash-bar { position: absolute; left: 50%; bottom: 12%; width: 40vw; max-width: 180px; height: 8px; transform: translateX(-50%); background: #2a1708; border: 2px solid #d9a441; box-shadow: 0 0 0 2px #1a0e07; overflow: hidden; }
.splash-bar span { display: block; width: 40%; height: 100%; background: #ffd86a; animation: splash-run 1.1s ease-in-out infinite; }
@keyframes splash-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.splash.gone { opacity: 0; pointer-events: none; }

.camp-screen .camp-text {
  display: flex; flex-direction: column; justify-content: center; gap: calc(12 * var(--u)); padding: 0 calc(40 * var(--u));
  text-align: center; color: #3b2416; font-family: var(--font-body); font-size: calc(30 * var(--u)); line-height: 1.25;
}
.camp-screen .camp-text b { color: #7a2f12; font-weight: 600; }
.camp-screen .camp-btn {
  background: none; border: 0; cursor: pointer; color: #f6e7c1; text-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 #1a0e07;
  font-family: var(--font-label); font-weight: 700; letter-spacing: 0.08em;
}
.camp-screen .camp-rest { font-size: calc(58 * var(--u)); }
.camp-screen .camp-leave { font-size: calc(40 * var(--u)); }
.camp-screen .camp-rest:disabled { color: #b9a58a; text-shadow: none; cursor: default; filter: saturate(0.6); }
.camp-screen .camp-btn:not(:disabled):active { transform: translateY(calc(3 * var(--u))); }
.camp-screen .camp-val { display: flex; align-items: center; font-family: var(--font-label); font-weight: 700; font-size: calc(28 * var(--purse-k, 1) * var(--u)); color: #2a1a10; }
.camp-screen .camp-menu { background: none; border: 0; padding: 0; cursor: pointer; }
.camp-screen #campFx { pointer-events: none; image-rendering: pixelated; }

/* ---- reward chest (CS:GO-style case opening) over the map */
.modal.chest-modal { background: rgba(12, 7, 4, 0.55); }
.chest-panel { position: relative; width: var(--chest-w, min(400px, 100%)); display: grid; justify-items: center; gap: 10px; }
.chest-panel .ribbon { margin: 0; }
.chest-stage { width: 100%; display: grid; justify-items: center; gap: 10px; min-height: 260px; align-content: center; }
.chest-btn { background: none; border: 0; padding: 0; cursor: pointer; animation: chest-bob 1.6s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(255, 210, 100, 0.55)); }
.chest-btn img { width: 288px; height: auto; image-rendering: pixelated; display: block; }
@keyframes chest-bob { 50% { transform: translateY(-8px) scale(1.03); } }
.chest-btn.shaking { animation: chest-shake 0.65s steps(10) forwards; }
@keyframes chest-shake { 0%,100% { transform: none; } 20% { transform: rotate(-8deg) translateX(-6px); } 40% { transform: rotate(8deg) translateX(6px); } 60% { transform: rotate(-10deg) scale(1.08); } 80% { transform: rotate(10deg) scale(1.12); } }
.chest-btn.burst { animation: chest-burst 0.5s ease-out forwards; filter: drop-shadow(0 0 40px #fff2b0) brightness(1.3); }
@keyframes chest-burst { 0% { transform: scale(1.15); } 100% { transform: scale(1.3); opacity: 0; } }
.chest-hint { margin: 0; color: #f6e7c1; font-family: var(--font-label); font-size: 13px; text-shadow: 2px 2px 0 #1a0e07; text-align: center; }
.reel { position: relative; width: 100%; height: 186px; image-rendering: pixelated; }
/* the prize window: its edges sit under the middle of the brass bar (the frame art's bar runs along the
   inner side of its 18 px border), so the brass covers them and nothing shows outside the frame */
.reel-window { position: absolute; left: 14px; top: 14px; right: 15px; bottom: 13px; overflow: hidden;
  background: linear-gradient(#1c130c, #2a1a0f); box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.85), 0 8px 14px rgba(0, 0, 0, 0.6); }
.reel-strip { position: absolute; left: 0; top: 23px; transform: translateX(0); display: flex; gap: 6px; padding-left: 0; will-change: transform; }
/* the brass frame (assets/brass-frame/, crisp pixel art at its real 18 px edge), drawn as a layer
   above the strip so prizes slide under the brass instead of being cut off at its edge; painted on a
   canvas (paintBrass in game.js), since iPhone Safari would not draw it as a border-image here */
.reel-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; transform: translateZ(0); }
.reel-mark { z-index: 3; }
.reel-mark { position: absolute; left: 50%; top: 18px; bottom: 18px; width: 4px; margin-left: -2px; background: linear-gradient(90deg, #8a5a1a, #ffe08a 50%, #8a5a1a); box-shadow: 0 0 0 1px #1a0e07, 0 0 10px rgba(255, 216, 106, 0.8); }
.reel-mark::before, .reel-mark::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: 9px solid transparent; }
.reel-mark::before { top: -2px; border-top-color: #ffd86a; filter: drop-shadow(0 2px 0 #1a0e07); }
.reel-mark::after { bottom: -2px; border-bottom-color: #ffd86a; filter: drop-shadow(0 -2px 0 #1a0e07); }
.loot-card { flex: none; width: 104px; height: 112px; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 4px;
  border: 12px solid transparent; border-image: var(--brass-12) 12 / 12px stretch;
  background: linear-gradient(180deg, #2e2116, #1c130c 55%, color-mix(in srgb, var(--rar) 45%, #1c130c)) padding-box; position: relative; }
.loot-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--rar); }
.loot-card img { width: 50px; height: 50px; image-rendering: pixelated; object-fit: contain; }
.loot-card span { font-family: var(--font-label); font-size: 10px; color: #f6e7c1; text-align: center; line-height: 1.1; }
.loot-card.won { filter: drop-shadow(0 0 10px var(--rar)) brightness(1.15); }
.loot-result { display: grid; justify-items: center; gap: 6px; animation: loot-pop 0.5s cubic-bezier(.2, 1.5, .4, 1); }
.loot-result p { margin: 0; color: #f6e7c1; text-shadow: 2px 2px 0 #1a0e07; text-align: center; }
.loot-card.big { width: 170px; height: 184px; border: 18px solid transparent; border-image: var(--brass-18) 18 / 18px stretch;
  background: linear-gradient(180deg, #2e2116, #1c130c 50%, color-mix(in srgb, var(--rar) 50%, #1c130c)) padding-box; box-shadow: none; filter: drop-shadow(0 0 18px var(--rar)); image-rendering: auto; }
.chest-panel .result-actions .btn {
  background: none; border: 12px solid transparent; border-image: var(--frame-btnWood) 12 fill / 12px; border-radius: 0;
  box-shadow: none; color: #ffd86a; text-shadow: 2px 2px 0 #1a0e07; image-rendering: pixelated; min-width: 150px;
}
.loot-card.big { position: relative; }
.loot-card.big img { width: 80px; height: 80px; }
.loot-card.big span { font-size: 13px; }
.loot-result.r-gold .loot-card.big, .loot-result.r-red .loot-card.big { animation: loot-glow 1.2s ease-in-out infinite; }
@keyframes loot-glow { 50% { filter: drop-shadow(0 0 34px var(--rar)) brightness(1.1); } }
@keyframes loot-pop { from { transform: scale(0.4); opacity: 0; } }

/* installed as an app (home screen): clear the notch and home bar, no rubber-band scroll */
@media (display-mode: standalone) {
  html, body { overscroll-behavior: none; }
  .game { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Fit the battle screen to the phone: it scales to whichever runs out first, the width
   or the height left after the page padding and safe areas, and sits centred, so no
   phone shape crops or scrolls it. */
.battle-view .battle-screen {
  --avail-h: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  width: min(100%, calc(var(--avail-h) * 1320 / 2480));
  margin-inline: auto;
}
.battle-view:not([hidden]) { justify-content: center; }
@media (display-mode: standalone) {
  .battle-view:not([hidden]) { min-height: var(--avail-h-page, calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); }
}

/* ---- campfire kitchen: ingredients from battles, cooked into meals (openKitchen in game.js) */
.kitchen .kitchen-note { margin: 0 0 6px; text-align: center; font-size: 14px; color: #5a3a1c; }
.kitchen h3 { font-family: var(--font-title); font-weight: 400; font-size: 22px; color: var(--crimson); margin: 10px 0 4px; line-height: 1; }
.kitchen .pantry { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.kitchen .pantry li { display: flex; align-items: center; gap: 4px; }
.kitchen .pantry li.none { color: #7a5a3a; font-style: italic; }
.kitchen img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.kitchen .recipes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kitchen .recipe { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 8px;
  background: rgba(90, 58, 28, 0.08); border: 2px solid rgba(90, 58, 28, 0.25); }
.kitchen .recipe.ok { border-color: #b8862b; background: rgba(255, 216, 106, 0.18); }
.kitchen .recipe.packed { border-color: #7a2f12; }
/* the meal's painted icon at its own 48 px, what it needs underneath at half size */
.kitchen .recipe-pic { display: grid; justify-items: center; gap: 2px; width: 52px; }
.kitchen img.meal-ic { width: 48px; height: 48px; }
.kitchen .recipe-ings img { width: 24px; height: 24px; }
.kitchen .recipe-ings { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.kitchen .ing { position: relative; opacity: 0.4; }
.kitchen .ing.have { opacity: 1; }
.kitchen .ing i { position: absolute; right: -2px; bottom: -4px; font-style: normal; font-size: 11px; font-weight: 700; color: #3a2210; text-shadow: 1px 1px 0 #f6e7c1; }
.kitchen .recipe-text { display: grid; font-size: 13px; line-height: 1.25; color: #3a2210; }
.kitchen .recipe-text b { font-size: 14px; color: #7a2f12; }
.kitchen .recipe-text em { font-style: normal; font-weight: 700; color: #3a2210; }
.kitchen .recipe-text small { font-size: 11px; color: #7a5a3a; }
.kitchen .recipe-btns { display: grid; gap: 4px; }
.kitchen .recipe-btns .btn { min-width: 64px; padding: 2px 6px; font-size: 12px; }
.chip.ing-chip img { width: 18px; height: 18px; object-fit: contain; }
.chip.stam-chip img { width: 14px; height: 14px; }

/* the bag lists items under their type (single-use, hero enhancement, ingredient) and meals */
.bag .bag-type { display: block; flex-basis: 100%; list-style: none; border: 0; border-image: none; background: none; padding: 0; font-size: 12px; color: #7a5a3a; margin-top: 4px; }
.bag .bag-type b { color: var(--crimson); font-size: 13px; }
.loot-result .loot-type { font-style: normal; opacity: 0.8; }

/* ---- inventory: a slot grid with a tab per item type (openInventory in game.js) */
.inv-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 2px 0 8px; }
/* the painted tab plates (assets/ui-frames/tabOff.png, tabOn.png): a 6 px 9-slice; border + padding
   add up to the old 2 px border + 4 px / 8 px padding, so every tab keeps its size */
.inv-tab { font-family: var(--font-label); font-size: 12px; font-weight: 700; padding: 0 4px; cursor: pointer;
  color: #5a3a1c; background: none; border: 6px solid transparent; border-image: var(--tab-off) 6 fill / 6px; image-rendering: pixelated; }
.inv-tab.on { color: #f6e7c1; text-shadow: 1px 1px 0 #3a1608; border-image-source: var(--tab-on); }
.inventory .inv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 6px 8px 0; }
.inventory .inv-slot { position: relative; aspect-ratio: 1; min-width: 0; width: 100%; display: grid; place-items: center; padding: 0; cursor: pointer; overflow: visible;
  border: 12px solid transparent; border-image: var(--brass-12) 12 / 12px stretch; image-rendering: pixelated;
  background: linear-gradient(180deg, #2e2116, #1c130c) padding-box; }
.inventory .inv-slot.empty { cursor: default; opacity: 0.55; }
.inventory .inv-slot img { width: 100%; height: 100%; min-width: 0; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.inventory .inv-slot b { position: absolute; right: -6px; bottom: -8px; font-family: var(--font-label); font-size: 12px; color: #f6e7c1; text-shadow: 1px 1px 0 #1a0e07, -1px -1px 0 #1a0e07; }
.inventory .inv-slot.picked { filter: drop-shadow(0 0 6px #ffd86a) brightness(1.15); }
.inventory .inv-slot.left img { opacity: 0.35; }
.inventory .inv-slot.packed::after { content: "Packed"; position: absolute; left: -8px; right: -8px; top: -10px; text-align: center;
  font-family: var(--font-label); font-size: 9px; color: #ffd86a; text-shadow: 1px 1px 0 #1a0e07; }
.inventory .inv-detail { min-height: 96px; margin-top: 8px; padding-top: 6px; border-top: 2px solid rgba(90, 58, 28, 0.3); color: #3a2210; }
.inventory .inv-name { display: flex; align-items: center; gap: 8px; margin: 0; }
.inventory .inv-name img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.inventory .inv-name span { display: grid; font-size: 14px; }
.inventory .inv-name b { color: #7a2f12; }
.inventory .inv-name small { font-size: 11px; color: #7a5a3a; }
.inventory .inv-desc { margin: 4px 0 2px; font-size: 13px; }
.inventory .inv-from { margin: 0 0 6px; font-size: 11px; color: #7a5a3a; }
.inventory .inv-hint { margin: 6px 0; text-align: center; font-size: 13px; color: #7a5a3a; }
.inventory .inv-detail .btn { display: block; margin: 0 auto; }

/* ---- profile: level, rank, achievements, titles, pictures (the "profile" section in game.js) */
.avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; padding: 7px; image-rendering: pixelated; }
/* the dark backing stops under the brass bar (the frame art's bar runs along the inside of its border) */
.avatar::before { content: ""; position: absolute; inset: 6px; background: linear-gradient(180deg, #2e2116, #1c130c); }
.avatar img { position: relative; }
.avatar.big::before { inset: 9px; }
.avatar.mini::before { inset: 4px; }
.avatar::after { content: ""; position: absolute; inset: 0; border: 12px solid transparent; border-image: var(--brass-12) 12 / 12px stretch; pointer-events: none; }
.avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.avatar.big { width: 84px; height: 84px; padding: 9px; }
.avatar.big::after { border-width: 18px; border-image: var(--brass-18) 18 / 18px stretch; }
.avatar.mini { width: 28px; height: 28px; padding: 0; }
/* the frame's metal follows your rank: the painted brass, recoloured */
.avatar.metal-bronze::after { filter: sepia(0.6) saturate(0.8) brightness(0.8) hue-rotate(-12deg); }
.avatar.metal-silver::after { filter: grayscale(1) brightness(1.35) contrast(1.1); }
.avatar.metal-gold::after { filter: saturate(1.6) brightness(1.2); }
.avatar.metal-ruby::after { filter: hue-rotate(-40deg) saturate(2) brightness(1.05); }
.avatar.metal-sapphire::after { filter: hue-rotate(170deg) saturate(1.6) brightness(1.15); }
.avatar.metal-amethyst::after { filter: hue-rotate(230deg) saturate(1.7) brightness(1.15); }
/* the painted bar (assets/ui-frames/barEmpty.png, barFill.png): the fill lies over the empty bar with the same
   rim; its right 15 px are the leading end with the sparkle. Both ends need 18 px, so an empty bar shows no fill. */
.xp-bar { display: block; height: 11px; margin: 3px 0; background: none; border-image: var(--bar-empty) 2 3 fill / 2px 3px; image-rendering: pixelated; }
.xp-bar i { display: block; height: 100%; min-width: 18px; border-image: var(--bar-fill) 2 15 2 3 fill / 2px 15px 2px 3px; image-rendering: pixelated; }
.xp-bar i[style*="width:0%"] { display: none; }
.profile-card { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 6px 8px; cursor: pointer; text-align: left;
  background: rgba(90, 58, 28, 0.1); border: 2px solid rgba(90, 58, 28, 0.35); font: inherit; color: #3a2210; }
.profile-card .pc-text { display: grid; flex: 1; min-width: 0; }
.profile-card b { font-size: 15px; color: #7a2f12; }
.profile-card em, .profile .prof-title { font-style: normal; font-size: 12px; color: #8a5a1a; }
.pc-level { font-family: var(--font-label); font-size: 11px; font-weight: 700; color: #5a3a1c; }
.xp-gain { margin: 6px 0 2px; text-align: center; font-size: 13px; color: #3a2210; }
.xp-gain p { margin: 2px 0; }
.xp-gain em { font-style: normal; color: #7a2f12; font-weight: 700; }
.xp-gain .ach-line b { color: #7a2f12; }
.profile .prof-head { display: flex; gap: 12px; align-items: center; }
.profile .prof-head > div { flex: 1; min-width: 0; }
.profile .prof-name { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #7a5a3a; }
.profile .prof-name input { flex: 1; min-width: 0; font: inherit; font-size: 15px; color: #3a2210; background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(90, 58, 28, 0.35); padding: 2px 6px; }
.profile .prof-title { margin: 2px 0; }
.profile .prof-next, .profile .prof-sub { margin: 2px 0; font-size: 12px; color: #7a5a3a; }
.profile h3 { font-family: var(--font-title); font-weight: 400; font-size: 22px; color: var(--crimson); margin: 10px 0 4px; line-height: 1; }
.profile .prof-stats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-size: 12px; }
.profile .prof-stats li { display: flex; justify-content: space-between; border-bottom: 1px dotted rgba(90, 58, 28, 0.35); }
.profile .prof-ranks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 12px; text-align: center; }
.profile .prof-ranks li { display: grid; justify-items: center; align-content: start; opacity: 0.45; }
.profile .prof-ranks li.got { opacity: 1; }
.profile .prof-ranks small { font-size: 10px; color: #7a5a3a; }
.profile .ach-list, .profile .title-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.profile .ach-list li { display: flex; gap: 8px; align-items: center; padding: 5px 8px; background: rgba(90, 58, 28, 0.08); border: 2px solid rgba(90, 58, 28, 0.25); }
.profile .ach-list li.got { border-color: #b8862b; background: rgba(255, 216, 106, 0.18); }
.profile .ach-text { display: grid; flex: 1; font-size: 12px; line-height: 1.25; }
.profile .ach-text b { font-size: 14px; color: #7a2f12; }
.profile .ach-text small { font-size: 10px; color: #7a5a3a; }
.profile .ach-prog { width: 70px; text-align: right; font-family: var(--font-label); font-size: 11px; font-weight: 700; color: #5a3a1c; }
.profile .title-list button { display: grid; width: 100%; text-align: left; padding: 5px 8px; font: inherit; cursor: pointer; color: #3a2210;
  background: rgba(90, 58, 28, 0.08); border: 2px solid rgba(90, 58, 28, 0.25); }
.profile .title-list button:disabled { cursor: default; opacity: 0.55; }
.profile .title-list b { font-size: 14px; color: #7a2f12; }
.profile .title-list small { font-size: 11px; color: #7a5a3a; }
.profile .title-list li.on button { border-color: #7a2f12; background: rgba(255, 216, 106, 0.25); }
.profile .pic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.profile .pic { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; font: inherit; cursor: pointer; text-align: center; color: #3a2210;
  background: rgba(90, 58, 28, 0.08); border: 2px solid rgba(90, 58, 28, 0.25); }
.profile .pic:disabled { cursor: default; }
.profile .pic:disabled .avatar img { filter: grayscale(1) brightness(0.5) contrast(0.8) opacity(0.7); }   /* a dim silhouette, not a black square */
.profile .pic.on { border-color: #7a2f12; background: rgba(255, 216, 106, 0.25); }
.profile .pic b { font-size: 12px; color: #7a2f12; }
.profile .pic small { font-size: 10px; color: #7a5a3a; line-height: 1.2; }
.celebrate { text-align: center; }
.celebrate .level-badge { display: grid; justify-items: center; margin: 8px auto; color: #7a2f12; font-family: var(--font-title); }
.celebrate .level-badge span { font-size: 20px; }
.celebrate .level-badge b { font-size: 64px; line-height: 1; color: #b8301e; text-shadow: 2px 2px 0 #3a1608; }
.celebrate .celebrate-rank { margin: 4px 0; color: #3a2210; }
.celebrate .celebrate-ach { display: grid; gap: 2px; margin: 10px 0; color: #3a2210; }
.celebrate .celebrate-ach b { font-size: 20px; color: #7a2f12; }
.celebrate-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; justify-items: center; font-size: 14px; color: #3a2210; }
.celebrate-list li { display: flex; align-items: center; gap: 6px; }
.celebrate-list img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.celebrate-list .avatar-li img { width: 36px; height: 36px; }
.celebrate-list .unlock b { color: #7a2f12; }

/* ---- prestige: the tier emblem on your picture, the Prestige tab and the boon picker */
.prestige-badge { position: absolute; right: -6px; bottom: -6px; z-index: 1; min-width: 20px; padding: 1px 4px; font-style: normal; text-align: center;
  font-family: var(--font-title); font-size: 13px; line-height: 1.2; color: #fff6d8; background: #7a2f12; border: 2px solid #ffd86a;
  box-shadow: 0 0 0 1px #1a0e07, 0 0 8px rgba(255, 216, 106, 0.6); }
.avatar.big .prestige-badge { font-size: 17px; right: -8px; bottom: -8px; }
/* the painted tier emblems (assets/prestige/), 24 px art: 1x beside text, on the avatar's corner, 2x on the big avatar */
.p-emblem { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; margin-right: 4px; }
.p-emblem.next { opacity: 0.6; }
.profile .prestige-tier .p-emblem { margin-right: 6px; vertical-align: -3px; }
.profile .prestige-tier { white-space: nowrap; }
.p-emblem.on-avatar { position: absolute; right: -8px; bottom: -8px; z-index: 1; margin: 0; filter: drop-shadow(0 1px 0 #1a0e07); }
.avatar.big .p-emblem.on-avatar { width: 48px; height: 48px; right: -16px; bottom: -16px; }
.prestige-badge.p4, .prestige-badge.p5, .prestige-badge.p6 { background: #2f4f9a; }
.prestige-badge.p7, .prestige-badge.p8, .prestige-badge.p9 { background: #5a2f8a; }
.prestige-badge.p10 { background: linear-gradient(135deg, #b8301e, #e0a52a, #5a2f8a); }
.profile .prestige-head { display: flex; gap: 24px; align-items: flex-start; }
.profile .prestige-head > div { flex: 1; min-width: 0; }
.profile .prestige-tier { margin: 0 0 4px; font-family: var(--font-title); font-size: 26px; color: #b8301e; line-height: 1; }
.profile .prestige-head .btn { margin-top: 6px; }
.profile .boon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.profile .boon-list li { display: grid; grid-template-columns: 1fr auto; padding: 5px 8px; font-size: 12px; color: #3a2210;
  background: rgba(255, 216, 106, 0.18); border: 2px solid #b8862b; }
.profile .boon-list li b { grid-column: 1; font-size: 14px; color: #7a2f12; }
.profile .boon-list li span { grid-column: 1; }
.profile .boon-list li small { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-label); font-weight: 700; color: #5a3a1c; }
.profile .boon-list.all li { background: rgba(90, 58, 28, 0.08); border-color: rgba(90, 58, 28, 0.25); }
.profile .boon-list.all li.got { border-color: #b8862b; }
.profile .boon-pick { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.profile .boon-pick button { display: grid; width: 100%; text-align: left; padding: 7px 10px; font: inherit; cursor: pointer; color: #3a2210;
  background: rgba(90, 58, 28, 0.08); border: 2px solid rgba(90, 58, 28, 0.3); }
.profile .boon-pick button b { font-size: 15px; color: #7a2f12; }
.profile .boon-pick button span { font-size: 12px; }
.profile .boon-pick button.on { border-color: #7a2f12; background: rgba(255, 216, 106, 0.3); box-shadow: 0 0 0 2px #ffd86a inset; }
.profile .boon-pick button:disabled { opacity: 0.5; cursor: default; }
.celebrate .prestige-show { display: grid; place-items: center; margin: 10px 0; }

/* ---- prestige titles: each tier has its own colours; tier X shimmers through every gem colour */
.ptitle { font-weight: 700; }
.ptitle.pt1 { color: #9a5a2a; }
.ptitle.pt2 { color: #6f7f8f; text-shadow: 0 0 1px #fff; }
.ptitle.pt3 { color: #2f6fb8; }
.ptitle.pt4 { color: #1f8a7a; }
.ptitle.pt5 { color: #c8901a; text-shadow: 0 0 4px rgba(255, 216, 106, 0.7); }
.ptitle.pt6 { color: #5a2f8a; text-shadow: 0 0 4px rgba(150, 90, 220, 0.5); }
.ptitle.pt7 { color: #b8301e; text-shadow: 0 0 4px rgba(255, 120, 60, 0.6); }
.ptitle.pt8, .ptitle.pt9, .ptitle.pt10 { -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 0 0 #2a1208) drop-shadow(-1px 0 0 #2a1208) drop-shadow(0 1px 0 #2a1208) drop-shadow(0 -1px 0 #2a1208); }
.ptitle.pt8 { background-image: linear-gradient(90deg, #e07a86, #ffd08a, #e07a86); }
.ptitle.pt9 { background-image: linear-gradient(90deg, #ff4a2a, #ff9b2b, #ffe24d, #ff9b2b, #ff4a2a); background-size: 200% 100%; animation: ptitle-flow 2.4s linear infinite; }
.ptitle.pt10 { background-image: linear-gradient(90deg, #ff5a4a, #ffd86a, #7ae07a, #6fb6ff, #c08aff, #ff5a4a); background-size: 300% 100%; animation: ptitle-flow 3s linear infinite;
  filter: drop-shadow(1px 0 0 #2a1208) drop-shadow(-1px 0 0 #2a1208) drop-shadow(0 1px 0 #2a1208) drop-shadow(0 -1px 0 #2a1208) drop-shadow(0 0 4px rgba(255, 216, 106, 0.9)); }
.ptitle .crown { font-style: normal; margin-right: 3px; color: #ffd86a; -webkit-text-fill-color: #e0a52a; }
/* the admin-only title (ADMIN_TITLE): tier X's shimmer, brighter, with a white-hot glow */
.ptitle.psov { background-image: linear-gradient(90deg, #fff6d0, #ff5a4a, #ffd86a, #fff6d0, #7ae07a, #6fb6ff, #fff6d0, #c08aff, #fff6d0); background-size: 400% 100%; animation-duration: 2.2s;
  filter: drop-shadow(1px 0 0 #2a1208) drop-shadow(-1px 0 0 #2a1208) drop-shadow(0 1px 0 #2a1208) drop-shadow(0 -1px 0 #2a1208) drop-shadow(0 0 6px rgba(214, 180, 255, 0.95)); }
.ptitle.psov .crown { -webkit-text-fill-color: #fff2b0; text-shadow: 0 0 6px #ffd86a; }
@keyframes ptitle-flow { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .ptitle.pt9, .ptitle.pt10, .ptitle.psov { animation: none; } }
.profile .prestige-name { margin: 2px 0 4px; font-size: 16px; }

/* ---- the account gate (js/account.js): over the splash, before the title */
.modal.account-gate { z-index: 60; background: rgba(11, 8, 6, 0.9); }
.acct { max-width: 360px; gap: 10px; padding: 6px 10px 10px; }
.acct .eyebrow { margin-top: 2px; }
.acct-tabs { display: flex; gap: 6px; justify-content: center; }
.acct-tabs .btn { flex: 1; min-height: 40px; }
.acct-field { display: grid; gap: 3px; font-family: var(--font-label); font-size: 12px; color: var(--ink); }
.acct-field input { font: 16px/1.2 var(--font-label), monospace; padding: 8px; color: var(--ink); background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(90, 58, 28, 0.5); border-radius: 0; }
.acct-field input:focus { outline: 3px solid var(--gold-hi); outline-offset: 0; }
.acct-go { min-height: 46px; font-size: 14px; }
.acct-error { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--crimson); }
.acct-note { margin: 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
.acct-notice { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 70; margin: 0; padding: 8px 12px;
  font: 700 13px var(--font-label), monospace; color: var(--cream); background: #2a1708; border: 2px solid var(--gold); }
.set-account { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
.set-admin { display: grid; gap: 6px; margin-top: 8px; }
.set-admin input { font: 15px var(--font-label), monospace; padding: 6px; background: rgba(255, 255, 255, 0.5); border: 2px solid rgba(90, 58, 28, 0.5); }

/* ---- backup codes (openBackup in game.js) */
.backup textarea { width: 100%; box-sizing: border-box; margin: 6px 0; padding: 6px; font: 11px/1.3 monospace; color: #3a2210; word-break: break-all;
  background: rgba(255, 255, 255, 0.4); border: 2px solid rgba(90, 58, 28, 0.4); resize: vertical; }
.backup .btn { display: block; margin: 0 auto; }
.backup .bk-msg { min-height: 1.4em; margin: 6px 0 0; text-align: center; font-size: 13px; color: #7a2f12; }

/* ---- phone polish (visual pass at 375 px wide) */
/* tabs: compact, so five fit in two even rows */
.inv-tabs { gap: 4px; }
.inv-tab { font-size: 11px; padding: 0 3px; letter-spacing: 0.04em; }
/* the menu's buttons: one even column instead of a ragged stack */
.menu-sheet .toolbar { display: grid; grid-template-columns: 1fr; justify-items: stretch; gap: 6px; max-width: 280px; margin: 0 auto; }
.menu-sheet .toolbar .btn, .menu-sheet #invMenuBtn { width: 100%; }
.menu-sheet #invMenuBtn { display: block; max-width: 280px; margin: 0 auto; }
/* the rank ladder: three to a row with room for the names */
.profile .prof-ranks { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); row-gap: 8px; }
.profile .prof-ranks b { font-size: 12px; }
/* nothing smaller than 11 px */
.profile .ach-text small, .profile .pic small, .profile .prof-ranks small, .kitchen .recipe-text small, .profile .ach-text span { font-size: 11px; }
.profile .prof-stats { font-size: 12.5px; }

/* ---- Fever: the meter in the board frame's top rail, and the board's glow while it runs */
.battle-screen .fever-meter { position: absolute; background: #1a0e07; border: calc(3 * var(--u)) solid #5a3a1c; box-shadow: inset 0 0 calc(6 * var(--u)) #000; overflow: hidden; }
.battle-screen .fever-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #c8401a, #ff9b2b 60%, #ffe24d); transition: width 0.4s ease-out; }
.battle-screen .fever-meter span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-label); font-weight: 700;
  font-size: calc(20 * var(--u)); letter-spacing: 0.2em; color: #fff3d0; text-shadow: 1px 1px 0 #1a0e07, -1px 0 0 #1a0e07; }
.battle-screen .fever-meter.active { border-color: #ffd86a; box-shadow: 0 0 calc(14 * var(--u)) #ff9b2b, inset 0 0 calc(6 * var(--u)) #7a2f12; animation: fever-pulse 0.6s ease-in-out infinite alternate; }
.battle-screen .fever-glow { pointer-events: none; opacity: 0; border-radius: calc(18 * var(--u)); transition: opacity 0.4s;
  box-shadow: 0 0 calc(26 * var(--u)) calc(6 * var(--u)) rgba(255, 140, 40, 0.75), inset 0 0 calc(30 * var(--u)) rgba(255, 170, 60, 0.45); }
.battle-screen.fever-on .fever-glow { opacity: 1; animation: fever-glow 0.6s ease-in-out infinite alternate; }
@keyframes fever-pulse { to { filter: brightness(1.25); } }
@keyframes fever-glow { to { box-shadow: 0 0 calc(40 * var(--u)) calc(10 * var(--u)) rgba(255, 200, 70, 0.9), inset 0 0 calc(44 * var(--u)) rgba(255, 190, 80, 0.6); } }
@media (prefers-reduced-motion: reduce) { .battle-screen .fever-meter.active, .battle-screen.fever-on .fever-glow { animation: none; } }
.battle-screen .pop.fever { color: #ffb347; font-size: calc(46 * var(--u)); text-shadow: 2px 2px 0 #3a1608, 0 0 8px #ff7a2a; }

/* ---- win streak and bounties (js/game/17-hooks.js) */
.stage-streak, .streak-line { margin: 2px 0 6px; text-align: center; font-size: 13px; color: #5a3a1c; }
.stage-streak b, .streak-line b { color: #b8301e; }
.streak-line em { font-style: normal; font-weight: 700; color: #7a2f12; }
.streak-line.lost { color: #7a5a3a; font-style: italic; }
.bounty-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; }
.bounty-list li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; padding: 4px 8px; font-size: 12.5px; color: #3a2210;
  background: rgba(90, 58, 28, 0.08); border: 2px solid rgba(90, 58, 28, 0.25); }
.bounty-list li > span:first-child { grid-column: 1; font-weight: 700; color: #7a2f12; }
.bounty-list small { grid-column: 1; font-size: 11px; color: #7a5a3a; }
.bounty-list .bounty-prog { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-label); font-size: 11px; font-weight: 700; color: #5a3a1c; }
.bounty-list .xp-bar { grid-column: 1 / -1; margin: 2px 0 0; }
.bounty-list.compact li { padding: 3px 6px; font-size: 12px; }
.card-bounties { margin: 0 0 6px; }
.card-bounties summary { cursor: pointer; text-align: center; font-family: var(--font-label); font-size: 12px; font-weight: 700; color: #7a2f12; letter-spacing: 0.06em; }
.celebrate .bounty-done li.reward { color: #5a3a1c; font-size: 13px; margin-bottom: 6px; }

/* Fever ready: the meter is a button that pulses until tapped */
.battle-screen .fever-meter { padding: 0; font: inherit; cursor: default; }
.battle-screen .fever-meter.ready { cursor: pointer; border-color: #ffd86a; animation: fever-ready 0.5s ease-in-out infinite alternate;
  box-shadow: 0 0 calc(18 * var(--u)) #ffb347, inset 0 0 calc(6 * var(--u)) #7a2f12; }
.battle-screen .fever-meter.ready .fever-fill { background: linear-gradient(90deg, #ff9b2b, #ffe24d, #fff3b0, #ffe24d, #ff9b2b); background-size: 200% 100%; animation: fever-shine 1s linear infinite; }
@keyframes fever-ready { to { transform: scale(1.03); filter: brightness(1.3); } }
@keyframes fever-shine { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .battle-screen .fever-meter.ready, .battle-screen .fever-meter.ready .fever-fill { animation: none; } }

/* ---- enemy signatures: the status line over the stage, the twist on the stage card */
.battle-screen .enemy-status { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 calc(16 * var(--u));
  font-family: var(--font-label); font-weight: 700; font-size: calc(22 * var(--u)); color: #fff3d0; background: rgba(26, 14, 7, 0.78);
  border: calc(3 * var(--u)) solid #b8862b; text-shadow: 1px 1px 0 #1a0e07; pointer-events: none; }
.stage-card .foe-twist { margin: -2px 0 6px; text-align: center; font-size: 12.5px; color: #3a2210; }
.stage-card .foe-twist b { color: #7a2f12; }

/* ---- live star tracker (top right of the battle screen) */
.battle-screen .star-track { list-style: none; margin: 0; padding: calc(8 * var(--u)) calc(10 * var(--u)); display: grid; align-content: start; gap: calc(6 * var(--u));
  background: rgba(26, 14, 7, 0.72); border: calc(3 * var(--u)) solid #b8862b; pointer-events: none; height: auto; }
.battle-screen .star-track li { display: flex; align-items: center; gap: calc(6 * var(--u)); font-family: var(--font-label); font-weight: 700;
  font-size: calc(19 * var(--u)); color: #fff3d0; text-shadow: 1px 1px 0 #1a0e07; white-space: nowrap; }
.battle-screen .star-track img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); image-rendering: pixelated; }
.battle-screen .star-track .st-done { color: #ffd86a; }
.battle-screen .star-track .st-fail { color: #9a8a70; text-decoration: line-through; }
.battle-screen .star-track .st-fail img { filter: grayscale(1) brightness(0.6); }

/* ---- enemy twists in the world (renderTwists): howl aura, the pup, the coin sack; shared pips */
.battle-screen .foe-aura { pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255, 50, 30, 0.7), rgba(255, 50, 30, 0.25) 45%, rgba(255, 60, 40, 0) 68%); mix-blend-mode: screen;
  animation: howl-aura 0.5s ease-in-out infinite alternate; }
@keyframes howl-aura { to { transform: scale(1.12); opacity: 0.75; } }
.battle-screen .intent.howling, .battle-screen .ov-intent.howling { animation: howl-shake 0.25s steps(2) infinite; filter: drop-shadow(0 0 calc(10 * var(--u)) #ff3a2a); }
@keyframes howl-shake { 50% { transform: translateX(calc(4 * var(--u))) rotate(-0.6deg); } }
.battle-screen .pup { display: grid; justify-items: center; pointer-events: none; }
.battle-screen .pup img { width: 100%; height: auto; image-rendering: pixelated; filter: brightness(0.85) sepia(0.2); animation: pup-bob 0.7s ease-in-out infinite alternate; }
@keyframes pup-bob { to { transform: translateY(calc(-6 * var(--u))); } }
.battle-screen .pips { display: flex; gap: calc(6 * var(--u)); justify-content: center; }
.battle-screen .pips i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); background: #3a2210; border: calc(3 * var(--u)) solid #1a0e07; }
.battle-screen .pips i.on { background: #ff5a3a; box-shadow: 0 0 calc(6 * var(--u)) #ff5a3a; }
.battle-screen .coin-sack { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u)); background: rgba(26, 14, 7, 0.82); border: calc(3 * var(--u)) solid #ffd84a; pointer-events: none; animation: sack-pulse 0.6s ease-in-out infinite alternate; }
.battle-screen .coin-sack img { grid-row: 1 / span 2; width: calc(46 * var(--u)); height: calc(46 * var(--u)); image-rendering: pixelated; }
.battle-screen .coin-sack b { font-family: var(--font-label); font-size: calc(30 * var(--u)); color: #ffd84a; text-shadow: 1px 1px 0 #1a0e07; }
.battle-screen .coin-sack .pips { justify-content: flex-start; }
.battle-screen .coin-sack .pips i.on { background: #ffd84a; box-shadow: 0 0 calc(6 * var(--u)) #ffd84a; }
.battle-screen .coin-sack .pips i.on.urgent { background: #ff5a3a; box-shadow: 0 0 calc(6 * var(--u)) #ff5a3a; }
@keyframes sack-pulse { to { box-shadow: 0 0 calc(14 * var(--u)) rgba(255, 216, 74, 0.7); } }
@media (prefers-reduced-motion: reduce) { .battle-screen .foe-aura, .battle-screen .pup img, .battle-screen .coin-sack, .battle-screen .ov-intent.howling { animation: none; } }

/* ---- art direction: painterly scenery behind crisp pixel-art gameplay (docs/GENERATED_ART.md).
   The scenery (and its living ambient layer) is softened a touch so it reads as depth; the UI
   frame, gems, enemies, effects and HUD stay at full crispness and contrast. */
:root { --scenery-depth: saturate(0.88) contrast(0.9) brightness(0.95); }
.battle-screen .battle-scenery { background: 0 0 / 100% 100% no-repeat; filter: var(--scenery-depth); pointer-events: none; }
.battle-screen .battle-ui-layer { background: 0 0 / 100% 100% no-repeat; pointer-events: none; }
.battle-screen #ambient { filter: var(--scenery-depth); }

.chip.unlock-chip { color: #7a2f12; font-weight: 700; }

/* ---- the single rewards card (celebrate) */
.celebrate .celebrate-head { margin: 10px 0 4px; font-family: var(--font-title); font-weight: 400; font-size: 20px; color: var(--crimson); line-height: 1; }
.celebrate .celebrate-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.celebrate .celebrate-rows li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 4px 8px; font-size: 13px; color: #3a2210;
  background: rgba(255, 216, 106, 0.16); border: 2px solid rgba(184, 134, 43, 0.6); }
.celebrate .celebrate-rows li > b { grid-column: 2; color: #7a2f12; }
.celebrate .celebrate-rows li > span { grid-column: 2; font-size: 11.5px; color: #5a3a1c; }
.celebrate .celebrate-rows img { grid-row: 1 / span 2; width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }

.sheet.celebrate { display: flex; flex-direction: column; max-height: calc(100% - 16px); }
.sheet.celebrate .celebrate-body { overflow-y: auto; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sheet.celebrate .celebrate-body > * { flex: none; }
.sheet.celebrate .result-actions { flex: none; padding-top: 8px; }
.celebrate .celebrate-list li { display: block; text-align: center; }
.celebrate .celebrate-list li img { vertical-align: middle; margin: 0 2px; }
.celebrate.busy .level-badge { margin: 2px auto; }
.celebrate.busy .level-badge span { font-size: 16px; }
.celebrate.busy .level-badge b { font-size: 44px; }

/* ---- the map's next goal (in the painted parchment) and stage-card news */
.stage-card .foe-news { margin: -2px 0 6px; text-align: center; font-size: 12.5px; color: #7a2f12; }

/* ---- settings */
.settings .set-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.settings .set-row { display: grid; grid-template-columns: 1fr auto; width: 100%; text-align: left; padding: 8px 10px; font: inherit; cursor: pointer; color: #3a2210;
  background: rgba(90, 58, 28, 0.08); border: 2px solid rgba(90, 58, 28, 0.3); }
.settings .set-row b { font-size: 15px; color: #7a2f12; }
.settings .set-row small { grid-column: 1; font-size: 11.5px; color: #7a5a3a; }
.settings .set-row span { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 46px; text-align: center; padding: 3px 6px; font-family: var(--font-label); font-weight: 700; font-size: 12px;
  color: #f6e7c1; background: #7a5a3a; border: 2px solid #3a2210; }
.settings .set-row.on span { background: #3f7a2a; }
.settings .set-btns { display: grid; gap: 6px; max-width: 280px; margin: 12px auto 0; }

/* ---- win streak chip (top left of the battle screen) */
.battle-screen .streak-chip { display: grid; align-content: center; justify-items: start; padding: 0 calc(14 * var(--u)) 0 calc(48 * var(--u)); pointer-events: none;
  background: rgba(26, 14, 7, 0.72); border: calc(3 * var(--u)) solid #b8862b; font-family: var(--font-label); font-weight: 700; color: #fff3d0; text-shadow: 1px 1px 0 #1a0e07; position: absolute; }
.battle-screen .streak-chip[hidden] { display: none; }
.battle-screen .streak-chip img { position: absolute; left: calc(10 * var(--u)); top: 50%; width: calc(28 * var(--u)); height: calc(28 * var(--u)); margin-top: calc(-14 * var(--u)); image-rendering: pixelated; }
.battle-screen .streak-chip b { font-size: calc(24 * var(--u)); color: #ffb347; }
.battle-screen .streak-chip small { font-size: calc(19 * var(--u)); white-space: nowrap; }

.bounty-list .bounty-swap { grid-column: 1 / -1; justify-self: end; margin-top: 3px; padding: 2px 8px; font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
  color: #f6e7c1; background: #7a5a3a; border: 2px solid #3a2210; }
.bounty-list .bounty-swap:disabled { opacity: 0.45; cursor: default; }

/* ---- score medals */
.medal { display: inline-block; padding: 0 5px; font-family: var(--font-label); font-size: 0.75em; color: #2a1608; border: 2px solid #3a2210; }
.medal.m1 { background: #c98a52; }
.medal.m2 { background: #c9ccd2; }
.medal.m3 { background: #f2c94c; }
.results .medal-line { margin: 4px 0 0; text-align: center; font-size: 12.5px; color: #5a3a1c; }
.results .medal-line em { color: #7a2f12; font-weight: 700; font-style: normal; }

/* ---- red dots: only where a tap collects something */
.red-dot { display: none; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; pointer-events: none;
  background: #e0322a; border: 2px solid #fff3d0; box-shadow: 0 1px 0 #3a2210; }
.has-dot > .red-dot, .inv-tab > .red-dot { display: block; }
.inv-tab { position: relative; }
/* ---- the map's dock (bottom bar) */
.map-screen .map-dock { position: absolute; display: grid; place-items: center; padding: 0; font-size: calc(34 * var(--u)); letter-spacing: 0.08em; }
.map-screen .map-dock .red-dot { top: calc(-34 * var(--u)); right: calc(-34 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-width: calc(4 * var(--u)); }
/* ---- quests sheet */
.q-track { margin: 2px 0 8px; padding: 8px 10px 6px; background: rgba(90, 58, 28, 0.08); border: 2px solid rgba(90, 58, 28, 0.3); }
.q-track-head b { white-space: nowrap; }
.q-track-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 13px; color: #7a2f12; }
.q-track-head small { font-size: 11px; color: #7a5a3a; }
.q-track-row { position: relative; height: 62px; margin: 0 14px; }
.q-track-row .q-bar { position: absolute; left: 0; right: 0; top: 20px; margin: 0; }
.q-node { position: absolute; left: calc(var(--at) * 100%); top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 0;
  width: 46px; padding: 2px 0; font: inherit; cursor: default; background: #f6e7c1; border: 2px solid #7a5a3a; color: #3a2210; }
.q-node img { width: 22px; height: 22px; image-rendering: pixelated; object-fit: contain; }
.q-node small { font-size: 10px; font-weight: 700; line-height: 1.1; }
.q-node b { font-family: var(--font-label); font-size: 10px; color: #7a5a3a; line-height: 1.1; }
.q-node.got { background: #e6d3a6; border-color: #a08a68; color: #8a7a5a; }
.q-node.got img { filter: grayscale(1) opacity(0.6); }
.q-node.ready { cursor: pointer; background: #ffe08a; border-color: #b8862b; box-shadow: 0 0 0 2px #fff3d0, 0 0 10px #ffd86a; animation: q-pulse 1.1s ease-in-out infinite; }
@keyframes q-pulse { 50% { transform: translateX(-50%) translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .q-node.ready { animation: none; } }
.quests .q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.quests .q-list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(90, 58, 28, 0.06); border: 2px solid rgba(90, 58, 28, 0.25); }
.quests .q-list li.ready { background: rgba(255, 216, 106, 0.25); border-color: #b8862b; }
.quests .q-list li.claimed { opacity: 0.55; }
.quests .q-text { display: grid; gap: 1px; min-width: 0; }
.quests .q-text b { font-size: 13px; color: #7a2f12; }
.quests .q-text small { font-size: 11px; color: #7a5a3a; }
.quests .q-prog { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; margin-top: 2px; }
.quests .q-prog .xp-bar { margin: 0; }
.quests .q-prog em { font-style: normal; font-family: var(--font-label); font-size: 10.5px; font-weight: 700; color: #5a3a1c; }
.quests .q-btn { min-width: 72px; padding: 6px 10px; font-size: 12px; }
.quests .q-swap { padding: 3px 7px; font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; color: #f6e7c1; background: #7a5a3a; border: 2px solid #3a2210; }
.quests .q-swap:disabled { opacity: 0.45; cursor: default; }
.quests .q-done { font-family: var(--font-label); font-size: 11px; color: #3f7a2a; font-weight: 700; }
.q-mini { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 2px; font-size: 12px; }
.q-mini li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 6px; background: rgba(90, 58, 28, 0.06); }
.q-mini li.done { opacity: 0.55; text-decoration: line-through; }
.q-mini em { font-style: normal; font-weight: 700; color: #5a3a1c; }

/* ---- awards: categories and tier pips */
.profile .ach-cats { display: flex; justify-content: center; gap: 4px; margin: 0 0 6px; flex-wrap: wrap; }
.profile .ach-cat { padding: 3px 9px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; color: #7a5a3a; background: rgba(90, 58, 28, 0.08); border: 2px solid rgba(90, 58, 28, 0.3); }
.profile .ach-cat.on { color: #f6e7c1; background: #7a2f12; border-color: #3a2210; }
.profile .ach-pips { display: flex; gap: 3px; justify-content: flex-end; margin-bottom: 2px; }
.profile .ach-pips i { width: 8px; height: 8px; background: rgba(90, 58, 28, 0.25); border: 1px solid #7a5a3a; transform: rotate(45deg); }
.profile .ach-pips i.on { background: #ffd86a; border-color: #b8862b; }
.profile .awards-track { margin-top: 0; }

/* ---- prestige: the rank card (tier strip, running bonuses), then the next tier's requirements */
.profile .pr-card { padding: 8px; margin-bottom: 8px; background: rgba(90, 58, 28, 0.08); border: 2px solid rgba(90, 58, 28, 0.3); }
.profile .pr-card .prestige-head { margin-bottom: 6px; }
.profile .pr-totals h4 { margin: 4px 0; font-size: 12px; color: #7a2f12; text-transform: uppercase; letter-spacing: 0.06em; }
.profile .pr-totals ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: 12px; }
.profile .pr-totals li { display: grid; }
.profile .pr-totals li span { font-size: 10.5px; color: #7a5a3a; }
.profile .pr-totals li b { color: #3f7a2a; }
.profile .pr-strip { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 4px; align-items: center; margin-top: 8px; padding-top: 6px; border-top: 2px solid rgba(90, 58, 28, 0.25); }
.profile .pr-pill { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 28px; padding: 2px 4px; font-family: var(--font-label); font-size: 13px; white-space: nowrap; font-weight: 700; color: #7a5a3a; text-align: center; background: rgba(90, 58, 28, 0.1); border: 2px solid rgba(90, 58, 28, 0.3); }
.profile .pr-pill.now { color: #f6e7c1; background: #7a2f12; border-color: #3a2210; }
.profile .pr-pill.next { opacity: 0.75; }
.profile .pr-pill.empty { visibility: hidden; }
.profile .pr-pill img { width: 16px; height: 16px; }
.profile .pr-reqs { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.profile .pr-reqs li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12.5px; background: rgba(90, 58, 28, 0.06); border: 2px solid rgba(90, 58, 28, 0.25); }
.profile .pr-reqs li.ok { background: rgba(63, 122, 42, 0.1); border-color: rgba(63, 122, 42, 0.45); }
.profile .pr-badge { padding: 2px 8px; font-family: var(--font-label); font-size: 10.5px; color: #f6e7c1; background: #8a3a2a; border: 2px solid #3a2210; white-space: nowrap; }
.profile .pr-badge.ok { background: #3f7a2a; }
.profile .pr-gives { margin: 4px 0; font-size: 12px; color: #3a2210; }

/* ---- the map's profile corner (bottom panel, left box) */
.map-screen .map-profile { position: absolute; display: flex; align-items: center; gap: calc(34 * var(--u)); padding: 0 calc(18 * var(--u)); margin: 0;
  font: inherit; text-align: left; cursor: pointer; background: none; border: 0; color: #3a2210; }
.map-screen .map-profile .avatar.big { flex: none; width: calc(170 * var(--u)); height: calc(170 * var(--u)); padding: calc(18 * var(--u)); }
.map-screen .map-profile .mp-text { display: grid; gap: calc(4 * var(--u)); flex: 1; min-width: 0; }
.map-screen .map-profile .mp-text b { font-size: calc(36 * var(--u)); color: #7a2f12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-screen .map-profile .mp-text em { font-style: normal; font-size: calc(26 * var(--u)); color: #5a3a1c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-screen .map-profile .mp-level { font-family: var(--font-label); font-weight: 700; font-size: calc(24 * var(--u)); color: #5a3a1c; display: flex; align-items: center; gap: calc(6 * var(--u)); }
.map-screen .map-profile .mp-level .p-emblem { width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin: 0; }
.map-screen .map-profile .xp-bar { margin: calc(4 * var(--u)) 0 0; }
.map-screen .map-profile small { font-size: calc(22 * var(--u)); color: #7a5a3a; }
.map-screen .map-profile > .red-dot { top: calc(4 * var(--u)); right: calc(4 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-width: calc(4 * var(--u)); }
.map-screen .map-dock { font-size: calc(30 * var(--u)); line-height: 1; border-width: calc(26 * var(--u)); border-image-width: calc(26 * var(--u)); }   /* the wood frame scales with the map, so the label has room */
.quests .q-next { margin: 0 0 6px; padding: 5px 8px; font-size: 12.5px; color: #3a2210; background: rgba(255, 216, 106, 0.22); border: 2px solid rgba(184, 134, 43, 0.5); text-align: center; }
.quests .q-next b { color: #7a2f12; }

/* ---- the map guide: the "?" in the top bar, and its sheet */
.map-screen .map-help { justify-content: center; pointer-events: none; font-size: calc(60 * var(--u)); color: #7a2f12; }
.map-guide .mg-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.map-guide .mg-list li { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; padding: 6px 8px; background: rgba(90, 58, 28, 0.06); border: 2px solid rgba(90, 58, 28, 0.25); }
.map-guide .mg-icon { display: grid; place-items: center; height: 52px; }
.map-guide .mg-icon img { width: auto; height: auto; image-rendering: pixelated; }   /* native size: never rescaled */
.map-guide .mg-list b { display: block; font-size: 14px; color: #7a2f12; }
.map-guide .mg-list small { font-size: 12px; color: #5a3a1c; }
.settings .btn.danger { border-image: var(--frame-btnRed) 12 fill / 12px; }   /* the painted red button: erasing is different */
.map-screen .coach-tip { font-size: calc(34 * var(--u)); }
.xp-gain .quest-line { color: #3f7a2a; }

/* ---- profile: the Look tab (picture, frame, title) with a preview */
.profile .look-preview { display: flex; align-items: center; gap: 24px; margin: 0 0 8px; padding: 8px 10px; background: rgba(90, 58, 28, 0.08); border: 2px solid rgba(90, 58, 28, 0.3); }
.profile .look-preview b { font-size: 16px; color: #7a2f12; }
.profile .look-preview .prof-title { margin: 2px 0; }
.profile .look-preview small { font-size: 11.5px; color: #7a5a3a; }

/* ---- the results sheet, compact so it never scrolls (tools/noscroll.js) */
.results { gap: 5px; }
.results .eyebrow { margin: 0; }
.results .star-row img.big { width: 44px; height: 44px; }
.results .star-row .pop-1 { width: 60px !important; height: 60px !important; margin-top: -6px; }
.results .objectives { gap: 1px; }
.results .objectives li { font-size: 13.5px; gap: 6px; }
.results .objectives li img { width: 24px; height: 24px; }
.results .medal-line { margin: 0; font-size: 12px; }
.results .rewards .chip { font-size: 11px; }
.results .streak-line, .results .result-tip { margin: 0; font-size: 12px; }
.results .xp-gain { margin: 0; font-size: 12px; }
.results .xp-gain p { margin: 1px 0; }

.results .score-total { margin: 0; font-size: 12px; color: var(--ink-soft); text-align: center; }
.results .score-total b { font-family: var(--font-label); font-size: 13px; color: var(--crimson); margin-left: 2px; }

/* ---- paged lists (fitPages): sheets never scroll */
[data-pages] > [hidden] { display: none !important; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 0; font-family: var(--font-label); font-size: 11px; font-weight: 700; color: #5a3a1c; }
.pager button { min-width: 40px; height: 30px; padding: 0 10px; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; color: #f6e7c1; background: #7a5a3a; border: 2px solid #3a2210; }
.pager button:disabled { opacity: 0.35; cursor: default; }

/* compact sheets on short phones (tools/noscroll.js) */
@media (max-height: 700px) {
  .settings .set-row { padding: 5px 8px; }
  .settings .set-list { gap: 4px; }
  .settings .set-btns { margin-top: 6px; gap: 4px; }
  .profile .prof-ranks { row-gap: 2px; }
}
.guide-body > section > h3:first-child { margin-top: 0; }

.profile .pr-card .avatar.big { width: 64px; height: 64px; padding: 7px; }
.profile .pr-card .prestige-head { gap: 20px; margin-bottom: 2px; }
.profile .pr-totals h4 { margin: 2px 0; }
.profile .pr-strip { margin-top: 4px; padding-top: 4px; }
.profile .pr-reqs li { padding: 4px 8px; }
.profile .pr-gives { margin: 2px 0; }
.how-to .guide-body p, .how-to .guide-body li { font-size: 14px; }
.how-to .guide-body h3 { font-family: var(--font-title); font-weight: 400; font-size: 22px; color: var(--crimson); margin: 0 0 4px; line-height: 1; }
.how-to .guide-body ul { padding-left: 18px; margin: 6px 0; }
@media (max-height: 700px) {
  .profile .pr-card { padding: 5px 6px; }
  .profile .pr-totals ul { font-size: 11px; }
  .profile .pr-reqs { gap: 2px; }
}
/* titles: one line each (name left, how to get it right), so a page holds more */
.profile .title-list { gap: 3px; }
.profile .title-list button { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; padding: 4px 8px; }
.profile .title-list small { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }