:root {
  color-scheme: light;
  --bg: #f6f4ee;
  --ink: #20252b;
  --muted: #68717d;
  --line: #d8d4c9;
  --heavy: #262b31;
  --cell: #fffdfa;
  --selected: #ffd76b;
  --related: #fff0be;
  --cage-focus: #d7f0ec;
  --wrong: #f06464;
  --mine: #2f3138;
  --heart: #e84f7a;
  --hint: #7a58b5;
  --accent: #e4572e;
  --cage: #b86e4c;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
  touch-action: none;
}

.app-shell {
  width: 100%;
  max-width: 560px;
  height: 100svh;
  min-height: 0;
  margin: 0 auto;
  padding: max(18px, calc(env(safe-area-inset-top) + 8px)) 12px max(28px, calc(env(safe-area-inset-bottom) + 18px));
  display: grid;
  grid-template-rows: repeat(5, auto);
  align-content: start;
  gap: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.topbar,
.status-panel,
.rogue-stage-panel,
.board-wrap,
.controls,
.item-legend,
.privacy-footer {
  min-width: 0;
}

.topbar > div {
  min-width: 0;
}

.record-button {
  min-width: 72px;
  height: 44px;
  padding: 0 9px;
  border: 2px solid var(--heavy);
  border-radius: 8px;
  background: #fffdfa;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.menu-record-button {
  position: absolute;
  top: 20px;
  right: 22px;
  width: auto;
  height: 34px;
  min-width: 78px;
  padding: 0 10px;
  font-size: 12px;
}

#difficultyDialog .modal-body {
  position: relative;
}

#difficultyDialog h2 {
  padding-right: 96px;
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(22px, 7.2vw, 31px);
  line-height: 1.05;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

h1.title-ja {
  font-size: clamp(19px, 5.35vw, 28px);
  line-height: 1.08;
}

.icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid var(--heavy);
  border-radius: 8px;
  background: #fffdfa;
  font-size: 24px;
  font-weight: 900;
}

.status-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.rogue-ability-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #d4bf88;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(248, 189, 85, .22), rgba(122, 88, 181, .12)),
    #fffdfa;
  box-shadow: 0 4px 12px rgba(32, 37, 43, .07);
}

.rogue-ability-panel[hidden] {
  display: none;
}

.number-climb-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #9bb4a8;
  border-radius: 8px;
  background: linear-gradient(135deg, #f1f8f3, #fff9e8);
  box-shadow: 0 4px 12px rgba(32, 37, 43, .07);
}

.number-climb-panel.is-free-input {
  border-color: #d85a28;
  background: linear-gradient(135deg, #fff1d5, #ffe3dc);
  box-shadow:
    0 0 0 1px rgba(216, 90, 40, .2),
    0 4px 12px rgba(92, 38, 28, .12);
}

.number-climb-panel[hidden] {
  display: none;
}

.rogue-boss-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
  padding: 7px 9px;
  border: 1px solid #b94848;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff5f2, #f7edf4);
  box-shadow: 0 4px 12px rgba(92, 28, 35, .1);
}

.rogue-boss-panel[hidden] {
  display: none;
}

.rogue-boss-panel > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.rogue-boss-panel strong {
  color: #a22f36;
  font-size: 11px;
  font-weight: 1000;
}

.rogue-boss-panel span,
.rogue-boss-panel small {
  color: #392a2d;
  font-size: 11px;
  font-weight: 900;
}

.rogue-boss-track {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: #dfd7d5;
}

.rogue-boss-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c63f3f, #8e315f);
  transition: width .22s ease;
}

.rogue-boss-preview-chip {
  border-color: #b94848;
  border-left-color: #b94848;
  background: #fff0ed;
}

.number-climb-panel strong,
.number-climb-panel small {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 900;
}

.number-climb-panel small {
  color: #6a6258;
}

.number-climb-panel.is-free-input strong,
.number-climb-panel.is-free-input small {
  color: #a33a25;
}

.number-climb-panel div {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 3px;
}

.number-climb-step {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid #a9b8af;
  border-radius: 50%;
  background: #fffdfa;
  color: #35584a;
  font-size: 10px;
  font-weight: 900;
}

.number-climb-step.is-locked,
.number-climb-step.is-complete {
  border-color: transparent;
  background: #e4e2dd;
  color: #a6a199;
}

.number-climb-step.is-next {
  border-color: #18785f;
  background: #18785f;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(24, 120, 95, .18);
}

.number-climb-step.is-reset {
  border-color: #d46a20;
  box-shadow: inset 0 0 0 1px #d46a20;
}

.number-climb-panel.is-free-input .number-climb-step {
  border-color: #d85a28;
  background: #fffdfa;
  color: #9b3825;
}

.number-climb-panel.is-free-input .number-climb-step.is-locked,
.number-climb-panel.is-free-input .number-climb-step.is-complete {
  opacity: .58;
}

.number-climb-panel.is-free-input .number-climb-step.is-next {
  background: #d85a28;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(109, 35, 20, .2);
}

.rogue-ability-panel strong,
.rogue-ability-panel span,
.rogue-ability-chip {
  white-space: nowrap;
}

.rogue-ability-panel strong {
  color: #20252b;
  font-size: 11px;
  font-weight: 900;
}

.rogue-ability-panel div {
  display: flex;
  min-width: 0;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.rogue-ability-panel div::-webkit-scrollbar {
  display: none;
}

.rogue-ability-panel span,
.rogue-ability-chip {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(32, 37, 43, .88);
  color: #fffdfa;
  font-size: 10px;
  font-weight: 900;
}

.rogue-ability-chip:active {
  transform: translateY(1px);
}

.rogue-ability-chip.is-selected {
  border-color: #6d45ad;
  background: #6d45ad;
  color: #fff;
}

.rogue-ability-detail {
  grid-column: 1 / -1;
  margin: -1px 0 0;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(255, 253, 250, .72);
  color: #4f4a43;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.rogue-ability-detail[hidden] {
  display: none;
}

.stat {
  min-width: 0;
  padding: 7px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
}

.stat.stat-toggle {
  cursor: pointer;
}

.stat.stat-toggle:active {
  background: #fff4d7;
}

.stat span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.stat strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.1;
}

#timerDisplay.timer-warning {
  color: #c93428;
  text-shadow: 0 0 12px rgba(201, 52, 40, .22);
}

#timerDisplay.timer-warning-flash {
  animation: timer-last-minute 1.35s ease both;
}

#difficultyDisplay {
  min-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-size: clamp(9px, 2.6vw, 13px);
  line-height: 1.12;
}

#difficultyDisplay.is-long {
  font-size: clamp(8px, 2.25vw, 11px);
}

#difficultyDisplay.is-daily {
  min-height: 30px;
  white-space: pre-line;
}

#difficultyDisplay.is-adventure {
  min-height: 30px;
  white-space: pre-line;
  font-size: clamp(8px, 2.2vw, 11px);
}

#difficultyDisplay.is-adventure-modified {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 30px;
  white-space: normal;
  overflow: visible;
}

#difficultyDisplay .difficulty-adventure-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#difficultyDisplay .difficulty-adventure-flags {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

#difficultyDisplay .difficulty-adventure-flag {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 2px 4px;
  border: 1px solid #9fcfc3;
  border-radius: 4px;
  background: #e2f4ef;
  color: #116b5a;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

#difficultyDisplay .difficulty-adventure-flag.is-practice {
  border-color: #efb9a9;
  background: #fff0ea;
  color: #a83e25;
}

@media (max-width: 899px) {
  #difficultyDisplay .difficulty-adventure-name {
    font-size: 8px;
  }
}

#difficultyDisplay.is-rogue-run {
  min-height: 18px;
  white-space: nowrap;
  overflow: hidden;
}

.difficulty-rogue-mode {
  display: block;
  color: #20252b;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1.05;
  white-space: nowrap;
}

.rogue-stage-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #d8d4c9;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 253, 250, .96), rgba(239, 246, 241, .92)),
    #fffdfa;
  box-shadow: 0 4px 12px rgba(32, 37, 43, .06);
}

.rogue-stage-panel[hidden] {
  display: none;
}

.rogue-stage-main {
  display: grid;
  gap: 4px;
  min-width: 74px;
}

.rogue-stage-main strong {
  color: #20252b;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1;
}

.rogue-stage-main span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.rogue-stage-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d8d4c9;
}

.rogue-stage-dot.is-complete {
  background: #20252b;
}

.rogue-stage-dot.is-current {
  width: 18px;
  background: #e4572e;
}

.rogue-stage-dot.is-boss {
  border-radius: 3px;
}

