:root {
  color-scheme: only light;
  --ink: #120c24;
  --panel: #143968;
  --panel-dark: #081c37;
  --gold: #ffc642;
  --gold-dark: #9b5b19;
  --cream: #ffe7ad;
  --text: #fff7d6;
  --shadow: #050715;
  --red: #ef5d55;
  --blue: #2c87e8;
  --green: #54c947;
  --yellow: #f4bd2f;
  --purple: #985fdb;
  --teal: #23bfb7;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: #0b3843;
  forced-color-adjust: none;
}

html.is-android,
html.is-android body,
html.is-android .game-shell,
html.is-android .board-frame,
html.is-android .tile,
html.is-android .battle-row,
html.is-android .start-screen {
  color-scheme: only light;
  forced-color-adjust: none;
}

html.is-android body {
  isolation: isolate;
}

html.is-android-dark body {
  --android-tone-guard: brightness(1.75) saturate(1.28) contrast(1.06);
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  color: var(--text);
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 50% 16%, #2b2468 0 18%, transparent 39%),
    linear-gradient(180deg, #071025 0%, #152754 50%, #0d1428 100%);
  background-size: 12px 12px, 12px 12px, auto, auto;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background:
    linear-gradient(90deg, #0d2331 0 7%, transparent 7% 93%, #0d2331 93%),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(255, 198, 66, 0.14) 30px 33px);
  opacity: 0.62;
}

body::after {
  background:
    radial-gradient(circle at 10% 88%, rgba(255, 104, 58, 0.45) 0 2%, transparent 8%),
    radial-gradient(circle at 90% 88%, rgba(255, 104, 58, 0.45) 0 2%, transparent 8%);
  filter: blur(1px);
}

button {
  font: inherit;
}

.game-shell {
  position: relative;
  z-index: 1;
  width: min(100vw, 430px);
  min-height: 100svh;
  padding: max(12px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
}

.hud {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.score-panel,
.enemy-panel,
.combo-box,
.xp-panel,
.next-block {
  border: 4px solid var(--gold);
  border-right-color: var(--gold-dark);
  border-bottom-color: var(--gold-dark);
  background: linear-gradient(180deg, #1a5790, var(--panel-dark));
  box-shadow: 0 4px 0 #050613, inset 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.score-panel,
.enemy-panel {
  min-height: 66px;
  padding: 8px;
  display: grid;
  align-content: center;
  gap: 5px;
}

.label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: #ffe48b;
  text-shadow: 2px 2px 0 var(--shadow);
}

#score,
#combo {
  font-size: 25px;
  line-height: 1;
  text-shadow: 3px 3px 0 var(--shadow);
}

.enemy-meter {
  box-sizing: border-box;
  overflow: hidden;
  height: 18px;
  padding: 3px;
  border: 3px solid #08111f;
  border-radius: 3px;
  background: #071126;
}

.enemy-meter span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, #62e767 0 14px, #3eb63d 14px 17px);
  box-shadow: 0 0 8px rgba(113, 255, 104, 0.8);
  transition: width 220ms steps(6);
}

.title-stage {
  position: relative;
  min-height: 88px;
  display: grid;
  grid-template-columns: 1fr 112px;
  align-items: end;
  gap: 12px;
}

h1 {
  margin: 0;
  color: #fff4a6;
  font-size: clamp(56px, 16vw, 76px);
  line-height: 0.92;
  letter-spacing: 0;
  text-shadow:
    0 0 8px #ffffff,
    3px 3px 0 #d37517,
    6px 6px 0 #330c27;
  animation: sparkle 1.4s steps(2) infinite;
}

@keyframes sparkle {
  50% {
    color: #ffffff;
    text-shadow:
      0 0 5px #ffffff,
      0 0 18px #fffb8a,
      3px 3px 0 #d37517,
      6px 6px 0 #330c27;
  }
}

.next-block {
  height: 82px;
  padding: 7px;
  display: grid;
  grid-template-columns: 1fr 46px;
  align-items: center;
  gap: 6px;
}

.board-frame {
  position: relative;
  align-self: center;
  padding: 16px 13px 18px;
  border: 5px solid var(--gold);
  border-right-color: var(--gold-dark);
  border-bottom-color: var(--gold-dark);
  background:
    linear-gradient(180deg, rgba(255, 238, 178, 0.9), rgba(255, 216, 139, 0.96)),
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(133, 73, 22, 0.09) 10px 13px);
  box-shadow:
    0 0 0 7px #0a2752,
    0 9px 0 #050613,
    inset 0 0 0 3px #fff3c9;
}

.board-frame.is-shaking {
  animation: shake 180ms steps(4);
}

@keyframes shake {
  25% { transform: translateX(calc(var(--shake-power, 6px) * -0.65)); }
  50% { transform: translateX(var(--shake-power, 6px)) translateY(calc(var(--shake-power, 6px) * 0.25)); }
  75% { transform: translateX(calc(var(--shake-power, 6px) * -0.45)); }
}

.board {
  width: 100%;
  aspect-ratio: 6 / 7;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 6px;
}

.cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.tile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.64);
  border-right-color: rgba(0, 0, 0, 0.38);
  border-bottom-color: rgba(0, 0, 0, 0.45);
  border-radius: 7px;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.46),
    inset 3px 3px 0 rgba(255, 255, 255, 0.23),
    inset -3px -4px 0 rgba(0, 0, 0, 0.18);
  animation: tileAppear 180ms steps(4);
  transition: transform 120ms steps(2), filter 120ms linear;
}

@keyframes tileAppear {
  0% {
    transform: scale(0.3) translateY(-8px);
    opacity: 0;
    filter: brightness(1.8);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tile::before {
  content: "";
  width: 54%;
  height: 54%;
  background: currentColor;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.55));
}

