:root {
  --bg: #0b1325;
  --surface: #162239;
  --surface-raised: #1d2b46;
  --surface-muted: #121d31;
  --border: #34435e;
  --text: #f2f6ff;
  --muted: #afbdd3;
  --muted-soft: #899cb8;
  --accent: #7de0cd;
  --accent-bright: #a4fae5;
  --amber: #ffce80;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 300px; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 9% 0%, #202f4f 0%, transparent 38%),
    radial-gradient(ellipse at 100% 88%, #15373d 0%, transparent 42%),
    var(--bg);
}
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}
button[disabled] { cursor: default; }
button { -webkit-tap-highlight-color: transparent; }
.shell {
  width: min(1080px, calc(100% - 44px));
  margin: 0 auto;
  padding: 24px 0 38px;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 0 20px;
  border-bottom: 1px solid #ffffff15;
  margin-bottom: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  background: linear-gradient(140deg, #83eed8, #57c0c3);
  color: #0d2f38;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 23px;
  letter-spacing: -.08em;
  box-shadow: 0 10px 25px #54d0bd1a;
}
.brand-mark sup { position: relative; top: -.35em; font-size: 11px; }
.brand h1 { margin: 0; font-size: clamp(22px, 2.5vw, 29px); letter-spacing: -.7px; line-height: 1.1; }
.brand h1 span { color: var(--accent); }
.brand-sub { margin: 4px 0 0; color: var(--muted-soft); font-size: 12px; }
.header-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.header-actions button { min-height: 40px; font-size: 12px; font-weight: 750; }
.quiet-btn {
  padding: 10px 13px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #c5d4e9;
}
.quiet-btn:hover { border-color: #425473; background: #1a2943; }
.outline {
  background: #21314e;
  border: 1px solid #4a5f7d;
  border-radius: 10px;
  color: var(--text);
  padding: 10px 14px;
}
.outline:hover { background: #2d4365; }
.play {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(265px, 306px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "board hud" "board secondary";
  gap: 14px 20px;
  align-items: start;
}
.game {
  grid-area: board;
  min-width: 0;
  padding: 20px;
  background: #152038;
  border: 1px solid var(--border);
  border-radius: 21px;
  box-shadow: 0 18px 42px #0208172e;
}
.board-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.overline {
  color: var(--muted-soft);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.board-head h2 { margin: 0; font-size: clamp(18px,2.3vw,23px); letter-spacing: -.35px; }
.game-feedback {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 13px 0 13px;
  padding: 9px 12px;
  background: #1c2b45;
  color: #c8d6e9;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid #354764;
  border-radius: 10px;
}
.game-feedback.is-over { color: #ffd7a0; background: #392b2a; border-color: #a87e59; }
.board {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 10px;
  background: #0a1326;
  border: 1px solid #273752;
  border-radius: 16px;
  touch-action: none;
  aspect-ratio: 1;
  width: 100%;
}
.cell, .tile-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 900;
  user-select: none;
}
.cell {
  position: relative;
  min-width: 0;
  border: 1px solid #26354f;
  background: #1e2d46;
  color: transparent;
  transition: background .12s, transform .12s;
}
.cell:disabled { cursor: default; }
.tile { color: #172b3b; border: 0; }
.tile sup, .tile-ghost sup { font-size: .54em; vertical-align: super; }
.base2 { background: #78dfdf; }
/* Coral red replaces the old amber base-3 colour, which looked like gold. */
.base3 { background: #ea876d; }
.base5 { background: #c8a3f9; }
.base7 { background: #a9e3b2; }
.base11 { background: #f7b6bb; }
.base13 { background: #b7c5ff; }
.block-tile {
  flex-direction: column;
  gap: 2px;
  border: 2px solid var(--tier-color, #9ca9be);
  background: repeating-linear-gradient(135deg,
    #43536c 0, #43536c 8px, #3a4861 8px, #3a4861 16px);
  color: #f6f7fb;
  cursor: not-allowed;
}
.block-tier1 { --tier-color: #90e6c3; }
.block-tier2 { --tier-color: #a5d3e8; }
.block-tier3 { --tier-color: #f0d797; }
.block-tier4 { --tier-color: #e9b18b; }
.block-tier5 { --tier-color: #ee979d; }
.warning-tile {
  flex-direction: column;
  gap: 4px;
  border: 2px dashed #f3c36c;
  background: repeating-linear-gradient(135deg,
    #4a3a24 0, #4a3a24 8px, #41331f 8px, #41331f 16px);
  color: #ffdfa1;
  box-shadow: inset 0 0 0 2px #f3c36c26;
  cursor: not-allowed;
}
.warning-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: #f3c36c;
  color: #342515;
  font-size: .62em;
  font-weight: 950;
}
.warning-tile .block-health { color: #f9d79a; font-size: clamp(8px, 1.3vw, 11px); }
.block-symbol { font-size: .88em; line-height: 1; }
.block-health {
  color: #e5ecf7;
  font-size: clamp(9px, 1.5vw, 13px);
  font-weight: 700;
  letter-spacing: .2px;
}
.bankable { box-shadow: inset 0 0 0 3px #ffffff99; cursor: pointer; }
.bankable:hover { transform: scale(.97); }
.block-strike { box-shadow: inset 0 0 0 3px #ffc765, 0 0 12px #ffc76538; }
.block-strike i { color: #493015; }
.locked { box-shadow: inset 0 0 0 2px #805e52; cursor: not-allowed; }
.cell i {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 15px;
  color: #17444b;
  font-style: normal;
}
.motion-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tile-ghost { position: absolute; color: #172b3b; will-change: transform; }
.board.animating > .cell.tile { visibility: hidden; }
.merge-flash { animation: merge-pop .22s ease-out; }
.spawn-flash { animation: spawn-pop .22s ease-out; }
.bank-flash { animation: bank-pop .3s ease-out; }
.block-hit-flash { animation: blocker-hit .4s ease-out; }
.block-appear { animation: blocker-appear .25s ease-out; }
.warning-appear { animation: warning-appear .3s ease-out; }
@keyframes warning-appear {
  0% { opacity: .5; transform: scale(.84); }
  100% { opacity: 1; transform: scale(1); }
}
.block-break-flash::after {
  content: "✧";
  color: #a9f6dd;
  font-size: 28px;
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: blocker-break .55s ease-out forwards;
}
@keyframes blocker-hit {
  0% { filter: brightness(1.7); transform: scale(1.04); }
  100% { filter: brightness(1); transform: scale(1); }
}
@keyframes blocker-appear {
  0% { transform: scale(.72); opacity: .3; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes blocker-break {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes merge-pop {
  0% { transform: scale(.92); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes spawn-pop {
  0% { transform: scale(.75); opacity: .35; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes bank-pop {
  0% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}
.control-caption { font-size: 12px; color: var(--muted-soft); line-height: 1.4; }
.controls { display: flex; justify-content: center; gap: 6px; flex-shrink: 0; }
.controls button {
  width: 43px;
  height: 43px;
  border-radius: 11px;
  border: 1px solid #435775;
  background: #233450;
  color: #f2f7ff;
  font-size: 23px;
  font-weight: 800;
}
.controls button:hover { background: #32496e; }
.controls button:active { transform: translateY(1px); }

.hud {
  grid-area: hud;
  min-width: 0;
  padding: 20px;
  background: linear-gradient(160deg, #1c3945, #172b3d 64%, #16243a);
  border: 1px solid #478a88;
  border-radius: 20px;
  box-shadow: 0 15px 30px #02081733;
}
.hud-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.run-state {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid #5e958c;
  border-radius: 999px;
  color: #b0f8e5;
  background: #224b4d;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.budget-line { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 10px 0 22px; }
.budget-label { font-size: 14px; font-weight: 750; color: #d8eee9; margin: 0 0 2px; }
.budget-value {
  color: var(--accent-bright);
  font-size: clamp(56px, 6vw, 76px);
  letter-spacing: -3px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.budget-max { color: #98b9b8; font-size: 14px; font-weight: 750; }
.cost-panel { text-align: right; min-width: 0; padding-bottom: 3px; }
.cost-panel span { display: block; color: #adc9c9; font-size: 11px; }
.cost-panel strong {
  display: block;
  color: #e9f7f1;
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.1;
  white-space: nowrap;
}
.bank-meter { padding-top: 15px; border-top: 1px solid #b5f2e229; }
.meter-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 11px;
  color: #d6e9e7;
  line-height: 1.5;
}
.meter-top strong { font-size: 12px; color: var(--accent-bright); white-space: nowrap; }
#bonusMeter {
  display: block;
  width: 100%;
  height: 8px;
  margin: 10px 0 8px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  color: var(--accent-bright);
  background: #0b2431;
  accent-color: var(--accent-bright);
}
#bonusMeter::-webkit-progress-bar { background: #0b2431; border-radius: 8px; }
#bonusMeter::-webkit-progress-value { background: #9af1d8; border-radius: 8px; }
#bonusMeter::-moz-progress-bar { background: #9af1d8; border-radius: 8px; }
.meter-caption { font-size: 11px; line-height: 1.55; color: #a8c5c8; margin: 0; }
.hud-score { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid #b5f2e229; padding-top: 15px; margin-top: 16px; }
.hud-score span { color: #c5d6df; font-size: 12px; font-weight: 750; }
.hud-score strong { color: #f4f9ff; font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.hud.low-moves { border-color: #e8bc6b; background: linear-gradient(150deg, #403527, #262d36); }
.hud.low-moves .budget-value { color: #ffcf80; }
.hud.empty-moves { border-color: #e69da3; background: linear-gradient(150deg, #412c3a, #25253a); }
.hud.empty-moves .budget-value { color: #ffb1b6; }
.hud.empty-moves .run-state { background: #6d3941; border-color: #ab636d; color: #ffdae0; }
.end-actions { border-top: 1px solid #ffffff28; margin-top: 18px; padding-top: 17px; }
.end-actions > strong { display: block; font-size: 15px; color: #f7e6e0; }
.end-actions p { font-size: 12px; line-height: 1.5; color: #d1baba; margin: 7px 0 12px; }

.secondary { grid-area: secondary; display: grid; gap: 10px; min-width: 0; }
.details-card {
  border: 1px solid #33445d;
  background: #152038;
  border-radius: 14px;
  overflow: hidden;
}
.details-card summary {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 14px 15px;
  color: #f0f5fc;
  cursor: pointer;
  list-style: none;
}
.details-card summary::-webkit-details-marker { display: none; }
.details-card summary:hover { background: #1b2b45; }
.summary-icon {
  display: grid;
  place-items: center;
  flex: 0 0 35px;
  height: 35px;
  background: #273a59;
  border-radius: 10px;
  font-size: 19px;
  color: #9ee8d8;
}
.summary-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.summary-copy strong { font-size: 13px; font-weight: 800; }
.summary-copy small { color: var(--muted-soft); font-size: 11px; line-height: 1.3; }
.chevron {
  margin-left: auto;
  font-size: 20px;
  color: #a4b4cb;
  transition: transform .18s;
  line-height: 1;
}
details[open] > summary .chevron { transform: rotate(180deg); }
.detail-body { border-top: 1px solid #31435e; padding: 14px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; }
.detail-grid div { display: flex; flex-direction: column; gap: 4px; }
.detail-grid span { color: #a0b2cb; font-size: 11px; }
.detail-grid strong { color: #eaf3ff; font-size: 17px; font-variant-numeric: tabular-nums; }
.detail-divider { border-top: 1px solid #33425b; margin: 16px 0; }
.detail-label { color: #ccd9eb; font-size: 11px; font-weight: 800; margin: 0 0 10px; }
.detail-hint { margin: 11px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted-soft); }
.base-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.base-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #172b3b;
  font-size: 14px;
  font-weight: 850;
}
.collection { display: flex; flex-wrap: wrap; gap: 8px; min-height: 32px; }
.collect {
  padding: 7px 10px;
  border: 1px solid #405371;
  border-radius: 8px;
  background: #23324e;
  color: #d4dff2;
  font-size: 13px;
  font-weight: 750;
}
.collect.done { background: #1d5149; color: #acffeb; border-color: #357a6f; }
.collect sup { font-size: 10px; }
.muted { color: var(--muted-soft); font-size: 12px; }

.help-dialog {
  width: min(100% - 28px, 570px);
  max-height: min(90vh, 780px);
  padding: 0;
  border: 1px solid #465f7d;
  border-radius: 20px;
  background: #18263d;
  color: var(--text);
  overflow: auto;
  box-shadow: 0 30px 100px #000b;
}
.help-dialog::backdrop { background: #050b18bf; backdrop-filter: blur(3px); }
.help-header {
  display: flex; justify-content: space-between; gap: 16px; align-items: start;
  padding: 24px 26px 18px; position: sticky; top: 0; background: #18263df2;
  border-bottom: 1px solid #394c67; z-index: 1; backdrop-filter: blur(8px);
}
.help-header h2 { font-size: 23px; margin: 0; letter-spacing: -.4px; }
.dialog-close {
  border: 1px solid #4b6080; background: #233551; color: #e3edf9;
  width: 37px; height: 37px; border-radius: 10px; font-size: 24px; line-height: 1;
}
.help-content { padding: 23px 26px 27px; }
.help-block + .help-block { padding-top: 18px; margin-top: 17px; border-top: 1px solid #35465f; }
.help-block h3 { margin: 0 0 9px; font-size: 16px; }
.help-block p { color: #c0cee1; font-size: 13px; line-height: 1.7; margin: 7px 0; }
.math-example {
  color: #b7ffea; background: #203754;
  border: 1px solid #3d6277; border-radius: 12px;
  padding: 15px 17px; margin: 13px 0; text-align: center;
  font-size: 24px; font-weight: 850; letter-spacing: .2px;
}
.math-example sup { font-size: .65em; }
.symbol-guide { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.symbol-guide span {
  padding: 8px 10px; border-radius: 8px; background: #243551; border: 1px solid #3a4d68;
  font-size: 11px; color: #d5e3f3;
}
.symbol-guide b { color: #a3f1df; }

.overlay {
  position: fixed; inset: 0; background: #050914da; display: grid;
  place-items: center; padding: 20px; z-index: 10;
}
.dialog {
  position: relative;
  width: min(100%, 420px);
  max-height: 95dvh;
  overflow-y: auto;
  padding: 30px;
  border-radius: 20px; border: 1px solid #52637c;
  background: #192843; color: #fff;
  box-shadow: 0 25px 90px #0009;
}
.dialog h2 { font-size: 38px; margin: 8px 0 15px; }
.dialog p { color: #bbcae1; line-height: 1.55; font-size: 13px; }
.close {
  position: absolute; top: 12px; right: 16px;
  border: 0; background: transparent; color: #baccdf;
  font-size: 30px;
}
.dialog label { display: block; font-weight: 750; font-size: 13px; margin: 18px 0 7px; }
.dialog input {
  width: 100%; padding: 13px; font-size: 20px;
  background: #0d182f; border: 1px solid #62738d;
  border-radius: 10px; color: white;
}
.clock { margin: 18px 0 5px; }
.clock .between { display: flex; justify-content: space-between; color: #b6c6db; font-size: 13px; }
.clock strong { color: #a6ffe2; font-size: 19px; font-variant-numeric: tabular-nums; }
.timer-track { height: 6px; background: #0c1930; border-radius: 20px; overflow: hidden; margin-top: 9px; }
#timeProgress { height: 100%; width: 100%; border-radius: inherit; background: var(--accent); }
.clock.running-low strong { color: var(--amber); }
.clock.running-low #timeProgress { background: var(--amber); }
.primary {
  width: 100%;
  padding: 13px 14px;
  background: var(--accent);
  color: #102d35;
  border: 0; border-radius: 11px;
  font-weight: 900;
}
.primary:hover { background: #a5f7e4; }
.textbtn { display: block; margin: 14px auto 0; color: #b1c3dc; border: 0; background: transparent; }
.dialog #feedback { color: var(--amber); font-size: 13px; min-height: 20px; }
.bank-hint { margin-top: 14px; border: 1px solid #3e5573; border-radius: 10px; background: #1d304e; }
.bank-hint summary { padding: 10px 13px; color: #bed3e8; cursor: pointer; font-size: 12px; font-weight: 750; }
.bank-hint p { padding: 0 13px 12px; margin: 0; font-size: 12px; }

@media (max-width: 900px) {
  .shell { width: min(720px, calc(100% - 28px)); }
  .play {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "hud" "board" "secondary";
    gap: 14px;
  }
  .hud { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .hud-heading { grid-column: 1 / -1; }
  .budget-line { align-items: center; }
  .bank-meter { grid-column: 2; align-self: center; }
  .hud-score { grid-column: 1 / -1; }
  .end-actions { grid-column: 1 / -1; }
  .secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .shell { width: calc(100% - 22px); padding-top: 14px; }
  .top { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; }
  .brand-mark { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
  .brand h1 { font-size: 25px; }
  .brand-sub { font-size: 11px; }
  .header-actions { width: 100%; justify-content: space-between; gap: 4px; }
  .header-actions button { flex: 1; padding: 9px 7px; font-size: 11px; }
  .hud { display: block; padding: 16px; }
  .hud-heading .overline { margin-bottom: 0; }
  .budget-line { margin: 11px 0 13px; }
  .budget-value { font-size: 58px; }
  .bank-meter { padding-top: 12px; }
  .hud-score { margin-top: 12px; padding-top: 11px; }
  .hud-score strong { font-size: 23px; }
  .meter-caption { font-size: 10px; }
  .game { padding: 12px; border-radius: 16px; }
  .board-head h2 { font-size: 19px; }
  .game-feedback { margin: 10px 0; min-height: 33px; }
  .board { padding: 7px; gap: 6px; }
  .cell, .tile-ghost { font-size: clamp(22px, 7vw, 36px); border-radius: 9px; }
  .block-health { font-size: 9px; }
  .controls-row { align-items: start; gap: 9px; }
  .control-caption { max-width: 95px; padding-top: 4px; font-size: 11px; }
  .controls button { width: clamp(38px, 11vw, 43px); height: 40px; }
  .secondary { grid-template-columns: 1fr; gap: 9px; }
  .details-card summary { padding: 12px; }
  .help-dialog { max-height: 92dvh; }
  .help-header { padding: 19px 19px 15px; }
  .help-content { padding: 18px 19px; }
  .dialog { padding: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Matching mode cards make the choice understandable before play begins. */
.mode-section { margin: -4px 0 19px; }
.mode-eyebrow { font-size: 10px; color: #9ab4ce; font-weight: 900;
  letter-spacing: 1.4px; margin: 0 0 9px; }
.mode-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch; gap: 12px; }
.mode-picker .mode-option {
  position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr);
  align-items: center; gap: 13px; width: 100%; min-height: 106px; height: 100%;
  padding: 16px 34px 16px 16px; border: 1px solid #425775; border-radius: 16px;
  background: linear-gradient(155deg, #20324e, #18263e);
  color: #e8f2ff; text-align: left; line-height: 1.3;
  box-shadow: 0 3px 12px #030b191c;
  transition: border-color .15s, background .15s, transform .15s;
}
.mode-picker .mode-option:hover { background: #273f59; border-color: #6c849e; }
.mode-picker .mode-option:focus-visible { outline: 3px solid #ffe29f; outline-offset: 3px; }
.mode-picker .mode-option[aria-pressed="true"] {
  border-color: #8bead5; background: linear-gradient(145deg, #213f4d, #1a3b45);
  box-shadow: inset 0 0 0 1px #8bead534, 0 5px 20px #30c5b215;
}
.mode-symbol { display: grid; place-items: center; height: 42px; width: 42px;
  background: #304663; border: 1px solid #4e6482; border-radius: 12px;
  color: #c2d3ee; font-size: 28px; line-height: 1; }
.mode-option[aria-pressed="true"] .mode-symbol {
  color: #0f3d3c; background: #9df1dd; border-color: #9df1dd; }
.mode-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mode-copy strong { font-size: 16px; letter-spacing: -.25px; font-weight: 900; }
.mode-copy small { font-size: 11px; font-weight: 500; line-height: 1.5;
  color: #bac9df; max-width: 38ch; }
.mode-option[aria-pressed="true"] .mode-copy small { color: #c0e4df; }
.mode-check { position: absolute; top: 11px; right: 13px; display: grid;
  place-items: center; height: 18px; width: 18px; border: 1px solid #547088;
  border-radius: 50%; color: transparent; font-size: 11px; }
.mode-option[aria-pressed="true"] .mode-check {
  border-color: #a5ffe5; background: #a5ffe5; color: #123c3a; }
.mode-utilities { display: flex; justify-content: flex-end; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.mode-utilities > span { color: #9db5c9; font-size: 11px; }
.achievement-open { display: inline-flex; align-items: center; gap: 8px;
  background: #283a4f; border: 1px solid #796741; color: #ffe6a5;
  border-radius: 10px; padding: 9px 12px; font-size: 12px; font-weight: 800; }
.achievement-open:hover { background: #3d4658; }
.achievement-open strong { border-left: 1px solid #947d4a;
  padding-left: 9px; color: #fff2cf; font-variant-numeric: tabular-nums; }
.rogue-progress { margin-top: 14px; padding: 13px; border: 1px solid #4b6879;
  background: #13293a; border-radius: 13px; }
.rogue-score-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 13px; color: #cee1e7; }
.rogue-score-row strong { color: #bbffe7; font-size: 23px; font-variant-numeric: tabular-nums; }
#roundScoreProgress { width: 100%; height: 10px; accent-color: #8be6d5; margin: 9px 0 4px; }
.rogue-total { color: #afc7d0; font-size: 11px; margin: 4px 0 0; }
.round-clear-panel { margin-top: 16px; border-top: 1px solid #6bc3ad55; padding-top: 16px; }
.round-clear-panel > strong { display: block; color: #b9ffe5; }
.round-clear-panel p { color: #c0d6dc; font-size: 12px; line-height: 1.5; }
@media (max-width: 580px) {
  .mode-section { margin-bottom: 14px; }
  .mode-picker { gap: 8px; }
  .mode-picker .mode-option {
    grid-template-columns: 31px minmax(0, 1fr); gap: 8px; min-height: 118px;
    padding: 12px 23px 12px 10px; border-radius: 13px;
  }
  .mode-symbol { width: 31px; height: 31px; font-size: 22px; border-radius: 9px; }
  .mode-copy strong { font-size: 13px; }
  .mode-copy small { font-size: 10px; line-height: 1.4; }
  .mode-check { top: 8px; right: 7px; height: 15px; width: 15px; font-size: 9px; }
  .mode-utilities { justify-content: flex-start; }
}
@media (max-width: 385px) {
  .mode-picker { grid-template-columns: 1fr; }
  .mode-picker .mode-option {
    grid-template-columns: 38px minmax(0, 1fr); min-height: 88px; padding: 12px 31px 12px 12px;
  }
  .mode-symbol { width: 38px; height: 38px; font-size: 25px; }
}

/* Gold is a tile-wide material, not a yellow dot or a repainted base.
   The metallic face, inner bevel and high-contrast coin mark make gold easy
   to distinguish from all six normal base colours, including coral base 3. */
.cell.gold-tile, .tile-ghost.gold-tile {
  position: relative;
  background:
    linear-gradient(113deg, #fff8de77 0%, transparent 29%, transparent 65%, #74401520 100%),
    linear-gradient(154deg, #fff5c3 0%, #f8dc85 24%, #e6b74c 49%, #c28b2c 74%, #edc76d 100%);
  border: 2px solid #ffe49e;
  color: #392708;
  text-shadow: 0 1px 0 #fff3c9bb, 0 -1px 1px #8655155b;
  box-shadow:
    inset 0 2px 2px #fffce2ae,
    inset 0 -4px 8px #70400a55,
    0 2px 0 #a9742c9c,
    0 5px 13px #e7b44635;
}
.cell.gold-tile::before, .tile-ghost.gold-tile::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  border: 1px solid #fff4d29c;
  background: linear-gradient(127deg,
    #fffce373 0%, #fffce326 29%, transparent 29%, transparent 71%, #804e1120 100%);
  pointer-events: none;
}
.cell.gold-tile > span, .tile-ghost.gold-tile > span {
  position: relative;
  z-index: 1;
}
.cell.gold-tile.gold-double, .tile-ghost.gold-tile.gold-double {
  background:
    linear-gradient(110deg, #fff9e3a3 0%, transparent 42%, #70411521 100%),
    linear-gradient(150deg, #fff6c8 0%, #ffdd70 35%, #cf9021 70%, #f2c761 100%);
  border-color: #fff5cf;
}
.cell.gold-tile.bankable {
  cursor: pointer;
  outline: 2px solid #fff9de;
  outline-offset: -6px;
  box-shadow:
    inset 0 2px 2px #fffee5c0,
    inset 0 -4px 8px #70400a55,
    0 0 0 2px #ffd575a1,
    0 0 17px #ffd66b6b;
}
.cell.gold-tile.bankable:hover, .cell.gold-tile.bankable:focus-visible {
  filter: brightness(1.10);
}
.cell.gold-tile.block-strike {
  box-shadow: inset 0 0 0 2px #ffefc4, 0 0 0 2px #ffc766, 0 0 18px #eeba5a;
}
.cell.gold-tile.locked {
  filter: saturate(.65);
  outline: none;
  border-color: #af8253;
  box-shadow: inset 0 2px 6px #67441888;
}
.gold-tile i {
  color: #5c390c;
  text-shadow: 0 1px 0 #fff5d9;
}
.tile-gold-mark {
  position: absolute;
  top: 4px;
  left: 5px;
  z-index: 3;
  min-width: 19px;
  min-height: 19px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(145deg, #85500c, #b17820 52%, #70440d);
  border: 1px solid #ffebb1;
  box-shadow: inset 0 1px 1px #ffe6a46b, 0 1px 3px #53340c75;
  color: #fff7dd;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.3px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.rogue-progress-head { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.rogue-progress-head .overline { margin: 0; line-height: 1.45; }
.coin-count { display: inline-flex; gap: 5px; align-items: center; flex: none;
  border: 1px solid #9d7c38; color: #fff0c8; padding: 6px 9px; border-radius: 999px;
  font-size: 13px; background: #3d3422; font-variant-numeric: tabular-nums; }
.coin-count > span:first-child { color: #f6cd6e; font-size: 17px; }
.coin-caption { color: #dbbf83; font-size: 10px; font-weight: 700; }
.round-reward-breakdown { border: 1px solid #465f67; border-radius: 10px;
  background: #142b36; margin: 11px 0 15px; padding: 9px 12px; }
.round-reward-breakdown > div { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  color: #bfd4d8; font-size: 12px; padding: 7px 0; }
.round-reward-breakdown strong { color: #ffde9d; font-variant-numeric: tabular-nums; }
.round-reward-breakdown .round-reward-total { border-top: 1px solid #476069; margin-top: 4px; padding-top: 11px;
  font-size: 13px; font-weight: 800; color: #fff0cc; }
.round-reward-total strong { font-size: 18px; color: #ffdc92; }
@media (max-width: 580px) {
  .tile-gold-mark { font-size: 10px; left: 3px; top: 3px; min-height: 16px; min-width: 16px; }
  .cell.gold-tile::before, .tile-ghost.gold-tile::before { inset: 2px; border-radius: 6px; }
  .coin-count { padding: 5px 7px; }
}

/* Pass 3: compact loadout under the main gameplay information. */
.rogue-equipped {
  border-top: 1px solid #b5f2e229;
  margin-top: 16px;
  padding-top: 13px;
}
.equip-heading, .equip-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.equip-heading strong { font-size: 12px; color: #e6fff8; }
.equip-heading span, .equip-row > span { color: #a8c5c8; font-size: 10px; }
.equip-row { margin-top: 9px; align-items: start; }
.equip-row > span { padding-top: 6px; min-width: 68px; }
.equip-slots { display: grid; gap: 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1; min-width: 0; }
.equip-chip { min-width: 0; border: 1px dashed #547183; border-radius: 7px;
  padding: 6px; background: #102c37; color: #9db5bb; font-size: 10px; text-align: center;
  line-height: 1.35; overflow-wrap: anywhere; }
.equip-chip.equipped { color: #b9ffe7; border: 1px solid #497e83; background: #234750; font-weight: 750; }
.rogue-equipped > p { margin: 10px 0 0; color: #a1bcbf; font-size: 10px; line-height: 1.5; }

/* Separate scrollable shop scene. ESC is intentionally disabled while
   phase=shop, so the player can always use Start next round to leave. */
.shop-dialog {
  width: min(940px, calc(100% - 24px));
  max-height: min(94dvh, 940px);
  padding: 0;
  border-radius: 22px;
  border: 1px solid #537381;
  background: #142339;
  color: var(--text);
  overflow: auto;
  box-shadow: 0 30px 100px #020713de;
}
.shop-dialog::backdrop { background: #030a15da; backdrop-filter: blur(4px); }
.shop-dialog-inner { padding: clamp(17px, 3vw, 29px); }
.shop-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.shop-head h2 { font-size: clamp(25px, 4vw, 34px); line-height: 1.15; margin: 0; letter-spacing: -.6px; }
.shop-round { font-size: 13px; color: #aec4d1; margin: 7px 0 0; }
.shop-wallet { display: flex; gap: 6px; align-items: center; flex: none; background: #352c20;
  border: 1px solid #9e813e; border-radius: 13px; padding: 10px 13px; color: #f8e4ae; }
.shop-wallet > span { color: #f1c45f; font-size: 19px; }
.shop-wallet strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.shop-wallet small { align-self: end; padding-bottom: 4px; color: #d3b880; font-size: 10px; }
.shop-explanation { background: #1f3448; border: 1px solid #415b73; border-radius: 12px;
  color: #c4d5e3; padding: 12px 14px; line-height: 1.55; font-size: 12px; margin: 18px 0 8px; }
.shop-explanation strong { color: #e6d8a6; }
.shop-notice { min-height: 25px; font-size: 12px; color: #d6f4e7;
  margin: 8px 0 18px; line-height: 1.5; }
.shop-section-heading { display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 7px; margin: 18px 0 11px; }
.shop-section-heading h3 { margin: 0; font-size: 17px; letter-spacing: -.2px; }
.shop-section-heading > span { font-size: 11px; color: #a4b8ce; }
.shop-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shop-offer-card { display: flex; flex-direction: column; gap: 10px; padding: 17px;
  background: linear-gradient(155deg, #23334c, #1b2a41); border: 1px solid #465875;
  border-radius: 15px; min-height: 204px; min-width: 0; }
.shop-offer-card.sold-out { opacity: .65; }
.shop-offer-type { color: #a1c7cd; text-transform: uppercase; font-size: 10px;
  font-weight: 800; letter-spacing: 1.1px; }
.shop-item-name { color: #f3f9ff; font-size: 17px; letter-spacing: -.2px; }
.shop-item-description { font-size: 12px; color: #c4d1e1; margin: 0;
  line-height: 1.55; flex: 1; }
.shop-price { color: #fbd38a; font-size: 15px; font-weight: 900; margin: 0; }
.shop-card-actions { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.shop-replace-label { color: #b7c6d8; font-size: 11px; line-height: 1.4; margin: 2px 0; }
.shop-buy-button, .shop-mini-button {
  width: 100%; min-height: 38px; border-radius: 9px; border: 1px solid #65878c;
  padding: 9px 11px; background: #25495a; color: #e2fff6;
  font-weight: 800; font-size: 12px; line-height: 1.3;
}
.shop-buy-button { background: #80dfcb; border-color: #80dfcb; color: #0e3036; }
.shop-buy-button:not(:disabled):hover { background: #b1f6e8; }
.shop-mini-button:not(:disabled):hover { background: #376778; }
.shop-dialog button:disabled { opacity: .52; cursor: not-allowed; }
.shop-inventory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.shop-inventory-group { border: 1px solid #384b66; border-radius: 13px; padding: 12px; background: #16263c; }
.shop-inventory-group h4 { color: #d2e2f1; font-size: 12px; margin: 0 0 11px; }
.shop-inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shop-inventory-slot { display: flex; flex-direction: column; gap: 7px; min-width: 0; border: 1px dashed #4b5f78;
  border-radius: 10px; padding: 10px; min-height: 120px; }
.shop-inventory-slot.has-item { border-style: solid; background: #203648; border-color: #507578; }
.shop-slot-label { color: #a7bdc9; font-size: 10px; }
.shop-slot-name { font-size: 12px; color: #effffc; overflow-wrap: anywhere; }
.shop-empty-help { color: #8197ad; font-size: 10px; margin-top: auto; }
.shop-inventory-slot .shop-mini-button { font-size: 11px; padding: 7px; min-height: 35px; margin-top: auto; }
.shop-actions { display: flex; justify-content: space-between; gap: 12px;
  position: sticky; bottom: -1px; z-index: 2; background: #142339f5;
  border-top: 1px solid #485c74; padding: 14px 0 2px; margin-top: 18px; }
.shop-actions > button { flex: 1; min-height: 46px; }
.shop-actions .outline { font-size: 12px; font-weight: 800; }
.shop-actions .primary { max-width: 300px; }
@media (max-width: 650px) {
  .shop-dialog { width: calc(100% - 14px); border-radius: 15px; max-height: 96dvh; }
  .shop-offers { grid-template-columns: 1fr; }
  .shop-offer-card { min-height: 165px; }
  .shop-inventory { grid-template-columns: 1fr; }
  .shop-head h2 { font-size: 26px; }
  .shop-wallet { padding: 7px 9px; }
  .shop-wallet strong { font-size: 22px; }
  .shop-actions { gap: 8px; }
  .shop-actions > button { padding: 10px 8px; }
}

/* Pass 4: active loadout and accessible board targeting */
.equip-chip.equip-use {
  width: 100%; font: inherit; font-size: 10px; cursor: pointer;
  border: 1px solid #83e7cb; color: #d6fff2;
  background: #24594e; transition: background .12s, transform .12s;
}
.equip-chip.equip-use:not(:disabled):hover,
.equip-chip.equip-use:not(:disabled):focus-visible { background: #367f67; transform: translateY(-1px); }
.equip-chip.equip-use:disabled { opacity: .52; cursor: not-allowed; }
.item-prompt {
  border: 1px solid #d3ac61;
  border-radius: 11px; margin: 12px 0;
  padding: 10px 12px; background: #3b3224; color: #ffe8bb;
  display: flex; justify-content: space-between; align-items: center;
  gap: 11px; font-size: 12px; line-height: 1.45;
}
.item-cancel { border: 1px solid #d0ab6d; border-radius: 8px; background: #654927;
  color: #fff1d7; font-weight: 800; font-size: 12px; padding: 7px 10px; }
.item-cancel:hover { background: #8a5f35; }
.cell.item-target {
  position: relative; cursor: pointer;
  border: 3px solid #ffdf8c;
  box-shadow: inset 0 0 0 2px #8e5628, 0 0 15px #ebbd646e;
  z-index: 2; animation: target-glow 1s ease-in-out infinite alternate;
}
.cell.item-target:not(:disabled):hover { filter: brightness(1.12); transform: scale(.96); }
.cell.item-target-disabled:not(.item-target-selected) { opacity: .48; filter: saturate(.65); }
.cell.item-target-selected { border: 3px solid #9cf2e1; box-shadow: inset 0 0 0 2px #2e7c72; opacity: 1; }
.rogue-effect-status {
  margin: 8px 0 0; border-top: 1px solid #4d7584;
  padding-top: 8px; font-size: 11px; color: #b7ffea; line-height: 1.4;
}
@keyframes target-glow {
  from { box-shadow: inset 0 0 0 2px #815326, 0 0 8px #e9b95c66; }
  to { box-shadow: inset 0 0 0 2px #815326, 0 0 17px #ffdfa899; }
}
@media (max-width: 580px) {
  .item-prompt { font-size: 11px; padding: 8px 10px; }
  .item-cancel { padding: 6px 9px; }
}

/* Pass 5: boss rules are always visible while active; shop reveals the boss
   before the player commits gold or chooses replacement upgrades. */
.boss-rule {
  border: 1px solid #cf8a87;
  border-radius: 11px;
  background: #3a2434;
  padding: 11px 12px;
  margin: 13px 0 5px;
  color: #ffe3df;
}
.boss-rule-heading { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.boss-rule-heading > span:first-child { color: #ffb3ae; font-size: 17px; }
.boss-rule-heading strong { font-size: 13px; color: #fff3ee; }
.boss-label { margin-left: auto; color: #ffd6c1; font-size: 9px;
  font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.boss-rule p { color: #ffd1c5; font-size: 11px; line-height: 1.5; margin: 6px 0 0; }
.shop-boss-preview {
  border: 1px solid #bd838b;
  background: #362739;
  border-radius: 13px;
  padding: 15px 17px;
  margin: 14px 0;
}
.shop-boss-kicker { margin: 0 0 8px; font-size: 10px; letter-spacing: 1px;
  font-weight: 900; color: #ffc4b9; }
.shop-boss-kicker span { font-size: 17px; vertical-align: middle; margin-right: 4px; }
.shop-boss-preview h3 { margin: 0 0 8px; font-size: 20px; color: #fff0ef; }
.shop-boss-preview > p:not(.shop-boss-kicker) { font-size: 12px; line-height: 1.6;
  color: #efd5d8; margin: 7px 0 0; }
.shop-boss-preview .shop-boss-target { border-top: 1px solid #805d6e;
  padding-top: 9px; font-weight: 800; color: #ffe0c4; }
.tile-curse-mark {
  position: absolute; left: 3px; bottom: 4px; z-index: 2;
  background: #612c42; color: #fff2f4; border: 1px solid #f1a9ba;
  border-radius: 5px; padding: 1px 3px;
  font-size: 9px; font-weight: 900; line-height: 1.3;
  pointer-events: none;
}
.cell:has(.tile-curse-mark) { outline: 2px solid #d17b92; outline-offset: -2px; }
@media (max-width: 580px) {
  .shop-boss-preview { padding: 12px; margin: 10px 0; }
  .shop-boss-preview h3 { font-size: 17px; }
  .tile-curse-mark { font-size: 8px; left: 2px; bottom: 2px; }
}

/* Roguelite achievements: visible progress and persistent earned medals. */
.achievement-toast { display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  background: #293647; border: 1px solid #c6a565; border-radius: 11px;
  color: #ffe7b5; font-size: 12px; font-weight: 800; padding: 10px 12px;
  margin: 0 0 11px; line-height: 1.5; }
.achievement-toast > span:first-child { font-size: 20px; }
.achievement-toast > span:nth-child(2) { flex: 1; min-width: 160px; }
.achievement-toast button { color: #fff1cb; border: 1px solid #9f834f;
  background: #514128; border-radius: 8px; padding: 7px 10px;
  font-weight: 800; font-size: 11px; }
.achievement-toast button:hover { background: #685031; }
.end-action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.end-action-buttons button { min-height: 44px; font-size: 12px; padding: 10px; }

/* Native modal results and achievement gallery share a consistent layout. */
.results-dialog, .achievements-dialog {
  width: min(610px, calc(100% - 28px)); max-height: 92dvh; padding: 0;
  border: 1px solid #556a80; border-radius: 21px; color: #f2f6ff;
  background: #17263c; box-shadow: 0 30px 90px #030811ca;
  overflow-y: auto;
}
.achievements-dialog { width: min(880px, calc(100% - 28px)); }
.results-dialog::backdrop, .achievements-dialog::backdrop {
  background: #060a17d6; backdrop-filter: blur(4px);
}
.results-inner, .achievements-inner { padding: clamp(18px, 3vw, 30px); }
.results-topline, .achievements-head { display: flex; align-items: start;
  justify-content: space-between; gap: 12px; }
.results-kicker { color: #9fe5ce; font-size: 11px; font-weight: 900;
  letter-spacing: 1.7px; margin-top: 10px; }
.results-dialog.victory .results-kicker { color: #ffe2a2; }
.results-inner > h2 { font-size: clamp(27px, 4.6vw, 37px); line-height: 1.12;
  margin: 8px 0 7px; letter-spacing: -.7px; }
#resultsSubtitle { color: #b9cbdf; font-size: 13px; line-height: 1.55;
  margin: 0 0 19px; }
.results-score-hero { display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 23px 12px 19px; border-radius: 17px;
  border: 1px solid #4c827e;
  background: radial-gradient(ellipse at top, #2a5050 0%, #193944 65%, #1b3544);
  text-align: center; }
.results-dialog.victory .results-score-hero {
  border-color: #ae8f54;
  background: radial-gradient(ellipse at top, #49412c 0%, #35342c 60%, #262e3a);
}
#resultsScoreLabel { color: #c4e0dc; font-size: 11px; letter-spacing: 1.4px; font-weight: 900; }
#resultsFinalScore { font-size: clamp(62px, 10vw, 90px); line-height: 1.14;
  font-weight: 950; letter-spacing: -3px; color: #b7ffe7;
  font-variant-numeric: tabular-nums; }
.results-dialog.victory #resultsFinalScore { color: #ffe4a3; }
#resultsBestScore { color: #c1d4d5; font-size: 12px; margin: 2px 0 0; }
.results-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px; margin-top: 16px; }
.results-stat { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px;
  border: 1px solid #384c62; border-radius: 12px; background: #1d3046; }
.results-stat span { color: #a8bed3; font-size: 11px; line-height: 1.4; }
.results-stat strong { font-size: 22px; color: #eff9ff; font-weight: 850;
  font-variant-numeric: tabular-nums; }
.results-awards { border-top: 1px solid #435872; margin-top: 19px; padding-top: 16px; }
.results-awards-heading { display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; align-items: baseline; }
.results-awards-heading h3 { font-size: 14px; margin: 0; }
.results-awards-link { color: #ffdf98; background: transparent; border: none;
  padding: 4px 0; font-size: 11px; font-weight: 850; }
.results-awards-link:hover { text-decoration: underline; }
.results-awards-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0 0; }
.results-award-chip { display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; border: 1px solid #977a47;
  background: #443b2b; color: #ffe6ab; border-radius: 999px; padding: 7px 10px; }
.results-award-empty { color: #9bb2c5; font-size: 12px; margin: 0; }
.results-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: 22px; }
.results-actions button { min-height: 46px; }
.achievements-head h2 { font-size: clamp(25px, 4vw, 32px); letter-spacing: -.5px;
  margin: 1px 0 5px; }
.achievements-head p:last-child { color: #b3c7d9; font-size: 12px;
  line-height: 1.5; margin: 0; }
.achievements-progress { margin: 17px 0 20px; background: #1e3447;
  border: 1px solid #415973; padding: 12px 14px; border-radius: 13px; }
.achievements-progress > div { display: flex; justify-content: space-between;
  flex-wrap: wrap; align-items: baseline; gap: 8px; }
.achievements-progress strong { font-size: 14px; color: #ffe7ae; }
.achievements-progress small { color: #a7bbd0; font-size: 11px; }
.achievements-progress progress { margin-top: 10px; width: 100%; height: 9px;
  accent-color: #e4be65; }
.achievements-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px; padding-bottom: 10px; }
.achievement-card { min-width: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 14px; min-height: 172px; border-radius: 13px;
  background: linear-gradient(155deg, #343727, #272c33);
  border: 1px solid #a18a56; }
.achievement-card.locked { border-color: #3c5067; background: #19283b; }
.achievement-card-top { display: flex; justify-content: space-between;
  align-items: start; gap: 8px; }
.achievement-medal { display: grid; place-items: center; flex: 0 0 39px;
  width: 39px; height: 39px; border-radius: 11px; color: #60431b;
  background: linear-gradient(135deg, #fff5cb, #e9bf6b 55%, #b47a32);
  border: 1px solid #f5d991; font-size: 21px; font-weight: 950;
  box-shadow: inset 0 1px 1px #fff9e3a3; }
.achievement-card.locked .achievement-medal { color: #9cacbe; background: #303b4d;
  border-color: #45566e; box-shadow: none; filter: grayscale(1); }
.achievement-card-status { font-size: 9px; font-weight: 900; letter-spacing: .7px;
  text-transform: uppercase; color: #ffdf9d; padding-top: 4px; }
.achievement-card.locked .achievement-card-status { color: #94a6ba; }
.achievement-card h3 { font-size: 13px; margin: 0; line-height: 1.3; color: #fff4d7; }
.achievement-card.locked h3 { color: #cbd7e6; }
.achievement-card > p { color: #cfcbb8; font-size: 11px; line-height: 1.5;
  margin: 0; flex: 1; }
.achievement-card.locked > p { color: #aebdd1; }
.achievement-card-progress { display: flex; align-items: center; gap: 8px;
  color: #d5c49d; font-size: 10px; }
.achievement-card.locked .achievement-card-progress { color: #a7bcd2; }
.achievement-card-progress progress { width: 100%; min-width: 0; height: 6px;
  accent-color: #ddba66; }
.achievement-card-date { color: #d4c398; font-size: 10px; }
@media (max-width: 760px) {
  .achievements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .achievements-grid { grid-template-columns: 1fr; }
  .achievement-card { min-height: 140px; }
  .results-stats { gap: 7px; }
  .results-stat { padding: 10px; }
  .results-stat strong { font-size: 19px; }
  .results-actions { gap: 8px; }
  .results-actions button { font-size: 12px; padding: 10px 6px; }
  .achievements-inner, .results-inner { padding: 16px; }
}

/* Title-first navigation (Pass: title flow)
   Gameplay is one scene, not the landing screen. All scenes share the same
   accessible header and local save slots, without switching modes in play. */
.landing-screen { min-height: 400px; }
.title-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 350px);
  align-items: center; gap: clamp(24px, 5vw, 58px);
  border: 1px solid #475d79; border-radius: 25px;
  padding: clamp(24px, 5vw, 58px); min-height: 415px;
  background: radial-gradient(ellipse at 96% 2%, #34445e66, transparent 58%),
    linear-gradient(142deg, #1b2e46 0%, #16253c 63%, #1b3c46 100%);
  box-shadow: 0 22px 60px #03081937;
}
.title-kicker { margin: 0 0 12px; font-size: 11px; letter-spacing: 1.5px;
  font-weight: 900; color: #9fe9d9; }
.title-intro h2 { margin: 0; color: #f4f7ff; font-size: clamp(31px, 5vw, 51px);
  line-height: 1.11; letter-spacing: -1.7px; font-weight: 900; max-width: 17ch; }
.title-intro h2 span { display: block; color: #a6f6df; }
.title-description { color: #c3d3e3; max-width: 48ch; font-size: 14px;
  line-height: 1.7; margin: 20px 0 25px; }
.title-main-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.title-main-actions button { display: inline-flex; justify-content: center;
  align-items: center; gap: 9px; min-width: 150px; min-height: 51px;
  padding: 12px 19px; border-radius: 12px; font-size: 14px; font-weight: 900; }
.title-main-actions button span { font-size: 17px; line-height: 1; }
.title-main-actions button:disabled { opacity: .47; cursor: not-allowed; }
.title-save-hint { color: #aebfd1; font-size: 11px; margin: 12px 0 0; }
.title-utilities { margin-top: 23px; justify-content: flex-start; gap: 11px; }
.title-utilities > span { color: #9fbbca; }
.title-showcase { display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-width: 0; position: relative; isolation: isolate; }
.showcase-glow { position: absolute; z-index: -1; width: min(100%, 370px);
  aspect-ratio: 1; background: radial-gradient(circle,
    #49ddc442 0%, #e4b4631f 37%, transparent 72%); filter: blur(13px); }
.showcase-board { display: grid; width: min(100%, 300px);
  aspect-ratio: 1; grid-template-columns: repeat(2, 1fr); gap: 12px;
  background: #10243b; border: 1px solid #455f7c; border-radius: 22px;
  padding: 15px; transform: rotate(-4deg);
  box-shadow: 0 24px 52px #030a1b8c, inset 0 1px 2px #85ccdc4a; }
.showcase-tile { display: flex; align-items: center; justify-content: center;
  position: relative; border-radius: 14px; font-size: clamp(30px, 4vw, 45px);
  line-height: 1; font-weight: 950; color: #102a38; box-shadow:
  inset 0 2px 0 #fff6, inset 0 -3px 7px #122a3840; }
.showcase-tile sup { font-size: .44em; align-self: center; transform: translateY(-.48em); }
.showcase-two { background: #a6d5ff; }
.showcase-three { background: #ea876d; color: #3a1911; }
.showcase-seven { background: #c5b2ed; color: #32214f; }
.showcase-gold {
  background: linear-gradient(145deg, #fff5c6 0%, #e9be61 48%, #b27e2e 80%, #edce80);
  border: 2px solid #fff0b2; color: #452f0a;
}
.showcase-gold small { position: absolute; top: 8px; left: 10px;
  color: #fff2cb; font-size: 18px; background: #986116;
  border-radius: 99px; padding: 2px 4px; box-shadow: 0 1px 3px #542f0a88; }
.title-showcase > p { margin: 22px 0 0; color: #a7c4d4; font-size: 10px;
  letter-spacing: 1.6px; font-weight: 900; }
.title-mode-teasers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 14px; }
.title-mode-teasers > div { display: flex; align-items: center; flex-wrap: wrap;
  gap: 9px; background: #18283f; border: 1px solid #334c67;
  padding: 14px 19px; border-radius: 12px; }
.title-mode-teasers > div > span { font-size: 20px; color: #98e4d0; }
.title-mode-teasers strong { font-size: 13px; }
.title-mode-teasers small { color: #9fb7cc; font-size: 11px; }
.choice-screen { max-width: 940px; margin: 0 auto; padding: 8px 0 24px; }
.choice-back { background: transparent; color: #aee6dd; border: 1px solid #45647c;
  border-radius: 9px; min-height: 39px; padding: 9px 13px;
  font-size: 12px; font-weight: 800; }
.choice-back:hover { background: #1b354c; }
.choice-heading { margin: 29px 0 25px; }
.choice-heading h2 { font-size: clamp(30px, 5vw, 43px); letter-spacing: -1px;
  margin: 0 0 10px; line-height: 1.1; }
.choice-heading > p:last-child { color: #b4c8da; font-size: 13px;
  line-height: 1.7; max-width: 63ch; margin: 0; }
.choice-screen .mode-picker { gap: 16px; }
.choice-screen .mode-picker .mode-option {
  min-height: 196px; padding: 24px 41px 23px 21px;
  grid-template-columns: 55px minmax(0, 1fr); align-items: start;
  border-radius: 18px; transition: transform .15s, border-color .15s, background .15s;
}
.choice-screen .mode-picker .mode-option:hover {
  transform: translateY(-3px); border-color: #90e4d4;
  background: linear-gradient(150deg, #223e4e, #20364d);
}
.choice-screen .mode-picker .mode-option .mode-symbol {
  width: 53px; height: 53px; font-size: 33px; background: #a0f1dc;
  color: #143c40; border-color: #a0f1dc; }
.choice-screen .mode-picker #modeRoguelite .mode-symbol {
  background: #efd092; border-color: #efd092; color: #513a0f; }
.choice-screen .mode-copy { gap: 11px; }
.choice-screen .mode-copy strong { font-size: 23px; }
.choice-screen .mode-copy small { font-size: 13px; color: #c5d6e5; }
.choice-screen .mode-copy em { font-size: 10px; letter-spacing: 1px;
  color: #94decf; font-style: normal; font-weight: 900; text-transform: uppercase; }
.choice-screen .mode-picker #modeRoguelite .mode-copy em { color: #ecd094; }
.choice-screen .mode-picker .mode-check { top: 18px; right: 17px; width: 26px;
  height: 26px; border: 1px solid #647b93; color: #c1eddc;
  background: #2a4254; font-size: 17px; }
.choice-save-note { color: #9bb2c7; font-size: 11px; line-height: 1.6;
  margin: 20px 0 0; }
.continue-slots { display: grid; gap: 13px; }
.save-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) 35px;
  align-items: center; gap: 16px; width: 100%; text-align: left;
  border: 1px solid #4e6880; border-radius: 17px;
  background: linear-gradient(145deg, #21364c, #192a40);
  padding: 20px; min-height: 115px; color: #f3f8ff;
  transition: border-color .15s, background .15s, transform .15s; }
.save-card:hover { border-color: #90edcf; background: #254657;
  transform: translateY(-2px); }
.save-card:focus-visible { outline: 3px solid #ffe29f; outline-offset: 3px; }
.save-card-icon { width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 13px; background: #a6f2e1; color: #133b3f; font-size: 31px; }
.save-card-icon.rogue { background: #ebce93; color: #473109; }
.save-card-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.save-card-copy strong { font-size: 20px; letter-spacing: -.3px; }
.save-status { color: #acdcca; font-size: 11px; font-weight: 750; }
.save-card-detail { font-size: 12px; line-height: 1.5; color: #bdd0e3; }
.save-arrow { justify-self: end; color: #a8e5d7; font-size: 25px; }
.playing-head { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin: -6px 0 13px; padding: 0 0 11px;
  border-bottom: 1px solid #344964; }
.playing-head .overline { margin: 0 0 3px; }
.playing-head strong { font-size: 14px; color: #c2eedf; }
@media (max-width: 760px) {
  .title-hero { grid-template-columns: 1fr; gap: 29px; padding: 25px; }
  .title-intro h2 { max-width: none; }
  .title-showcase { max-width: 270px; margin: 0 auto; width: 100%; }
  .showcase-board { width: min(100%, 250px); }
  .title-showcase > p { margin-top: 13px; }
}
@media (max-width: 580px) {
  .title-hero { padding: 21px; gap: 23px; border-radius: 19px; }
  .title-intro h2 { font-size: clamp(29px, 8vw, 38px); letter-spacing: -1px; }
  .title-description { margin: 15px 0 21px; font-size: 12px; }
  .title-main-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .title-main-actions button { padding: 11px 7px; min-width: 0; font-size: 12px; }
  .title-mode-teasers { grid-template-columns: 1fr; gap: 8px; }
  .title-mode-teasers > div { padding: 11px 13px; }
  .choice-heading { margin: 25px 0 19px; }
  .choice-screen .mode-picker { grid-template-columns: 1fr; gap: 12px; }
  .choice-screen .mode-picker .mode-option {
    min-height: 150px; padding: 20px 35px 18px 15px;
    grid-template-columns: 46px minmax(0, 1fr); }
  .choice-screen .mode-picker .mode-option .mode-symbol {
    width: 45px; height: 45px; font-size: 27px; }
  .choice-screen .mode-copy strong { font-size: 20px; }
  .choice-screen .mode-copy small { font-size: 12px; }
  .save-card { padding: 15px; min-height: 107px;
    grid-template-columns: 42px minmax(0, 1fr) 19px; gap: 11px; }
  .save-card-icon { width: 42px; height: 42px; font-size: 27px; }
  .save-card-copy strong { font-size: 16px; }
  .save-card-detail { font-size: 11px; }
  .top { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .choice-screen .mode-picker .mode-option, .save-card,
  .title-main-actions button { transition: none; }
}

/* Shop navigation now has an intentional way back to title.
   The saved shop visit (including stock and gold) is preserved. */
.shop-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr) minmax(0, 1fr);
  align-items: stretch; gap: 9px; }
.shop-actions > button { min-width: 0; width: 100%; font-size: 12px; }
.shop-actions .primary { max-width: none; }
#shopReturnTitle { border-color: #75839a; }
.playing-head .achievement-open { font-size: 11px; padding: 8px 10px; }
@media (max-width: 650px) {
  .shop-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-actions #shopContinue { grid-column: 1 / -1; }
}

/* Roguelike hazard layer — Pass 1.
   These visual overlays belong to board coordinates, not the moving tiles.
   Keep pointer-events disabled so existing bank clicks / swipes still work.
   The slide animation's moving ghosts use z-index:5; hazards stay at z:4. */
.hazard-layer {
  position: absolute;
  inset: 11px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 9px;
  pointer-events: none;
  z-index: 4;
}
.hazard-slot {
  min-width: 0; min-height: 0; position: relative;
  border-radius: 10px;
  pointer-events: none;
}
.hazard-slot[data-hazard] {
  border: 2px solid var(--hazard-stroke);
  background: var(--hazard-fill);
  box-shadow: inset 0 0 0 2px #fff1, inset 0 -7px 14px #0004;
}
.hazard-slot .hazard-symbol {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 950; font-size: clamp(28px, 5vw, 45px);
  line-height: 1; color: var(--hazard-ink);
  opacity: .38; text-shadow: 0 2px 3px #07141d50;
}
.hazard-slot .hazard-corner-badge {
  position: absolute; bottom: 4px; right: 4px;
  min-width: 22px; min-height: 21px;
  border: 1px solid var(--hazard-stroke);
  border-radius: 6px; padding: 3px 5px;
  display: grid; place-items: center;
  background: #121d32dd; color: var(--hazard-ink);
  font-size: 11px; line-height: 1; font-weight: 950;
  box-shadow: 0 1px 4px #0004;
}
.hazard-cloudy {
  --hazard-stroke: #d2e0ef;
  --hazard-ink: #f4f9ff;
  --hazard-fill:
    radial-gradient(ellipse at 28% 42%, #b9c8db 0%, transparent 52%),
    radial-gradient(ellipse at 70% 60%, #9aafc5 0%, transparent 58%),
    linear-gradient(140deg, #738aa5, #526b86 53%, #344f6c);
}
.hazard-void {
  --hazard-stroke: #a597f1;
  --hazard-ink: #ddd3ff;
  --hazard-fill: repeating-radial-gradient(circle at 50% 50%,
    #654a9d95 0, #654a9d95 7px, #312b5a77 8px, #312b5a77 14px);
}
.hazard-null {
  --hazard-stroke: #ec8b91;
  --hazard-ink: #ffd5d7;
  --hazard-fill: repeating-linear-gradient(135deg,
    #842d4759 0, #842d4759 8px, #421c335e 8px, #421c335e 16px);
}
.hazard-cracked {
  --hazard-stroke: #f1bf78;
  --hazard-ink: #ffe5b6;
  --hazard-fill: repeating-linear-gradient(123deg,
    #73402e4d 0, #73402e4d 8px, #34233554 8px, #34233554 16px);
}
.hazard-greedy {
  --hazard-stroke: #d5b250;
  --hazard-ink: #ffe9a2;
  --hazard-fill: repeating-conic-gradient(from 45deg at 50% 50%,
    #916e2866 0deg 18deg, #473d3254 18deg 36deg);
}
.hazard-slot.hazard-cloudy {
  /* Opaque: clouds genuinely conceal all tile text and coin markers.
     The separate tile's accessible label is also concealed by the UI. */
  background: var(--hazard-fill);
  box-shadow: inset 0 5px 17px #e1ecf477, 0 0 12px #9caebe5f;
}
.hazard-slot.hazard-cloudy .hazard-symbol {
  opacity: .7; transform: translateY(-12%);
}
.hazard-hidden-mark {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #f9fdff; font-size: clamp(18px, 3vw, 26px);
  text-shadow: 0 1px 5px #25405f;
  transform: translateY(16%); pointer-events: none;
}
.hazard-cloud-timer {
  position: absolute; bottom: 3px; right: 4px;
  padding: 1px 5px; border-radius: 999px;
  background: #263b59b8; color: #e4f2ff;
  border: 1px solid #c2d4e7; font-size: 9px; font-weight: 950;
}
/* Field guide provides a useful preview while no hazards spawn yet. */
.hazard-field-guide {
  margin-top: 17px; border-top: 1px solid #526077;
  padding-top: 15px;
}
.hazard-guide-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.hazard-guide-header h4 { margin: 0 0 6px; font-size: 15px; }
.hazard-guide-header p { margin: 0; color: #bdcde0; font-size: 11px; line-height: 1.5; }
.hazard-guide-status { border: 1px solid #6e8398; border-radius: 6px;
  font-size: 9px; color: #b7cbdc; padding: 5px 7px; font-weight: 900;
  letter-spacing: .7px; white-space: nowrap; }
.hazard-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px; margin-top: 13px; }
.hazard-preview-card { display: flex; align-items: center; gap: 10px;
  background: #15273e; border: 1px solid #3d5069; padding: 11px;
  border-radius: 11px; min-width: 0; }
.hazard-preview-card strong { color: #e9f4ff; font-size: 12px; }
.hazard-preview-card p { color: #b2c3d6; line-height: 1.45; margin: 5px 0 0;
  font-size: 10px; }
.hazard-example {
  flex: 0 0 59px; width: 59px; height: 59px;
  display: grid; place-items: center; position: relative;
  border: 2px solid var(--hazard-stroke);
  border-radius: 10px; background: var(--hazard-fill);
  box-shadow: inset 0 2px 2px #fff2, inset 0 -5px 8px #0003;
  color: var(--hazard-ink);
}
.hazard-example b { font-size: 28px; line-height: 1; opacity: .8; }
.hazard-example i { position: absolute; bottom: 8px; color: #fff;
  font-size: 18px; line-height: 1; font-style: normal; font-weight: 900; }
.hazard-example small { position: absolute; bottom: 3px; right: 3px;
  font-weight: 900; font-size: 10px; border-radius: 4px; padding: 2px 4px;
  background: #18273ddc; border: 1px solid var(--hazard-stroke);
}
@media (max-width: 580px) {
  .hazard-layer { inset: 8px; gap: 6px; }
  .hazard-slot { border-radius: 8px; }
  .hazard-slot .hazard-corner-badge { bottom: 2px; right: 2px;
    min-width: 17px; min-height: 17px; padding: 2px 3px; font-size: 9px; }
  .hazard-slot .hazard-symbol { font-size: clamp(23px, 7vw, 33px); }
  .hazard-hidden-mark { font-size: 19px; }
  .hazard-preview-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hazard-layer, .hazard-slot { transition: none; animation: none; }
}

/* Active square hazards and their one-successful-slide telegraph. Warnings
   never capture touches/clicks and don't increase blocker slide costs. */
.hazard-alert {
  margin: 0 0 11px; padding: 10px 13px;
  background: linear-gradient(120deg, #46352b, #302d3b);
  border: 1px solid #e5b879; border-radius: 10px;
  color: #ffebc9; font-weight: 850; font-size: 12px;
  line-height: 1.5;
}
.hazard-slot.hazard-incoming {
  border: 2px dashed #ffe4a5;
  background: repeating-linear-gradient(135deg,
    #8c6a3055 0, #8c6a3055 8px, #392d445e 8px, #392d445e 16px);
  box-shadow: inset 0 0 0 2px #ffd98f44, 0 0 14px #ffc5714d;
}
.hazard-warning-symbol {
  position: absolute; display: grid; place-items: center;
  top: 4px; left: 5px; width: 24px; height: 24px;
  border: 2px solid #ffe6b5; border-radius: 999px;
  background: #4c3928; color: #fff3d4; font-size: 17px;
  font-weight: 950; line-height: 1;
}
.hazard-warning-label {
  position: absolute; bottom: 3px; left: 3px; right: 3px;
  text-align: center; text-transform: uppercase;
  font-size: clamp(7px, 1.05vw, 10px); font-weight: 950;
  line-height: 1.15; padding: 3px 1px; border-radius: 4px;
  background: #3a2b32eb; color: #ffebc4;
  letter-spacing: .2px;
}
.ghost-cloud-cover {
  background: linear-gradient(145deg, #92a7bc, #4c6885);
  color: #fff; border: 1px solid #dce6f0;
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: inherit; font-size: 22px; text-shadow: 0 1px 4px #294157;
}
@media (max-width: 580px) {
  .hazard-warning-symbol { top: 2px; left: 2px; width: 19px;
    height: 19px; font-size: 13px; }
  .hazard-warning-label { font-size: 7px; letter-spacing: -.2px; }
  .hazard-alert { font-size: 11px; }
}

/* Pass 4: readable hazard status, click-through Eraser targets and colour-safe
   Cloudy animations. Keep overlays pointer-transparent on mobile/desktop. */
.board-hazard-status {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; margin: 0 0 10px;
  background: #1c3145; border: 1px solid #526d82; border-radius: 11px;
  min-height: 47px; color: #edf5ff;
}
.board-hazard-status[hidden], .hazard-alert[hidden] { display: none; }
.board-hazard-icon { display: grid; place-items: center;
  width: 29px; height: 29px; border: 1px solid #aa9564;
  color: #ffe3a9; border-radius: 8px; flex: 0 0 auto;
  background: #453b36; font-size: 17px; }
.board-hazard-info { display: flex; flex: 1; flex-direction: column;
  min-width: 0; gap: 3px; }
.board-hazard-info strong { color: #f8e4b5; font-size: 12px; }
.board-hazard-info small { font-size: 11px; line-height: 1.5; color: #bccfdf; }
#boardHazardHelp { display: grid; place-items: center; flex: 0 0 29px;
  width: 29px; height: 29px; border-radius: 8px;
  border: 1px solid #5d7c99; color: #dff4eb; background: #274455;
  font-size: 14px; font-weight: 900; }
#boardHazardHelp:hover, #boardHazardHelp:focus-visible {
  background: #3b5b72; outline-color: #a2e8d6;
}
.hazard-alert[data-hazard="cloudy"] { border-color: #d2e0ef; }
.hazard-alert[data-hazard="void"] { border-color: #af9af0; }
.hazard-alert[data-hazard="null"] { border-color: #ed959a; }
.hazard-alert[data-hazard="cracked"] { border-color: #e8bb7b; }
.hazard-alert[data-hazard="greedy"] { border-color: #e5c96c; }
.hazard-slot.hazard-incoming {
  border-width: 3px; outline: 2px dashed #fff0c3;
  outline-offset: -7px;
}
.hazard-slot.hazard-erase-target {
  outline: 3px solid #9df6d6;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 3px #295c5d7d, 0 0 17px #90ffe29e;
}
.hazard-erase-label {
  position: absolute; top: 3px; right: 3px; z-index: 5;
  font-size: 9px; font-weight: 950; letter-spacing: .4px;
  background: #163f40; color: #c0ffe8; border: 1px solid #a0f4db;
  border-radius: 5px; padding: 3px 4px; line-height: 1;
}
.cell.gold-tile.already-banked {
  filter: saturate(.65); border-color: #a79060;
  box-shadow: inset 0 1px 4px #463c2790, 0 2px 6px #0002;
}
.cell.gold-tile.already-banked::after {
  content: "✓";
  position: absolute; top: 3px; right: 4px; z-index: 4;
  width: 19px; height: 19px; border-radius: 99px;
  background: #243d43; border: 1px solid #e6d8a5;
  color: #fff6da; display: grid; place-items: center;
  font-size: 12px; font-weight: 900;
  pointer-events: none;
}
.tile-ghost.ghost-clouded {
  background: linear-gradient(145deg, #a2b6c9, #506985 55%, #3a536f);
  border: 2px solid #d5e4ef; color: #f7fcff;
  box-shadow: inset 0 2px 9px #e9f3ff60, 0 2px 10px #0004;
}
@media (max-width: 580px) {
  .board-hazard-status { padding: 8px 9px; gap: 7px; }
  .board-hazard-info strong { font-size: 11px; }
  .board-hazard-info small { font-size: 10px; }
  .hazard-erase-label { font-size: 8px; padding: 2px 3px; }
  .hazard-warning-label { font-size: 9px; padding: 3px 1px; }
  .hazard-slot.hazard-incoming { outline-offset: -5px; }
  .cell.gold-tile.already-banked::after {
    width: 16px; height: 16px; font-size: 10px; top: 2px; right: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hazard-slot.hazard-incoming,
  .hazard-slot.hazard-erase-target { animation: none; transition: none; }
}

/* Purchased Runestones mark board coordinates without intercepting input. */
.enchantment-layer { position:absolute; inset:11px; z-index:3;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(0,1fr)); gap:9px; pointer-events:none; }
.enchantment-slot { min-width:0; min-height:0; position:relative;
  border-radius:10px; pointer-events:none; }
.enchantment-slot[data-enchantment] { border:3px solid #ffe49a;
  background:#e6ae4320; box-shadow:inset 0 0 0 2px #fff7ca7d, 0 0 11px #ffe28f66; }
.enchantment-slot[data-enchantment="power-prism"] { border-color:#beabff;
  background:#a389ef22; box-shadow:inset 0 0 0 2px #ede3ff80,0 0 11px #a792f388; }
.enchantment-mark { position:absolute; top:2px; right:3px; padding:2px 4px;
  border-radius:5px; font-size:11px; font-weight:900; color:#fff4c7;
  background:#45321cd9; }
.enchantment-slot[data-enchantment="power-prism"] .enchantment-mark {
  color:#efe5ff; background:#332455dc; }
.enchantment-remaining { position:absolute; bottom:2px; left:3px;
  border-radius:5px; padding:2px 5px; font-size:10px; line-height:1;
  color:#fff; font-weight:900; background:#17263ce6; border:1px solid #fff9; }
.enchantment-status { margin:0 0 10px; padding:7px 10px;
  background:#263246; border:1px solid #a999ea; border-radius:9px;
  color:#f8e5ff; font-size:11px; font-weight:750; }
.enchantment-status[hidden] { display:none; }
@media(max-width:580px) { .enchantment-layer { inset:8px; gap:6px; }
  .enchantment-mark { font-size:9px; } .enchantment-remaining { font-size:9px; } }
/* Pass 2 Runestones: each square type has a legible, distinct outline.
   Symbols are text-visible and never intercept touch or keyboard banking. */
.enchantment-slot[data-enchantment="echo-seal"] {
  border-color: #d3b6ff; background: #8a67cd24;
  box-shadow: inset 0 0 0 2px #ede3ff8f,0 0 14px #b296ed88;
}
.enchantment-slot[data-enchantment="twin-mint"] {
  border-color: #ffd17a; background: #e3ad4030;
  box-shadow: inset 0 0 0 2px #fff2be9b,0 0 16px #ffe19988;
}
.enchantment-slot[data-enchantment="time-sanctuary"] {
  border-color: #8fe9dc; background: #4aacb428;
  box-shadow: inset 0 0 0 2px #ccfff38c,0 0 15px #8ef1de78;
}
.enchantment-slot[data-enchantment="shatter-crest"] {
  border-color: #ffab9d; background: #dd6b6630;
  box-shadow: inset 0 0 0 2px #ffe6d58a,0 0 14px #ffb09a77;
}
.enchantment-slot[data-enchantment="echo-seal"] .enchantment-mark {
  background: #3b295c; color: #e8d4ff;
}
.enchantment-slot[data-enchantment="time-sanctuary"] .enchantment-mark {
  background: #1f5a5b; color: #d2fff0;
}
.enchantment-slot[data-enchantment="shatter-crest"] .enchantment-mark {
  background: #602e39; color: #ffe6d6;
}
.prism-power-mark {
  position: absolute; left: 5px; bottom: 5px; z-index: 3;
  padding: 2px 4px; border-radius: 5px;
  font-size: 11px; line-height: 1; font-weight: 950;
  color: #fff4ff; background: #55328f;
  border: 1px solid #ebd3ff; box-shadow: 0 2px 5px #261a4266;
  pointer-events: none;
}
.cell.prism-charged { box-shadow: inset 0 0 0 2px #ae88f2, 0 0 9px #aa82ed44; }
.shop-offer-card.runestone-offer {
  border-color: #c3a7f0; border-top: 3px solid #ffe19b;
  background: linear-gradient(145deg, #36324e, #253449);
}
.shop-offer-card.runestone-offer .shop-offer-type {
  color: #ffe3ac; letter-spacing: .04em; font-weight: 900;
}
@media (max-width: 580px) {
  .prism-power-mark { left: 3px; bottom: 3px; font-size: 9px; }
  .enchantment-slot[data-enchantment] { border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .enchantment-slot, .cell.prism-charged { animation: none; }
}

/* Hazard-defence permanents share the two standard permanent slots.
   The shop distinguishes them from scoring and economy items. */
.shop-offer-card.hazard-counter-offer {
  border-color: #618f8a;
  background: linear-gradient(155deg, #1f3b44, #1c2d43);
}
.shop-offer-card.hazard-counter-offer .shop-offer-type {
  color: #a6f3d9;
  letter-spacing: .5px;
}
.equip-chip.hazard-counter-equipped {
  border-color: #69b99d;
  background: linear-gradient(130deg, #264a45, #283e52);
  color: #d9ffee;
}


/* Numberworld art direction · Pass 1. The artwork is deliberately outside
   the mathematical board and must never replace readable boss/offer text. */
:root {
  --art-ink: #152638;
  --art-jade: #7de0cd;
  --art-gold: #e8bb6f;
  --art-violet: #795b97;
  --art-ember: #d88f8d;
}
.shop-merchant-strip {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  margin-top: 17px;
  padding: 11px 17px 11px 12px;
  overflow: hidden;
  border: 1px solid #96765b;
  border-radius: 16px;
  background: radial-gradient(ellipse at 10% 50%, #d4a76d2e, transparent 52%),
    linear-gradient(115deg, #303245, #24273b 58%, #263c45);
}
.shop-merchant-strip img {
  display: block; width: 98px; height: 98px; border-radius: 13px;
  border: 1px solid #c09a6c99; object-fit: cover;
  box-shadow: 0 8px 21px #080e2280;
}
.shop-merchant-copy { min-width: 0; }
.shop-merchant-kicker {
  margin: 0 0 5px; color: #f3c994; font-size: 9px;
  font-weight: 900; letter-spacing: .13em;
}
.shop-merchant-copy strong { font-size: clamp(16px, 2.4vw, 21px); letter-spacing: -.03em;
  color: #f9e4bf; line-height: 1.25; }
.shop-merchant-copy > p:last-child {
  margin: 7px 0 0; max-width: 47ch; color: #d3d8df;
  font-size: 12px; line-height: 1.55;
}
.shop-dialog .shop-explanation { margin-top: 13px; }
.shop-boss-layout, .boss-rule-body {
  display: flex; align-items: flex-start; gap: 13px; min-width: 0;
}
.shop-boss-copy, .boss-rule-copy { min-width: 0; flex: 1; }
.shop-boss-portrait {
  flex: none; width: 112px; height: 112px; border-radius: 13px;
  border: 1px solid #d59c9b90; object-fit: cover;
  box-shadow: 0 9px 23px #140a1a88;
}
.shop-boss-copy > p:not(.shop-boss-kicker) {
  font-size: 12px; line-height: 1.6; color: #efd5d8; margin: 7px 0 0;
}
.shop-boss-copy .shop-boss-target {
  border-top: 1px solid #805d6e; padding-top: 9px;
  font-weight: 800; color: #ffe0c4;
}
.boss-rule-portrait {
  flex: none; width: 68px; height: 68px; border-radius: 10px;
  object-fit: cover; border: 1px solid #e6a6a68c;
  box-shadow: 0 5px 14px #130b2180;
}
.boss-rule-copy .boss-rule-heading { align-items: center; }
@media (max-width: 560px) {
  .shop-merchant-strip { grid-template-columns: 74px minmax(0, 1fr); gap: 11px;
    padding: 9px; }
  .shop-merchant-strip img { width: 74px; height: 74px; border-radius: 9px; }
  .shop-merchant-kicker { font-size: 8px; letter-spacing: .07em; }
  .shop-merchant-copy strong { font-size: 16px; }
  .shop-merchant-copy > p:last-child { font-size: 11px; margin-top: 3px; }
  .shop-boss-portrait { width: 74px; height: 74px; border-radius: 9px; }
  .shop-boss-layout, .boss-rule-body { gap: 9px; }
  .boss-rule-portrait { width: 52px; height: 52px; }
}


/* Numberworld · Shop transformation Pass 2.
   Functional prices, descriptions, accessible controls and stock are untouched. */
.shop-dialog {
  border-color: #7d756e;
  background: linear-gradient(145deg, #17283d, #142238 55%, #1a2b3c);
  box-shadow: 0 38px 110px #020716e8, inset 0 1px 0 #f0d8a420;
}
.shop-dialog-inner { padding: clamp(16px, 3vw, 29px); }
.shop-head {
  padding-bottom: 13px;
  border-bottom: 1px solid #bd9b7440;
}
.shop-head .overline { color: #e8c18c; letter-spacing: 1.5px; }
.shop-head h2 { color: #fff0d2; font-weight: 900; }
.shop-head .shop-round { color: #bdd2da; }
.shop-wallet {
  border-color: #dbb77590; background: linear-gradient(155deg, #4f382d, #2d2b35);
  box-shadow: inset 0 1px 0 #ffe3a73d, 0 7px 20px #090b1c50;
}
.shop-wallet-symbol {
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 30% 30%, #ffedb4, #efbf60 55%, #a36e33 100%);
  box-shadow: inset 0 0 0 2px #fff1b480, 0 2px 6px #0005;
  color: #634327 !important; font-size: 12px !important;
}
.shop-wallet strong { color: #fff0bd; }
.shop-merchant-strip {
  position: relative;
  min-height: 130px;
  grid-template-columns: 112px minmax(0,1fr) auto;
  gap: 17px;
  margin-top: 17px;
  padding: 12px 22px 12px 12px;
  border: 1px solid #c5996a;
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 50%, #f3d29e33, transparent 40%),
    radial-gradient(circle at 99% -20%, #a587ac44, transparent 55%),
    linear-gradient(117deg, #494052, #302c43 55%, #1e3545);
  box-shadow: inset 0 1px 0 #ffdeac33, 0 10px 29px #07101b4d;
}
.shop-merchant-strip::after {
  content: ""; position: absolute; left: 136px; right: 20px; bottom: 5px;
  height: 1px; background: linear-gradient(90deg, #e3b5766b, transparent);
  pointer-events: none;
}
.shop-merchant-strip img {
  width: 112px; height: 112px; border: 2px solid #e2b57c;
  border-radius: 15px; box-shadow: 0 10px 22px #140e2680;
}
.shop-merchant-copy { position: relative; z-index: 1; }
.shop-merchant-kicker { color: #f0c68b; }
.shop-merchant-copy strong { font-size: clamp(18px, 2.5vw, 24px); }
.shop-merchant-copy .shop-merchant-message {
  color: #e6d9d2; font-size: 13px; line-height: 1.55;
  margin: 8px 0 0; max-width: 50ch;
}
.shop-merchant-trinkets {
  display: flex; align-items: center; gap: 5px; align-self: center;
  transform: rotate(-8deg); opacity: .94; flex: none;
}
.shop-merchant-trinkets span {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 9px; border: 1px solid #ffeca888;
  background: linear-gradient(145deg, #ffe4a0, #d79a53 78%);
  color: #53362e; font-weight: 900; font-size: 16px;
  box-shadow: inset 0 2px 1px #fff7ca99, 0 5px 9px #170e244d;
}
.shop-merchant-trinkets span:nth-child(2) { transform: translateY(-17px) rotate(12deg); background: linear-gradient(145deg,#bee7d9,#64adab); }
.shop-merchant-trinkets span:nth-child(3) { transform: translateY(10px) rotate(-10deg); background: linear-gradient(145deg,#eedcff,#a48cca); }
.shop-dialog .shop-explanation {
  margin: 13px 0 0; padding: 10px 13px;
  border: 1px solid #506574; border-radius: 11px;
  background: #1a3342; color: #c8dadc; font-size: 12px;
}
.shop-guide {
  border: 1px solid #ffffff1c; border-radius: 10px;
  margin: 8px 0 5px; padding: 0 12px;
  background: #142438; color: #c4d7e5; font-size: 12px;
}
.shop-guide summary {
  cursor: pointer; list-style-position: outside; padding: 8px 0;
  color: #b6ccd9; font-weight: 750; font-size: 11px;
}
.shop-guide summary:hover { color: #eef3ff; }
.shop-guide summary:focus-visible { outline: 3px solid #ffce80; outline-offset: 4px; }
.shop-guide p { line-height: 1.65; margin: 4px 0 12px; max-width: 78ch; }
.shop-notice {
  min-height: 0; margin: 10px 0 14px;
  padding: 9px 12px; border-left: 3px solid #83bcae;
  border-radius: 0 8px 8px 0; background: #18394770;
  color: #dcf5e9; font-size: 12px;
}
.shop-section-heading { margin: 23px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid #60748555; }
.shop-section-heading h3 { color: #fff2d8; font-size: 19px; }
.shop-section-heading > span { color: #bdcedb; }
.shop-offers { display: grid; grid-template-columns: 1fr; gap: 23px; }
.shop-offer-group { min-width: 0; }
.shop-offer-group-heading {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 5px 12px; margin: 0 0 10px;
}
.shop-offer-group-heading strong { font-size: 13px; color: #f4d4a0; letter-spacing: .01em; }
.shop-offer-group--consumable .shop-offer-group-heading strong { color: #dacafb; }
.shop-offer-group-heading span { font-size: 11px; color: #a9bcd0; }
.shop-offer-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px;
}
.shop-offer-card {
  --offer-accent: #e7be85;
  --offer-soft: #5b4944;
  display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 248px;
  padding: 15px; border: 1px solid #766c69; border-top: 3px solid var(--offer-accent);
  border-radius: 16px;
  background: radial-gradient(circle at 2% 0%, #b78c5d24, transparent 65%),
    linear-gradient(150deg,#243447,#1b2c41 80%);
  box-shadow: inset 0 1px 0 #ffffff1c, 0 10px 20px #070c1c30;
}
.shop-offer-card--consumable {
  --offer-accent: #bdabea; --offer-soft: #55476f;
  border-color: #625b83; border-top-color: var(--offer-accent);
  background: radial-gradient(circle at 2% 0%, #9576c125, transparent 65%),
    linear-gradient(150deg,#292f4a,#202a41 80%);
}
.shop-offer-card.shop-offer-card--ward {
  --offer-accent: #8ddfc8; --offer-soft: #345950;
  border-color: #518277; border-top-color: var(--offer-accent);
  background: radial-gradient(circle at 2% 0%, #72d1b921, transparent 65%),
    linear-gradient(150deg,#203e43,#1b2d41 80%);
}
.shop-offer-card:not(.sold-out):hover { box-shadow: inset 0 1px 0 #ffffff2a, 0 15px 26px #040a1b60; }
.shop-offer-card.sold-out { min-height: 166px; opacity: .8; gap: 7px;
  border-style: dashed; border-top-style: solid; }
.shop-offer-card.sold-out .shop-offer-feature { display: none; }
.shop-offer-card.sold-out .shop-item-name { color: #bdcbda; }
.shop-offer-feature {
  display: grid; grid-template-columns: 90px minmax(0,1fr);
  gap: 13px; align-items: center; min-width: 0;
}
.shop-item-art {
  display: grid; place-items: center; flex: none;
  width: 90px; height: 94px; padding: 6px;
  border-radius: 13px; border: 1px solid #c7a5769c;
  background: radial-gradient(circle at 38% 20%, #fce1a63a, transparent 58%),
    linear-gradient(145deg,#443a43,#263b4b);
  box-shadow: inset 0 1px 0 #ffffff24, 0 6px 15px #080e2380;
}
.shop-item-art--ward {
  border-color: #8bcdbb99;
  background: radial-gradient(circle at 30% 16%,#a3f4dc4b,transparent 65%),
    linear-gradient(145deg,#2c5b57,#24424b);
}
.shop-item-art--consumable {
  border-color: #b7a6e499;
  background: radial-gradient(circle at 30% 16%,#ceb7ee4b,transparent 65%),
    linear-gradient(145deg,#554868,#30364f);
}
.shop-item-icon { width: 100%; height: 100%; overflow: visible; display: block; }
.shop-item-art--small { width: 40px; height: 40px; padding: 3px; border-radius: 9px; }
.shop-item-art--tiny { width: 22px; height: 22px; padding: 1px; border-radius: 5px; }
.shop-offer-info { display: flex; flex-direction: column; align-items: flex-start;
  gap: 7px; min-width: 0; }
.shop-offer-type {
  display: inline-flex; max-width: 100%; letter-spacing: .055em;
  font-size: 10px; font-weight: 850; text-transform: uppercase;
  color: #f2c991; line-height: 1.3;
}
.shop-offer-card--consumable .shop-offer-type { color: #d7cbff; }
.shop-offer-card--ward .shop-offer-type { color: #b3f7e4; }
.shop-item-name { display: block; font-size: 18px; color: #fff8e9;
  font-weight: 850; line-height: 1.2; letter-spacing: -.035em; }
.shop-price {
  margin: 0; display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 3px 6px; color: #ffdfab; line-height: 1.2;
}
.shop-price-coin { color: #f9d176; font-size: 14px; }
.shop-price-value { font-variant-numeric: tabular-nums; font-size: 21px; color: #ffe5ae; }
.shop-price-unit { font-weight: 750; font-size: 11px; }
.shop-price-original { color: #c6b7a1; font-size: 10px; font-weight: 650;
  text-decoration: line-through; }
.shop-item-description { margin: 0; color: #d2deed; font-size: 12px;
  line-height: 1.6; flex: 1; }
.shop-card-actions { margin-top: auto; display: grid; gap: 7px; }
.shop-buy-button, .shop-mini-button { min-height: 42px; border-radius: 10px;
  font-size: 12px; line-height: 1.4; white-space: normal; }
.shop-buy-button {
  background: linear-gradient(145deg,#b2f7e4,#75dbc4);
  border-color: #b8f5e7; color: #102f36;
  box-shadow: inset 0 1px 0 #ffffff90, 0 3px 9px #06182966;
}
.shop-buy-button:not(:disabled):hover { background: #d4fff5; border-color: #dbfff4; }
.shop-mini-button { background: #304b60; border-color: #698799; color: #effafc; }
.shop-replace-label { margin: 0; color: #d7e1e7; }
.shop-dialog button:disabled { opacity: .58; }
.shop-inventory {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px;
}
.shop-inventory-group {
  border: 1px solid #526074; border-radius: 14px;
  padding: 13px; background: #17283e;
}
.shop-inventory-group h4 { margin: 0 0 11px; color: #f0e0bd; font-size: 13px; }
.shop-inventory-group:nth-child(2) h4 { color: #dacbff; }
.shop-inventory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.shop-inventory-slot {
  min-height: 132px; padding: 11px; gap: 7px;
  background: #172337; border-color: #617084; border-radius: 11px;
}
.shop-inventory-slot.has-item {
  background: linear-gradient(155deg,#25364a,#1c3042);
  border: 1px solid #708c88;
}
.shop-slot-content { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shop-slot-name { font-size: 12px; color: #f9f9ee; font-weight: 850; line-height: 1.3; }
.shop-slot-label { text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.shop-slot-content .shop-slot-name { min-width: 0; overflow-wrap: anywhere; }
.shop-empty-slot-mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px dashed #6c829a; color: #a0bacb; border-radius: 9px;
  font-size: 24px; font-weight: 400;
}
.shop-inventory-slot .shop-mini-button { margin-top: auto; }
.shop-actions {
  padding: 14px 0 3px; margin-top: 18px;
  background: linear-gradient(to bottom, #142339f3, #142339 35%);
  border-color: #977c654f;
  box-shadow: 0 -10px 25px #0e1b2d90;
}
.shop-actions .primary { background: #8de8d1; color: #143239; }
.shop-actions .primary:hover { background: #b9faeb; }
.equip-chip--illustrated {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px; min-width: 0; text-align: left;
}
.equip-chip--illustrated .shop-item-art { flex: none; }
.equip-chip-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
@media (max-width: 820px) {
  .shop-merchant-strip { grid-template-columns: 96px minmax(0,1fr); }
  .shop-merchant-strip img { width: 96px; height: 96px; }
  .shop-merchant-trinkets { display: none; }
}
@media (max-width: 720px) {
  .shop-inventory { grid-template-columns: 1fr; }
  .shop-offer-pair { grid-template-columns: 1fr; gap: 10px; }
  .shop-offer-card { min-height: 192px; }
}
@media (max-width: 560px) {
  .shop-dialog { border-radius: 14px; max-height: 96dvh; }
  .shop-head { gap: 8px; }
  .shop-head h2 { font-size: 24px; }
  .shop-wallet { padding: 8px 9px; gap: 5px; }
  .shop-wallet-symbol { width: 21px; height: 21px; font-size: 11px !important; }
  .shop-wallet strong { font-size: 21px; }
  .shop-merchant-strip {
    min-height: 0; grid-template-columns: 77px minmax(0,1fr);
    gap: 11px; padding: 9px; border-radius: 12px;
  }
  .shop-merchant-strip img { width: 77px; height: 77px; border-radius: 9px; }
  .shop-merchant-strip::after { display: none; }
  .shop-merchant-copy strong { font-size: 17px; }
  .shop-merchant-copy .shop-merchant-message { font-size: 11px; }
  .shop-offer-feature { grid-template-columns: 75px minmax(0,1fr); gap: 11px; }
  .shop-item-art--large { width: 75px; height: 78px; }
  .shop-item-name { font-size: 17px; }
  .shop-offer-card { padding: 13px; border-radius: 12px; }
  .shop-offer-group-heading strong { font-size: 12px; }
  .shop-offer-group-heading span { font-size: 10px; }
  .shop-inventory-group { padding: 11px; }
  .shop-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px; padding-bottom: 8px; }
  .shop-actions > button { min-height: 42px; font-size: 11px; }
  .shop-actions .primary { grid-column: 1 / -1; max-width: none; }
  .equip-chip--illustrated { flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; text-align: center; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-dialog .shop-offer-card, .shop-dialog button, .shop-dialog .shop-item-icon {
    transition: none !important; animation: none !important;
  }
}


/* ── Numberworld boss encounters · Visual Pass 3 ──────────────────────────
   Accent colour signifies the illustrated opponent, never the danger/score
   status. Maths and rule text always remain normal selectable HTML.
   No animation controls gameplay or requires waiting to dismiss a dialog. */
:is(.boss-rule, .shop-boss-preview, .boss-intro-dialog,
    .boss-victory-banner, .results-boss-victory) {
  --boss-accent: #f4bea2;
  --boss-tint: #594056;
}
:is(.boss-rule, .shop-boss-preview, .boss-intro-dialog,
    .boss-victory-banner, .results-boss-victory)[data-boss="blockade"] {
  --boss-accent: #eeb2a0; --boss-tint: #603c4b;
}
:is(.boss-rule, .shop-boss-preview, .boss-intro-dialog,
    .boss-victory-banner, .results-boss-victory)[data-boss="five-thief"] {
  --boss-accent: #f1c08e; --boss-tint: #594057;
}
:is(.boss-rule, .shop-boss-preview, .boss-intro-dialog,
    .boss-victory-banner, .results-boss-victory)[data-boss="scorekeeper"] {
  --boss-accent: #f2d091; --boss-tint: #573d4d;
}
:is(.boss-rule, .shop-boss-preview, .boss-intro-dialog,
    .boss-victory-banner, .results-boss-victory)[data-boss="silent-seven"] {
  --boss-accent: #b1dcee; --boss-tint: #384366;
}
:is(.boss-rule, .shop-boss-preview, .boss-intro-dialog,
    .boss-victory-banner, .results-boss-victory)[data-boss="power-snob"] {
  --boss-accent: #e0c1f4; --boss-tint: #573d64;
}
:is(.boss-rule, .shop-boss-preview, .boss-intro-dialog,
    .boss-victory-banner, .results-boss-victory)[data-boss="timekeeper"] {
  --boss-accent: #f7cf8c; --boss-tint: #405464;
}
:is(.boss-rule, .shop-boss-preview, .boss-intro-dialog,
    .boss-victory-banner, .results-boss-victory)[data-boss="three-curse"] {
  --boss-accent: #f5b5d9; --boss-tint: #633753;
}
.boss-rule[data-boss] {
  border-color: var(--boss-accent);
  border-width: 1px;
  background: radial-gradient(circle at -10% -10%, var(--boss-tint), transparent 70%),
    linear-gradient(130deg, #31273d, #2c2c41);
  box-shadow: inset 0 1px 0 #ffffff24;
}
.boss-rule[data-boss] .boss-rule-heading strong { color: #fff3ed; }
.boss-rule[data-boss] .boss-label { color: var(--boss-accent); }
.boss-rule[data-boss] .boss-rule-heading > span:first-child { color: var(--boss-accent); }
.boss-rule[data-boss] .boss-rule-portrait {
  border: 2px solid var(--boss-accent); border-radius: 10px;
  background: #1b2236; box-shadow: 0 5px 16px #170e1d99;
}
.shop-boss-preview[data-boss] {
  border-color: var(--boss-accent);
  background: radial-gradient(ellipse at -12% 25%, var(--boss-tint), transparent 65%),
    linear-gradient(135deg, #33273b, #27253b);
  box-shadow: inset 0 1px 0 #ffe9d12b;
}
.shop-boss-preview[data-boss] .shop-boss-kicker,
.shop-boss-preview[data-boss] .shop-boss-target { color: var(--boss-accent); }
.shop-boss-preview[data-boss] .shop-boss-portrait {
  border: 2px solid var(--boss-accent); border-radius: 13px;
  width: 124px; height: 124px;
}
.shop-boss-preview[data-boss] .shop-boss-layout { align-items: center; }

.boss-intro-dialog {
  width: min(890px, calc(100% - 22px));
  max-height: min(95dvh, 850px); padding: 0; overflow-y: auto;
  border: 2px solid var(--boss-accent);
  border-radius: 24px; color: #f8f4fa;
  background: radial-gradient(circle at 9% 25%, var(--boss-tint), transparent 57%),
    linear-gradient(140deg, #28243d, #151f32 74%);
  box-shadow: 0 35px 95px #050715eb, inset 0 2px 0 #ffe9d02a;
}
.boss-intro-dialog::backdrop {
  background: #040713e8; backdrop-filter: blur(8px);
}
.boss-intro-shell { padding: clamp(16px, 3.4vw, 29px); }
.boss-intro-topline {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 9px; padding-bottom: 15px;
  border-bottom: 1px solid #c9a7a647;
}
.boss-intro-kicker {
  color: var(--boss-accent); font-size: 11px; letter-spacing: .14em;
  font-weight: 900;
}
.boss-intro-skip {
  flex: none; min-height: 37px; padding: 8px 13px;
  border-radius: 9px; border: 1px solid #a2afc3;
  background: #1d2c41; color: #e3edf8;
  font-size: 12px; font-weight: 750;
}
.boss-intro-skip:hover { background: #30415a; }
.boss-intro-layout {
  display: grid; grid-template-columns: minmax(210px, .85fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 27px); align-items: center; padding-top: 19px;
}
.boss-intro-art {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  min-width: 0; border-radius: 19px;
  background: radial-gradient(circle, var(--boss-tint), #1b263b 78%);
  box-shadow: 0 16px 36px #03081980;
}
.boss-intro-art::before {
  content: ""; position: absolute; z-index: -1;
  inset: -16px; border-radius: 28px;
  background: radial-gradient(circle, var(--boss-tint), transparent 65%);
  filter: blur(17px); pointer-events: none;
}
.boss-intro-art > img {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  border: 1px solid var(--boss-accent); border-radius: 18px;
  object-fit: contain; box-shadow: inset 0 2px 0 #ffffff55;
}
.boss-intro-seal {
  position: absolute; right: -9px; bottom: 13px;
  width: 49px; height: 49px; border-radius: 50%;
  display: grid; place-items: center;
  color: #2e2b3e; font-size: 30px;
  background: radial-gradient(circle at 25% 15%, #ffedbc, var(--boss-accent));
  border: 3px solid #f8dba3; box-shadow: 0 5px 15px #080a18a8;
}
.boss-intro-story { min-width: 0; }
.boss-intro-round {
  display: block; color: #aec8d9; font-size: 10px;
  font-weight: 900; letter-spacing: .16em;
}
.boss-intro-story h2 {
  margin: 9px 0 13px; color: #fff2e9;
  font-size: clamp(29px, 4.6vw, 47px); font-weight: 950;
  line-height: 1.06; letter-spacing: -.04em;
}
.boss-intro-quote {
  margin: 0 0 17px; color: var(--boss-accent);
  font-size: clamp(14px, 2vw, 17px); line-height: 1.5;
  font-weight: 600; font-style: italic;
}
.boss-intro-rule {
  border: 1px solid #67748b;
  border-left: 4px solid var(--boss-accent);
  border-radius: 11px; padding: 13px 14px;
  background: #121e31bd;
}
.boss-intro-rule strong {
  color: var(--boss-accent); font-size: 10px;
  letter-spacing: .13em; font-weight: 900;
}
.boss-intro-rule p {
  margin: 7px 0 0; color: #ecedf6;
  font-size: 13px; line-height: 1.65;
}
.boss-intro-target {
  margin: 14px 0 18px; color: #ffe0b8;
  font-size: 14px; font-weight: 850; font-variant-numeric: tabular-nums;
}
.boss-intro-start {
  width: 100%; min-height: 49px; border: 1px solid #b0ffe6;
  border-radius: 11px; background: linear-gradient(140deg, #b8ffea, #76e2c8);
  color: #102c35; font-weight: 900; font-size: 14px;
}
.boss-intro-start:hover { background: #d4fff3; }

.boss-victory-banner {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 13px;
  margin: 0 0 16px; padding: 12px;
  border: 1px solid var(--boss-accent); border-radius: 14px;
  background: radial-gradient(circle at 4% 12%, var(--boss-tint), transparent 64%),
    linear-gradient(135deg, #263e43, #242d3d);
  box-shadow: inset 0 1px 0 #ffefd93d;
}
.boss-victory-banner::after {
  content: "✦"; position: absolute; z-index: -1;
  top: -13px; right: 6px; font-size: 70px;
  color: var(--boss-accent); opacity: .23; pointer-events: none;
}
.boss-victory-banner img {
  width: 86px; height: 86px; border-radius: 12px;
  border: 2px solid var(--boss-accent);
  flex: none; object-fit: cover; box-shadow: 0 5px 16px #06121faa;
}
.boss-victory-copy { min-width: 0; flex: 1; }
.boss-victory-kicker {
  display: block; font-size: 10px; color: #bdf9e2;
  font-weight: 900; letter-spacing: .13em;
}
.boss-victory-copy h3 {
  margin: 5px 0 4px; font-size: 19px; color: #fff0e0;
  font-weight: 900; line-height: 1.23;
}
.boss-victory-copy p {
  margin: 0; font-size: 12px; color: #d8e3e7; line-height: 1.55;
}
.boss-victory-copy .boss-victory-timer {
  margin-top: 7px; color: #fff1b2; font-weight: 850;
}
.round-clear-panel:has(.boss-victory-banner:not([hidden])) {
  border-top-color: #f0b991a8;
}
.results-boss-victory {
  position: relative; display: flex; gap: 14px;
  align-items: center; margin: 0 0 15px;
  padding: 12px; border-radius: 14px;
  border: 1px solid var(--boss-accent);
  background: radial-gradient(circle at 0 0, var(--boss-tint), transparent 64%),
    linear-gradient(145deg, #334747, #282c43);
}
.results-boss-victory img {
  flex: none; width: 88px; height: 88px;
  border-radius: 11px; border: 2px solid var(--boss-accent);
  object-fit: cover; box-shadow: 0 7px 18px #0e102399;
}
.results-boss-copy { min-width: 0; }
.results-boss-kicker {
  display: block; font-size: 10px; letter-spacing: .11em;
  font-weight: 900; color: #bcffe4; margin-bottom: 5px;
}
.results-boss-copy strong { display: block; font-size: 18px; color: #fff3df; }
.results-boss-copy p {
  margin: 6px 0 0; color: #d9e5e7; font-size: 12px; line-height: 1.5;
}

/* The reveal and celebratory shimmer are entirely decorative. */
@keyframes boss-portrait-reveal {
  from { opacity: .5; transform: translateY(12px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes boss-victory-reveal {
  from { opacity: .65; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.boss-intro-dialog[open] .boss-intro-art > img {
  animation: boss-portrait-reveal .42s ease-out both;
}
.boss-victory-banner:not([hidden]),
.results-boss-victory:not([hidden]) {
  animation: boss-victory-reveal .38s ease-out both;
}
@media (max-width: 680px) {
  .boss-intro-dialog { width: calc(100% - 16px); border-radius: 17px; max-height: 96dvh; }
  .boss-intro-shell { padding: 15px; }
  .boss-intro-layout { grid-template-columns: 1fr; padding-top: 13px; gap: 16px; }
  .boss-intro-art { max-width: 245px; margin: 0 auto; width: min(72vw, 245px); }
  .boss-intro-art::before { inset: -8px; }
  .boss-intro-seal { width: 37px; height: 37px; font-size: 23px; }
  .boss-intro-story h2 { margin: 6px 0 9px; font-size: 30px; }
  .boss-intro-quote { font-size: 14px; margin-bottom: 12px; }
  .boss-intro-rule { padding: 10px 12px; }
  .boss-intro-rule p { font-size: 12px; line-height: 1.55; }
  .boss-intro-target { margin: 10px 0 13px; }
  .shop-boss-preview[data-boss] .shop-boss-portrait { width: 90px; height: 90px; }
}
@media (max-width: 400px) {
  .boss-victory-banner { gap: 9px; padding: 9px; }
  .boss-victory-banner img { width: 66px; height: 66px; }
  .boss-victory-copy h3 { font-size: 16px; }
  .boss-victory-copy p { font-size: 11px; }
  .results-boss-victory { gap: 9px; padding: 9px; }
  .results-boss-victory img { width: 66px; height: 66px; }
  .results-boss-copy strong { font-size: 16px; }
  .boss-intro-topline { padding-bottom: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .boss-intro-dialog[open] .boss-intro-art > img,
  .boss-victory-banner:not([hidden]),
  .results-boss-victory:not([hidden]) {
    animation: none !important; transition: none !important;
  }
}


/* ── Numberworld environments · Art Pass 4 ─────────────────────────────
   Stage background is a quiet, labelled panorama outside the tile grid.
   It is driven by the existing stageForRound() and never affects moves. */
#gameScreen[data-stage="1"] { --realm-edge: #9cead1; --realm-glow: #2c706b; }
#gameScreen[data-stage="2"] { --realm-edge: #b5cfe2; --realm-glow: #465f79; }
#gameScreen[data-stage="3"] { --realm-edge: #efbb85; --realm-glow: #74504b; }
#gameScreen[data-stage="4"] { --realm-edge: #d4b4ef; --realm-glow: #65496f; }
.stage-scene {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 13px;
  min-height: 94px; margin: 0 0 15px;
  padding: 16px 24px;
  border: 1px solid var(--realm-edge, #7294a3);
  border-radius: 17px;
  background: #162338;
  box-shadow: inset 0 1px 0 #ffffff34, 0 12px 29px #040a1c59;
}
.stage-scene::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #0d1b30f2 0%, #101e33c8 33%, #14233826 94%);
}
.stage-scene-image {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  pointer-events: none; opacity: .93;
}
.stage-scene-copy {
  display: flex; flex-direction: column; gap: 4px;
  position: relative; z-index: 1; min-width: 0;
}
.stage-scene-copy > span {
  color: var(--realm-edge, #9fe6d6);
  font-size: 10px; letter-spacing: .13em; font-weight: 950;
}
.stage-scene-copy strong { color: #f7f3e7; font-size: clamp(18px,2.5vw,24px);
  line-height: 1.18; letter-spacing: -.03em; }
.stage-scene-copy small { color: #d2e3e6; font-size: 11px; line-height: 1.4; }
.stage-scene-round {
  flex: none; border: 1px solid #e2eee47f;
  border-radius: 999px; padding: 7px 10px;
  background: #111e31cf; color: #f5f4eb;
  font-size: 10px; font-weight: 900; letter-spacing: .09em;
  font-variant-numeric: tabular-nums;
}
#gameScreen[data-stage="1"] .game,
#gameScreen[data-stage="2"] .game,
#gameScreen[data-stage="3"] .game,
#gameScreen[data-stage="4"] .game {
  border-color: var(--realm-edge);
  border-top-width: 3px;
  background: linear-gradient(155deg, #16223a, #131f34);
  box-shadow: 0 18px 40px #0308164d, inset 0 1px 0 #ffffff1a;
}
#gameScreen[data-stage="1"] .hud,
#gameScreen[data-stage="2"] .hud,
#gameScreen[data-stage="3"] .hud,
#gameScreen[data-stage="4"] .hud {
  border-top: 3px solid var(--realm-edge);
}
/* Do not recolour .board, its cells, banking prompts, move values or hazards. */
#gameScreen[data-stage="1"] .playing-head strong,
#gameScreen[data-stage="2"] .playing-head strong,
#gameScreen[data-stage="3"] .playing-head strong,
#gameScreen[data-stage="4"] .playing-head strong {
  color: var(--realm-edge);
}
@media (max-width: 650px) {
  .stage-scene { min-height: 80px; padding: 12px 14px; margin-bottom: 11px; border-radius: 12px; }
  .stage-scene-copy strong { font-size: 17px; }
  .stage-scene-copy > span { font-size: 9px; letter-spacing: .08em; }
  .stage-scene-copy small { font-size: 10px; }
  .stage-scene-round { font-size: 9px; padding: 6px 8px; }
}
@media (max-width: 380px) {
  .stage-scene { gap: 8px; }
  .stage-scene-round { max-width: 91px; text-align: center; line-height: 1.4; }
}

/* ── Title: an illustrated gateway, with original maths board in front ── */
.title-hero {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid #a18e79;
  background:
    radial-gradient(circle at 96% 13%, #78618136, transparent 51%),
    radial-gradient(circle at 5% 98%, #265e6150, transparent 47%),
    linear-gradient(145deg, #222e45, #16233b 59%, #173440);
  box-shadow: inset 0 1px 0 #fff0cc33, 0 25px 66px #0308177a;
}
.title-hero::before {
  content: ""; pointer-events: none; z-index: -1;
  position: absolute; inset: 0; opacity: .14;
  background-image: radial-gradient(circle at center, #fff2c5 1.2px, transparent 2px);
  background-size: 29px 29px;
  mask-image: linear-gradient(90deg, transparent 10%, #000 100%);
}
.title-intro { position: relative; z-index: 2; }
.title-kicker { color: #f0ce91; }
.title-intro h2 span { color: #adf4dd; }
.title-description { color: #d4e0e9; }
.title-showcase { min-height: 342px; }
.title-numberworld-art {
  position: absolute; z-index: -1;
  width: 128%; max-width: none; height: 126%;
  object-fit: cover; object-position: center;
  border-radius: 22px; opacity: .82;
  filter: saturate(.86) drop-shadow(0 18px 28px #060e1d50);
  pointer-events: none; user-select: none;
}
.title-showcase .showcase-glow { z-index: -1; }
.title-showcase .showcase-board {
  position: relative; z-index: 1;
  transform: rotate(-5deg) translateY(12px);
  border-color: #e9d2a5;
  box-shadow: 0 26px 56px #050918c9, inset 0 2px 1px #9bcce05c;
}
.title-showcase > p {
  position: relative; z-index: 2;
  display: block; padding: 7px 12px;
  border-radius: 999px;
  background: #101e34d9; border: 1px solid #b6a4837c;
  color: #ffe4ad; letter-spacing: .12em;
}
.title-primary {
  background: linear-gradient(135deg, #b7f8e6, #78dfc8) !important;
  border: 1px solid #b0ffe7 !important; color: #0c3540 !important;
  box-shadow: inset 0 1px 0 #fff9, 0 8px 21px #6fd0ad44;
}
.title-primary:hover { background: #d2fff3 !important; }
.title-secondary { border-color: #aa957d; background: #334055; }
.title-secondary:hover { background: #465776; }
.title-mode-teasers > div {
  border-color: #6d7274;
  background: linear-gradient(145deg, #24384c, #1b3044);
  box-shadow: inset 0 1px 0 #ffffff17;
}
.title-mode-teasers > div:last-child {
  border-color: #a68a70;
  background: linear-gradient(145deg, #362e46, #1b3043);
}
.title-mode-teasers > div:last-child > span { color: #f6d69b; }
.title-realm-journey {
  margin-top: 24px; padding: 16px 0 0; border-top: 1px solid #4b5e77;
}
.title-realm-journey > header {
  display: flex; justify-content: space-between;
  align-items: end; flex-wrap: wrap; gap: 8px 15px; margin-bottom: 13px;
}
.title-realm-eyebrow {
  display: block; color: #e9bf84; font-size: 9px;
  letter-spacing: .15em; font-weight: 950; margin: 0 0 5px;
}
.title-realm-journey h3 {
  margin: 0; font-size: clamp(16px,2.4vw,19px);
  letter-spacing: -.02em; color: #fff1d8;
}
.title-realm-hint { font-size: 11px; color: #abbdcd; }
.title-realm-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.title-realm-card {
  position: relative; min-width: 0; overflow: hidden;
  border: 1px solid #708493; border-top: 2px solid #9cead1;
  border-radius: 12px; height: 116px;
  background: #192b40; box-shadow: 0 7px 18px #040a1d45;
}
.title-realm--2 { border-top-color: #b5cfe2; }
.title-realm--3 { border-top-color: #efbb85; }
.title-realm--4 { border-top-color: #d4b4ef; }
.title-realm-card img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; }
.title-realm-card::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, #101b2ff0, #101b2f78 43%, transparent 100%); }
.title-realm-card > div { position: absolute; z-index: 1;
  bottom: 9px; left: 10px; right: 8px; }
.title-realm-card span { display: block; font-size: 9px; font-weight: 850;
  letter-spacing: .04em; color: #cfdee6; margin-bottom: 3px; }
.title-realm-card strong { color: #fff4dd; font-size: 13px;
  font-weight: 850; line-height: 1.23; display: block; }
@media (max-width: 820px) {
  .title-realm-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .title-realm-card { height: 102px; }
}
@media (max-width: 760px) {
  .title-showcase { min-height: 290px; }
  .title-numberworld-art { width: 135%; height: 125%; }
}
@media (max-width: 580px) {
  .title-showcase { min-height: 255px; }
  .title-numberworld-art { width: 140%; height: 120%; }
  .title-realm-journey { margin-top: 15px; }
  .title-realm-card { height: 96px; }
  .title-realm-card strong { font-size: 12px; }
  .title-realm-card span { font-size: 8px; }
  .title-realm-hint { font-size: 10px; }
}

/* ── Five original hazard emblems ──
   Existing warning !, NEXT label, corner impact badge and written guide
   remain in place; artwork does not intercept board gestures. */
.hazard-slot .hazard-art-emblem {
  position: absolute; z-index: 2; top: 2px; left: 2px;
  width: clamp(25px, 4.9vw, 42px);
  height: clamp(25px, 4.9vw, 42px);
  display: block; pointer-events: none;
  background-position: center; background-size: contain;
  background-repeat: no-repeat; opacity: .95;
  filter: drop-shadow(0 2px 3px #07101da8);
}
.hazard-slot:not(.hazard-cloudy) .hazard-symbol {
  opacity: .09;
  text-shadow: none;
}
.hazard-slot .hazard-corner-badge, .hazard-slot .hazard-cloud-timer {
  z-index: 4;
}
.hazard-slot.hazard-cloudy .hazard-art-emblem {
  top: 7%; left: 15%; width: 70%; height: 66%;
  opacity: .8; filter: drop-shadow(0 1px 4px #2b41658c);
}
.hazard-slot.hazard-cloudy .hazard-symbol { opacity: .13; }
.hazard-slot.hazard-cloudy .hazard-hidden-mark {
  z-index: 3; transform: translateY(29%);
}
.hazard-slot.hazard-incoming .hazard-art-emblem {
  top: 4px; left: auto; right: 4px;
  width: clamp(24px, 4.4vw, 39px); height: clamp(24px, 4.4vw, 39px);
  opacity: .87;
}
.hazard-slot.hazard-incoming .hazard-warning-symbol { z-index: 4; }
.hazard-slot.hazard-incoming .hazard-warning-label { z-index: 4; }
.hazard-example::before {
  content: ""; position: absolute; z-index: 2; inset: 5px;
  background-size: contain; background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px #080e1d90);
  pointer-events: none;
}
.hazard-example b { opacity: .16; }
.hazard-example i { z-index: 4; }
.hazard-example small { z-index: 4; }
.board-hazard-status[data-hazard] .board-hazard-icon {
  background-size: 28px 28px; background-repeat: no-repeat;
  background-position: center;
}
.board-hazard-status[data-hazard="cloudy"] .board-hazard-icon,
.board-hazard-status[data-hazard="void"] .board-hazard-icon,
.board-hazard-status[data-hazard="null"] .board-hazard-icon,
.board-hazard-status[data-hazard="cracked"] .board-hazard-icon,
.board-hazard-status[data-hazard="greedy"] .board-hazard-icon { font-size: 0; }
.hazard-slot.hazard-cloudy .hazard-art-emblem,
.hazard-slot.hazard-incoming[data-warning="cloudy"] .hazard-art-emblem,
.hazard-example.hazard-cloudy::before,
.board-hazard-status[data-hazard="cloudy"] .board-hazard-icon {
  background-image: url("assets/art/hazard-cloudy.svg");
}
.hazard-slot.hazard-void .hazard-art-emblem,
.hazard-slot.hazard-incoming[data-warning="void"] .hazard-art-emblem,
.hazard-example.hazard-void::before,
.board-hazard-status[data-hazard="void"] .board-hazard-icon {
  background-image: url("assets/art/hazard-void.svg");
}
.hazard-slot.hazard-null .hazard-art-emblem,
.hazard-slot.hazard-incoming[data-warning="null"] .hazard-art-emblem,
.hazard-example.hazard-null::before,
.board-hazard-status[data-hazard="null"] .board-hazard-icon {
  background-image: url("assets/art/hazard-null.svg");
}
.hazard-slot.hazard-cracked .hazard-art-emblem,
.hazard-slot.hazard-incoming[data-warning="cracked"] .hazard-art-emblem,
.hazard-example.hazard-cracked::before,
.board-hazard-status[data-hazard="cracked"] .board-hazard-icon {
  background-image: url("assets/art/hazard-cracked.svg");
}
.hazard-slot.hazard-greedy .hazard-art-emblem,
.hazard-slot.hazard-incoming[data-warning="greedy"] .hazard-art-emblem,
.hazard-example.hazard-greedy::before,
.board-hazard-status[data-hazard="greedy"] .board-hazard-icon {
  background-image: url("assets/art/hazard-greedy.svg");
}
@media (max-width: 580px) {
  .hazard-slot .hazard-art-emblem { width: 25px; height: 25px; top: 1px; left: 1px; }
  .hazard-slot.hazard-cloudy .hazard-art-emblem {
    top: 10%; left: 15%; width: 70%; height: 64%;
  }
  .hazard-slot.hazard-incoming .hazard-art-emblem {
    width: 22px; height: 22px; top: 1px; right: 1px; left: auto;
  }
  .board-hazard-status[data-hazard] .board-hazard-icon { background-size: 26px 26px; }
}

/* ── The achievement cabinet: 16 collectible hand-illustrated medals ── */
.achievements-dialog {
  border-color: #a48e70;
  background: radial-gradient(circle at 93% -10%, #73618936, transparent 48%),
    linear-gradient(145deg, #253047, #17243a 50%, #192b41);
  box-shadow: 0 34px 100px #030814e5, inset 0 1px 0 #ffe6b52c;
}
.achievements-head { align-items: center; }
.achievement-cabinet-heading {
  display: flex; gap: 15px; align-items: center; min-width: 0;
}
.achievement-cabinet-heading > div { min-width: 0; }
.achievement-cabinet-art {
  display: block; flex: none; width: 76px; height: 76px;
  border-radius: 17px; border: 1px solid #a88c6c;
  background: radial-gradient(circle,#ddbc8640,#394057);
  box-shadow: 0 10px 20px #09111e83, inset 0 1px 0 #fff5d545;
}
.achievement-cabinet-heading .overline { color: #f1d49d; font-size: 10px; }
.achievement-cabinet-heading h2 { margin: 0 0 5px; color: #fff1df; }
.achievements-progress {
  position: relative; overflow: hidden; border: 1px solid #ad9169;
  background: linear-gradient(135deg,#373444,#25364a);
  box-shadow: inset 0 2px 0 #ffedc62d; border-radius: 15px; padding: 15px 17px;
}
.achievements-progress::after {
  content: "✦"; position: absolute; top: -35px; right: 10px;
  color: #f2d2a32d; font-size: 125px; pointer-events: none;
}
.achievements-progress > div { position: relative; z-index: 1; }
.achievements-progress strong { color: #ffebb4; font-size: 17px; }
.achievements-progress small { color: #c5d3e1; }
.achievements-progress progress { position: relative; z-index: 1;
  accent-color: #efcc8a; height: 11px; }
.achievements-grid { gap: 14px; }
.achievement-card {
  --medal-highlight: #ffe2a1; --medal-edge: #b68855;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 213px; gap: 9px; padding: 15px;
  border: 1px solid #a68b65;
  border-top: 3px solid var(--medal-edge);
  border-radius: 16px;
  background: radial-gradient(circle at 55% 0,#dbb27b30,transparent 57%),
    linear-gradient(155deg,#374047,#262e3c);
  box-shadow: inset 0 1px 0 #fff4d124, 0 12px 20px #040a1a5e;
}
.achievement-card::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -8px;
  height: 31px; border-top: 2px solid #927c6080;
  background: linear-gradient(0deg,#131e3099,transparent);
  transform: rotate(-3deg); pointer-events: none; z-index: -1;
}
.achievement-card[data-theme="gold"] {
  --medal-highlight: #fff0b3; --medal-edge: #e6bd70;
}
.achievement-card[data-theme="banking"] {
  --medal-highlight: #c0f9eb; --medal-edge: #80cbb5;
}
.achievement-card[data-theme="boss"] {
  --medal-highlight: #f5c0c5; --medal-edge: #c78ea4;
}
.achievement-card[data-theme="craft"] {
  --medal-highlight: #e2d0ff; --medal-edge: #ae96da;
}
.achievement-card[data-theme="survival"] {
  --medal-highlight: #cfe5ff; --medal-edge: #8facd0;
}
.achievement-card-top { align-items: center; gap: 10px; }
.achievement-medal {
  position: relative; isolation: isolate;
  display: grid; place-items: center; flex: 0 0 68px;
  width: 68px; height: 68px; border-radius: 50%;
  border: 4px double var(--medal-highlight);
  color: #fce4b1;
  background: radial-gradient(circle at 32% 20%,#fff1bd5e,transparent 45%),
    linear-gradient(135deg,#766647,#384c54 68%);
  box-shadow: inset 0 0 0 3px #1c2c3b, inset 0 1px 9px #fff2cb59,
    0 6px 11px #050a1990;
}
.achievement-medal::after {
  content: ""; position: absolute; left: 15%; right: 15%; bottom: -9px;
  height: 13px; z-index: -1; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg,var(--medal-edge),var(--medal-highlight),var(--medal-edge));
  clip-path: polygon(0 0,100% 0,80% 100%,50% 65%,20% 100%);
}
.achievement-medal-icon { display: block; width: 86%; height: 86%; }
.achievement-card h3 { color: #fff4e0; font-size: 14px; line-height: 1.32; }
.achievement-card > p { color: #d6e0e5; font-size: 11px; line-height: 1.55; }
.achievement-card-status { color: var(--medal-highlight);
  background: #182638b6; border: 1px solid #ffffff2e;
  border-radius: 6px; padding: 5px 7px; letter-spacing: .08em;
  white-space: normal; text-align: right; }
.achievement-card-date { color: #d9cfb2; margin-top: auto; }
.achievement-card.locked {
  border-color: #43556a; border-top-color: #45566c;
  background: linear-gradient(145deg,#1d2b3c,#162337);
  box-shadow: inset 0 1px 0 #ffffff08, 0 7px 18px #050a1447;
}
.achievement-card.locked::after { border-top-color: #4b5b6c; }
.achievement-card.locked .achievement-medal {
  border: 3px double #637489; color: #99a8b9;
  background: radial-gradient(circle at 35% 20%,#5b6a7654,transparent 55%),
    linear-gradient(140deg,#354557,#202d3f);
  box-shadow: inset 0 0 0 4px #253143, 0 5px 11px #03081769;
  filter: grayscale(1); font-size: 29px;
}
.achievement-card.locked .achievement-medal::after {
  background: linear-gradient(90deg,#415166,#65758b,#415166);
}
.achievement-card.locked h3 { color: #d7e0eb; }
.achievement-card.locked > p { color: #abbfd2; }
.achievement-card.locked .achievement-card-status { color: #b0bdd0; }
.achievement-card-progress { margin-top: auto; font-weight: 800; }
.achievement-card-progress progress { accent-color: #a0bcd0; height: 8px; }
.achievement-button-art { display: block; flex: none; object-fit: contain; }
#achievementOpen .achievement-button-art { width: 31px; height: 31px; }
#gameAchievements .achievement-button-art { width: 25px; height: 25px; }
.achievement-open:has(.achievement-button-art) {
  display: inline-flex; gap: 8px; align-items: center;
}
.title-utilities .achievement-open {
  border: 1px solid #a88c65;
  background: linear-gradient(135deg,#403947,#223d46);
  box-shadow: inset 0 1px 0 #fff3bb2c, 0 8px 16px #040a1a4d;
}
.title-utilities .achievement-open:hover {
  border-color: #f1ca88; background: #514651;
}
@media (max-width: 760px) {
  .achievement-card { min-height: 197px; }
}
@media (max-width: 460px) {
  .achievement-cabinet-heading { gap: 9px; }
  .achievement-cabinet-art { width: 55px; height: 55px; border-radius: 11px; }
  .achievements-head h2 { font-size: 23px; }
  .achievement-card { min-height: 152px; padding: 13px; }
  .achievement-medal { width: 60px; height: 60px; flex-basis: 60px; }
  .achievement-card-status { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-scene-image, .title-numberworld-art, .achievement-medal,
  .title-realm-card, .hazard-art-emblem { animation: none !important; transition: none !important; }
}


/* ─── Pass 5: accessibility, maths legibility and small-screen QA ──────────
   These rules deliberately override artwork passes without changing the
   base tile palette, hazard rules or game state. */

/* A real native dialog, rather than a visual overlay that allows Tab to
   escape to background tiles. The prompt remains timed only while visible. */
dialog.overlay {
  position: fixed; inset: 0;
  width: 100%; max-width: none;
  height: 100dvh; max-height: 100dvh;
  margin: 0; padding: max(14px, env(safe-area-inset-top))
    14px max(14px, env(safe-area-inset-bottom));
  border: 0; border-radius: 0;
  color: var(--text); background: #050914e8;
  overflow-y: auto; overscroll-behavior: contain;
  box-sizing: border-box;
}
dialog.overlay:not([open]) { display: none !important; }
dialog.overlay[open] { display: grid; place-items: center; }
dialog.overlay::backdrop { background: #030716c7; }
dialog.overlay > .dialog {
  width: min(100%, 460px);
  max-height: min(91dvh, 720px);
  padding: clamp(19px, 4.5vw, 30px);
}
.dialog h2 { letter-spacing: -.03em; line-height: 1.25; overflow-wrap: anywhere; }
.dialog h2 sup { font-size: .56em; vertical-align: super; line-height: 0; }
.dialog .close {
  display: grid; place-items: center;
  top: 9px; right: 9px; width: 44px; height: 44px;
  border: 1px solid #627b98; border-radius: 11px;
  background: #263d55; color: #f5f8ff;
  font-size: 27px; line-height: 1;
}
.dialog .close:hover { background: #38536b; }
.dialog #cancel {
  min-height: 44px; padding: 10px 15px;
  border: 1px solid #647d92; border-radius: 9px;
  background: #233950; color: #edf5ff;
}
.dialog #cancel:hover { background: #315169; }
.dialog .bank-hint summary { min-height: 44px; }
.dialog input { font-size: 20px; }
.dialog :focus-visible { outline: 3px solid #f6d08c; outline-offset: 3px; }

/* Native button roles are retained for the sixteen board squares.
   Power notation is always an actual superscript; the banking marker is
   lower-right, away from the exponent and from the golden top-left coin. */
.board:focus-visible {
  outline: 3px solid #ffe0a7;
  outline-offset: 5px;
}
.cell.tile > span, .tile-ghost > span:not(.ghost-cloud-cover) {
  display: inline-block; max-width: 100%;
  white-space: nowrap;
  line-height: 1.15; font-variant-numeric: lining-nums;
  text-align: center; pointer-events: none;
}
.cell.tile sup, .tile-ghost sup {
  font-size: .55em; vertical-align: super;
  line-height: 0; margin-left: .01em;
}
.cell i {
  top: auto; bottom: 3px; right: 4px;
  font-size: clamp(11px, 1.6vw, 14px);
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1px solid #1b506045;
  border-radius: 5px;
  background: #b4fff0db; color: #164650;
  text-shadow: none; line-height: 1;
  pointer-events: none;
}
/* Under active hazard badges, an outline carries the banking affordance.
   Do not conceal or overlap the hazard's corner impact symbol. */
.cell.hazard-underlay.bankable { outline: 2px solid #c8fff0; outline-offset: -2px; }
.cell.hazard-underlay i { display: none; }
.cell.block-strike i { color: #56351c; background: #ffe0a2; }
.cell:focus-visible, .cell.bankable:focus-visible {
  outline: 3px solid #fff1bf;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 1px #173449, 0 0 0 3px #ffe8a7c9;
}
.tile-gold-mark, .tile-curse-mark {
  pointer-events: none;
}

/* On a phone, show the board first and keep the essential move budget
   available in a compact strip without making students scroll past the HUD.
   The full HUD below still contains all score, banking and effect details. */
.mobile-status { display: none; }
@media (max-width: 650px) {
  .play {
    grid-template-areas: "board" "hud" "secondary";
    grid-template-rows: auto;
    gap: 12px;
  }
  .mobile-status {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px; margin: 0 0 12px;
  }
  .mobile-status-item {
    display: flex; flex-direction: column; justify-content: center;
    gap: 4px; min-width: 0; min-height: 61px;
    padding: 9px 10px;
    background: linear-gradient(150deg, #1b3045, #17273c);
    border: 1px solid #637991; border-radius: 11px;
    box-shadow: inset 0 1px 0 #ffffff17;
  }
  .mobile-status-item span {
    color: #c4d5e2; font-size: 10px; line-height: 1.3;
    font-weight: 750;
  }
  .mobile-status-item strong {
    display: block; min-width: 0;
    color: #f4f8ff; font-size: clamp(15px, 4.3vw, 20px);
    line-height: 1.17; font-weight: 900; font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .mobile-status-moves {
    border-color: #7cd5bd; background: linear-gradient(145deg,#214b4a,#1a3946);
  }
  .mobile-status-moves strong { color: #c6ffe9; font-size: clamp(22px,6vw,29px); }
  .mobile-status.low-moves .mobile-status-moves {
    border-color: #efcb87; background: #433a35;
  }
  .mobile-status.low-moves .mobile-status-moves strong { color: #ffe8a9; }
  .mobile-status.empty-moves .mobile-status-moves { border-color: #f29fa5; background: #53383e; }
  .mobile-status.empty-moves .mobile-status-moves strong { color: #ffe0dc; }
  .controls button {
    min-width: 44px; min-height: 44px;
    width: 44px; height: 44px; flex-shrink: 0;
  }
  .controls { gap: 7px; }
  .shop-dialog { max-height: 96dvh; }
  .shop-dialog-inner { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .shop-actions { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .shop-actions > button { min-height: 44px; line-height: 1.35; }
  .help-dialog { max-height: 94dvh; }
  .achievements-dialog, .results-dialog { max-height: 94dvh; }
}
@media (max-width: 430px) {
  .controls-row {
    display: grid; grid-template-columns: 1fr; gap: 8px;
    justify-items: center; margin-top: 11px;
  }
  .control-caption {
    max-width: none; text-align: center; padding: 0;
    font-size: 11px;
  }
  .controls { justify-content: center; gap: 9px; width: 100%; }
  .game { padding: 10px; }
  .board { padding: 6px; gap: 5px; }
  .cell.tile, .tile-ghost {
    font-size: clamp(18px, 6.2vw, 25px);
    border-radius: 8px;
  }
  .cell i { width: 16px; height: 16px; font-size: 10px; bottom: 2px; right: 2px; }
  .tile-gold-mark { font-size: 9px; }
  .mobile-status-item { padding: 8px 7px; }
  .mobile-status-item span { font-size: 9px; }
  .mobile-status-item strong { font-size: 15px; }
  .mobile-status-moves strong { font-size: 24px; }
}
@media (max-width: 350px) {
  .controls button { min-width: 42px; width: 42px; min-height: 44px; }
  .controls { gap: 7px; }
  .mobile-status-item { padding: 7px 5px; }
  .game { padding: 8px; }
  .cell.tile { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile-ghost { will-change: auto; }
  .cell.bankable:hover, .cell.item-target:hover { transform: none !important; }
  dialog.overlay::backdrop { backdrop-filter: none; }
}

/* Pass 5 follow-up: predictable two-column quick status in Classic and a
   focusable board shortcut for keyboard users. */
.game-screen { position: relative; }
/* Keep the keyboard shortcut accessible without shifting it over the
   site header. A transformed offscreen link was still visibly overlapping
   the masthead; clip it until focus, then reveal it in the document flow. */
.skip-game-board {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-game-board:focus,
.skip-game-board:focus-visible {
  position: relative;
  top: auto; left: auto;
  display: inline-flex;
  align-items: center;
  width: auto; height: auto;
  max-width: 100%;
  margin: 0 0 11px;
  padding: 12px 17px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  border: 2px solid #ffe3a0;
  border-radius: 9px;
  color: #17323e; background: #f6ddaa;
  font-size: 13px; font-weight: 900;
  text-decoration: none;
  outline: 3px solid #fff9eb;
  outline-offset: 3px;
}
@media (max-width: 650px) {
  .mobile-status.classic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .skip-game-board { transition: none !important; }
}


/* Frostlock encounter · original icy control art, not an overlay on maths tiles. */
:is(.boss-rule, .shop-boss-preview, .boss-intro-dialog,
    .boss-victory-banner, .results-boss-victory)[data-boss="frostlock"] {
  --boss-accent: #9ceef2;
  --boss-tint: #2e5873;
}
.boss-rule[data-boss="frostlock"] {
  background: radial-gradient(ellipse at 5% 0%, #3f738455, transparent 65%),
    linear-gradient(132deg, #243b56, #26304a);
}
.boss-rule[data-boss="frostlock"] .boss-label { color: #b8f8ff; }
.shop-boss-preview[data-boss="frostlock"] {
  background: radial-gradient(circle at 0% 20%, #79dbe550, transparent 62%),
    linear-gradient(130deg, #263e57, #262d45);
}
.controls button.frostlock-frozen,
.controls button.frostlock-frozen:disabled {
  position: relative; opacity: 1; cursor: not-allowed;
  border: 2px solid #b8f7fb;
  color: #e7faff;
  background:
    linear-gradient(115deg, #dcf9ff43, transparent 46%),
    linear-gradient(145deg, #5c9cba, #315878 70%);
  box-shadow: inset 0 0 0 2px #e6ffff39, 0 0 13px #6edce75e;
  text-shadow: 0 1px 3px #24445c;
  transform: none !important;
}
.controls button.frostlock-frozen::after {
  content: "❄";
  position: absolute; top: -9px; right: -8px;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 1px solid #caefff; border-radius: 50%;
  background: #24465f; color: #ccfdff;
  font-size: 14px; line-height: 1; text-shadow: none;
  box-shadow: 0 2px 7px #0a1f39a3;
  pointer-events: none;
}
.frostlock-status {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; margin: 13px 0 0;
  padding: 11px 13px;
  color: #e4faff; background: linear-gradient(130deg, #234e64, #1e354f);
  border: 1px solid #92dfe8; border-left: 4px solid #b9f6fc;
  border-radius: 11px; box-shadow: inset 0 1px 0 #dbffff26;
  font-size: 12px; line-height: 1.5;
}
.frostlock-status .frostlock-snowflake {
  flex: none; font-size: 24px; line-height: 1.1; color: #adf1f7;
  text-shadow: 0 0 12px #94eff1ab;
}
.frostlock-status strong {
  color: #fff3ce; font-size: 13px; font-weight: 950;
  letter-spacing: .055em; white-space: nowrap;
}
@media (max-width: 650px) {
  .frostlock-status { font-size: 11px; gap: 8px; padding: 9px 10px; margin-top: 11px; }
  .frostlock-status strong { font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes frostlock-appear {
    from { box-shadow: inset 0 0 0 2px #e6ffff39, 0 0 21px #c5ffffb7; }
    to { box-shadow: inset 0 0 0 2px #e6ffff39, 0 0 13px #6edce75e; }
  }
  .controls button.frostlock-frozen { animation: frostlock-appear .34s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .controls button.frostlock-frozen { animation: none !important; }
}


/* Enchanted Squares Pass 3: usable magic with calm, accessible feedback.
   Placement previews and glows never intercept tile buttons or swipes. */
.enchantment-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 0 10px; padding: 8px 10px;
}
.enchantment-status-label {
  color: #f4e0b0; font-weight: 950; letter-spacing: .11em;
  font-size: 9px; white-space: nowrap;
}
.enchantment-status-items {
  display: flex; flex-wrap: wrap; gap: 5px; min-width: 0;
}
.enchantment-status-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #15233a; border: 1px solid #ddbc75; color: #ffe6ab;
  border-radius: 7px; padding: 5px 7px;
  line-height: 1.3; font-size: 10px; font-weight: 850;
}
.enchantment-status-chip[data-enchantment="power-prism"],
.enchantment-status-chip[data-enchantment="echo-seal"] {
  border-color: #ae96ea; color: #eee2ff;
}
.enchantment-status-chip[data-enchantment="time-sanctuary"] {
  border-color: #78d9cc; color: #c7fff1;
}
.enchantment-status-chip[data-enchantment="shatter-crest"] {
  border-color: #f1a58f; color: #ffdfd2;
}
.enchantment-slot[data-enchantment] {
  animation: enchantedSquareBreathe 3.1s ease-in-out infinite;
}
@keyframes enchantedSquareBreathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}
.enchantment-slot--preview {
  border: 2px dashed #b7fff1; border-radius: 10px;
  background: #7fe9d514; box-shadow: inset 0 0 0 2px #d5fff23b;
}
.enchantment-preview-icon,
.enchantment-preview-label {
  position: absolute; display: grid; place-items: center;
  padding: 2px 4px; border-radius: 5px;
  color: #f4fff9; background: #244e58ea;
  font-weight: 950; font-size: 9px;
}
.enchantment-preview-icon { top: 3px; right: 3px; }
.enchantment-preview-label { bottom: 3px; right: 3px; letter-spacing: .06em; }
.rune-activation-flash {
  animation: runeSquareFlash .72s ease-out both;
}
@keyframes runeSquareFlash {
  0% { outline: 4px solid #fff4a3; outline-offset: -2px; filter: brightness(1.55); }
  50% { outline: 3px solid #e9c5ff; outline-offset: 2px; filter: brightness(1.3); }
  100% { outline: 0 solid transparent; outline-offset: 5px; filter: brightness(1); }
}
.shop-offer-card.shop-offer-card--runestone {
  background: linear-gradient(145deg, #3e3457, #243347);
  border: 1px solid #b999ec; border-top: 3px solid #ffdb91;
  box-shadow: inset 0 1px 0 #ffffff25, 0 8px 20px #02091a3a;
}
.shop-item-art--runestone {
  border: 1px solid #e7c587; background:
    radial-gradient(circle at 50% 32%, #f0da9f55, transparent 63%),
    linear-gradient(150deg, #54456c, #2c354b);
  box-shadow: inset 0 1px 6px #ffe0a342, 0 2px 10px #04081860;
}
.equip-chip.runestone-equipped {
  border-color: #e7bd84; background: linear-gradient(120deg, #493957, #293e4b);
}
.shop-offer-card.runestone-offer .shop-rune-effect {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin: 0; padding: 8px 0 0; border-top: 1px solid #b79fde6b;
}
.shop-rune-trigger {
  border: 1px solid #e9c68b; background: #352d4c; color: #ffe6b9;
  font-size: 9px; font-weight: 950; letter-spacing: .055em;
  border-radius: 5px; padding: 4px 6px;
}
.shop-rune-charge {
  color: #d8d1f1; font-size: 10px; font-weight: 800;
}
.shop-runestone-status {
  margin: 10px 0; padding: 9px 12px; line-height: 1.55;
  border: 1px solid #645b82; border-radius: 10px;
  background: #292a47; color: #ddd7f3;
  font-size: 11px; font-weight: 750;
}
.shop-runestone-status[data-state="found"] {
  border-color: #e6bc77; background: #493949;
  color: #fff0bc; box-shadow: inset 0 1px 0 #ffdb9b4c;
}
.shop-runestone-status[data-state="seen"] {
  border-color: #60758a; background: #26364a; color: #c9d4e4;
}
.shop-runestone-guide {
  border: 1px solid #8c78a6; border-radius: 11px;
  padding: 12px 14px; background: #242940; color: #cfdbeb;
  margin-bottom: 15px;
}
.shop-runestone-guide summary {
  cursor: pointer; font-weight: 900; color: #f5dda7;
  line-height: 1.5; font-size: 12px;
}
.shop-runestone-guide summary:focus-visible {
  outline: 3px solid #b5f0df; outline-offset: 4px;
}
.shop-runestone-guide > p {
  font-size: 11px; line-height: 1.65; max-width: 78ch;
  margin: 10px 0 14px;
}
.shop-runestone-gallery {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
}
.shop-rune-guide-card {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  border: 1px solid #8f7b9e; border-radius: 10px;
  padding: 10px; background: #222d46;
}
.shop-rune-guide-card.is-locked {
  border-style: dashed; border-color: #6f7288;
  background: #202a3a;
}
.shop-rune-guide-card.is-locked .shop-item-icon { filter: saturate(.35); opacity: .65; }
.shop-rune-guide-top {
  display: grid; grid-template-columns: 40px minmax(0, 1fr);
  gap: 9px; align-items: center;
}
.shop-rune-guide-copy { display: flex; flex-direction: column; gap: 3px; min-width:0; }
.shop-rune-guide-copy strong { color: #ffecd4; font-size: 12px; }
.shop-rune-guide-unlock { color: #b8c9dc; font-size: 10px; }
.shop-rune-guide-trigger {
  margin:0; color: #f4dbad; font-weight: 850;
  font-size: 10px; letter-spacing: .03em;
}
.shop-rune-guide-description {
  margin:0; color: #c8d5e5; font-size: 11px; line-height: 1.55;
}
.bank-rune-bonus {
  padding: 9px 12px; margin: 7px 0 12px;
  border-radius: 9px; background: #332d4b; color: #fbe8c5;
  border: 1px solid #b99ad8; font-size: 12px; font-weight: 850;
  line-height: 1.5;
}
.bank-rune-bonus[hidden] { display: none; }
@media (max-width: 690px) {
  .shop-runestone-gallery { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .enchantment-status { gap: 5px; padding: 7px 8px; }
  .enchantment-status-label { font-size: 8px; }
  .enchantment-status-chip { font-size: 9px; padding: 4px 6px; }
  .enchantment-preview-icon, .enchantment-preview-label {
    font-size: 8px; padding: 1px 3px;
  }
  .shop-runestone-guide { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .enchantment-slot[data-enchantment], .rune-activation-flash {
    animation: none;
  }
}

/* Release 5A: never disguise unavailable/corrupt local saves. This alert
   remains visible on the title as well as in-game, but consumes no room
   when the browser saves normally. */
.save-warning {
  margin: 10px 0 14px;
  padding: 11px 14px;
  border-radius: 9px;
  border: 1px solid #d6b778;
  background: #413827;
  color: #fff0c9;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
}
.save-warning[hidden] { display: none; }
@media (max-width: 580px) {
  .save-warning { padding: 9px 11px; font-size: 11px; }
}


/* Release Pass 5B — optional, compact player guidance and clear rewards. */
.playing-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.tour-reopen {
  min-height:39px; border:1px solid #5a7586; border-radius:10px;
  background:#1e3748; color:#d8f4e9; padding:8px 12px;
  font-size:12px; font-weight:850;
}
.tour-reopen:hover { background:#295062; border-color:#8edcce; }
.tour-reopen[aria-expanded="true"] { border-color:#e9d197; color:#ffe9b2; }
.coach-panel {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:15px; margin:0 0 15px; padding:16px 18px;
  border:1px solid #c4a979; border-radius:15px;
  background:radial-gradient(circle at 0 0,#434060,transparent 70%),#233448;
  box-shadow:0 8px 18px #080d1d5c;
}
.coach-copy { min-width:0; }
.coach-kicker {
  display:block; font-size:10px; letter-spacing:.12em;
  color:#ffe4a3; font-weight:900;
}
.coach-copy h2 { color:#f8f4f5; font-size:19px; margin:4px 0 6px; }
.coach-copy p { margin:0; font-size:12px; color:#e0eaf0; line-height:1.6; }
.coach-copy small {
  display:block; margin-top:8px; color:#a9efdc;
  font-size:11px; font-weight:700; line-height:1.4;
}
.coach-actions { display:flex; flex-direction:column; gap:8px; }
.coach-actions button { min-height:38px; min-width:115px; font-size:11px; }
.reward-toast {
  margin:-4px 0 11px; padding:10px 12px; line-height:1.5;
  background:#243c4c; border:1px solid #a3e5c7; border-left:4px solid #b1f2d9;
  border-radius:10px; color:#e7fff5; font-size:12px; font-weight:850;
  animation:reward-entrance .24s ease-out both;
}
.reward-toast[data-kind="bank"] {
  background:linear-gradient(100deg,#463949,#2a4448);
  border-color:#edd091; border-left-color:#ffe0a2; color:#ffefc4;
}
.reward-toast[data-kind="event"] {
  background:#3b354b; border-color:#c5a7e5; color:#f2e9ff;
}
@keyframes reward-entrance {
  from { opacity:.35; transform:translateY(-4px); }
  to { opacity:1; transform:translateY(0); }
}
.activity-list {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:7px;
  max-height:290px; overflow-y:auto;
}
.activity-item {
  display:grid; gap:3px; margin:0; padding:9px 10px;
  border:1px solid #3d516b; border-left:3px solid #86c7c3;
  border-radius:8px; background:#18283f;
  line-height:1.4;
}
.activity-item strong {
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#a8e9d6;
}
.activity-item span { font-size:11px; color:#d7e3f3; overflow-wrap:anywhere; }
.activity-item[data-kind="bank"],.activity-item[data-kind="gold"] { border-left-color:#e5c17f; }
.activity-item[data-kind="bank"] strong,.activity-item[data-kind="gold"] strong { color:#f1dba5; }
.activity-item[data-kind="hazard"],.activity-item[data-kind="blocker"] { border-left-color:#ecaaa0; }
.activity-item[data-kind="hazard"] strong,.activity-item[data-kind="blocker"] strong { color:#ffd4c0; }
.activity-item[data-kind="runestone"] { border-left-color:#bdadf3; }
.activity-item[data-kind="runestone"] strong { color:#ddceff; }
.results-ending {
  margin:13px 0 15px; padding:12px 14px;
  background:#202e44; border:1px solid #4d6582;
  border-radius:12px;
}
.results-ending strong { font-size:13px; color:#ffe1a1; }
.results-ending p { margin:5px 0 0; font-size:12px; line-height:1.55; color:#c7dbea; }
.results-highlight {
  margin:4px 0 15px; font-size:13px; text-align:center;
  font-weight:850; color:#ffe2a6;
}
.results-dialog.victory .results-ending {
  border-color:#e7d08b; background:linear-gradient(125deg,#3d3d50,#23454c);
}
.results-dialog.victory .results-score-hero {
  animation:final-score-glow 1.6s ease-in-out 2;
}
@keyframes final-score-glow {
  0%,100% { box-shadow:0 0 0 0 #f3d99200; }
  50% { box-shadow:0 0 0 6px #f3d99238; }
}
.results-share {
  margin:14px 0 19px; padding:11px 13px;
  border:1px solid #536c81; border-radius:10px;
  background:#1a2a40;
}
.results-share summary {
  cursor:pointer; color:#c9f3e6; font-weight:850; font-size:12px;
}
.results-share label { display:block; margin:12px 0 7px; font-size:11px; color:#c3d5e5; }
.results-share textarea {
  width:100%; min-height:155px; resize:vertical;
  padding:10px; border:1px solid #7c92a8; border-radius:9px;
  font:12px/1.5 ui-monospace,monospace;
  color:#ebf3fc; background:#0f1b2d;
}
.results-share button { display:block; margin-top:9px; min-height:38px; font-size:12px; }
#resultsCopyStatus { margin:8px 0 0; min-height:14px; font-size:11px; color:#a3e9d5; }
@media (max-width:650px) {
  .coach-panel { grid-template-columns:1fr; padding:13px; gap:12px; }
  .coach-actions { flex-direction:row; flex-wrap:wrap; }
  .coach-actions button { flex:1; min-width:100px; }
  .playing-actions { gap:5px; }
  .playing-head { flex-wrap:wrap; }
  .tour-reopen { font-size:11px; padding:7px 10px; }
  .reward-toast { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .reward-toast, .results-dialog.victory .results-score-hero {
    animation:none !important;
  }
}


/* Release 5C — respect phone home indicators, native controls and users'
   high-contrast display preferences. Feedback never depends on colour alone. */
.shell {
  padding-bottom: max(38px, calc(env(safe-area-inset-bottom, 0px) + 16px));
}
@media (forced-colors: active) {
  .cell.bankable, .cell.item-target {
    outline: 2px solid Highlight;
    outline-offset: -3px;
    border-color: Highlight;
  }
  .cell:focus-visible, .board:focus-visible,
  .skip-game-board:focus-visible, .tour-reopen:focus-visible,
  .results-share textarea:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px;
  }
  .reward-toast, .game-feedback, .save-warning,
  .hazard-alert, .results-ending, .coach-panel,
  .shop-runestone-status {
    border: 2px solid CanvasText;
  }
  .tile-gold-mark, .prism-power-mark,
  .enchantment-status-chip {
    border: 1px solid CanvasText;
  }
}
@media (prefers-contrast: more) {
  .detail-hint, .coach-copy small, .activity-item span {
    color: #e2e9fa;
  }
  .tour-reopen, .results-share textarea,
  .shop-offer-card, .shop-rune-guide-card {
    border-width: 2px;
  }
}


/* Round-clear intermission — the next decision is always foregrounded, not
   hidden in the HUD. All rewards and progress are rendered as real text. */
.round-complete-dialog {
  width: min(645px, calc(100% - 20px));
  max-height: min(92dvh, 850px);
  margin: auto;
  padding: 0;
  overflow-y: auto;
  color: #eef8f5;
  border: 2px solid #91e7cf;
  border-radius: 22px;
  background: radial-gradient(ellipse at 92% 4%, #38586d70, transparent 57%),
    linear-gradient(150deg, #1d3548, #172338 78%);
  box-shadow: 0 32px 85px #020716dd, inset 0 2px 0 #d9ffe73e;
}
.round-complete-dialog::backdrop {
  background: #030a19e2;
  backdrop-filter: blur(6px);
}
.round-complete-shell { padding: clamp(16px, 4vw, 28px); }
.round-complete-topline {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 15px;
}
.round-complete-eyebrow {
  color: #a2e8d2; font-size: 10px; font-weight: 950;
  letter-spacing: .12em;
}
.round-complete-round {
  padding: 7px 10px; border: 1px solid #86a6b5;
  border-radius: 99px; background: #122b3cb8;
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
}
.round-complete-hero {
  display: flex; justify-content: space-between; align-items: center;
  gap: 15px; margin-bottom: 16px;
}
.round-complete-kicker {
  margin: 0 0 5px; color: #f6d18e; font-size: 10px;
  font-weight: 900; letter-spacing: .12em;
}
.round-complete-hero h2 {
  margin: 0 0 8px; color: #fbfff7;
  font-size: clamp(29px, 6vw, 44px); line-height: 1.06;
  letter-spacing: -.035em; font-weight: 950;
}
.round-complete-hero p:last-child {
  margin: 0; max-width: 45ch; color: #c6dfe5;
  font-size: 12px; line-height: 1.55;
}
.round-complete-seal {
  flex: 0 0 77px; width: 77px; height: 77px;
  display: grid; place-items: center; border-radius: 50%;
  border: 2px solid #f8df9c;
  background: radial-gradient(circle at 32% 26%, #fff1bd, #d99e4c 70%, #926328);
  box-shadow: 0 0 0 6px #f0d48d22, 0 7px 22px #030a195e;
  color: #4d340e; font-size: 42px; line-height: 1;
  transform: rotate(-8deg);
}
.round-complete-boss-victory {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; margin: 0 0 13px;
  border: 1px solid #f1c68e; border-radius: 12px;
  background: linear-gradient(105deg, #594250, #23434a);
}
.round-complete-boss-victory[hidden] { display: none; }
.round-complete-boss-victory img {
  flex: 0 0 64px; width: 64px; height: 64px;
  border: 2px solid #f4d9a9; border-radius: 10px;
  object-fit: cover;
}
.round-complete-boss-victory span {
  display: block; color: #ffdda5; font-size: 10px;
  font-weight: 950; letter-spacing: .12em;
}
.round-complete-boss-victory strong {
  display: block; margin-top: 4px; font-size: 17px; color: #fff4e0;
}
.round-complete-scoreboard {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin: 0 0 11px;
}
.round-complete-stat {
  min-width: 0; display: flex; flex-direction: column;
  padding: 12px; border: 1px solid #526c7d;
  border-radius: 12px; background: #101e33b9;
}
.round-complete-stat > span {
  color: #adcbda; font-size: 9px;
  font-weight: 900; letter-spacing: .11em;
}
.round-complete-stat strong {
  margin: 5px 0 4px; color: #f0fff9;
  font-size: clamp(25px, 5vw, 37px); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.round-complete-stat--gold strong { color: #ffe2a1; }
.round-complete-stat small {
  font-size: 10px; line-height: 1.4; color: #aac8d8;
}
.round-complete-breakdown {
  border: 1px solid #47667b; border-radius: 11px;
  padding: 10px 13px; margin-bottom: 13px; background: #14273b;
}
.round-complete-breakdown > div {
  display: flex; gap: 10px; justify-content: space-between;
  padding: 5px 0; color: #d3e1eb; font-size: 11px;
  line-height: 1.45;
}
.round-complete-breakdown strong { color: #fae0ab; white-space: nowrap; font-variant-numeric: tabular-nums; }
.round-complete-breakdown .round-complete-breakdown-total {
  border-top: 1px solid #6e8a9688;
  margin-top: 4px; padding-top: 9px; font-weight: 900;
}
.round-complete-breakdown-total strong { font-size: 16px; }
.round-complete-boss-track {
  padding: 13px; margin: 0 0 15px;
  border: 1px solid #6b729e; border-radius: 13px;
  background: linear-gradient(110deg, #282c49, #172d42);
}
.round-complete-boss-heading {
  display: flex; justify-content: space-between;
  align-items: start; gap: 12px;
}
.round-complete-boss-kicker {
  color: #e6c9a2; font-weight: 900; font-size: 9px; letter-spacing: .1em;
}
.round-complete-boss-heading h3 {
  font-size: 15px; margin: 5px 0 4px; color: #fff3dc;
}
.round-complete-boss-heading p {
  margin: 0 0 9px; color: #b8cfdf; font-size: 11px; line-height: 1.4;
}
.round-complete-boss-count {
  flex: 0 0 auto; border-radius: 8px; padding: 6px 8px;
  color: #dbfff2; background: #245365;
  font-size: 14px; font-weight: 950; font-variant-numeric: tabular-nums;
}
.round-complete-boss-track progress {
  width: 100%; height: 8px; border: 0; border-radius: 20px;
  overflow: hidden; background: #101e34;
  accent-color: #9cead6;
}
.round-complete-boss-track progress::-webkit-progress-bar { background: #101e34; border-radius: 20px; }
.round-complete-boss-track progress::-webkit-progress-value { background: #91e7cf; border-radius: 20px; }
.round-complete-boss-track progress::-moz-progress-bar { background: #91e7cf; }
.round-complete-boss-steps {
  list-style: none; display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px; padding: 0; margin: 9px 0 0;
}
.round-complete-boss-step {
  display: flex; gap: 6px; align-items: center;
  color: #adbdcf; font-size: 9px; line-height: 1.3;
}
.round-complete-boss-dot {
  flex: 0 0 22px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #74899f; color: #d7e1f3; background: #1c3045;
  font-size: 11px; font-weight: 900;
}
.round-complete-boss-step.is-complete .round-complete-boss-dot {
  border-color: #b7ffe6; color: #143c3c; background: #a8ead5;
}
.round-complete-boss-step.is-boss .round-complete-boss-dot {
  border-color: #e9ce93; color: #ffdfa0; background: #584557;
}
.round-complete-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.round-complete-actions button {
  min-height: 49px; padding: 10px 12px;
  border-radius: 11px; font-size: 13px; font-weight: 900;
}
.round-complete-actions .round-complete-shop {
  color: #0d3438; background: linear-gradient(120deg, #a4ffe0, #78ddc9);
  border: 1px solid #a9ffe4;
}
.round-complete-actions .round-complete-continue {
  color: #f0e6d5; background: #2d3651; border: 1px solid #9faac1;
}
.round-complete-actions button:hover { filter: brightness(1.08); }
.round-complete-footnote {
  margin: 8px 0 0; text-align: center; color: #b4cbd7;
  font-size: 10px; line-height: 1.5;
}
.round-complete-return {
  display: block; margin: 10px auto 0; padding: 7px 10px;
  border: 0; background: transparent; color: #a6c7d3;
  font-size: 11px; text-decoration: underline; cursor: pointer;
}
.round-complete-return:hover { color: #f4fff6; }
@media (max-width: 540px) {
  .round-complete-dialog { width: calc(100% - 12px); max-height: 95dvh; border-radius: 15px; }
  .round-complete-shell { padding: 15px 13px; }
  .round-complete-eyebrow { font-size: 9px; }
  .round-complete-round { font-size: 9px; }
  .round-complete-hero { gap: 9px; margin-bottom: 13px; }
  .round-complete-hero h2 { font-size: clamp(27px, 8vw, 34px); }
  .round-complete-seal { flex-basis: 50px; width: 50px; height: 50px; font-size: 30px; }
  .round-complete-scoreboard { gap: 5px; }
  .round-complete-stat { padding: 9px 7px; }
  .round-complete-stat > span { font-size: 8px; }
  .round-complete-stat strong { font-size: 26px; }
  .round-complete-stat small { font-size: 9px; }
  .round-complete-boss-step { flex-direction: column; align-items: flex-start; gap: 4px; }
  .round-complete-actions { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-height: 590px) {
  .round-complete-dialog { max-height: calc(100dvh - 12px); }
  .round-complete-shell { padding-block: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .round-complete-dialog, .round-complete-seal { animation: none !important; }
}
@media (forced-colors: active) {
  .round-complete-dialog, .round-complete-stat,
  .round-complete-boss-track, .round-complete-breakdown {
    border-color: CanvasText;
  }
  .round-complete-actions button:focus-visible,
  .round-complete-return:focus-visible {
    outline: 3px solid Highlight; outline-offset: 3px;
  }
}