:root {
  --red: #8f1f18;
  --red-dark: #50110e;
  --gold: #f3c46b;
  --gold-bright: #ffd98a;
  --jade: #1f7c66;
  --ink: #352014;
  --cream: #fff4da;
  --tile: #fff6df;
  --tile-edge: #d8aa5b;
  --panel: rgba(73, 17, 12, 0.86);
  --line: rgba(255, 222, 154, 0.35);
  --shadow: rgba(36, 9, 5, 0.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #2f0e0a;
  color: var(--cream);
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  overflow: hidden;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 217, 138, 0.26), transparent 24%),
    radial-gradient(circle at 86% 20%, rgba(31, 124, 102, 0.22), transparent 24%),
    linear-gradient(160deg, #4f130f 0%, #8f1f18 48%, #28100d 100%);
}

.app::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255, 232, 151, 0.14), transparent 34%),
    radial-gradient(ellipse at 82% 74%, rgba(255, 248, 231, 0.08), transparent 40%);
  opacity: 0.78;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.screen-game {
  padding-left: max(6px, env(safe-area-inset-left));
  padding-right: max(6px, env(safe-area-inset-right));
}

.screen.active {
  display: flex;
}

.screen-menu {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.top-strip,
.page-header,
.game-top,
.game-stats {
  width: min(520px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 1;
}

.wallet,
.energy,
.meter,
.game-stats span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(68, 18, 13, 0.72);
  padding: 0 12px;
  box-shadow: 0 12px 30px var(--shadow);
  backdrop-filter: blur(10px);
  font-weight: 700;
  white-space: nowrap;
}

.compact {
  min-height: 38px;
  font-size: 13px;
}

.title-block {
  width: min(520px, 94vw);
  text-align: center;
  z-index: 1;
}

.title-block p,
.page-header p {
  margin: 0 0 8px;
  color: var(--gold-bright);
  font-weight: 800;
}

.title-block h1 {
  margin: 0;
  font-size: clamp(50px, 17vw, 86px);
  line-height: 0.95;
  text-shadow: 0 5px 0 #5a160e, 0 18px 28px rgba(0, 0, 0, 0.35);
}

.menu-actions {
  width: min(430px, 100%);
  display: grid;
  gap: 12px;
  z-index: 1;
}

.btn {
  min-height: 52px;
  border-radius: 8px;
  font-weight: 900;
  box-shadow: 0 14px 30px var(--shadow);
  transition: transform 150ms ease, filter 150ms ease;
}

.btn:active,
.icon-btn:active,
.tool-btn:active,
.tile:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(180deg, #ffd98a, #c57925);
  color: #4b160c;
}

.btn-soft {
  border: 1px solid var(--line);
  background: rgba(82, 22, 16, 0.78);
}

.screen-map {
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.page-header h2 {
  margin: 0;
  font-size: 26px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(68, 18, 13, 0.82);
  color: var(--gold-bright);
  font-size: 32px;
  line-height: 1;
  box-shadow: 0 12px 26px var(--shadow);
}

.quick-exit-btn {
  flex: 0 0 42px;
  border-color: rgba(255, 226, 154, 0.86);
  background: linear-gradient(180deg, #d32222, #8f1212);
  color: #fff8e7;
  font-size: 17px;
  font-weight: 950;
}

.chapter-tabs {
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.chapter-tabs span {
  min-height: 32px;
  border-radius: 8px;
  background: rgba(255, 217, 138, 0.13);
  color: #ffe1a2;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.level-map {
  width: min(520px, 100%);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 8px 2px 18px;
}

.level-node {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 217, 138, 0.6);
  background: linear-gradient(180deg, #fff2bd, #ba772c);
  color: #54170d;
  display: grid;
  place-items: center;
  font-weight: 950;
  box-shadow: inset 0 6px 12px rgba(255, 255, 255, 0.35), 0 12px 20px rgba(0, 0, 0, 0.22);
  position: relative;
}

.level-node.locked {
  filter: grayscale(0.9) brightness(0.72);
}

.level-node small {
  position: absolute;
  bottom: -4px;
  color: var(--cream);
  text-shadow: 0 1px 2px #000;
  font-size: 12px;
}

.screen-game {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.game-top {
  flex: 0 0 auto;
}

.meter {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 86px;
  gap: 1px;
}

.meter span {
  font-size: 12px;
  color: #f9dca0;
}

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

.board-wrap {
  position: relative;
  width: min(540px, 100%);
  flex: 1 1 auto;
  min-height: 280px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 217, 138, 0.16), transparent 36%),
    rgba(40, 14, 9, 0.64);
  box-shadow: inset 0 0 38px rgba(255, 217, 138, 0.09), 0 18px 30px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  isolation: isolate;
}

.board-scene {
  position: absolute;
  inset: 8px;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  display: none;
  background:
    radial-gradient(circle at 62% 0%, rgba(255, 235, 153, 0.52), transparent 34%),
    linear-gradient(180deg, rgba(195, 226, 164, 0.34), rgba(32, 117, 83, 0.26) 58%, rgba(15, 78, 72, 0.46));
}

.app.bamboo-mode .board-scene,
.app.tea-mode .board-scene,
.app.town-mode .board-scene,
.app.palace-mode .board-scene,
.app.dragon-mode .board-scene {
  display: block;
}

.app.boss-mode .board-scene {
  display: block;
}

.board-scene span {
  position: absolute;
}

.board-light {
  left: 38%;
  top: -24%;
  width: 64%;
  height: 92%;
  background: linear-gradient(180deg, rgba(255, 232, 151, 0.34), rgba(255, 232, 151, 0.03) 82%);
  clip-path: polygon(42% 0, 62% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  animation: sunbeamDrift 7s ease-in-out infinite;
}

.board-mist {
  left: -18%;
  width: 136%;
  height: 32%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 16% 50%, rgba(255, 255, 238, 0.42) 0 25%, transparent 58%),
    radial-gradient(ellipse at 52% 45%, rgba(255, 255, 238, 0.32) 0 30%, transparent 64%),
    radial-gradient(ellipse at 86% 55%, rgba(255, 255, 238, 0.24) 0 26%, transparent 60%);
  filter: blur(7px);
  animation: mistDrift 12s ease-in-out infinite;
}

.board-mist-a { top: 18%; }
.board-mist-b { top: 54%; animation-delay: -5s; opacity: 0.76; }

.board-creek {
  left: -10%;
  right: -10%;
  bottom: -8%;
  height: 34%;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 24% 30%, rgba(255, 248, 231, 0.18), transparent 34%),
    radial-gradient(ellipse at 72% 62%, rgba(126, 218, 184, 0.2), transparent 42%),
    linear-gradient(112deg, rgba(110, 190, 164, 0.78), rgba(36, 128, 98, 0.86) 55%, rgba(17, 82, 80, 0.96));
  animation: creekFlow 4.5s linear infinite;
}

.board-ripple {
  bottom: 9%;
  width: 78px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255, 232, 151, 0.42);
  border-left-color: transparent;
  border-right-color: transparent;
  animation: rippleFlow 3.8s ease-in-out infinite;
}

.board-ripple-a { left: 13%; }
.board-ripple-b { right: 13%; bottom: 15%; animation-delay: -1.6s; }

.board-leaf {
  top: -12%;
  width: 13px;
  height: 25px;
  border-radius: 100% 0 100% 0;
  background:
    linear-gradient(135deg, rgba(255, 232, 151, 0.38), transparent 38%),
    linear-gradient(180deg, #8bcf66, #2e8d4a);
  box-shadow: inset -3px -4px 0 rgba(16, 82, 44, 0.22);
  animation: leafFall 8s linear infinite;
}

.board-leaf-a { left: 22%; animation-delay: -1.4s; }
.board-leaf-b { left: 56%; animation-delay: -4.1s; animation-duration: 9.5s; }
.board-leaf-c { left: 82%; animation-delay: -6.8s; animation-duration: 10.5s; }

.board-extra {
  width: 72px;
  height: 22px;
  border-radius: 999px;
  opacity: 0.8;
}

.board-extra-a { left: 14%; top: 22%; }
.board-extra-b { right: 10%; top: 52%; animation-delay: -2s; }

.board-water-flow {
  left: -22%;
  bottom: 8%;
  width: 44%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 231, 0.68), rgba(136, 225, 190, 0.42), transparent);
  box-shadow: 0 0 14px rgba(255, 232, 151, 0.34);
  opacity: 0;
  mix-blend-mode: screen;
  animation: creekRibbon 4.8s linear infinite;
}

.board-water-flow-b {
  bottom: 17%;
  width: 36%;
  animation-delay: -2.4s;
  animation-duration: 5.6s;
}

.board-bubble {
  bottom: 4%;
  width: 11px;
  height: 11px;
  border: 1.5px solid rgba(255, 248, 231, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.82) 0 12%, transparent 16%),
    radial-gradient(circle, rgba(143, 218, 230, 0.18), transparent 68%);
  box-shadow: 0 0 11px rgba(128, 220, 228, 0.32);
  opacity: 0.48;
  mix-blend-mode: screen;
  animation: boardBubbleRise 6.4s ease-in-out infinite;
}

.board-bubble-a { left: 18%; animation-delay: -1.2s; }
.board-bubble-b { left: 42%; width: 7px; height: 7px; animation-delay: -3.8s; animation-duration: 5.2s; }
.board-bubble-c { right: 22%; width: 13px; height: 13px; animation-delay: -2.5s; animation-duration: 7.2s; }
.board-bubble-d { right: 9%; width: 8px; height: 8px; animation-delay: -5.4s; animation-duration: 5.8s; }

.app.bamboo-mode .board-scene {
  background:
    radial-gradient(circle at 58% 6%, rgba(255, 232, 151, 0.46), transparent 30%),
    linear-gradient(180deg, rgba(222, 239, 187, 0.04), rgba(16, 38, 33, 0.42)),
    url("assets/backgrounds/watermargin-tiger.jpg"),
    linear-gradient(180deg, rgba(195, 226, 164, 0.34), rgba(15, 78, 72, 0.46));
  background-position: center;
  background-size: cover;
}

.app.bamboo-mode .board-creek {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 48% 34%, rgba(255, 248, 231, 0.18), transparent 42%),
    radial-gradient(ellipse at 20% 72%, rgba(130, 224, 190, 0.18), transparent 44%),
    linear-gradient(112deg, rgba(110, 190, 164, 0.78), rgba(36, 128, 98, 0.88) 55%, rgba(17, 82, 80, 0.96));
  background-size: 100% 100%;
}

.app.bamboo-mode .board-creek::before,
.app.bamboo-mode .board-creek::after {
  content: "";
  position: absolute;
  left: -42%;
  width: 54%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 231, 0.7), rgba(149, 231, 197, 0.38), transparent);
  filter: blur(0.3px);
  animation: creekRibbon 4.2s linear infinite;
}

.app.bamboo-mode .board-creek::before { top: 34%; }
.app.bamboo-mode .board-creek::after { top: 62%; animation-delay: -1.9s; animation-duration: 5.1s; }

.app.tea-mode .board-scene {
  background:
    radial-gradient(circle at 64% 4%, rgba(255, 216, 132, 0.5), transparent 34%),
    linear-gradient(180deg, rgba(40, 18, 8, 0.08), rgba(27, 15, 10, 0.44)),
    url("assets/backgrounds/watermargin-heroes-hall.jpg"),
    linear-gradient(180deg, rgba(214, 148, 70, 0.42), rgba(75, 39, 18, 0.56));
  background-position: center;
  background-size: cover;
}

.app.tea-mode .board-light {
  background: linear-gradient(180deg, rgba(255, 214, 134, 0.36), transparent 78%);
}

.app.tea-mode .board-mist {
  width: 34%;
  height: 58%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 248, 231, 0.46), transparent 36%),
    radial-gradient(ellipse at 50% 58%, rgba(255, 224, 171, 0.25), transparent 58%);
  filter: blur(10px);
  animation: teaSteamRise 5.4s ease-in-out infinite;
}

.app.tea-mode .board-mist-a { left: 24%; top: 25%; }
.app.tea-mode .board-mist-b { left: 58%; top: 16%; animation-delay: -2.1s; }

.app.tea-mode .board-creek {
  left: 8%;
  right: 8%;
  bottom: 7%;
  height: 18%;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 22% 35%, rgba(255, 214, 134, 0.2), transparent 36%),
    radial-gradient(ellipse at 74% 62%, rgba(255, 248, 231, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(88, 44, 20, 0.65), rgba(44, 22, 13, 0.78));
}

.app.tea-mode .board-ripple {
  border-color: rgba(255, 231, 180, 0.5);
  border-left-color: transparent;
  border-right-color: transparent;
  bottom: 33%;
  animation: steamRing 4s ease-in-out infinite;
}

.app.tea-mode .board-leaf {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffcf70;
  box-shadow: 0 0 12px rgba(255, 207, 112, 0.85);
  animation: sparkFloat 4.6s ease-in-out infinite;
}

.app.town-mode .board-scene {
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 203, 108, 0.3), transparent 24%),
    linear-gradient(180deg, rgba(11, 30, 58, 0.08), rgba(5, 18, 35, 0.42)),
    url("assets/backgrounds/watermargin-scholar-river.jpg"),
    linear-gradient(180deg, rgba(30, 61, 101, 0.58), rgba(8, 26, 49, 0.8) 58%, rgba(8, 47, 72, 0.86));
  background-position: center;
  background-size: cover;
}

.app.town-mode .board-light {
  top: 3%;
  left: 8%;
  width: 84%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 215, 138, 0.5), transparent 70%);
  clip-path: none;
  animation: lanternReflection 5s ease-in-out infinite;
}

.app.town-mode .board-mist {
  background:
    radial-gradient(ellipse at 28% 50%, rgba(151, 202, 232, 0.18), transparent 60%),
    radial-gradient(ellipse at 70% 52%, rgba(255, 217, 138, 0.16), transparent 62%);
  filter: blur(7px);
}

.app.town-mode .board-creek {
  height: 54%;
  bottom: -8%;
  background:
    repeating-linear-gradient(175deg, transparent 0 20px, rgba(255, 217, 138, 0.2) 21px 24px, transparent 25px 44px),
    linear-gradient(112deg, rgba(26, 83, 124, 0.74), rgba(9, 43, 75, 0.9));
}

.app.town-mode .board-ripple {
  border-color: rgba(255, 217, 138, 0.54);
  border-left-color: transparent;
  border-right-color: transparent;
}

.app.town-mode .board-leaf {
  width: 21px;
  height: 12px;
  border-radius: 50% 50% 45% 45%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 249, 194, 0.95) 0 18%, #f0a742 20% 52%, #7f3918 54% 100%);
  box-shadow: 0 0 16px rgba(255, 199, 92, 0.76);
  animation: lanternDrift 8s linear infinite;
}

.app.town-mode .board-extra {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 243, 178, 0.78) 0 7%, transparent 8% 15%, rgba(255, 122, 90, 0.44) 16% 18%, transparent 19% 100%);
  animation: fireworkPulse 2.8s ease-out infinite;
}

.app.palace-mode .board-scene {
  background:
    radial-gradient(circle at 48% 4%, rgba(255, 226, 154, 0.54), transparent 28%),
    linear-gradient(180deg, rgba(80, 12, 8, 0.08), rgba(42, 10, 7, 0.46)),
    url("assets/backgrounds/watermargin-willow.jpg"),
    linear-gradient(180deg, rgba(142, 28, 19, 0.76), rgba(71, 13, 10, 0.86));
  background-position: center;
  background-size: cover;
}

.app.palace-mode .board-light {
  background: linear-gradient(180deg, rgba(255, 226, 154, 0.48), transparent 76%);
}

.app.palace-mode .board-mist {
  background:
    radial-gradient(ellipse at 22% 50%, rgba(255, 226, 154, 0.28) 0 25%, transparent 58%),
    radial-gradient(ellipse at 56% 44%, rgba(255, 248, 231, 0.24) 0 28%, transparent 62%),
    radial-gradient(ellipse at 82% 55%, rgba(255, 226, 154, 0.2) 0 24%, transparent 60%);
  filter: blur(5px);
  animation: palaceCloudDrift 11s ease-in-out infinite;
}

.app.palace-mode .board-creek {
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 28% 45%, rgba(255, 226, 154, 0.18), transparent 42%),
    radial-gradient(ellipse at 72% 64%, rgba(255, 248, 231, 0.1), transparent 46%),
    linear-gradient(180deg, rgba(255, 204, 96, 0.2), rgba(108, 19, 13, 0.56));
}

.app.palace-mode .board-ripple,
.app.palace-mode .board-leaf,
.app.palace-mode .board-extra {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #ffe29a;
  box-shadow: 0 0 14px rgba(255, 226, 154, 0.92);
  animation: goldDustFloat 5.4s ease-in-out infinite;
}

.app.dragon-mode .board-scene {
  background:
    radial-gradient(circle at 60% 12%, rgba(246, 195, 68, 0.34), transparent 28%),
    linear-gradient(180deg, rgba(3, 14, 31, 0.08), rgba(1, 6, 13, 0.52)),
    url("assets/backgrounds/watermargin-snow-temple.jpg"),
    radial-gradient(circle at 20% 72%, rgba(45, 111, 176, 0.42), transparent 32%),
    linear-gradient(180deg, rgba(6, 24, 46, 0.88), rgba(2, 8, 16, 0.96));
  background-position: center;
  background-size: cover;
}

.app.dragon-mode .board-light {
  left: 42%;
  top: -5%;
  width: 42%;
  height: 112%;
  background: linear-gradient(180deg, rgba(246, 195, 68, 0.28), transparent 80%);
  animation: lightningFlash 4.8s steps(1, end) infinite;
}

.app.dragon-mode .board-mist {
  background:
    radial-gradient(ellipse at 18% 50%, rgba(47, 125, 190, 0.28) 0 25%, transparent 58%),
    radial-gradient(ellipse at 58% 44%, rgba(246, 195, 68, 0.13) 0 24%, transparent 62%),
    radial-gradient(ellipse at 86% 55%, rgba(35, 91, 157, 0.2) 0 24%, transparent 60%);
  filter: blur(6px);
}

.app.dragon-mode .board-creek {
  height: 48%;
  bottom: -10%;
  background:
    repeating-linear-gradient(170deg, transparent 0 18px, rgba(246, 195, 68, 0.16) 19px 22px, transparent 23px 40px),
    linear-gradient(112deg, rgba(20, 79, 132, 0.82), rgba(5, 28, 59, 0.95));
  animation: waveRoll 4s linear infinite;
}

.app.dragon-mode .board-ripple {
  border-color: rgba(246, 195, 68, 0.54);
  border-left-color: transparent;
  border-right-color: transparent;
}

.app.dragon-mode .board-leaf,
.app.dragon-mode .board-extra {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 183, 0.9), rgba(246, 195, 68, 0.45) 55%, transparent 70%);
  box-shadow: 0 0 16px rgba(246, 195, 68, 0.72);
  animation: bubbleRise 6s ease-in-out infinite;
}

.board {
  position: relative;
  display: grid;
  gap: clamp(4px, 1.1vw, 7px);
  padding: 12px;
  z-index: 2;
  isolation: isolate;
}