.tile.red { background: var(--red); color: #fff0e8; }
.tile.blue { background: var(--blue); color: #d9f5ff; }
.tile.green { background: var(--green); color: #e9ffe8; }
.tile.yellow { background: var(--yellow); color: #fff3c4; }
.tile.purple { background: var(--purple); color: #f3e6ff; }
.tile.teal { background: var(--teal); color: #e1fffb; }

.shape-slash::before {
  width: 14%;
  height: 72%;
  transform: rotate(-45deg);
  border-radius: 2px;
}

.shape-circle::before {
  border: 7px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

.shape-triangle::before {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 27px solid currentColor;
  background: transparent;
}

.cell.is-valid .tile {
  filter: brightness(1.22);
  transform: translateY(-2px);
}

.cell.is-invalid {
  opacity: 0.66;
}

.cell.is-exploding .tile {
  animation: explode 380ms steps(6) forwards;
}

@keyframes explode {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1.4);
  }
  45% {
    transform: scale(1.18) rotate(-8deg);
    opacity: 1;
    filter: brightness(2.4);
  }
  100% {
    transform: scale(1.75) rotate(18deg);
    opacity: 0;
    filter: brightness(3);
  }
}

.spark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #fff0a5;
  box-shadow:
    0 0 0 3px rgba(255, 112, 32, 0.9),
    0 0 12px 4px rgba(255, 225, 62, 0.85);
  animation: sparkBurst 420ms steps(5) forwards;
}

@keyframes sparkBurst {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0);
    opacity: 0;
  }
}

.preview-tile {
  position: relative;
  width: 44px;
  height: 44px;
}

.preview-tile.is-preview-exploding {
  animation: explode 420ms steps(6) forwards;
}

.toast {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 7px 8px;
  border: 3px solid #071126;
  background: rgba(7, 17, 38, 0.9);
  color: #fff7d6;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-shadow: 2px 2px 0 #000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 140ms linear, transform 140ms steps(2);
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bottom-bar {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr 82px 82px;
  gap: 9px;
}

.combo-box,
.xp-panel {
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.bottom-bar button {
  border: 4px solid var(--gold);
  border-right-color: var(--gold-dark);
  border-bottom-color: var(--gold-dark);
  background: linear-gradient(180deg, #288be7, #104574);
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--shadow);
  box-shadow: 0 4px 0 #050613;
}

.bottom-bar button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #050613;
}

.damage-pop {
  position: fixed;
  z-index: 5;
  color: #fff3a7;
  font-size: 22px;
  font-weight: 900;
  text-shadow: 3px 3px 0 #51111a;
  animation: popScore 640ms steps(6) forwards;
  pointer-events: none;
}

@keyframes popScore {
  100% {
    transform: translateY(-38px) scale(1.2);
    opacity: 0;
  }
}

@media (max-height: 720px) {
  .game-shell {
    gap: 7px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .score-panel,
  .enemy-panel {
    min-height: 56px;
  }

  .title-stage {
    min-height: 70px;
  }

  h1 {
    font-size: 52px;
  }

  .next-block {
    height: 68px;
  }

  .bottom-bar {
    min-height: 50px;
  }
}

/* Transparent sprite production pass. */
body {
  background:
    url("assets/transparent/background/bg_top_ruin_bar.png") top center / min(100vw, 430px) auto no-repeat,
    url("assets/transparent/background/bg_bottom_stone_floor.png") bottom center / min(100vw, 430px) auto no-repeat,
    url("assets/transparent/background/bg_sky_mountains.png") top center / min(100vw, 430px) 42svh no-repeat,
    linear-gradient(180deg, #0b3843 0%, #0a2534 48%, #081522 100%);
}

body::before {
  background:
    url("assets/transparent/background/bg_vine_cluster.png") 10% 2% / 84px auto no-repeat,
    url("assets/transparent/background/bg_vine_cluster.png") 91% 7% / 84px auto no-repeat,
    url("assets/transparent/background/bg_left_stone_column_vines.png") left center / auto 84svh no-repeat,
    url("assets/transparent/background/bg_right_stone_column_vines.png") right center / auto 84svh no-repeat;
  opacity: 1;
}

body::after {
  background:
    url("assets/transparent/background/bg_red_flower.png") 7% 95% / 50px auto no-repeat,
    url("assets/transparent/background/bg_blue_flower.png") 91% 95% / 54px auto no-repeat,
    url("assets/transparent/background/bg_torch_fire.png") 7% 77% / 50px auto no-repeat,
    url("assets/transparent/background/bg_torch_fire.png") 93% 77% / 50px auto no-repeat;
  filter: none;
}

.score-panel {
  border: 0;
  background: url("assets/transparent/ui/ui_resource_panel.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.enemy-panel {
  border: 0;
  background: url("assets/transparent/ui/ui_energy_bar_full.png") center / 100% 100% no-repeat;
  box-shadow: none;
  padding: 12px 14px;
}

.next-block {
  border: 0;
  background: url("assets/transparent/ui/ui_player_name_panel.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.combo-box,
.xp-panel {
  border: 0;
  background: url("assets/transparent/ui/ui_resource_panel.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.bottom-bar button {
  border: 0;
  background: url("assets/transparent/ui/ui_blue_button_blank.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

#restartButton {
  background-image: url("assets/transparent/ui/ui_red_button_blank.png");
}

.board-frame {
  background:
    linear-gradient(180deg, rgba(255, 239, 181, 0.94), rgba(255, 226, 151, 0.96)),
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(133, 73, 22, 0.09) 10px 13px);
}

.tile,
.tile.red,
.tile.blue,
.tile.green,
.tile.yellow,
.tile.purple,
.tile.teal,
.tile.pink {
  display: grid;
  place-items: center;
  background-color: #246f86;
  background-image: none;
  box-shadow: none;
  filter: var(--tile-filter, drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5)));
  image-rendering: pixelated;
}

.tile.teal { background-color: #23bfb7; }
.tile.yellow { background-color: #f4bd2f; }
.tile.pink { background-color: #e9567b; }
.tile.blue { background-color: #2c87e8; }
.tile.purple { background-color: #985fdb; }
.tile.green { background-color: #54c947; }
.tile.dark_orange { background-color: #d95f18; }
.tile.navy { background-color: #1d3f73; }
.tile.dark_gray { background-color: #4b505b; }

.tile::before,
.tile::after {
  content: none;
}

.tile-base,
.tile-symbol {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  image-rendering: pixelated;
}

.tile-symbol {
  z-index: 1;
}

.tile.symbol-image-missing::after {
  content: attr(data-symbol-fallback);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff4cf;
  font-size: clamp(22px, 7vw, 34px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.72);
}

.cell.is-valid .tile {
  filter: brightness(1.16) drop-shadow(0 0 10px rgba(255, 246, 139, 0.96));
}

.preview-tile {
  width: 48px;
  height: 48px;
}

.score-panel .label,
.enemy-panel .label,
.next-block .label {
  display: none;
}

.score-panel {
  align-content: end;
  padding: 20px 20px 10px 20px;
}

#score {
  font-size: 22px;
  justify-self: end;
  letter-spacing: 0;
}

.enemy-panel {
  align-content: end;
  padding: 30px 24px 15px 54px;
}

.enemy-meter {
  height: 15px;
  border-width: 0;
  background: transparent;
  padding: 0;
}

.next-block {
  grid-template-columns: 1fr 48px;
  padding: 25px 20px 9px;
}

/* Rules + energy pass. */
.game-shell {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px;
}

.title-stage {
  min-height: 74px;
  grid-template-columns: 1fr 104px;
}

.title-stage-simple {
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
}

#titleButton {
  cursor: pointer;
  touch-action: manipulation;
}

#titleButton:focus-visible {
  outline: 3px solid #fff1a0;
  outline-offset: 4px;
}

.top-actions {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr 86px 78px;
  gap: 8px;
}

.compact-actions {
  grid-template-columns: 1fr 92px;
}

.top-actions button {
  border: 0;
  background: url("assets/transparent/ui/ui_blue_button_blank.png") center / 100% 100% no-repeat;
  box-shadow: none;
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--shadow);
}

.top-actions button:active {
  transform: translateY(2px);
}

#bombButton {
  background-image: url("assets/transparent/ui/ui_red_button_blank.png");
}

#restartButton {
  background-image: url("assets/transparent/ui/ui_blue_button_blank.png");
}

.combo-box,
.xp-panel {
  min-width: 0;
  padding: 8px 14px;
}

.combo-box .label,
.xp-panel .label {
  font-size: 11px;
}

.xp-panel {
  grid-template-columns: 54px 1fr;
  gap: 8px;
}

.xp-meter {
  position: relative;
  height: 18px;
  padding: 2px;
  border: 2px solid rgba(4, 7, 15, 0.92);
  background: linear-gradient(180deg, #041022, #01040b);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55);
}

.xp-meter span {
  display: block;
  width: 0%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #54d9ff 0 10px, #2487e8 10px 13px);
  box-shadow: 0 0 8px rgba(84, 217, 255, 0.75);
  transition: width 220ms steps(8);
}

#levelBadge {
  position: absolute;
  right: -3px;
  top: 50%;
  min-width: 46px;
  padding: 3px 5px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: #071126;
  color: #fff4a6;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-shadow: 2px 2px 0 #000;
  box-shadow: 0 0 0 2px #ffc642;
}

.board-frame {
  align-self: start;
  padding: 10px 8px 12px;
  margin-bottom: 42px;
  contain: layout paint;
}

.board {
  gap: 1px;
  touch-action: none;
  contain: layout paint style;
}

.cell {
  overflow: visible;
  touch-action: none;
  contain: layout style;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.tile {
  inset: -1px;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.preview-tile {
  width: 52px;
  height: 52px;
}

.next-block {
  grid-template-columns: 1fr 52px;
  padding: 21px 16px 7px;
}

.enemy-panel {
  background: url("assets/transparent/ui/ui_resource_panel.png") center / 100% 100% no-repeat;
  padding: 30px 18px 14px 26px;
}

.enemy-meter {
  height: 17px;
  padding: 2px;
  border: 2px solid rgba(4, 7, 15, 0.92);
  background: linear-gradient(180deg, #041022, #01040b);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55);
}

.enemy-meter span {
  background: repeating-linear-gradient(90deg, #73ea52 0 10px, #3fb83c 10px 13px);
  box-shadow: 0 0 8px rgba(114, 246, 79, 0.72);
}

.toast {
  top: auto;
  bottom: -40px;
  left: 12px;
  right: 12px;
  min-height: 31px;
  background: rgba(5, 12, 28, 0.94);
  transform: translateY(8px);
}

.toast.is-visible {
  transform: translateY(0);
}

.rule-modal {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1, 4, 13, 0.72);
}

.rule-modal[hidden] {
  display: none;
}

.rule-panel {
  width: min(92vw, 360px);
  padding: 24px 22px;
  border: 0;
  background:
    url("assets/transparent/ui/ui_player_name_panel.png") top center / 100% 88px no-repeat,
    linear-gradient(180deg, rgba(11, 35, 67, 0.98), rgba(6, 14, 31, 0.98));
  box-shadow:
    0 0 0 4px #ffc642,
    0 0 0 8px #522c13,
    0 10px 0 #02040b;
  color: #fff7d6;
  text-align: center;
  text-shadow: 2px 2px 0 #000;
}

.rule-panel h2 {
  margin: 0 0 22px;
  color: #fff4a6;
  font-size: 28px;
  line-height: 1;
}

.rule-panel p {
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 800;
}

.rule-panel strong {
  display: block;
  margin-top: 16px;
  color: #8ff2ff;
  font-size: 15px;
}

.game-over-modal .rule-panel {
  background:
    url("assets/transparent/ui/ui_red_button_blank.png") top center / 100% 78px no-repeat,
    linear-gradient(180deg, rgba(38, 9, 22, 0.98), rgba(5, 5, 12, 0.99));
}

#finalScore {
  margin-top: 4px;
  color: #fff4a6;
  font-size: 40px;
  text-align: center;
}

#gameOverRestart {
  width: 150px;
  height: 54px;
  margin-top: 18px;
  border: 0;
  background: url("assets/transparent/ui/ui_blue_button_blank.png") center / 100% 100% no-repeat;
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--shadow);
}

body.is-mega-bomb::after,
body.is-game-over::after {
  animation: fullFlash 720ms steps(5);
}

body.is-game-over::before {
  filter: brightness(0.42) saturate(0.72);
}

body.is-game-over .game-shell {
  filter: brightness(0.45) saturate(0.7);
}

.board-frame.is-returning {
  animation: returnWobble 260ms steps(4);
}

.board-frame.is-combo-shaking {
  animation: comboShake 300ms steps(7);
}

@keyframes returnWobble {
  20% { transform: translateX(-4px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}

@keyframes fullFlash {
  0% {
    box-shadow: inset 0 0 0 100vmax rgba(255, 234, 126, 0);
    filter: brightness(1);
  }
  35% {
    box-shadow: inset 0 0 0 100vmax rgba(255, 224, 83, 0.28);
    filter: brightness(1.9);
  }
  100% {
    box-shadow: inset 0 0 0 100vmax rgba(8, 3, 12, 0.48);
    filter: brightness(0.78);
  }
}

@keyframes comboShake {
  12% { transform: translateX(calc(var(--shake-power, 10px) * -0.85)) translateY(3px) rotate(calc(var(--shake-tilt, 1deg) * -1)); }
  26% { transform: translateX(var(--shake-power, 10px)) translateY(-3px) rotate(var(--shake-tilt, 1deg)); }
  40% { transform: translateX(calc(var(--shake-power, 10px) * -0.72)) translateY(2px); }
  56% { transform: translateX(calc(var(--shake-power, 10px) * 0.72)) translateY(3px) rotate(calc(var(--shake-tilt, 1deg) * 0.7)); }
  72% { transform: translateX(calc(var(--shake-power, 10px) * -0.45)) rotate(calc(var(--shake-tilt, 1deg) * -0.45)); }
  88% { transform: translateX(calc(var(--shake-power, 10px) * 0.22)); }
}

@media (max-height: 720px) {
  .game-shell {
    gap: 5px;
  }

  .title-stage {
    min-height: 60px;
  }

  .top-actions {
    min-height: 48px;
  }

  .board-frame {
    padding: 8px 7px 10px;
    margin-bottom: 36px;
  }
}

/* Classic match-3 movement pass: only swapped/falling blocks move. */
.tile {
  animation: none;
  transition: filter 90ms linear, transform 90ms linear;
}

.cell.is-swapping .tile {
  animation: swapSlide 145ms cubic-bezier(0.18, 0.82, 0.2, 1) both;
}

.cell.is-swap-return .tile {
  animation: swapReturn 170ms cubic-bezier(0.34, 0, 0.2, 1) both;
}

.cell.is-falling .tile {
  animation: fallDrop var(--move-duration, 165ms) cubic-bezier(0.16, 0.92, 0.18, 1.08) both;
}

.cell.is-touch-feedback .tile {
  animation: touchWiggle 210ms steps(4) both;
  filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 246, 139, 0.85));
}

@keyframes swapSlide {
  from {
    transform: translate(var(--move-from-x), var(--move-from-y));
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes swapReturn {
  0% {
    transform: translate(var(--move-from-x), var(--move-from-y));
  }
  72% {
    transform: translate(0, 0);
  }
  86% {
    transform: translate(calc(var(--move-from-x) * -0.08), calc(var(--move-from-y) * -0.08));
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes fallDrop {
  0% {
    transform: translate(var(--move-from-x), var(--move-from-y));
    filter: brightness(1.1) drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5));
  }
  80% {
    transform: translate(0, 0);
  }
  92% {
    transform: translateY(18px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes touchWiggle {
  0% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateX(-3px) rotate(-3deg) scale(1.04);
  }
  50% {
    transform: translateX(3px) rotate(3deg) scale(1.04);
  }
  75% {
    transform: translateX(-2px) rotate(-2deg) scale(1.02);
  }
  100% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
}

.cell.is-exploding .tile {
  z-index: 5;
  animation: explode var(--explode-duration, 330ms) steps(7) forwards;
  filter: brightness(2.4) drop-shadow(0 0 14px rgba(255, 223, 83, 0.95));
}

.cell.is-combo-exploding .tile {
  animation-name: comboExplode;
  animation-duration: var(--explode-duration, 330ms);
  filter: brightness(3.35) drop-shadow(0 0 24px rgba(255, 88, 42, 1));
}

.cell.is-exploding::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 4;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 210, 0.96) 0 18%, rgba(255, 160, 39, 0.82) 19% 34%, rgba(255, 40, 24, 0.18) 35% 58%, transparent 59%);
  animation: blastRing var(--explode-duration, 330ms) steps(6) forwards;
  pointer-events: none;
}

.cell.is-exploding.is-item-burst .tile {
  z-index: 30;
  animation: itemBurstForward var(--explode-duration, 330ms) cubic-bezier(0.12, 0.9, 0.2, 1) forwards;
  filter: brightness(3.1) drop-shadow(0 0 22px rgba(255, 246, 139, 1));
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

@keyframes comboExplode {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  32% {
    transform: scale(calc(var(--combo-scale, 1.2) * 1.05)) rotate(-12deg);
    opacity: 1;
    filter: brightness(3.8) drop-shadow(0 0 26px rgba(255, 220, 80, 1));
  }
  68% {
    transform: scale(calc(var(--combo-scale, 1.2) * 1.42)) rotate(15deg);
    opacity: 0.82;
  }
  100% {
    transform: scale(calc(var(--combo-scale, 1.2) * 1.92)) rotate(28deg);
    opacity: 0;
  }
}

@keyframes itemBurstForward {
  0% {
    transform: perspective(420px) translate3d(0, 0, 0) rotateX(0deg) scale(1);
    opacity: 1;
  }
  40% {
    transform: perspective(420px) translate3d(0, -10px, 96px) rotateX(16deg) scale(1.48);
    opacity: 1;
  }
  72% {
    transform: perspective(420px) translate3d(0, -22px, 180px) rotateX(34deg) rotateZ(10deg) scale(2.05);
    opacity: 0.82;
  }
  100% {
    transform: perspective(420px) translate3d(0, -34px, 260px) rotateX(48deg) rotateZ(18deg) scale(2.75);
    opacity: 0;
  }
}

@keyframes blastRing {
  0% {
    transform: scale(0.2);
    opacity: 0.2;
  }
  38% {
    transform: scale(var(--combo-scale, 1));
    opacity: 1;
  }
  100% {
    transform: scale(calc(var(--combo-scale, 1) + 0.62));
    opacity: 0;
  }
}

.spark {
  width: 11px;
  height: 11px;
  background: #fff8b8;
  will-change: transform, opacity;
  transform: translateZ(0);
  box-shadow:
    0 0 0 4px rgba(255, 98, 24, 0.96),
    0 0 16px 7px rgba(255, 225, 62, 0.95);
}

@media (max-width: 720px), (pointer: coarse) {
  .cell.is-exploding .tile {
    filter: brightness(2.05) drop-shadow(0 0 9px rgba(255, 223, 83, 0.88));
  }

  .cell.is-combo-exploding .tile {
    filter: brightness(2.55) drop-shadow(0 0 15px rgba(255, 88, 42, 0.94));
  }

  .cell.is-exploding::after {
    inset: -6px;
  }

  .spark {
    width: 8px;
    height: 8px;
    box-shadow:
      0 0 0 3px rgba(255, 98, 24, 0.9),
      0 0 10px 4px rgba(255, 225, 62, 0.82);
  }
}

.tile.item-missile::after,
.tile.item-bomb::after,
.tile.item-rainbow::after {
  filter: none;
}

.tile.item-missile {
  box-shadow:
    inset 0 0 0 4px rgba(71, 179, 255, 0.98),
    inset 0 0 0 7px rgba(9, 42, 112, 0.82),
    0 4px 0 rgba(0, 0, 0, 0.5);
  filter: var(--tile-filter, drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5))) drop-shadow(0 0 7px rgba(71, 179, 255, 0.72));
}

.tile.item-bomb {
  box-shadow:
    inset 0 0 0 4px rgba(255, 74, 68, 0.98),
    inset 0 0 0 7px rgba(118, 18, 16, 0.82),
    0 4px 0 rgba(0, 0, 0, 0.5);
  filter: var(--tile-filter, drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5))) drop-shadow(0 0 8px rgba(255, 74, 68, 0.74));
}

.tile.item-rainbow {
  inset: 4%;
  background:
    conic-gradient(from 0deg, #ff4d6d, #ffd23f, #59d84a, #36d4ff, #8b5cf6, #ff4d6d) center / cover no-repeat !important;
  animation: rainbowBlock 1.1s linear infinite;
  border-radius: 8px;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5)) saturate(1.25);
}

.tile.item-missile::before,
.tile.item-bomb::before {
  content: none;
}

.tile.item-rainbow::before {
  content: none;
}

.tile.item-rainbow::after {
  opacity: 0.82;
  mix-blend-mode: screen;
}

.tile.item-rainbow .tile-base {
  display: none;
}

.tile.item-rainbow .tile-symbol {
  opacity: 0.82;
  mix-blend-mode: screen;
}

@keyframes rainbowBlock {
  0% {
    filter: hue-rotate(0deg) saturate(1.35) drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5));
  }
  100% {
    filter: hue-rotate(360deg) saturate(1.35) drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5));
  }
}

/* HUD, pause, and ranking pass. */
.game-shell {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 7px;
}

.game-top {
  position: relative;
  display: block;
  min-height: 58px;
}

.title-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
}

.title-arrow {
  display: none;
}

#titleButton {
  justify-self: center;
  font-size: clamp(34px, 10vw, 48px);
  letter-spacing: 3px;
  text-align: center;
  white-space: nowrap;
}

.shake-button {
  position: absolute;
  left: 0;
  top: 9px;
  border: 0;
  min-width: 64px;
  min-height: 33px;
  padding: 0 8px;
  background: #072f7d;
  box-shadow: inset 0 0 0 2px #67b7ff, 0 3px 0 #030712;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--shadow);
}

.shake-button[data-mode="strong"] {
  background: #072f7d;
  box-shadow: inset 0 0 0 2px #67b7ff, 0 3px 0 #030712;
}

.shake-button[data-mode="soft"] {
  background: #2b164f;
  box-shadow: inset 0 0 0 2px #8d63d8, 0 3px 0 #030712;
}

.shake-button[data-mode="off"] {
  background: #050609;
  box-shadow: inset 0 0 0 2px #555b68, 0 3px 0 #030712;
}

.header-actions {
  position: absolute;
  right: 0;
  top: 9px;
  display: grid;
  grid-template-columns: 70px 70px;
  gap: 5px;
}

.header-actions button,
.start-screen button,
.result-actions button,
#submitRankingButton {
  border: 0;
  min-height: 38px;
  background: url("assets/transparent/ui/ui_blue_button_blank.png") center / 100% 100% no-repeat;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--shadow);
}

