:root {
  color-scheme: dark;
  --accent: #7df0c4;
  --ink: #f7fbff;
  --muted: #aeb8c8;
  --panel: #0c111bcc;
  --red: #ff5964;
  --blue: #4d8dff;
  --white: #f2f3ea;
  --block: #171923;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-rounded, system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 0%, #7df0c438, transparent 28%),
    radial-gradient(circle at 85% 12%, #ff59642d, transparent 24%),
    linear-gradient(145deg, #070910, #141720 62%, #090c12);
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

.shell {
  width: min(1140px, 100%);
  background: var(--panel);
  border: 1px solid #ffffff1d;
  border-radius: 26px;
  padding: clamp(18px, 4vw, 38px);
  box-shadow: 0 30px 100px #0009;
  backdrop-filter: blur(18px);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
}
.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(2.4rem, 8vw, 6.2rem);
  line-height: .88;
}

.pitch {
  max-width: 680px;
  color: var(--muted);
  line-height: 1.5;
  font-size: 1.05rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 24px 0 14px;
}

.stats div,
.board-card,
.panel {
  background: #ffffff0a;
  border: 1px solid #ffffff18;
  border-radius: 18px;
}

.stats div { padding: 12px 16px; }
.stats span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.stats strong { font-size: 1.6rem; }

.play {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
}

.ad-preview,
.quick-guide {
  border: 1px solid #7df0c455;
  border-radius: 14px;
  background: #7df0c411;
}

.ad-preview {
  display: grid;
  gap: 4px;
  margin: 18px 0;
  padding: 12px 16px;
}

.ad-preview strong,
.quick-guide strong {
  color: var(--accent);
}

.ad-preview span,
.ad-preview small,
.quick-guide li {
  color: var(--muted);
  line-height: 1.45;
}

.ad-preview small {
  font-size: .72rem;
}

.quick-guide {
  margin: 12px 0;
  padding: 12px 14px;
}

.quick-guide ol {
  margin: 8px 0 0 18px;
  padding: 0;
}

.board-card {
  padding: 14px;
  display: grid;
  gap: 8px;
  justify-content: center;
}

.board-row {
  display: grid;
  grid-template-columns: 44px minmax(260px, 520px) 44px;
  gap: 8px;
  align-items: center;
}

.board {
  width: min(100%, 520px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 8px;
}

.tile {
  border: 0;
  border-radius: 14px;
  position: relative;
  display: grid;
  place-items: center;
  box-shadow: inset 0 -10px 18px #0003, 0 10px 24px #0005;
  transition: transform .15s, opacity .18s, outline-color .18s;
  touch-action: none;
}

.tile.red { background: linear-gradient(145deg, #ff8b8f, var(--red)); }
.tile.blue { background: linear-gradient(145deg, #8bb8ff, var(--blue)); }
.tile.white { background: linear-gradient(145deg, #ffffff, var(--white)); }
.tile.red::after,
.tile.blue::after,
.tile.white::after {
  color: #080b10bb;
  font-weight: 950;
  font-size: clamp(1.2rem, 4vw, 2.2rem);
}
.tile.red::after { content: "R"; }
.tile.blue::after { content: "B"; }
.tile.white::after { content: "W"; }
.tile.block {
  background: repeating-linear-gradient(135deg, #242838, #242838 7px, #11141d 7px, #11141d 14px);
  box-shadow: inset 0 0 0 2px #ffffff12;
}
.tile.block::after {
  content: "X";
  color: #ffeff0;
  font-weight: 950;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.tile.match { transform: scale(.9); opacity: .35; }
.tile.correct { animation: correctPulse .55s ease; }
.tile.wrong { animation: wrongShake .35s ease; }
.tile.preview {
  outline: 4px solid var(--accent);
  outline-offset: -4px;
  animation: hintGlow .8s ease;
}
.tile.preview-match {
  outline: 4px solid #f7d56f;
  outline-offset: -4px;
  box-shadow: 0 0 0 3px #f7d56f33, inset 0 0 20px #f7d56f33;
}

.column-controls {
  width: min(100%, 520px);
  margin-inline: 52px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.row-controls {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 8px;
  height: min(72vw, 520px);
}

button {
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #08100d;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  min-height: 44px;
  padding: 12px 18px;
}

.arrow {
  width: 44px;
  min-height: 44px;
  padding: 0;
  background: #ffffff12;
  color: var(--ink);
}

.arrow.hint {
  background: var(--accent);
  color: #08100d;
  box-shadow: 0 0 22px #7df0c477;
}

.quiet {
  background: #ffffff12;
  color: var(--ink);
}

.panel {
  padding: 18px;
  align-self: stretch;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 1.4rem;
}

.panel p {
  color: var(--muted);
  line-height: 1.45;
}

.powerups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 18px 0;
}

.progress {
  margin: 16px 0 8px;
}

.progress span {
  color: var(--muted);
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.progress b {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #ffffff14;
}

.progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .2s ease;
}

.match-summary {
  border: 1px solid #ffffff18;
  border-radius: 14px;
  background: #ffffff08;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.45;
  margin: 12px 0;
  padding: 10px 12px;
}

.tutorial-coach {
  border: 1px solid #f7d56f55;
  border-radius: 14px;
  background: #f7d56f12;
  color: var(--ink);
  display: grid;
  gap: 4px;
  font-size: .88rem;
  line-height: 1.4;
  margin: 12px 0;
  padding: 10px 12px;
}

.tutorial-coach strong {
  color: #f7d56f;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tutorial-coach[hidden] {
  display: none;
}

.symbol-seal {
  margin: 16px 0;
  border: 1px solid #ffffff18;
  border-radius: 14px;
  padding: 12px;
  background: #ffffff08;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.symbol-seal strong {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.symbol-seal strong span {
  border: 1px solid #ffffff22;
  border-radius: 999px;
  color: var(--ink);
  font-size: .66rem;
  letter-spacing: 0;
  padding: 4px 8px;
  text-transform: none;
}

.symbol-seal.ready {
  border-color: #7df0c488;
  background: #7df0c412;
  transform: translateY(-1px);
}
.symbol-seal.solved {
  border-color: #7df0c4;
  background: #7df0c41c;
}
.symbol-seal.waiting {
  border-color: #ffffff18;
}

.symbol-seal p {
  margin: 0 0 10px;
  font-size: .92rem;
}

.symbol-help {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.4;
}

.symbol-visual {
  margin: 10px 0;
}

.sequence-clue {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sequence-clue span,
.mini-grid span {
  align-items: center;
  border: 1px solid #ffffff18;
  border-radius: 10px;
  background: #07111dcc;
  color: var(--ink);
  display: inline-flex;
  font-size: .76rem;
  font-weight: 900;
  justify-content: center;
  min-height: 38px;
  padding: 6px 8px;
  text-transform: capitalize;
}

.symbol-token {
  box-shadow: inset 0 -3px 0 #ffffff18;
}

.symbol-sun { border-color: #f7d56f88; background: #f7d56f1f; }
.symbol-moon { border-color: #9bb8ff88; background: #9bb8ff1f; }
.symbol-star { border-color: #ffffff88; background: #ffffff1f; }
.symbol-diamond { border-color: #7df0c488; background: #7df0c41f; }
.symbol-eye { border-color: #ff8bb188; background: #ff8bb11f; }
.symbol-leaf { border-color: #8ee66f88; background: #8ee66f1f; }
.symbol-fire { border-color: #ff9a5f88; background: #ff9a5f1f; }
.symbol-water { border-color: #63c7ff88; background: #63c7ff1f; }
.symbol-crown { border-color: #e8bb5488; background: #e8bb541f; }
.symbol-key { border-color: #d8d1a788; background: #d8d1a71f; }
.symbol-spiral { border-color: #c7a2ff88; background: #c7a2ff1f; }
.symbol-lotus { border-color: #ffadf388; background: #ffadf31f; }

.sequence-clue span.unknown,
.mini-grid span.unknown {
  border-color: #f7d56f99;
  background: #f7d56f22;
  color: #ffe49a;
  font-size: 1rem;
}

.mini-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(42px, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(38px, auto));
  gap: 6px;
}

.mirror-grid::after {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 1px) 0 auto;
  width: 2px;
  border-radius: 999px;
  background: #f7d56fcc;
  box-shadow: 0 0 14px #f7d56f88;
}

.symbol-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.symbol-options button {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #ffffff12;
  color: var(--ink);
  text-transform: capitalize;
}

.symbol-options button span {
  align-items: center;
  border-radius: 999px;
  background: #ffffff1c;
  display: inline-flex;
  flex: 0 0 26px;
  font-size: .78rem;
  font-weight: 950;
  height: 26px;
  justify-content: center;
}

.symbol-options button b {
  overflow-wrap: anywhere;
}

.symbol-options button.solved {
  background: var(--accent);
  color: #08100d;
}

.symbol-options button.hint {
  border-color: #f7d56fcc;
  background: #f7d56f24;
  box-shadow: 0 0 0 3px #f7d56f22;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: .84rem;
  margin-top: 26px;
}

a {
  color: var(--accent);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

dialog {
  max-width: 460px;
  border: 1px solid #ffffff20;
  border-radius: 20px;
  background: #111722;
  color: var(--ink);
  padding: 26px;
  box-shadow: 0 30px 100px #000;
}
dialog::backdrop { background: #03050bdd; }
.menu-dialog label {
  display: block;
  margin: 12px 0;
  color: var(--muted);
}
.dialog-actions {
  display: grid;
  gap: 10px;
}
.dialog-copy {
  color: var(--muted);
  line-height: 1.45;
}
.level-map-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.level-map-list button {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 8px;
  border-radius: 12px;
  background: #ffffff12;
  color: var(--ink);
}
.level-map-list button span {
  font-size: 1.05rem;
  font-weight: 950;
}
.level-map-list button small {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
}
.level-map-list button.current {
  background: var(--accent);
  color: #08100d;
}
.level-map-list button.current small {
  color: #08100d;
}
.level-map-list button.complete:not(.current) {
  border: 1px solid #7df0c477;
}
.level-map-list button.locked {
  opacity: .45;
}
.star-result {
  color: var(--accent);
  font-size: 2rem;
  letter-spacing: .2em;
  margin: 14px 0;
}
.reward-pop {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 20;
  pointer-events: none;
  transform: translateX(-50%) translateY(30px);
  opacity: 0;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  padding: 12px 18px;
  background: #111722ee;
  color: var(--accent);
  font-weight: 900;
  box-shadow: 0 18px 70px #0008;
}
.reward-pop.show { animation: rewardRise 1.4s ease; }
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
}
@keyframes correctPulse {
  50% { transform: scale(1.08); filter: brightness(1.25); }
}
@keyframes wrongShake {
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
@keyframes hintGlow {
  50% { box-shadow: 0 0 28px #7df0c488; }
}
@keyframes rewardRise {
  0% { opacity: 0; transform: translateX(-50%) translateY(30px); }
  15%, 80% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

@media (max-width: 860px) {
  body {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .shell { border-radius: 18px; padding: 12px; }
  h1 { font-size: clamp(2rem, 12vw, 3.2rem); }
  .pitch,
  footer { display: none; }
  .ad-preview { min-height: 48px; padding: 8px 10px; margin: 8px 0; }
  .ad-preview strong { font-size: .78rem; }
  .ad-preview span { font-size: .68rem; }
  .ad-preview small { display: none; }
  .topbar,
  footer { flex-direction: column; gap: 10px; }
  .top-actions { justify-content: flex-start; }
  .play { grid-template-columns: 1fr; }
  .panel { order: 0; padding: 12px; }
  .board-card { padding: 8px; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stats div { padding: 8px; }
  .board-card { width: 100%; max-width: 100%; overflow: hidden; }
  .board-row { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 5px; }
  .board,
  .column-controls,
  .row-controls { gap: 5px; }
  .column-controls { margin-inline: 45px; }
  .arrow { width: 40px; min-height: 44px; font-size: .75rem; }
  .tile { border-radius: 10px; }
  .level-map-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* M1.7 three-zone play layout */
body {
  display: block;
  padding: 0;
  overflow: hidden;
}

.shell {
  width: 100%;
  min-height: 100svh;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

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

.eyebrow,
.pitch,
footer,
.panel,
.quick-guide {
  display: none !important;
}

h1 {
  font-size: clamp(1.1rem, 3.5vw, 1.65rem);
  line-height: 1;
}

.top-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.top-actions button {
  min-height: 38px;
  padding: 8px 10px;
}

.ad-preview {
  position: fixed;
  left: max(8px, env(safe-area-inset-left));
  top: calc(max(8px, env(safe-area-inset-top)) + 54px);
  z-index: 4;
  max-width: min(300px, calc(100vw - 16px));
  min-height: 0;
  margin: 0;
  padding: 7px 10px;
  opacity: .88;
}

.ad-preview small {
  display: none;
}

.stats {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: min(330px, 42vw);
  margin: 0;
  gap: 6px;
}

.stats div {
  padding: 6px 8px;
  border-radius: 12px;
}

.stats span {
  font-size: .56rem;
}

.stats strong {
  font-size: .95rem;
}

.play {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.board-card {
  align-self: stretch;
  justify-self: center;
  width: min(100%, 760px);
  max-height: calc(100svh - 158px);
  padding: clamp(6px, 1.4vw, 12px);
  align-content: center;
  background: #ffffff07;
}

.board-row {
  grid-template-columns: 44px minmax(0, min(64svh, 560px)) 44px;
}

.board,
.column-controls {
  width: min(100%, 560px, calc(100svh - 235px));
}

.row-controls {
  height: min(560px, calc(100svh - 235px));
}

.action-bar {
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto minmax(220px, 1.2fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #ffffff18;
  border-radius: 18px;
  background: #0c111bf2;
  box-shadow: 0 -18px 60px #0008;
  padding: 8px;
}

.action-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.action-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-summary span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 850;
}

.progress-mini {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #ffffff18;
}

.progress-mini i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
}

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

.powerups button,
#restart,
#open-pattern {
  min-height: 44px;
  padding: 8px 10px;
}

#open-pattern.ready {
  background: var(--accent);
  color: #08100d;
}

#message,
.match-summary {
  position: static;
  grid-column: 1 / -1;
  width: 100%;
  transform: none;
  margin: 0;
  min-height: 0;
  padding: 8px 12px;
  border: 1px solid #ffffff18;
  border-radius: 999px;
  background: #111722ee;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
  pointer-events: none;
}

#pattern-dialog {
  width: min(520px, calc(100vw - 24px));
}

@media (max-width: 860px) {
  .shell {
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }

  .topbar {
    grid-template-columns: 1fr auto;
  }

  .top-actions button {
    min-width: 44px;
    font-size: .72rem;
    padding-inline: 8px;
  }

  .stats {
    position: static;
    transform: none;
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
  }

  .ad-preview {
    display: grid;
    top: auto;
    bottom: calc(64px + env(safe-area-inset-bottom));
    max-width: 190px;
    pointer-events: none;
  }

  .board-card {
    max-height: calc(100svh - 176px);
  }

  .board-row {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 4px;
  }

  .board,
  .column-controls {
    width: min(100%, calc(100svh - 265px), calc(100vw - 92px));
    gap: 4px;
  }

  .row-controls {
    height: min(calc(100svh - 265px), calc(100vw - 92px));
    gap: 4px;
  }

  .column-controls {
    margin-inline: 40px;
  }

  .tile {
    border-radius: 9px;
  }

  .action-bar {
    grid-template-columns: 1fr auto;
    gap: 6px;
    border-radius: 14px;
    padding: 6px;
  }

  .powerups {
    grid-column: 1 / -1;
    order: 3;
  }

  #restart {
    display: none;
  }

  #message {
    font-size: .76rem;
    padding-block: 6px;
  }
}

/* M1.8 identity polish: gem puzzle feel and clearer reward feedback */
.board-card {
  background:
    radial-gradient(circle at 50% 48%, #72e0a918, transparent 31%),
    linear-gradient(145deg, #182231, #0d121b);
}

.board {
  padding: 4px;
  border: 1px solid #ffffff12;
  border-radius: 8px;
  background:
    linear-gradient(145deg, #ffffff08, #00000018),
    #0b1018;
  box-shadow: inset 0 0 0 2px #0006;
}

.tile {
  overflow: hidden;
  border-radius: 8px;
  box-shadow:
    inset 0 -8px 16px #0004,
    inset 0 2px 0 #ffffff55,
    0 10px 22px #0006;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  background: linear-gradient(145deg, #ffffff80, transparent 42%);
  opacity: .58;
}

.tile.red { background: linear-gradient(145deg, #ff9aa0, #d33446 58%, #7d1825); }
.tile.blue { background: linear-gradient(145deg, #98beff, #426de7 58%, #20347b); }
.tile.white { background: linear-gradient(145deg, #ffffff, #d8e2ec 58%, #9aa8b5); }

.tile.red::after,
.tile.blue::after,
.tile.white::after {
  content: "";
  position: absolute;
  inset: 30%;
  display: block;
  font-size: 0;
}

.tile.red::after {
  border-radius: 50%;
  background: #ffffffa8;
}

.tile.blue::after {
  border: 3px solid #ffffffbf;
  border-radius: 50%;
}

.tile.white::after {
  border-radius: 3px;
  background: #203047b0;
  transform: rotate(45deg);
}

.tile.block {
  background:
    repeating-linear-gradient(135deg, #2c3244, #2c3244 7px, #111722 7px, #111722 14px);
}

.tile.block::after {
  content: "";
  inset: 25%;
  border: 3px solid #ffffff8c;
  border-radius: 4px;
  transform: rotate(45deg);
}

.tile.match {
  opacity: .22;
  transform: scale(.82) rotate(3deg);
  filter: brightness(1.45);
}

.tile.preview {
  outline: 0;
  box-shadow:
    0 0 0 3px #72e0a9,
    0 0 22px #72e0a999,
    inset 0 -8px 16px #0004;
}

.tile.preview-match {
  outline: 0;
  box-shadow:
    0 0 0 3px #f7d56f,
    0 0 26px #f7d56faa,
    inset 0 0 20px #f7d56f33;
  animation: vaultPulse .65s ease infinite alternate;
}

@keyframes vaultPulse {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

.progress-mini {
  height: 8px;
}

.progress-mini i {
  background: linear-gradient(90deg, #72e0a9, #f7d56f);
  box-shadow: 0 0 16px #72e0a999;
}

#open-pattern.ready {
  animation: sealReady 1.1s ease-in-out infinite alternate;
}

@keyframes sealReady {
  from { box-shadow: 0 0 0 #72e0a900; }
  to { box-shadow: 0 0 22px #72e0a977; }
}

.reward-pop.show {
  animation: rewardRise 1.4s ease, vaultPop .35s ease;
}

@keyframes vaultPop {
  0% { transform: translateX(-50%) scale(.92); }
  70% { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1); }
}

@media (max-width: 860px) {
  .board {
    padding: 3px;
  }

  .tile::before {
    inset: 10%;
  }
}

/* M1.9 clarity pass: keep the objective as a single clear completion step */
.vault-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: min(320px, 100%);
}

.step {
  align-items: center;
  display: flex;
  gap: 7px;
  min-height: 44px;
  border: 1px solid #ffffff10;
  border-radius: 8px;
  background: #ffffff08;
  color: #d4d9e2;
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.12;
  padding: 7px 8px;
}

.step b {
  flex: 0 0 auto;
  width: 22px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff14;
  color: #ffffff;
  font-size: .72rem;
}

.step.active {
  border-color: #72e0a966;
  background: #72e0a916;
  color: #eafff4;
}

.step.active b {
  background: #72e0a9;
  color: #07120d;
}

.step.done {
  border-color: #f7d56f70;
  background: #f7d56f18;
  color: #fff6ce;
}

.step.done b {
  background: #f7d56f;
  color: #171205;
}

.step.locked {
  opacity: .68;
}

.seal-flow {
  margin: 6px 0 10px;
  color: #aeb8c7;
  font-size: .85rem;
  line-height: 1.35;
}

.action-summary strong::before {
  content: "Target: ";
  color: #72e0a9;
}

@media (max-width: 860px) {
  .action-bar {
    grid-template-columns: 1fr auto;
  }

  .vault-steps {
    grid-column: 1 / -1;
    order: 2;
    grid-template-columns: 1fr;
  }

  #open-pattern {
    order: 1;
  }

  .powerups {
    order: 4;
  }

  #message,
  .match-summary {
    order: 5;
  }

  .step {
    min-height: 38px;
    padding: 6px;
    font-size: .68rem;
  }

  .step b {
    width: 20px;
  }

  .reward-pop {
    max-width: min(260px, calc(100vw - 24px));
    font-size: .95rem;
  }
}

/* Level completion must read as a milestone, not a brief board refresh. */
.level-result {
  width: min(440px, calc(100vw - 28px));
  margin: auto;
  border: 1px solid #f7d56f80;
  border-radius: 12px;
  background:
    linear-gradient(150deg, #f7d56f19, transparent 40%),
    #101721;
  box-shadow: 0 24px 80px #000b;
  padding: clamp(20px, 5vw, 30px);
}

.result-kicker {
  margin: 0 0 8px;
  color: #f7d56f;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.level-result h2 {
  margin: 0;
  color: #fff8d5;
  font-size: clamp(1.65rem, 6vw, 2.3rem);
  line-height: 1.04;
}

.level-result > p:not(.result-kicker):not(.result-next) {
  color: #d8deea;
  line-height: 1.5;
}

.result-goal,
.result-next {
  border: 1px solid #ffffff1a;
  border-radius: 8px;
  background: #ffffff08;
  color: #eaf0fb;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.35;
  padding: 10px 12px;
}

.result-next {
  border-color: #72e0a966;
  background: #72e0a914;
  color: #eafff4;
}

.level-result .star-result {
  margin: 16px 0;
  color: #f7d56f;
  font-size: 2.35rem;
  letter-spacing: .24em;
  text-shadow: 0 0 22px #f7d56f55;
}

.level-result #result-close {
  width: 100%;
  margin-top: 16px;
  border-radius: 8px;
  background: #72e0a9;
  color: #07120d;
}

@media (max-width: 480px) {
  .level-result {
    width: min(100% - 20px, 440px);
    padding: 20px;
  }
}

/* Final mobile authority: keep the placeholder in flow and reserve the board stage. */
@media (max-width: 860px) {
  .shell {
    gap: 5px;
    grid-template-areas:
      "topbar"
      "stats"
      "ad"
      "play"
      "actions";
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }

  .ad-preview {
    align-items: center;
    display: grid;
    grid-area: ad;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 8px;
    left: auto;
    margin: 0;
    max-width: none;
    min-height: 40px;
    opacity: 1;
    padding: 5px 8px;
    pointer-events: auto;
    position: static !important;
    width: 100%;
  }

  .ad-preview strong { font-size: .64rem; }
  .ad-preview span { font-size: .58rem; }
  .ad-preview small { display: none; }

  .play,
  .board-card { min-height: 0; }

  .board-card {
    height: 100%;
    max-height: none;
  }

  .board,
  .column-controls {
    width: min(100%, calc(100svh - 378px), calc(100vw - 92px));
  }

  .row-controls { height: min(calc(100svh - 378px), calc(100vw - 92px)); }

  .row-controls button,
  .column-controls button {
    min-width: 40px;
    min-height: 40px;
  }
}

@media (max-width: 360px) {
  .board,
  .column-controls {
    width: min(100%, calc(100svh - 350px), calc(100vw - 86px));
  }

  .row-controls { height: min(calc(100svh - 350px), calc(100vw - 86px)); }
}

/* Responsive layout consolidation: the board and action rail never share space. */
.shell {
  grid-template-areas:
    "topbar"
    "stats"
    "ad"
    "play"
    "actions";
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  height: 100svh;
  min-height: 0;
}

.topbar { grid-area: topbar; }
.stats { grid-area: stats; }
.ad-preview {
  grid-area: ad;
  position: static !important;
  width: min(100%, 720px);
  max-width: none;
  min-height: 44px;
  margin: 0;
  opacity: 1;
  pointer-events: auto;
}
.play { grid-area: play; }
.action-bar { grid-area: actions; }

@media (min-width: 861px) {
  .shell {
    grid-template-areas:
      "topbar topbar"
      "stats ad"
      "play play"
      "actions actions";
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .stats {
    position: static;
    transform: none;
    width: 100%;
  }

  .ad-preview {
    align-self: stretch;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    padding: 8px 10px;
  }

  .ad-preview small {
    display: block;
    grid-column: 1 / -1;
  }

  .play {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 294px);
    min-height: 0;
  }

  .board-card {
    height: 100%;
    max-height: none;
  }

  .board,
  .column-controls {
    width: min(100%, 520px, calc(100svh - 468px));
  }

  .row-controls { height: min(520px, calc(100svh - 468px)); }

  .panel {
    display: block !important;
    max-height: none;
    overflow: auto;
  }
}

@media (max-width: 860px) {
  body { overflow: hidden; }

  .shell {
    gap: 5px;
    grid-template-areas:
      "topbar"
      "stats"
      "ad"
      "play"
      "actions";
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }

  .ad-preview {
    align-items: center;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 8px;
    padding: 5px 8px;
    width: 100%;
  }

  .ad-preview strong { font-size: .64rem; }
  .ad-preview span { font-size: .58rem; }
  .ad-preview small { display: none; }

  .play,
  .board-card { min-height: 0; }

  .board-card {
    align-content: center;
    height: 100%;
    max-height: none;
  }

  .board,
  .column-controls {
    width: min(100%, calc(100svh - 378px), calc(100vw - 92px));
  }

  .row-controls { height: min(calc(100svh - 378px), calc(100vw - 92px)); }

  .action-bar {
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .24);
  }
}

@media (max-width: 360px) {
  .board,
  .column-controls {
    width: min(100%, calc(100svh - 350px), calc(100vw - 86px));
  }

  .row-controls { height: min(calc(100svh - 350px), calc(100vw - 86px)); }
  .ad-preview { min-height: 38px; }
}

/* Beta-wide UI polish: clearer rune puzzle hierarchy and softer mobile chrome */
.app-shell {
  background:
    radial-gradient(circle at 14% 8%, rgba(114, 224, 169, .14), transparent 32%),
    radial-gradient(circle at 86% 4%, rgba(247, 213, 111, .12), transparent 30%),
    linear-gradient(180deg, #070b13 0%, #111827 50%, #070b13 100%);
}

.game-shell,
.board-frame,
.level-map,
.stats-panel,
.settings-panel,
dialog {
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

.board-frame {
  background:
    linear-gradient(180deg, rgba(18, 28, 45, .96), rgba(9, 14, 24, .98)),
    radial-gradient(circle at center, rgba(114, 224, 169, .08), transparent 60%);
}

.tile {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 6px 14px rgba(0, 0, 0, .26);
}

.action-bar {
  border-color: rgba(255, 255, 255, .10);
  background: linear-gradient(180deg, rgba(18, 28, 45, .96), rgba(8, 13, 22, .96));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .26);
}

.step {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

#message,
.match-summary {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
}

#open-pattern,
.powerups button,
dialog button {
  min-height: 44px;
}

@media (max-width: 860px) {
  .app-shell {
    padding-inline: 8px;
  }

  .game-shell,
  .board-frame,
  .action-bar {
    border-radius: 12px;
  }

  .action-bar {
    position: relative;
    z-index: 2;
  }
}

/* Reliable drawn controls, independent of font glyph rendering */
.arrow {
  position: relative;
  color: transparent;
}

.arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 3px solid #eaf4ff;
  border-right: 3px solid #eaf4ff;
  border-radius: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
}

.arrow[data-direction="up"]::before {
  transform: translate(-50%, -35%) rotate(-45deg);
}

.arrow[data-direction="down"]::before {
  transform: translate(-50%, -65%) rotate(135deg);
}

.arrow[data-direction="left"]::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.arrow[data-direction="right"]::before {
  transform: translate(-65%, -50%) rotate(45deg);
}

/* M1.7 visual polish: app-style play screen */
body {
  background:
    linear-gradient(180deg, #151821 0%, #0e1219 48%, #121822 100%);
}

.shell {
  background:
    linear-gradient(180deg, #ffffff08, transparent 30%),
    #0f131b;
}

.topbar {
  min-height: 48px;
  border: 1px solid #ffffff12;
  border-radius: 8px;
  background: #ffffff08;
  box-shadow: 0 10px 32px #0004;
  padding: 6px 8px;
}

.topbar h1 {
  letter-spacing: 0;
}

.top-actions button,
.powerups button,
#restart,
#open-pattern {
  border-radius: 8px;
}

.top-actions button {
  background: #ffffff0f;
}

.top-actions button:focus-visible,
.powerups button:focus-visible,
#restart:focus-visible,
#open-pattern:focus-visible {
  outline: 3px solid #72e0a9;
  outline-offset: 2px;
}

.stats {
  border: 1px solid #ffffff12;
  border-radius: 8px;
  background: #0f141bf0;
  box-shadow: 0 10px 32px #0005;
  padding: 4px;
}

.stats div {
  border-color: #ffffff12;
  background: #ffffff09;
}

.stats strong {
  color: #72e0a9;
}

.ad-preview {
  border-radius: 8px;
  background: #0f141bd9;
  color: #aeb6c2;
  box-shadow: none;
}

.ad-preview strong {
  color: #e9edf5;
}

.play {
  place-items: center;
}

.board-card {
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff0b, #ffffff03),
    #151b25;
  box-shadow: inset 0 0 0 1px #0004, 0 24px 70px #0008;
}

.board {
  filter: saturate(1.07) contrast(1.04);
}

.tile {
  box-shadow: inset 0 -2px 0 #0005, 0 5px 14px #0004;
}

.row-controls button,
.column-controls button {
  border-radius: 8px;
  font-weight: 900;
  background: #ffffff0f;
}

.row-controls button:focus-visible,
.column-controls button:focus-visible {
  outline: 3px solid #72e0a9;
  outline-offset: 2px;
}

.action-bar {
  border-radius: 8px;
  background: #101722f7;
  box-shadow: 0 -10px 34px #0007;
}

.action-summary,
#message,
.match-summary {
  border: 1px solid #ffffff10;
  background: #ffffff08;
}

#open-pattern.ready {
  background: linear-gradient(180deg, #8af0bd, #54c98e);
  color: #06130d;
}

#message,
.match-summary {
  color: #d4d9e2;
}

@media (min-width: 861px) {
  .shell {
    gap: 10px;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .board-card {
    width: min(100%, 760px);
    height: min(100%, calc(100svh - 132px));
  }
}

@media (max-width: 860px) {
  .shell {
    gap: 6px;
  }

  .topbar {
    min-height: 0;
    padding: 6px;
  }

  .topbar h1 {
    font-size: 1.04rem;
  }

  .top-actions {
    gap: 4px;
  }

  .top-actions button {
    min-height: 36px;
    padding: 6px 6px;
    font-size: .68rem;
  }

  .stats {
    gap: 4px;
  }

  .stats div {
    padding: 5px 4px;
  }

  .stats strong {
    font-size: .9rem;
  }

  .ad-preview {
    left: max(6px, env(safe-area-inset-left));
    bottom: calc(72px + env(safe-area-inset-bottom));
    max-width: 142px;
    padding: 5px 7px;
    font-size: .62rem;
    opacity: .72;
  }

  .ad-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .board-card {
    padding: 4px;
    max-height: calc(100svh - 190px);
  }

  .board-row {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
  }

  .board,
  .column-controls {
    width: min(100%, calc(100svh - 286px), calc(100vw - 84px));
  }

  .row-controls {
    height: min(calc(100svh - 286px), calc(100vw - 84px));
  }

  .column-controls {
    margin-inline: 36px;
  }

  .row-controls button,
  .column-controls button {
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    font-size: .78rem;
  }

  .action-bar {
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
    align-items: stretch;
    gap: 5px;
    padding: 6px;
  }

  .action-summary {
    padding: 6px 8px;
  }

  #open-pattern {
    min-height: 44px;
    padding: 6px 8px;
    font-size: .72rem;
  }

  .powerups {
    gap: 5px;
  }

  .powerups button {
    min-height: 40px;
    padding: 6px 4px;
    font-size: .72rem;
  }

  #message,
  .match-summary {
    padding: 5px 8px;
    font-size: .72rem;
    line-height: 1.25;
  }
}

/* Final Rune Vault clarity layer: this must win the cascade */
.action-bar {
  grid-template-columns: minmax(160px, .9fr) minmax(190px, .75fr) minmax(220px, 1.1fr) auto;
}

.vault-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: min(340px, 100%);
}

.step {
  align-items: center;
  display: flex;
  gap: 7px;
  min-height: 44px;
  border: 1px solid #ffffff10;
  border-radius: 8px;
  background: #ffffff08;
  color: #d4d9e2;
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.12;
  padding: 7px 8px;
}

.step b {
  flex: 0 0 auto;
  width: 22px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff14;
  color: #ffffff;
  font-size: .72rem;
}

.step.active {
  border-color: #72e0a966;
  background: #72e0a916;
  color: #eafff4;
}

.step.active b {
  background: #72e0a9;
  color: #07120d;
}

.step.done {
  border-color: #f7d56f70;
  background: #f7d56f18;
  color: #fff6ce;
}

.step.done b {
  background: #f7d56f;
  color: #171205;
}

.step.locked {
  opacity: .68;
}

.seal-flow {
  margin: 6px 0 10px;
  color: #aeb8c7;
  font-size: .85rem;
  line-height: 1.35;
}

.action-summary strong::before {
  content: "Target: ";
  color: #72e0a9;
}

#open-pattern {
  white-space: nowrap;
}

#pattern-step[hidden],
#open-pattern[hidden],
#pattern-dialog[hidden] {
  display: none !important;
}

.tile-label {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(.58rem, 1.4vw, .82rem);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .62);
}

.tile.white .tile-label {
  color: #1f2b3a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

@media (max-width: 860px) {
  .action-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .action-summary { width: 100%; }

  .ad-preview span { display: none; }

  .row-controls button,
  .column-controls button {
    min-width: 40px;
    min-height: 40px;
  }

  .vault-steps {
    grid-column: 1 / -1;
    order: 2;
    grid-template-columns: 1fr;
  }

  #open-pattern {
    order: 1;
    font-size: .7rem;
  }

  .powerups {
    order: 4;
  }

  #message,
  .match-summary {
    order: 5;
  }

  .step {
    min-height: 36px;
    padding: 5px 6px;
    font-size: .66rem;
  }

  .step b {
    width: 19px;
  }

  .reward-pop {
    max-width: min(260px, calc(100vw - 24px));
    font-size: .95rem;
  }
}