:root {
  --ink: #312452;
  --purple: #6d36d9;
  --purple-dark: #4b249f;
  --pink: #ff4f9a;
  --yellow: #ffd84d;
  --cyan: #55e1ed;
  --cream: #fff9e9;
  --panel: rgba(255, 255, 255, .92);
  font-family: "Trebuchet MS", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--ink);
  background: #8be1ef;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #8be1ef; }
body { min-height: 100%; margin: 0; overflow-x: hidden; background: linear-gradient(180deg, #72dbec 0, #b4edf2 45%, #fff1ba 100%); }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 4px solid rgba(255, 216, 77, .92); outline-offset: 3px; }
.hidden { display: none !important; }

.app { position: relative; width: min(1180px, 100%); min-height: 100dvh; margin: 0 auto; padding: 0 24px 28px; overflow: hidden; }
.app::before { position: fixed; z-index: -3; inset: 0; content: ""; background: radial-gradient(circle at 15% 12%, rgba(255,255,255,.7), transparent 23%), radial-gradient(circle at 86% 18%, rgba(255,244,155,.65), transparent 24%), linear-gradient(#6ed8ec, #d5f4e9 67%, #ffe6a5); }
.app::after { position: fixed; z-index: -2; right: 0; bottom: 0; left: 0; height: 30vh; content: ""; background: linear-gradient(155deg, transparent 0 25%, rgba(72,188,116,.25) 25% 42%, transparent 42%), linear-gradient(205deg, transparent 0 28%, rgba(63,166,106,.23) 28% 48%, transparent 48%); }

.sky-deco { position: fixed; z-index: -1; inset: 0; pointer-events: none; }
.clouds i { position: absolute; width: 170px; height: 46px; border-radius: 50px; background: rgba(255,255,255,.55); filter: blur(.2px); }
.clouds i::before, .clouds i::after { position: absolute; bottom: 8px; content: ""; border-radius: 50%; background: inherit; }
.clouds i::before { left: 30px; width: 62px; height: 62px; }
.clouds i::after { right: 27px; width: 82px; height: 82px; }
.clouds i:nth-child(1) { top: 13%; left: -60px; transform: scale(.75); animation: drift 20s ease-in-out infinite alternate; }
.clouds i:nth-child(2) { top: 29%; right: -55px; transform: scale(1.1); animation: drift 25s ease-in-out infinite alternate-reverse; }
.clouds i:nth-child(3) { top: 68%; left: 7%; transform: scale(.45); opacity: .45; }
@keyframes drift { to { translate: 80px 8px; } }
.confetti i { position: absolute; width: 9px; height: 24px; border-radius: 5px; background: var(--yellow); opacity: .45; transform: rotate(32deg); }
.confetti i:nth-child(1) { top: 12%; left: 5%; }.confetti i:nth-child(2) { top: 42%; left: 2%; background: var(--pink); transform: rotate(-45deg); }.confetti i:nth-child(3) { top: 73%; left: 12%; background: var(--purple); }.confetti i:nth-child(4) { top: 17%; right: 5%; background: var(--purple); transform: rotate(-21deg); }.confetti i:nth-child(5) { top: 48%; right: 2%; background: var(--pink); }.confetti i:nth-child(6) { top: 80%; right: 9%; background: #23b787; transform: rotate(65deg); }

.topbar { position: relative; z-index: 30; display: flex; height: 78px; align-items: center; justify-content: space-between; border-bottom: 2px dashed rgba(70,71,131,.14); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0; border: 0; color: var(--ink); text-align: left; background: transparent; cursor: pointer; }
.brand-mark { display: grid; width: 43px; height: 43px; place-items: center; transform: rotate(-7deg); border: 3px solid white; border-radius: 14px; color: white; font-size: 21px; font-weight: 900; background: var(--purple); box-shadow: 0 5px 0 var(--purple-dark), 0 8px 14px rgba(75,36,159,.25); }
.brand b { display: block; font-size: 17px; letter-spacing: .04em; }
.brand small { display: block; margin-top: 1px; color: #645789; font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.record-chip { display: flex; min-width: 86px; height: 39px; align-items: center; justify-content: center; gap: 8px; border: 2px solid rgba(75,36,159,.13); border-radius: 15px; background: rgba(255,255,255,.65); }
.record-chip small { color: #8173a3; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.record-chip b { color: var(--purple); font-size: 15px; }
.round-button { width: 42px; height: 42px; border: 0; border-radius: 50%; color: white; font-size: 19px; font-weight: 900; background: var(--pink); box-shadow: 0 5px 0 #c62d70, 0 7px 15px rgba(198,45,112,.2); cursor: pointer; }
.round-button[aria-pressed="false"] { color: rgba(255,255,255,.55); background: #857b9f; box-shadow: 0 5px 0 #5f5775; }
.round-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #c62d70; }

.screen { position: relative; }
.start-screen { display: grid; min-height: calc(100dvh - 92px); grid-template-columns: 1fr 1fr; gap: 18px 24px; align-items: center; padding: 26px 0 12px; }
.hero-copy { position: relative; z-index: 3; padding-left: clamp(4px, 3vw, 42px); }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; color: #6b5d8d; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.eyebrow span { padding: 5px 11px; transform: rotate(-2deg); border-radius: 20px; color: white; background: var(--pink); box-shadow: 0 3px 0 #c52e70; letter-spacing: .06em; }
h1 { margin: 0; color: #34205f; font-size: clamp(48px, 6vw, 78px); font-weight: 1000; line-height: .98; letter-spacing: -.075em; text-shadow: 0 5px 0 rgba(255,255,255,.8); }
h1 em { color: var(--purple); font-style: normal; -webkit-text-stroke: 2px white; filter: drop-shadow(0 5px 0 rgba(75,36,159,.18)); }
.lead { margin: 19px 0 20px; color: #625681; font-size: 15px; font-weight: 700; line-height: 1.65; }
.lead b { color: #38245f; font-size: 18px; }
.hero-actions { display: flex; gap: 10px; align-items: stretch; }
.primary-button { position: relative; display: flex; min-width: 252px; min-height: 67px; align-items: center; gap: 12px; padding: 11px 18px; transform: translateY(0); border: 3px solid white; border-radius: 21px; color: white; text-align: left; background: linear-gradient(135deg, #7b45e9, #5d29c3); box-shadow: 0 7px 0 #42178e, 0 11px 20px rgba(75,36,159,.25); cursor: pointer; transition: transform .12s ease, filter .12s ease; }
.primary-button:hover { filter: brightness(1.12); }
.primary-button:active { transform: translateY(5px); box-shadow: 0 2px 0 #42178e, 0 5px 10px rgba(75,36,159,.2); }
.primary-button .button-icon { font-size: 28px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.16)); }
.primary-button span b { display: block; font-size: 16px; }
.primary-button span small { display: block; margin-top: 2px; color: #e5dafa; font-size: 9px; font-weight: 800; }
.primary-button > i { margin-left: auto; font-size: 17px; font-style: normal; }
.challenge-button { display: flex; min-width: 146px; flex-direction: column; align-items: center; justify-content: center; padding: 8px 12px; border: 3px solid white; border-radius: 21px; color: #51360a; background: linear-gradient(#ffe36a, #ffc842); box-shadow: 0 7px 0 #d99c23, 0 11px 18px rgba(157,99,19,.17); cursor: pointer; }
.challenge-button span { font-size: 20px; }.challenge-button b { font-size: 11px; }.challenge-button small { margin-top: 2px; color: #8e650e; font-size: 7px; font-weight: 900; }
.challenge-button:active { transform: translateY(5px); box-shadow: 0 2px 0 #d99c23; }
.save-stats { display: flex; width: min(100%, 440px); gap: 7px; margin-top: 21px; }
.save-stats > span { flex: 1; padding: 8px 9px; border: 2px solid rgba(80,57,133,.1); border-radius: 13px; text-align: center; background: rgba(255,255,255,.52); }
.save-stats small { display: block; color: #8a7ba8; font-size: 7px; font-weight: 900; }.save-stats b { display: block; margin-top: 2px; color: #443167; font-size: 12px; }.save-stats i { color: #f5b820; font-style: normal; }

.hero-art { position: relative; height: min(51vw, 490px); min-height: 370px; }
.sun { position: absolute; top: 4%; left: 50%; width: 290px; height: 290px; transform: translateX(-50%); border: 5px solid rgba(255,255,255,.72); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9a7, #ffd44d 69%, #f6aa31 70%); box-shadow: 0 0 0 19px rgba(255,226,101,.2), 0 18px 45px rgba(211,132,44,.18); }
.sun::after { position: absolute; inset: 31px; border: 3px dashed rgba(255,255,255,.45); border-radius: 50%; content: ""; animation: spin 25s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-speed { position: absolute; height: 13px; border-radius: 20px; background: white; opacity: .65; }
.hero-speed::after { position: absolute; top: 25px; right: 14px; width: 65%; height: 8px; border-radius: 10px; background: white; content: ""; }
.speed-one { top: 24%; left: 2%; width: 140px; transform: rotate(-10deg); }.speed-two { right: 0; bottom: 35%; width: 120px; transform: rotate(7deg); }
.hero-ninja { --suit: var(--purple); --shade: var(--purple-dark); position: absolute; z-index: 3; width: 155px; height: 220px; filter: drop-shadow(0 15px 12px rgba(65,39,103,.2)); animation: heroFloat 2.2s ease-in-out infinite alternate; }
@keyframes heroFloat { to { translate: 0 -10px; rotate: 1deg; } }
.hero-purple { top: 14%; left: 14%; transform: rotate(-8deg); }.hero-pink { --suit: var(--pink); --shade: #c22f70; top: 6%; right: 13%; transform: rotate(8deg) scale(.82); animation-delay: -.8s; }.hero-gold { --suit: #f5b82e; --shade: #bd7516; right: 3%; bottom: 7%; transform: rotate(12deg) scale(.57); animation-delay: -1.3s; }
.hero-hood { position: absolute; z-index: 4; top: 0; left: 20px; width: 116px; height: 108px; border: 5px solid white; border-radius: 50% 50% 43% 43%; background: var(--suit); box-shadow: inset 0 -8px 0 rgba(0,0,0,.08); }
.hero-face { position: absolute; top: 32px; left: 13px; width: 80px; height: 39px; border-radius: 50%; background: #ffe8c9; }
.hero-face b { position: absolute; top: 14px; width: 11px; height: 13px; border-radius: 50%; background: #36294c; }.hero-face b:first-child { left: 17px; }.hero-face b:last-child { right: 17px; }
.hero-face b::after { position: absolute; top: 2px; left: 2px; width: 3px; height: 3px; border-radius: 50%; background: white; content: ""; }
.hero-knot { position: absolute; top: 18px; right: -25px; width: 31px; height: 21px; transform: rotate(19deg); border-radius: 70% 20% 60% 30%; background: var(--shade); }.hero-knot::after { position: absolute; top: 13px; left: 7px; width: 33px; height: 16px; transform: rotate(28deg); border-radius: 50%; background: var(--suit); content: ""; }
.hero-body { position: absolute; z-index: 2; top: 88px; left: 28px; display: grid; width: 101px; height: 102px; place-items: center; border: 5px solid white; border-radius: 33% 33% 42% 42%; color: rgba(255,255,255,.85); font-size: 37px; font-weight: 900; background: var(--suit); box-shadow: inset 0 -10px 0 rgba(0,0,0,.08); }
.hero-body::before, .hero-body::after { position: absolute; bottom: -22px; width: 34px; height: 39px; border: 5px solid white; border-top: 0; border-radius: 0 0 20px 20px; background: var(--shade); content: ""; }.hero-body::before { left: 5px; transform: rotate(8deg); }.hero-body::after { right: 5px; transform: rotate(-8deg); }
.hero-arm { position: absolute; z-index: 1; top: 111px; width: 41px; height: 78px; border: 5px solid white; border-radius: 24px; background: var(--suit); }.arm-left { left: 5px; transform: rotate(37deg); }.arm-right { right: 3px; transform: rotate(-48deg); }
.tap-bubble { position: absolute; z-index: 7; top: 8%; left: 47%; display: grid; width: 90px; height: 90px; place-items: center; transform: rotate(-7deg); border: 4px solid white; border-radius: 50% 50% 50% 12%; color: white; background: var(--pink); box-shadow: 0 7px 0 #c52d6e; }.tap-bubble small { align-self: end; font-size: 9px; font-weight: 900; }.tap-bubble b { align-self: start; font-size: 22px; }
.castle { position: absolute; z-index: 1; right: 13%; bottom: 1%; left: 10%; height: 130px; opacity: .33; }
.castle i { position: absolute; bottom: 0; width: 75px; height: 100px; border-radius: 9px 9px 0 0; background: #664a7d; }.castle i:nth-child(1){left:0}.castle i:nth-child(2){left:50%;height:130px;transform:translateX(-50%)}.castle i:nth-child(3){right:0}.castle i::after { position: absolute; top: -24px; right: -9px; left: -9px; height: 30px; clip-path: polygon(0 100%,15% 0,32% 65%,50% 0,68% 65%,85% 0,100% 100%); background:#664a7d; content:""; }.castle span { position:absolute;right:0;bottom:0;left:0;height:30px;background:#664a7d; }

.stage-panel { grid-column: 1 / -1; padding: 13px 15px 15px; border: 3px solid white; border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: 0 9px 25px rgba(84,73,124,.12); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 4px; }.panel-heading > span b { display:block;font-size:14px; }.panel-heading > span small { display:block;color:#887aa3;font-size:8px;font-weight:700; }.panel-heading > i { padding:6px 11px;border-radius:15px;color:white;font-size:9px;font-weight:900;font-style:normal;background:var(--purple); }
.stage-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; }
.stage-button { position: relative; min-height: 57px; padding: 4px; border: 2px solid rgba(93,65,153,.12); border-radius: 14px; color: #4f3a79; background: white; cursor: pointer; box-shadow: 0 4px 0 rgba(85,59,139,.14); }
.stage-button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--purple); }.stage-button b { display:block;font-size:14px; }.stage-button span { display:block;color:#f4b51c;font-size:10px;letter-spacing:-.1em; }.stage-button small { display:block;overflow:hidden;color:#9283aa;font-size:6px;white-space:nowrap;text-overflow:ellipsis; }.stage-button.current { color:white;background:linear-gradient(145deg,#8350ec,#6330c8); }.stage-button.current span,.stage-button.current small{color:white}.stage-button.boss::after { position:absolute;top:-7px;right:-3px;content:"👹";font-size:17px;filter:drop-shadow(0 2px white); }.stage-button:disabled { color:#a9a3b4;background:#dedbe5;box-shadow:none;cursor:not-allowed; }.stage-button:disabled::before { content:"🔒";font-size:13px; }

/* Game */
.game-screen { padding: 13px 0 0; }
.hud { display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:9px;border:3px solid white;border-radius:17px;background:rgba(255,255,255,.84);box-shadow:0 6px 18px rgba(71,56,112,.12);overflow:hidden; }
.hud > div { padding:8px 10px;border-right:2px dashed rgba(83,61,137,.12);text-align:center; }.hud > div:last-child{border-right:0}.hud small{display:block;color:#8b7da5;font-size:7px;font-weight:900;letter-spacing:.12em}.hud b{display:block;margin-top:1px;color:var(--purple);font-size:20px;font-variant-numeric:tabular-nums}.hud b i{font-size:9px;font-style:normal}.hud .time{color:var(--pink)}
.mission-row { display:flex;min-height:58px;align-items:center;gap:18px;margin-bottom:9px;padding:8px 12px 8px 17px;border:3px solid white;border-radius:17px;background:rgba(255,255,255,.8); }.mission-row > span{min-width:190px}.mission-row > span small{display:block;color:var(--pink);font-size:8px;font-weight:900}.mission-row > span b{display:block;font-size:16px}.goal-meter{flex:1}.goal-meter small{display:flex;justify-content:space-between;color:#7b6d99;font-size:9px;font-weight:900}.goal-meter small b{color:var(--purple)}.goal-meter i{display:block;height:10px;margin-top:4px;padding:2px;border-radius:8px;background:#e6e0ef}.goal-meter em{display:block;width:0;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--pink),var(--yellow));box-shadow:0 0 9px rgba(255,79,154,.35);transition:width .2s}.pause-button{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:13px;color:white;font-weight:900;background:var(--purple);box-shadow:0 4px 0 var(--purple-dark);cursor:pointer}
.arena-shell { border:4px solid white;border-radius:25px;background:white;box-shadow:0 13px 32px rgba(52,52,98,.2);overflow:hidden; }
.arena { --theme1:#70dbec;--theme2:#d9f5e9;position:relative;height:min(70vh,680px);min-height:490px;overflow:hidden;isolation:isolate;background:linear-gradient(var(--theme1),var(--theme2) 63%,#85d18b 64%,#4caf6c);touch-action:manipulation;user-select:none; }
.arena::before { position:absolute;z-index:-1;inset:0;content:"";background:radial-gradient(circle at 50% 12%,rgba(255,249,132,.85) 0 8%,transparent 8.5%),linear-gradient(165deg,transparent 0 61%,rgba(42,145,83,.25) 61% 68%,transparent 68%),linear-gradient(195deg,transparent 0 58%,rgba(53,165,91,.22) 58% 68%,transparent 68%); }
.arena.theme-sunset{--theme1:#ff9a87;--theme2:#ffd59c}.arena.theme-night{--theme1:#25336f;--theme2:#7b56ad}.arena.theme-night::before{filter:hue-rotate(40deg) brightness(.72)}.arena.theme-snow{--theme1:#8bd9f4;--theme2:#eefcff}.arena.fever{animation:feverBg .45s linear infinite alternate}.arena.fever .target-layer{filter:saturate(1.35)}
@keyframes feverBg{to{filter:hue-rotate(28deg) saturate(1.35)}}
.arena-sun{position:absolute;z-index:-1;top:28px;right:9%;width:75px;height:75px;border:7px solid rgba(255,255,255,.55);border-radius:50%;background:#ffe772;box-shadow:0 0 0 12px rgba(255,231,114,.18)}
.mountains{position:absolute;z-index:-1;right:0;bottom:29%;left:0;height:45%;opacity:.48}.mountains i{position:absolute;bottom:0;width:48%;height:72%;clip-path:polygon(50% 0,100% 100%,0 100%);background:#478b77}.mountains i::before{position:absolute;top:0;left:35%;width:30%;height:36%;clip-path:polygon(50% 0,100% 100%,0 100%);background:rgba(255,255,255,.7);content:""}.mountains i:nth-child(1){left:-9%;transform:scale(.8)}.mountains i:nth-child(2){left:27%;height:100%;background:#3f7d75}.mountains i:nth-child(3){right:-8%;transform:scale(.85)}
.far-castle{position:absolute;z-index:-1;bottom:27%;left:8%;width:170px;height:100px;opacity:.48}.far-castle i{position:absolute;bottom:0;width:55px;height:78px;background:#f8eee0}.far-castle i:first-child{left:0}.far-castle i:nth-child(2){right:0}.far-castle i::before{position:absolute;top:-25px;right:-7px;left:-7px;height:27px;clip-path:polygon(0 100%,13% 0,30% 62%,50% 0,70% 62%,87% 0,100% 100%);background:#57476e;content:""}.far-castle span{position:absolute;right:39px;bottom:0;left:39px;height:100px;background:#fff7e8}.far-castle span::before{position:absolute;top:-32px;right:-8px;left:-8px;height:35px;clip-path:polygon(0 100%,13% 0,30% 62%,50% 0,70% 62%,87% 0,100% 100%);background:#665277;content:""}
.bamboo{position:absolute;z-index:0;bottom:0;width:90px;height:75%;opacity:.38}.bamboo-left{left:0}.bamboo-right{right:0;transform:scaleX(-1)}.bamboo i{position:absolute;bottom:0;width:12px;border-radius:7px 7px 0 0;background:repeating-linear-gradient(#24794c 0 48px,#b8d66b 49px 54px)}.bamboo i::after{position:absolute;top:18%;left:4px;width:55px;height:26px;border-radius:100% 0;background:#338b52;content:""}.bamboo i:first-child{left:12px;height:86%}.bamboo i:nth-child(2){left:42px;height:70%}.bamboo i:nth-child(3){left:70px;height:46%}
.ground{position:absolute;z-index:0;right:0;bottom:0;left:0;height:26%;background:repeating-linear-gradient(0deg,rgba(40,130,70,.16) 0 3px,transparent 3px 30px),linear-gradient(90deg,#55b96f,#85d481,#4cac67)}
.ground::before{position:absolute;top:-16px;right:0;left:0;height:22px;background:repeating-linear-gradient(100deg,transparent 0 13px,#39975c 14px 18px,transparent 19px 28px);content:""}
.target-layer{position:absolute;z-index:5;inset:0}
.game-target{--suit:var(--purple);--shade:var(--purple-dark);position:absolute;width:94px;height:104px;padding:0;border:0;color:inherit;background:transparent;cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 9px 7px rgba(49,36,82,.25));animation:targetIn .18s cubic-bezier(.18,1.5,.58,1) both}
@keyframes targetIn{from{transform:translate(-50%,-50%) scale(.1) rotate(-15deg);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.game-target.leaving{pointer-events:none;animation:targetOut .18s ease-in both}@keyframes targetOut{to{transform:translate(-50%,-50%) scale(.25) rotate(18deg);opacity:0}}
.game-target.hit-pop{animation:hitPop .16s ease-out both}@keyframes hitPop{to{transform:translate(-50%,-50%) scale(1.45);opacity:0}}
.target-character{position:absolute;inset:0;display:block}.target-hood{position:absolute;z-index:3;top:3px;left:11px;width:72px;height:68px;border:4px solid white;border-radius:50% 50% 43% 43%;background:var(--suit);box-shadow:inset 0 -6px 0 rgba(0,0,0,.09)}.target-face{position:absolute;top:22px;left:8px;width:48px;height:25px;border-radius:50%;background:#ffe8c8}.target-face i{position:absolute;top:8px;width:7px;height:8px;border-radius:50%;background:#352a48}.target-face i:first-child{left:10px}.target-face i:last-child{right:10px}.target-face i::after{position:absolute;top:1px;left:1px;width:2px;height:2px;border-radius:50%;background:white;content:""}.target-knot{position:absolute;top:10px;right:-16px;width:23px;height:14px;transform:rotate(20deg);border-radius:60% 20%;background:var(--shade)}.target-knot::after{position:absolute;top:11px;left:5px;width:24px;height:12px;transform:rotate(24deg);border-radius:50%;background:var(--suit);content:""}.target-body{position:absolute;z-index:2;top:56px;left:17px;display:grid;width:61px;height:47px;place-items:center;border:4px solid white;border-radius:28% 28% 42% 42%;color:rgba(255,255,255,.8);font-size:20px;font-weight:900;background:var(--suit);box-shadow:inset 0 -6px 0 rgba(0,0,0,.08)}.target-body::before,.target-body::after{position:absolute;bottom:-7px;width:20px;height:14px;border:4px solid white;border-top:0;border-radius:0 0 10px 10px;background:var(--shade);content:""}.target-body::before{left:1px}.target-body::after{right:1px}.target-label{position:absolute;z-index:6;right:-7px;bottom:-7px;min-width:37px;padding:3px 5px;border:3px solid white;border-radius:12px;color:white;font-size:9px;font-weight:900;background:var(--pink);box-shadow:0 3px 0 #ba2866}.target-hp{position:absolute;z-index:7;top:-7px;left:50%;min-width:34px;padding:2px 5px;transform:translateX(-50%);border:3px solid white;border-radius:12px;color:white;font-size:10px;font-weight:900;background:#287dc4}
.game-target.swift{--suit:#ff4f9a;--shade:#be2a68;width:80px;height:90px}.game-target.swift .target-character{animation:swiftWiggle .25s ease-in-out infinite alternate}@keyframes swiftWiggle{to{transform:rotate(7deg)}}.game-target.armored{--suit:#398ed8;--shade:#21609e}.game-target.armored .target-hood{border-color:#d8f6ff;box-shadow:inset 0 -6px 0 rgba(0,0,0,.1),0 0 0 4px #9ad9f4}.game-target.gold{--suit:#f8bd2f;--shade:#b97113}.game-target.gold .target-character{filter:drop-shadow(0 0 12px #ffe878)}.game-target.gold .target-label{color:#694200;background:#ffe75b;box-shadow:0 3px 0 #d79716}.game-target.boss{--suit:#e74d4d;--shade:#972e4f;width:190px;height:210px}.game-target.boss .target-character{transform:scale(1.75);transform-origin:center bottom}.game-target.boss .target-label{right:22px;bottom:3px}.game-target.boss .target-hp{top:-3px;font-size:13px;background:#d83951}
.game-target.bomb,.game-target.scroll{width:82px;height:82px;border:5px solid white;border-radius:50%;font-size:40px;background:#343145;box-shadow:0 7px 0 #191728}.game-target.bomb::after{position:absolute;top:-15px;right:7px;width:20px;height:20px;border-top:5px solid #4f3e31;border-radius:50%;content:""}.game-target.scroll{border-radius:25px;background:#fff2b5;box-shadow:0 7px 0 #c7932e}.game-target.scroll::after{position:absolute;inset:12px;display:grid;place-items:center;content:"📜"}.game-target.bomb::before{content:"💣"}.game-target.scroll{font-size:0}
.tap-float{position:absolute;z-index:20;transform:translate(-50%,-50%);color:white;font-size:22px;font-weight:1000;pointer-events:none;text-shadow:0 3px 0 var(--purple),0 0 8px var(--purple);animation:floatScore .65s ease-out both}@keyframes floatScore{to{translate:0 -65px;scale:1.25;opacity:0}}.tap-float.bad{color:#ffeb58;text-shadow:0 3px 0 #a72b44}.tap-ring{position:absolute;z-index:19;width:30px;height:30px;transform:translate(-50%,-50%);border:5px solid white;border-radius:50%;pointer-events:none;animation:ringOut .4s ease-out both}@keyframes ringOut{to{width:90px;height:90px;border-width:1px;opacity:0}}
.fever-banner{position:absolute;z-index:30;top:50%;left:50%;padding:11px 30px;transform:translate(-50%,-50%) scale(.1) rotate(-8deg);border:5px solid white;border-radius:22px;color:white;text-align:center;background:linear-gradient(135deg,var(--pink),var(--purple));box-shadow:0 9px 0 #492093,0 13px 35px rgba(49,36,82,.35);opacity:0;pointer-events:none}.fever-banner.show{animation:feverShow .8s ease both}@keyframes feverShow{35%,70%{transform:translate(-50%,-50%) scale(1) rotate(-3deg);opacity:1}to{transform:translate(-50%,-50%) scale(1.2);opacity:0}}.fever-banner small{display:block;font-size:10px;font-weight:900}.fever-banner b{display:block;font-size:30px;white-space:nowrap;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.countdown{position:absolute;z-index:40;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:white;background:rgba(57,35,102,.4);backdrop-filter:blur(3px)}.countdown b{font-size:100px;line-height:1;text-shadow:0 7px 0 var(--purple),0 0 35px white;animation:countPulse .45s ease-out}.countdown small{font-size:16px;font-weight:900;text-shadow:0 2px 0 var(--purple)}@keyframes countPulse{from{scale:.2;opacity:0}to{scale:1;opacity:1}}
.pause-overlay{position:absolute;z-index:50;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:white;background:rgba(49,36,82,.88);backdrop-filter:blur(8px)}.pause-overlay span{color:var(--yellow);font-size:11px;font-weight:900}.pause-overlay b{margin:4px 0 18px;font-size:31px}.pause-overlay button{padding:11px 29px;border:3px solid white;border-radius:16px;color:var(--ink);font-weight:900;background:var(--yellow);box-shadow:0 5px 0 #d49920;cursor:pointer}
.hint-bar{display:flex;min-height:39px;align-items:center;justify-content:center;gap:30px;margin:0;color:#6e608c;font-size:10px;font-weight:900;background:#fff9e9}

/* Results */
.result-screen { display:flex;min-height:calc(100dvh - 80px);padding:25px 15px 35px;align-items:center;justify-content:center;flex-direction:column;text-align:center; }
.result-burst{position:relative;width:120px;height:105px}.result-burst::before{position:absolute;inset:15px 20px;border:5px solid white;border-radius:28px;content:"";background:linear-gradient(145deg,var(--yellow),#f6a927);box-shadow:0 7px 0 #cf7f1c,0 12px 25px rgba(135,76,26,.2);transform:rotate(-5deg)}.result-burst span{position:absolute;z-index:2;inset:0;display:grid;place-items:center;font-size:50px;filter:drop-shadow(0 3px 0 white)}.result-burst i{position:absolute;width:12px;height:28px;border-radius:6px;background:var(--pink)}.result-burst i:nth-child(1){top:1px;left:3px;transform:rotate(-45deg)}.result-burst i:nth-child(2){top:0;right:4px;transform:rotate(45deg);background:var(--purple)}.result-burst i:nth-child(3){bottom:0;left:2px;transform:rotate(45deg);background:#34b87e}.result-burst i:nth-child(4){right:2px;bottom:1px;transform:rotate(-45deg);background:var(--cyan)}
.result-kicker{margin:5px 0 3px;color:var(--pink);font-size:10px;font-weight:1000;letter-spacing:.2em}.result-screen h2{margin:0;color:#382160;font-size:clamp(34px,6vw,52px);letter-spacing:-.04em;text-shadow:0 4px 0 white}.resultMessage{margin:5px 0 6px;color:#75668f;font-size:13px;font-weight:700}.result-stars{height:46px;color:#f5b91c;font-size:40px;line-height:1;text-shadow:0 3px 0 white;letter-spacing:2px}.result-score{position:relative;width:min(100%,420px);margin:10px 0 11px;padding:12px;border:4px solid white;border-radius:20px;background:rgba(255,255,255,.7);box-shadow:0 8px 18px rgba(66,47,106,.11)}.result-score small{display:block;color:#8a7ba6;font-size:8px;font-weight:900;letter-spacing:.2em}.result-score strong{display:block;color:var(--purple);font-size:42px;line-height:1}.result-score span{position:absolute;top:-11px;right:-10px;padding:5px 9px;transform:rotate(7deg);border:3px solid white;border-radius:12px;color:white;font-size:8px;font-weight:1000;background:var(--pink);box-shadow:0 3px 0 #bc2866}.result-stats{display:grid;width:min(100%,620px);grid-template-columns:repeat(4,1fr);margin-bottom:11px;border:3px solid white;border-radius:18px;background:rgba(255,255,255,.64);overflow:hidden}.result-stats span{padding:9px;border-right:2px dashed rgba(89,66,139,.13)}.result-stats span:last-child{border-right:0}.result-stats small{display:block;color:#897ba3;font-size:7px;font-weight:900}.result-stats b{display:block;margin-top:2px;color:#453168;font-size:16px}.ninja-tip{display:flex;width:min(100%,620px);align-items:center;gap:12px;margin:0 0 15px;padding:9px 13px;border:3px solid white;border-radius:15px;color:#6f608b;text-align:left;background:#fff3ae}.ninja-tip b{flex:0 0 auto;padding:4px 7px;border-radius:8px;color:white;font-size:8px;background:var(--purple)}.ninja-tip span{font-size:10px;font-weight:700}.result-actions{display:flex;width:min(100%,620px);gap:9px}.result-actions button{flex:1}.secondary-button{min-height:58px;border:3px solid white;border-radius:18px;color:#5d4b7d;font-size:11px;font-weight:900;background:rgba(255,255,255,.78);box-shadow:0 5px 0 rgba(75,56,118,.19);cursor:pointer}.primary-button.compact{min-width:0;min-height:58px;padding:8px 14px;border-radius:18px}.primary-button.compact span{margin:auto}.primary-button.compact span b{font-size:13px}.primary-button.compact span small{font-size:7px}

@media (max-width: 850px) {
  .start-screen{grid-template-columns:1fr 1fr}.hero-copy{padding-left:0}h1{font-size:clamp(43px,7vw,63px)}.hero-art{height:420px}.hero-purple{left:5%}.hero-pink{right:3%}.hero-gold{right:-4%}.stage-grid{grid-template-columns:repeat(6,1fr)}.stage-button{min-height:51px}.arena{height:min(72vh,650px)}
}

@media (max-width: 660px) {
  .app{padding:0 10px max(14px,env(safe-area-inset-bottom))}.topbar{height:59px}.brand-mark{width:34px;height:34px;border-radius:11px;font-size:17px;box-shadow:0 4px 0 var(--purple-dark)}.brand b{font-size:13px}.brand small{display:none}.record-chip{min-width:72px;height:33px}.round-button{width:35px;height:35px;font-size:16px;box-shadow:0 4px 0 #c62d70}.start-screen{display:flex;min-height:calc(100dvh - 59px);padding:16px 0 9px;flex-direction:column}.hero-copy{width:100%;text-align:center}.eyebrow{justify-content:center;font-size:9px}.eyebrow span{padding:4px 9px}h1{font-size:clamp(40px,13vw,58px)}.lead{margin:12px 0 14px;font-size:12px}.lead b{font-size:14px}.hero-actions{justify-content:center}.primary-button{min-width:0;min-height:58px;padding:8px 13px;border-radius:17px}.primary-button .button-icon{font-size:22px}.primary-button span b{font-size:13px}.challenge-button{min-width:120px;border-radius:17px}.challenge-button span{font-size:17px}.challenge-button b{font-size:9px}.save-stats{margin:14px auto 0}.hero-art{order:-1;width:100%;height:213px;min-height:213px}.sun{top:1%;width:180px;height:180px}.hero-ninja{transform-origin:center center}.hero-purple{top:12%;left:22%;transform:rotate(-8deg) scale(.62)}.hero-pink{top:0;right:20%;transform:rotate(8deg) scale(.52)}.hero-gold{right:11%;bottom:-6%;transform:rotate(12deg) scale(.36)}.tap-bubble{top:1%;left:52%;width:60px;height:60px;border-width:3px;box-shadow:0 4px 0 #c52d6e}.tap-bubble small{font-size:6px}.tap-bubble b{font-size:15px}.castle{right:17%;bottom:0;left:17%;height:70px}.castle i{width:48px;height:52px}.castle i:nth-child(2){height:70px}.stage-panel{width:100%;padding:10px;border-radius:18px}.stage-grid{grid-template-columns:repeat(6,1fr);gap:5px}.stage-button{min-height:45px;border-radius:11px}.stage-button b{font-size:11px}.stage-button span{font-size:8px}.stage-button small{display:none}.panel-heading{margin-bottom:7px}.panel-heading > span small{display:none}.game-screen{padding-top:7px}.hud{grid-template-columns:repeat(5,1fr);margin-bottom:6px;border-radius:13px}.hud>div{padding:6px 2px}.hud small{font-size:6px}.hud b{font-size:15px}.mission-row{min-height:48px;gap:7px;margin-bottom:6px;padding:5px 7px 5px 10px;border-radius:13px}.mission-row>span{min-width:122px}.mission-row>span small{font-size:6px}.mission-row>span b{font-size:11px}.goal-meter small{font-size:7px}.pause-button{width:35px;height:35px;border-radius:10px}.arena-shell{border-width:3px;border-radius:18px}.arena{height:calc(100dvh - 194px);min-height:420px}.arena-sun{width:52px;height:52px}.far-castle{transform:scale(.7);transform-origin:left bottom}.bamboo{width:66px}.bamboo i:nth-child(2){left:32px}.bamboo i:nth-child(3){left:55px}.game-target{width:84px;height:94px}.game-target.boss{width:160px;height:190px}.hint-bar{min-height:30px;gap:12px;font-size:7px}.fever-banner b{font-size:23px}.result-screen{min-height:calc(100dvh - 59px);padding:15px 2px 24px}.result-burst{width:92px;height:80px}.result-burst span{font-size:39px}.result-screen h2{font-size:34px}.result-stars{height:39px;font-size:34px}.result-score{margin:7px 0;padding:9px}.result-score strong{font-size:35px}.result-stats span{padding:7px 2px}.result-stats b{font-size:13px}.ninja-tip{margin-bottom:11px}.result-actions{display:grid;grid-template-columns:1fr 1fr}.result-actions .primary-button{grid-column:1/-1;grid-row:1}.secondary-button{min-height:45px}.primary-button.compact{min-height:50px}
}

@media (max-width: 370px), (max-height: 690px) and (max-width: 660px) {
  .hero-art{height:175px;min-height:175px}.sun{width:145px;height:145px}.hero-purple{top:-1%;left:20%;transform:rotate(-8deg) scale(.52)}.hero-pink{right:16%;transform:rotate(8deg) scale(.44)}.hero-gold{display:none}.lead{display:none}.save-stats{margin-top:9px}.stage-panel{margin-top:3px}.panel-heading{display:none}.stage-button{min-height:40px}.arena{height:calc(100dvh - 178px);min-height:360px}.hint-bar{display:none}.result-burst{height:68px}.result-stats{margin-bottom:6px}.ninja-tip{display:none}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}