:root {
  color-scheme: light;
  --paper:#f9f5e9; --ink:#24243d; --muted:#57536c; --violet:#5b3ac6;
  --deep:#2d2453; --lilac:#e5ddff; --line:#ded5c8; --yellow:#ffd76b;
  --display:'Microsoft YaHei', 'PingFang SC', 'Noto Sans CJK SC', sans-serif;
  font-family:var(--display); color:var(--ink); background:var(--paper);
  font-synthesis:none;
}
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; min-width:280px; background-image:url("assets/grain.svg"); }
button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; }
button:focus-visible { outline:3px solid #8d5af5; outline-offset:4px; }
button:not(:disabled):active { translate:0 1px; }
img { display:block; max-width:100%; }
.symbols { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.shell { width:min(1240px,calc(100% - 96px)); margin-inline:auto; }
.masthead { border-bottom:1px solid var(--line); background:#fdfaf2b3; }
.masthead-inner { height:70px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; font-size:16px; line-height:1.18; font-weight:900; letter-spacing:.025em; }
.brand small { display:block; margin-top:4px; font:700 9px/1.1 ui-monospace,monospace; letter-spacing:.16em; color:#665687; }
.brand-mark { display:grid; width:39px;height:39px;place-items:center;background:#7051d6;color:#fff5a7;border:1px solid #483590;border-radius:12px;box-shadow:2px 3px 0 #302252;transform:rotate(-7deg); }
.brand-mark .icon { width:25px;height:25px;fill:currentColor;stroke-width:1; }
.header-actions { display:flex; gap:9px; }
.quiet-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:39px; padding:0 12px; border:1px solid #d7cddd; border-radius:9px; background:#fffdf8; color:#393252; font-size:13px; font-weight:700; transition:background .18s,border-color .18s; }
.quiet-button:hover { background:#f0e9ff; border-color:#a992e3; }
.quiet-button .icon { width:17px; height:17px; }
.intro { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:30px 0 27px; }
.eyebrow,.note-label,.start-kicker { display:flex; align-items:center; gap:9px; color:#593e9a; font-weight:800; font-size:12px; letter-spacing:.13em; }
.eyebrow span { font-size:15px; color:#7048cf; }
.eyebrow i { width:16px;height:1px;background:#9883c6; }
h1,h2,p { margin:0; }
.intro h1 { position:relative; margin:3px 0 15px; font-size:clamp(52px,5.75vw,83px); line-height:1.03; letter-spacing:-.075em; font-weight:900; }
.intro h1 span { position:relative; color:var(--violet); }
.intro h1 svg { position:absolute; width:102%; left:1%; height:24%; bottom:-11%; fill:none; stroke:#efaa38; stroke-width:4; stroke-linecap:round; }
.intro p { font-size:15px; line-height:1.65; color:var(--muted); font-weight:600; }
.chapter-stamp { display:flex; flex-direction:row-reverse; align-items:center; gap:8px; margin:0 13px 8px 0; color:#5e449e; transform:rotate(6deg); }
.chapter-stamp svg { width:68px; height:65px; fill:#ffdc6e; stroke:#5f469d; stroke-width:2.1; stroke-linejoin:round; stroke-linecap:round; }
.chapter-stamp svg path+path { fill:none; stroke-width:1.9; }
.chapter-stamp span { font-size:16px; font-weight:900; }
.chapter-stamp small { display:block; margin-top:4px; font:700 9px/1 ui-monospace,monospace; letter-spacing:.09em; }
.arcade { display:grid; grid-template-columns:minmax(0,1fr) 262px; align-items:stretch; gap:24px; }
.machine { min-width:0; padding:0 12px; border:2px solid var(--deep); border-radius:23px; background:#fffdf7; box-shadow:0 6px 0 var(--deep), 0 12px 24px #42306812; }
.machine-top { height:45px; padding:0 7px; display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:14px; font-weight:900; }
.machine-top span { display:flex; align-items:center; gap:8px; }
.machine-top i { display:block; width:9px;height:9px;border-radius:50%; background:#80d6a1; border:1px solid #388955; box-shadow:0 0 0 3px #e3f8e9; }
.machine-top .machine-index { font:700 11px/1 ui-monospace,monospace; letter-spacing:.13em; color:#65577e; }
.machine-index i { border:0; box-shadow:none; background:#b49bff; width:7px; height:7px; }
.arena { position:relative; isolation:isolate; overflow:hidden; height:clamp(385px,32.5vw,475px); border:1.5px solid #8d77bc; border-radius:15px; background:#e6deff; background-image:url("assets/grain.svg"),linear-gradient(0deg,#f3e5fc8f,transparent 63%),repeating-linear-gradient(0deg,transparent 0 25px,#8e75d41c 26px 27px),repeating-linear-gradient(90deg,transparent 0 25px,#8e75d41c 26px 27px); outline:none; }
.arena[data-state="playing"] { touch-action:none; }
.scene-details,.in-game,.particle-layer { position:absolute; inset:0; pointer-events:none; }
.scene-details { overflow:hidden; }
.cloud,.doodle,.landscape { position:absolute; }
.cloud { width:clamp(76px,13.4%,140px); fill:#fffcf483; stroke:#9576cfad; stroke-width:1.45; stroke-linejoin:round; }
.cloud-left { top:22%; left:6%; transform:rotate(-10deg); }
.cloud-right { top:19%; right:9%; transform:scaleX(-1) rotate(-8deg); }
.doodle { width:25px; height:25px; fill:#ffdf7c; stroke:#a36e40; stroke-width:1.15; stroke-linejoin:round; }
.doodle-a { top:16%; left:36%; transform:rotate(-12deg); }
.doodle-b { top:32%; right:9%; width:16px; height:16px; fill:#fff9d1; transform:rotate(14deg); }
.doodle-c { bottom:23%; right:32%; transform:rotate(14deg); }
.doodle-d { bottom:18%; left:32%; width:15px; height:15px; fill:#ffe9a8; transform:rotate(-19deg); }
.landscape { width:100%; height:clamp(89px,22%,140px); left:0; bottom:0; }
.hill-pink { fill:#ffcbdc; stroke:#c577a0; stroke-width:1.8; vector-effect:non-scaling-stroke; }
.hill-yellow { fill:#ffe9a3; }
.hill-ink { fill:none; stroke:#c89656; stroke-width:1.3; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.hud { position:absolute;z-index:6;top:11px;left:11px;right:11px;display:flex;align-items:center;gap:7px;pointer-events:none; }
.hud-chip { height:32px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 9px;background:#fffcf4;border:1px solid #aa95d3;border-radius:9px;box-shadow:0 2px 0 #ad98d37a;color:#493970;white-space:nowrap; }
.score { font:700 13px/1 ui-monospace,monospace; }
.score b { color:#352355;font-size:16px;min-width:1ch;text-align:right; }
.score .icon { width:16px;height:16px;fill:#fbc45f;stroke:#a76c2d;stroke-width:1.25; }
.hearts { gap:3px; }
.hearts .icon { width:16px;height:16px;fill:#f381a6;stroke:#a24269;stroke-width:1.5; }
.hearts .empty { fill:#efe4f2;stroke:#836985; }
.pause-button { pointer-events:auto; margin-left:auto;min-width:36px;padding:0 6px; }
.pause-button:hover { background:#f8ecff; }
.pause-button .icon { width:17px;height:17px;stroke-width:2.4; }
.poster { position:absolute;bottom:8.2%;width:32%;display:grid;justify-items:center;align-items:end;transition:opacity .22s;pointer-events:none; }
.poster-monster { left:1.45%;color:#3e2957; }
.poster-hero { right:1.45%;color:#463274; }
.poster-ring { position:absolute; z-index:-1; top:17%; width:73%; aspect-ratio:1; border:1.5px dashed #a575a0; border-radius:52% 48% 53% 47%; background:radial-gradient(circle at 45% 39%,#ffe9d4,#ffd7d8 70%); transform:rotate(-8deg); }
.poster-hero .poster-ring { width:73%;border-color:#9e80c9;background:radial-gradient(circle at 45% 39%,#fdf1c7,#efdbf7 75%);transform:rotate(7deg); }
.poster [data-character] { width:100%; margin-bottom:3px; transform-origin:50% 92%; }
.poster-hero [data-character] { width:57%; }
.poster [data-character] svg { width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(1px 5px 2px #4e305a42); }
.poster-monster [data-character] { animation:sway-monster 4.4s ease-in-out infinite; }
.poster-hero [data-character] { animation:sway-hero 3.7s ease-in-out infinite; }
.poster span { position:relative; padding:5px 10px; background:#fff5d6; border:1px solid #7c5489; border-radius:6px; box-shadow:1px 2px 0 #8d6caa50; font-size:clamp(11px,1.15vw,15px); font-weight:900; white-space:nowrap; transform:rotate(-7deg); }
.poster-hero span { background:#f9f4ff; transform:rotate(7deg); }
@keyframes sway-monster {0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes sway-hero {0%,100%{transform:translateY(-3px) rotate(4deg)}50%{transform:translateY(2px) rotate(0deg)}}
.arena:not([data-state="ready"]) .poster,.arena[data-state="ready"] .in-game { visibility:hidden; }
.arena:not([data-state="ready"]) .doodle { opacity:.48; }
.overlay { position:absolute;z-index:8;display:grid;justify-items:center;align-content:center; text-align:center; }
.start-panel { top:0;bottom:0;left:28%;right:28%;padding-bottom:4px;pointer-events:none; }
.start-panel button { pointer-events:auto; }
.start-kicker { justify-content:center; white-space:nowrap; color:#563f91; letter-spacing:.14em; }
.start-kicker span { color:#7048c3; font-size:16px; }
.overlay h2 { margin:7px 0 9px;font-size:clamp(32px,4.2vw,60px);letter-spacing:-.07em;line-height:1.08;font-weight:900; }
.start-panel h2 { white-space:nowrap; text-shadow:-1px -1px #fcf5ff,2px 2px #fcf5ff,3px 4px #bfa9ed; }
.overlay p { font-size:14px;line-height:1.6;color:#4b4164; font-weight:700; }
.start-panel p { text-wrap:balance; }
.action { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 19px;border:1.5px solid #38245e;border-radius:12px;background:var(--violet);box-shadow:0 4px 0 #352057;color:#fffdf7;font-size:16px;font-weight:900;white-space:nowrap;transition:background .18s,box-shadow .18s; }
.start-panel .action,.pause-panel .action { margin-top:19px; }
.action:hover { background:#704dde; }
.action:active { box-shadow:0 2px 0 #352057; }
.action .icon { width:19px;height:19px; }
.action .icon:has(use[href="#i-play"]) { fill:currentColor;stroke-width:1.45; }
.pause-panel,.result-panel { inset:0; padding:12px; background:#e5d8f39f; backdrop-filter:blur(3px); }
.result-card { padding:20px 24px 23px; width:min(100%,365px); background:#fffcf3; border:1.5px solid #665090; border-radius:18px; box-shadow:0 5px 0 #6b53978c; }
.result-card h2 { font-size:clamp(25px,3.9vw,44px); }
.result-card p { font-weight:600; }
.result-medal { position:relative; width:91px; margin:0 auto 7px; animation:medal-in .62s cubic-bezier(.16,1.34,.48,1) both; }
.result-medal::before,.result-medal::after { position:absolute;content:'✦';font-size:28px;color:#b16434;top:19%;left:-23px;animation:sparkle 1.3s ease-in-out infinite alternate; }
.result-medal::after { content:'✧'; left:auto; right:-24px;top:59%;color:#7951bd;animation-delay:-.7s; }
.result-actions { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin-top:15px; }
.result-actions .action { min-height:43px; }
.result-panel[data-won="true"] { background:#efe0f3a8; }
@keyframes medal-in {from{transform:scale(.22) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes sparkle {from{transform:scale(.9);opacity:.72}to{transform:scale(1.17) rotate(10deg);opacity:1}}
.machine-bottom { min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:7px 4px 8px; }
.movement { display:flex;align-items:center;gap:6px; }
.key-button { display:grid;place-items:center;width:37px;height:35px;padding:0;border:1px solid #ccbcd9;background:#f7f1ff;border-radius:8px;box-shadow:0 2px 0 #ccbcd9;color:#4c3877;touch-action:none;user-select:none; }
.key-button:disabled { color:#74628e;background:#faf6fd; }
.key-button:not(:disabled):hover,.key-button.pressed { background:#e5d5fc; }
.key-button.pressed { transform:translateY(1px);box-shadow:0 1px 0 #b09dcb; }
.control-tip { margin-left:3px;font-size:12px;font-weight:700;white-space:nowrap;color:#655a76; }
.rainbow-button { display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 8px;border:1px solid #d4b6e3;border-radius:8px;background:#f3e7fc;box-shadow:0 2px 0 #d4b6e3;color:#63398b;font-size:13px;font-weight:900;white-space:nowrap; }
.rainbow-button .icon { width:16px;height:16px;fill:#d7aafb;stroke:#6e4197;stroke-width:1.5; }
.rainbow-button b { padding:3px 4px;background:#fcf6ff;border-radius:4px;font:700 11px/1 ui-monospace,monospace; }
.rainbow-button:not(:disabled) { background:#ffe48e;border-color:#b67e33;box-shadow:0 2px 0 #b67e33;color:#67346a; }
.rainbow-button:not(:disabled) .icon { fill:#fff3b0; }
.rainbow-button:not(:disabled):hover { background:#ffedb6; }
.field-notes { display:flex;flex-direction:column;justify-content:flex-start;min-width:0;padding:19px 18px 17px;background:#fffcf2;background-image:url('assets/grain.svg');border:1px solid #ded2c8;border-radius:19px;box-shadow:0 4px 0 #e9ddc8; }
.note-label { padding-bottom:12px; border-bottom:1px dashed #d5c8dd; }
.note-label .icon { width:15px;height:15px; }
.note-label span { margin-left:auto;color:#76668b;font:700 12px/1 ui-monospace,monospace; }
.field-notes h2 { margin:16px 0 12px; font-size:26px; letter-spacing:-.055em; }
.instructions { display:grid; gap:13px; list-style:none; padding:0; margin:0 0 19px; }
.instructions li { display:flex; align-items:flex-start; gap:9px; }
.rule-icon { display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid currentColor;border-radius:9px; }
.rule-icon .icon { width:17px;height:17px; }
.rule-star { color:#91601d;background:#ffe991;transform:rotate(-5deg); }
.rule-star .icon { fill:#ffcf59; }
.rule-dodge { color:#60429a;background:#ece0ff;transform:rotate(4deg); }
.rule-dodge .icon { fill:#9970d0; }
.rule-bolt { color:#985077;background:#ffdeec;transform:rotate(-4deg); }
.rule-bolt .icon { fill:#f096be; }
.instructions b { font-size:14px; line-height:1.35; }
.instructions p { margin-top:3px; font-size:12px; font-weight:600; line-height:1.55; color:#5f556e; }
.badge { display:flex;align-items:center;gap:8px;width:100%;margin-top:auto;text-align:left;padding:8px;background:#f0e7ff;border:1px solid #cdb9ee;border-radius:12px;transition:background .2s;color:#513385; }
.badge:hover { background:#e9d9ff; }
.badge-thumb { flex:none;width:44px;height:44px; }
.badge.teaser .badge-thumb { filter:saturate(.75); }
.badge b,.badge small { display:block;white-space:nowrap;line-height:1.2; }
.badge b { font-size:13px; }
.badge small { margin-top:5px;color:#675480;font-size:11px; }
.badge .icon { margin-left:auto;width:14px;height:14px; }
.badge:not(.teaser) { background:#fff0b8;border-color:#d8a951; }
.footer { margin:21px 0 17px;padding:10px 0 0;display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;color:#615674;font-size:12px;font-weight:700; }
.footer span:first-child { display:flex;align-items:center;gap:5px; }
.footer .icon { width:14px;height:14px;color:#6940b5;fill:#dec5fd; }
.actor { position:absolute;transform:translateX(-50%); }
.actor [data-character] { position:relative;width:100%; }
.actor [data-character] svg { width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(1px 3px 2px #4e305a45); }
.boss { left:50%; top:11px; width:clamp(76px,13%,123px); opacity:.9; }
.boss [data-character] { animation:sway-monster 2.8s ease-in-out infinite; }
.boss.toss [data-character] { animation:toss .43s ease both; }
@keyframes toss {0%,100%{transform:rotate(0deg)}45%{transform:translateY(5px) rotate(-9deg) scale(1.05,.97)}}
.player { width:clamp(51px,9.5%,82px); bottom:15px; z-index:3; }
.player [data-character] { transform-origin:50% 90%; transform:rotate(var(--tilt,0deg)); transition:transform .13s ease; z-index:2; }
.player-shadow { width:85%;height:13px;bottom:0;left:8%;position:absolute;border-radius:50%;background:#6c356855;filter:blur(2px); }
.player.hit [data-character] { animation:ouch .45s ease-in-out; }
@keyframes ouch {0%,100%{translate:0 0}25%{translate:6px 0}60%{translate:-6px 0}}
.shield { width:145%; height:95%; position:absolute; left:-22%; bottom:-1%; border:2px dashed #875ac9;border-radius:60% 54%; background:#e8c6ff49;box-shadow:0 0 9px #fef3ff; opacity:0; }
.player.guarded .shield { opacity:1; }
.player.rainbow-guard .shield { border-color:#a45ead;background:#ffe5f66b;box-shadow:0 0 14px #fff59b; }
.particle-layer { overflow:hidden; }
#drops { z-index:4; }
#effects { z-index:9; }
.drop { position:absolute;display:grid;place-items:center;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;will-change:transform; }
.drop svg { width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1.5px 1px #6a3d5f5b); }
.drop.star { color:#a8732f; }
.drop.star use { fill:#ffe47d; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.drop.ink { width:31px;height:31px;margin:-15.5px 0 0 -15.5px; }
.drop.ink .splat { fill:#64438c;stroke:#34274e;stroke-width:1.5;stroke-linejoin:round; }
.burst { position:absolute; width:8px;height:8px;margin:-4px;border-radius:2px;background:var(--piece,#ffcc59);animation:burst .62s ease-out forwards; }
@keyframes burst { from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(150deg);opacity:0} }
.pop { position:absolute;pointer-events:none;transform:translateX(-50%);white-space:nowrap;color:#513473;text-shadow:1px 1px #fff9e5,-1px 1px #fff9e5;font-size:clamp(14px,2.3vw,21px);font-weight:900;animation:float-pop 1.1s ease-out forwards; }
@keyframes float-pop {0%{opacity:0;translate:0 8px}15%{opacity:1}68%{opacity:1}100%{opacity:0;translate:0 -34px}}
.rainbow-effect { position:absolute;width:clamp(235px,65%,560px);left:50%;bottom:7%;height:auto;overflow:visible;transform:translateX(-50%);animation:rainbow-wave 1.16s ease-out forwards; }
@keyframes rainbow-wave {0%{scale:.24;opacity:0}20%{opacity:.95}66%{opacity:.8}100%{scale:1.55;opacity:0;translate:0 -65px}}
.power-medal { position:absolute;top:14%;right:4%;width:clamp(57px,13%,110px);filter:drop-shadow(0 3px 3px #5e337f60);animation:power-medal 1.62s ease both; }
@keyframes power-medal {0%{opacity:0;transform:scale(.3) rotate(-13deg)}25%{opacity:1;transform:scale(1.1) rotate(9deg)}72%{opacity:1;transform:scale(1) rotate(4deg)}100%{opacity:0;transform:translateY(-12px) scale(.87) rotate(8deg)}}
.confetti { position:absolute;top:-16px;width:8px;height:13px;background:var(--piece);border-radius:2px;animation:confetti 2.7s var(--delay) linear forwards;opacity:0; }
@keyframes confetti {4%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--fall)) rotate(360deg)}}
.dialog { width:min(760px,calc(100% - 28px)); max-height:calc(100dvh - 32px); padding:19px; color:var(--ink); background:#fffaf0; border:2px solid #60478d; border-radius:19px; box-shadow:0 6px 0 #73569e; overflow:auto; }
.dialog::backdrop { background:#241838aa; backdrop-filter:blur(3px); }
.dialog-heading { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px; }
.dialog h2 { font-size:clamp(22px,4.6vw,36px);margin:5px 0 0;line-height:1.2;letter-spacing:-.05em; }
.dialog .close { width:38px;min-height:38px;padding:0;flex:none; }
.dialog figure { margin:0; }
.dialog figure img { width:100%;max-height:68dvh;object-fit:contain;border-radius:10px;background:#ebdfd0; }
.dialog figcaption,.badge-dialog p { margin:11px 0 0;color:#5b4b70;font-size:14px;font-weight:600;line-height:1.65; }
.badge-dialog { width:min(370px,calc(100% - 28px));text-align:center;padding:22px 21px 26px; }
.badge-dialog .close { position:absolute;top:12px;right:12px; }
.badge-celebration { display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px; }
.badge-celebration img { width:118px;animation:medal-in .65s both; }
.badge-celebration span { color:#a7632e;font-size:26px;animation:sparkle 1.1s ease-in-out infinite alternate; }
.badge-dialog .eyebrow { justify-content:center; }
.badge-dialog .action { margin-top:16px; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
.noscript { margin:10px 0;color:#583989; }
@media(max-width:1130px) {
  .shell { width:calc(100% - 54px); }
  .arcade { grid-template-columns:minmax(0,1fr) 229px;gap:17px; }
  .field-notes { padding-inline:14px; }
}
@media(max-width:870px) {
  .shell { width:calc(100% - 32px); }
  .arcade { grid-template-columns:minmax(0,1fr);gap:19px; }
  .field-notes { padding:14px; }
  .field-notes h2 { margin:12px 0;font-size:23px; }
  .instructions { grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:15px; }
  .badge { width:min(100%,230px); }
  .arena { height:clamp(345px,54vw,445px); }
}
@media(max-width:560px) {
  .shell { width:calc(100% - 24px); }
  .masthead-inner { height:58px; }
  .brand { font-size:13px;gap:7px; }
  .brand small { font-size:8px; }
  .brand-mark { width:32px;height:32px;border-radius:9px; }
  .brand-mark .icon { width:20px;height:20px; }
  .header-actions { gap:5px; }
  .quiet-button { min-height:35px;padding:0 8px;font-size:12px;gap:5px; }
  .quiet-button .icon { width:15px;height:15px; }
  .intro { padding:19px 0 15px;gap:4px; }
  .intro .eyebrow { font-size:10px; }
  .intro h1 { font-size:clamp(39px,12.1vw,61px);margin-bottom:10px; }
  .intro p { font-size:12px; }
  .chapter-stamp { align-self:center;margin:0 3px 8px 0; }
  .chapter-stamp svg { width:49px;height:47px; }
  .chapter-stamp span { display:none; }
  .machine { padding:0 6px;border-radius:17px; }
  .machine-top { height:36px;padding:0 5px;font-size:12px; }
  .machine-top .machine-index { font-size:9px; }
  .arena { height:clamp(324px,calc(53dvh - 53px),445px);border-radius:11px; }
  .hud { top:7px;left:7px;right:7px;gap:5px; }
  .hud-chip { height:29px;padding:0 6px; }
  .hearts .icon { width:14px;height:14px; }
  .start-panel { top:40px;left:7%;right:7%;bottom:auto;padding:0; }
  .start-panel h2 { margin:3px 0 5px;font-size:clamp(34px,9vw,46px); }
  .start-kicker { font-size:10px; }
  .start-panel p { font-size:12px; }
  .start-panel .action { margin-top:10px; min-height:40px; }
  .poster { bottom:6.5%;width:39%; }
  .poster-monster { left:7%; }
  .poster-hero { right:5%; }
  .poster-hero [data-character] { width:55%; }
  .poster span { padding:3px 6px; }
  .doodle-a { left:10%;top:37%;width:20px;height:20px; }
  .doodle-b { right:8%;top:37%; }
  .doodle-c { right:44%;bottom:23%;width:18px;height:18px; }
  .doodle-d { display:none; }
  .cloud-left { top:27%;left:-4%; }
  .cloud-right { top:21%;right:-2%; }
  .machine-bottom { min-height:55px;padding-inline:1px; }
  .key-button { width:41px;height:42px; }
  .rainbow-button { min-height:42px;font-size:12px;padding-inline:7px;touch-action:manipulation; }
  .control-tip { font-size:10px;white-space:normal;line-height:1.3; }
  .footer { font-size:11px;margin-top:14px; }
}
@media(max-width:480px) {
  .instructions { grid-template-columns:1fr;gap:10px; }
  .instructions br { display:none; }
}
@media(max-width:389px) {
  .sound-button span { display:none; }
  .sound-button { min-width:34px; }
  .control-tip { max-width:75px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;transition:none!important; }
  .poster [data-character],.boss [data-character],.player.hit [data-character],.badge-celebration img,.result-medal,.badge-celebration span,.result-medal::before,.result-medal::after { animation:none; }
  .confetti,.burst { display:none; }
  .rainbow-effect,.power-medal,.pop { animation:soft-effect 1.3s ease both; }
}
@keyframes soft-effect {0%,100%{opacity:0}15%,73%{opacity:1}}