.rogue-stage-gimmicks {
  display: flex;
  min-width: 0;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.rogue-stage-gimmicks::-webkit-scrollbar {
  display: none;
}

.rogue-stage-gimmick {
  flex: 0 0 auto;
  max-width: 136px;
  padding: 4px 7px;
  border: 1px solid rgba(28, 127, 118, .2);
  border-radius: 999px;
  background: rgba(28, 127, 118, .08);
  color: #17564f;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rogue-stage-gimmick:not(span) {
  cursor: pointer;
}

.rogue-stage-gimmick.is-selected {
  border-color: rgba(28, 127, 118, .5);
  background: #1c7f76;
  color: #fffdfa;
}

.rogue-stage-gimmick.is-boss {
  border-color: rgba(185, 72, 72, .25);
  background: #fff0ed;
  color: #8d3036;
}

.rogue-stage-gimmick.is-boss.is-selected {
  border-color: rgba(185, 72, 72, .5);
  background: #8d3036;
  color: #fffdfa;
}

.rogue-stage-gimmick.is-quiet {
  border-color: rgba(32, 37, 43, .12);
  background: rgba(32, 37, 43, .05);
  color: #5c6470;
}

.rogue-stage-detail {
  grid-column: 1 / -1;
  margin: -1px 0 0;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(255, 253, 250, .72);
  color: #4f4a43;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.rogue-stage-detail[hidden] {
  display: none;
}

.board-wrap {
  position: relative;
  width: min(100%, calc(100vw - 28px));
  aspect-ratio: 1;
  align-self: start;
  justify-self: center;
  container-type: inline-size;
}

.board-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 22;
  border-radius: 6px;
  background-color: #aaadaa;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 calc(100% / 3 - 3px), rgba(32, 37, 43, .82) calc(100% / 3 - 3px) calc(100% / 3)),
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 3 - 3px), rgba(32, 37, 43, .82) calc(100% / 3 - 3px) calc(100% / 3)),
    repeating-linear-gradient(0deg, transparent 0 calc(100% / 9 - 1px), rgba(32, 37, 43, .18) calc(100% / 9 - 1px) calc(100% / 9)),
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 9 - 1px), rgba(32, 37, 43, .18) calc(100% / 9 - 1px) calc(100% / 9));
  box-shadow: inset 0 0 0 3px rgba(32, 37, 43, .88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.app-shell.board-obscured .board-wrap::after {
  opacity: 1;
}

.app-shell.board-obscured .board {
  visibility: hidden;
}

.board {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  background: var(--cell);
  touch-action: none;
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  background: var(--cell);
  font-size: clamp(20px, 7vw, 36px);
  font-weight: 800;
  line-height: 1;
  user-select: none;
  overflow: hidden;
}

.cell.block-swap-anchor {
  z-index: 7;
  background: #ffd76b;
  box-shadow: inset 0 0 0 4px rgba(32, 37, 43, .78);
}

.cell.block-swap-option {
  background: #e3f3ef;
  box-shadow: inset 0 0 0 2px rgba(42, 132, 119, .3);
}

.cell.given {
  background: var(--cell);
}

.cell.blind-filled {
  background: #ede8dc;
}

.cell.selected {
  background: var(--selected);
}

.app-shell.grid-walk-mode .cell.grid-walk-reachable {
  background: #e9f5f1;
  box-shadow: inset 0 0 0 2px rgba(28, 139, 119, .38);
}

.app-shell.grid-walk-mode .cell.grid-walk-complete {
  background: #edf1fa;
  border: 0 solid #55729d;
}

.app-shell.grid-walk-mode .cell.grid-walk-gateway {
  background: #dfe8f7;
  box-shadow: inset 0 0 0 2px rgba(70, 100, 148, .45);
}

.app-shell.grid-walk-mode .cell.grid-walk-complete-top { border-top-width: 3px; }
.app-shell.grid-walk-mode .cell.grid-walk-complete-right { border-right-width: 3px; }
.app-shell.grid-walk-mode .cell.grid-walk-complete-bottom { border-bottom-width: 3px; }
.app-shell.grid-walk-mode .cell.grid-walk-complete-left { border-left-width: 3px; }

.app-shell.grid-walk-mode .cell.selected {
  background: var(--selected);
  box-shadow: inset 0 0 0 3px rgba(239, 85, 52, .34);
}

.app-shell.block-swap-mode .cell .digit {
  color: #737b82;
  opacity: .42;
  transition: color 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.app-shell.block-swap-mode .cell.block-swap-anchor .digit,
.app-shell.block-swap-mode .cell.block-swap-drag-source .digit,
.app-shell.block-swap-mode .cell.block-swap-drag-target .digit {
  color: var(--ink);
  opacity: 1;
}

.cell.block-swap-complete {
  background: #e2f4e8;
  border: 0 solid #238255;
  cursor: default;
}

.app-shell.block-swap-mode .cell.block-swap-complete .digit {
  color: #173f2b;
  opacity: 1;
}

.cell.block-swap-complete-top { border-top-width: 4px; }
.cell.block-swap-complete-right { border-right-width: 4px; }
.cell.block-swap-complete-bottom { border-bottom-width: 4px; }
.cell.block-swap-complete-left { border-left-width: 4px; }

.cell.block-swap-manual-lock {
  background: #e8edf5;
  box-shadow: inset 0 0 0 3px #61728e;
}

.app-shell.block-swap-mode .cell.block-swap-manual-lock .digit {
  color: #33445f;
  opacity: .82;
}

.cell.block-swap-just-completed {
  animation: block-swap-complete-pop 620ms cubic-bezier(.2, .9, .25, 1.2) var(--block-swap-delay, 0ms) both;
}

@keyframes block-swap-complete-pop {
  0% {
    background: #ffd76b;
    filter: brightness(1.15);
    transform: scale(.9);
  }
  55% {
    background: #bcebc9;
    filter: brightness(1.08);
    transform: scale(1.08);
  }
  100% {
    background: #e2f4e8;
    filter: brightness(1);
    transform: scale(1);
  }
}

.cell.block-swap-drag-source {
  z-index: 9;
  background: #ffd76b;
  box-shadow: 0 8px 18px rgba(32, 37, 43, .28), inset 0 0 0 3px rgba(32, 37, 43, .72);
  animation: block-swap-lift 650ms ease-in-out infinite alternate;
}

.cell.block-swap-drag-source .digit {
  transform: scale(1.12);
}

.cell.block-swap-drag-target {
  z-index: 8;
  background: #bde9df;
  box-shadow: inset 0 0 0 4px #178c78, 0 0 0 3px rgba(23, 140, 120, .2);
  animation: block-swap-target 420ms ease-in-out infinite alternate;
}

@keyframes block-swap-lift {
  from { transform: scale(1.03); }
  to { transform: scale(1.08); }
}

@keyframes block-swap-target {
  from { transform: scale(.97); }
  to { transform: scale(1.02); }
}

.cell.player-low-life {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 246, 132, .75) 0 18%, transparent 34%),
    linear-gradient(135deg, rgba(255, 235, 214, .98), rgba(255, 201, 185, .94));
  box-shadow: inset 0 0 14px rgba(216, 36, 36, .16);
}

.cell.player-low-life::before {
  content: none;
}

.cell.related {
  background: var(--related);
}

.cell.selected-cage {
  background: var(--cage-focus);
}

.cell.same-number {
  background: #fce4a3;
}

.cell.same-number.related {
  background: #f8dea0;
}

.cell.same-number.selected-cage {
  background: #cde8e2;
}

.cell.effect-error {
  animation: wrong-pulse .48s ease-out;
  color: var(--wrong);
}

.cell.wrong-entry .digit {
  color: var(--wrong);
  text-shadow: 0 1px 0 rgba(255, 253, 250, .82);
}

.cell.effect-cleared {
  animation: clear-pop .65s ease-out;
}

.cell.effect-mine {
  animation: mine-burst .7s ease-out;
}

.cell.effect-mine-search-hit {
  animation: mine-search-explode .9s ease-out;
}

.cell.effect-heart {
  animation: heart-burst .7s ease-out;
}

.cell.effect-hint,
.cell.effect-hint-target {
  animation: hint-burst .7s ease-out;
}

.cell.hint-noise-zone {
  background:
    radial-gradient(circle at 24% 28%, rgba(122, 88, 181, .24) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 64%, rgba(58, 150, 169, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 76%, rgba(122, 88, 181, .14) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 26%, rgba(122, 88, 181, .16) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 18% 72%, rgba(58, 150, 169, .13) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 55% 46%, rgba(122, 88, 181, .1) 0 1.5px, transparent 2.5px),
    #f4eff8;
}

.cell.hint-noise-zone.selected {
  background:
    radial-gradient(circle at 24% 28%, rgba(122, 88, 181, .32) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 64%, rgba(58, 150, 169, .24) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 76%, rgba(122, 88, 181, .2) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 26%, rgba(122, 88, 181, .22) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 18% 72%, rgba(58, 150, 169, .18) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 55% 46%, rgba(122, 88, 181, .15) 0 1.5px, transparent 2.5px),
    #eadbff;
  box-shadow: inset 0 0 0 3px rgba(122, 88, 181, .2);
}

.cell.effect-block-complete {
  animation: block-complete-burst .85s ease-out;
}

.board.block-swap-finalizing {
  animation: block-swap-final-clear 1.2s ease-out both;
}

.board.block-swap-finalizing .cell.block-swap-complete {
  animation: block-swap-final-cell 1.05s ease-out both;
}

.cell.effect-cage-complete {
  animation: cage-complete-burst .76s ease-out;
}

.cell.effect-cage-shift {
  animation: cage-shift-pulse .52s ease-out;
}

.cell.effect-shuffle {
  animation: cage-shift-pulse .7s ease-out;
}

.cell.effect-patrol,
.cell.effect-patrol-blocked,
.cell.effect-bomber,
.cell.effect-bomber-blocked,
.cell.effect-chaser,
.cell.effect-chaser-blocked,
.cell.effect-chaser-stun,
.cell.effect-striker,
.cell.effect-striker-stun,
.cell.effect-lightning,
.cell.effect-lightning-hit,
.cell.effect-sleeper-blocked,
.cell.effect-jammer-blocked {
  animation: patrol-pulse .5s ease-out;
}

.cell.patrol-next::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(35, 134, 160, .36);
  border-radius: 6px;
  z-index: 4;
  pointer-events: none;
}

.cell.patrol-blocked {
  background: #e4f0f3;
}

.cell.patrol-blocked.selected {
  background: #c9e4ea;
}

.cell.chaser-next::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(222, 70, 58, .38);
  border-radius: 999px;
  background: rgba(222, 70, 58, .08);
  z-index: 4;
  pointer-events: none;
}

.cell.chaser-blocked {
  background: #fde6df;
}

.cell.chaser-blocked.selected {
  background: #f8cfc5;
}

.cell.chaser-stunned {
  background: #ece5f7;
}

.cell.striker-next::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px dashed rgba(224, 75, 38, .44);
  border-radius: 8px;
  background: rgba(224, 75, 38, .08);
  z-index: 4;
  pointer-events: none;
}

.cell.striker-blocked {
  background: #ffe5d8;
}

.cell.striker-blocked.selected {
  background: #ffc2ad;
}

.cell.striker-stunned {
  background: #ece5f7;
}

.cell.lightning-warning {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(122, 93, 183, .12) 0 6px,
      rgba(122, 93, 183, .02) 6px 12px
    ),
    var(--cell);
  box-shadow: inset 0 0 0 3px rgba(104, 83, 172, .3);
}

.cell.lightning-warning.selected {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(146, 96, 196, .2) 0 6px,
      rgba(146, 96, 196, .05) 6px 12px
    ),
    #f3e7ff;
  box-shadow:
    inset 0 0 0 4px rgba(153, 72, 196, .56),
    0 0 0 2px rgba(153, 72, 196, .32);
}

.lightning-marker {
  position: absolute;
  pointer-events: none;
}

.lightning-marker-warning {
  inset: 9px;
  z-index: 4;
  border: 2px dashed rgba(104, 83, 172, .5);
  border-radius: 7px;
  background:
    linear-gradient(116deg, transparent 0 38%, rgba(177, 158, 231, .35) 39% 50%, transparent 51% 100%);
  opacity: .82;
  animation: lightning-warn .68s ease-in-out infinite alternate;
}

.cell.lightning-danger {
  background: #fff0a8;
  box-shadow:
    inset 0 0 0 4px rgba(240, 138, 24, .58),
    0 0 13px rgba(255, 209, 74, .42);
}

.cell.lightning-danger.selected {
  background: #ffc9a5;
  box-shadow:
    inset 0 0 0 4px rgba(214, 64, 55, .66),
    0 0 0 2px rgba(214, 64, 55, .34),
    0 0 15px rgba(255, 126, 62, .42);
}

.lightning-marker-danger {
  inset: 8px;
  z-index: 4;
  border: 2px solid rgba(218, 111, 24, .5);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 244, 154, .72), rgba(255, 200, 72, .18) 58%, transparent 62%);
  animation: lightning-danger .22s ease-in-out infinite alternate;
}

.cell.lightning-strike {
  background: #fff07a;
  box-shadow:
    inset 0 0 0 4px rgba(255, 152, 32, .72),
    0 0 18px rgba(255, 204, 56, .56);
}

.lightning-marker-strike {
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 24px;
  height: 34px;
  background: linear-gradient(180deg, #fff78a 0%, #ffbe22 54%, #ee7a20 100%);
  clip-path: polygon(51% 0, 18% 46%, 43% 46%, 31% 100%, 82% 34%, 56% 34%);
  filter: drop-shadow(0 2px 3px rgba(160, 75, 12, .38));
  transform: translate(-50%, -50%);
  animation: lightning-bolt .5s ease-out;
}

.cell.bomber-next::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(210, 84, 38, .35);
  border-radius: 6px;
  z-index: 4;
  pointer-events: none;
}

.cell.bomber-blocked {
  background: #fff1d7;
}

.cell.bomber-blocked.selected {
  background: #ffe1a3;
}

.cell.bomber-heat-1 {
  background: #ffc796;
}

.cell.bomber-heat-2 {
  background: #ff927c;
}

.cell.bomber-heat-3 {
  background: #ff625f;
}

.cell.bomber-defuse-zone {
  box-shadow: inset 0 0 0 4px rgba(36, 143, 198, .48);
}