#restartButton,
#gameOverRestart {
  background-image: url("assets/transparent/ui/ui_red_button_blank.png");
}

.status-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 8px;
  min-height: 62px;
  padding: 14px 16px 13px;
  background: url("assets/transparent/ui/ui_resource_panel.png") center / 100% 100% no-repeat;
}

.meter-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.meter-row .label,
.score-row .label {
  display: block;
  font-size: 12px;
}

.score-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.battle-row {
  position: relative;
  min-height: 90px;
  padding: 0;
  background: transparent;
  z-index: 3;
  --actor-size: 78px;
  --hero-offset: 5mm;
  --enemy-offset: 5mm;
}

.battle-actor {
  position: absolute;
  bottom: 2px;
  width: 78px;
  height: 78px;
  z-index: 2;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: 468px 78px;
  filter:
    drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.78))
    drop-shadow(2px 0 0 rgba(0, 0, 0, 0.78))
    drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.72))
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.62));
  animation: actorWalk 620ms steps(1, end) infinite;
}

.hero-actor {
  left: var(--hero-offset, 5mm);
  background-image: url("assets/transparent/sheets/kuhepang_hero.png");
}

.enemy-actor {
  left: var(--enemy-left, calc(100% - 78px - var(--enemy-offset, 5mm)));
  background-image: var(--enemy-image, url("assets/transparent/sheets/kuhepang_slime.png"));
  filter:
    var(--enemy-filter, none)
    drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.78))
    drop-shadow(2px 0 0 rgba(0, 0, 0, 0.78))
    drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.72))
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.62));
  transition: left 120ms linear;
}