.board::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 0;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 248, 231, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(58, 36, 20, 0.2), rgba(24, 12, 8, 0.34));
  box-shadow:
    inset 0 10px 24px rgba(255, 248, 231, 0.08),
    inset 0 -18px 26px rgba(24, 9, 5, 0.26),
    0 18px 36px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.tile {
  position: relative;
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: 12px;
  border: 2px solid #e4bd72;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95) 0 12%, transparent 13%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(180deg, #fffdf2 0%, #fff2c8 58%, #d09a4a 100%);
  color: #732016;
  display: grid;
  place-items: center;
  box-shadow:
    inset -5px -8px 0 rgba(117, 70, 28, 0.18),
    inset 3px 3px 0 rgba(255, 255, 255, 0.62),
    0 7px 0 #9a5f25,
    0 14px 20px rgba(0, 0, 0, 0.24);
  font-size: clamp(10px, calc(var(--tile-size) * 0.28), 18px);
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  padding: 0;
  user-select: none;
  overflow: hidden;
  transition: transform 150ms ease, filter 150ms ease, opacity 180ms ease;
  --tile-side-color: #9a5f25;
  --tile-side: 7px;
  --tile-shadow-blur: 22px;
  --tile-lift: 0px;
}

.tile::before,
.tile::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tile::before {
  inset: 4px 5px 8px 4px;
  border-radius: 9px;
  border: 1px solid rgba(141, 85, 33, 0.18);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.65), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 225, 154, 0.05));
  z-index: 1;
}

.tile::after {
  right: 1px;
  bottom: 1px;
  width: 28%;
  height: 46%;
  border-radius: 0 0 9px 0;
  background: linear-gradient(135deg, transparent 20%, rgba(105, 61, 23, 0.34));
  z-index: 1;
}

.tile span {
  position: relative;
  z-index: 2;
}

.mahjong-face {
  width: calc(var(--tile-size) * 0.88);
  height: calc(var(--tile-size) * 0.88);
  display: grid;
  place-items: center;
  align-content: center;
  gap: calc(var(--tile-size) * 0.02);
  border-radius: calc(var(--tile-size) * 0.12);
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.5), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(226, 178, 96, 0.04));
  box-shadow: inset 0 0 0 1px rgba(115, 78, 38, 0.08);
}

.mahjong-face b {
  display: block;
  font-size: calc(var(--tile-size) * 0.62);
  line-height: 0.82;
  font-weight: 950;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 1px currentColor;
}

.mahjong-face small {
  display: block;
  color: currentColor;
  font-size: max(8px, calc(var(--tile-size) * 0.2));
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
}

.tile[data-tone="red"] .mahjong-face {
  color: #a01818;
}

.tile[data-tone="blue"] .mahjong-face {
  color: #155f9d;
}

.tile[data-tone="green"] .mahjong-face {
  color: #087c55;
}

.tile[data-tone="gold"] .mahjong-face {
  color: #9b5d11;
}

.tile[data-tone="black"] .mahjong-face {
  color: #23170f;
}

.suit-wan b,
.suit-wind b,
.suit-dragon b,
.suit-flower b {
  font-family: "KaiTi", "STKaiti", "PingFang SC", serif;
  font-size: calc(var(--tile-size) * 0.66);
  line-height: 0.78;
}

.suit-wan small {
  color: #0f7a4f;
}

.suit-wind,
.suit-dragon,
.suit-flower {
  border: 1px solid rgba(126, 80, 32, 0.12);
}

.dot-pips,
.bamboo-pips {
  position: relative;
  width: calc(var(--tile-size) * 0.64);
  height: calc(var(--tile-size) * 0.6);
}

.suit-tong .dot-pips {
  width: calc(var(--tile-size) * 0.74);
  height: calc(var(--tile-size) * 0.68);
}

.dot-pips i,
.bamboo-pips i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
}

.dot-pips i {
  width: calc(var(--tile-size) * 0.15);
  height: calc(var(--tile-size) * 0.15);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, rgba(255, 255, 255, 0.86) 0 16%, transparent 18%),
    radial-gradient(circle, currentColor 0 58%, rgba(255, 255, 255, 0.9) 60% 71%, currentColor 73%);
  box-shadow:
    0 1px 0 rgba(64, 32, 12, 0.18),
    0 0 2px rgba(64, 32, 12, 0.14);
}

.dot-pips i:nth-child(2n) {
  color: #b01818;
}

.dot-pips i:nth-child(3n) {
  color: #087c55;
}

.bamboo-pips i {
  width: calc(var(--tile-size) * 0.078);
  height: calc(var(--tile-size) * 0.215);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.46), transparent 45%),
    repeating-linear-gradient(180deg, #0a7d50 0 26%, #0f9a66 27% 38%, #0a7049 39% 65%);
  box-shadow: inset -1px 0 0 rgba(11, 76, 48, 0.32), 0 1px 0 rgba(64, 32, 12, 0.18);
}

.bamboo-pips i:nth-child(2n) {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.46), transparent 45%),
    repeating-linear-gradient(180deg, #b21e1e 0 26%, #cf3430 27% 38%, #891616 39% 65%);
}

.suit-bird {
  gap: 0;
}

.suit-bird small {
  margin-top: calc(var(--tile-size) * -0.02);
  color: #0b7a4f;
}

.mahjong-bird {
  position: relative;
  width: calc(var(--tile-size) * 0.62);
  height: calc(var(--tile-size) * 0.58);
  margin-top: calc(var(--tile-size) * -0.03);
  filter: drop-shadow(0 1px 0 rgba(55, 32, 14, 0.24));
}

.mahjong-bird i {
  position: absolute;
  display: block;
}

.bird-body {
  left: 28%;
  top: 30%;
  width: 43%;
  height: 42%;
  border-radius: 55% 48% 52% 45%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.72) 0 9%, transparent 11%),
    linear-gradient(145deg, #35a76c, #08704f 72%);
  transform: rotate(-18deg);
  box-shadow: inset -2px -3px 0 rgba(5, 77, 49, 0.34);
}

.bird-wing {
  left: 36%;
  top: 40%;
  width: 31%;
  height: 25%;
  border-radius: 62% 38% 68% 32%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 236, 162, 0.72) 0 15%, transparent 17%),
    linear-gradient(145deg, #d8372d, #8f1e1a);
  transform: rotate(-25deg);
  box-shadow: inset -1px -2px 0 rgba(88, 24, 12, 0.32);
}

.bird-head {
  left: 58%;
  top: 18%;
  width: 25%;
  height: 25%;
  border-radius: 52% 48% 44% 56%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.74) 0 11%, transparent 13%),
    linear-gradient(145deg, #38b875, #08704f);
  transform: rotate(10deg);
  box-shadow: inset -1px -2px 0 rgba(5, 77, 49, 0.28);
}

.bird-beak {
  left: 78%;
  top: 28%;
  width: 17%;
  height: 12%;
  background: #f3b235;
  clip-path: polygon(0 22%, 100% 50%, 0 78%);
  filter: drop-shadow(0 1px 0 rgba(92, 42, 10, 0.24));
}

.bird-eye {
  left: 70%;
  top: 26%;
  width: 6%;
  height: 6%;
  border-radius: 50%;
  background: #25170f;
  box-shadow: 0 0 0 1px rgba(255, 248, 231, 0.9);
}

.bird-tail {
  left: 7%;
  top: 48%;
  width: 35%;
  height: 13%;
  border-radius: 999px;
  transform-origin: 100% 50%;
  box-shadow: inset -1px -1px 0 rgba(58, 36, 20, 0.18);
}

.bird-tail-a {
  background: linear-gradient(90deg, #f1b63b, #16865a);
  transform: rotate(-34deg);
}

.bird-tail-b {
  background: linear-gradient(90deg, #d9342b, #0f8a5b);
  transform: rotate(-8deg);
}

.bird-tail-c {
  background: linear-gradient(90deg, #155f9d, #0f8a5b);
  transform: rotate(18deg);
}

.bird-leg {
  top: 70%;
  width: 2px;
  height: 15%;
  border-radius: 999px;
  background: #92581d;
  transform-origin: 50% 0;
}

.bird-leg-a { left: 47%; transform: rotate(8deg); }
.bird-leg-b { left: 56%; transform: rotate(-10deg); }

.tile em {
  position: absolute;
  top: 3px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(86, 25, 15, 0.86);
  color: #fff4da;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
  z-index: 3;
}

.tile.frozen {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), transparent 32%),
    linear-gradient(180deg, #effcff, #9ed8e8);
  border-color: #7bc8dc;
  color: #145c78;
}

.tile.locked-tile {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), transparent 32%),
    linear-gradient(180deg, #f9e7b4, #b58a42);
  border-color: #6f3a18;
  color: #5a160e;
}

.tile.moving-tile:not(.selected):not(.removing) {
  animation: tileDrift 2.6s ease-in-out infinite;
}

.tile.moving-tile:nth-child(2n) {
  animation-delay: -1.1s;
}

.tile.moving-tile:nth-child(3n) {
  animation-delay: -1.8s;
}

.tile.selected {
  filter: brightness(1.1);
  transform: translateY(-4px);
  box-shadow: inset -4px -6px 0 rgba(123, 75, 26, 0.18), 0 12px 0 #9d652b, 0 18px 26px rgba(0, 0, 0, 0.28);
}

.tile.hint {
  animation: hintPulse 0.72s ease-in-out infinite alternate;
}

.tile.removing {
  opacity: 0;
  transform: scale(0.3) rotate(12deg);
}

.tile.empty {
  visibility: hidden;
  pointer-events: none;
}

@keyframes hintPulse {
  from { transform: translateY(calc(var(--tile-lift, 0px) * -1)); }
  to { transform: translateY(calc(-6px - var(--tile-lift, 0px))); filter: brightness(1.18); }
}

@keyframes tileDrift {
  0%, 100% { transform: translateY(calc(var(--tile-lift, 0px) * -1)); }
  50% { transform: translateY(calc(-2px - var(--tile-lift, 0px))); }
}

@keyframes lineHaloPop {
  0% { opacity: 0; stroke-width: 5; }
  28% { opacity: 1; stroke-width: 22; }
  100% { opacity: 0.58; stroke-width: 14; }
}

@keyframes lineDrawGlow {
  0% { opacity: 0; stroke-dashoffset: 900; }
  45% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes lineSparkRun {
  to { stroke-dashoffset: -48; }
}

.line-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.match-line {
  vector-effect: non-scaling-stroke;
}

.match-line-halo {
  stroke: rgba(255, 223, 118, 0.42);
  stroke-width: 18;
  filter: drop-shadow(0 0 20px rgba(255, 226, 154, 0.98)) drop-shadow(0 0 34px rgba(246, 195, 68, 0.52));
  animation: lineHaloPop 520ms ease-out both;
}

.match-line-main {
  stroke: #fff2a8;
  stroke-width: 7;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  filter: drop-shadow(0 0 8px rgba(255, 255, 230, 0.95)) drop-shadow(0 0 16px rgba(246, 195, 68, 0.78));
  animation: lineDrawGlow 430ms ease-out forwards;
}

.match-line-spark {
  stroke: #ffffff;
  stroke-width: 3;
  stroke-dasharray: 10 14;
  opacity: 0.92;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95));
  animation: lineSparkRun 360ms linear infinite;
}

.combo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  min-height: 32px;
  border-radius: 8px;
  background: rgba(31, 124, 102, 0.86);
  color: #fff7d8;
  display: none;
  align-items: center;
  padding: 0 12px;
  font-weight: 900;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.22);
}

.combo-badge.show {
  display: flex;
}

.particle {
  position: absolute;
  z-index: 6;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 10px rgba(255, 217, 138, 0.9);
  pointer-events: none;
  animation: particleBurst 520ms ease-out forwards;
}

@keyframes particleBurst {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.15);
  }
}

.game-bottom {
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.tool-btn {
  min-height: 58px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(126, 37, 22, 0.9), rgba(71, 18, 13, 0.9));
  display: grid;
  place-items: center;
  gap: 2px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}

.tool-btn span {
  font-size: 13px;
  font-weight: 800;
}

.tool-btn strong {
  color: var(--gold-bright);
  font-size: 18px;
}

.tool-btn:disabled {
  opacity: 0.45;
}

.game-stats {
  flex: 0 0 auto;
}

.modal {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  padding: 22px;
  background: rgba(28, 8, 5, 0.58);
  backdrop-filter: blur(8px);
}

.modal.show {
  display: grid;
}

.modal-panel {
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(120, 29, 19, 0.96), rgba(55, 13, 10, 0.97));
  padding: 24px;
  text-align: center;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.modal-kicker {
  margin: 0 0 8px;
  color: var(--gold-bright);
  font-weight: 900;
}

.modal-panel h2 {
  margin: 0;
  font-size: 38px;
}

.stars {
  margin: 14px 0;
  color: var(--gold-bright);
  font-size: 38px;
  letter-spacing: 4px;
}

.modal-panel p {
  line-height: 1.55;
}

.modal-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.settings-modal {
  position: absolute;
  inset: 0;
  z-index: 16;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(16, 7, 5, 0.62);
  backdrop-filter: blur(10px);
}

.settings-modal.show {
  display: grid;
}

.settings-panel {
  width: min(440px, 100%);
  max-height: min(760px, 92svh);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 226, 154, 0.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 226, 154, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(86, 23, 17, 0.98), rgba(36, 17, 11, 0.98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.44);
  padding: 18px;
}

.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-head p,
.settings-head h2,
.settings-group h3 {
  margin: 0;
}

.settings-head p {
  color: var(--gold-bright);
  font-size: 13px;
  font-weight: 900;
}

.settings-head h2 {
  font-size: 28px;
  color: #fff8e7;
}

.settings-group {
  padding: 14px 0 4px;
  border-top: 1px solid rgba(255, 226, 154, 0.18);
}

.settings-group h3 {
  margin-bottom: 10px;
  color: #ffe29a;
  font-size: 16px;
}

.setting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.setting-grid button {
  min-height: 72px;
  border-radius: 12px;
  border: 1px solid rgba(255, 226, 154, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.1), rgba(255, 248, 231, 0.02)),
    rgba(40, 18, 12, 0.56);
  color: #fff8e7;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 8px 6px;
  font-weight: 900;
}

.setting-grid button.active {
  border-color: rgba(255, 226, 154, 0.95);
  background:
    linear-gradient(180deg, rgba(255, 226, 154, 0.32), rgba(246, 195, 68, 0.12)),
    rgba(91, 42, 16, 0.78);
  box-shadow: 0 0 0 2px rgba(246, 195, 68, 0.18), 0 0 18px rgba(246, 195, 68, 0.28);
}

.sound-settings {
  display: grid;
  gap: 12px;
}

.sound-toggle-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sound-toggle {
  min-height: 58px;
  border-radius: 12px;
  border: 1px solid rgba(255, 226, 154, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.09), rgba(255, 248, 231, 0.02)),
    rgba(31, 13, 8, 0.64);
  color: #fff8e7;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 900;
}

.sound-toggle i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(4, 20, 24, 0.62);
  border: 1px solid rgba(255, 226, 154, 0.32);
  color: #ffe29a;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
}

.sound-toggle span {
  min-width: 0;
  text-align: left;
}

.sound-toggle b {
  min-width: 38px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 248, 231, 0.72);
  font-size: 13px;
}

.sound-toggle.active {
  border-color: rgba(255, 226, 154, 0.92);
  background:
    linear-gradient(180deg, rgba(29, 198, 108, 0.32), rgba(4, 108, 56, 0.18)),
    rgba(29, 79, 45, 0.72);
  box-shadow: 0 0 0 2px rgba(246, 195, 68, 0.12), 0 0 16px rgba(29, 198, 108, 0.22);
}

.sound-toggle.active b {
  background: linear-gradient(180deg, #ffe29a, #d59a35);
  color: #4a160c;
}

.sound-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 12px;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 226, 154, 0.24);
  background: rgba(26, 11, 7, 0.48);
  color: #fff8e7;
  font-weight: 900;
}

.sound-slider output {
  color: #ffe29a;
  font-variant-numeric: tabular-nums;
}

.sound-slider input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #ffd955;
}

@media (max-width: 430px) {
  .sound-toggle-row {
    grid-template-columns: 1fr;
  }
}

.screen-safe {
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    linear-gradient(180deg, rgba(246, 248, 251, 0.98), rgba(232, 236, 242, 0.98)),
    #f4f6f9;
  color: #1f2937;
}

.app.safe-mode .ambient,
.app.safe-mode::before {
  display: none;
}

.safe-panel {
  width: min(440px, 100%);
  border-radius: 10px;
  border: 1px solid #d8dee8;
  background: #ffffff;
  padding: 22px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
}

.safe-panel p {
  margin: 0 0 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.safe-panel h1 {
  margin: 0 0 18px;
  color: #0f172a;
  font-size: 30px;
  line-height: 1.12;
}

.safe-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.safe-panel li {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0 12px;
  color: #334155;
  font-weight: 750;
}

.safe-panel li::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 2px solid #94a3b8;
  flex: 0 0 auto;
}

.safe-action {
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  border-radius: 8px;
  background: #1e293b;
  color: #ffffff;
  font-weight: 850;
}

.ad-privacy-group[hidden] {
  display: none;
}

.wide-setting-btn {
  width: 100%;
  min-height: 54px;
  border-radius: 12px;
  border: 1px solid rgba(255, 226, 154, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 226, 154, 0.18), rgba(255, 226, 154, 0.06)),
    rgba(40, 18, 12, 0.62);
  color: #fff8e7;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.bg-chip {
  width: 34px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 248, 231, 0.5);
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.18);
}