.cell.bomber-defuse-zone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 22px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 36'%3E%3Cpath d='M15 2C11 8 6 13 4.4 18.4 2.2 25.9 7.4 34 15 34s12.8-8.1 10.6-15.6C24 13 19 8 15 2Z' fill='%2363c7f1' stroke='%231d82bd' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M11 9.5c-2.6 3.9-4.5 6.6-5 10.1-.8 5.6 3.5 10.7 9.1 10.7 4.2 0 7.6-2.7 8.7-6.5-1.8 2.6-4.5 4-8 4-5.8 0-9.6-5.3-7.8-10.7.7-2.1 1.8-4.4 3-7.6Z' fill='%23b9efff' opacity='.55'/%3E%3Cellipse cx='18.8' cy='13.1' rx='3.4' ry='4.1' fill='%23ffffff' opacity='.78' transform='rotate(-23 18.8 13.1)'/%3E%3Cpath d='M22.7 20.8c.1 5.2-3.2 8.4-8 9.1' fill='none' stroke='%23066fa8' stroke-width='2.2' stroke-linecap='round' opacity='.25'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(32, 38, 45, .18));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cell.cage-eater-next::after {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: 4;
  border: 2px dashed rgba(109, 67, 151, .4);
  border-radius: 6px;
  pointer-events: none;
}

.cell.cage-eater-blocked {
  background: #f2e9fb;
}

.cell.cage-eater-blocked.selected {
  background: #e4d1f6;
}

.cell.cage-eater-heat-1 {
  background: #d9c6ef;
}

.cell.cage-eater-heat-2 {
  background: #bd98df;
}

.cell.cage-eater-heat-3 {
  background: #9668c5;
}

.cell.cage-eater-defuse-zone {
  box-shadow: inset 0 0 0 4px rgba(194, 137, 37, .48);
}

.cell.cage-eater-defuse-zone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='24' r='4.2' fill='%23fff8db' stroke='%23244f58' stroke-width='2.6'/%3E%3Ccircle cx='24.5' cy='24' r='4.2' fill='%23fff8db' stroke='%23244f58' stroke-width='2.6'/%3E%3Cpath d='M13 21 26 8M21 21 8 8' stroke='%23244f58' stroke-width='3.2'/%3E%3Cpath d='M17 16.7 19.4 19.1' stroke='%23c28925' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(32, 38, 45, .18));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cell.sleeper-blocked-zone {
  background: rgba(214, 237, 250, var(--sleeper-block-bg-alpha, .58));
  box-shadow: inset 0 0 0 4px rgba(55, 136, 190, var(--sleeper-block-ring-alpha, .36));
}

.cell.sleeper-blocked-turn-3 {
  --sleeper-block-bg-alpha: .72;
  --sleeper-block-ring-alpha: .44;
  --sleeper-block-icon-alpha: .96;
}

.cell.sleeper-blocked-turn-2 {
  --sleeper-block-bg-alpha: .48;
  --sleeper-block-ring-alpha: .28;
  --sleeper-block-icon-alpha: .66;
}

.cell.sleeper-blocked-turn-1 {
  --sleeper-block-bg-alpha: .26;
  --sleeper-block-ring-alpha: .16;
  --sleeper-block-icon-alpha: .38;
}

.sleeper-block-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 28px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'%3E%3Cpath d='M16 2 29 7v10c0 8.5-6.2 14.2-13 17C9.2 31.2 3 25.5 3 17V7z' fill='%239ed7f5' stroke='%232f8bc0' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M16 5.5 25.5 9v8c0 6.2-4.2 10.7-9.5 13-5.3-2.3-9.5-6.8-9.5-13V9z' fill='%23e5f6ff' opacity='.82'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(32, 38, 45, .16));
  opacity: var(--sleeper-block-icon-alpha, .8);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cell.sleeper-blocked-zone.lightning-warning,
.cell.sleeper-blocked-zone.lightning-danger,
.cell.sleeper-blocked-zone.lightning-strike {
  box-shadow:
    inset 0 0 0 4px rgba(240, 138, 24, .42),
    0 0 13px rgba(255, 209, 74, .28);
}

.cell.jammed-cell {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(89, 78, 115, .11) 0 3px,
      rgba(255, 253, 250, .08) 3px 7px
    ),
    #eee9f3;
}

.cell.jammed-cell.selected {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(89, 78, 115, .14) 0 3px,
      rgba(255, 253, 250, .1) 3px 7px
    ),
    #ddd3ec;
}

.cell.jammed-filled::after {
  content: "?";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  color: #5d47a3;
  font-size: clamp(22px, 6.5vw, 34px);
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 253, 250, .95),
    0 2px 4px rgba(32, 38, 45, .18);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.jammer-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  width: 34px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36'%3E%3Cpath d='M3 18C8.4 8.4 14.8 4.6 22 4.6S35.6 8.4 41 18c-5.4 9.6-11.8 13.4-19 13.4S8.4 27.6 3 18Z' fill='%2323262d'/%3E%3Ccircle cx='22' cy='18' r='9.5' fill='%23f8f4ff'/%3E%3Ccircle cx='22' cy='18' r='5.4' fill='%238b6bd6'/%3E%3Cpath d='M8 4 36 32' stroke='%2323262d' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M8 4 36 32' stroke='%23ffdb5c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(32, 38, 45, .22));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.patrol-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  width: 28px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'%3E%3Cpath d='M16 2 29 7v10c0 8.5-6.2 14.2-13 17C9.2 31.2 3 25.5 3 17V7z' fill='%23a8dc7c' stroke='%233f9d61' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M16 5.5 25.5 9v8c0 6.2-4.2 10.7-9.5 13-5.3-2.3-9.5-6.8-9.5-13V9z' fill='%23dff0a8' opacity='.75'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(32, 38, 45, .24));
  transform: translate(-50%, -50%);
}

.patrol-marker::before,
.patrol-marker::after {
  display: none;
}

.bomber-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  width: 32px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 42'%3E%3Cpath d='M23 9c2.7-3.7 6.5-5 10.5-3.7' fill='none' stroke='%232a2e34' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='34' cy='5' r='3.4' fill='%23ffb02e'/%3E%3Ccircle cx='34' cy='5' r='6.2' fill='%23ff3b24' opacity='.38'/%3E%3Crect x='15' y='8' width='12' height='7' rx='2' fill='%2340474f'/%3E%3Ccircle cx='20' cy='25' r='14' fill='%23252a31'/%3E%3Cpath d='M12 17c3-3 9-4 14-1' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' opacity='.22'/%3E%3Cpath d='M30 24a10 10 0 0 1-10 10' fill='none' stroke='%23000000' stroke-width='3' opacity='.18'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(32, 38, 45, .24));
  transform: translate(-50%, -50%);
}

.bomber-marker::before,
.bomber-marker::after {
  display: none;
}