.enemy-actor.enemy-dragon {
  background-image: var(--enemy-image, url("assets/transparent/sheets/kuhepang_dragon.png"));
}

.enemy-actor.enemy-minami {
  animation-name: enemyWalkMinami;
}

.battle-actor.is-attacking,
.battle-actor.is-hit {
  animation: none;
  background-position-x: -312px;
}

.hero-actor.is-attacking {
  transform: translateX(8px) scale(1.08);
}

.enemy-actor.is-hit {
  transform: translateX(var(--hit-power, 6px)) scale(1.06);
  filter:
    var(--enemy-filter, none)
    brightness(1.7)
    drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.78))
    drop-shadow(2px 0 0 rgba(0, 0, 0, 0.78))
    drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.72))
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 12px rgba(255, 240, 120, 0.9));
}

.battle-actor.is-defeated {
  animation: none;
  background-position-x: -390px;
}

.battle-actor.is-idle-frame {
  animation: none;
  background-position-x: 0;
}

.battle-distance {
  position: absolute;
  left: calc(var(--hero-offset, 5mm) + 15mm);
  right: calc(var(--enemy-offset, 5mm) + 5mm);
  bottom: calc(13px - 5mm);
  height: 19px;
  z-index: 0;
  margin: 0;
  background: rgba(4, 10, 23, 0.55);
  box-shadow: inset 0 0 0 2px #17223a, 0 2px 0 rgba(0, 0, 0, 0.5);
}