.bg-chip.auto { background: linear-gradient(90deg, #314328, #b88a32, #7e1e16, #14294f, #070707); }
.bg-chip.bamboo { background: linear-gradient(135deg, #c9d7a0 0%, #47633c 48%, #12251f 100%); }
.bg-chip.tea { background: linear-gradient(135deg, #f0b45c 0%, #8d351e 55%, #25110b 100%); }
.bg-chip.town { background: linear-gradient(135deg, #101d35 0%, #35516d 50%, #f0bd53 100%); }
.bg-chip.palace { background: linear-gradient(135deg, #4d0d0a 0%, #ac2d1f 54%, #f6d47a 100%); }
.bg-chip.dragon { background: linear-gradient(135deg, #05070d 0%, #083659 56%, #d9ad3a 100%); }

.tile-chip {
  width: 34px;
  height: 42px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: "KaiTi", "STKaiti", "PingFang SC", serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 5px 0 rgba(69, 38, 13, 0.52), 0 9px 12px rgba(0, 0, 0, 0.22);
}

.tile-chip.classic { background: linear-gradient(180deg, #fffdf2, #d09a4a); color: #9d1717; }
.tile-chip.jade { background: linear-gradient(180deg, #f2fff5, #74c593 58%, #217750); color: #0b704e; }
.tile-chip.amber { background: linear-gradient(180deg, #fff7c9, #e1aa35 58%, #8d5417); color: #8b1e1e; }
.tile-chip.blackgold { background: linear-gradient(180deg, #242321, #0b0a09 58%, #574019); color: #ffe29a; border: 1px solid rgba(246, 195, 68, 0.7); }
.tile-chip.inkwash { background: linear-gradient(180deg, #f7f3df, #9ba295 58%, #2d302d); color: #161616; border: 1px solid rgba(35, 38, 33, 0.5); }
.tile-chip.redgold { background: linear-gradient(180deg, #ffe6a1, #d33124 58%, #65120f); color: #fff1b5; border: 1px solid rgba(255, 218, 103, 0.75); }

.toast {
  position: absolute;
  left: 50%;
  bottom: max(112px, calc(env(safe-area-inset-bottom) + 112px));
  z-index: 12;
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  min-height: 40px;
  max-width: min(420px, 88vw);
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(33, 11, 8, 0.92);
  border: 1px solid var(--line);
  padding: 0 16px;
  color: var(--cream);
  font-weight: 800;
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

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

.leaderboard-panel {
  color: var(--cream);
}

.player-name-group {
  display: grid;
  gap: 8px;
}

.player-name-group label {
  color: var(--gold-bright);
  font-weight: 900;
}

.player-name-input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 226, 154, 0.42);
  border-radius: 10px;
  background: rgba(15, 7, 5, 0.5);
  color: var(--cream);
  padding: 0 14px;
  font: inherit;
  font-weight: 900;
  outline: none;
}

.player-name-input:focus {
  border-color: rgba(255, 226, 154, 0.95);
  box-shadow: 0 0 0 3px rgba(246, 195, 68, 0.18);
}

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

.leaderboard-empty {
  margin: 6px 0;
  color: rgba(255, 248, 231, 0.76);
  text-align: center;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "rank name score"
    "rank meta meta";
  align-items: center;
  gap: 2px 10px;
  min-height: 58px;
  border: 1px solid rgba(255, 226, 154, 0.22);
  border-radius: 10px;
  background: rgba(24, 10, 6, 0.42);
  padding: 8px 10px;
}

.leaderboard-row strong {
  grid-area: rank;
  color: var(--gold-bright);
  font-size: 13px;
}

.leaderboard-row span {
  grid-area: name;
  font-weight: 950;
}

.leaderboard-row b {
  grid-area: score;
  color: #fff;
}

.leaderboard-row small {
  grid-area: meta;
  color: rgba(255, 248, 231, 0.68);
  font-weight: 800;
}

@media (max-width: 420px) {
  .screen {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .wallet,
  .energy,
  .meter,
  .game-stats span {
    padding: 0 9px;
  }

  .tool-btn {
    min-height: 54px;
  }
}

/* 2026 mobile game UI polish */
:root {
  --red: #8B1E1E;
  --red-dark: #3A0E0B;
  --gold: #F6C344;
  --gold-bright: #FFE29A;
  --cream: #FFF8E7;
  --ink: #3A2414;
  --panel: rgba(76, 20, 14, 0.78);
  --line: rgba(246, 195, 68, 0.42);
}

body {
  font-family: "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.wallet strong,
.energy strong,
.meter strong,
.game-stats strong,
.level-node span {
  font-family: "DIN Alternate", "DIN Condensed", Arial, sans-serif;
}

.app {
  background:
    linear-gradient(180deg, rgba(58, 36, 20, 0.18), rgba(58, 36, 20, 0.42)),
    radial-gradient(circle at 50% 16%, rgba(246, 195, 68, 0.38), transparent 28%),
    radial-gradient(circle at 12% 80%, rgba(36, 111, 74, 0.4), transparent 28%),
    linear-gradient(160deg, #245d42 0%, #5c7d37 46%, #361a10 100%);
}

.app.bamboo-mode {
  --panel: rgba(20, 70, 46, 0.76);
  --line: rgba(255, 226, 154, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 248, 224, 0.14) 0%, rgba(115, 151, 82, 0.04) 38%, rgba(12, 26, 22, 0.46) 100%),
    radial-gradient(ellipse at 58% 10%, rgba(255, 226, 154, 0.72) 0 9%, rgba(255, 226, 154, 0.26) 10% 25%, transparent 42%),
    url("assets/backgrounds/watermargin-tiger.jpg"),
    linear-gradient(140deg, #d9e6b7 0%, #80a85d 31%, #2a744e 70%, #13422f 100%);
  background-position: center;
  background-size: cover;
}

.app.tea-mode {
  --panel: rgba(74, 42, 20, 0.78);
  --line: rgba(255, 204, 112, 0.46);
  background:
    radial-gradient(circle at 55% 12%, rgba(255, 210, 121, 0.34), transparent 30%),
    linear-gradient(180deg, rgba(255, 214, 141, 0.1), rgba(22, 14, 10, 0.52)),
    url("assets/backgrounds/watermargin-heroes-hall.jpg"),
    linear-gradient(150deg, #8a5427 0%, #5b331a 48%, #24120c 100%);
  background-position: center;
  background-size: cover;
}

.app.town-mode {
  --panel: rgba(22, 54, 83, 0.78);
  --line: rgba(255, 217, 138, 0.48);
  background:
    radial-gradient(circle at 50% 4%, rgba(255, 217, 138, 0.16), transparent 22%),
    linear-gradient(180deg, rgba(10, 23, 42, 0.12), rgba(3, 12, 25, 0.52)),
    url("assets/backgrounds/watermargin-scholar-river.jpg"),
    radial-gradient(circle at 78% 70%, rgba(245, 189, 82, 0.24), transparent 24%),
    linear-gradient(180deg, #102344 0%, #183b61 48%, #06172c 100%);
  background-position: center;
  background-size: cover;
}

.app.palace-mode {
  --panel: rgba(98, 21, 15, 0.8);
  --line: rgba(255, 221, 137, 0.52);
  background:
    radial-gradient(circle at 52% 12%, rgba(255, 226, 154, 0.36), transparent 28%),
    linear-gradient(180deg, rgba(88, 11, 8, 0.08), rgba(34, 8, 5, 0.5)),
    url("assets/backgrounds/watermargin-willow.jpg"),
    linear-gradient(160deg, #a72419 0%, #6c1610 46%, #2d0c08 100%);
  background-position: center;
  background-size: cover;
}

.app.dragon-mode {
  --panel: rgba(6, 25, 46, 0.84);
  --line: rgba(246, 195, 68, 0.5);
  background:
    radial-gradient(circle at 50% 16%, rgba(246, 195, 68, 0.26), transparent 26%),
    linear-gradient(180deg, rgba(2, 8, 18, 0.12), rgba(1, 5, 10, 0.58)),
    url("assets/backgrounds/watermargin-snow-temple.jpg"),
    radial-gradient(circle at 18% 74%, rgba(28, 83, 140, 0.54), transparent 32%),
    linear-gradient(150deg, #05070d 0%, #08203a 44%, #030407 100%);
  background-position: center;
  background-size: cover;
}

.app.boss-mode:not(.custom-bg) {
  background:
    radial-gradient(circle at 50% 18%, rgba(246, 195, 68, 0.34), transparent 26%),
    linear-gradient(130deg, rgba(16, 12, 10, 0.2), rgba(0, 0, 0, 0.58)),
    radial-gradient(circle at 16% 72%, rgba(28, 83, 140, 0.42), transparent 28%),
    linear-gradient(180deg, #101620, #050405 70%);
}

.app:not(.bamboo-mode) .sun-glow,
.app:not(.bamboo-mode) .sunbeam,
.app:not(.bamboo-mode) .bamboo-grove,
.app:not(.bamboo-mode) .morning-mist,
.app:not(.bamboo-mode) .creek,
.app:not(.bamboo-mode) .ripple,
.app:not(.bamboo-mode) .bamboo-flow,
.app:not(.bamboo-mode) .bird,
.app:not(.bamboo-mode) .leaf {
  display: none;
}

.app:not(.bamboo-mode) .board-water-flow {
  display: none;
}

.theme-fx {
  display: none;
}

.app.tea-mode .tea-fx,
.app.town-mode .town-fx,
.app.palace-mode .palace-fx,
.app.dragon-mode .dragon-fx {
  display: block;
}

.ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient span {
  position: absolute;
}

.sun-glow {
  left: 47%;
  top: -4%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 244, 180, 0.86) 0 13%, rgba(255, 218, 117, 0.32) 14% 36%, transparent 60%);
  filter: blur(0.4px);
  animation: sunPulse 6s ease-in-out infinite;
}

.sunbeam {
  top: -10%;
  width: 24%;
  height: 88%;
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(255, 232, 151, 0.32), rgba(255, 232, 151, 0.04) 72%, transparent);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: sunbeamDrift 8s ease-in-out infinite;
}

.sunbeam-a { left: 35%; transform: rotate(16deg); }
.sunbeam-b { left: 55%; transform: rotate(28deg); animation-delay: -3.4s; opacity: 0.72; }

.bamboo-grove {
  bottom: 4%;
  width: 42%;
  height: 105%;
  background:
    radial-gradient(ellipse at 20% 18%, rgba(70, 155, 84, 0.38) 0 10%, transparent 34%),
    radial-gradient(ellipse at 68% 30%, rgba(46, 128, 68, 0.34) 0 12%, transparent 38%),
    radial-gradient(ellipse at 42% 62%, rgba(22, 87, 54, 0.34) 0 14%, transparent 42%),
    linear-gradient(180deg, rgba(16, 82, 44, 0.18), rgba(8, 50, 35, 0.3));
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), #000 18%, #000 88%, transparent);
  filter: drop-shadow(0 14px 22px rgba(11, 48, 35, 0.2));
  animation: bambooSway 7.5s ease-in-out infinite;
}

.bamboo-grove::before,
.bamboo-grove::after {
  content: "";
  position: absolute;
  inset: 8% 0 0;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(63, 142, 77, 0.42) 0 8%, transparent 9%),
    radial-gradient(ellipse at 68% 30%, rgba(63, 142, 77, 0.36) 0 9%, transparent 10%),
    radial-gradient(ellipse at 42% 54%, rgba(37, 111, 62, 0.36) 0 8%, transparent 9%);
  filter: blur(0.2px);
}

.grove-left { left: -10%; transform: skewX(-5deg); }
.grove-right { right: -8%; transform: scaleX(-1) skewX(-6deg); animation-delay: -2.8s; }

.morning-mist,
.cloud {
  width: 70%;
  height: 18%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 18% 50%, rgba(255, 255, 238, 0.32) 0 25%, transparent 58%),
    radial-gradient(ellipse at 52% 44%, rgba(255, 255, 238, 0.24) 0 28%, transparent 62%),
    radial-gradient(ellipse at 84% 56%, rgba(255, 255, 238, 0.2) 0 24%, transparent 60%);
  filter: blur(8px);
  opacity: 0.72;
  animation: mistDrift 14s ease-in-out infinite;
}

.mist-a { left: -18%; top: 31%; }
.mist-b { right: -26%; top: 54%; transform: scale(1.18); animation-delay: -7s; }
.cloud-a { left: 3%; top: 22%; transform: scale(0.72); animation-delay: -3.2s; }
.cloud-b { right: -12%; top: 66%; transform: scale(0.9); animation-delay: -10s; }

.creek {
  left: -8%;
  right: -10%;
  bottom: -4%;
  height: 24%;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 46% 26%, rgba(255, 248, 231, 0.2), transparent 46%),
    radial-gradient(ellipse at 18% 68%, rgba(130, 224, 190, 0.18), transparent 42%),
    radial-gradient(ellipse at 80% 56%, rgba(255, 232, 151, 0.12), transparent 46%),
    linear-gradient(115deg, rgba(106, 184, 159, 0.78), rgba(34, 117, 95, 0.86) 52%, rgba(20, 72, 67, 0.96));
  background-size: 100% 100%;
  box-shadow: inset 0 18px 26px rgba(255, 248, 231, 0.18), 0 -16px 28px rgba(13, 74, 55, 0.18);
  overflow: hidden;
  animation: creekFlow 5s linear infinite;
}

.creek::before,
.creek::after {
  content: "";
  position: absolute;
  left: -45%;
  width: 58%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 231, 0.72), rgba(130, 224, 190, 0.4), transparent);
  filter: blur(0.2px);
  opacity: 0;
  animation: creekRibbon 5.2s linear infinite;
}

.creek::before { top: 42%; }
.creek::after { top: 67%; animation-delay: -2.6s; animation-duration: 6.4s; }

.ripple {
  bottom: 9%;
  width: 92px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 232, 151, 0.34);
  border-left-color: transparent;
  border-right-color: transparent;
  animation: rippleFlow 4.2s ease-in-out infinite;
}

.ripple-a { left: 12%; }
.ripple-b { left: 46%; bottom: 13%; animation-delay: -1.4s; }
.ripple-c { right: 8%; bottom: 7%; animation-delay: -2.6s; }

.bamboo-flow {
  bottom: 8%;
  left: -24%;
  width: 38%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 231, 0.78), rgba(113, 217, 182, 0.36), transparent);
  box-shadow: 0 0 16px rgba(255, 232, 151, 0.32);
  opacity: 0;
  mix-blend-mode: screen;
  animation: creekRibbon 4.8s linear infinite;
}

.flow-a { bottom: 8%; animation-delay: -0.8s; }
.flow-b { bottom: 13%; width: 32%; animation-delay: -2.4s; animation-duration: 5.8s; }
.flow-c { bottom: 18%; width: 46%; animation-delay: -4s; animation-duration: 6.8s; }

.bird {
  width: 42px;
  height: 18px;
  top: 18%;
  left: -16%;
  animation: birdFly 14s linear infinite;
}

.bird::before,
.bird::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 22px;
  height: 10px;
  border-top: 3px solid rgba(52, 45, 30, 0.78);
  border-radius: 50%;
}

.bird::before {
  left: 2px;
  transform: rotate(18deg);
}

.bird::after {
  right: 2px;
  transform: rotate(-18deg);
}

.bird-b { top: 28%; animation-delay: -6.2s; transform: scale(0.72); opacity: 0.72; }

.leaf {
  top: -8%;
  width: 16px;
  height: 30px;
  border-radius: 100% 0 100% 0;
  background:
    linear-gradient(135deg, rgba(255, 232, 151, 0.35), transparent 38%),
    linear-gradient(180deg, #77b958, #2d7d45);
  box-shadow: inset -3px -4px 0 rgba(16, 82, 44, 0.22);
  animation: leafFall 9s linear infinite;
}

.leaf::after {
  content: "";
  position: absolute;
  left: 47%;
  top: 10%;
  width: 1px;
  height: 80%;
  background: rgba(255, 248, 231, 0.34);
  transform: rotate(18deg);
}

.leaf-a { left: 18%; animation-delay: -1s; }
.leaf-b { left: 54%; animation-delay: -3.8s; animation-duration: 11s; }
.leaf-c { left: 78%; animation-delay: -6.4s; animation-duration: 10s; }
.leaf-d { left: 36%; animation-delay: -7.8s; animation-duration: 12.5s; }
.leaf-e,
.leaf-f,
.leaf-g {
  animation-name: leafFloatAcross;
}

.leaf-e { left: -8%; top: 18%; animation-delay: -2.2s; animation-duration: 10.8s; transform: scale(0.9); }
.leaf-f { left: -12%; top: 42%; animation-delay: -5.6s; animation-duration: 13.2s; transform: scale(0.7); }
.leaf-g { left: -10%; top: 68%; animation-delay: -8.4s; animation-duration: 12s; transform: scale(1.05); }

.spark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px rgba(246, 195, 68, 0.78);
  animation: sparkFloat 5.8s ease-in-out infinite;
}

.spark-a { left: 18%; top: 34%; }
.spark-b { left: 74%; top: 46%; animation-delay: -1.9s; }
.spark-c { left: 52%; top: 78%; animation-delay: -3.1s; }

.bubble {
  bottom: -42px;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(255, 248, 231, 0.5);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.86) 0 12%, transparent 16%),
    radial-gradient(circle, rgba(137, 219, 230, 0.2), transparent 68%);
  box-shadow: 0 0 13px rgba(121, 219, 232, 0.32);
  opacity: 0.38;
  mix-blend-mode: screen;
  animation: bubbleFloat 11s ease-in-out infinite;
}

.bubble-a { left: 9%; width: 8px; height: 8px; animation-delay: -2.2s; }
.bubble-b { left: 27%; animation-delay: -7.1s; animation-duration: 12.8s; }
.bubble-c { left: 58%; width: 9px; height: 9px; animation-delay: -4.4s; animation-duration: 10.2s; }
.bubble-d { right: 18%; width: 15px; height: 15px; animation-delay: -8.6s; animation-duration: 13.6s; }
.bubble-e { right: 7%; width: 7px; height: 7px; animation-delay: -5.8s; animation-duration: 9.4s; }

.app.town-mode .bubble,
.app.dragon-mode .bubble,
.app.boss-mode .bubble {
  opacity: 0.72;
}

.app.tea-mode .bubble,
.app.palace-mode .bubble {
  opacity: 0.3;
}

.tea-house {
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 42%;
  border-radius: 18px 18px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 214, 134, 0.12), transparent 22%),
    radial-gradient(ellipse at 22% 38%, rgba(255, 204, 112, 0.14), transparent 38%),
    radial-gradient(ellipse at 78% 56%, rgba(255, 248, 231, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(113, 63, 27, 0.78), rgba(42, 20, 12, 0.92));
  box-shadow: inset 0 16px 0 rgba(255, 209, 112, 0.12), 0 -18px 50px rgba(255, 185, 86, 0.14);
  transition: filter 220ms ease, box-shadow 220ms ease;
}

.tea-house::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: -38px;
  height: 56px;
  border-radius: 50% 50% 14px 14px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 203, 108, 0.2), transparent 54%),
    linear-gradient(180deg, #7b3618, #36160d);
  box-shadow: 0 12px 24px rgba(38, 16, 10, 0.32);
}

.tea-steam {
  bottom: 24%;
  width: 86px;
  height: 130px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(255, 248, 231, 0.5), transparent 42%),
    radial-gradient(ellipse at 50% 68%, rgba(255, 226, 154, 0.2), transparent 60%);
  filter: blur(10px);
  animation: teaSteamRise 6.2s ease-in-out infinite;
}

.steam-a { left: 16%; }
.steam-b { left: 47%; animation-delay: -2s; }
.steam-c { right: 13%; animation-delay: -4.2s; }

.tea-lantern {
  top: 96px;
  width: 42px;
  height: 58px;
  border-radius: 22px 22px 18px 18px;
  background:
    linear-gradient(90deg, transparent 12%, rgba(255, 239, 179, 0.28) 48%, transparent 88%),
    linear-gradient(180deg, #f35233, #8c1f19);
  box-shadow: 0 0 30px rgba(255, 189, 94, 0.46);
  transform-origin: 50% -34px;
  will-change: transform;
  transition: filter 180ms ease, box-shadow 180ms ease, background 180ms ease;
  animation: lanternWindSwing 4.8s ease-in-out infinite;
}

.tea-lantern::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -34px;
  width: 1px;
  height: 36px;
  background: rgba(255, 226, 154, 0.72);
  transform-origin: 50% 100%;
  animation: lanternRopeSway 4.8s ease-in-out infinite;
}

.tea-lantern::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -24px;
  width: 16px;
  height: 28px;
  border-radius: 0 0 999px 999px;
  background:
    linear-gradient(90deg, transparent 0 30%, rgba(255, 211, 118, 0.86) 31% 38%, transparent 39% 45%, rgba(255, 211, 118, 0.74) 46% 54%, transparent 55% 61%, rgba(255, 211, 118, 0.82) 62% 70%, transparent 71% 100%),
    linear-gradient(180deg, rgba(246, 195, 68, 0.9), rgba(159, 43, 26, 0));
  transform: translateX(-50%);
  transform-origin: 50% 0;
  filter: drop-shadow(0 4px 6px rgba(88, 24, 12, 0.28));
  animation: lanternTasselSway 3.6s ease-in-out infinite;
}

.tea-lantern-a { left: 26px; animation-duration: 4.4s; }
.tea-lantern-b { right: 28px; animation-delay: -1.8s; animation-duration: 5.2s; }
.tea-lantern-b::before { animation-delay: -1.8s; animation-duration: 5.2s; }
.tea-lantern-b::after { animation-delay: -0.9s; animation-duration: 3.9s; }

.app.tea-mode.lantern-glow .tea-house {
  filter: brightness(1.14) saturate(1.08);
  box-shadow:
    inset 0 16px 0 rgba(255, 230, 154, 0.22),
    0 -18px 50px rgba(255, 185, 86, 0.22),
    0 0 80px rgba(255, 198, 94, 0.22);
}

.app.tea-mode.lantern-glow .tea-lantern {
  background:
    linear-gradient(90deg, transparent 10%, rgba(255, 255, 216, 0.58) 48%, transparent 90%),
    radial-gradient(ellipse at 50% 36%, rgba(255, 247, 177, 0.88) 0 24%, rgba(255, 166, 70, 0.74) 25% 58%, transparent 68%),
    linear-gradient(180deg, #ff7a39, #a41f19);
  filter: brightness(1.42) saturate(1.32);
  box-shadow:
    0 0 24px rgba(255, 249, 191, 0.9),
    0 0 54px rgba(255, 188, 78, 0.74),
    0 0 92px rgba(255, 126, 56, 0.38);
}

.app.tea-mode.lantern-glow .tea-lantern::before {
  background: rgba(255, 241, 178, 0.95);
  box-shadow: 0 0 10px rgba(255, 223, 139, 0.84);
}

.app.tea-mode.lantern-glow .tea-lantern::after {
  filter: drop-shadow(0 4px 8px rgba(255, 203, 92, 0.55)) brightness(1.2);
}

.passerby {
  bottom: 8%;
  width: 22px;
  height: 58px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, rgba(27, 18, 13, 0.9), rgba(8, 6, 5, 0.76));
  filter: blur(0.4px);
  opacity: 0.58;
  animation: passerbyWalk 12s linear infinite;
}

.passerby::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(16, 12, 9, 0.82);
}

.passerby-a { left: -12%; }
.passerby-b { left: -22%; animation-delay: -5.5s; transform: scale(0.82); }

.old-town {
  left: 0;
  right: 0;
  top: 10%;
  height: 34%;
  background:
    linear-gradient(140deg, transparent 0 16%, rgba(255, 217, 138, 0.12) 17% 18%, transparent 19% 100%),
    radial-gradient(ellipse at 50% 44%, rgba(255, 217, 138, 0.1), transparent 52%);
  opacity: 0.82;
}

.old-town::before,
.old-town::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 44%;
  height: 74%;
  background:
    linear-gradient(135deg, transparent 0 18%, rgba(10, 20, 33, 0.9) 19% 100%),
    linear-gradient(180deg, rgba(18, 37, 58, 0.94), rgba(7, 16, 28, 0.94));
}

.old-town::before { left: 4%; }
.old-town::after { right: 3%; transform: scaleX(-1); }

.river-lamp {
  bottom: 12%;
  width: 38px;
  height: 22px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 34%, #fff7bd 0 16%, #f1a33f 18% 54%, #7e3216 56% 100%);
  box-shadow: 0 0 22px rgba(255, 190, 84, 0.78);
  animation: riverLampDrift 12s linear infinite;
}

.river-lamp-a { left: -12%; }
.river-lamp-b { left: -24%; bottom: 19%; animation-delay: -4s; transform: scale(0.72); }
.river-lamp-c { left: -18%; bottom: 7%; animation-delay: -8s; transform: scale(0.86); }

.firework {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 211, 0.95) 0 4%, transparent 5% 14%, rgba(255, 122, 90, 0.58) 15% 17%, transparent 18% 100%);
  filter: drop-shadow(0 0 18px rgba(255, 212, 117, 0.58));
  animation: fireworkPulse 3.8s ease-out infinite;
}

.firework-a { left: 14%; top: 13%; }
.firework-b { right: 12%; top: 21%; animation-delay: -1.9s; transform: scale(0.72); }

.light-reflection {
  bottom: 0;
  width: 28%;
  height: 32%;
  border-radius: 50%;
  background: repeating-linear-gradient(180deg, rgba(255, 217, 138, 0.18) 0 4px, transparent 4px 12px);
  filter: blur(2px);
  animation: lanternReflection 4.4s ease-in-out infinite;
}

.reflection-a { left: 12%; }
.reflection-b { right: 16%; animation-delay: -2.1s; }

.palace-gate {
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 43%;
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 226, 154, 0.32), transparent 32%),
    radial-gradient(ellipse at 30% 45%, rgba(255, 226, 154, 0.16), transparent 42%),
    radial-gradient(ellipse at 72% 56%, rgba(255, 248, 231, 0.08), transparent 46%),
    linear-gradient(180deg, #9d1f17, #4a0d09);
  box-shadow: inset 0 14px 0 rgba(255, 226, 154, 0.14), 0 -20px 42px rgba(255, 194, 82, 0.16);
}

.palace-gate::before {
  content: "";
  position: absolute;
  left: -7%;
  right: -7%;
  top: -44px;
  height: 62px;
  border-radius: 50% 50% 12px 12px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 226, 154, 0.28), transparent 58%),
    linear-gradient(180deg, #f4bf48, #82180f);
}

.palace-flag {
  top: 96px;
  width: 74px;
  height: 48px;
  background: linear-gradient(90deg, #f6c344, #b01e16 26%, #e14124 100%);
  clip-path: polygon(0 0, 100% 10%, 86% 50%, 100% 90%, 0 100%);
  transform-origin: left center;
  animation: flagWave 3.2s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(44, 9, 6, 0.3));
}

.palace-flag::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -18px;
  width: 4px;
  height: 128px;
  background: linear-gradient(180deg, #ffe29a, #8b4a18);
}

.flag-a { left: 28px; }
.flag-b { right: 28px; transform: scaleX(-1); animation-delay: -1.3s; }

.palace-cloud {
  width: 190px;
  height: 68px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 24% 50%, rgba(255, 226, 154, 0.3) 0 28%, transparent 30%),
    radial-gradient(circle at 50% 38%, rgba(255, 226, 154, 0.24) 0 34%, transparent 36%),
    radial-gradient(circle at 74% 55%, rgba(255, 226, 154, 0.22) 0 30%, transparent 32%);
  filter: blur(0.2px);
  animation: palaceCloudDrift 10s ease-in-out infinite;
}

.palace-cloud-a { left: 6%; top: 22%; }
.palace-cloud-b { right: 2%; top: 62%; transform: scale(1.2); animation-delay: -4.4s; }

.gold-dust {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffe29a;
  box-shadow: 0 0 16px rgba(255, 226, 154, 0.82);
  animation: goldDustFloat 5.6s ease-in-out infinite;
}

.gold-dust-a { left: 22%; top: 42%; }
.gold-dust-b { left: 76%; top: 30%; animation-delay: -2.7s; }

.dragon-palace {
  left: 8%;
  right: 8%;
  bottom: 2%;
  height: 38%;
  border-radius: 24px 24px 0 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(246, 195, 68, 0.3), transparent 32%),
    radial-gradient(ellipse at 24% 42%, rgba(47, 125, 190, 0.2), transparent 42%),
    radial-gradient(ellipse at 78% 58%, rgba(246, 195, 68, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(13, 57, 92, 0.84), rgba(3, 10, 18, 0.94));
  box-shadow: inset 0 18px 0 rgba(246, 195, 68, 0.1), 0 -18px 46px rgba(17, 86, 145, 0.2);
}

.gold-dragon {
  left: 4%;
  top: 18%;
  width: 86%;
  height: 118px;
  border-radius: 999px;
  border-top: 16px solid rgba(246, 195, 68, 0.86);
  border-right: 10px solid transparent;
  filter: drop-shadow(0 0 20px rgba(246, 195, 68, 0.36));
  animation: dragonSwim 8.5s ease-in-out infinite;
}

.gold-dragon::before {
  content: "";
  position: absolute;
  right: 2%;
  top: -28px;
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 68% 38%, #fff8d6 0 8%, transparent 9%),
    linear-gradient(135deg, #ffe29a, #b87a1f);
  box-shadow: 0 0 18px rgba(246, 195, 68, 0.62);
}

.sea-wave {
  left: -20%;
  right: -20%;
  bottom: -2%;
  height: 22%;
  border-radius: 50% 50% 0 0;
  background:
    repeating-linear-gradient(170deg, transparent 0 24px, rgba(246, 195, 68, 0.18) 25px 28px, transparent 29px 56px),
    linear-gradient(180deg, rgba(26, 94, 151, 0.66), rgba(3, 17, 34, 0.9));
  animation: waveRoll 4.2s linear infinite;
}

.wave-b { bottom: 8%; opacity: 0.44; animation-delay: -2s; }

.lightning {
  top: 8%;
  width: 88px;
  height: 180px;
  background: linear-gradient(180deg, rgba(255, 245, 188, 0.9), rgba(246, 195, 68, 0.05));
  clip-path: polygon(44% 0, 68% 0, 54% 34%, 78% 34%, 34% 100%, 46% 52%, 22% 52%);
  filter: drop-shadow(0 0 16px rgba(255, 245, 188, 0.9));
  opacity: 0;
  animation: lightningFlash 5.6s steps(1, end) infinite;
}

.lightning-a { right: 8%; }
.lightning-b { left: 13%; animation-delay: -2.8s; transform: scale(0.72); }

@keyframes teaSteamRise {
  0%, 100% { opacity: 0.24; transform: translateY(16px) scale(0.82); }
  45% { opacity: 0.76; transform: translateY(-26px) scale(1.12); }
}

@keyframes lanternSwing {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(5px); }
}

@keyframes lanternWindSwing {
  0%, 100% { transform: rotate(-5deg) translateX(-1px) translateY(0); }
  18% { transform: rotate(4deg) translateX(2px) translateY(2px); }
  34% { transform: rotate(-8deg) translateX(-4px) translateY(1px); }
  52% { transform: rotate(7deg) translateX(4px) translateY(4px); }
  72% { transform: rotate(-3deg) translateX(-1px) translateY(2px); }
  86% { transform: rotate(2deg) translateX(1px) translateY(1px); }
}

@keyframes lanternRopeSway {
  0%, 100% { transform: rotate(2deg); opacity: 0.72; }
  34% { transform: rotate(-4deg); opacity: 0.92; }
  52% { transform: rotate(5deg); opacity: 0.82; }
  72% { transform: rotate(-2deg); opacity: 0.9; }
}

@keyframes lanternTasselSway {
  0%, 100% { transform: translateX(-50%) rotate(6deg); }
  28% { transform: translateX(-50%) rotate(-9deg); }
  58% { transform: translateX(-50%) rotate(11deg); }
  82% { transform: translateX(-50%) rotate(-4deg); }
}

@keyframes passerbyWalk {
  0% { transform: translateX(0) scale(0.82); opacity: 0; }
  10%, 82% { opacity: 0.6; }
  100% { transform: translateX(128vw) scale(0.82); opacity: 0; }
}

@keyframes riverLampDrift {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  12%, 84% { opacity: 0.95; }
  50% { transform: translateX(58vw) translateY(-18px); }
  100% { transform: translateX(126vw) translateY(8px); opacity: 0; }
}

@keyframes fireworkPulse {
  0% { opacity: 0; transform: scale(0.18); }
  16% { opacity: 1; transform: scale(0.72); }
  54% { opacity: 0.7; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes lanternReflection {
  0%, 100% { opacity: 0.32; transform: translateY(0) scaleX(0.86); }
  50% { opacity: 0.82; transform: translateY(12px) scaleX(1.16); }
}

@keyframes flagWave {
  0%, 100% { transform: skewY(-4deg) rotate(-1deg); }
  50% { transform: skewY(5deg) rotate(2deg); }
}

@keyframes palaceCloudDrift {
  0%, 100% { opacity: 0.52; translate: 0 0; }
  50% { opacity: 0.9; translate: 26px -6px; }
}

@keyframes goldDustFloat {
  0%, 100% { opacity: 0.28; transform: translateY(0) scale(0.72); }
  50% { opacity: 1; transform: translateY(-34px) scale(1.22); }
}

@keyframes dragonSwim {
  0%, 100% { transform: translateX(-10px) translateY(0) rotate(-2deg); }
  50% { transform: translateX(18px) translateY(16px) rotate(2deg); }
}

@keyframes waveRoll {
  to { background-position: 160px 0, 0 0; }
}

@keyframes lightningFlash {
  0%, 78%, 100% { opacity: 0; }
  80% { opacity: 1; }
  82% { opacity: 0.12; }
  84% { opacity: 0.88; }
  87% { opacity: 0; }
}

@keyframes steamRing {
  0%, 100% { opacity: 0.12; transform: translateY(12px) scale(0.58); }
  50% { opacity: 0.64; transform: translateY(-16px) scale(1.22); }
}

@keyframes lanternDrift {
  0% { transform: translateX(-12px) translateY(0) scale(0.8); opacity: 0; }
  12%, 82% { opacity: 0.95; }
  50% { transform: translateX(40px) translateY(-15px) scale(1); }
  100% { transform: translateX(92px) translateY(8px) scale(0.72); opacity: 0; }
}

@keyframes bubbleRise {
  0% { opacity: 0; transform: translateY(34px) scale(0.5); }
  20%, 78% { opacity: 0.75; }
  100% { opacity: 0; transform: translateY(-86px) scale(1.24); }
}

@keyframes bubbleFloat {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.58); }
  12% { opacity: 0.5; }
  54% { transform: translate3d(18px, -48vh, 0) scale(0.95); }
  86% { opacity: 0.46; }
  100% { opacity: 0; transform: translate3d(-10px, -98vh, 0) scale(1.18); }
}

@keyframes boardBubbleRise {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.62); }
  18%, 76% { opacity: 0.58; }
  50% { transform: translate3d(10px, -46px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-6px, -112px, 0) scale(1.2); }
}

@keyframes sunPulse {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes sunbeamDrift {
  0%, 100% { opacity: 0.52; filter: blur(1px); }
  50% { opacity: 0.86; filter: blur(1.8px); }
}

@keyframes bambooSway {
  0%, 100% { translate: 0 0; }
  50% { translate: 8px 0; }
}

@keyframes mistDrift {
  0%, 100% { opacity: 0.5; translate: 0 0; }
  50% { opacity: 0.82; translate: 34px 5px; }
}

@keyframes creekFlow {
  to { background-position: 150px 0, 0 0, 0 0; }
}

@keyframes creekRibbon {
  0% { opacity: 0; transform: translateX(0) scaleX(0.72); }
  14% { opacity: 0.72; }
  64% { opacity: 0.58; }
  100% { opacity: 0; transform: translateX(180vw) scaleX(1.1); }
}

@keyframes rippleFlow {
  0%, 100% { opacity: 0.16; transform: translateX(0) scale(0.84); }
  50% { opacity: 0.7; transform: translateX(20px) scale(1.18); }
}

@keyframes birdFly {
  0% { transform: translateX(0) translateY(0) scale(0.86); opacity: 0; }
  8% { opacity: 0.75; }
  52% { transform: translateX(68vw) translateY(-28px) scale(0.9); opacity: 0.85; }
  100% { transform: translateX(126vw) translateY(8px) scale(0.72); opacity: 0; }
}

@keyframes leafFall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.9; }
  48% { transform: translate3d(34px, 52vh, 0) rotate(126deg); }
  100% { transform: translate3d(-28px, 110vh, 0) rotate(278deg); opacity: 0; }
}

@keyframes leafFloatAcross {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-18deg) scale(0.72); }
  10% { opacity: 0.9; }
  42% { transform: translate3d(44vw, 18vh, 0) rotate(112deg) scale(1); }
  74% { opacity: 0.84; }
  100% { opacity: 0; transform: translate3d(112vw, 36vh, 0) rotate(246deg) scale(0.78); }
}