.cage-eater-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  width: 30px;
  height: 30px;
  background: url("./assets/enemies/cage-eater.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(32, 38, 45, .25));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cage-eater-marker::before,
.cage-eater-marker::after {
  display: none;
}

.chaser-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  width: 28px;
  height: 28px;
  border: 2.5px solid #7e2328;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 41%, #fff 0 2px, transparent 2.8px),
    radial-gradient(circle at 65% 41%, #fff 0 2px, transparent 2.8px),
    radial-gradient(circle at 35% 43%, #20252c 0 1px, transparent 1.7px),
    radial-gradient(circle at 65% 43%, #20252c 0 1px, transparent 1.7px),
    linear-gradient(180deg, #ff7565 0%, #d9433f 100%);
  box-shadow: inset 0 -4px 0 rgba(112, 28, 33, .25);
  filter: drop-shadow(0 2px 2px rgba(32, 38, 45, .22));
  transform: translate(-50%, -50%);
}

.chaser-marker::before,
.chaser-marker::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: #7e2328;
}

.chaser-marker::before {
  left: 5px;
  transform: rotate(20deg);
}

.chaser-marker::after {
  right: 5px;
  transform: rotate(-20deg);
}

.chaser-stunned .chaser-marker {
  opacity: .72;
  filter: grayscale(.25) drop-shadow(0 2px 2px rgba(32, 38, 45, .18));
}

.striker-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  width: 42px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2044%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22body%22%20x1%3D%220%22%20y1%3D%226%22%20x2%3D%220%22%20y2%3D%2238%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235f6872%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%23242a32%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230c1117%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22metal%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e9edf0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2377818b%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22fire%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2260%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff27b%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ff922d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ef3d24%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M3%2022c5-6.2%2010.4-9%2016-9h5v18h-5C13.4%2031%208%2028.2%203%2022Z%22%20fill%3D%22url%28%23fire%29%22%2F%3E%3Cpath%20d%3D%22M10%2022c3-3.2%206.5-4.7%2010.4-4.7H25v9.4h-4.6C16.5%2026.7%2013%2025.2%2010%2022Z%22%20fill%3D%22%23ffe861%22%2F%3E%3Cpath%20d%3D%22M20%208h31c10%200%2017%206.2%2018%2014-1%207.8-8%2014-18%2014H20C12.8%2036%208%2029.8%208%2022S12.8%208%2020%208Z%22%20fill%3D%22url%28%23body%29%22%20stroke%3D%22%23121820%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M53%208.7C62%2010.8%2068.1%2016%2069%2022c-.9%206-7%2011.2-16%2013.3%203.6-6.7%203.6-19.9%200-26.6Z%22%20fill%3D%22%23121820%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M18%2013.6c8.8-2.4%2022-2%2034%201.1%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.18%22%2F%3E%3Cpath%20d%3D%22M42.5%2016.1%2055%2013.1M42.5%2027.9%2055%2030.9%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2249%22%20cy%3D%2217.5%22%20r%3D%222.1%22%20fill%3D%22%2310151b%22%2F%3E%3Ccircle%20cx%3D%2249%22%20cy%3D%2226.5%22%20r%3D%222.1%22%20fill%3D%22%2310151b%22%2F%3E%3Cpath%20d%3D%22M58.5%2020.2c1.9.4%203.5%201%204.8%201.8-1.3.8-2.9%201.4-4.8%201.8%22%20fill%3D%22none%22%20stroke%3D%22%2388919b%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2078%2044%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22body%22%20x1%3D%220%22%20y1%3D%227%22%20x2%3D%220%22%20y2%3D%2237%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23626c76%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23252b33%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230c1117%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22fire%22%20cx%3D%2245%25%22%20cy%3D%2250%25%22%20r%3D%2265%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff06a%22%2F%3E%3Cstop%20offset%3D%22.52%22%20stop-color%3D%22%23ff8b2a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e93424%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M2%2022c6-7.2%2013-10.8%2022-10.8h8v21.6h-8C15%2032.8%208%2029.2%202%2022Z%22%20fill%3D%22url%28%23fire%29%22%2F%3E%3Cpath%20d%3D%22M10%2022c4-3.8%208.4-5.5%2013.4-5.5h7.2v11h-7.2C18.4%2027.5%2014%2025.8%2010%2022Z%22%20fill%3D%22%23ffe96c%22%2F%3E%3Cpath%20d%3D%22M19%208h34c12%200%2021.2%206.2%2023%2014-1.8%207.8-11%2014-23%2014H19C12.3%2036%208%2030.1%208%2022S12.3%208%2019%208Z%22%20fill%3D%22url%28%23body%29%22%20stroke%3D%22%23121820%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56%208.9c10.6%202.1%2018.4%207.3%2020%2013.1-1.6%205.8-9.4%2011-20%2013.1%204.1-6.8%204.1-19.4%200-26.2Z%22%20fill%3D%22%23121820%22%20opacity%3D%22.72%22%2F%3E%3Cpath%20d%3D%22M18.2%2013.5c8.6-2.1%2022-1.8%2034.3%201%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.18%22%2F%3E%3Cpath%20d%3D%22M45.4%2016%2059%2012.8M45.4%2028%2059%2031.2%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2251.8%22%20cy%3D%2217.4%22%20r%3D%222.1%22%20fill%3D%22%230e141a%22%2F%3E%3Ccircle%20cx%3D%2251.8%22%20cy%3D%2226.6%22%20r%3D%222.1%22%20fill%3D%22%230e141a%22%2F%3E%3Cpath%20d%3D%22M63.6%2020.2c2%20.4%203.8%201%205.2%201.8-1.4.8-3.2%201.4-5.2%201.8%22%20fill%3D%22none%22%20stroke%3D%22%238a939d%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  filter: drop-shadow(0 2px 2px rgba(32, 38, 45, .28));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.striker-marker::before {
  display: none;
}

.striker-marker::after {
  display: none;
}

.striker-left .striker-marker {
  transform: translate(-50%, -50%) rotate(180deg);
}

.striker-vertical .striker-marker {
  transform: translate(-50%, -50%) rotate(90deg);
}

.striker-up .striker-marker {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.striker-stunned .striker-marker {
  opacity: .72;
  filter: grayscale(.25) drop-shadow(0 2px 2px rgba(32, 38, 45, .18));
}

.sleeper-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  width: 30px;
  height: 30px;
  background: url("./assets/enemies/sleeper.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(32, 38, 45, .2));
  transform: translate(-50%, -50%);
}

.sleeper-marker::before {
  display: none;
}

.sleeper-marker::after {
  display: none;
}

.player-marker {
  position: absolute;
  z-index: 18;
  right: 3px;
  top: 3px;
  width: 16px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath d='M12 2.5c-4.7 0-8 3.2-8 7.8 0 5.4 8 13.2 8 13.2s8-7.8 8-13.2c0-4.6-3.3-7.8-8-7.8Z' fill='%23fffdfa' stroke='%2320252b' stroke-width='2.6' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10.1' r='3.2' fill='%23ef5534'/%3E%3Cpath d='M8.2 5.8c1.1-.9 2.4-1.3 3.8-1.3' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(32, 38, 45, .26));
  pointer-events: none;
}

.cell.grid-walk-move-up .player-marker { animation: grid-walk-arrive-up 280ms cubic-bezier(.2, .8, .25, 1); }
.cell.grid-walk-move-down .player-marker { animation: grid-walk-arrive-down 280ms cubic-bezier(.2, .8, .25, 1); }
.cell.grid-walk-move-left .player-marker { animation: grid-walk-arrive-left 280ms cubic-bezier(.2, .8, .25, 1); }
.cell.grid-walk-move-right .player-marker { animation: grid-walk-arrive-right 280ms cubic-bezier(.2, .8, .25, 1); }
.cell.grid-walk-move-warp .player-marker { animation: grid-walk-arrive-warp 360ms cubic-bezier(.2, .85, .25, 1.15); }

@keyframes grid-walk-arrive-up {
  from { opacity: .2; transform: translateY(34px) scale(.72); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes grid-walk-arrive-down {
  from { opacity: .2; transform: translateY(-34px) scale(.72); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes grid-walk-arrive-left {
  from { opacity: .2; transform: translateX(34px) scale(.72); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes grid-walk-arrive-right {
  from { opacity: .2; transform: translateX(-34px) scale(.72); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes grid-walk-arrive-warp {
  0% { opacity: 0; transform: scale(.35) rotate(-12deg); }
  65% { opacity: 1; transform: scale(1.2) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

.cell.has-pencil-notes .player-marker {
  opacity: .18 !important;
}

.player-marker-danger {
  right: 1px;
  top: 1px;
  width: 22px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath d='M12 2.5c-4.7 0-8 3.2-8 7.8 0 5.4 8 13.2 8 13.2s8-7.8 8-13.2c0-4.6-3.3-7.8-8-7.8Z' fill='%23ef5534' stroke='%2320252b' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M12 6.5v7.1' fill='none' stroke='%23fffdfa' stroke-width='2.7' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.3' r='1.35' fill='%23fffdfa'/%3E%3Cpath d='M8.1 5.8c1.1-.85 2.4-1.28 3.9-1.28' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 4px rgba(239, 85, 52, .9)) drop-shadow(0 2px 2px rgba(32, 38, 45, .34));
  animation: player-marker-danger-pulse .9s ease-in-out infinite;
}

.cell.effect-error .player-marker,
.cell.effect-lightning-hit .player-marker {
  animation: player-marker-hit .42s ease-out;
}

.digit {
  position: relative;
  z-index: 7;
}

.cell.mine-risk-1 .digit {
  color: #1d8a4a;
}

.cell.mine-risk-2 .digit {
  color: #a77900;
}

.cell.mine-risk-3 .digit {
  color: #d05a18;
}

.cell.mine-risk-4 .digit {
  color: #c62828;
}

.cell[class*="mine-risk-"] .digit {
  text-shadow: 0 1px 0 rgba(255, 253, 250, .78);
}

.cage-sum {
  position: absolute;
  z-index: 6;
  top: 2px;
  left: 2px;
  padding: 0 2px 1px 1px;
  border-radius: 3px;
  background: inherit;
  color: #4f5660;
  font-size: clamp(8px, 2.3vw, 11px);
  font-weight: 800;
  line-height: 1;
}

.cage-sum.cage-sum-noisy {
  min-width: 1em;
  color: #7048a8;
  text-align: center;
  text-shadow:
    1px 0 rgba(35, 143, 160, .42),
    -1px 0 rgba(143, 75, 170, .34);
  animation: cage-sum-noise-flicker .8s steps(2, end) infinite;
}

@keyframes cage-sum-noise-flicker {
  0%, 100% { opacity: 1; transform: translate(0, 0); }
  40% { opacity: .72; transform: translate(.5px, 0); }
  70% { opacity: .9; transform: translate(-.5px, .25px); }
}

.cage-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.cage-path {
  fill: none;
  stroke: var(--cage);
  stroke-width: 2.5;
  stroke-linecap: butt;
  stroke-dasharray: 8 6;
}

.cage-corner-mark {
  fill: none;
  stroke: var(--cage);
  stroke-width: 2.5;
  stroke-linecap: butt;
}

.grid-line,
.grid-line-heavy {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.grid-line-heavy {
  stroke: var(--heavy);
  stroke-width: 2.5;
}

.item-icon {
  position: absolute;
  z-index: 5;
  right: 8px;
  bottom: 8px;
  pointer-events: none;
}

.item-icon-heart {
  width: 7px;
  height: 6px;
  transform: rotate(-45deg);
  background: var(--heart);
  border-radius: 2px;
}

.item-icon-heart::before,
.item-icon-heart::after {
  position: absolute;
  width: 7px;
  height: 6px;
  border-radius: 50%;
  background: var(--heart);
  content: "";
}

.item-icon-heart::before {
  top: -3px;
  left: 0;
}

.item-icon-heart::after {
  top: 0;
  left: 3px;
}

.item-icon-hint {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--hint);
  border-radius: 50% 50% 45% 45%;
  background: rgba(122, 88, 181, .1);
}

.item-icon-hint::before,
.item-icon-hint::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hint);
  content: "";
}

.item-icon-hint::before {
  bottom: -4px;
  width: 6px;
  height: 4px;
  border-radius: 1px;
}

.item-icon-hint::after {
  bottom: -6px;
  width: 5px;
  height: 1.5px;
  border-radius: 999px;
}

.item-icon-shuffle {
  right: 6px;
  bottom: 5px;
  z-index: 3;
  width: 14px;
  height: 12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cg fill='none' stroke='%233091af' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h15M14 2l3 3-3 3M22 15H7M10 12l-3 3 3 3'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity: .9;
}

.item-icon-shuffle::before,
.item-icon-shuffle::after {
  display: none;
}

.board.blind-intro .digit {
  animation: blind-digit-hide 1s ease .45s forwards;
}

@keyframes blind-digit-hide {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: scale(.92);
    filter: blur(4px);
  }
}

@keyframes player-marker-hit {
  0% {
    transform: translateX(0) scale(1);
    filter: drop-shadow(0 1px 1px rgba(32, 38, 45, .26));
  }
  30% {
    transform: translateX(-2px) scale(1.14);
    filter: drop-shadow(0 0 5px rgba(240, 100, 100, .72));
  }
  62% {
    transform: translateX(2px) scale(1.06);
  }
  100% {
    transform: translateX(0) scale(1);
    filter: drop-shadow(0 1px 1px rgba(32, 38, 45, .26));
  }
}

@keyframes player-marker-danger-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.12);
    opacity: .86;
  }
}

@keyframes player-low-life-cell-pulse {
  0%, 100% {
    opacity: .72;
    transform: scale(.96);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.notes {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--hint);
  font-size: clamp(12px, 4vw, 18px);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.pencil-notes {
  position: absolute;
  z-index: 6;
  inset: 9px 5px 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  color: #6d7681;
  font-size: clamp(7px, 2vw, 10px);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.cell.has-pencil-notes .item-icon,
.cell.wrong-entry .item-icon {
  opacity: .22;
}

.hint-mine-marker,
.mine-note-marker {
  position: absolute;
  z-index: 5;
  right: 4px;
  bottom: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .32) 0 13%, transparent 15%),
    #20252b;
  pointer-events: none;
}

.mine-note-marker {
  z-index: 7;
  right: 3px;
  bottom: 3px;
  width: 15px;
  height: 15px;
  border: 2px solid #d56a20;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .45) 0 13%, transparent 15%),
    #fffdfa;
  opacity: .95;
}

.hint-mine-marker::before,
.mine-note-marker::before {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 4px;
  height: 5px;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    #cfd1ce 0 1px,
    #7c7f7b 1px 2px
  );
  transform: translateX(-50%) rotate(6deg);
  transform-origin: bottom center;
  content: "";
}

.hint-mine-marker::after,
.mine-note-marker::after {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffd76b 0 30%, #ff8a2d 42%, rgba(240, 66, 58, .9) 62%, rgba(240, 66, 58, 0) 72%);
  filter: blur(.2px);
  transform: translateX(-35%);
  content: "";
}

.mine-note-marker::before {
  top: -6px;
  width: 5px;
  height: 6px;
}

.mine-note-marker::after {
  top: -12px;
  width: 8px;
  height: 8px;
  opacity: .9;
}

.controls {
  min-width: 0;
  padding: 2px 0 1px;
}

.tool-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 7px;
  touch-action: none;
}

.tool-button {
  min-height: 36px;
  border: 2px solid var(--heavy);
  border-radius: 8px;
  background: #fffdfa;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  touch-action: none;
}

.tool-button.is-active {
  background: var(--selected);
}

.tool-button:disabled {
  opacity: .35;
}

.pad {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 5px;
  min-width: 0;
  touch-action: none;
}

.number-button,
.primary-button {
  min-height: 56px;
  border-radius: 8px;
  background: #fffdfa;
  border: 2px solid var(--heavy);
  font-weight: 900;
  touch-action: none;
}

.number-button {
  min-width: 0;
  padding: 0;
  font-size: 25px;
}

.number-button-complete {
  visibility: hidden;
  pointer-events: none;
}

.app-shell.block-swap-mode .pad,
.app-shell.block-swap-mode .item-legend {
  display: none;
}

.app-shell.block-swap-mode .tool-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.number-button-climb-locked {
  border-color: #cbc7bf;
  background: #e8e5df;
  color: #aaa49a;
  opacity: .55;
}

.number-button-noted {
  background: #ebe7dd;
  color: #9a9488;
}

.number-button-candidate {
  border-color: #1c8f78;
  background: #dff8ec;
  color: #0f6f5d;
  box-shadow: inset 0 0 0 2px rgba(28, 143, 120, .26);
}

.combo-toast {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  color: #fffdfa;
  font-size: 14px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
}

.combo-toast.is-active {
  opacity: 1;
}

.combo-toast span {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(32, 37, 43, .9);
  animation: toast-pop 1.25s ease both;
}

.combo-toast-lg span {
  padding: 10px 16px;
  border: 2px solid rgba(255, 253, 250, .65);
  background: #e4572e;
  font-size: 17px;
  box-shadow: 0 10px 24px rgba(228, 87, 46, .34);
  animation: toast-pop-strong 1.35s ease both;
}

.combo-toast-xl span {
  padding: 13px 20px;
  border: 3px solid rgba(255, 253, 250, .85);
  background: #d83a28;
  font-size: 21px;
  box-shadow: 0 0 0 8px rgba(216, 58, 40, .18), 0 16px 34px rgba(216, 58, 40, .42);
  animation: toast-pop-mega 1.45s ease both;
}

.combo-toast-century span {
  padding: 15px 24px;
  border: 3px solid rgba(255, 253, 250, .96);
  background: #20252b;
  color: #ffd76b;
  font-size: 24px;
  box-shadow: 0 0 0 10px rgba(255, 215, 107, .2), 0 18px 40px rgba(32, 37, 43, .4);
  animation: toast-pop-century 1.65s ease both;
}

.combo-toast-muted.is-active {
  opacity: .42;
}

.combo-toast-muted span {
  border-color: rgba(32, 37, 43, .18);
  background: rgba(255, 253, 250, .72);
  color: #20252b;
  transform: scale(.86);
  box-shadow: none;
  filter: saturate(.72);
}

.combo-toast-muted.combo-toast-xl span,
.combo-toast-muted.combo-toast-century span {
  transform: scale(.78);
}

.combo-toast.is-softened {
  opacity: .14;
}

.combo-toast.is-softened span {
  border-color: rgba(32, 37, 43, .18);
  background: rgba(255, 253, 250, .68);
  color: #20252b;
  box-shadow: none;
  filter: saturate(.65);
}

.primary-button {
  width: 100%;
  background: var(--accent);
  color: white;
}

.revive-button {
  background: #20252b;
  color: #ffd76b;
}

.revive-button:disabled {
  opacity: .55;
}

.dialog-actions {
  display: grid;
  gap: 8px;
}

.secondary-dialog-button {
  min-height: 44px;
  border-radius: 8px;
  background: #fffdfa;
  border: 2px solid var(--heavy);
  font-weight: 900;
}

.danger-dialog-button {
  display: grid;
  gap: 2px;
  place-items: center;
  padding: 7px 10px;
  border-color: #9c2f2f;
  background: #fff0ed;
  color: #8f2424;
  box-shadow: inset 0 0 0 1px rgba(156, 47, 47, .16);
}

.danger-dialog-button span {
  font-size: 14px;
  line-height: 1.15;
}

.danger-dialog-button small {
  color: #a84a3e;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
}

.danger-dialog-button:active {
  background: #ffd9d2;
}

.intro-body p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.intro-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 16px;
}

.intro-items span {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.intro-items .legend-icon {
  flex: 0 0 auto;
}

.difficulty-list {
  display: grid;
  gap: 8px;
}

.menu-section-title {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.daily-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px;
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
  text-align: left;
}

.daily-toggle.is-active {
  border-color: var(--accent);
  background: #fff2e9;
}

.daily-toggle strong {
  font-size: 15px;
}

.daily-toggle span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.daily-toggle small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.daily-toggle .daily-date {
  align-self: center;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.daily-history {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.daily-history[hidden] {
  display: none;
}

.daily-history h3 {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.daily-history-list {
  display: grid;
  gap: 7px;
}

.daily-history-day {
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
}

.daily-history-day h4 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.daily-history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 4px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.daily-history-row span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
}

.daily-no-mistake {
  padding: 1px 5px;
  border-radius: 999px;
  background: #fff0be;
  color: #6e5b22;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.daily-item-badges {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
}

.daily-item-badge {
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid #e3ddd1;
  background: #ffffff;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.daily-item-mine {
  background: #f0f1f2;
  border-color: #d5d9dd;
  color: #333940;
}

.daily-item-heart {
  background: #ffeaf1;
  border-color: #f6c3d2;
  color: #ca3f66;
}

.daily-item-hint {
  background: #f1eaff;
  border-color: #d6c3f4;
  color: #7050b4;
}

.daily-item-none {
  background: #f7f5ef;
  color: #7c756a;
}

.daily-history-row strong {
  color: var(--ink);
}

.daily-history-empty {
  margin: 0;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.record-list {
  display: grid;
  gap: 10px;
}

.record-section {
  display: grid;
  gap: 6px;
}

.record-section h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.record-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
}

.record-card span {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.record-card strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.record-card small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
}

.record-empty {
  margin: 0;
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
}

.record-actions {
  margin-top: 12px;
}

.item-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 10px;
}

.modal .picker-title {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.item-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.item-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.item-toggle strong {
  margin-right: 0;
  color: var(--ink);
  font-size: 12px;
}

.difficulty-button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 2px solid var(--heavy);
  border-radius: 8px;
  background: #fffdfa;
  text-align: left;
}

.difficulty-button strong {
  font-size: 17px;
}

.difficulty-button span {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.difficulty-button small {
  color: #9a9488;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-align: right;
}

.difficulty-button .clear-badge {
  color: #4f3388;
  font-size: 10px;
}

.adventure-card-status {
  display: block;
  min-height: 0;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
}

.adventure-card-status.is-empty {
  display: none;
}

.adventure-button {
  grid-template-columns: auto minmax(0, 1fr);
  border-color: #7a58b5;
  background: #fbf8ff;
}

.adventure-button strong {
  color: #4f3388;
  white-space: nowrap;
}

.adventure-card-title {
  justify-items: start !important;
  text-align: left;
}

.adventure-card-title strong {
  line-height: 1.1;
}

.adventure-card-copy {
  min-width: 0;
  justify-items: end !important;
  text-align: right;
}

.adventure-card-copy b {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}

.adventure-card-copy small {
  font-size: 9px;
  line-height: 1.1;
}

.play-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.play-route-button {
  min-height: 66px;
  height: 100%;
  align-content: center;
  grid-template-columns: 1fr;
}

.play-route-button span {
  justify-items: start;
  text-align: left;
}

.rogue-run-gateway {
  border-color: #20252b;
  background:
    linear-gradient(135deg, rgba(248, 189, 85, .22), rgba(122, 88, 181, .16)),
    #fffdfa;
  box-shadow: 0 8px 18px rgba(32, 37, 43, .12);
}

.rogue-run-gateway strong {
  color: #20252b;
}

.rogue-run-gateway span {
  color: #6c4b16;
}

.duel-gateway {
  grid-column: 1 / -1;
  border-color: #a72d39;
  background:
    linear-gradient(105deg, rgba(230, 74, 89, .14) 0 48%, rgba(31, 126, 151, .14) 52% 100%),
    #fffdfa;
  box-shadow: 0 8px 18px rgba(32, 37, 43, .13);
}

.play-route-button.duel-gateway {
  min-height: 56px;
  height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.duel-gateway strong {
  color: #8e202e;
}

.duel-gateway span {
  color: #365e68;
}

.duel-difficulty-dialog {
  width: min(92vw, 430px);
  overflow: hidden;
}

.duel-difficulty-dialog .modal-body {
  width: 100%;
}

.duel-level-intro {
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.duel-level-list {
  display: grid;
  gap: 8px;
}

.duel-level-button {
  position: relative;
  width: 100%;
  min-height: 66px;
  padding: 10px 38px 10px 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 2px solid #b9b5aa;
  border-radius: 8px;
  background: #fffdfa;
  text-align: left;
  touch-action: manipulation;
}

.duel-level-button > em {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 14px;
  font-style: normal;
  font-weight: 950;
}

.duel-level-button > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.duel-level-button strong {
  font-size: 16px;
}

.duel-level-button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.duel-level-button > i {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.duel-level-button.is-rookie {
  color: #267a65;
  border-color: #75ae9f;
  background: #f2faf6;
}

.duel-level-button.is-standard {
  color: #a46708;
  border-color: #d7a34b;
  background: #fff9eb;
}

.duel-level-button.is-expert {
  color: #ad2f3e;
  border-color: #d16a76;
  background: #fff3f4;
}

.duel-level-back {
  width: 100%;
  margin-top: 12px;
}

.duel-panel {
  display: grid;
  gap: 7px;
  min-height: max-content;
  padding: 8px 9px 9px;
  border: 2px solid var(--heavy);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(26, 143, 157, .07), transparent 42% 58%, rgba(210, 55, 71, .07)),
    #fffdfa;
  overflow: hidden;
}

.duel-panel[hidden] {
  display: none;
}

.duel-panel.is-under-attack {
  border-color: #c43342;
  animation: duel-panel-hit .55s ease-in-out infinite alternate;
}

.duel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.duel-heading strong {
  font-size: 12px;
  letter-spacing: 0;
}

.duel-heading > small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
}

.duel-fighter-charge {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}

.duel-fighter-rival .duel-fighter-charge {
  justify-content: flex-end;
}

.duel-fighter-charge i {
  width: 11px;
  height: 6px;
  border: 1px solid #b7b3aa;
  border-radius: 2px;
  background: #e8e5dc;
  transform: skewX(-14deg);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.duel-fighter-charge i.is-charged {
  border-color: #cc8b17;
  background: #f5bd4e;
  box-shadow: 0 0 7px rgba(226, 150, 25, .45);
}

.duel-fighter-rival .duel-fighter-charge i.is-charged {
  border-color: #bd3443;
  background: #dc4654;
  box-shadow: 0 0 7px rgba(198, 51, 67, .38);
}

.duel-fighter-charge i.is-ready {
  animation: duel-charge-ready .42s ease-in-out infinite alternate;
}

.duel-arena {
  position: relative;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) 45px;
  align-items: center;
  gap: 7px;
  min-height: 48px;
}

.duel-fighter {
  position: relative;
  display: grid;
  grid-template-columns: 23px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  line-height: 1;
}

.duel-fighter > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #fff;
  font-size: 10px;
  font-weight: 950;
}

.duel-fighter b {
  font-size: 7px;
  color: var(--muted);
}

.duel-fighter strong {
  font-size: 12px;
}

.duel-fighter-you {
  color: #147f8d;
}

.duel-fighter-rival {
  grid-template-columns: 1fr 23px;
  text-align: right;
  color: #c53646;
}

.duel-fighter-rival > span {
  grid-column: 2;
}

.duel-race {
  position: relative;
  display: grid;
  gap: 5px;
}

.duel-race em {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(-6deg);
  padding: 2px 4px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: var(--heavy);
  color: #fff;
  font-size: 7px;
  font-style: normal;
  font-weight: 950;
}

.duel-lane {
  position: relative;
  height: 7px;
  border-radius: 2px;
  background: #dedbd2;
  overflow: hidden;
}

.duel-lane i {
  position: absolute;
  inset: 0 auto 0 0;
  background: #1a8f9d;
  transition: width .35s ease;
}

.duel-lane-rival i {
  background: #d23747;
}

.duel-active-effects {
  min-height: 20px;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d8d4c9;
  border-radius: 5px;
  background: rgba(255, 253, 250, .72);
  overflow: hidden;
}

.duel-active-effects > b {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 7px;
}

.duel-active-effects > div {
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.duel-active-effects > div::-webkit-scrollbar {
  display: none;
}

.duel-active-effects span {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 3px;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.2;
}

.duel-active-effects .is-clear {
  background: #7c847f;
}

.duel-active-effects .is-noise {
  background: #7348a5;
}

.duel-active-effects .is-barricade {
  background: #3d464c;
}

.duel-active-effects .is-fog {
  background: #9a3f82;
}

.duel-active-effects .is-lock {
  background: #c53646;
}

.duel-command-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.duel-command-row button {
  position: relative;
  min-width: 0;
  height: 38px;
  padding: 4px 20px 4px 5px;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  border: 1px solid #6f7375;
  border-radius: 6px;
  background: #fff;
  text-align: left;
  touch-action: manipulation;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.duel-command-row button:not(:disabled):active {
  transform: scale(.96);
}

.duel-command-row button > i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 4px;
  background: #242b30;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 950;
}

.duel-command-row button > span {
  min-width: 0;
  display: grid;
}

.duel-command-row button b {
  font-size: 9px;
  line-height: 1;
}

.duel-command-row button small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 7px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duel-command-row button > em {
  position: absolute;
  top: 4px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #edb13f;
  color: #29230f;
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
}

.duel-command-row button:disabled {
  border-color: #d3d0c7;
  color: #a8a49b;
  background: #f2f0ea;
  opacity: .67;
}

.duel-command-row button.is-active {
  border-color: #1a8f9d;
  background: #e8f7f6;
}

.duel-projectile {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #20252b;
  color: #fff;
  font-size: 17px;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 3px 9px rgba(32, 37, 43, .35);
  opacity: 0;
  transition: left .42s cubic-bezier(.18, .8, .2, 1), opacity .08s linear, transform .42s ease;
}

.duel-projectile.from-player {
  left: 27px;
  transform: translate(-50%, -50%) scale(.65) rotate(0);
}

.duel-projectile.from-rival {
  left: calc(100% - 27px);
  transform: translate(-50%, -50%) scale(.65) rotate(0);
}

.duel-projectile.at-player {
  left: 27px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.65);
}

.duel-projectile.at-player.is-flying {
  left: 27px;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}

.duel-projectile.from-player.is-flying {
  left: calc(100% - 27px);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(320deg);
}

.duel-projectile.from-rival.is-flying {
  left: 27px;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-320deg);
}

.duel-projectile.is-noise {
  background: #784cb1;
}

.duel-projectile.is-lock {
  background: #c53646;
}

.duel-projectile.is-fog {
  background: #70469c;
}

.duel-projectile.is-barricade {
  background: #3d464c;
}

.duel-projectile.is-shield,
.duel-projectile.is-blocked {
  background: #168b98;
}

.duel-impact-label {
  position: absolute;
  top: -2px;
  z-index: 7;
  padding: 3px 5px;
  border-radius: 4px;
  background: #20252b;
  color: white;
  font-size: 8px;
  white-space: nowrap;
  animation: duel-impact-label .72s ease both;
}

.duel-impact-label.at-player {
  left: 0;
}

.duel-impact-label.at-rival {
  right: 0;
}

.duel-fighter.is-hit {
  animation: duel-fighter-hit .18s linear 3;
}

.duel-fighter.is-guarding {
  animation: duel-guard .6s ease;
}

.duel-panel.has-impact {
  animation: duel-impact .18s linear 2;
}

.board.duel-fog .cage-sum {
  opacity: .08;
  filter: blur(2px);
}

.cell.duel-barricaded {
  background:
    repeating-linear-gradient(135deg, rgba(42, 50, 55, .17) 0 5px, rgba(255, 255, 255, .4) 5px 10px),
    #d9dcda !important;
  box-shadow: inset 0 0 0 2px #4b555a;
  filter: grayscale(.65);
}

@keyframes duel-panel-hit {
  from { box-shadow: inset 0 0 0 0 rgba(196, 51, 66, 0); }
  to { box-shadow: inset 0 0 0 3px rgba(196, 51, 66, .16); }
}

@keyframes duel-impact {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

@keyframes duel-fighter-hit {
  0%, 100% { filter: none; transform: translateX(0); }
  50% { filter: brightness(1.3); transform: translateX(3px); }
}

@keyframes duel-guard {
  0% { filter: none; }
  45% { filter: drop-shadow(0 0 7px #1a9fac); transform: scale(1.12); }
  100% { filter: none; transform: scale(1); }
}

@keyframes duel-impact-label {
  0% { opacity: 0; transform: translateY(6px) scale(.8); }
  25%, 70% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-7px) scale(.95); }
}

@keyframes duel-charge-ready {
  from { filter: brightness(.9); transform: skewX(-14deg) scale(.94); }
  to { filter: brightness(1.35); transform: skewX(-14deg) scale(1.08); }
}

@media (max-width: 899px) and (orientation: portrait) {
  .app-shell.duel-mode {
    grid-template-rows: repeat(7, max-content);
  }

  .app-shell.duel-mode .stat {
    padding: 5px 6px;
  }

  .app-shell.duel-mode #difficultyDisplay.is-duel {
    min-height: 24px;
    font-size: 11px;
    line-height: 1.08;
  }

  .duel-panel {
    gap: 6px;
    padding: 7px 9px 8px;
  }

  .duel-arena {
    grid-template-columns: 53px minmax(0, 1fr) 53px;
    gap: 7px;
    min-height: 48px;
  }

  .duel-fighter {
    grid-template-columns: 25px 1fr;
  }

  .duel-fighter-rival {
    grid-template-columns: 1fr 25px;
  }

  .duel-fighter > span {
    width: 25px;
    height: 25px;
    font-size: 11px;
  }

  .duel-fighter b {
    font-size: 8px;
  }

  .duel-fighter strong {
    font-size: 13px;
  }

  .duel-fighter-charge {
    gap: 3px;
    margin-top: 4px;
  }

  .duel-fighter-charge i {
    width: 12px;
    height: 6px;
  }

  .duel-race {
    gap: 5px;
  }

  .duel-race em {
    padding: 2px 5px;
    font-size: 8px;
  }

  .duel-lane {
    height: 8px;
  }

  .duel-active-effects {
    min-height: 23px;
    padding: 3px 5px;
  }

  .duel-active-effects > b {
    font-size: 8px;
  }

  .duel-active-effects span {
    padding: 2px 5px;
    font-size: 9px;
  }

  .duel-command-row {
    gap: 5px;
  }

  .duel-command-row button {
    height: 42px;
    padding: 4px 21px 4px 5px;
    grid-template-columns: 21px minmax(0, 1fr);
    gap: 4px;
  }

  .duel-command-row button > i {
    width: 21px;
    height: 21px;
    font-size: 15px;
  }

  .duel-command-row button b {
    font-size: 10px;
  }

  .duel-command-row button small {
    font-size: 8px;
  }

  .duel-command-row button > em {
    width: 15px;
    height: 15px;
    font-size: 8px;
  }
}

.rogue-adventure-button {
  border-color: #20252b;
  background:
    linear-gradient(135deg, rgba(248, 189, 85, .22), rgba(122, 88, 181, .16)),
    #fffdfa;
  box-shadow: 0 8px 18px rgba(32, 37, 43, .12);
}

.rogue-adventure-button strong {
  color: #20252b;
}

.rogue-adventure-button span {
  color: #6c4b16;
}

.adventure-gateway {
  margin-top: 4px;
}

.play-route-button.adventure-gateway {
  margin-top: 0;
}

@media (max-width: 380px) {
  .play-route-grid {
    grid-template-columns: 1fr;
  }
}

.adventure-intro {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.adventure-practice-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #ddd6c8;
  border-radius: 8px;
  background: #fffdfa;
  cursor: pointer;
}

.adventure-practice-toggle input {
  width: 22px;
  height: 22px;
  accent-color: #ef5530;
}

.adventure-practice-toggle span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.adventure-practice-toggle strong {
  font-size: 15px;
  font-weight: 900;
}

.adventure-practice-toggle small {
  color: #6f7784;
  font-size: 12px;
  font-weight: 800;
}

#adventureGridWalkToggle {
  border-color: #b8d8cf;
  background: #eef8f5;
}

#adventureGridWalkToggle input {
  accent-color: #178c78;
}

.adventure-button.adventure-grid-walk-active {
  border-color: #178c78;
  box-shadow: inset 4px 0 0 #178c78;
}

.practice-badge {
  color: #ef5530;
}

.adventure-actions {
  margin-top: 10px;
}

.item-legend {
  display: grid;
  grid-template-columns: 1fr;
  align-self: start;
  gap: 4px;
}

.legend-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.legend-entry > span:not(.legend-icon) {
  flex: 1;
  min-width: 0;
}

.legend-entry strong {
  display: inline;
  margin-right: 4px;
  color: var(--ink);
  font-size: 10px;
}

.legend-count {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 999px;
  background: #f1eee6;
  color: var(--ink);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.legend-entry-disabled {
  opacity: .35;
  filter: grayscale(1);
}

.legend-entry-action {
  cursor: pointer;
  border-color: rgba(34, 37, 41, .35);
  background: #fff7df;
  touch-action: none;
}

.legend-entry-action:active {
  transform: translateY(1px);
}

.legend-entry-noted {
  border-color: rgba(213, 106, 32, .65);
  background: #fff1df;
}

.privacy-footer {
  display: flex;
  justify-content: center;
  padding: 0;
}

.privacy-footer a {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 900px) and (min-height: 560px) and (orientation: landscape) {
  .app-shell {
    width: min(100%, 1180px);
    max-width: min(1180px, calc(100vw - 28px));
    padding: max(16px, calc(env(safe-area-inset-top) + 8px)) max(18px, calc(env(safe-area-inset-right) + 14px)) max(18px, calc(env(safe-area-inset-bottom) + 12px)) max(18px, calc(env(safe-area-inset-left) + 14px));
    grid-template-columns: minmax(430px, min(620px, calc(100svh - 118px))) minmax(320px, 420px);
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "topbar topbar"
      "board status"
      "board stage"
      "board abilities"
      "board controls"
      "board legend"
      "board footer";
    align-content: center;
    align-items: start;
    justify-content: center;
    column-gap: 18px;
    row-gap: 8px;
  }

  body:has(.web-demo-note) .app-shell {
    grid-template-columns: minmax(430px, min(590px, calc(100svh - 148px))) minmax(320px, 420px);
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "promo promo"
      "topbar topbar"
      "board status"
      "board stage"
      "board abilities"
      "board controls"
      "board legend"
      "board footer";
  }

  .web-demo-note {
    grid-area: promo;
    margin: 0;
    padding: 8px 12px;
  }

  .topbar {
    grid-area: topbar;
  }

  .status-panel {
    grid-area: status;
    gap: 8px;
  }

  .rogue-stage-panel {
    grid-area: stage;
  }

  .rogue-ability-panel {
    grid-area: abilities;
  }

  .number-climb-panel {
    grid-area: abilities;
  }

  .rogue-boss-panel {
    grid-area: abilities;
  }

  .app-shell:has(.rogue-ability-panel:not([hidden])):has(.rogue-boss-panel:not([hidden])) {
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "topbar topbar"
      "board status"
      "board stage"
      "board abilities"
      "board boss"
      "board controls"
      "board legend"
      "board footer";
  }

  body:has(.web-demo-note) .app-shell:has(.rogue-ability-panel:not([hidden])):has(.rogue-boss-panel:not([hidden])) {
    grid-template-rows: auto auto auto auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "promo promo"
      "topbar topbar"
      "board status"
      "board stage"
      "board abilities"
      "board boss"
      "board controls"
      "board legend"
      "board footer";
  }

  .app-shell:has(.rogue-ability-panel:not([hidden])):has(.rogue-boss-panel:not([hidden])) .rogue-boss-panel {
    grid-area: boss;
  }

  .app-shell:has(.rogue-ability-panel:not([hidden])):has(.number-climb-panel:not([hidden])) {
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "topbar topbar"
      "board status"
      "board stage"
      "board abilities"
      "board climb"
      "board controls"
      "board legend"
      "board footer";
  }

  body:has(.web-demo-note) .app-shell:has(.rogue-ability-panel:not([hidden])):has(.number-climb-panel:not([hidden])) {
    grid-template-rows: auto auto auto auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "promo promo"
      "topbar topbar"
      "board status"
      "board stage"
      "board abilities"
      "board climb"
      "board controls"
      "board legend"
      "board footer";
  }

  .app-shell:has(.rogue-ability-panel:not([hidden])):has(.number-climb-panel:not([hidden])) .number-climb-panel {
    grid-area: climb;
  }

  .board-wrap {
    grid-area: board;
    width: min(100%, calc(100svh - 118px));
    max-width: 620px;
    justify-self: end;
  }

  body:has(.web-demo-note) .board-wrap {
    width: min(100%, calc(100svh - 148px));
    max-width: 590px;
  }

  .controls {
    grid-area: controls;
    padding: 0;
  }

  .item-legend {
    grid-area: legend;
  }

  .privacy-footer {
    grid-area: footer;
    align-self: end;
    padding-top: 2px;
  }

  h1 {
    font-size: clamp(28px, 3vw, 40px);
  }

  h1.title-ja {
    font-size: clamp(25px, 2.6vw, 34px);
  }

  .icon-button {
    width: 46px;
    height: 46px;
  }

  .stat {
    min-height: 64px;
    padding: 10px;
  }

  .stat span {
    font-size: 12px;
  }

  .stat strong {
    font-size: 20px;
  }

  #difficultyDisplay {
    min-height: 24px;
    font-size: clamp(11px, 1.25vw, 16px);
  }

  #difficultyDisplay.is-long,
  #difficultyDisplay.is-adventure {
    font-size: clamp(10px, 1vw, 13px);
  }

  .tool-row {
    gap: 8px;
    margin-bottom: 8px;
  }

  .tool-button {
    min-height: 48px;
    font-size: 16px;
  }

  .pad {
    gap: 7px;
  }

  .number-button {
    min-height: 62px;
    font-size: 30px;
  }

  .legend-entry {
    min-height: 42px;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .legend-entry strong {
    font-size: 12px;
  }

  .legend-count {
    padding: 2px 6px;
    font-size: 10px;
  }

  .privacy-footer a {
    font-size: 12px;
  }

  .cell {
    font-size: clamp(30px, 7.75cqw, 44px);
  }

  .cage-sum {
    top: 3px;
    left: 3px;
    font-size: clamp(10px, 2.55cqw, 14px);
  }

  .notes {
    font-size: clamp(16px, 4.45cqw, 24px);
  }

  .pencil-notes {
    inset: 12px 7px 3px;
    font-size: clamp(9px, 2.25cqw, 13px);
  }

  .item-icon {
    right: clamp(8px, 2.2cqw, 13px);
    bottom: clamp(8px, 2.2cqw, 13px);
  }

  .item-icon-heart {
    width: clamp(7px, 1.95cqw, 11px);
    height: clamp(6px, 1.75cqw, 10px);
    border-radius: 3px;
  }

  .item-icon-heart::before,
  .item-icon-heart::after {
    width: clamp(7px, 1.95cqw, 11px);
    height: clamp(6px, 1.75cqw, 10px);
  }

  .item-icon-heart::before {
    top: clamp(-5px, -.78cqw, -3px);
  }

  .item-icon-heart::after {
    left: clamp(3px, .8cqw, 5px);
  }

  .item-icon-hint {
    width: clamp(10px, 2.8cqw, 16px);
    height: clamp(10px, 2.8cqw, 16px);
    border-width: 2px;
  }

  .item-icon-hint::before {
    bottom: clamp(-6px, -1.05cqw, -4px);
    width: clamp(6px, 1.65cqw, 9px);
    height: clamp(4px, 1.2cqw, 7px);
  }

  .item-icon-hint::after {
    bottom: clamp(-9px, -1.55cqw, -6px);
    width: clamp(5px, 1.45cqw, 8px);
    height: clamp(1.5px, .42cqw, 2.4px);
  }

  .item-icon-shuffle {
    right: clamp(6px, 1.75cqw, 10px);
    bottom: clamp(5px, 1.55cqw, 9px);
    width: clamp(14px, 2.9cqw, 17px);
    height: clamp(12px, 2.55cqw, 15px);
  }
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(32, 37, 43, .34);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.loading-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.loading-card {
  min-width: 148px;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdfa;
  box-shadow: 0 10px 30px rgba(32, 37, 43, .16);
}

.loading-card strong {
  font-size: 18px;
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 4px solid #e6e1d6;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

.legend-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #fffdfa;
  font-size: 12px;
  font-weight: 900;
}

.legend-mine {
  border-radius: 50%;
  background: var(--mine);
}

.legend-heart {
  width: 10px;
  height: 9px;
  margin: 0 4px;
  transform: rotate(-45deg);
  border-radius: 2px;
  background: var(--heart);
}

.legend-heart::before,
.legend-heart::after {
  position: absolute;
  width: 10px;
  height: 9px;
  border-radius: 50%;
  background: var(--heart);
  content: "";
}

.legend-heart::before {
  top: -5px;
  left: 0;
}

.legend-heart::after {
  top: 0;
  left: 5px;
}

.legend-hint {
  width: 11px;
  height: 11px;
  margin: 0 4px 3px;
  border: 1.5px solid var(--hint);
  border-radius: 50% 50% 45% 45%;
  background: rgba(122, 88, 181, .1);
}

.legend-hint::before,
.legend-hint::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hint);
  content: "";
}

.legend-hint::before {
  bottom: -4px;
  width: 6px;
  height: 4px;
  border-radius: 1px;
}

.legend-hint::after {
  bottom: -6px;
  width: 5px;
  height: 1.5px;
  border-radius: 999px;
}

.legend-shuffle {
  width: 13px;
  height: 13px;
  margin: 0 3px;
  border-top: 2px solid #3091af;
  border-bottom: 2px solid #3091af;
}

.legend-shuffle::before,
.legend-shuffle::after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-top: 2px solid #3091af;
  border-right: 2px solid #3091af;
  content: "";
}

.legend-shuffle::before {
  right: -1px;
  top: -4px;
  transform: rotate(45deg);
}

.legend-shuffle::after {
  left: -1px;
  bottom: -4px;
  transform: rotate(225deg);
}

.modal {
  width: min(90vw, 380px);
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: transparent;
}

.modal::backdrop {
  background: rgba(32, 37, 43, .42);
}

#difficultyDialog,
#adventureDialog {
  margin: max(104px, calc(env(safe-area-inset-top) + 78px)) auto auto;
  max-height: calc(100svh - max(118px, calc(env(safe-area-inset-top) + 92px)));
}

#difficultyDialog .modal-body,
#adventureDialog .modal-body {
  max-height: calc(100svh - max(118px, calc(env(safe-area-inset-top) + 92px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#difficultyDialog button,
#adventureDialog button {
  touch-action: pan-y;
}

.modal-body {
  padding: 22px;
  border-radius: 10px;
  background: #fffdfa;
}

.modal h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.modal p {
  margin: 0 0 18px;
  color: var(--muted);
}

#dialogText {
  color: var(--muted);
}

.rogue-run-progress {
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 2px solid #20252b;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(248, 189, 85, .18), rgba(122, 88, 181, .12)),
    #fffdfa;
  color: #20252b;
}

.rogue-progress-head {
  display: block;
}

.rogue-progress-head strong {
  min-width: 0;
  font-size: 14px;
  font-weight: 1000;
}

.rogue-progress-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}

.rogue-progress-step {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 28px;
  border: 1px solid rgba(32, 37, 43, .18);
  border-radius: 999px;
  background: rgba(255, 253, 250, .72);
  color: #8a8178;
  font-size: 11px;
  font-weight: 1000;
}

.rogue-progress-step.is-complete {
  border-color: rgba(32, 37, 43, .72);
  background: #20252b;
  color: #fffdfa;
}

.rogue-progress-step.is-current {
  border-color: #e4572e;
  background: #e4572e;
  color: #fffdfa;
  box-shadow: 0 0 0 3px rgba(228, 87, 46, .18);
}

.rogue-progress-step.is-boss {
  border-radius: 8px;
  font-size: 10px;
}

.rogue-progress-step.is-boss.is-current {
  border-color: #b94848;
  background: linear-gradient(135deg, #c63f3f, #8e315f);
  box-shadow: 0 0 0 3px rgba(185, 72, 72, .18);
}

.rogue-next-preview {
  margin: 0 0 12px;
  padding: 11px;
  border: 2px solid rgba(32, 37, 43, .88);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 253, 250, .98), rgba(238, 247, 245, .82)),
    #fffdfa;
  box-shadow: 0 7px 18px rgba(32, 37, 43, .09);
}

.rogue-next-preview-head {
  display: grid;
  gap: 2px;
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(32, 37, 43, .12);
}

.rogue-next-preview-head span,
.rogue-next-preview-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.rogue-next-preview-head span {
  color: #1c7f76;
  text-transform: uppercase;
}

.rogue-next-preview-head strong {
  color: #20252b;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.18;
}

.rogue-next-gimmicks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 9px;
}