.battle-distance::before,
.battle-distance::after {
  content: none;
}

@keyframes actorWalk {
  0%, 24.999% { background-position-x: 0; }
  25%, 49.999% { background-position-x: -78px; }
  50%, 74.999% { background-position-x: -156px; }
  75%, 100% { background-position-x: -234px; }
}

@keyframes enemyWalkMinami {
  0%, 24.999% { background-position-x: -78px; }
  25%, 49.999% { background-position-x: -156px; }
  50%, 74.999% { background-position-x: -234px; }
  75%, 100% { background-position-x: -156px; }
}

#score {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(17px, 5.4vw, 25px);
  line-height: 1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-panel .xp-meter,
.status-panel .enemy-meter {
  height: 18px;
}

.status-panel #levelBadge {
  right: -1px;
  min-width: 38px;
  font-size: 11px;
}

body.is-low-energy .enemy-meter span {
  animation: lowEnergyPulse 360ms steps(2) infinite;
  background: repeating-linear-gradient(90deg, #ff5348 0 10px, #b9151d 10px 13px);
  box-shadow: 0 0 12px rgba(255, 55, 38, 1);
}

@keyframes lowEnergyPulse {
  50% {
    filter: brightness(2.2);
    opacity: 0.62;
  }
}

.board-frame {
  position: relative;
  margin-bottom: 36px;
}

.pause-overlay {
  position: absolute;
  inset: 10px 8px 12px;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(4, 8, 18, 0.76);
  color: #fff4a6;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 3px 3px 0 #000, 0 0 18px #ffef7a;
}

.pause-overlay[hidden] {
  display: none;
}

body.is-paused .board {
  filter: brightness(0.04) saturate(0.2) blur(2px);
}

.start-screen {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 8px;
  padding: max(18px, env(safe-area-inset-top)) 18px max(24px, calc(env(safe-area-inset-bottom) + 18px));
  background: #020714;
}

.start-screen[hidden] {
  display: none;
}

.start-illustration {
  position: relative;
  width: min(108vw, 460px);
  max-height: calc(100svh - 128px);
  aspect-ratio: 941 / 1672;
  display: grid;
  align-items: start;
  justify-items: center;
  background:
    url("assets/background/main_intro.png") center / contain no-repeat;
  image-rendering: pixelated;
}

@media (max-height: 720px) {
  .start-illustration {
    width: min(92vw, 372px);
  }
}

.start-title {
  display: none;
  margin-top: 7%;
  color: #fff4a6;
  font-size: clamp(38px, 12vw, 62px);
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 10px #fff, 4px 4px 0 #d37517, 8px 8px 0 #250719;
  animation: sparkle 1.2s steps(2) infinite;
}

.start-screen #startButton {
  width: min(72vw, 260px);
  min-height: 92px;
  font-size: 22px;
}