@keyframes sparkFloat {
  0%, 100% { opacity: 0.25; transform: translateY(0) scale(0.8); }
  50% { opacity: 1; transform: translateY(-22px) scale(1.2); }
}

.top-strip,
.page-header,
.game-top,
.game-stats {
  width: min(560px, 100%);
}

.wallet,
.energy,
.meter,
.game-stats span {
  min-height: 46px;
  border: 1px solid rgba(246, 195, 68, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.12), rgba(75, 20, 14, 0.72)),
    rgba(58, 36, 20, 0.62);
}

.app.bamboo-mode .wallet,
.app.bamboo-mode .energy,
.app.bamboo-mode .meter,
.app.bamboo-mode .game-stats span {
  border-color: rgba(255, 226, 154, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.18), rgba(18, 78, 52, 0.62)),
    rgba(13, 70, 47, 0.54);
}

.app.tea-mode .wallet,
.app.tea-mode .energy,
.app.tea-mode .meter,
.app.tea-mode .game-stats span {
  border-color: rgba(255, 202, 116, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 239, 197, 0.16), rgba(88, 45, 19, 0.68)),
    rgba(82, 45, 21, 0.58);
}

.app.town-mode .wallet,
.app.town-mode .energy,
.app.town-mode .meter,
.app.town-mode .game-stats span {
  border-color: rgba(255, 217, 138, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 217, 138, 0.13), rgba(16, 52, 86, 0.72)),
    rgba(11, 38, 67, 0.62);
}

.app.palace-mode .wallet,
.app.palace-mode .energy,
.app.palace-mode .meter,
.app.palace-mode .game-stats span {
  border-color: rgba(255, 226, 154, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 226, 154, 0.18), rgba(114, 22, 15, 0.74)),
    rgba(86, 16, 12, 0.62);
}

.app.dragon-mode .wallet,
.app.dragon-mode .energy,
.app.dragon-mode .meter,
.app.dragon-mode .game-stats span {
  border-color: rgba(246, 195, 68, 0.56);
  background:
    linear-gradient(180deg, rgba(246, 195, 68, 0.13), rgba(7, 28, 54, 0.78)),
    rgba(4, 18, 36, 0.68);
}

.coin-icon {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: radial-gradient(circle at 34% 28%, #fff7bc 0 16%, #f6c344 18% 56%, #bd6f20 58% 100%);
  box-shadow: inset 0 -2px 0 rgba(95, 45, 10, 0.32), 0 0 12px rgba(246, 195, 68, 0.36);
  flex: 0 0 auto;
}

.coin-icon::after {
  content: "¥";
  color: #7c3c10;
  font-size: 12px;
  font-weight: 950;
}

.heart-icon {
  color: #ff6a68;
  font-size: 20px;
  text-shadow: 0 0 10px rgba(255, 106, 104, 0.55);
}

.title-block {
  position: relative;
  padding-top: 96px;
}

.logo-orbit {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(260px, 68vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(246, 195, 68, 0.18), transparent 62%),
    conic-gradient(from 20deg, transparent, rgba(246, 195, 68, 0.24), transparent 42%);
  animation: logoRotate 16s linear infinite;
  z-index: -1;
}

.logo-orbit span {
  position: absolute;
  width: 48px;
  height: 60px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff8e7, #e4c070);
  color: #8B1E1E;
  border: 2px solid #f6c344;
  box-shadow: 0 12px 0 #9e6327, 0 16px 22px rgba(0, 0, 0, 0.22);
  font-weight: 950;
}

.logo-orbit span:nth-child(1) { left: calc(50% - 24px); top: 4px; }
.logo-orbit span:nth-child(2) { right: 8px; top: calc(50% - 30px); }
.logo-orbit span:nth-child(3) { left: calc(50% - 24px); bottom: 4px; }
.logo-orbit span:nth-child(4) { left: 8px; top: calc(50% - 30px); }

@keyframes logoRotate {
  to { transform: translateX(-50%) rotate(360deg); }
}

.title-block h1 {
  color: var(--gold-bright);
  -webkit-text-stroke: 1px rgba(77, 28, 10, 0.55);
  text-shadow: 0 4px 0 #6d1a11, 0 10px 0 rgba(58, 36, 20, 0.22), 0 26px 38px rgba(0, 0, 0, 0.46);
}

.menu-actions {
  gap: 10px;
}

.btn {
  min-height: 58px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
}

.btn span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 248, 231, 0.2);
}

