/* Shared layout, arcade styling, motion preferences and guided lessons. */
:root {
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --panel: color-mix(in srgb, var(--panel-base) 88%, var(--accent) 12%);
  --panel-border: color-mix(in srgb, var(--panel-border-base) 82%, var(--accent) 18%);
  }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background-size: auto, 15px 15px;
  color: var(--text);
  font-family: var(--font-body);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transition: background 1s ease;
}

.app {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  text-align: center;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  paint-order: stroke fill;
}

.tagline {
  margin: 6px 0 0;
}

.menu-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.menu-screen.hidden {
  display: none;
}

.menu-choice {
  width: 100%;
}

.menu-hint {
  margin: 6px 0 0;
  text-align: center;
}

.game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.game-area.hidden {
  display: none;
}

.scoreboard {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.stat {
  flex: 1;
  text-align: center;
}

.stat .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  paint-order: stroke fill;
}

@keyframes dangerPulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.45; }
}

@keyframes hotPulse {
  0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); }
}

.meter-row {
  width: 100%;
  display: flex;
  align-items: center;
}

.meter-label {
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.meter-track {
  flex: 1;
  border-radius: 999px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
}

.meter-fill.storm-fill {
  background: var(--danger);
  transition: width 0.5s ease;
}

.meter-fill.storm-fill.warn {
  animation: dangerPulse 0.7s ease-in-out infinite;
}

.banner-row {
  position: relative;
  width: 100%;
  text-align: center;
}

.toast {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 4px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes shakeSm {
  0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-3px, 2px); }
    50% { transform: translate(3px, -2px); }
    75% { transform: translate(-2px, -2px); }
}

@keyframes shakeLg {
  0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-7px, 4px); }
    40% { transform: translate(7px, -5px); }
    60% { transform: translate(-6px, -5px); }
    80% { transform: translate(5px, 5px); }
}

#boardWrap.shake-sm {
  animation: shakeSm 0.22s ease-in-out;
}

#boardWrap.shake-lg {
  animation: shakeLg 0.32s ease-in-out;
}

@keyframes shakeDeny {
  0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}

#boardWrap.shake-deny {
  animation: shakeDeny 0.38s ease-in-out;
}

.storm-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, transparent 30%, var(--danger) 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 6;
  border-radius: 16px;
}

.piece .color-mark {
  position: absolute;
  pointer-events: none;
}

.cell.preview-path::after {
  content: "";
  width: 15%;
  height: 15%;
  border-radius: 50%;
  opacity: 0.4;
}

.event-banner {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.event-banner span {
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  white-space: pre-line;
  color: var(--text);
  paint-order: stroke fill;
  opacity: 0;
  transform: scale(0.6);
  position: relative;
  isolation: isolate;
}

.event-banner span::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--burst-color, var(--highlight));
  clip-path: polygon(50% 0%, 61% 18%, 76% 6%, 79% 24%, 97% 20%, 91% 38%, 108% 44%, 90% 54%, 100% 70%, 81% 68%, 78% 87%, 64% 75%, 50% 96%, 36% 75%, 22% 87%, 19% 68%, 0% 70%, 10% 54%, -8% 44%, 9% 38%, 3% 20%, 21% 24%, 24% 6%, 39% 18%);
  border-radius: 10px;
}

.event-banner span.show {
  animation: eventPop 1.3s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes eventPop {
  0% { opacity: 0; transform: scale(0.5) rotate(-7deg); }
    18% { opacity: 1; transform: scale(1.14) rotate(3deg); }
    30% { transform: scale(1) rotate(-1.5deg); }
    40% { transform: scale(1) rotate(0.5deg); }
    78% { opacity: 1; transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: scale(1.05) rotate(0deg); }
}

.combo-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--highlight) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  border-radius: 16px;
  animation: flashPulse 0.4s ease-out forwards;
  z-index: 8;
}

@keyframes flashPulse {
  0% { opacity: 0.5; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(1.15); }
}

.board.tutorial-dim .piece {
  opacity: 0.22;
  transition: opacity 0.25s ease;
}

.board.tutorial-dim .piece.selected {
  opacity: 1;
}

.tutorial-tip {
  position: absolute;
  transform: translate(-50%, -145%);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  animation: tipBounce 1s ease-in-out infinite;
  z-index: 7;
}

@keyframes tipBounce {
  0%, 100% { transform: translate(-50%, -145%); }
    50% { transform: translate(-50%, -160%); }
}

.tutorial-skip {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 7;
}

.board-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.board {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  transition: background 1s ease, border-color 1s ease;
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 1s ease;
}

.cell.valid-target::after {
  content: "";
  border-radius: 50%;
  opacity: 0.55;
  animation: pulseDot 1.1s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(0.85); opacity: 0.4; }
    50% { transform: scale(1.05); opacity: 0.75; }
}

