:root {
  color-scheme: light;
  font-family: "YouYuan", "幼圆", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  background: #102434;
  touch-action: none;
}

* { box-sizing: border-box; }

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

body {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(53, 177, 220, .36), transparent 42%),
    linear-gradient(160deg, #163f59 0%, #0b1d2b 70%);
}

button { font: inherit; -webkit-tap-highlight-color: transparent; }

button:disabled {
  cursor: wait;
  filter: saturate(.72);
}

#app {
  position: relative;
  container-type: inline-size;
  width: min(100vw, calc(100vh * .45));
  height: min(100vh, calc(100vw / .45));
  max-width: 540px;
  overflow: hidden;
  background: #69d4ef;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
  isolation: isolate;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
  body { display: block; background: #69d4ef; }
  #app {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    box-shadow: none;
  }
}

.panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.home-panel {
  text-align: center;
  background:
    radial-gradient(circle at 50% 52%, transparent 0 34%, rgba(44,154,210,.08) 50%, rgba(9,75,124,.23) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 36%, rgba(4,54,95,.16));
}

.brand {
  position: absolute;
  top: max(8.2%, env(safe-area-inset-top));
  left: 50%;
  width: 88%;
  transform: translateX(-50%);
  color: #fff8d7;
  filter: drop-shadow(0 7px 13px rgba(2,67,127,.24));
  letter-spacing: .03em;
}

.brand-small {
  display: block;
  margin-bottom: 2px;
  color: #eaffff;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: clamp(9px, 2.5vw, 14px);
  font-weight: 900;
  letter-spacing: .28em;
  text-shadow: 0 2px 0 rgba(19,95,160,.72);
}

.brand strong {
  display: block;
  line-height: .88;
  font-weight: 1000;
  color: #fff0a8;
  -webkit-text-stroke: 2.5px #116dc0;
  text-shadow: 0 2px 0 #fff, 0 5px 0 #2ca6d8, 0 9px 18px rgba(10,78,137,.22);
}

.brand strong span { display: block; }
.brand-main { font-size: clamp(37px, 10.7vw, 61px); letter-spacing: .08em; }
.brand-sub { margin-top: 8px; font-size: clamp(27px, 7.5vw, 43px); letter-spacing: .22em; text-indent: .22em; }

.start-bolt, .start-text, .start-arrow { display: inline-block; }
.start-bolt { margin-right: 7px; font-size: .72em !important; color: #fff1a6; text-shadow: 0 2px 0 #d26d12; }
.start-arrow { margin-left: 8px; font-size: 1.22em !important; line-height: .7; }

.home-stats {
  position: absolute;
  top: 26.4%;
  left: 50%;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
  color: #fff;
  font-size: clamp(11px, 3vw, 16px);
  white-space: nowrap;
}

.home-stats span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(38,130,187,.90), rgba(22,86,145,.88));
  box-shadow: 0 4px 0 rgba(7,55,100,.28), inset 0 1px 0 rgba(255,255,255,.35);
}

.primary-btn {
  position: absolute;
  left: 50%;
  bottom: 7.8%;
  min-width: 54%;
  padding: 13px 26px 15px;
  transform: translateX(-50%) rotate(-1deg);
  border: 3px solid #fff8c9;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(#ffd85a 0 46%, #ff9d2f 48% 100%);
  box-shadow: 0 7px 0 #c56319, 0 12px 26px rgba(52, 75, 90, .32), inset 0 2px 0 rgba(255,255,255,.78);
  text-shadow: 0 2px 0 #ae5714;
  font-size: clamp(25px, 7.2vw, 41px);
  font-weight: 1000;
  letter-spacing: .08em;
  pointer-events: auto;
  cursor: pointer;
}