.btn b {
  min-width: 0;
  font: inherit;
  font-weight: 950;
  line-height: 1.05;
}

.btn-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 32%),
    linear-gradient(180deg, #FFE29A, #F6C344 54%, #AF641F);
  color: #3A2414;
  border: 1px solid rgba(255, 248, 231, 0.65);
}

.btn-soft {
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.08), rgba(255, 248, 231, 0.02)),
    rgba(67, 19, 14, 0.76);
}

.screen-map {
  background:
    linear-gradient(180deg, rgba(31, 124, 102, 0.16), transparent 30%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.22));
}

.level-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  align-content: start;
  justify-items: center;
  gap: 16px 12px;
  padding: 14px 6px 28px;
}

.level-map::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 38px;
  bottom: 38px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(246, 195, 68, 0.18), rgba(246, 195, 68, 0.02));
  filter: blur(10px);
  pointer-events: none;
}

.level-node {
  isolation: isolate;
  width: min(88px, 100%);
  border: 2px solid rgba(255, 248, 231, 0.65);
  background:
    radial-gradient(circle at 34% 24%, #fff8e7 0 12%, transparent 13%),
    linear-gradient(180deg, #FFE29A, #F6C344 58%, #a75e21);
  color: #3A2414;
}

.level-node::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(58, 36, 20, 0.18);
  z-index: -1;
}

.level-node.crowned::after {
  content: "♛";
  position: absolute;
  top: -14px;
  color: #FFE29A;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  font-size: 22px;
}

.level-node.locked {
  background: linear-gradient(180deg, #b8b8b8, #666);
  color: #eee;
  border-color: rgba(255, 255, 255, 0.24);
}

.level-node.current-level {
  grid-column: 1 / -1;
  width: min(360px, 100%);
  min-height: 112px;
  aspect-ratio: auto;
  border-radius: 22px;
  grid-template-columns: 86px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  place-items: center start;
  padding: 16px 18px;
  text-align: left;
  box-shadow:
    inset 0 8px 18px rgba(255, 255, 255, 0.32),
    0 0 0 4px rgba(246, 195, 68, 0.18),
    0 20px 30px rgba(0, 0, 0, 0.26);
}

.level-node.current-level span {
  grid-row: 1 / 3;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.76), transparent 24%),
    linear-gradient(180deg, #fff5bf, #f6c344 56%, #98601e);
  box-shadow: inset 0 3px 7px rgba(255, 255, 255, 0.42), 0 8px 14px rgba(66, 31, 7, 0.32);
  font-size: 34px;
}

.level-node.current-level strong {
  font-size: 24px;
  line-height: 1;
}

.level-node.current-level small {
  position: static;
  color: rgba(58, 36, 20, 0.76);
  font-size: 13px;
  text-shadow: none;
}

.level-node.medal-complete {
  width: 78px;
  aspect-ratio: 0.88;
  border-radius: 50% 50% 44% 44%;
  background:
    linear-gradient(135deg, transparent 0 57%, rgba(139, 30, 30, 0.82) 58% 70%, transparent 71%),
    linear-gradient(45deg, transparent 0 57%, rgba(139, 30, 30, 0.72) 58% 70%, transparent 71%),
    radial-gradient(circle at 34% 24%, #fff8e7 0 13%, transparent 14%),
    linear-gradient(180deg, #ffeaa6, #f6c344 58%, #9a5f20);
  box-shadow:
    inset 0 8px 14px rgba(255, 255, 255, 0.3),
    0 12px 18px rgba(0, 0, 0, 0.24);
}

.level-node.medal-complete span {
  font-size: 24px;
}

.level-node.theme-bamboo { box-shadow: 0 0 0 3px rgba(68, 151, 88, 0.2), 0 12px 20px rgba(0, 0, 0, 0.22); }
.level-node.theme-tea { box-shadow: 0 0 0 3px rgba(124, 82, 43, 0.22), 0 12px 20px rgba(0, 0, 0, 0.22); }
.level-node.theme-town { box-shadow: 0 0 0 3px rgba(87, 134, 139, 0.22), 0 12px 20px rgba(0, 0, 0, 0.22); }
.level-node.theme-palace { box-shadow: 0 0 0 3px rgba(246, 195, 68, 0.26), 0 12px 20px rgba(0, 0, 0, 0.22); }
.level-node.theme-dragon { box-shadow: 0 0 0 3px rgba(15, 14, 13, 0.55), 0 12px 24px rgba(246, 195, 68, 0.16); }

.level-node.current-level {
  box-shadow:
    inset 0 8px 18px rgba(255, 255, 255, 0.32),
    0 0 0 4px rgba(246, 195, 68, 0.18),
    0 20px 30px rgba(0, 0, 0, 0.26);
}

.level-node.medal-complete {
  box-shadow:
    inset 0 8px 14px rgba(255, 255, 255, 0.3),
    0 12px 18px rgba(0, 0, 0, 0.24);
}

.level-node {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.level-node::before {
  display: none;
}

.level-node small {
  position: static;
  color: rgba(255, 248, 231, 0.78);
  font-size: 11px;
  line-height: 1.1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.34);
}

.level-node .medal-ribbon {
  position: absolute;
  left: 50%;
  top: 50px;
  width: 40px;
  height: 48px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal-ribbon) 86%, white), var(--medal-ribbon));
  clip-path: polygon(0 0, 100% 0, 86% 100%, 50% 78%, 14% 100%);
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.22));
  z-index: 0;
}

.level-node .medal-disc {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--medal-ink);
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.86), transparent 18%),
    radial-gradient(circle at 72% 78%, color-mix(in srgb, var(--medal-glow) 72%, transparent), transparent 33%),
    linear-gradient(145deg, var(--medal-top), var(--medal-mid) 52%, var(--medal-edge));
  border: 2px solid color-mix(in srgb, var(--medal-top) 74%, var(--medal-edge));
  box-shadow:
    inset 0 5px 10px rgba(255, 255, 255, 0.34),
    inset 0 -8px 12px rgba(0, 0, 0, 0.18),
    0 8px 16px rgba(0, 0, 0, 0.28),
    0 0 18px var(--medal-glow);
}

.level-node .medal-disc::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  border: 1px solid rgba(255, 248, 231, 0.54);
  box-shadow: inset 0 0 0 2px rgba(58, 36, 20, 0.08);
}

.level-node .medal-disc::after {
  content: "";
  position: absolute;
  inset: -18%;
  opacity: 0.2;
  background:
    repeating-conic-gradient(from 18deg, transparent 0 8deg, rgba(255, 248, 231, 0.72) 9deg 11deg, transparent 12deg 20deg);
}

.level-node .medal-ring {
  position: absolute;
  inset: 11px;
  border-radius: inherit;
  border: 2px solid rgba(58, 36, 20, 0.16);
}

.level-node .medal-disc b {
  position: relative;
  z-index: 2;
  font-size: 30px;
  line-height: 1;
  font-weight: 950;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34),
    0 4px 7px rgba(0, 0, 0, 0.25);
}

.level-node .medal-disc em {
  position: absolute;
  right: 8px;
  bottom: 7px;
  z-index: 2;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0 2px;
  background: rgba(139, 30, 30, 0.82);
  color: #fff8e7;
  border: 1px solid rgba(255, 248, 231, 0.62);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
}

.level-node strong {
  display: block;
  min-width: 0;
  color: #fff4be;
  font-size: 12px;
  line-height: 1.05;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.38);
}

.level-node .medal-level {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 5px;
  width: auto;
  min-width: 24px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  background: rgba(58, 36, 20, 0.78);
  color: #ffe9a8;
  border: 1px solid rgba(255, 248, 231, 0.36);
  font-size: 11px;
  font-weight: 950;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.level-node[data-medal-shape="petal"] .medal-disc {
  border-radius: 42% 58% 48% 52%;
}

.level-node[data-medal-shape="shield"] .medal-disc {
  border-radius: 48% 48% 56% 56% / 38% 38% 68% 68%;
}

.level-node[data-medal-shape="cloud"] .medal-disc {
  border-radius: 42% 58% 38% 62% / 58% 42% 58% 42%;
}

.level-node[data-medal-shape="jade"] .medal-disc {
  border-radius: 28%;
}

.level-node[data-medal-shape="coin"] .medal-disc::before {
  inset: 10px;
  border-style: double;
}

.level-node[data-medal-shape="seal"] .medal-disc {
  border-radius: 18%;
}

.level-node[data-medal-shape="lotus"] .medal-disc {
  border-radius: 50% 50% 42% 42% / 46% 46% 58% 58%;
}

.level-node[data-medal-shape="lantern"] .medal-disc {
  border-radius: 44% / 56%;
}

.level-node[data-medal-pattern="bamboo"] .medal-disc,
.level-node[data-medal-pattern="sprout"] .medal-disc,
.level-node[data-medal-pattern="willow"] .medal-disc {
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.88), transparent 18%),
    repeating-linear-gradient(115deg, transparent 0 9px, rgba(255, 248, 231, 0.2) 10px 12px),
    linear-gradient(145deg, var(--medal-top), var(--medal-mid) 52%, var(--medal-edge));
}

.level-node[data-medal-pattern="wave"] .medal-disc,
.level-node[data-medal-pattern="droplet"] .medal-disc,
.level-node[data-medal-pattern="bridge"] .medal-disc,
.level-node[data-medal-pattern="boat"] .medal-disc,
.level-node[data-medal-pattern="rain"] .medal-disc {
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.88), transparent 18%),
    repeating-radial-gradient(ellipse at 50% 92%, rgba(255, 248, 231, 0.22) 0 3px, transparent 4px 10px),
    linear-gradient(145deg, var(--medal-top), var(--medal-mid) 52%, var(--medal-edge));
}

.level-node[data-medal-pattern="lantern"] .medal-disc,
.level-node[data-medal-pattern="flame"] .medal-disc,
.level-node[data-medal-pattern="tea"] .medal-disc,
.level-node[data-medal-pattern="steam"] .medal-disc {
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.88), transparent 18%),
    conic-gradient(from 0deg, transparent, rgba(255, 248, 231, 0.2), transparent 22%, rgba(139, 30, 30, 0.12), transparent 52%),
    linear-gradient(145deg, var(--medal-top), var(--medal-mid) 52%, var(--medal-edge));
}

.level-node[data-medal-pattern="gate"] .medal-disc,
.level-node[data-medal-pattern="flag"] .medal-disc,
.level-node[data-medal-pattern="seal"] .medal-disc,
.level-node[data-medal-pattern="sun"] .medal-disc {
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.86), transparent 18%),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(255, 248, 231, 0.16) 11px 13px),
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 248, 231, 0.1) 11px 13px),
    linear-gradient(145deg, var(--medal-top), var(--medal-mid) 52%, var(--medal-edge));
}

.level-node[data-medal-pattern="dragon"] .medal-disc,
.level-node[data-medal-pattern="scale"] .medal-disc,
.level-node[data-medal-pattern="armor"] .medal-disc,
.level-node[data-medal-pattern="thunder"] .medal-disc,
.level-node[data-medal-pattern="pearl"] .medal-disc {
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.72), transparent 18%),
    repeating-conic-gradient(from 12deg, rgba(246, 195, 68, 0.26) 0 8deg, transparent 9deg 18deg),
    linear-gradient(145deg, var(--medal-top), var(--medal-mid) 52%, var(--medal-edge));
}

.level-node.current-level {
  grid-column: 1 / -1;
  width: min(380px, 100%);
  min-height: 132px;
  aspect-ratio: auto;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 104px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: start;
  column-gap: 16px;
  padding: 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.18), rgba(255, 248, 231, 0.04)),
    radial-gradient(circle at 20% 18%, var(--medal-glow), transparent 36%),
    rgba(58, 36, 20, 0.56);
  border: 1px solid rgba(246, 195, 68, 0.34);
  box-shadow:
    inset 0 8px 18px rgba(255, 255, 255, 0.16),
    0 0 0 4px rgba(246, 195, 68, 0.12),
    0 22px 34px rgba(0, 0, 0, 0.28);
}

.level-node.current-level .medal-ribbon {
  left: 58px;
  top: 74px;
  width: 56px;
  height: 58px;
}

.level-node.current-level .medal-disc {
  grid-row: 1 / 3;
  width: 88px;
  height: 88px;
}

.level-node.current-level .medal-disc b {
  font-size: 42px;
}

.level-node.current-level .medal-disc em {
  right: 10px;
  bottom: 9px;
  min-width: 23px;
  height: 23px;
  font-size: 12px;
}

.level-node.current-level strong {
  color: #ffe9a8;
  font-size: 26px;
  line-height: 1;
}

.level-node.current-level small {
  color: rgba(255, 248, 231, 0.82);
  font-size: 13px;
}

.level-node.current-level .medal-level {
  left: 58px;
  top: 12px;
}

.level-node.medal-complete {
  width: 92px;
  min-height: 128px;
  aspect-ratio: auto;
  border-radius: 18px;
  display: grid;
  grid-template-rows: 72px auto auto;
  justify-items: center;
  align-items: start;
  gap: 3px;
  padding: 10px 4px 8px;
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.12), rgba(255, 248, 231, 0.02)),
    rgba(58, 36, 20, 0.42);
  border: 1px solid rgba(246, 195, 68, 0.2);
  box-shadow:
    inset 0 6px 12px rgba(255, 255, 255, 0.08),
    0 12px 18px rgba(0, 0, 0, 0.22);
}

.level-node.medal-complete .medal-ribbon {
  top: 55px;
}

.level-node.medal-complete .medal-level {
  top: 7px;
}

.level-node.medal-complete strong {
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-node.crowned::after {
  content: "冠";
  top: -8px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff8ce, #f6c344);
  color: #7a2812;
  font-size: 13px;
  font-weight: 950;
  border: 1px solid rgba(255, 248, 231, 0.66);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.26);
}

.screen-game {
  background: linear-gradient(180deg, rgba(255, 248, 231, 0.05), transparent);
}

.boss-panel {
  width: min(540px, 100%);
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(246, 195, 68, 0.46);
  background:
    linear-gradient(90deg, rgba(246, 195, 68, 0.16), rgba(58, 36, 20, 0.72)),
    rgba(0, 0, 0, 0.28);
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.app.boss-mode .boss-panel {
  display: flex;
}

.boss-bar {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.boss-bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8B1E1E, #F6C344);
  box-shadow: 0 0 14px rgba(246, 195, 68, 0.45);
}

.board-wrap {
  width: min(620px, 100%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 226, 154, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(255, 248, 231, 0.08), rgba(58, 36, 20, 0.18)),
    rgba(40, 14, 9, 0.66);
}

.app.bamboo-mode .board-wrap {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 226, 154, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(255, 248, 231, 0.1), rgba(21, 81, 54, 0.22)),
    rgba(14, 76, 51, 0.66);
  border: 1px solid rgba(255, 226, 154, 0.26);
}

.app.tea-mode .board-wrap {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 205, 117, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(255, 248, 231, 0.08), rgba(78, 39, 18, 0.2)),
    rgba(74, 39, 18, 0.72);
  border: 1px solid rgba(255, 205, 117, 0.3);
}

.app.town-mode .board-wrap {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 217, 138, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(41, 91, 141, 0.18), rgba(5, 24, 47, 0.32)),
    rgba(8, 30, 58, 0.74);
  border: 1px solid rgba(255, 217, 138, 0.28);
}

.app.palace-mode .board-wrap {
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 226, 154, 0.26), transparent 34%),
    linear-gradient(180deg, rgba(255, 248, 231, 0.08), rgba(91, 15, 11, 0.2)),
    rgba(91, 15, 11, 0.78);
  border: 1px solid rgba(255, 226, 154, 0.36);
}

.app.dragon-mode .board-wrap {
  background:
    radial-gradient(circle at 50% 16%, rgba(246, 195, 68, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(98, 171, 226, 0.08), rgba(3, 16, 34, 0.28)),
    rgba(3, 16, 34, 0.82);
  border: 1px solid rgba(246, 195, 68, 0.34);
}

.app.boss-mode:not(.custom-bg) .board-wrap {
  background:
    radial-gradient(circle at 50% 16%, rgba(246, 195, 68, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(98, 171, 226, 0.08), rgba(8, 7, 7, 0.24)),
    rgba(8, 7, 7, 0.82);
}

.tile {
  border-radius: 12px;
  border: 2px solid #e7bb65;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95) 0 12%, transparent 13%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(180deg, #fffdf2 0%, #fff2c8 58%, #d09a4a 100%);
  color: #8B1E1E;
  box-shadow:
    inset -5px -8px 0 rgba(117, 70, 28, 0.18),
    inset 3px 3px 0 rgba(255, 255, 255, 0.62),
    0 7px 0 #9a5f25,
    0 14px 22px rgba(0, 0, 0, 0.26);
}

.app.boss-mode:not(.custom-bg) .tile {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.92) 0 12%, transparent 13%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), transparent 34%),
    linear-gradient(180deg, #fff6cf 0%, #e7bd50 58%, #7b4618);
  border-color: #F6C344;
  box-shadow:
    inset -5px -8px 0 rgba(58, 36, 20, 0.2),
    inset 3px 3px 0 rgba(255, 255, 255, 0.5),
    0 7px 0 #5f3512,
    0 0 18px rgba(246, 195, 68, 0.2);
}

.app.boss-mode:not(.custom-bg) .tile::before {
  border-color: rgba(84, 46, 13, 0.26);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.48), transparent 36%),
    repeating-linear-gradient(135deg, rgba(139, 30, 30, 0.14) 0 3px, transparent 3px 8px);
}

.app.tile-classic .tile {
  border-color: #e7bb65;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95) 0 12%, transparent 13%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(180deg, #fffdf2 0%, #fff2c8 58%, #d09a4a 100%);
  box-shadow:
    inset -5px -8px 0 rgba(117, 70, 28, 0.18),
    inset 3px 3px 0 rgba(255, 255, 255, 0.62),
    0 7px 0 #9a5f25,
    0 14px 22px rgba(0, 0, 0, 0.26);
}

.app.tile-classic .tile::before {
  border-color: rgba(141, 85, 33, 0.18);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.65), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 225, 154, 0.05));
}

.app.tile-jade .tile {
  border-color: #8bd8a0;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.94) 0 12%, transparent 13%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.68), transparent 34%),
    linear-gradient(180deg, #f4fff4 0%, #b9e8bf 54%, #4b9c68 100%);
  box-shadow:
    inset -5px -8px 0 rgba(12, 88, 54, 0.18),
    inset 3px 3px 0 rgba(255, 255, 255, 0.62),
    0 7px 0 #26734e,
    0 14px 22px rgba(0, 0, 0, 0.26);
}

.app.tile-jade .tile::before {
  border-color: rgba(19, 101, 62, 0.2);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.52), transparent 36%),
    linear-gradient(180deg, rgba(226, 255, 229, 0.28), rgba(76, 156, 103, 0.08));
}