.start-orb {
  position: absolute;
  width: 48px;
  height: 48px;
  background: url("assets/transparent/blocks/base/block_base_teal.png") center / contain no-repeat;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.5));
}

.orb-a { left: 11%; bottom: 18%; }
.orb-b { right: 12%; bottom: 22%; background-image: url("assets/transparent/blocks/base/block_base_yellow.png"); }
.orb-c { right: 22%; top: 18%; background-image: url("assets/transparent/blocks/base/block_base_pink.png"); }

.ranking-panel {
  width: min(88vw, 360px);
  padding: 12px 14px;
  background: rgba(4, 13, 31, 0.9);
  box-shadow: inset 0 0 0 2px #ffc642, 0 4px 0 #050613;
}

.leader-panel {
  width: min(88vw, 360px);
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(4, 13, 31, 0.86);
  box-shadow: inset 0 0 0 2px #ffc642, 0 3px 0 #050613;
  font-size: 13px;
}

.leader-panel span {
  color: #ffe48b;
  font-weight: 900;
  text-shadow: 2px 2px 0 #000;
}

.leader-panel strong {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-panel h2 {
  margin: 0 0 8px;
  font-size: 15px;
  color: #fff4a6;
  text-shadow: 2px 2px 0 #000;
}

.ranking-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.ranking-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 0.9fr 0.58fr 0.45fr;
  align-items: center;
  gap: 5px;
  min-height: 18px;
}

.ranking-list li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-list li strong,
.ranking-list li em {
  justify-self: end;
  font-style: normal;
  white-space: nowrap;
}

.name-field {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 900;
}

.name-field input {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: manipulation;
  min-width: 0;
  height: 36px;
  border: 2px solid #ffc642;
  background: #071126;
  color: #fff7d6;
  font: inherit;
  font-weight: 900;
  padding: 0 8px;
}

.ranking-status {
  min-height: 18px;
  margin: 6px 0;
  color: #fff4a6;
  font-size: 12px;
}

.result-panel {
  width: min(92vw, 390px);
}

.result-ranking {
  width: 100%;
  max-height: 178px;
  overflow: hidden;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

@media (max-height: 720px) {
  .game-top {
    min-height: 48px;
  }

  #titleButton {
    font-size: 34px;
  }

  .status-panel {
    min-height: 58px;
    padding-top: 11px;
    padding-bottom: 10px;
  }
}

/* iPhone Safari keeps a bottom toolbar in normal browser tabs.
   Keep the background fixed and start the playable UI lower. */
@media (max-width: 480px) and (orientation: portrait) {
  body {
    min-height: 100dvh;
  }

  .game-shell {
    width: min(100vw, 430px);
    min-height: 100dvh;
    padding-top: max(42px, calc(env(safe-area-inset-top) + 34px));
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 30px));
    gap: 5px;
    transform: none;
  }

  .game-top {
    min-height: 44px;
  }

  #titleButton {
    font-size: clamp(28px, 8.8vw, 38px);
    letter-spacing: 2px;
  }

  .header-actions {
    top: 5px;
    grid-template-columns: 62px 62px;
    gap: 3px;
  }

  .shake-button {
    top: 5px;
    min-width: 56px;
    min-height: 31px;
    padding: 0 6px;
    font-size: 10px;
  }

  .header-actions button {
    min-height: 33px;
    font-size: 11px;
  }

  .status-panel {
    min-height: 56px;
    padding: 10px 13px 9px;
    gap: 4px 6px;
  }

  .meter-row,
  .score-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .meter-row .label,
  .score-row .label {
    font-size: 10px;
  }

  .status-panel .xp-meter,
  .status-panel .enemy-meter {
    height: 15px;
  }

  .battle-row {
    min-height: 74px;
    padding: 0;
    --actor-size: 64.5px;
    --hero-offset: 5mm;
    --enemy-offset: 5mm;
  }

  .battle-actor {
    width: 64.5px;
    height: 64.5px;
    background-size: 387px 64.5px;
  }

  .battle-distance {
    height: 17px;
    left: calc(var(--hero-offset, 5mm) + 15mm);
    right: calc(var(--enemy-offset, 5mm) + 5mm);
    bottom: calc(11px - 5mm);
  }

  .battle-actor.is-attacking,
  .battle-actor.is-hit {
    background-position-x: -258px;
  }

  .battle-actor.is-defeated {
    background-position-x: -322.5px;
  }

  @keyframes actorWalk {
    0%, 24.999% { background-position-x: 0; }
    25%, 49.999% { background-position-x: -64.5px; }
    50%, 74.999% { background-position-x: -129px; }
    75%, 100% { background-position-x: -193.5px; }
  }

  @keyframes enemyWalkMinami {
    0%, 24.999% { background-position-x: -64.5px; }
    25%, 49.999% { background-position-x: -129px; }
    50%, 74.999% { background-position-x: -193.5px; }
    75%, 100% { background-position-x: -129px; }
  }

  #score {
    font-size: clamp(15px, 4.8vw, 21px);
  }

  .board-frame {
    padding: 8px 7px 10px;
    margin-bottom: 48px;
  }

  .toast {
    bottom: -34px;
  }
}