.primary-btn span { font-size: 1.15em; }
.primary-btn:active { transform: translate(-50%, 5px) rotate(-1deg); box-shadow: 0 2px 0 #b64213; }

.home-panel .primary-btn {
  bottom: 8.8%;
  min-width: 46%;
  padding: 11px 23px 13px;
  border-radius: 999px;
  font-size: clamp(22px, 6.2vw, 35px);
  letter-spacing: .06em;
}

.control-hint {
  position: absolute;
  bottom: 2.3%;
  width: 100%;
  margin: 0;
  color: rgba(255,255,255,.95);
  font-size: clamp(10px, 2.7vw, 15px);
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,.45);
}

/* Cover B — mint-and-cream badge.  It uses the same production markup. */
html[data-cover="b"] .home-panel {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 35%, rgba(255,245,196,.10) 54%, rgba(20,105,120,.18) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%, rgba(14,77,105,.13));
}

html[data-cover="b"] .brand {
  top: max(14.2%, env(safe-area-inset-top));
  width: 82%;
  padding: 10px 14px 13px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(28,133,156,.20));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 9px 24px rgba(16,92,108,.18);
  backdrop-filter: blur(4px);
}

html[data-cover="b"] .brand-small {
  margin-bottom: 3px;
  color: #fff9d7;
  font-size: clamp(10px, 2.7cqw, 13px);
  letter-spacing: .20em;
  white-space: nowrap;
  text-shadow: 0 2px 0 #257c91;
}
html[data-cover="b"] .brand strong {
  color: #fffbe7;
  -webkit-text-stroke-color: #267e9d;
  text-shadow: 0 3px 0 #8ce3d8, 0 6px 0 rgba(21,105,132,.75);
}
html[data-cover="b"] .brand-main {
  font-size: clamp(42px, 12cqw, 54px);
  letter-spacing: .08em;
  white-space: nowrap;
}
html[data-cover="b"] .brand-sub {
  margin-top: 8px;
  font-size: clamp(30px, 8.4cqw, 38px);
  letter-spacing: .22em;
  text-indent: .22em;
  white-space: nowrap;
}
html[data-cover="b"] .home-stats {
  top: max(3.4%, env(safe-area-inset-top));
  gap: 8px;
  font-size: clamp(14px, 4cqw, 18px);
}
html[data-cover="b"] .home-stats span {
  gap: 6px;
  padding: 8px 12px;
  border-width: 3px;
  border-color: rgba(255,251,224,.9);
  background: linear-gradient(180deg, rgba(43,148,157,.92), rgba(24,105,128,.92));
}
html[data-cover="b"] .home-panel .primary-btn {
  bottom: 8.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 51%;
  min-width: 0;
  min-height: 116px;
  padding: 10px 22px 12px;
  border-radius: 30px;
  color: #226479;
  border-color: #fffdf0;
  background: linear-gradient(180deg, #fff8c9, #f6d878);
  box-shadow: 0 6px 0 #d8a646, 0 12px 25px rgba(24,88,104,.28), inset 0 2px 0 #fff;
  text-shadow: 0 1px 0 #fff;
}
html[data-cover="b"] .start-bolt {
  position: static;
  margin: 0;
  color: #ffb832;
  font-size: 20px !important;
}
html[data-cover="b"] .start-text {
  display: inline-block;
  font-size: clamp(32px, 9cqw, 40px) !important;
  line-height: 1;
  white-space: nowrap;
}
html[data-cover="b"] .primary-btn.is-loading .start-text {
  font-size: clamp(21px, 6.2cqw, 28px) !important;
}
html[data-cover="b"] .start-arrow {
  display: inline-block;
  margin: 0;
  font-size: clamp(27px, 7.4cqw, 34px) !important;
  line-height: .7;
}

/* Cover C — bright sporty ribbon. */
html[data-cover="c"] .home-panel {
  background:
    radial-gradient(circle at 50% 53%, transparent 0 33%, rgba(96,238,241,.08) 50%, rgba(19,53,119,.25) 100%),
    linear-gradient(180deg, rgba(31,72,154,.10), transparent 38%, rgba(12,39,98,.14));
}
html[data-cover="c"] .brand { top: max(8.7%, env(safe-area-inset-top)); width: 82%; }
html[data-cover="c"] .brand-small { color: #dffcff; text-shadow: 0 2px 0 #2854a0; }
html[data-cover="c"] .brand strong {
  color: #fff4a9;
  -webkit-text-stroke-color: #244d9e;
  text-shadow: 0 3px 0 #fff, 0 6px 0 #48c8df, 0 10px 18px rgba(20,54,122,.28);
}
html[data-cover="c"] .brand-main { font-size: clamp(39px, 11vw, 62px); }
html[data-cover="c"] .brand-sub {
  width: 50%;
  margin: 9px auto 0;
  padding: 3px 0 5px;
  border-radius: 999px;
  color: #eafcff;
  background: linear-gradient(90deg, transparent, rgba(36,78,158,.72) 18% 82%, transparent);
  -webkit-text-stroke-width: 1.5px;
  text-shadow: 0 2px 0 #244d9e;
}
html[data-cover="c"] .home-stats { top: 27%; gap: 6px; }
html[data-cover="c"] .home-stats span {
  border-color: rgba(224,251,255,.86);
  background: linear-gradient(180deg, rgba(36,83,159,.92), rgba(24,62,130,.94));
}
html[data-cover="c"] .home-panel .primary-btn {
  color: #fff;
  border-color: #dfffff;
  background: linear-gradient(180deg, #42d9dc, #148bb9);
  box-shadow: 0 6px 0 #17628c, 0 12px 26px rgba(21,53,105,.34), inset 0 2px 0 rgba(255,255,255,.72);
  text-shadow: 0 2px 0 #126789;
}

.gold-icon {
  display: inline-block;
  width: 20px;
  height: 12px;
  transform: skew(-14deg) rotate(-7deg);
  border: 2px solid #fff17c;
  border-radius: 3px;
  background: linear-gradient(145deg, #fff785 0 22%, #ffbe00 24% 74%, #d67a00 76%);
  box-shadow: 0 2px 0 #a65a00;
}

.gold-icon.large { width: 34px; height: 20px; border-width: 3px; }

.modal-panel {
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 38, 55, .56);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.modal-card {
  width: min(88%, 380px);
  padding: 28px 24px 22px;
  text-align: center;
  border: 5px solid rgba(255,255,255,.88);
  border-radius: 28px;
  background: linear-gradient(#e9fcff, #aeeff7);
  color: #16425b;
  box-shadow: 0 12px 0 #3fa2b2, 0 24px 50px rgba(0,0,0,.3), inset 0 0 0 3px #70cfdb;
}

.modal-icon { font-size: 52px; filter: drop-shadow(0 4px 0 #ed8b00); }
.modal-card h2 { margin: 4px 0 8px; font-size: clamp(24px, 6.5vw, 36px); }
.modal-card p { margin: 8px auto 18px; max-width: 280px; line-height: 1.6; font-weight: 700; }

.primary-btn.compact {
  position: static;
  width: 88%;
  min-width: 0;
  transform: none;
  padding: 10px 18px 12px;
  font-size: clamp(20px, 5.4vw, 30px);
}

.primary-btn.compact:active { transform: translateY(5px); }

.text-btn {
  margin-top: 14px;
  padding: 8px 18px;
  border: 0;
  color: #296177;
  background: transparent;
  font-weight: 800;
  text-decoration: underline;
  pointer-events: auto;
  cursor: pointer;
}

.eyebrow { font-weight: 900; color: #4d8ba1; letter-spacing: .14em; }
.result-score { margin: 2px 0; color: #16425b; font-size: clamp(52px, 16vw, 86px); font-weight: 1000; line-height: 1.05; }
.reward-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 14px; color: #b95a05; font-size: 28px; }
.new-best { margin: 0 0 14px !important; color: #f36c15; }

.pause-btn {
  position: absolute;
  z-index: 3;
  top: max(2.8%, env(safe-area-inset-top));
  right: 4.2%;
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255,255,255,.85);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(#ffbe27, #f47714);
  box-shadow: 0 4px 0 #ad4612;
  font-weight: 1000;
  pointer-events: auto;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.music-btn {
  position: absolute;
  z-index: 6;
  top: max(9.4%, env(safe-area-inset-top));
  left: 3.8%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255,255,255,.84);
  border-radius: 50%;
  color: #fff7c6;
  background: linear-gradient(180deg, rgba(43,148,157,.94), rgba(24,105,128,.96));
  box-shadow: 0 4px 0 rgba(16,76,94,.64), inset 0 1px 0 rgba(255,255,255,.38);
  font-family: "Arial Rounded MT Bold", sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
}

.music-btn .music-off { display: none; color: #ffe6d6; font-size: 23px; }
.music-btn.is-muted .music-on { display: none; }
.music-btn.is-muted .music-off { display: block; }
.music-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(16,76,94,.72); }

.pause-bars { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pause-bars i {
  display: block;
  width: 6px;
  height: 19px;
  border-radius: 4px;
  background: #fff8df;
  box-shadow: inset 0 -2px 0 rgba(177,78,10,.18);
}
.resume-play { display: none; color: #fff8df; font-size: 20px; transform: translateX(1px); }
.pause-btn.is-paused .pause-bars { display: none; }
.pause-btn.is-paused .resume-play { display: block; }

#webgl-hud {
  position: absolute;
  z-index: 3;
  top: max(2.8%, env(safe-area-inset-top));
  left: 4.5%;
  right: 17%;
  display: grid;
  grid-template-columns: 1fr .75fr 1.45fr;
  align-items: center;
  min-height: 49px;
  padding: 0 16px;
  border: 3px solid rgba(255,255,255,.25);
  border-radius: 25px;
  color: #fff;
  background: rgba(28, 77, 106, .9);
  box-shadow: 0 5px 0 rgba(12, 40, 57, .3), inset 0 2px 0 rgba(255,255,255,.15);
  font-size: clamp(15px, 4.5vw, 24px);
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(0,0,0,.22);
  pointer-events: none;
}

#webgl-hud span { display: flex; align-items: center; gap: 7px; }
#webgl-hud .hud-multi { color: #ffef3d; justify-content: center; text-shadow: 0 2px 0 #9b7100; }
#webgl-hud .hud-score { justify-content: flex-end; }
#webgl-hud .power-row {
  position: absolute;
  top: 57px;
  left: 15%;
  min-width: 70%;
  padding: 5px 12px;
  text-align: center;
  border-radius: 999px;
  background: rgba(19, 117, 137, .78);
  font-size: 12px;
}

.toast {
  position: absolute;
  z-index: 5;
  top: 18%;
  left: 50%;
  padding: 8px 18px;
  transform: translateX(-50%);
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: rgba(28, 73, 96, .85);
  box-shadow: 0 5px 12px rgba(0,0,0,.22);
  font-size: clamp(13px, 3.4vw, 19px);
  font-weight: 900;
  white-space: nowrap;
  transition: opacity .2s ease, transform .2s ease;
}

.scene-transition {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.9) 0 5%, rgba(93,232,244,.62) 28%, rgba(19,134,174,.14) 58%, transparent 76%),
    linear-gradient(180deg, rgba(95,225,244,.08), rgba(46,183,211,.38), rgba(255,255,255,.18));
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.scene-transition span {
  padding: 9px 23px;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 999px;
  color: #fff;
  background: rgba(16,101,137,.7);
  box-shadow: 0 8px 28px rgba(9,82,118,.32);
  font-size: clamp(17px, 4.8vw, 26px);
  font-weight: 1000;
  letter-spacing: .14em;
  text-shadow: 0 2px 0 rgba(0,0,0,.24);
}

.legal-note {
  position: absolute;
  z-index: 7;
  right: 5px;
  bottom: 3px;
  color: rgba(255,255,255,.48);
  font-size: 7px;
  pointer-events: none;
}

@media (max-aspect-ratio: 9/20) {
  #app { width: 100vw; height: min(100vh, calc(100vw / .45)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}