.app.tile-amber .tile {
  border-color: #ffd477;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9) 0 12%, transparent 13%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), transparent 34%),
    linear-gradient(180deg, #fff7c9 0%, #e9b13c 55%, #92581d 100%);
  box-shadow:
    inset -5px -8px 0 rgba(80, 40, 12, 0.22),
    inset 3px 3px 0 rgba(255, 255, 255, 0.5),
    0 7px 0 #6f4115,
    0 0 18px rgba(246, 195, 68, 0.22);
}

.app.tile-amber .tile::before {
  border-color: rgba(108, 62, 17, 0.24);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.44), transparent 36%),
    repeating-linear-gradient(135deg, rgba(139, 30, 30, 0.08) 0 3px, transparent 3px 9px);
}

.app.tile-blackgold .tile {
  border-color: #f6c344;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 226, 154, 0.28) 0 12%, transparent 13%),
    linear-gradient(145deg, rgba(255, 226, 154, 0.16), transparent 34%),
    linear-gradient(180deg, #25231f 0%, #0d0c0b 58%, #5d4217 100%);
  box-shadow:
    inset -5px -8px 0 rgba(0, 0, 0, 0.28),
    inset 3px 3px 0 rgba(255, 226, 154, 0.16),
    0 7px 0 #3a250b,
    0 0 20px rgba(246, 195, 68, 0.3);
}

.app.tile-blackgold .tile::before {
  border-color: rgba(246, 195, 68, 0.24);
  background:
    linear-gradient(140deg, rgba(255, 226, 154, 0.18), transparent 36%),
    repeating-linear-gradient(135deg, rgba(246, 195, 68, 0.1) 0 3px, transparent 3px 9px);
}

.app.tile-blackgold .mahjong-face {
  background:
    radial-gradient(circle at 50% 12%, rgba(246, 195, 68, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(255, 226, 154, 0.08), rgba(0, 0, 0, 0.06));
  box-shadow: inset 0 0 0 1px rgba(246, 195, 68, 0.16);
}

.app.tile-blackgold .tile[data-tone="black"] .mahjong-face,
.app.tile-blackgold .tile[data-tone="gold"] .mahjong-face {
  color: #ffe29a;
}

.app.tile-inkwash .tile {
  border-color: #c8bd9b;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.72) 0 10%, transparent 11%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.44), transparent 34%),
    linear-gradient(180deg, #fbf3dc 0%, #c7bea4 54%, #4a4d44 100%);
  box-shadow:
    inset -5px -8px 0 rgba(34, 35, 31, 0.18),
    inset 3px 3px 0 rgba(255, 255, 255, 0.56),
    0 7px 0 #56594f,
    0 14px 20px rgba(0, 0, 0, 0.24);
}

.app.tile-inkwash .tile::before {
  border-color: rgba(57, 54, 43, 0.24);
  background:
    radial-gradient(circle at 68% 72%, rgba(31, 33, 31, 0.16), transparent 28%),
    repeating-linear-gradient(128deg, rgba(48, 45, 39, 0.09) 0 2px, transparent 2px 8px);
}

.app.tile-inkwash .mahjong-face {
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.42), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(28, 30, 27, 0.08));
  box-shadow: inset 0 0 0 1px rgba(58, 55, 45, 0.12);
}

.app.tile-inkwash .hero-rank,
.app.tile-inkwash .hero-name {
  color: #f7f0da;
  text-shadow: 0 1px 3px rgba(16, 14, 10, 0.78);
}

.app.tile-redgold .tile {
  border-color: #ffd46d;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 245, 188, 0.75) 0 11%, transparent 12%),
    linear-gradient(145deg, rgba(255, 228, 132, 0.34), transparent 34%),
    linear-gradient(180deg, #ffe6a2 0%, #c83227 54%, #65130f 100%);
  box-shadow:
    inset -5px -8px 0 rgba(64, 13, 10, 0.24),
    inset 3px 3px 0 rgba(255, 246, 196, 0.5),
    0 7px 0 #6b170f,
    0 0 18px rgba(255, 210, 92, 0.22);
}

.app.tile-redgold .tile::before {
  border-color: rgba(255, 212, 109, 0.32);
  background:
    linear-gradient(140deg, rgba(255, 232, 144, 0.34), transparent 36%),
    repeating-linear-gradient(135deg, rgba(255, 220, 118, 0.16) 0 3px, transparent 3px 10px);
}

.app.tile-redgold .mahjong-face {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 232, 144, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 232, 144, 0.08), rgba(91, 16, 12, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 212, 109, 0.16);
}

.app.tile-redgold .hero-rank,
.app.tile-redgold .hero-name,
.app.tile-redgold .tile[data-tone="red"] .mahjong-face,
.app.tile-redgold .tile[data-tone="gold"] .mahjong-face {
  color: #fff1b5;
  text-shadow: 0 1px 3px rgba(70, 12, 8, 0.78);
}

.tile:not(.empty) {
  transform: translateY(calc(var(--tile-lift, 0px) * -1));
  box-shadow:
    inset -5px -8px 0 rgba(117, 70, 28, 0.18),
    inset 3px 3px 0 rgba(255, 255, 255, 0.62),
    0 var(--tile-side, 7px) 0 var(--tile-side-color, #9a5f25),
    0 calc(var(--tile-side, 7px) + 8px) var(--tile-shadow-blur, 22px) rgba(0, 0, 0, 0.3);
}

.tile.stacked-tile {
  overflow: visible;
}

.tile.stacked-tile::after {
  right: calc(-2px - var(--stack-offset, 0px));
  bottom: calc(-2px - var(--stack-offset, 0px));
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 12px;
  border: 1px solid rgba(121, 74, 28, 0.24);
  background:
    linear-gradient(145deg, rgba(255, 248, 231, 0.58), rgba(214, 158, 74, 0.36)),
    linear-gradient(180deg, rgba(255, 248, 231, 0.34), rgba(117, 70, 28, 0.24));
  box-shadow:
    var(--stack-offset, 0px) var(--stack-offset, 0px) 0 rgba(118, 72, 28, 0.24),
    0 12px 18px rgba(0, 0, 0, 0.18);
  opacity: 0.9;
  z-index: 0;
}

.stack-count {
  position: absolute !important;
  left: 3px;
  top: 3px;
  z-index: 4 !important;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  background: linear-gradient(180deg, #ffe29a, #c57525);
  color: #4a160c;
  border: 1px solid rgba(255, 248, 231, 0.8);
  box-shadow: 0 2px 5px rgba(58, 36, 20, 0.24);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.tile.revealed-tile {
  animation: revealStackTile 260ms ease-out both;
}

.tile[data-depth="0"] { filter: saturate(0.96); }
.tile[data-depth="1"] { filter: saturate(1.02); }
.tile[data-depth="2"] { filter: saturate(1.06) brightness(1.02); }
.tile[data-depth="3"] { filter: saturate(1.1) brightness(1.04); }

.app.tile-classic .tile { --tile-side-color: #9a5f25; }
.app.tile-jade .tile { --tile-side-color: #26734e; }
.app.tile-amber .tile { --tile-side-color: #6f4115; }
.app.tile-blackgold .tile { --tile-side-color: #3a250b; }
.app.tile-inkwash .tile { --tile-side-color: #56594f; }
.app.tile-redgold .tile { --tile-side-color: #6b170f; }
.app.boss-mode:not(.custom-bg) .tile { --tile-side-color: #5f3512; }

.tile.selected {
  transform: translateY(calc(-5px - var(--tile-lift, 0px))) scale(1.1);
  filter: brightness(1.15);
}

.tile.removing {
  z-index: 3;
  pointer-events: none;
  animation: tileCrashShatter 430ms cubic-bezier(0.16, 0.88, 0.26, 1.18) forwards;
}

@keyframes tileCrashShatter {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: brightness(1);
  }
  28% {
    opacity: 1;
    transform: translate(var(--hit-x, 0), var(--hit-y, 0)) scale(1.16) rotate(var(--hit-rot, 4deg));
    filter: brightness(2.2) drop-shadow(0 0 16px rgba(255, 226, 154, 0.9));
  }
  46% {
    opacity: 1;
    transform: translate(var(--hit-x, 0), var(--hit-y, 0)) scale(0.96) rotate(0deg);
    filter: brightness(2.8) drop-shadow(0 0 22px rgba(255, 255, 230, 0.95));
  }
  100% {
    opacity: 0;
    transform: translate(var(--hit-x, 0), var(--hit-y, 0)) scale(0.12) rotate(var(--burst-rot, 18deg));
    filter: blur(1.8px) brightness(1.45);
  }
}

@keyframes revealStackTile {
  0% {
    opacity: 0.2;
    transform: translateY(calc(-8px - var(--tile-lift, 0px))) scale(0.88);
    filter: brightness(1.6);
  }
  100% {
    opacity: 1;
    transform: translateY(calc(var(--tile-lift, 0px) * -1)) scale(1);
    filter: brightness(1);
  }
}

.tool-btn {
  min-height: 66px;
  grid-template-columns: 1fr;
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.12), transparent 34%),
    linear-gradient(180deg, #8B1E1E, #50110E);
}

.tool-btn i {
  font-style: normal;
  font-size: 20px;
  line-height: 1;
}

.game-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.combo-badge {
  min-height: 40px;
  font-size: 17px;
  background: linear-gradient(180deg, #FFE29A, #C57925);
  color: #3A2414;
  animation: comboPop 680ms ease-out both;
}

@keyframes comboPop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.particle {
  z-index: 6;
  width: var(--size, 7px);
  height: var(--size, 7px);
  background: radial-gradient(circle, #fff8c7 0 18%, var(--gold) 20% 76%, rgba(255, 150, 50, 0.78));
  box-shadow: 0 0 12px rgba(255, 226, 154, 0.95), 0 0 22px rgba(246, 195, 68, 0.54);
  animation-duration: 720ms;
  animation-delay: var(--delay, 0ms);
}

.particle.shard {
  border-radius: 2px 7px 2px 6px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), transparent 38%),
    linear-gradient(180deg, #fff8e7, #f6c344 45%, #a75e21);
  box-shadow: 0 0 10px rgba(255, 226, 154, 0.85), 0 4px 8px rgba(58, 36, 20, 0.24);
  animation-name: shardBurst;
  animation-duration: 820ms;
}

.particle.glow-bit {
  border-radius: 50%;
}

.impact-ring {
  position: absolute;
  z-index: 6;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid rgba(255, 245, 188, 0.95);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(246, 195, 68, 0.28) 34%, transparent 62%);
  box-shadow: 0 0 22px rgba(255, 226, 154, 0.95), 0 0 42px rgba(246, 195, 68, 0.5);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: impactRing 700ms ease-out forwards;
}

@keyframes shardBurst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
  }
  42% {
    opacity: 1;
    transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my))) scale(1.05) rotate(88deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.14) rotate(var(--rot, 180deg));
  }
}

@keyframes impactRing {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.28); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(2.6); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.2); }
}

.score-float {
  position: absolute;
  z-index: 8;
  color: #fff6b8;
  font-size: clamp(24px, 7vw, 44px);
  font-weight: 950;
  line-height: 1;
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.95),
    0 0 12px rgba(255, 226, 154, 0.95),
    0 4px 0 rgba(141, 74, 19, 0.72),
    0 0 26px rgba(246, 195, 68, 0.72);
  filter: drop-shadow(0 0 15px rgba(255, 226, 154, 0.82));
  pointer-events: none;
  isolation: isolate;
  animation: scoreGlowFloat 1080ms cubic-bezier(0.12, 0.85, 0.22, 1) forwards;
}

.score-float::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.58), rgba(246, 195, 68, 0.34) 34%, transparent 68%);
  animation: scoreAura 760ms ease-out forwards;
}

@keyframes scoreGlowFloat {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.42) rotate(-8deg); }
  18% { opacity: 1; transform: translate(-50%, -58%) scale(1.34) rotate(2deg); }
  58% { opacity: 1; transform: translate(-50%, -92px) scale(1.08) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -138px) scale(1.22) rotate(4deg); }
}

@keyframes scoreAura {
  0% { opacity: 0; transform: scale(0.2); }
  35% { opacity: 0.92; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.85); }
}

.clear-spark {
  position: absolute;
  z-index: 14;
  width: var(--size, 9px);
  height: var(--size, 9px);
  left: 50%;
  top: 42%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fffbe0 0 18%, #ffe29a 20% 46%, #f6c344 48% 100%);
  box-shadow:
    0 0 10px rgba(255, 248, 231, 0.94),
    0 0 22px rgba(246, 195, 68, 0.78);
  pointer-events: none;
  animation: clearSparkBurst 1280ms cubic-bezier(0.12, 0.82, 0.2, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.clear-spark.coin-spark {
  border-radius: 50%;
  box-shadow:
    inset 0 -2px 0 rgba(126, 72, 18, 0.28),
    0 0 14px rgba(255, 226, 154, 0.95),
    0 0 30px rgba(246, 195, 68, 0.72);
}

.clear-spark.star-spark {
  border-radius: 2px;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 80% 94%, 50% 70%, 20% 94%, 32% 56%, 2% 35%, 39% 35%);
}

.settlement-float {
  position: absolute;
  z-index: 15;
  color: #fff6b8;
  font-size: clamp(17px, 4.8vw, 30px);
  font-weight: 950;
  white-space: nowrap;
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.92),
    0 0 14px rgba(255, 226, 154, 0.9),
    0 3px 0 rgba(103, 52, 14, 0.68);
  pointer-events: none;
  transform: translate(-50%, 14px) scale(0.72);
  animation: settlementFloat 1900ms cubic-bezier(0.12, 0.88, 0.2, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.settlement-float.total {
  color: #ffffff;
  font-size: clamp(22px, 6.4vw, 42px);
  text-shadow:
    0 0 8px rgba(255, 255, 255, 1),
    0 0 18px rgba(255, 226, 154, 1),
    0 0 34px rgba(246, 195, 68, 0.86),
    0 4px 0 rgba(103, 52, 14, 0.7);
}

@keyframes clearSparkBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my))) scale(1.05) rotate(160deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.28) rotate(var(--rot, 180deg));
  }
}

@keyframes settlementFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 16px) scale(0.58);
    filter: brightness(1);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.12);
    filter: brightness(1.55);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -42px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -72px) scale(1.16);
    filter: brightness(1.2);
  }
}

.modal {
  background: rgba(17, 7, 5, 0.68);
}

.modal.win .modal-panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 226, 154, 0.42), transparent 40%),
    linear-gradient(180deg, rgba(139, 30, 30, 0.98), rgba(58, 36, 20, 0.98));
}

.modal.fail .modal-panel {
  background: linear-gradient(180deg, rgba(45, 24, 20, 0.98), rgba(16, 10, 9, 0.98));
}

.stars {
  text-shadow: 0 0 18px rgba(246, 195, 68, 0.6);
}

.modal-actions {
  grid-template-columns: repeat(2, 1fr);
}

.modal.fail .modal-panel {
  width: min(390px, 92vw);
  padding: 28px 22px 24px;
}

.modal.fail .modal-kicker,
.modal.fail #modalBody {
  display: none;
}

.modal.fail #modalTitle {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 126px;
  margin: 0 auto 6px;
  font-size: 0;
  line-height: 1;
}

.modal.fail #modalTitle::before {
  content: "⌛";
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.62), transparent 30%),
    linear-gradient(180deg, rgba(255, 226, 154, 0.2), rgba(95, 31, 18, 0.44));
  border: 2px solid rgba(255, 226, 154, 0.56);
  color: #ffe29a;
  font-size: 76px;
  text-shadow:
    0 4px 0 rgba(77, 20, 8, 0.78),
    0 0 18px rgba(255, 226, 154, 0.74);
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.2),
    0 8px 0 rgba(54, 17, 10, 0.9),
    0 20px 28px rgba(0, 0, 0, 0.34);
  animation: brokenHourglass 1180ms cubic-bezier(0.2, 0.88, 0.18, 1.12) both;
}

.modal.fail[data-fail-reason="tray"] #modalTitle::before {
  content: "▦";
}

.modal.fail #modalTitle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 17px;
  width: 92px;
  height: 92px;
  transform: translateX(-50%) rotate(-10deg);
  background:
    linear-gradient(112deg, transparent 0 42%, rgba(255, 255, 255, 0.92) 43% 46%, transparent 47%),
    linear-gradient(32deg, transparent 0 50%, rgba(255, 226, 154, 0.9) 51% 53%, transparent 54%),
    radial-gradient(circle at 18% 22%, #fff6c8 0 3px, transparent 4px),
    radial-gradient(circle at 80% 70%, #fff6c8 0 2px, transparent 3px);
  filter: drop-shadow(0 0 8px rgba(255, 240, 184, 0.7));
  pointer-events: none;
  animation: brokenGlassFlash 1180ms ease-out both;
}

.modal.fail .stars {
  margin: 4px 0 14px;
  font-size: 34px;
  opacity: 0.78;
}

.modal.fail .modal-actions {
  grid-template-columns: repeat(3, 76px);
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.modal.fail .modal-actions .btn {
  position: relative;
  width: 76px;
  min-width: 0;
  min-height: 70px;
  padding: 0;
  border-radius: 18px;
  font-size: 0;
  border: 2px solid rgba(255, 226, 154, 0.72);
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.28),
    0 6px 0 rgba(54, 17, 10, 0.88),
    0 14px 22px rgba(0, 0, 0, 0.24);
}

.modal.fail .modal-actions .btn::before {
  position: relative;
  z-index: 1;
  font-size: 37px;
  line-height: 1;
  filter:
    drop-shadow(0 2px 0 rgba(72, 20, 8, 0.54))
    drop-shadow(0 0 8px rgba(255, 226, 154, 0.42));
}

.modal.fail #retryBtn::before {
  content: "↻";
}

.modal.fail #continueBtn::before {
  content: "🪙";
}

.modal.fail #mapBtn::before {
  content: "⌂";
}

.modal.fail .modal-actions .btn {
  display: grid;
  place-items: center;
}

.modal.fail .modal-actions .btn::before {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #fff8e8;
}

.modal.fail #retryBtn::before {
  content: "\21BB";
  font-size: 46px;
  transform: translateY(-1px);
}

.modal.fail #continueBtn::before {
  content: "\1FA99";
  font-size: 43px;
}

.modal.fail #mapBtn::before {
  content: "";
  width: 52px;
  height: 52px;
  transform: translateY(-1px);
  background:
    center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 34 32 14l22 20' fill='none' stroke='%23fff8e8' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 31v24h28V31' fill='none' stroke='%23fff8e8' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29 55V43h6v12' fill='none' stroke='%23fff8e8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

@keyframes brokenHourglass {
  0% { opacity: 0; transform: scale(0.62) rotate(-10deg); filter: brightness(0.75); }
  24% { opacity: 1; transform: scale(1.18) rotate(8deg); filter: brightness(1.5); }
  46% { transform: scale(0.94) rotate(-5deg); }
  64% { transform: scale(1.04) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes brokenGlassFlash {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6) rotate(-24deg); }
  28% { opacity: 1; transform: translateX(-50%) scale(1.18) rotate(8deg); }
  100% { opacity: 0.82; transform: translateX(-50%) scale(1) rotate(-10deg); }
}

@media (max-width: 420px) {
  .title-block {
    padding-top: 86px;
  }

  .logo-orbit {
    width: min(232px, 68vw);
  }

  .btn {
    min-height: 54px;
    font-size: 16px;
  }

  .level-map {
    gap: 14px 8px;
  }

  .game-stats {
    gap: 6px;
  }
}