.rogue-gimmick-chip {
  display: grid;
  gap: 1px;
  max-width: 100%;
  padding: 6px 9px 6px 8px;
  border: 1px solid rgba(28, 127, 118, .24);
  border-left: 4px solid #1c7f76;
  border-radius: 8px;
  background: rgba(255, 253, 250, .86);
  color: #174f49;
}

.rogue-gimmick-chip strong,
.rogue-gimmick-chip small {
  overflow-wrap: anywhere;
}

.rogue-gimmick-chip strong {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.rogue-gimmick-chip small {
  color: #55706b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.rogue-gimmick-chip.is-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--muted);
  background: rgba(32, 37, 43, .05);
  border-color: rgba(32, 37, 43, .12);
  font-size: 12px;
  font-weight: 900;
}

.rogue-reward-list {
  display: grid;
  gap: 9px;
}

.rogue-reward-option {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 2px solid #20252b;
  border-radius: 8px;
  background: #fffdfa;
  text-align: left;
  box-shadow: 0 4px 12px rgba(32, 37, 43, .08);
}

.rogue-reward-option strong,
.rogue-reward-option span {
  display: block;
}

.rogue-reward-option strong {
  color: #20252b;
  font-size: 17px;
  font-weight: 900;
}

.rogue-reward-option span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.rogue-reward-option:active {
  transform: translateY(1px);
}

.rogue-result-abilities {
  margin: 0 0 10px;
  padding: 8px 10px 9px;
  border: 1px solid #ddd6c8;
  border-radius: 8px;
  background: #fffdfa;
}

.rogue-current-abilities {
  margin-bottom: 10px;
  background:
    linear-gradient(135deg, rgba(255, 253, 250, .96), rgba(250, 243, 229, .9)),
    #fffdfa;
}

.rogue-result-abilities strong {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.rogue-result-abilities div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rogue-result-abilities span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(122, 88, 181, .12);
  color: #4f3388;
  font-size: 11px;
  font-weight: 900;
}

.rogue-current-ability-chip {
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid rgba(79, 51, 136, .22);
  border-radius: 999px;
  background: rgba(122, 88, 181, .12);
  color: #4f3388;
  font-size: 11px;
  font-weight: 900;
}

.rogue-current-ability-chip.is-selected {
  border-color: #6d45ad;
  background: #6d45ad;
  color: #fff;
}

.rogue-current-ability-detail {
  margin: 7px 0 0;
  padding: 7px 8px;
  border-top: 1px solid rgba(79, 51, 136, .16);
  color: #473c54;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.modal .rogue-current-ability-detail {
  margin: 7px 0 0;
}

.rogue-current-ability-detail[hidden] {
  display: none;
}

.best-badge {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 6px 10px;
  border: 2px solid rgba(255, 253, 250, .78);
  border-radius: 8px;
  background: var(--accent);
  color: #fffdfa;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(228, 87, 46, .26);
  animation: best-badge-pop .95s ease both;
}

.subtle-badge {
  background: #20252b;
  box-shadow: 0 8px 20px rgba(32, 37, 43, .18);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 14px;
}

.result-grid div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
}