html.is-android-dark body:not(.is-game-over)::before,
html.is-android-dark body:not(.is-game-over)::after,
html.is-android-dark body:not(.is-game-over) .game-shell {
  filter: var(--android-tone-guard, none);
}

/* Replay systems: fever, enemy weakness, mode select, rewards, and archive. */
.game-shell {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.fever-hud {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 5;
  width: min(52%, 220px);
  min-height: 17px;
  display: grid;
  grid-template-columns: auto minmax(58px, 1fr) 27px;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  color: #fff5a8;
  font-size: 8px;
  text-shadow: 1px 1px 0 #000;
}

.fever-hud > strong,
.fever-hud > b {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  text-align: center;
}

.fever-meter {
  position: relative;
  height: 9px;
  overflow: hidden;
  background: #07101d;
  box-shadow: inset 0 0 0 2px #182b43, 0 1px 0 #000;
}

.fever-meter i {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #ff4e3f 0 8px, #ffc83d 8px 16px, #64efff 16px 24px);
  box-shadow: 0 0 8px rgba(255, 213, 74, 0.8);
  transition: width 100ms linear;
}

.fever-hud.is-active {
  color: #fff;
  filter: drop-shadow(0 0 5px #ff7b38);
}

.fever-hud.is-active .fever-meter {
  box-shadow: inset 0 0 0 2px #fff0a8, 0 0 8px #ff5b30;
}

.enemy-info {
  position: absolute;
  top: 0;
  right: 2px;
  z-index: 6;
  display: grid;
  justify-items: end;
  gap: 2px;
  max-width: 116px;
  color: #fff7d6;
  font-size: 8px;
  line-height: 1;
  text-shadow: 1px 1px 0 #000;
}

.enemy-info > strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weakness-chip {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 15px;
  padding: 1px 4px 1px 1px;
  background: rgba(3, 9, 20, 0.84);
  box-shadow: inset 0 0 0 1px #ffdb66;
}

.weakness-chip i {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: var(--weakness-base) center / contain no-repeat;
  filter: var(--weakness-filter, none);
  image-rendering: pixelated;
}

.weakness-chip i::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--weakness-symbol) center / contain no-repeat;
}

.weakness-chip b {
  font-size: 8px;
  white-space: nowrap;
}

.battle-callout {
  position: absolute;
  left: 50%;
  top: 25px;
  z-index: 20;
  max-width: 76%;
  padding: 4px 10px;
  transform: translate(-50%, 4px) scale(0.86);
  opacity: 0;
  background: rgba(3, 8, 19, 0.86);
  box-shadow: inset 0 0 0 2px #ffc94c, 0 3px 0 rgba(0, 0, 0, 0.75);
  color: #fff4a6;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
  white-space: nowrap;
}

.battle-callout[hidden] {
  display: none;
}

.battle-callout.is-visible {
  animation: battleCallout 1.05s steps(5) both;
}

.battle-callout[data-type="fever"],
.battle-callout[data-type="combo"] {
  color: #fff;
  box-shadow: inset 0 0 0 2px #ff7847, 0 0 14px #ffcc3d, 0 3px 0 #000;
}

.battle-callout[data-type="weakness"] {
  color: #aef8ff;
  box-shadow: inset 0 0 0 2px #5be1ff, 0 0 12px rgba(91, 225, 255, 0.78), 0 3px 0 #000;
}

@keyframes battleCallout {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.72); }
  16%, 68% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(1.04); }
}

body.is-fever .board-frame {
  box-shadow:
    inset 0 0 0 4px #fff2a4,
    inset 0 0 0 8px #ff6c37,
    0 0 18px rgba(255, 124, 42, 0.82),
    0 9px 0 #040817;
}

body.is-fever .battle-distance span {
  filter: brightness(1.16) saturate(1.2);
}

body.is-low-fx .cell.is-combo-exploding::after {
  box-shadow: 0 0 0 3px rgba(255, 224, 100, 0.72);
}

.start-screen {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  overflow: hidden;
}

.start-illustration {
  width: 100%;
  max-width: 460px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  background-position: center top;
}

.start-controls {
  width: 100%;
  max-width: 390px;
  min-width: 0;
  display: grid;
  justify-items: stretch;
  gap: 6px;
}

.mode-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.start-screen .mode-option {
  min-height: 46px;
  display: grid;
  place-content: center;
  gap: 1px;
  padding: 4px 8px;
  background-image: url("assets/transparent/ui/ui_blue_button_blank.png");
  opacity: 0.68;
}

.start-screen .mode-option strong,
.start-screen .mode-option small {
  display: block;
  margin: 0;
  color: #fff7d6;
  line-height: 1.1;
}

.start-screen .mode-option strong {
  font-size: 13px;
}

.start-screen .mode-option small {
  font-size: 9px;
}

.start-screen .mode-option.is-selected {
  opacity: 1;
  filter: brightness(1.12);
  box-shadow: 0 0 10px rgba(95, 210, 255, 0.6);
}

.start-screen .mode-option:disabled {
  background-image: none;
  background-color: rgba(3, 8, 18, 0.9);
  box-shadow: inset 0 0 0 2px #4b5364;
  filter: grayscale(1);
  opacity: 0.58;
}

.daily-card {
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: rgba(4, 13, 31, 0.9);
  box-shadow: inset 0 0 0 2px #5be1ff, 0 3px 0 #050613;
  font-size: 10px;
  text-shadow: 1px 1px 0 #000;
}

.daily-card span {
  color: #70e6ff;
  font-weight: 900;
}

.daily-card strong {
  min-width: 0;
  overflow: hidden;
  color: #fff7d6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-card b {
  color: #ffe16d;
  white-space: nowrap;
}

.start-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.start-screen #profileButton {
  min-height: 34px;
  font-size: 11px;
}

.start-meta-row > strong {
  min-width: 78px;
  padding: 8px 9px;
  background: rgba(4, 13, 31, 0.9);
  box-shadow: inset 0 0 0 2px #ffc642;
  color: #ffe487;
  font-size: 11px;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
}

.start-screen #startButton {
  width: 100%;
}

.start-controls .leader-panel {
  width: 100%;
}

.reward-modal,
.profile-modal {
  z-index: 110;
}

.reward-panel {
  width: min(92vw, 390px);
  padding: 20px 16px 18px;
  background: linear-gradient(180deg, rgba(11, 35, 67, 0.99), rgba(4, 10, 24, 0.99));
}