/* Mahjong Pair Clash refresh: closer to the supplied green-gold Chinese mobile style. */
:root {
  --clash-green: #0fa34b;
  --clash-green-dark: #05672f;
  --clash-gold: #ffd955;
  --clash-gold-deep: #c98016;
  --clash-red: #d32222;
  --clash-blue: #0876d8;
  --clash-panel: rgba(255, 250, 225, 0.94);
  --clash-ink: #12321f;
}

.app {
  background:
    linear-gradient(180deg, rgba(58, 35, 16, 0.08), rgba(10, 20, 24, 0.32)),
    url("./assets/backgrounds/watermargin-scholar-river.jpg") center / cover no-repeat,
    #5a3b24;
}

.app.bamboo-mode {
  background:
    linear-gradient(180deg, rgba(72, 44, 18, 0.08), rgba(11, 24, 28, 0.32)),
    url("./assets/backgrounds/watermargin-tiger.jpg") center / cover no-repeat,
    #2f2d19;
}

.app.town-mode {
  background:
    linear-gradient(180deg, rgba(35, 28, 18, 0.06), rgba(8, 17, 28, 0.34)),
    url("./assets/backgrounds/watermargin-scholar-river.jpg") center / cover no-repeat,
    #2b2630;
}

.app.tea-mode {
  background:
    linear-gradient(180deg, rgba(72, 32, 6, 0.06), rgba(18, 10, 7, 0.34)),
    url("./assets/backgrounds/watermargin-heroes-hall.jpg") center / cover no-repeat,
    #3b2618;
}

.app.palace-mode {
  background:
    linear-gradient(180deg, rgba(108, 51, 2, 0.06), rgba(30, 11, 7, 0.32)),
    url("./assets/backgrounds/watermargin-willow.jpg") center / cover no-repeat,
    #654126;
}

.app.dragon-mode {
  background:
    linear-gradient(180deg, rgba(0, 54, 92, 0.08), rgba(1, 10, 35, 0.36)),
    url("./assets/backgrounds/watermargin-snow-temple.jpg") center / cover no-repeat,
    #102638;
}

.app::before {
  background:
    radial-gradient(circle at 16% 16%, rgba(255, 218, 82, 0.28), transparent 18%),
    radial-gradient(circle at 86% 14%, rgba(255, 86, 108, 0.2), transparent 20%),
    linear-gradient(180deg, rgba(0, 76, 66, 0.18), rgba(4, 18, 36, 0.26));
  opacity: 1;
  mask-image: none;
}

.screen-menu {
  justify-content: flex-start;
  gap: 12px;
  overflow-y: auto;
  scrollbar-width: none;
}

.screen-menu::-webkit-scrollbar {
  display: none;
}

.screen-menu::before,
.screen-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 6% 8%, #ff9ec0 0 7px, transparent 8px),
    radial-gradient(circle at 14% 12%, #ffd1dd 0 4px, transparent 5px),
    radial-gradient(circle at 90% 9%, #ff9ec0 0 8px, transparent 9px),
    radial-gradient(circle at 82% 15%, #ffd1dd 0 4px, transparent 5px),
    radial-gradient(circle at 24% 92%, rgba(255, 217, 85, 0.45) 0 26px, transparent 27px),
    radial-gradient(circle at 92% 86%, rgba(255, 217, 85, 0.34) 0 20px, transparent 21px);
  pointer-events: none;
}

.app.bamboo-mode .sun-glow,
.app.bamboo-mode .sunbeam,
.app.bamboo-mode .bamboo-grove,
.app.bamboo-mode .morning-mist,
.app.bamboo-mode .creek,
.app.bamboo-mode .ripple,
.app.bamboo-mode .bamboo-flow,
.app.bamboo-mode .bird,
.app.bamboo-mode .board-creek,
.app.bamboo-mode .board-ripple,
.app.bamboo-mode .board-leaf,
.app.bamboo-mode .board-water-flow {
  display: none;
}

.top-strip,
.page-header,
.game-top {
  margin-top: 2px;
}

.wallet,
.energy,
.meter,
.game-stats span {
  border: 2px solid rgba(255, 217, 85, 0.72);
  background: linear-gradient(180deg, rgba(2, 100, 57, 0.92), rgba(2, 45, 47, 0.86));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.24);
  color: #fff8d4;
}

.game-top .meter:first-of-type {
  min-width: 124px;
  flex-direction: row;
  gap: 8px;
  padding: 0 14px;
}

.game-top .meter:first-of-type strong {
  font-size: 26px;
  line-height: 1;
}

.time-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.62), transparent 30%),
    linear-gradient(180deg, rgba(255, 228, 128, 0.96), rgba(178, 97, 26, 0.92));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 3px 0 rgba(91, 34, 10, 0.82),
    0 7px 12px rgba(0, 0, 0, 0.22);
}

.time-icon::before {
  content: "⏱";
  color: #fff8d4;
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 2px 0 rgba(70, 21, 7, 0.42));
}

.game-top .meter:first-of-type.time-warning {
  border-color: rgba(255, 239, 126, 0.98);
  background:
    radial-gradient(circle at 70% 18%, rgba(255, 255, 210, 0.72), transparent 24%),
    linear-gradient(180deg, rgba(255, 69, 45, 0.98), rgba(158, 15, 18, 0.94));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.42),
    0 0 0 4px rgba(255, 226, 88, 0.2),
    0 0 22px rgba(255, 50, 34, 0.82),
    0 0 42px rgba(255, 224, 82, 0.48),
    0 10px 20px rgba(0, 0, 0, 0.28);
  animation: finalCountdownPulse 640ms ease-in-out infinite;
}

.game-top .meter:first-of-type.time-warning strong {
  color: #fff44f;
  text-shadow:
    0 2px 0 rgba(83, 10, 8, 0.92),
    0 0 12px rgba(255, 247, 95, 0.95),
    0 0 24px rgba(255, 51, 37, 0.75);
}

.game-top .meter:first-of-type.time-warning .time-icon {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.82), transparent 30%),
    linear-gradient(180deg, rgba(255, 244, 85, 0.98), rgba(244, 53, 34, 0.94));
  animation: finalCountdownIcon 640ms ease-in-out infinite;
}

@keyframes finalCountdownPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  44% {
    transform: translateY(-1px) scale(1.06);
    filter: brightness(1.38);
  }
  58% {
    transform: translateX(-1px) scale(1.04);
  }
  72% {
    transform: translateX(1px) scale(1.03);
  }
}

@keyframes finalCountdownIcon {
  0%, 100% { transform: rotate(0deg) scale(1); }
  45% { transform: rotate(-10deg) scale(1.12); }
  70% { transform: rotate(8deg) scale(1.05); }
}

.score-meter {
  position: relative;
  overflow: visible;
  min-width: 112px;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
}

.score-meter strong {
  min-width: 44px;
  color: #fff8d4;
  font-size: 27px;
  line-height: 1;
  text-align: left;
  text-shadow:
    0 2px 0 rgba(77, 20, 8, 0.66),
    0 0 12px rgba(255, 232, 122, 0.56);
}

.score-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.68), transparent 28%),
    linear-gradient(180deg, #ffe88a, #d99120 58%, #7e330f);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.48),
    0 3px 0 rgba(91, 34, 10, 0.86),
    0 7px 12px rgba(0, 0, 0, 0.24);
}

.score-icon::before {
  content: "⚔";
  color: #fff8d4;
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
  filter:
    drop-shadow(0 2px 0 rgba(70, 21, 7, 0.44))
    drop-shadow(0 0 6px rgba(255, 255, 220, 0.42));
}

.score-meter.score-pop {
  animation: scoreMeterPop 520ms cubic-bezier(0.15, 0.9, 0.2, 1.25) both;
}

.score-meter.score-pop strong {
  animation: scoreDigitsFlash 620ms ease-out both;
}

.score-gain-burst,
.score-blade {
  position: absolute;
  pointer-events: none;
}

.score-gain-burst {
  z-index: 46;
  min-width: 48px;
  transform: translate(-50%, -50%);
  color: #fff4a8;
  font-size: 23px;
  font-weight: 950;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(85, 24, 9, 0.92),
    0 0 14px rgba(255, 232, 122, 0.82),
    0 0 26px rgba(255, 76, 46, 0.42);
  animation: scoreGainBurst 980ms cubic-bezier(0.13, 0.78, 0.24, 1) forwards;
}

.score-blade {
  z-index: 45;
  width: 38px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(var(--angle)) scale(0.45);
  transform-origin: 5px 50%;
  opacity: 0;
  animation: scoreBladeBurst 820ms cubic-bezier(0.12, 0.86, 0.2, 1) forwards;
  animation-delay: var(--delay);
}

.score-blade::before {
  content: "";
  position: absolute;
  inset: 1px 0 1px 7px;
  border-radius: 999px 4px 4px 999px;
  background:
    linear-gradient(90deg, #fffdf0, #ffeaa0 34%, #f6f8ff 58%, rgba(142, 210, 255, 0.92));
  clip-path: polygon(0 12%, 84% 0, 100% 50%, 84% 100%, 0 88%);
  box-shadow:
    0 0 9px rgba(255, 255, 238, 0.95),
    0 0 18px rgba(255, 226, 122, 0.64);
}

.score-blade::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 11px;
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, #6f2112, #230a06);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 154, 0.52),
    0 0 8px rgba(255, 210, 94, 0.54);
}

.score-blade.spark-blade {
  filter: drop-shadow(0 0 10px rgba(255, 248, 220, 0.95));
}

@keyframes scoreMeterPop {
  0% { transform: scale(1); filter: brightness(1); }
  34% { transform: scale(1.13) rotate(-1deg); filter: brightness(1.45); }
  64% { transform: scale(0.98) rotate(0.6deg); filter: brightness(1.12); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes scoreDigitsFlash {
  0% { color: #fff8d4; transform: scale(1); }
  32% { color: #fff03d; transform: scale(1.24); text-shadow: 0 0 18px rgba(255, 240, 61, 0.9), 0 2px 0 rgba(77, 20, 8, 0.66); }
  100% { color: #fff8d4; transform: scale(1); }
}

@keyframes scoreGainBurst {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(0.45); }
  16% { opacity: 1; transform: translate(-50%, -86%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -172%) scale(0.82); }
}

@keyframes scoreBladeBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) scale(0.35);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--angle)) scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
      rotate(calc(var(--angle) + var(--spin)))
      scale(0.82);
  }
}

.quick-exit-btn {
  font-size: 24px;
  background: linear-gradient(180deg, #f14638, #c9161d 55%, #811013);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.36),
    0 5px 0 rgba(92, 9, 13, 0.9),
    0 12px 20px rgba(0, 0, 0, 0.26);
}

.title-block {
  position: relative;
  margin-top: clamp(18px, 5svh, 54px);
  padding: 18px 10px 8px;
}

.title-block::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: min(500px, 95vw);
  height: 88px;
  z-index: -1;
  transform: translateX(-50%);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 238, 127, 0.92), rgba(255, 185, 48, 0.84) 44%, rgba(16, 129, 60, 0.84) 45%, rgba(4, 82, 45, 0.92));
  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.45),
    0 10px 0 #075329,
    0 18px 28px rgba(0, 0, 0, 0.28);
}

.title-block p {
  margin-bottom: 0;
  color: #fff8d4;
  font-size: 14px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
}

.title-block h1 {
  color: #ffe877;
  font-size: clamp(46px, 14vw, 78px);
  line-height: 0.98;
  -webkit-text-stroke: 2px #0b7a3b;
  text-shadow:
    0 3px 0 #fff7a3,
    0 7px 0 #087536,
    0 12px 0 #04481f,
    0 18px 26px rgba(0, 0, 0, 0.36);
}

.challenge-ribbon {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 190px;
  min-height: 40px;
  margin-top: 10px;
  padding: 0 28px;
  border-radius: 8px;
  background: linear-gradient(180deg, #f64b36, #a51318);
  color: #fff4bb;
  font-size: 22px;
  font-weight: 950;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.34),
    0 6px 0 #6f0d13,
    0 14px 22px rgba(0, 0, 0, 0.3);
}

.cover-title {
  width: min(540px, 96vw);
  margin-top: clamp(10px, 3svh, 28px);
  padding: 0 0 6px;
}

.cover-title::before {
  display: none;
}

.title-cover {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  filter:
    drop-shadow(0 0 7px rgba(255, 219, 98, 0.78))
    drop-shadow(0 6px 0 rgba(82, 18, 10, 0.72))
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.42));
}

.cover-title .challenge-ribbon {
  margin-top: -15px;
  z-index: 2;
}

.menu-actions {
  width: min(360px, 82vw);
  justify-items: stretch;
  gap: 9px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.menu-actions .btn {
  position: relative;
  overflow: hidden;
  min-height: 46px;
  border-radius: 15px;
  border: 2px solid rgba(255, 245, 184, 0.78);
  font-size: 16px;
  text-shadow:
    0 2px 0 rgba(78, 17, 8, 0.32),
    0 0 8px rgba(255, 246, 180, 0.16);
  transform: translateY(0);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.48),
    inset 0 -3px 0 rgba(92, 26, 9, 0.34),
    0 7px 0 rgba(72, 20, 10, 0.86),
    0 14px 18px rgba(0, 0, 0, 0.28);
}

.menu-actions .btn::before {
  content: "";
  position: absolute;
  inset: 3px 8px auto;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.menu-actions .btn:active {
  transform: translateY(5px) scale(0.99);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.36),
    inset 0 -2px 0 rgba(82, 24, 9, 0.26),
    0 2px 0 rgba(72, 20, 10, 0.9),
    0 8px 12px rgba(0, 0, 0, 0.22);
}

.menu-actions .btn span {
  width: 25px;
  height: 25px;
  margin-right: 7px;
  border: 1px solid rgba(255, 245, 184, 0.38);
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.72), transparent 28%),
    rgba(255, 248, 231, 0.2);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    0 2px 0 rgba(69, 20, 9, 0.32);
}

.menu-actions .btn b {
  position: relative;
  z-index: 1;
}