.piece {
  position: relative;
  transition: transform 0.16s cubic-bezier(.34,1.56,.64,1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.piece.stage-shape-3 {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.piece.stage-shape-4 {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.piece.stage-shape-5 {
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

.piece.stage-shape-6 {
  border-radius: 50%;
}

.piece.blocker {
  width: 66%;
  height: 66%;
}

.piece.blocker.crumble-warn {
  animation: blockerWarn 0.5s ease-in-out infinite;
}

@keyframes blockerWarn {
  0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(0.92) rotate(-3deg); }
}

@keyframes recolorWave {
  0% { transform: scale(1.3); filter: brightness(1.7); }
    100% { transform: scale(1); filter: brightness(1); }
}

.float-score {
  position: absolute;
  font-size: 15px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  left: 50%;
  top: 30%;
}

.float-score.bonus {
  font-size: 16px;
}

.controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

button.primary {
  padding: 11px 20px;
  cursor: pointer;
}

button.icon {
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

button.icon:active {
  transform: translate(2.5px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  text-align: center;
  padding: 20px;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.overlay h2 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  paint-order: stroke fill;
}

.overlay .newrecord {
  color: var(--highlight);
  font-weight: 600;
  font-size: 13px;
}

:root[data-motion="reduced"] * {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}

:root[data-theme="dark"] {
  --panel-border-base: #344c5c;
  --text: #effaf6;
  --text-dim: #9eb6bc;
  --accent-text: #133a33;
  --danger: #ff828b;
  --ink: #10212d;
  }

body {
  padding: max(22px,env(safe-area-inset-top)) 20px max(26px,env(safe-area-inset-bottom));
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(#b4e9df 1px,transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(#000,transparent 85%);
}

.app {
  max-width: 440px;
  gap: 22px;
  position: relative;
}

header {
  width: 100%;
  padding-top: 6px;
}

.brand-eyebrow {
  font-size: 8px;
  letter-spacing: 2.1px;
  font-weight: 700;
  color: #8cafb0;
  margin-bottom: 12px;
}

h1 {
  font-size: 43px;
  letter-spacing: -1.8px;
  -webkit-text-stroke: 0;
  text-shadow: 0 3px 0 #0c2029;
  line-height: 1.05;
  color: #f0fbf2;
}

h1 span {
  color: #90e9cb;
}

h1 i {
  display: inline-block;
  font-style: normal;
  font-size: 24px;
  vertical-align: top;
  margin: 0 0 0 3px;
  color: #ffd582;
  transform: rotate(12deg);
}

.tagline {
  font-size: 12px;
  margin-top: 9px;
  color: #9dbbbf;
  letter-spacing: .3px;
}

.menu-screen {
  max-width: 360px;
  gap: 13px;
  margin-top: 0;
}

.hero-art {
  height: 228px;
  width: 100%;
  position: relative;
  margin: 8px 0 0;
}

.hero-orbit {
  position: absolute;
  inset: 24px 34px;
  border: 1px solid #75dfbd24;
  border-radius: 50%;
  transform: rotate(-22deg);
  box-shadow: 0 0 90px #6ce6be13,inset 0 0 70px #6ce6be0a;
}

.hero-stone {
  position: absolute;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  border-radius: 34%;
  font-size: 42px;
  border: 1px solid #ffffff60;
  box-shadow: inset 0 5px 3px #ffffff75,inset 0 -9px 3px #0003,0 10px 0 var(--depth),0 21px 22px #0005;
  color: #fff9;
  text-shadow: 0 2px 2px #0002;
  animation: heroFloat 5s ease-in-out infinite;
}

.hero-stone::after {
  content: "";
  position: absolute;
  inset: 8px 12px 52%;
  border-radius: 30px;
  background: linear-gradient(#fff8,#fff0);
}

.hero-mint {
  left: 34px;
  top: 58px;
  transform: rotate(-17deg);
}

.hero-gold {
  left: calc(50% - 46px);
  top: 20px;
  z-index: 2;
  animation-delay: -1.2s;
}

.hero-pink {
  right: 26px;
  top: 81px;
  transform: rotate(17deg);
  animation-delay: -2.6s;
}

.hero-spark {
  position: absolute;
  color: #ffe1a0;
  font-size: 25px;
  text-shadow: 0 0 20px #ffde9270;
}

.s1 {
  left: 19px;
  top: 30px;
}

.s2 {
  right: 36px;
  top: 16px;
  font-size: 34px;
}

.s3 {
  right: 98px;
  bottom: 19px;
  font-size: 17px;
}

.hero-combo {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) rotate(-6deg);
  z-index: 3;
  white-space: nowrap;
  background: #e3ffec;
  color: #23574d;
  padding: 8px 17px;
  border: 2px solid #fff9;
  border-radius: 10px;
  font: 600 14px var(--font-display);
  letter-spacing: 1px;
  box-shadow: 0 5px 0 #315b54,0 12px 25px #0004;
}

@keyframes heroFloat {
  50%{translate:0 -9px;rotate:4deg}
}

.menu-copy {
  text-align: center;
  margin: 0 0 13px;
}

.menu-copy h2 {
  font: 500 21px var(--font-display);
  margin: 0 0 10px;
  letter-spacing: -.4px;
}

.menu-copy p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0;
}

button.primary {
  border: 1px solid #c8ffe48a;
  border-radius: 17px;
  background: linear-gradient(#a6f6d7,#78dcb8);
  box-shadow: 0 5px 0 #3c8d79,0 9px 20px #0003,inset 0 2px 0 #e4fff099;
  color: #153e34;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  min-height: 44px;
  transition: transform .12s,box-shadow .12s;
}

button.primary:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #3c8d79;
}

.menu-choice {
  font-size: 19px!important;
  padding: 17px 22px!important;
  text-align: left;
}

.menu-choice span {
  float: right;
  font-size: 23px;
}

.menu-hint {
  font-size: 10px;
  margin-top: 9px;
  color: #78979e;
}

.game-area {
  gap: 12px;
}

.session-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 1.7px;
  font-weight: 700;
  color: #9dd8cd;
  padding: 0 3px;
}

#modeLabel {
  color: #7996a0;
}

.scoreboard {
  gap: 9px;
}

.stat {
  background: linear-gradient(145deg,#29404b99,#1d2e3c);
  border: 1px solid #8dcbc01e;
  border-radius: 17px;
  padding: 11px 5px;
  box-shadow: inset 0 1px 0 #ffffff0d,0 4px 12px #0001;
}

.stat:first-child {
  background: linear-gradient(145deg,#375c52,#223c40);
  border-color: #9be9c738;
  flex: 1.25;
}

.stat .label {
  font-size: 8px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #9bb9bb;
  margin-bottom: 6px;
}

.stat .value {
  font-size: 25px;
  line-height: 1;
  -webkit-text-stroke: 0;
  color: #edf9ee;
}

.stat:first-child .value {
  color: #b5ffde;
}

.stat.score-hit {
  animation: scoreHit .3s ease-out;
}

@keyframes scoreHit {
  35%{transform:scale(1.065);filter:brightness(1.3)}
}

.meter-row {
  gap: 12px;
  padding: 0 2px;
}

.meter-label {
  font-size: 9px;
  width: 86px;
  letter-spacing: .6px;
}

.meter-track {
  border: 0;
  background: #0c1925;
  height: 5px;
  box-shadow: inset 0 1px 3px #0005;
}

.meter-fill {
  background: linear-gradient(90deg,#3d987f,#a6f4d0);
  box-shadow: 0 0 9px #84e9c46b;
}

.storm-fill {
  background: linear-gradient(90deg,#d18a70,#ff8a9e)!important;
}

.banner-row {
  height: 0;
  z-index: 30;
}

.toast {
  top: auto;
  bottom: 10px;
  white-space: normal;
  width: calc(100% - 10px);
  max-width: 410px;
  background: #142432f2;
  border: 1px solid #b7dfcf33;
  box-shadow: 0 7px 20px #0004;
  border-radius: 12px;
  padding: 9px 13px;
  color: #e2eedf;
  font: 500 12px/1.45 var(--font-body);
  pointer-events: none;
}

.board-wrap {
  max-width: 420px;
  isolation: isolate;
  --energy: 0;
}

.board-wrap::before {
  content: "";
  position: absolute;
  border: 1px solid #8adcc428;
  pointer-events: none;
  z-index: -1;
}

.board-wrap::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  border-radius: 23px;
  box-shadow: 0 0 30px var(--chain-color),inset 0 0 12px var(--chain-color);
  opacity: var(--energy);
  transition: opacity .3s;
  z-index: 1;
}

.board {
  border: 3px solid #10212d;
  overflow: hidden;
}

.piece {
  border: 1px solid #ffffff6b;
  isolation: isolate;
  font-size: clamp(12px,3.3vw,18px);
}

.piece::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.piece.stage-shape-1 {
  border-radius: 40% 40% 40% 15%;
}

.piece.stage-shape-2 {
  border-radius: 50%;
  box-shadow: inset 0 2px 1px #fff8,inset 0 -4px 2px #0003,inset 0 0 0 4px #ffffff28,0 3px 0 var(--stone-depth),0 5px 5px #07172380;
}

.piece.stage-shape-3,.piece.stage-shape-4,.piece.stage-shape-5 {
  clip-path: none;
  border-radius: 23%;
}

.piece.stage-shape-4 {
  border-radius: 18% 45%;
}

.piece.stage-shape-5 {
  border-radius: 42% 15%;
}

.piece.stage-shape-6 {
  outline: 1px solid #e8c6ff80;
  outline-offset: 2px;
}

.piece.blocker {
  border: 1px solid #82909c;
  border-radius: 24%;
  box-shadow: inset 0 2px 0 #c5d4d44d,0 3px 0 #283946,0 5px 6px #0004;
  background: repeating-linear-gradient(135deg,#647789,#647789 5px,#4e6171 5px,#4e6171 10px);
}

.piece.selected {
  outline: 2px solid #e8fff2;
  outline-offset: 3px;
  filter: brightness(1.12);
  transform: translateY(-2px);
  z-index: 2;
}

.piece.hot-combo {
  box-shadow: inset 0 2px 1px #fff8,inset 0 -4px 2px #0003,0 3px 0 var(--stone-depth),0 0 13px #ffe6a9;
  animation: hotPulse 1.6s ease-in-out infinite;
}

.piece.spawning {
  animation: softSpawn .36s cubic-bezier(.2,1.6,.5,1);
}

@keyframes softSpawn {
  from{transform:translateY(-9px) scale(.1);opacity:0}to{transform:translateY(0) scale(1);opacity:1}
}

.piece.flying {
  z-index: 12;
  outline: none;
}

.cell.preview-path::after {
  background: #9dbfc2;
}

.float-score {
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff2cd;
  text-shadow: 0 2px 0 #163239,0 0 7px #163239;
  z-index: 14;
  animation: scoreDrift .8s ease-out forwards;
}

.float-score.bonus {
  color: #ffe29b;
}

@keyframes scoreDrift {
  0%{opacity:0;transform:translate(-50%,-25%) scale(.6)}20%{opacity:1;transform:translate(-50%,-65%) scale(1.18)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-170%) scale(.9)}
}

.event-banner {
  align-items: flex-start;
  padding: 22% 6% 0;
  z-index: 15;
}

.event-banner span {
  font-size: clamp(18px,5.8vw,28px);
  background: #18303bf2;
  border: 1px solid #d9fff05c;
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 0 #0004;
  border-radius: 19px;
  box-shadow: 0 10px 30px #0005;
  padding: 15px 20px;
}

.event-banner span::before {
  opacity: .15;
  inset: -18%;
}

.overlay {
  background: #102330ed;
  backdrop-filter: blur(10px);
  border: 1px solid #bce4db30;
  z-index: 24;
  gap: 12px;
}

.overlay h2 {
  -webkit-text-stroke: 0;
  font-size: 31px;
  color: #e5ffed;
}

.result-icon {
  font-size: 45px;
  color: #ffd580;
  text-shadow: 0 0 30px #ffcf6c66;
}

.result-caption {
  font-size: 11px;
  color: #9bb8b9;
}

.board-hint {
  font-size: 10px;
  color: #7e9ba5;
  margin: 7px 0 0;
  text-align: center;
  letter-spacing: .15px;
}

.controls {
  gap: 11px;
  margin-top: 1px;
}

.controls .primary {
  padding: 10px 19px;
  min-width: 128px;
  font-size: 14px;
}

button.icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(#2a414e,#20323f);
  border: 1px solid #98c8c62b;
  box-shadow: 0 3px 0 #0b1a26,inset 0 1px 0 #fff1;
  font-size: 17px;
  border-radius: 15px;
}

button:focus-visible {
  outline: 3px solid #ffe1a1;
  outline-offset: 4px;
}

.tutorial-tip {
  background: #e0ffe9;
  color: #205145;
  border: 0;
  box-shadow: 0 4px 0 #448e74;
  font-size: 12px;
}

.tutorial-skip {
  background: #18313e;
  color: #e1f5e6;
  border: 1px solid #fff4;
  padding: 10px 13px;
}

#juiceCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

.chain-stamp {
  position: fixed;
  left: 50%;
  top: var(--stamp-top,35%);
  translate: -50% -50%;
  text-align: center;
  pointer-events: none;
  z-index: 41;
  white-space: nowrap;
  color: var(--stamp-color,#ffe2a3);
}

.chain-stamp strong {
  display: block;
  font: 700 clamp(25px,8vw,43px)/1 var(--font-display);
  letter-spacing: -.5px;
}

.chain-stamp small {
  display: block;
  font: 700 9px var(--font-body);
  color: #fff5d9;
  margin-top: 8px;
}

.game-area.hidden,.menu-screen.hidden {
  display: none;
}

@media(min-height:850px) {
  body {
  padding-top: 32px;
}

.app {
  gap: 27px;
}

.game-area {
  gap: 15px;
}

.hero-art {
  margin-top: 22px;
  height: 250px;
}
}

@media(max-width:370px) {
  body {
  padding-left: 15px;
  padding-right: 15px;
}

.brand-eyebrow {
  font-size: 7px;
  letter-spacing: 1.7px;
}

.app {
  gap: 17px;
}

.game-area {
  gap: 10px;
}

.stat .label {
  font-size: 7px;
}

.controls {
  gap: 9px;
}

.controls .primary {
  min-width: 110px;
}

.hero-art {
  transform: scale(.9);
  margin: -10px 0;
}
}

:root[data-motion="reduced"] :is(.hero-stone,.piece,.chain-stamp) {
  animation: none!important;
}

:root[data-motion="reduced"] .chain-stamp {
  opacity: 1;
}

:root[data-motion="reduced"] .board-wrap::after {
  box-shadow: none;
}

:root[data-motion="reduced"] .piece.hot-combo {
  outline: 2px solid #ffe6a9;
}

:root[data-motion="reduced"] #juiceCanvas {
  display: none;
}

.overlay {
  visibility: hidden;
}

.overlay.show {
  visibility: visible;
}

@media(max-height:760px) and (max-width:500px) {
  body.playing {
  padding-top: 13px;
  padding-bottom: 15px;
}

.playing .brand-eyebrow,.playing .tagline {
  display: none;
}

.playing h1 {
  font-size: 29px;
}

.playing h1 i {
  font-size: 17px;
}

.playing header {
  padding-top: 0;
}

.playing .app {
  gap: 13px;
}

.playing .game-area {
  gap: 9px;
}

.playing .stat {
  padding: 8px 5px;
}

.playing .stat .value {
  font-size: 22px;
}

.playing .stat .label {
  margin-bottom: 4px;
}

.playing .board-wrap {
  max-width: min(420px,calc(100svh - 298px));
}

.playing .board-hint {
  margin-top: 5px;
  font-size: 9px;
}
}

:root[data-theme="dark"] {
  --panel-base: #203665;
  --accent: #31b6ff;
  --highlight: #ffdf20;
  --chain-color: #56ff36;
}

body {
  background: radial-gradient(ellipse at 10% 0%,#233d85,transparent 65%),radial-gradient(ellipse at 100% 90%,#38266a,transparent 55%),#111d43;
}

.hero-mint {
  background: linear-gradient(135deg,#95ff29,#18bc3b);
  --depth: #087722;
}

.hero-gold {
  background: linear-gradient(135deg,#ffe42b,#ff9a00);
  --depth: #bd5f00;
}

.hero-pink {
  background: linear-gradient(135deg,#ff507c,#e81051);
  --depth: #8c123c;
}

.piece {
  width: 88%;
  height: 88%;
  border-radius: 24%;
  border-color: #ffffff78;
  box-shadow: inset 0 2px 1px #ffffff80,inset 0 -4px 1px #0003,0 3px 0 var(--stone-depth,#164a81),0 5px 5px #07132d99;
}

.piece::before {
  inset: 7% 12% 65%;
  background: linear-gradient(165deg,#ffffff65,#ffffff00);
  border-radius: 25%;
}

.piece .color-mark {
  opacity: .8;
  color: #fff;
  font-size: clamp(13px,3.8vw,20px);
  text-shadow: 0 1px 2px #0005;
}

.piece.popping {
  animation: explodeStone .16s ease-out forwards;
}

@keyframes explodeStone {
  0%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1.4);filter:brightness(2.8)}100%{transform:scale(1.65);opacity:0;filter:brightness(3)}
}

.board {
  background: #102252;
  border-color: #0d1c43;
  border-radius: 16px;
  gap: 1px;
  padding: 2px;
  box-shadow: 0 5px 0 #081432,0 0 0 1px #509bff44;
}

.cell.a {
  background: #24417b;
}

.cell.b {
  background: #1b3469;
}

.cell {
  border-radius: 4px;
  box-shadow: inset 0 1px 2px #020c2538;
}

.cell.valid-target::after {
  width: 32%;
  height: 32%;
  background: #e7ff70;
  box-shadow: 0 0 14px #adff3899;
}

.board-wrap::before {
  inset: -4px;
  border-radius: 21px;
  border-color: #629aff66;
  background: #16305b;
  box-shadow: 0 12px 28px #0005;
}

.chain-hud {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  padding: 0!important;
  margin: -1px!important;
  overflow: hidden!important;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0!important;
}

.chain-stamp strong {
  font-size: clamp(44px,15vw,72px);
  font-weight: 700;
  -webkit-text-stroke: 2px #16305b;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #081b43;
}

.chain-stamp small {
  font-size: clamp(10px,3vw,14px);
  letter-spacing: 1.5px;
  font-family: var(--font-display);
  font-weight: 600;
  text-shadow: 0 2px 2px #081432;
}

.chain-stamp {
  animation: arcadeStamp .7s both;
  filter: drop-shadow(0 0 13px #101b48);
}

@keyframes arcadeStamp {
  0%{opacity:0;transform:scale(.3) rotate(-12deg)}22%{opacity:1;transform:scale(1.24) rotate(4deg)}40%{transform:scale(1) rotate(-2deg)}70%{opacity:.95}100%{opacity:0;transform:translateY(-25px) scale(1.08)}
}

.playing .app {
  max-width: 520px;
  gap: 12px;
}

.playing .game-area {
  gap: 10px;
}

.playing header {
  padding: 0;
}

.playing .brand-eyebrow,.playing .tagline {
  display: none;
}

.playing h1 {
  font-size: 28px;
}

.playing h1 i {
  font-size: 17px;
}

.playing .board-wrap {
  max-width: 520px;
  width: 100%;
  margin: 8px auto 0;
}

.playing .scoreboard,.playing .session-row,.playing .meter-row {
  width: calc(100% - 16px);
}

.playing .stat {
  padding: 9px 5px;
  border-radius: 12px;
  background: #20376b;
  border-color: #628fe444;
}

.playing .stat:first-child {
  background: linear-gradient(140deg,#2758a0,#263d7b);
  border-color: #72bcff77;
}

.playing .stat:first-child .value {
  color: #ffdf2c;
}

.playing .stat .value {
  font-size: 26px;
}

.playing .stat .label {
  margin-bottom: 4px;
}

.playing .session-row {
  font-size: 9px;
  color: #95caff;
}

.playing .meter-label {
  font-size: 9px;
  width: 85px;
}

.playing .meter-fill {
  background: linear-gradient(90deg,#087aff,#43e2ff);
}

.playing .board-hint {
  font-size: 10px;
  margin-top: 8px;
}

.playing .toast {
  bottom: auto;
  top: 8px;
  font-size: 11px;
  width: calc(100% - 30px);
  background: #0e2452ed;
}

@media(max-width:600px) {
  body.playing {
  padding: max(10px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-right));
}

.playing .app {
  gap: 10px;
}

.playing .game-area {
  gap: 9px;
}

.playing .board-wrap {
  max-width: none;
}

.playing .controls {
  margin-top: 6px;
  gap: 15px;
}
}

@media(max-height:700px) and (max-width:600px) {
  .playing h1 {
  font-size: 23px;
}

.playing .app {
  gap: 8px;
}

.playing .game-area {
  gap: 7px;
}

.playing .stat {
  padding: 7px 4px;
}

.playing .stat .value {
  font-size: 23px;
}

.playing .board-wrap {
  max-width: none;
  margin-top: 6px;
}

.playing .board-hint {
  margin-top: 5px;
}

.playing .controls {
  margin-top: 2px;
}
}

:root[data-motion="reduced"] .piece.popping {
  animation-duration: .001ms!important;
}

:root[data-motion="reduced"] .chain-stamp {
  animation: none!important;
}

.motion-toggle {
  border: 1px solid #7da8ee38;
  background: #132655;
  color: #bcd4ff;
  padding: 8px 14px;
  min-height: 34px;
  border-radius: 20px;
  font: 500 11px var(--font-body);
  cursor: pointer;
  margin: 2px 0 0;
}

.piece[data-kind="bonus"] {
  outline: 2px solid #ffde24;
  outline-offset: 1px;
  box-shadow: inset 0 2px 1px #fff9,inset 0 -4px 1px #0003,0 3px 0 var(--stone-depth),0 0 12px #ffce0077;
}

.piece[data-kind="bonus"].popping {
  animation: goldCapture .18s ease-out forwards;
}

.piece[data-kind="bomb"].popping {
  animation: bombCapture .17s ease-out forwards;
}

@keyframes goldCapture {
  40%{transform:scale(1.55) rotate(30deg);filter:brightness(2)}100%{transform:scale(.2) rotate(85deg);opacity:0}
}

@keyframes bombCapture {
  45%{transform:scale(.8);filter:brightness(3)}100%{transform:scale(2);opacity:0}
}

.special-feedback {
  position: fixed;
  z-index: 45;
  width: 220px;
  transform: translate(-50%,-50%);
  pointer-events: none;
  text-align: center;
  color: var(--pickup-color);
  filter: drop-shadow(0 2px 0 #102450) drop-shadow(0 0 9px #091e49);
  animation: pickupPop .95s both;
  font-family: var(--font-display);
}

.special-feedback b {
  display: block;
  font-size: 43px;
  line-height: 1;
  text-shadow: 0 0 22px var(--pickup-color);
}

.special-feedback strong {
  display: block;
  font-size: 23px;
  line-height: 1.1;
  -webkit-text-stroke: 1px #0e2248;
  paint-order: stroke fill;
}

.special-feedback small {
  display: block;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #fff;
  margin-top: 4px;
}

.special-feedback[data-kind="bomb"] b {
  font-size: 60px;
  line-height: .75;
}

.special-feedback[data-kind="rainbow"] strong {
  color: #fff;
  text-shadow: 2px 0 #ff369c,-2px 0 #23deff,0 2px #ffd625;
}

@keyframes pickupPop {
  0%{opacity:0;transform:translate(-50%,-30%) scale(.35) rotate(-8deg)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(3deg)}40%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-95%) scale(.9)}
}

:root[data-motion="reduced"] .special-feedback {
  animation: none!important;
}

#stormVignette {
  position: fixed;
  inset: 0;
  z-index: 32;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center,transparent 40%,#e9222850 78%,#ff242bad 100%);
  transition: opacity .35s;
}

.storm-warning #stormVignette {
  animation: stormHeartbeat 1.5s ease-in-out infinite;
}

@keyframes stormHeartbeat {
  0%,100%{opacity:.28}50%{opacity:.85}
}

#stormNotice {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 96%;
  text-align: center;
  z-index: 22;
  pointer-events: none;
  padding: 8px 11px;
  border-radius: 9px;
  background: #731a2bea;
  border: 1px solid #ff978c;
  color: #fff2bf;
  font: 600 clamp(9px,2.6vw,12px) var(--font-display);
  letter-spacing: .4px;
  opacity: 0;
  transition: opacity .2s;
  box-shadow: 0 4px 14px #14051588;
}

#stormNotice.show {
  opacity: 1;
}


.weather-paused #stormVignette {
  animation-play-state: paused;
}

:root[data-motion="reduced"] .storm-warning #stormVignette {animation:none!important;opacity:.42;}



#guidedBtn {
  background: linear-gradient(#6685f0,#4256be);
  color: #fff;
  border-color: #a1b5ff88;
  box-shadow: 0 4px 0 #273570;
  text-align: center;
  font-size: 14px!important;
  padding: 12px!important;
}

.guide-card[hidden],.guide-nav[hidden] {
  display: none!important;
}

.guide-card {
  width: calc(100% - 12px);
  background: linear-gradient(145deg,#243e76,#182d5d);
  border: 1px solid #638bcb70;
  border-radius: 16px;
  padding: 12px 14px;
  color: #edf4ff;
  box-shadow: 0 4px 15px #0002;
}

.guide-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #a4caff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
}

.guide-top button {
  border: 1px solid #c2d6ff40;
  background: #152750;
  color: #cadbff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  min-height: 32px;
}

.guide-card h2 {
  font: 600 21px var(--font-display);
  margin: 6px 0;
  color: #fff1ab;
  letter-spacing: -.2px;
}

.guide-card p {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  color: #c2d5f1;
}

.guide-card .guide-instruction {
  margin-top: 9px;
  padding: 8px 10px;
  border-left: 3px solid #ffe042;
  background: #091a3f80;
  color: #fff3b5;
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  font-weight: 600;
  min-height: 48px;
}

.guide-card.complete .guide-instruction {
  border-color: #59e987;
  color: #bcffdb;
}

.guide-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  width: calc(100% - 14px);
  margin: 3px 0 8px;
}

#guideRepeat {
  background: #1c3260;
  border: 1px solid #aacfff44;
  color: #c0d7fa;
  font: 500 12px var(--font-body);
  border-radius: 11px;
  min-height: 44px;
  padding: 8px 12px;
  cursor: pointer;
}

#guideNext {
  min-width: 133px;
  padding: 10px 14px;
  font-size: 14px;
}

#guideNext:disabled {
  background: #263c62;
  color: #8198ba;
  border-color: #6888b344;
  box-shadow: none;
  cursor: default;
  transform: none;
}

.guided header,.guided .scoreboard,.guided .session-row,.guided .board-hint,.guided .controls,.guided .motion-toggle {
  display: none;
}

.guided .meter-row {
  display: none;
}

.guided[data-lesson="storm"] #stormMeterRow,.guided[data-lesson="mistake"] #stormMeterRow {
  display: flex;
}

.guided[data-lesson="supply"] .meter-row:not(#stormMeterRow) {
  display: flex;
}

.guided .banner-row {
  display: none;
}

.guided .guide-card {
  order: -1;
}

.guided .app {
  gap: 0;
}

.guided .game-area {
  gap: 8px;
}

.guided .board-wrap {
  margin-top: 2px;
}

.guided-board .piece {
  opacity: .27;
  transition: opacity .15s;
}

.guided-board .guide-relevant .piece {
  opacity: 1;
}

.guided-board .cell {
  cursor: default;
}

.guided-board .guide-target {
  cursor: pointer;
  outline: 3px solid #ffe35c;
  outline-offset: -3px;
  z-index: 3;
  box-shadow: inset 0 0 20px #ffe15540;
  animation: guidePulse 1.2s ease-in-out infinite;
}

.guided-board .guide-target::before {
  content: '▼';
  position: absolute;
  top: 0;
  right: 2px;
  font-size: 12px;
  color: #fff4a7;
  line-height: 1;
  z-index: 15;
  text-shadow: 0 1px 3px #000;
}

.guided-board .cell:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

@keyframes guidePulse {
  0%,100%{outline-color:#ffe35c;box-shadow:inset 0 0 9px #ffe15520}50%{outline-color:#fff5b0;box-shadow:inset 0 0 24px #ffe15560}
}

:root[data-motion="reduced"] .guide-target {
  animation: none!important;
}

@media(max-width:370px) {
  .guide-card {
  padding: 9px 11px;
}

.guide-card h2 {
  font-size: 19px;
}

.guide-card p,.guide-card .guide-instruction {
  font-size: 11px;
}

.guide-nav {
  gap: 7px;
}

#guideNext {
  min-width: 118px;
  padding: 10px;
}
}

.guided-board.guide-observe .piece {
  opacity: 1;
}

.piece.recolor-wave {
  animation: recolorWave .5s ease-out;
}

/* Notifications occupy reserved space above the board, never playable cells. */
.notice-area{width:calc(100% - 16px);display:grid;grid-template-rows:30px 50px;gap:4px;flex:none}
.notice-slot{position:relative;min-width:0;overflow:hidden}
#stormNotice{position:static;transform:none;width:100%;max-width:none;padding:6px 8px;font-size:10px;line-height:16px;box-shadow:none;box-sizing:border-box}
.notice-slot .banner-row,.notice-slot .event-banner,#pickupNotices{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;pointer-events:none}
.notice-slot .banner-row{z-index:1}
.notice-slot .event-banner{z-index:2;align-items:center;justify-content:center}
#pickupNotices{z-index:3}
.notice-slot .toast,.playing .notice-slot .toast{position:static;transform:none;width:100%;max-width:none;padding:6px 10px;font-size:11px;line-height:17px;max-height:50px;overflow:auto;box-shadow:none;margin:0}
.notice-slot .event-banner span{animation:none;opacity:1;transform:none;font-size:13px;line-height:17px;padding:5px 10px;border-radius:9px;box-shadow:none;white-space:normal;width:100%}
.notice-slot .event-banner span::before{display:none}
.notice-slot:has(.event-banner span) .toast,.notice-slot:has(.special-feedback) .toast,.notice-slot:has(.special-feedback) .event-banner{visibility:hidden}
.notice-slot .special-feedback{position:static;width:100%;height:50px;transform:none;animation:none;filter:none;border:1px solid var(--pickup-color);border-radius:10px;background:#132650;display:grid;grid-template-columns:32px 1fr;grid-template-rows:24px 20px;align-items:center;padding:2px 8px;text-align:left}
.notice-slot .special-feedback b{grid-row:1/3;font-size:25px;text-shadow:none}
.notice-slot .special-feedback strong{font-size:15px;line-height:20px}
.notice-slot .special-feedback small{font-size:10px;line-height:15px;letter-spacing:0;margin:0}
.effect-status{height:20px;width:calc(100% - 16px);font-size:11px;line-height:20px;color:var(--bonus-color,#fff);text-align:center;visibility:hidden}
.effect-status.active{visibility:visible;border-radius:6px;background:#132650;box-shadow:inset 3px 0 var(--bonus-color)}
.supply-frozen .meter-track{background:repeating-linear-gradient(135deg,#394354,#394354 5px,#505b6e 5px,#505b6e 10px);height:12px;position:relative;overflow:visible}
.playing .supply-frozen .meter-fill{background:#8a94a3;box-shadow:none}
.supply-frozen .meter-track::after{content:'⏸';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:17px;font-weight:700;text-shadow:0 1px 3px #000}
.playing .supply-frozen .meter-label{color:#a7edff;font-weight:700}
.bomb-target{outline:3px solid #ff7022;outline-offset:-3px;background:#9e392e!important}
.builder-target{outline:3px solid #ffdc45;outline-offset:-3px;box-shadow:inset 0 0 20px #ffdc4599}
.guided[data-lesson="hourglass"] #supplyRow{display:flex}
.guided .notice-area{grid-template-rows:30px 50px}
.stat:first-child:has(.pending-score) .label::after{content:' · PENDING';font-size:7px;color:#ffe392}

/* Long-chain energy lives on the outside edge, clear of all touch targets. */
.board-wrap.chain-building::after{inset:-5px;border-radius:22px;border:2px solid var(--chain-color);box-shadow:0 0 var(--glow-size) var(--chain-color),0 0 calc(var(--glow-size)*.4) var(--chain-color),inset 0 0 8px var(--chain-color);animation:chainEdgePulse var(--glow-speed) ease-in-out infinite;will-change:opacity}
@keyframes chainEdgePulse{0%,100%{opacity:calc(var(--energy)*.48)}50%{opacity:var(--energy)}}
:root[data-motion="reduced"] .board-wrap.chain-building::after{animation:none!important;opacity:var(--energy);box-shadow:0 0 9px var(--chain-color)}

/* Molten core beneath the procedural fire: vivid even on narrow phone margins. */
.board-wrap.chain-building::after{border:3px solid #ffe789;box-shadow:0 0 8px #fff0ae,0 0 20px #ffb000,0 0 var(--glow-size) #ff4d00,inset 0 0 9px #ffb21c}
.playing .board-wrap{margin-top:32px;margin-bottom:24px}
:root[data-motion="reduced"] .board-wrap.chain-building::after{border-color:#fff1a6;box-shadow:0 0 12px #ffad19,0 0 22px #ff5a00;animation:none!important}
/* Readable rewards: a goal strip, color links and a secured-score receipt. */

.notice-area>#stormNotice{grid-row:1;grid-column:1;z-index:2}.notice-slot{grid-row:2;grid-column:1}
.stat{position:relative}.bank-receipt{position:absolute;top:-7px;right:-5px;width:24px;height:24px;border-radius:50%;background:#85ffb2;color:#164734;display:grid;place-items:center;font-weight:900;box-shadow:0 0 13px #9fffc888;animation:receiptPop .7s both;pointer-events:none}
@keyframes receiptPop{0%{transform:scale(.2);opacity:0}25%{transform:scale(1.2);opacity:1}45%,80%{transform:scale(1);opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.color-match{outline:3px solid var(--match-color);outline-offset:-3px;box-shadow:inset 0 0 18px var(--match-color)}
.notice-slot .special-feedback{grid-template-columns:40px 1fr auto;grid-template-rows:1fr;gap:10px;padding:4px 12px}
.notice-slot .special-feedback b{grid-row:1;font-size:30px}.notice-slot .special-feedback strong{font-size:25px}.pickup-outcome{font:600 22px var(--font-display);color:#fff1be}
.notice-slot .special-feedback small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
:root[data-motion="reduced"] .bank-receipt{animation:none!important}
#chainTrail{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:hidden;border-radius:17px;opacity:0}
#chainTrail.active{opacity:1}
#chainTrail path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#chainTrail .trail-glow{stroke:var(--trail-color);stroke-width:calc(var(--trail-width,7)*3);opacity:.24;filter:blur(3px)}
#chainTrail .trail-core{stroke:var(--trail-color);stroke-width:var(--trail-width,7);opacity:.95;filter:drop-shadow(0 0 4px var(--trail-color))}
#chainTrail .trail-spark{stroke:#efffff;stroke-width:calc(var(--trail-width,7)*.32);stroke-dasharray:12 25;opacity:.9}
#chainTrail.charged .trail-glow{opacity:.55;filter:blur(6px);animation:trailHeat var(--trail-speed,.7s) ease-in-out infinite alternate}
#chainTrail.charged .trail-core{stroke:#ffd64c;filter:drop-shadow(0 0 7px #ff6100) drop-shadow(0 0 13px #ffac16)}
#chainTrail.charged .trail-spark{stroke:#fffce2;stroke-dasharray:18 18}
#chainTrail.fading{animation:trailFade .7s ease-out forwards}
@keyframes trailHeat{from{opacity:.35}to{opacity:.72}}
@keyframes trailFade{0%,40%{opacity:1}100%{opacity:0}}
:root[data-motion="reduced"] #chainTrail.charged .trail-glow{animation:none}

.stage-progress-row{width:calc(100% - 24px);display:flex;align-items:center;gap:10px;margin:-3px 0 8px;color:#ffe7a0;font-size:10px;font-weight:700}
#stageProgress{height:6px;flex:1;background:#101e45;border-radius:8px;overflow:hidden}
#stageProgressFill{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffad25,#fff19a);box-shadow:0 0 8px #ffcc36;transition:width .4s ease-out}
.guided .stage-progress-row{display:none}
#stageCelebration{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:18px;border:2px solid #ffe684;border-radius:12px;background:linear-gradient(110deg,#703500,#b16813,#54286b);color:#fff5c3;pointer-events:none;box-shadow:inset 0 0 20px #ffc62b66}
#stageCelebration[hidden]{display:none}
#stageCelebration span{font-size:15px;font-weight:900;letter-spacing:2px}
#stageCelebration strong{font:900 38px/1 var(--font-display);color:#fff6b0;text-shadow:0 0 12px #ffb413}
#stageCelebration b{font-size:30px;color:#ffdf58}
#stageCelebration.arriving{animation:stageArrival .5s ease-out}
.board-wrap.stage-burst{animation:stageEdge .9s ease-out}
@keyframes stageArrival{0%{transform:scale(.8);filter:brightness(2);opacity:0}45%{transform:scale(1.03);opacity:1}100%{transform:scale(1);filter:brightness(1)}}
@keyframes stageEdge{0%,35%{box-shadow:0 0 16px 5px #fff1a4,0 0 50px 16px #ffb31b}100%{box-shadow:0 0 0 0 transparent}}
:root[data-motion="reduced"] #stageCelebration.arriving,:root[data-motion="reduced"] .board-wrap.stage-burst{animation:none}
:root[data-motion="reduced"] #stageProgressFill{transition:none}

.record-score::after{content:'♛';position:absolute;top:-19px;left:calc(50% - 14px);color:#ffe26d;font-size:28px;text-shadow:0 0 12px #ffa41c;pointer-events:none}
.record-score{border-color:#ffe16b!important;box-shadow:0 0 18px #ffb51e66}

#chainTrail.record-trail .trail-spark{stroke:#fff;stroke-width:calc(var(--trail-width)*.5);filter:drop-shadow(0 0 5px #fff);stroke-dasharray:5 12}
.notice-slot:has(#stageCelebration:not([hidden])) .banner-row,.notice-slot:has(#stageCelebration:not([hidden])) .event-banner,.notice-slot:has(#stageCelebration:not([hidden])) #pickupNotices{visibility:hidden}

/* Compact mobile HUD; reserve the full square board before secondary controls. */
.playing .app{gap:4px;padding-top:max(5px,env(safe-area-inset-top))}
.playing .game-area{gap:4px}
.playing h1{font-size:21px;line-height:1.1;margin:0}
.playing .session-row{font-size:8px;line-height:12px}
.playing .stat{padding:4px 4px;border-radius:9px}
.playing .stat .label{font-size:7px;line-height:9px;margin-bottom:1px;letter-spacing:.7px}
.playing .stat .value{font-size:22px;line-height:25px}
.playing .stage-progress-row{margin:0 0 2px;font-size:9px}
.playing .meter-row{min-height:14px;margin:0}
.playing .meter-label{font-size:8px;line-height:12px}
.playing .effect-status{height:16px;line-height:16px;font-size:10px}
.playing .notice-area{grid-template-rows:24px 38px;gap:2px}
.playing .notice-slot .special-feedback{height:38px}
.playing .notice-slot .toast{max-height:38px;padding:2px 7px;font-size:10px;line-height:15px}
.playing #stageCelebration strong{font-size:30px}
.playing #stageCelebration span{font-size:12px}
.playing .board-wrap{margin-top:17px;margin-bottom:12px;width:min(100%,calc(100svh - 290px));max-width:520px}
.playing .board-hint{margin-top:0}
.guided .board-wrap{width:100%}
.piece.anchored-bonus{cursor:default}
.piece.anchored-bonus::after{content:'◆';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);font:900 10px/12px sans-serif;color:#fff1ba;background:#684717;border:1px solid #ffdb64;border-radius:4px;width:15px;text-align:center;box-shadow:0 2px 3px #081634;pointer-events:none}

.piece[data-kind="golden"]{color:#864200!important;border:3px solid #fff4b5!important;text-shadow:0 0 6px #fff,0 0 15px #ffae00;box-shadow:0 0 9px #fff9c6,0 0 22px #ffd326,inset 0 0 12px #fff;animation:goldenStone 1.2s ease-in-out infinite alternate}
@keyframes goldenStone{from{filter:brightness(1);box-shadow:0 0 8px #fff3b0,0 0 17px #ffba11}to{filter:brightness(1.15);box-shadow:0 0 14px #fff9d0,0 0 30px #ffc219}}
:root[data-motion="reduced"] .piece[data-kind="golden"]{animation:none}

.board-wrap .board{background:var(--board-bed,#102252)}
.board-wrap .cell.a{background:var(--tile-a,#24417b)}
.board-wrap .cell.b{background:var(--tile-b,#1b3469)}
.board-wrap .cell{transition:background-color .6s ease}
.chain-praise{position:absolute;left:3%;width:94%;z-index:15;pointer-events:none;text-align:center;transform:translateY(-50%);animation:chainPraise .95s both;filter:drop-shadow(0 5px 3px #08122ac9)}
.chain-praise strong{display:block;font:700 clamp(24px,7.5vw,43px)/1.05 var(--font-display);color:#fff2a5;-webkit-text-stroke:1px #9b4300;text-shadow:0 3px 0 #9b4300,0 0 18px #ffbd37}
.chain-praise span{display:block;margin-top:5px;font:700 12px var(--font-display);letter-spacing:3px;color:#fff;text-shadow:0 2px 3px #071330}
@keyframes chainPraise{0%{opacity:0;transform:translateY(-50%) scale(.35) rotate(-7deg)}22%{opacity:1;transform:translateY(-50%) scale(1.06) rotate(2deg)}36%,72%{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}100%{opacity:0;transform:translateY(-70%) scale(1.06)}}
:root[data-motion="reduced"] .chain-praise{animation:none}
:root[data-motion="reduced"] .board-wrap .cell{transition:none}

/* Score-first HUD: the board gets the space formerly spent on equal stat cards. */
.playing .scoreboard{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:3px}
.playing .scoreboard .stat{padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.playing .scoreboard .score-main{grid-column:2;text-align:center;min-width:0}
.playing .score-main .label{font-size:8px;letter-spacing:1.5px;margin:0}
.playing .score-main .value{font-size:clamp(44px,13vw,64px);line-height:1.1;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:#ffdc36;text-shadow:0 2px 0 #a36517,0 0 14px #ffb22930}
.playing .scoreboard .score-best{grid-column:3;text-align:right;align-self:end;padding-bottom:4px}
.playing .score-best .label{font-size:6px;letter-spacing:.4px;color:#92a9c8}
.playing .score-best .value{font-size:13px;line-height:18px;color:#d3e2f4}
#score.score-counting{animation:scoreCounting .48s ease-in-out infinite alternate}
@keyframes scoreCounting{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.035);filter:brightness(1.25);text-shadow:0 0 15px #ffb63299}}
:root[data-motion="reduced"] #score.score-counting{animation:none}

/* Compact HUD: score first, full-width stage progress, no jump strip. */

.playing .stage-progress-row{width:100%}

/* Persistent purpose without another tall HUD card. */
.next-goal{font:600 10px/16px var(--font-display);color:#ffe595;text-align:center;min-height:16px;white-space:normal}
.next-goal[hidden],.guided .next-goal{display:none}
.moment-overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:#07132cdd;backdrop-filter:blur(8px)}
.moment-overlay[hidden]{display:none}
.moment-card{width:min(100%,420px);max-height:85svh;overflow:auto;text-align:center;padding:24px 18px;border:2px solid #ffdc69;border-radius:26px;color:#fff4cf;background:radial-gradient(ellipse at top,#755027,#142953 65%);box-shadow:0 0 45px #ffb82055,inset 0 0 28px #ffd06e22;animation:awardArrival .5s both}
.moment-icon{font-size:76px;filter:drop-shadow(0 0 18px #ffc62c);animation:awardFloat 1.5s ease-in-out infinite alternate}
.moment-card h2{font:900 clamp(26px,8vw,38px)/1.1 var(--font-display);color:#ffe67e;text-shadow:0 3px #74400c;margin:12px 0}
#momentDetails p{font:600 14px/1.45 var(--font-display);margin:9px 0}
.moment-card .primary{margin-top:16px;min-height:48px;width:100%}
.award-row{padding:5px 0;border-bottom:1px solid #ffffff12;font-size:12px}
#questPanel{overflow-y:auto;max-height:100%;justify-content:flex-start}
.rush-round .board-wrap{box-shadow:0 0 35px #ffd32988;border-color:#ffe279;background:#663d25}
.rush-round .cell.a,.rush-round .cell.b{background:linear-gradient(145deg,#734527,#432b39)}
.rush-round .piece.selected{outline:3px solid #fff5ae;filter:drop-shadow(0 0 12px #ffe339)}
.rush-round #stormMeterRow{visibility:hidden}
@keyframes awardArrival{from{opacity:0;transform:scale(.65) rotate(-4deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes awardFloat{to{transform:translateY(-6px) scale(1.06)}}
:root[data-motion="reduced"] .moment-card,:root[data-motion="reduced"] .moment-icon{animation:none}
.next-goal{border-radius:6px;background:linear-gradient(90deg,#ffd94625 var(--goal-progress,0%),#11244566 var(--goal-progress,0%));transition:background .3s;padding:1px 5px}
.moment-icon{position:relative}
.moment-icon::before,.moment-icon::after{content:'✦';position:absolute;font-size:27px;color:#fff0a0;top:5px;left:16%;animation:awardSpark 1.2s ease-in-out infinite alternate}
.moment-icon::after{content:'✧';top:48px;left:auto;right:17%;animation-delay:.4s}
@keyframes awardSpark{from{opacity:.35;transform:scale(.65) rotate(-15deg)}to{opacity:1;transform:scale(1.2) rotate(15deg)}}
:root[data-motion="reduced"] .moment-icon::before,:root[data-motion="reduced"] .moment-icon::after{animation:none}
#momentDetails{max-height:36svh;overflow-y:auto;overscroll-behavior:contain}

.notice-area>.next-goal{grid-row:1;grid-column:1;align-self:center;margin:0 2px}
.notice-area:has(#stormNotice.show)>.next-goal{visibility:hidden}
.rush-round #stormMeterRow,.rush-round .effect-status{display:none}
.rush-round .notice-area{grid-template-rows:24px}
.rush-round .notice-slot{display:none}
/* Timed Rush has its own visual world and an unmistakable start/end card. */
body.rush-round{background:radial-gradient(ellipse at top,#8c1bcb,#27065f 52%,#090f35);background-attachment:fixed}
.rush-round header,.rush-round .session-row,.rush-round .stage-progress-row,.rush-round .meter-row,.rush-round .notice-area{display:none}
#rushHud[hidden]{display:none}
#rushHud{width:100%;padding:10px 12px;border:2px solid #fb8bff;border-radius:14px;background:linear-gradient(120deg,#981abd,#352379);box-shadow:0 0 22px #f647e366;color:white}
#rushHud>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:10px}
#rushHud strong{font:900 clamp(23px,7vw,34px)/1 var(--font-display);color:#fff197;text-shadow:0 3px #5b126b}
#rushClock{font:900 38px/1 var(--font-display);font-variant-numeric:tabular-nums;color:white;min-width:74px;text-align:right}
#rushHud p{font:600 10px/1.3 var(--font-display);margin:7px 0;color:#fbd6ff;text-align:center}
.rush-time-track{height:7px;border-radius:8px;background:#1b0a3e;overflow:hidden}
#rushTimeFill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff4dec,#fff384)}
#rushHud.urgent{border-color:#ff666b;animation:rushUrgent .6s ease-in-out infinite alternate}
.rush-round .board-wrap{margin-top:8px;border:3px solid #ffccfb;box-shadow:0 0 18px #f050ff,0 0 38px #914bffaa;background:#470b6d}
.rush-round .cell.a{background:linear-gradient(135deg,#9031b7,#4f1c88)}
.rush-round .cell.b{background:linear-gradient(135deg,#5d2bad,#322875)}
.rush-round .piece.selected{outline:3px solid white;filter:drop-shadow(0 0 12px #ffed79)}
.rush-moment{background:radial-gradient(ellipse,#691376ee,#15072cf5)}
.rush-moment .moment-card{background:radial-gradient(ellipse at top,#b82fc3,#3b177b 75%);border:3px solid #ffde7f;box-shadow:0 0 70px #fc3de077}
.rush-moment h2{font-size:clamp(38px,11vw,56px);line-height:.98;color:#fff59c;text-shadow:0 4px #891471,0 0 22px #ffc65566}
@keyframes rushUrgent{to{box-shadow:0 0 28px #ff547c;filter:brightness(1.18)}}
:root[data-motion="reduced"] #rushHud.urgent{animation:none}
/* Give score the space formerly reserved for an inactive status line. */
.playing .scoreboard{grid-template-columns:1fr 4fr 1fr}
.playing .score-main .value{font-size:clamp(56px,17vw,82px);line-height:1.05}
.playing .effect-status:not(.active){display:none}
.playing .board-wrap{margin-top:5px}
.level-moment{background:radial-gradient(ellipse,#198a9599,#0a173ddd)}
.level-moment .moment-card{background:radial-gradient(ellipse at top,#238d8d,#282260 80%);border-color:#a4fff1;box-shadow:0 0 65px #4dffe577}
.level-moment h2{font-size:clamp(38px,11vw,56px);color:#d7fff5;text-shadow:0 4px #134477}
.level-moment::before{content:'';position:absolute;left:50%;top:50%;width:100px;height:100px;border:12px solid #d2fff8;border-radius:50%;box-shadow:0 0 60px #56ffe7,inset 0 0 60px #ffda45;pointer-events:none;animation:levelShockwave .95s ease-out both}
@keyframes levelShockwave{from{opacity:1;transform:translate(-50%,-50%) scale(.1)}to{opacity:0;transform:translate(-50%,-50%) scale(14)}}
:root[data-motion="reduced"] .level-moment::before{animation:none;display:none}

/* The opening teaches through three automatic, untimed steps. */
.intro #guideNext,.intro #guideRepeat{display:none}
.intro .guide-nav{justify-content:flex-end}

.notice-slot .special-feedback strong{font-size:clamp(14px,4.1vw,22px);line-height:1.1}
.notice-slot .event-banner span{font-size:clamp(14px,4vw,20px);font-weight:700}
/* Opening instructions and the whole board fit together on a phone. */
.playing.intro .scoreboard,.playing.intro .notice-area,.playing.intro .effect-status{display:none}
.playing.intro .board-wrap{margin-top:8px}

/* First encounter: the actual stone artwork beside a short explanation. */
.bonus-intro .moment-card{display:grid;grid-template-columns:90px 1fr;gap:12px;align-items:center;text-align:left}
.bonus-intro #momentTitle{grid-row:1;grid-column:1/-1;text-align:center;font-size:30px;margin:0 0 10px}
.bonus-intro #momentIcon{grid-row:2;grid-column:1;animation:none;filter:none}
.bonus-intro #momentIcon::before,.bonus-intro #momentIcon::after{display:none}
.bonus-intro .bonus-portrait{position:relative;inset:auto;width:80px;height:80px;margin:5px;transform:none;animation:none;font-size:38px}
.bonus-intro #momentDetails{grid-row:2;grid-column:2;max-height:none;overflow:visible}
.bonus-intro #momentDetails p{font-size:16px;line-height:1.35}
.bonus-intro #momentDetails p:nth-child(2){color:#ffe67e;font-weight:700}
.bonus-intro #momentDetails p:last-child{font-size:12px;opacity:.8}
.bonus-intro #momentContinue{grid-column:1/-1}

/* ---- Self-hosted font (no request to Google Fonts) ---- */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fredoka-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fredoka-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/fredoka-latin-700-normal.woff2) format('woff2')}

/* ---- Footer, legal links, ad slots ---- */
.site-footer{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px}
.ad-bottom{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;margin-top:14px}
.legal-links [hidden]{display:none}
.ad-bottom[hidden],.ad-side[hidden]{display:none}
.ad-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim,#8a97b3);opacity:.7}
.ad-slot{flex:none;overflow:hidden}
.ad-preview{display:flex;align-items:center;justify-content:center;border:1px dashed #7f8fb5;border-radius:6px;color:#9fb0d6;font:600 12px var(--font-body);background:#ffffff0d}
.legal-links{display:flex;gap:8px;font-size:11px;opacity:.6}
.legal-links a{color:var(--text-dim,#8a97b3);text-decoration:none}
.legal-links a:hover{text-decoration:underline}
.ad-side{position:fixed;top:50%;transform:translateY(-50%);width:160px;height:600px;z-index:1}
.ad-side-left{left:max(16px,calc(50% - 260px - 160px - 56px))}
.ad-side-right{right:max(16px,calc(50% - 260px - 160px - 56px))}

/* ---- Info pages (How to play, Datenschutz) – reuse game look ---- */
.info-page .app{max-width:640px}
.info-page header a{text-decoration:none;color:inherit}
.info-card{width:100%;background:linear-gradient(145deg,#243e76,#182d5d);border:1px solid #638bcb70;border-radius:16px;padding:16px 18px;color:#edf4ff;box-shadow:0 4px 15px #0002}
.info-card h2{font:600 21px var(--font-display);margin:0 0 8px;color:#fff1ab;letter-spacing:-.2px}
.info-card h3{font:600 16px var(--font-display);margin:14px 0 4px;color:#fff3b5}
.info-card p,.info-card li{font-size:15px;line-height:1.6;color:#c2d5f1;margin:0 0 8px}
.info-card ul{margin:0 0 8px;padding-left:20px}
.info-card strong{color:#edf4ff}
.info-card a{color:#8ee6cf}
.info-card .tip{margin-top:10px;padding:8px 10px;border-left:3px solid #ffe042;background:#091a3f80;color:#fff3b5;border-radius:0 8px 8px 0;font-weight:600;font-size:14px}
.info-play{display:flex;align-items:center;justify-content:center;width:100%;max-width:360px;min-height:48px;padding:11px 20px;text-decoration:none;border:1px solid #c8ffe48a;border-radius:17px;background:linear-gradient(#a6f6d7,#78dcb8);box-shadow:0 5px 0 #3c8d79,0 9px 20px #0003,inset 0 2px 0 #e4fff099;color:#153e34;font:600 17px var(--font-display);transition:transform .12s,box-shadow .12s}
.info-play:active{transform:translateY(4px);box-shadow:0 1px 0 #3c8d79}
.menu-link{display:block;margin-top:2px;font-size:13px;color:#8ee6cf;text-decoration:none}

/* ---- Top ad slot (always visible, far from the board) ---- */
.ad-top{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;width:100%}
.ad-top[hidden]{display:none}
.ad-top .ad-label{line-height:12px}
body.has-top-ad{padding-top:max(8px,env(safe-area-inset-top))}
body.has-top-ad.playing .board-wrap{width:min(100%,calc(100svh - 290px - var(--ad-top-h,0px)));max-width:min(520px,calc(100svh - 298px - var(--ad-top-h,0px)))}
/* Mobile + top ad: logo shares the row with STAGE / CLASSIC so the board keeps its space */
@media(max-width:600px),(max-height:1000px){
  body.has-top-ad.playing .app{gap:10px}
  body.has-top-ad.playing header{position:relative;z-index:1;margin-bottom:-29px;pointer-events:none}
  body.has-top-ad.playing header h1{font-size:25px;margin:0}
}