.result-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.result-grid dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  white-space: pre-line;
}

#gameDialog .dialog-actions {
  margin-top: 14px;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-4px);
  }
  70% {
    transform: translateX(4px);
  }
}

@keyframes wrong-pulse {
  0% {
    background: #fffdfa;
    box-shadow: inset 0 0 0 0 rgba(240, 100, 100, .85), 0 0 0 0 rgba(240, 100, 100, .45);
    transform: translateX(0) scale(1);
  }
  22% {
    background: #ffe2df;
    box-shadow: inset 0 0 0 999px rgba(240, 100, 100, .16), 0 0 0 6px rgba(240, 100, 100, .16);
    transform: translateX(-4px) scale(1.04);
  }
  44% {
    transform: translateX(4px) scale(1.04);
  }
  68% {
    transform: translateX(-2px) scale(1.02);
  }
  100% {
    background: #fffdfa;
    box-shadow: inset 0 0 0 0 rgba(240, 100, 100, 0), 0 0 0 12px rgba(240, 100, 100, 0);
    transform: translateX(0) scale(1);
  }
}

@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.88);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes toast-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.94);
  }
  16%,
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
  }
}

@keyframes timer-last-minute {
  0% {
    transform: scale(1);
    filter: none;
  }
  28% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 8px rgba(201, 52, 40, .32));
  }
  58% {
    transform: scale(.98);
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}