.btn-primary {
  background: linear-gradient(180deg, #ff5d4e, #d72025 54%, #9b1218);
  color: #ffffff;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.45),
    0 6px 0 #7e0d12,
    0 15px 26px rgba(0, 0, 0, 0.24);
}

.btn-soft:nth-child(2) {
  background: linear-gradient(180deg, #2aca74, #078a3e 58%, #04572a);
}

.btn-soft:nth-child(3) {
  background: linear-gradient(180deg, #ffbe42, #ed8d15 58%, #a6530b);
}

.btn-soft:nth-child(4) {
  background: linear-gradient(180deg, #23a9ff, #0676d0 58%, #075196);
}

.btn-soft:nth-child(5) {
  background: linear-gradient(180deg, #36c7ff, #146dd5 58%, #0a3f89);
}

.page-header {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(3, 62, 64, 0.68);
  border: 1px solid rgba(255, 217, 85, 0.38);
}

.page-header p {
  color: var(--clash-gold);
}

.chapter-tabs {
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.chapter-tabs span {
  border-radius: 12px;
  background: linear-gradient(180deg, #30c96f, #087c3b);
  color: #fff8cf;
  border: 1px solid rgba(255, 232, 120, 0.48);
  min-height: 46px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  line-height: 1;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 0 rgba(0, 65, 30, 0.42);
}

.chapter-tabs span::after {
  content: attr(data-range);
  display: block;
  color: rgba(255, 245, 197, 0.9);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.chapter-tabs span[data-state="current"] {
  border-color: rgba(255, 238, 128, 0.98);
  background: linear-gradient(180deg, #3cdf7b, #0a9446 58%, #05622e);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 0 3px rgba(255, 217, 85, 0.22),
    0 6px 0 rgba(0, 65, 30, 0.48);
}

.chapter-tabs span[data-state="complete"] {
  background: linear-gradient(180deg, #ffd955, #df8e12);
  color: #24561e;
  border-color: rgba(255, 247, 187, 0.9);
}

.chapter-tabs span[data-state="complete"]::after {
  color: rgba(45, 76, 28, 0.88);
}

.chapter-tabs span[data-state="locked"] {
  background: linear-gradient(180deg, #19a85a, #08743b);
  color: rgba(255, 248, 207, 0.88);
}

.map-story-card,
.game-story-card {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 2px solid rgba(255, 217, 85, 0.58);
  background:
    linear-gradient(135deg, rgba(255, 236, 164, 0.16), transparent 42%),
    rgba(43, 22, 16, 0.78);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    0 10px 18px rgba(0, 0, 0, 0.22);
  color: #fff8d4;
  text-align: left;
}

.story-portrait {
  width: 58px;
  aspect-ratio: 0.86;
  display: grid;
  place-items: start;
  overflow: hidden;
  border-radius: 11px;
  border: 2px solid rgba(255, 240, 166, 0.84);
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.12), rgba(0, 0, 0, 0.16)),
    var(--hero-image) center 18% / cover no-repeat,
    linear-gradient(180deg, #e2c891, #836035);
  color: #fff2b2;
  font-size: 10px;
  font-weight: 950;
  padding: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.map-story-card p,
.game-story-card p {
  margin: 0 0 2px;
  color: #ffe568;
  font-size: 11px;
  font-weight: 900;
}

.map-story-card h3,
.game-story-card h3 {
  margin: 0 0 3px;
  font-size: clamp(15px, 4.3vw, 22px);
  line-height: 1.05;
  color: #fff6bd;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.38);
}

.map-story-card small,
.game-story-card small {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 248, 221, 0.92);
  font-size: clamp(12px, 3.2vw, 14px);
  line-height: 1.32;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.game-story-card {
  position: absolute;
  left: 50%;
  top: calc(max(74px, env(safe-area-inset-top) + 58px));
  z-index: 30;
  width: min(520px, calc(100vw - 20px));
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -10px) scale(0.98);
  transition: opacity 220ms ease, transform 220ms ease;
}

.game-story-card.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.level-map {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 8px 3px 18px;
}

.level-map::before,
.level-node::before,
.level-node .medal-ribbon,
.level-node .medal-disc,
.level-node .medal-ring,
.level-node .medal-level {
  display: none;
}

.level-node {
  aspect-ratio: 0.78;
  border-radius: 14px;
  border: 2px solid #ffd955;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 22%),
    linear-gradient(180deg, #27c768, #078a3e 58%, #035429);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 3px;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.35),
    0 4px 0 #044f27,
    0 11px 18px rgba(0, 0, 0, 0.24);
}

.level-node .level-portrait {
  position: relative;
  width: min(54px, 96%);
  aspect-ratio: 0.86;
  margin: 0 auto 2px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 11px;
  border: 2px solid rgba(255, 240, 166, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.16), rgba(0, 0, 0, 0.1)),
    var(--hero-image) center 18% / cover no-repeat,
    linear-gradient(180deg, #e2c891, #836035);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.36),
    0 4px 8px rgba(0, 0, 0, 0.24);
}

.level-node .level-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 34%),
    radial-gradient(circle at 50% 112%, rgba(0, 0, 0, 0.26), transparent 42%);
  pointer-events: none;
}

.level-node .level-portrait em {
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 2;
  min-width: 18px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0 3px;
  border-radius: 999px;
  background: rgba(64, 16, 11, 0.86);
  color: #fff2b2;
  border: 1px solid rgba(255, 240, 166, 0.7);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.level-node.current-level .level-portrait,
.level-node.medal-complete .level-portrait,
.level-node.locked .level-portrait {
  grid-row: auto;
  display: block;
  place-items: initial;
  width: min(54px, 96%);
  height: auto;
  aspect-ratio: 0.86;
  border-radius: 11px;
  border: 2px solid rgba(255, 240, 166, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.16), rgba(0, 0, 0, 0.1)),
    var(--hero-image) center 18% / cover no-repeat,
    linear-gradient(180deg, #e2c891, #836035);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.36),
    0 4px 8px rgba(0, 0, 0, 0.24);
  font-size: inherit;
}

.level-node.current-level {
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.5), transparent 28%),
    linear-gradient(180deg, #ffe56a, #f4a21f 52%, #c64516);
  color: #4c1708;
  transform: translateY(-2px);
}

.level-node.medal-complete {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 22%),
    linear-gradient(180deg, #29c86f, #0a8f44 58%, #05612f);
}

.level-node.locked {
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, #6d7575, #3f484b);
  color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18);
}

.level-node .level-number {
  display: none;
  font-size: 12px;
  line-height: 0.95;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.24);
}

.level-node .level-name {
  position: static;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  line-height: 1.05;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: none;
}

.level-node .level-stars {
  min-height: 14px;
  color: #ffe45a;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

.board-wrap {
  border: 3px solid rgba(255, 217, 85, 0.62);
  border-radius: 20px;
  background: rgba(2, 56, 58, 0.38);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.16),
    0 15px 28px rgba(0, 0, 0, 0.26);
}

.app.bamboo-mode .board-scene,
.app.town-mode .board-scene {
  background:
    linear-gradient(180deg, rgba(85, 48, 16, 0.06), rgba(13, 24, 25, 0.22)),
    var(--scene-bg, url("./assets/backgrounds/watermargin-tiger.jpg")) center / cover no-repeat;
  opacity: 0.86;
}

.app.tea-mode .board-scene {
  background:
    linear-gradient(180deg, rgba(99, 50, 10, 0.08), rgba(32, 12, 7, 0.24)),
    var(--scene-bg, url("./assets/backgrounds/watermargin-heroes-hall.jpg")) center / cover no-repeat;
  opacity: 0.86;
}

.app.palace-mode .board-scene {
  background:
    linear-gradient(180deg, rgba(180, 96, 10, 0.06), rgba(60, 14, 8, 0.22)),
    var(--scene-bg, url("./assets/backgrounds/watermargin-willow.jpg")) center / cover no-repeat;
  opacity: 0.86;
}

.app.dragon-mode .board-scene {
  background:
    linear-gradient(180deg, rgba(0, 85, 132, 0.06), rgba(2, 16, 44, 0.28)),
    var(--scene-bg, url("./assets/backgrounds/watermargin-snow-temple.jpg")) center / cover no-repeat;
  opacity: 0.88;
}

.tile {
  border-radius: 9px;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.76),
    inset 0 -4px 0 rgba(132, 80, 28, 0.2),
    0 var(--tile-side, 6px) 0 var(--tile-side-color, #b17028),
    0 8px 12px rgba(0, 0, 0, 0.22);
}

.tile .mahjong-face {
  border-radius: 8px;
}

.game-bottom {
  background: rgba(2, 44, 58, 0.62);
  border: 1px solid rgba(255, 217, 85, 0.38);
  border-radius: 18px;
  padding: 8px;
}

.tool-btn {
  min-height: 66px;
  grid-template-rows: 1fr auto;
  align-content: center;
  gap: 2px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1fc66c, #07853f 58%, #04592b);
  border: 2px solid rgba(255, 217, 85, 0.64);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.3),
    0 5px 0 #044b25,
    0 12px 18px rgba(0, 0, 0, 0.22);
}

.tool-btn i {
  font-style: normal;
  font-size: clamp(30px, 7vw, 42px);
  line-height: 1;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.24));
}

.tool-btn span {
  display: none;
}

.tool-btn strong {
  color: #fff4bb;
  font-size: clamp(19px, 4.6vw, 25px);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(67, 23, 8, 0.46);
}

.manual-panel {
  width: min(760px, calc(100vw - 22px));
  max-height: calc(100svh - 26px);
  overflow-y: auto;
  background: var(--clash-panel);
  color: var(--clash-ink);
  border: 3px solid rgba(255, 217, 85, 0.9);
  border-radius: 20px;
}

.manual-panel .settings-head {
  color: #fff8d4;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0fa34b, #05672f);
  border: 1px solid rgba(255, 217, 85, 0.6);
}

.manual-panel .settings-head p,
.manual-panel .settings-head h2 {
  color: inherit;
}

.manual-grid {
  display: grid;
  gap: 10px;
  padding: 12px 0 2px;
}

.manual-card {
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid rgba(8, 118, 216, 0.16);
  box-shadow: 0 8px 18px rgba(20, 43, 35, 0.08);
}

.manual-card h3 {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin: 0 0 8px;
  padding: 0 12px;
  border-radius: 10px;
  color: white;
  font-size: 16px;
}

.manual-card p,
.manual-card li {
  color: #263b31;
  font-size: 14px;
  line-height: 1.58;
}

.manual-card p,
.manual-card ol,
.manual-card ul {
  margin: 0;
}

.manual-card ol,
.manual-card ul {
  padding-left: 20px;
}

.manual-card.green h3 { background: linear-gradient(180deg, #20bb5d, #047d39); }
.manual-card.blue h3 { background: linear-gradient(180deg, #23a9ff, #0876d8); }
.manual-card.orange h3 { background: linear-gradient(180deg, #f6a52a, #c66a0a); }
.manual-card.jade h3 { background: linear-gradient(180deg, #16b76e, #087553); }
.manual-card.red h3 { background: linear-gradient(180deg, #ff4d40, #c21f21); }
.manual-card.slate h3 { background: linear-gradient(180deg, #566b82, #24364b); }

.mahjong-face.suit-zodiac {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 247, 184, 0.88), transparent 44%),
    linear-gradient(180deg, rgba(255, 243, 194, 0.92), rgba(255, 225, 119, 0.46));
  border: 1px solid rgba(194, 31, 33, 0.28);
}

.mahjong-face.suit-zodiac b {
  color: #c21f21;
  font-size: calc(var(--tile-size) * 0.68);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 8px rgba(255, 217, 85, 0.45);
}

.mahjong-face.suit-zodiac small {
  color: #a45b05;
  font-size: max(8px, calc(var(--tile-size) * 0.18));
}

.mahjong-face.suit-constellation {
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 28%, rgba(255, 232, 130, 0.85) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 76%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(37, 77, 165, 0.18), rgba(17, 32, 92, 0.12));
  border: 1px solid rgba(45, 94, 194, 0.26);
}

.mahjong-face.suit-constellation b {
  color: #1265cc;
  font-size: calc(var(--tile-size) * 0.68);
  line-height: 0.95;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 9px rgba(35, 169, 255, 0.38);
}

.mahjong-face.suit-constellation small {
  color: #2c5f9e;
  font-size: max(8px, calc(var(--tile-size) * 0.18));
}

.mahjong-face.suit-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: end;
  justify-items: center;
  padding: calc(var(--tile-size) * 0.05);
  border: 1px solid rgba(255, 231, 145, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 23%),
    linear-gradient(180deg, transparent 48%, rgba(35, 15, 10, 0.82) 100%),
    var(--hero-image) center 18% / cover no-repeat,
    linear-gradient(180deg, #d9b875, #4a2a18);
  color: #fff7c8;
  box-shadow:
    inset 0 0 0 1px rgba(80, 34, 18, 0.34),
    inset 0 -10px 16px rgba(0, 0, 0, 0.16);
}

.mahjong-face.suit-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.32), transparent 28%),
    radial-gradient(circle at 78% 16%, rgba(255, 229, 119, 0.2), transparent 34%);
  pointer-events: none;
}

.mahjong-face.suit-hero .hero-tile-number {
  position: absolute;
  left: calc(var(--tile-size) * 0.05);
  top: calc(var(--tile-size) * 0.05);
  z-index: 2;
  min-width: calc(var(--tile-size) * 0.27);
  height: calc(var(--tile-size) * 0.22);
  padding: 0 calc(var(--tile-size) * 0.04);
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 241, 167, 0.62);
  background: rgba(74, 17, 13, 0.76);
  color: #ffe56c;
  font-size: max(8px, calc(var(--tile-size) * 0.15));
  line-height: 1;
  font-weight: 950;
}

.mahjong-face.suit-hero b,
.mahjong-face.suit-hero small {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(85, 24, 12, 0.95),
    0 0 4px rgba(0, 0, 0, 0.58);
}

.mahjong-face.suit-hero b {
  font-family: "KaiTi", "STKaiti", "PingFang SC", serif;
  font-size: max(12px, calc(var(--tile-size) * 0.27));
  line-height: 1;
  letter-spacing: 0;
}

.mahjong-face.suit-hero small {
  color: #ffe770;
  font-size: max(8px, calc(var(--tile-size) * 0.16));
  line-height: 1.05;
  padding-bottom: 1px;
}

.capture-tray {
  position: relative;
  z-index: 5;
  width: min(540px, 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  padding: 7px 9px;
  border-radius: 16px;
  border: 2px solid rgba(255, 217, 85, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 236, 151, 0.18), rgba(86, 42, 17, 0.18)),
    rgba(23, 42, 38, 0.72);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    0 10px 22px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(8px);
}

.tray-title {
  color: #fff0a6;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.tray-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.tray-slot {
  aspect-ratio: 1;
  min-height: 48px;
  border-radius: 12px;
  border: 2px dashed rgba(255, 240, 166, 0.62);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 240, 166, 0.18), transparent 48%),
    rgba(4, 24, 26, 0.52);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.16);
}

.tray-slot.filled {
  border-style: solid;
  border-color: rgba(255, 217, 85, 0.92);
  background: linear-gradient(180deg, #fff7d8, #e8b65b);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 5px 0 rgba(122, 70, 24, 0.72),
    0 10px 18px rgba(0, 0, 0, 0.24);
}

.tray-slot .mahjong-face {
  width: 88%;
  height: 88%;
}

.tray-slot .mahjong-face b {
  font-size: clamp(24px, 8vw, 38px);
}

.tray-slot .mahjong-face small {
  font-size: clamp(8px, 2.7vw, 12px);
}

.tray-slot .mahjong-face.suit-hero {
  width: 92%;
  height: 92%;
}

.tray-slot .mahjong-face.suit-hero b {
  font-size: clamp(12px, 4vw, 22px);
}

.tray-slot .mahjong-face.suit-hero small {
  font-size: clamp(8px, 2.4vw, 12px);
}

.tray-slot.crushing {
  animation: trayCrush 360ms cubic-bezier(0.16, 0.88, 0.26, 1.18) forwards;
}

.tile.sending {
  animation: tileSendUp 220ms ease-out forwards;
}

.tray-particle {
  position: absolute;
  z-index: 32;
  width: var(--size, 7px);
  height: var(--size, 7px);
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8d4, #ffd955 48%, #c98016);
  box-shadow: 0 0 12px rgba(255, 217, 85, 0.82);
  pointer-events: none;
  animation: trayParticleBurst 760ms ease-out forwards;
}

.tray-particle.shard {
  border-radius: 2px 7px 2px 6px;
  background: linear-gradient(135deg, #fff8e7, #ffd955 48%, #b76218);
}

.score-float.tray-score {
  z-index: 35;
}

.app.bamboo-mode,
.app.tea-mode,
.app.town-mode,
.app.palace-mode,
.app.dragon-mode {
  --scene-bg: url("./assets/backgrounds/watermargin-scholar-river.jpg");
  --scroll-pos: center 50%;
  --scroll-tint-a: rgba(255, 226, 154, 0.24);
  --scroll-tint-b: rgba(78, 18, 12, 0.46);
  background:
    radial-gradient(circle at 50% 10%, var(--scroll-tint-a), transparent 30%),
    linear-gradient(180deg, rgba(255, 238, 194, 0.1), var(--scroll-tint-b)),
    var(--scene-bg),
    linear-gradient(140deg, #5d2014, #123c32 46%, #26100b);
  background-size: 100% 100%, 100% 100%, cover, 100% 100%;
  background-repeat: no-repeat;
  background-position: center, center, center, center;
}

.app[data-scene="bridge"] {
  --scene-bg: url("./assets/backgrounds/watermargin-tiger.jpg");
  --scroll-pos: 20% 44%;
  --scroll-tint-a: rgba(255, 235, 178, 0.28);
  --scroll-tint-b: rgba(32, 71, 43, 0.34);
}

.app[data-scene="market"] {
  --scene-bg: url("./assets/backgrounds/watermargin-heroes-hall.jpg");
  --scroll-pos: 42% 46%;
  --scroll-tint-a: rgba(255, 207, 118, 0.3);
  --scroll-tint-b: rgba(101, 45, 18, 0.42);
}

.app[data-scene="canal"] {
  --scene-bg: url("./assets/backgrounds/watermargin-scholar-river.jpg");
  --scroll-pos: 58% 54%;
  --scroll-tint-a: rgba(129, 223, 224, 0.18);
  --scroll-tint-b: rgba(9, 52, 64, 0.42);
}

.app[data-scene="gate"] {
  --scene-bg: url("./assets/backgrounds/watermargin-willow.jpg");
  --scroll-pos: 76% 45%;
  --scroll-tint-a: rgba(255, 226, 121, 0.32);
  --scroll-tint-b: rgba(128, 27, 17, 0.48);
}

.app[data-scene="river"] {
  --scene-bg: url("./assets/backgrounds/watermargin-snow-temple.jpg");
  --scroll-pos: 86% 56%;
  --scroll-tint-a: rgba(125, 217, 255, 0.18);
  --scroll-tint-b: rgba(13, 40, 79, 0.5);
}

.app[data-scene="dragon"] {
  --scene-bg: url("./assets/backgrounds/watermargin-siege.jpg");
  --scroll-pos: 92% 52%;
  --scroll-tint-a: rgba(255, 217, 85, 0.36);
  --scroll-tint-b: rgba(2, 8, 18, 0.62);
}

.app[data-scene] .board-scene {
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.04), rgba(4, 19, 24, 0.28)),
    var(--scene-bg) center / cover no-repeat;
  opacity: 0.82;
}

.hero-scroll {
  position: absolute;
  inset: -2%;
  z-index: 0;
  overflow: hidden;
  opacity: 0.58;
  pointer-events: none;
  mix-blend-mode: normal;
}

.hero-scroll::before,
.hero-scroll::after {
  content: "";
  position: absolute;
  inset: 7% 0 auto;
  height: 30%;
  background:
    radial-gradient(ellipse at 20% 48%, rgba(255, 237, 180, 0.14), transparent 44%),
    radial-gradient(ellipse at 72% 52%, rgba(54, 105, 78, 0.12), transparent 48%);
  pointer-events: none;
}

.hero-scroll::after {
  inset: auto 0 5%;
  height: 34%;
  transform: scaleX(-1);
}

.hero-figure {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 42px;
  height: 66px;
  transform: translate(-50%, -50%) scale(var(--scale));
  opacity: 0.42;
  animation: heroBreath 5.6s ease-in-out infinite;
  animation-delay: var(--delay);
}

.hero-figure i {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 34px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 248, 231, 0.22), transparent 34%),
    var(--hero-image) center 18% / cover no-repeat,
    linear-gradient(180deg, var(--robe, #5a8f53), var(--robe-dark, #294b33));
  border: 1px solid rgba(255, 237, 180, 0.54);
  box-shadow: 0 4px 9px rgba(48, 22, 10, 0.28);
}

.hero-figure i::before,
.hero-figure i::after {
  content: "";
  position: absolute;
  display: block;
}

.hero-figure i::before {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 248, 231, 0.2), transparent 45%, rgba(0, 0, 0, 0.18));
  border: 0;
}

.hero-figure i::after {
  display: none;
}

.hero-figure b,
.hero-figure em {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 48px;
  text-align: center;
  color: rgba(255, 245, 210, 0.92);
  text-shadow: 0 1px 3px rgba(60, 25, 8, 0.72);
  font-family: "Microsoft YaHei", Arial, sans-serif;
  letter-spacing: 0;
}

.hero-figure b {
  bottom: -3px;
  display: none;
  font-size: 10px;
  font-weight: 900;
}

.hero-figure em {
  display: none;
}

.hero-figure.named {
  opacity: 0.58;
}

.hero-figure.named b {
  display: block;
}

.hero-tone-0 { --robe: #b6402f; --robe-dark: #642016; --weapon-rot: -18deg; }
.hero-tone-1 { --robe: #2f8f69; --robe-dark: #164f40; --weapon-rot: 22deg; }
.hero-tone-2 { --robe: #c28b2e; --robe-dark: #704213; --weapon-rot: -30deg; }
.hero-tone-3 { --robe: #466e9d; --robe-dark: #1d3658; --weapon-rot: 28deg; }
.hero-tone-4 { --robe: #6e5aa8; --robe-dark: #34285f; --weapon-rot: -10deg; }
.hero-tone-5 { --robe: #9d4a37; --robe-dark: #4b2017; --weapon-rot: 34deg; }
.hero-tone-6 { --robe: #568d3f; --robe-dark: #284b23; --weapon-rot: -34deg; }
.hero-tone-7 { --robe: #ad7332; --robe-dark: #5b3416; --weapon-rot: 16deg; }
.hero-tone-8 { --robe: #35606f; --robe-dark: #173745; --weapon-rot: -22deg; }
.hero-tone-9 { --robe: #a13653; --robe-dark: #55182d; --weapon-rot: 24deg; }
.hero-tone-10 { --robe: #7a7f35; --robe-dark: #3d4218; --weapon-rot: -28deg; }
.hero-tone-11 { --robe: #5b5548; --robe-dark: #26231d; --weapon-rot: 30deg; }

@keyframes trayCrush {
  0% { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
  45% { opacity: 1; transform: scale(1.18) rotate(var(--hit-rot, 4deg)); filter: brightness(1.4); }
  100% { opacity: 0; transform: scale(0.38) rotate(18deg); filter: brightness(1.2); }
}

@keyframes tileSendUp {
  0% { opacity: 1; transform: translateY(calc(var(--tile-lift, 0px) * -1)) scale(1); }
  100% { opacity: 0; transform: translateY(calc(-28px - var(--tile-lift, 0px))) scale(0.72); }
}

@keyframes trayParticleBurst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  74% { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.16) rotate(var(--rot)); }
}

@keyframes heroBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(var(--scale)) translateY(0); }
  50% { transform: translate(-50%, -50%) scale(calc(var(--scale) * 1.04)) translateY(-2px); }
}

@media (min-width: 760px) {
  .manual-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .screen {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .title-block {
    margin-top: 8px;
    padding-top: 12px;
  }

  .cover-title {
    margin-top: 6px;
    padding-top: 0;
  }

  .title-block::before {
    height: 78px;
  }

  .cover-title::before {
    display: none;
  }

  .title-cover {
    height: auto;
  }

  .title-block h1 {
    font-size: clamp(42px, 14vw, 60px);
  }

  .challenge-ribbon {
    min-width: 160px;
    min-height: 34px;
    font-size: 18px;
  }

  .chapter-tabs {
    grid-template-columns: repeat(3, 1fr);
  }

  .level-map {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px 6px;
  }

  .level-node {
    border-radius: 12px;
  }

  .level-node .level-name {
    display: none;
  }

  .manual-panel {
    width: calc(100vw - 18px);
    border-radius: 18px;
  }
}