:root {
  color-scheme: dark;
  --teal: #062e30;
  --gold: #f5c96e;
  --ivory: #f5ead5;
  --muted: #b6c6bb;
  --line: #bd92523d;
  --serif: Georgia, "Songti SC", "Yu Mincho", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100svh; background-color: var(--teal); background-image: linear-gradient(#062e3028, #031f2240), url('assets/texture.png'); background-size: auto, 900px 900px; background-attachment: fixed; color: var(--ivory); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button, select { touch-action: manipulation; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ambient { position: fixed; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 45%, #16535470, transparent 65%), radial-gradient(ellipse at 50% 100%, #031c1d88, transparent 65%); pointer-events: none; }
.toolbar { max-width: 1120px; margin: 0 auto; min-height: 72px; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark { color: var(--muted); font-size: 11px; letter-spacing: 2px; white-space: nowrap; }
.wordmark-dot { color: var(--gold); margin: 0 5px; }
.tools { display: flex; align-items: center; gap: 10px; }
.icon-button { display: inline-flex; justify-content: center; align-items: center; min-width: 40px; height: 40px; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 50%; transition: color 150ms, background 150ms; }
.icon-button:hover { color: var(--gold); background: #f5c96e0a; }
.language-control { position: relative; }
.language-control::after { content: "⌄"; pointer-events: none; color: var(--gold); position: absolute; right: 8px; top: 9px; font-size: 12px; }
select { appearance: none; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 6px; min-height: 36px; padding: 6px 26px 6px 11px; font-size: 12px; cursor: pointer; max-width: 136px; }
select option { background: var(--teal); color: var(--ivory); }
.game { display: flex; flex-direction: column; align-items: center; padding: 6px 12px 28px; isolation: isolate; overflow-x: clip; }
.intro { text-align: center; z-index: 2; }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(28px, 4vw, 46px); font-weight: 400; line-height: 1.3; letter-spacing: .01em; color: var(--gold); text-shadow: 0 2px 20px #d58f3320; }
.subtitle { margin: 12px 0 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.stage { --heat: 0; position: relative; flex: none; width: min(610px, calc(100svh - 365px), calc(100vw - 24px)); min-width: 265px; aspect-ratio: 1; margin: 10px 0 -16px; perspective: 950px; user-select: none; -webkit-user-select: none; transform: translateZ(0); }
.stage img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.background-art { position: absolute; inset: -6%; width: 112% !important; height: 112% !important; opacity: .96; mask-image: radial-gradient(ellipse, #000 30%, #000e 51%, transparent 73%); -webkit-mask-image: radial-gradient(ellipse, #000 30%, #000e 51%, transparent 73%); transform-origin: center; will-change: transform; }
.halo-light { position: absolute; inset: 5%; border: 2px solid #e8b85b; border-radius: 50%; opacity: 0; box-shadow: 0 0 26px #e8b85b50, inset 0 0 26px #e8b85b25; transition: opacity 250ms; pointer-events: none; }
.stage.is-hot .halo-light { opacity: .25; }
.gold-aura { position: absolute; inset: -5%; border-radius: 50%; opacity: 0; background: radial-gradient(ellipse at 48% 50%, #ffe9a4a0 0%, #e8b85b70 25%, #e0a43635 47%, transparent 68%); pointer-events: none; will-change: opacity, transform; }
.ground-shadow { position: absolute; left: 8%; top: 83%; width: 76%; height: 9%; border-radius: 50%; background: #001314aa; filter: blur(10px); }
.body-layer { position: absolute; inset: 0; transform-origin: 44% 86%; will-change: transform; pointer-events: none; }
.muyu-art { filter: drop-shadow(0 10px 12px #001a1c38); }
.arrow-layer { position: absolute; inset: 0; transform-origin: 52% 59%; will-change: transform; }
.arrow-burst { position: absolute; inset: 0; transform-origin: 36.5% 58.5%; will-change: transform; }
.volume-bars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform-origin: 52% 64%; }
.gold-sheen { position: absolute; inset: 0; mask: url('assets/muyu-body.png') center / contain no-repeat; -webkit-mask: url('assets/muyu-body.png') center / contain no-repeat; pointer-events: none; }
.sheen-beam { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 32%, #fff4c565 47%, #fff9dc99 50%, #ffe6a34d 55%, transparent 68%); opacity: 0; will-change: opacity, transform; }
.arrow-art { position: absolute; inset: 0; }
.chart-glow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.chart-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.chart-glow.is-lit { animation: chart-fade 600ms ease-out both; }
.chart-glow.is-lit .chart-path { animation: chart-draw 130ms ease-out both; }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-fade { 0% { opacity: 0; } 18%, 38% { opacity: 1; } 100% { opacity: 0; } }
.mallet-layer { position: absolute; inset: -4.5% 0 4.5%; transform-origin: 87% 31%; pointer-events: none; will-change: transform; }
.knot-idle, .knot-swing { position: absolute; inset: 0; transform-origin: 83% 33.5%; pointer-events: none; will-change: transform; }
.knot-idle { animation: knot-idle 4.8s ease-in-out infinite alternate; }
@keyframes knot-idle { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.strike-flash { position: absolute; width: 13%; aspect-ratio: 1; top: 17%; left: 48%; border-radius: 50%; background: radial-gradient(circle, #fff8cb 0, #ffdc6d90 20%, transparent 68%); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.ripple-layer, #particles, .feedback-layer { position: absolute; inset: 0; pointer-events: none; }
#particles { width: 100%; height: 100%; }
.ripple { position: absolute; left: 6%; top: 60%; width: 80%; height: 13%; border: 2px solid #f6d68b; border-radius: 50%; box-shadow: 0 0 12px #ffc35170, inset 0 0 8px #ffc35130; }
.feedback { position: absolute; left: 45%; top: 13%; width: max-content; max-width: 88%; white-space: normal; text-align: center; line-height: 1.25; font-family: var(--serif); font-size: clamp(24px, 5.2vw, 42px); font-weight: 700; color: #ffda75; text-shadow: 1px 2px 0 #614016, 0 3px 4px #001819, 0 0 16px #d3973d50; transform: translateX(-50%); }
.feedback .feedback-small { display: block; text-align: center; font-size: clamp(11px, 2.8vw, 14px); line-height: 1.5; margin-top: 6px; color: var(--ivory); font-family: var(--sans); font-weight: 500; letter-spacing: .02em; }
.feedback.is-quiet { font-size: clamp(22px, 4.6vw, 32px); }
.feedback.is-long { font-size: clamp(19px, 4.8vw, 30px); }
.feedback.is-milestone { font-size: clamp(26px, 5.7vw, 44px); }
.feedback.is-egg { color: #ffe3a0; }
.feedback.is-volume { color: #b9f4bc; text-shadow: 1px 2px 0 #245638, 0 3px 4px #001819, 0 0 16px #8fd49c50; }
.combo { position: absolute; right: 5%; top: 48%; font-family: var(--sans); color: var(--gold); font-size: 13px; letter-spacing: .08em; font-weight: 600; opacity: 0; transform: rotate(-8deg); pointer-events: none; transition: opacity 150ms; }
.combo.is-visible { opacity: 1; }
#tap-target { position: absolute; left: 6%; top: 19%; width: 78%; height: 71%; z-index: 5; border: 0; padding: 0; border-radius: 45% 45% 25% 25%; background: transparent; -webkit-touch-callout: none; }
#tap-target:focus-visible { outline: 2px dashed #f5c96e99; outline-offset: 4px; }
#tap-target:focus:not([data-input="keyboard"]) { outline: none; }
#game[data-ready="false"] .body-layer, #game[data-ready="false"] .mallet-layer { opacity: .35; }
.game-footer { text-align: center; width: min(420px, 100%); z-index: 2; }
.tap-hint { margin: 0 0 13px; color: var(--gold); font-size: 14px; line-height: 1.5; }
.stats { color: var(--muted); display: flex; align-items: baseline; justify-content: center; gap: 7px; font-size: 12px; }
#tap-count { font-family: "SFMono-Regular", Consolas, monospace; color: var(--ivory); font-size: 25px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.2; }
.progress-row { display: flex; align-items: center; gap: 10px; margin: 12px auto 18px; max-width: 220px; }
progress { flex: 1; width: 100%; height: 3px; border: 0; appearance: none; border-radius: 6px; background: #d7b97324; color: var(--gold); overflow: hidden; }
progress::-webkit-progress-bar { background: #d7b97324; }
progress::-webkit-progress-value { background: var(--gold); border-radius: 6px; transition: width 150ms; }
progress::-moz-progress-bar { background: var(--gold); border-radius: 6px; }
.progress-label { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.share-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; min-height: 42px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: #062e3033; font-size: 12px; transition: color 150ms, border-color 150ms, background 150ms; }
.share-button:hover { color: var(--gold); border-color: #d2ac6170; background: #f5c96e08; }
.share-button .icon { width: 15px; height: 15px; }
dialog { width: min(450px, calc(100vw - 32px)); border: 1px solid #bd925255; border-radius: 16px; padding: 34px 28px 20px; background: #0a3435; color: var(--ivory); box-shadow: 0 25px 90px #00131490; }
dialog::backdrop { background: #001819b8; backdrop-filter: blur(6px); }
.dialog-close { position: absolute; top: 8px; right: 8px; }
dialog h2 { color: var(--gold); font: 400 26px/1.4 var(--serif); margin: 0 0 18px; }
dialog p { font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.share-actions { display: flex; gap: 10px; margin-top: 24px; }
.primary-button, .secondary-button { border: 1px solid var(--line); padding: 11px 15px; border-radius: 6px; font-size: 13px; }
.primary-button { color: #16312c; background: var(--gold); border-color: var(--gold); }
.secondary-button { color: var(--gold); background: transparent; }
.share-status { min-height: 22px; color: var(--muted); margin-bottom: 0; font-size: 12px; }
.legendary-overlay { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; visibility: hidden; opacity: 0; background: radial-gradient(ellipse at 50% 56%, #ffd76a1a, #edb75438 40%, #001d2570 100%); }
.legendary-radiance { position: absolute; inset: 0; background: repeating-conic-gradient(from -9deg at 50% 56%, transparent 0deg 10deg, #ffe6a429 10deg 13deg, transparent 13deg 24deg); mask-image: radial-gradient(ellipse at 50% 56%, transparent 12%, #000 44%, transparent 95%); -webkit-mask-image: radial-gradient(ellipse at 50% 56%, transparent 12%, #000 44%, transparent 95%); }
.legendary-wave { position: absolute; top: 56%; left: 50%; width: min(85vmin, 720px); aspect-ratio: 1; margin: 0; border: 3px solid #ffde8a; border-radius: 50%; opacity: 0; box-shadow: 0 0 25px #ffd36d75, inset 0 0 20px #ffd36d40; transform: translate(-50%, -50%); }
.legendary-copy { position: absolute; left: 12px; right: 12px; top: 18%; display: flex; align-items: center; flex-direction: column; gap: 12px; text-align: center; color: #ffe8a6; text-shadow: 0 2px 3px #372b14, 0 0 25px #e6a33575; }
.legendary-kicker { font: 500 12px var(--sans); letter-spacing: .3em; }
.legendary-title { font: 700 clamp(34px, 7vw, 72px)/1.2 var(--serif); letter-spacing: .06em; }
.legendary-subtitle { font-size: clamp(12px, 2.6vw, 16px); line-height: 1.6; color: #fff0c7; }
@media (max-height: 600px) { .legendary-copy { top: 12%; gap: 6px; } .legendary-title { font-size: 36px; } }
@media (max-width: 600px) {
  .toolbar { padding: 12px 18px; min-height: 62px; }
  .wordmark { letter-spacing: 1.2px; font-size: 10px; }
  .game { padding-top: 18px; }
  .subtitle { font-size: 14px; max-width: 310px; margin: 10px auto 0; }
  .stage { width: min(510px, calc(100vw - 12px)); margin-top: 19px; margin-bottom: -1px; }
  .game-footer { padding: 0 10px; }
  .tap-hint { margin-bottom: 12px; }
}
@media (max-height: 700px) and (min-width: 601px) {
  .toolbar { min-height: 54px; padding-block: 8px; }
  .stage { width: min(440px, calc(100svh - 310px)); margin-top: 0; margin-bottom: -20px; }
  h1 { font-size: 34px; }
  .subtitle { margin-top: 4px; }
}
@media (max-height: 600px) {
  .toolbar { min-height: 43px; padding: 3px 16px; }
  .game { padding: 3px 8px 9px; }
  h1 { font-size: 26px; }
  .subtitle { display: none; }
  .stage { width: min(500px, calc(100svh - 210px), calc(100vw - 12px)); min-width: 175px; margin: 2px 0 -8px; }
  .tap-hint { margin-bottom: 7px; font-size: 12px; }
  #tap-count { font-size: 20px; }
  .progress-row { margin-top: 7px; margin-bottom: 7px; }
  .share-button { min-height: 34px; padding: 5px 13px; }
  .feedback { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .chart-glow.is-lit { animation: none; opacity: .65; }
  .chart-glow.is-lit .chart-path { animation: none; stroke-dashoffset: 0; }
  progress::-webkit-progress-value, .halo-light { transition: none; }
  .knot-idle { animation: none; }
}