@keyframes toast-pop-strong {
  0% {
    opacity: 0;
    transform: scale(.72) rotate(-2deg);
  }
  18% {
    opacity: 1;
    transform: scale(1.14) rotate(1deg);
  }
  32%,
  78% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(.96) translateY(-10px);
  }
}

@keyframes toast-pop-mega {
  0% {
    opacity: 0;
    transform: scale(.56) rotate(-4deg);
  }
  16% {
    opacity: 1;
    transform: scale(1.24) rotate(2deg);
  }
  30% {
    opacity: 1;
    transform: scale(.96) rotate(-1deg);
  }
  44%,
  80% {
    opacity: 1;
    transform: scale(1.06) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(.94) translateY(-12px);
  }
}

@keyframes best-badge-pop {
  0% {
    opacity: 0;
    transform: scale(.82) translateY(6px);
  }
  30% {
    opacity: 1;
    transform: scale(1.08) translateY(0);
  }
  52%,
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes clear-pop {
  0% {
    box-shadow: inset 0 0 0 0 rgba(240, 100, 100, .85);
    transform: scale(1);
  }
  50% {
    box-shadow: inset 0 0 0 999px rgba(240, 100, 100, .2);
    transform: scale(.9);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(240, 100, 100, 0);
    transform: scale(1);
  }
}

@keyframes mine-search-explode {
  0% {
    box-shadow: inset 0 0 0 0 rgba(32, 37, 43, .7), 0 0 0 0 rgba(228, 87, 46, 0);
    filter: brightness(1);
    transform: scale(1) rotate(0deg);
  }
  22% {
    box-shadow: inset 0 0 0 999px rgba(32, 37, 43, .28), 0 0 0 6px rgba(228, 87, 46, .2);
    filter: brightness(1.28);
    transform: scale(1.08) rotate(-1deg);
  }
  48% {
    box-shadow: inset 0 0 0 999px rgba(228, 87, 46, .32), 0 0 0 14px rgba(228, 87, 46, .16);
    filter: brightness(1.12);
    transform: scale(.98) rotate(1deg);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(228, 87, 46, 0), 0 0 0 22px rgba(228, 87, 46, 0);
    filter: brightness(1);
    transform: scale(1) rotate(0deg);
  }
}

@keyframes mine-burst {
  0% {
    box-shadow: inset 0 0 0 999px rgba(47, 49, 56, .08), 0 0 0 0 rgba(47, 49, 56, .45);
    transform: scale(1);
  }
  45% {
    box-shadow: inset 0 0 0 999px rgba(47, 49, 56, .26), 0 0 0 8px rgba(47, 49, 56, .2);
    transform: scale(1.08);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(47, 49, 56, 0), 0 0 0 16px rgba(47, 49, 56, 0);
    transform: scale(1);
  }
}

@keyframes heart-burst {
  0% {
    box-shadow: inset 0 0 0 999px rgba(232, 79, 122, .06), 0 0 0 0 rgba(232, 79, 122, .42);
    transform: scale(1);
  }
  50% {
    box-shadow: inset 0 0 0 999px rgba(232, 79, 122, .2), 0 0 0 9px rgba(232, 79, 122, .2);
    transform: scale(1.08);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(232, 79, 122, 0), 0 0 0 16px rgba(232, 79, 122, 0);
    transform: scale(1);
  }
}

@keyframes hint-burst {
  0% {
    box-shadow: inset 0 0 0 999px rgba(122, 88, 181, .06), 0 0 0 0 rgba(122, 88, 181, .38);
    transform: scale(1);
  }
  50% {
    box-shadow: inset 0 0 0 999px rgba(122, 88, 181, .2), 0 0 0 8px rgba(122, 88, 181, .16);
    transform: scale(1.06);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(122, 88, 181, 0), 0 0 0 14px rgba(122, 88, 181, 0);
    transform: scale(1);
  }
}

@keyframes block-complete-burst {
  0% {
    box-shadow: inset 0 0 0 999px rgba(255, 212, 94, .02), 0 0 0 0 rgba(255, 186, 64, .38);
    filter: brightness(1);
    transform: scale(1);
  }
  42% {
    box-shadow: inset 0 0 0 999px rgba(255, 212, 94, .24), 0 0 0 7px rgba(255, 186, 64, .18);
    filter: brightness(1.08);
    transform: scale(1.035);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 212, 94, 0), 0 0 0 13px rgba(255, 186, 64, 0);
    filter: brightness(1);
    transform: scale(1);
  }
}