.reward-panel .reward-kicker {
  display: block;
  margin: 0 0 5px;
  color: #6ae9ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}

.reward-panel h2 {
  margin-bottom: 8px;
}

.reward-panel > p {
  margin: 0 0 12px;
  font-size: 11px;
}

.reward-choices {
  display: grid;
  gap: 7px;
}

.reward-choices button {
  position: relative;
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 3px 8px;
  padding: 9px 12px;
  border: 0;
  background: #09172d;
  box-shadow: inset 0 0 0 2px var(--reward-accent), 0 3px 0 #02040b;
  color: #fff7d6;
  text-align: left;
  text-shadow: 1px 1px 0 #000;
}

.reward-choices button strong {
  grid-column: 1;
  margin: 0;
  color: var(--reward-accent);
  font-size: 15px;
}

.reward-choices button span {
  grid-column: 1;
  font-size: 11px;
  font-weight: 800;
}

.reward-choices button b {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #fff4a6;
  font-size: 9px;
}

.reward-choices button:active {
  transform: translateY(2px);
}

.profile-modal {
  padding: 14px;
}

.profile-panel {
  width: min(94vw, 420px);
  max-height: min(88dvh, 760px);
  overflow: auto;
  padding: 16px;
  background: linear-gradient(180deg, rgba(11, 35, 67, 0.99), rgba(4, 10, 24, 0.99));
  text-align: left;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.profile-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.profile-header span {
  color: #6ae9ff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
}

.profile-header h2 {
  margin: 4px 0 0;
  font-size: 24px;
}

#profileCloseButton {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 0;
  background: #050914;
  box-shadow: inset 0 0 0 2px #ffc642;
  color: #fff4a6;
  font-size: 24px;
  font-weight: 900;
}

.profile-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.profile-summary span {
  min-height: 45px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #071126;
  box-shadow: inset 0 0 0 1px #355b83;
}

.profile-summary b {
  color: #8ddfff;
  font-size: 9px;
}

.profile-summary strong {
  margin: 0;
  overflow: hidden;
  color: #fff7d6;
  font-size: 12px;
  text-align: right;
  text-overflow: ellipsis;
}

.profile-daily {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 7px;
  padding: 8px;
  background: #0b2136;
  box-shadow: inset 0 0 0 1px #5be1ff;
  font-size: 9px;
}

.profile-daily span { color: #5be1ff; font-weight: 900; }
.profile-daily strong { margin: 0; color: #fff7d6; font-size: 9px; }
.profile-daily b { color: #ffe16d; }

.profile-panel h3 {
  margin: 14px 0 7px;
  color: #ffe58b;
  font-size: 13px;
}

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

.codex-card {
  min-height: 80px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 4px;
  background: #071126;
  box-shadow: inset 0 0 0 1px #355b83;
  text-align: center;
}

.codex-card i {
  width: 46px;
  height: 46px;
  background: var(--codex-image) left center / 276px 46px no-repeat;
  image-rendering: pixelated;
}

.codex-card.is-locked i {
  filter: brightness(0) opacity(0.58);
}

.codex-card strong {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #fff7d6;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codex-card span {
  color: #79dfff;
  font-size: 7px;
}

.achievement-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.achievement-card {
  min-height: 50px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px;
  background: #080d19;
  box-shadow: inset 0 0 0 1px #303747;
  opacity: 0.62;
}

.achievement-card.is-unlocked {
  background: #112642;
  box-shadow: inset 0 0 0 1px #ffc642;
  opacity: 1;
}

.achievement-card strong {
  margin: 0;
  color: #ffe58b;
  font-size: 10px;
}

.achievement-card span {
  color: #d6e9ff;
  font-size: 8px;
}

@media (max-height: 760px) {
  .start-screen {
    gap: 5px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
  }

  .start-controls {
    gap: 4px;
  }

  .start-screen #startButton {
    min-height: 68px;
    font-size: 19px;
  }

  .start-screen .mode-option {
    min-height: 40px;
  }

  .daily-card,
  .leader-panel {
    min-height: 34px;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  .fever-hud {
    width: 48%;
    grid-template-columns: auto minmax(48px, 1fr) 24px;
    font-size: 7px;
  }

  .enemy-info {
    max-width: 102px;
    font-size: 7px;
  }

  .weakness-chip b {
    font-size: 7px;
  }

  .battle-callout {
    top: 21px;
    font-size: 12px;
  }

  .start-screen {
    padding-left: 12px;
    padding-right: 12px;
  }

  .start-controls {
    width: 100%;
  }
}

/* Minami production art, persistent skill feedback, and region progression. */
body {
  background: #07121d;
}

body::before,
body::after {
  background: none;
}

.game-shell {
  background-color: #07121d;
  background-image: var(--stage-background, url("assets/background/stages/stage_01_05_minami_430x844.png"));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.status-panel {
  grid-template-rows: auto auto;
}

.skill-hud {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin-top: -3px;
}

.skill-hud-label {
  color: #ffe48b;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
}

.skill-list {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
}

.skill-list::-webkit-scrollbar {
  display: none;
}

.skill-empty {
  min-height: 19px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  background: rgba(3, 8, 18, 0.78);
  box-shadow: inset 0 0 0 1px #39445a;
  color: #9eabbc;
  font-size: 8px;
  font-weight: 800;
}

.skill-chip {
  min-width: 78px;
  min-height: 24px;
  flex: 0 0 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 0 2px;
  padding: 2px 4px;
  border: 0;
  border-radius: 2px;
  background: rgba(3, 8, 18, 0.92);
  box-shadow: inset 0 0 0 1px var(--skill-accent), 0 1px 0 #000;
  color: #fff7d6;
  text-shadow: 1px 1px 0 #000;
  touch-action: manipulation;
}

.skill-chip strong,
.skill-chip b,
.skill-chip i {
  min-width: 0;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

.skill-chip strong {
  grid-row: 1 / span 2;
  overflow: hidden;
  color: var(--skill-accent);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
}

.skill-chip b {
  font-size: 8px;
  text-align: right;
}

.skill-chip i {
  color: #aebcd1;
  font-size: 7px;
  font-style: normal;
  text-align: right;
}

.skill-chip.is-proc {
  animation: skillProc 420ms steps(4) both;
}

@keyframes skillProc {
  0%, 100% { transform: translateY(0) scale(1); filter: none; }
  35% { transform: translateY(-2px) scale(1.08); filter: brightness(1.7); }
  70% { transform: translateY(0) scale(1.02); box-shadow: inset 0 0 0 2px #fff, 0 0 8px var(--skill-accent); }
}

.battle-callout[data-type="skill"] {
  color: #f4ffb2;
  box-shadow: inset 0 0 0 2px #a8f05c, 0 0 12px rgba(168, 240, 92, 0.72), 0 3px 0 #000;
}

@media (max-width: 480px) and (orientation: portrait) {
  .status-panel {
    min-height: 80px;
    padding-bottom: 8px;
  }

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

  .skill-chip {
    padding-left: 3px;
    padding-right: 3px;
  }
}