@keyframes block-swap-final-clear {
  0% {
    filter: brightness(1);
    box-shadow: 0 0 0 0 rgba(240, 177, 49, 0);
  }
  42% {
    filter: brightness(1.12);
    box-shadow: 0 0 0 7px rgba(240, 177, 49, .25);
  }
  100% {
    filter: brightness(1.03);
    box-shadow: 0 0 0 13px rgba(240, 177, 49, 0);
  }
}

@keyframes block-swap-final-cell {
  0% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.2);
  }
  100% {
    filter: brightness(1.05);
  }
}

@keyframes cage-complete-burst {
  0% {
    box-shadow: inset 0 0 0 999px rgba(56, 169, 122, .02), 0 0 0 0 rgba(56, 169, 122, .28);
    filter: brightness(1);
    transform: scale(1);
  }
  45% {
    box-shadow: inset 0 0 0 999px rgba(56, 169, 122, .18), 0 0 0 6px rgba(56, 169, 122, .14);
    filter: brightness(1.06);
    transform: scale(1.025);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(56, 169, 122, 0), 0 0 0 11px rgba(56, 169, 122, 0);
    filter: brightness(1);
    transform: scale(1);
  }
}

@keyframes cage-shift-pulse {
  0% {
    box-shadow: inset 0 0 0 999px rgba(48, 145, 175, .02);
    filter: brightness(1);
  }
  48% {
    box-shadow: inset 0 0 0 999px rgba(48, 145, 175, .16);
    filter: brightness(1.07);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(48, 145, 175, 0);
    filter: brightness(1);
  }
}

@keyframes patrol-pulse {
  0% {
    box-shadow: inset 0 0 0 999px rgba(35, 134, 160, .04), 0 0 0 0 rgba(35, 134, 160, .34);
    transform: scale(1);
  }
  48% {
    box-shadow: inset 0 0 0 999px rgba(35, 134, 160, .18), 0 0 0 8px rgba(35, 134, 160, .14);
    transform: scale(1.04);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(35, 134, 160, 0), 0 0 0 14px rgba(35, 134, 160, 0);
    transform: scale(1);
  }
}

@keyframes lightning-warn {
  0% {
    opacity: .44;
    transform: scale(.97);
  }
  100% {
    opacity: .86;
    transform: scale(1.02);
  }
}

@keyframes lightning-danger {
  0% {
    opacity: .58;
    transform: scale(.96);
  }
  100% {
    opacity: .98;
    transform: scale(1.03);
  }
}

@keyframes lightning-bolt {
  0% {
    opacity: 0;
    transform: translate(-50%, -56%) scale(.78);
  }
  34% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
  }
  100% {
    opacity: .92;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes toast-pop-century {
  0% {
    opacity: 0;
    transform: scale(.48) rotate(-5deg);
  }
  14% {
    opacity: 1;
    transform: scale(1.28) rotate(2deg);
  }
  28% {
    opacity: 1;
    transform: scale(.95) rotate(-1deg);
  }
  44%,
  82% {
    opacity: 1;
    transform: scale(1.08) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(.94) translateY(-14px);
  }
}

@media (max-width: 380px) {
  .app-shell {
    gap: 6px;
    padding-left: 9px;
    padding-right: 9px;
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  }

  .status-panel {
    gap: 5px;
  }

  .stat {
    padding: 6px 5px;
  }

  .stat strong {
    font-size: 13px;
  }

  #difficultyDisplay.is-long {
    font-size: 8px;
  }

  #difficultyDisplay.is-adventure {
    font-size: 8px;
  }

  .pad {
    gap: 5px;
  }

  .number-button {
    min-height: 52px;
    font-size: 24px;
  }

  .item-legend {
    gap: 4px;
  }

  .legend-entry {
    min-height: 36px;
    padding: 4px 7px;
    font-size: 9px;
  }

  .legend-entry strong {
    font-size: 9px;
  }
}