@font-face { font-family:'Russo One'; src:url('../assets/fonts/RussoOne-Regular.ttf') format('truetype'); font-weight:400; font-display:block; }
@font-face { font-family:'Creepster'; src:url('../assets/fonts/Creepster.woff2') format('woff2'); font-weight:400; font-display:block; }
:root { color-scheme:dark; font-family:'Russo One',sans-serif; background:#05070f; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; font-family:inherit; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
body { display:grid; place-items:center; background:radial-gradient(ellipse at center,#1d2541,#05070f 80%); }
#viewport { position:relative; overflow:hidden; flex-shrink:0; box-shadow:0 0 100px #000; }
#stage { width:1280px; height:720px; position:absolute; transform-origin:0 0; overflow:hidden; }
#game { position:absolute; width:1280px; height:720px; inset:0; touch-action:none; outline:none; }
.scene { position:absolute; inset:0; display:none; pointer-events:none; }
.scene.active { display:block; }
.scene.dim { background:radial-gradient(ellipse at center,#0a0c1a66,#05060ecc 75%); }
button { color:#ffedbf; cursor:pointer; border:0; outline:0; font-family:'Russo One',sans-serif; touch-action:manipulation; pointer-events:auto; background:none; }
button:focus { outline:none; }
.art-button { display:block; padding:0; transition:transform .14s,filter .14s; }
.art-button img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.art-button:hover,.setting-row:hover { filter:brightness(1.18); transform:scale(1.04); }
.art-button:active,.setting-row:active { transform:scale(.95) translateY(3px); }
/* keyboard selection: yellow highlight */
.kbsel { filter:brightness(1.25) drop-shadow(0 0 6px #ffe24a) drop-shadow(0 0 16px #ffd21f) !important; transform:scale(1.06) !important; }

/* splash */
.splash-enter { position:absolute; inset:0; width:100%; height:100%; }
.tap-pill { position:absolute; top:548px; left:50%; transform:translateX(-50%); padding:14px 44px; border-radius:40px; background:#0b0716b0; border:2px solid #ffb04a88; box-shadow:0 0 28px #ff7a1866, inset 0 0 20px #ff7a1833; font:400 30px 'Russo One',sans-serif; color:#ffe2a6; letter-spacing:3px; white-space:nowrap; text-shadow:0 3px 0 #6a290e,0 0 16px #ff8a1a; }
.splash-enter.kbsel { transform:none !important; filter:none !important; }
.splash-enter.kbsel .tap-pill { border-color:#ffe24a; box-shadow:0 0 30px #ffe24a; }
.mapi { position:absolute; pointer-events:none; object-fit:contain; }
.splash-mapi { bottom:8px; left:560px; width:160px; height:82px; }
.menu-mapi { bottom:0; left:562px; width:156px; height:80px; }
#loading { position:absolute; bottom:120px; width:100%; text-align:center; color:#f9d495; font:400 16px 'Russo One',sans-serif; text-shadow:0 2px 3px #000; }

/* menu */
.menu-title { position:absolute; width:470px; height:300px; top:-12px; left:405px; object-fit:contain; animation:float-title 4s ease-in-out infinite; will-change:transform; pointer-events:none; }
.menu-corner { position:absolute; width:250px; height:66px; bottom:18px; }
.menu-corner.left { left:30px; } .menu-corner.right { right:30px; }

/* headings */
.glow-heading { position:absolute; margin:0; width:100%; top:200px; text-align:center; font:400 54px 'Creepster',cursive; letter-spacing:4px; color:#ffb52e; text-shadow:0 4px 0 #5a1606,0 0 18px #ff6a00,0 0 40px #ff3d0077; }
.glow-heading.big { position:static; font-size:84px; }
.title-art.compact { position:absolute; width:330px; height:211px; left:475px; top:-2px; object-fit:contain; animation:float-title 4s ease-in-out infinite; will-change:transform; }
.wood-panel { background:none; border-style:solid; border-width:26px 26px; border-color:transparent; border-image:url('../assets/images/panel-1.png') 62 58 fill / 26px 26px stretch; color:#ffedc9; text-shadow:0 2px 0 #3c1d18,0 0 6px #2a0e05; filter:drop-shadow(0 8px 6px #000a); }
.wood-panel.wp2 { border-image-source:url('../assets/images/panel-2.png'); }
.wood-panel.wp3 { border-image-source:url('../assets/images/panel-3.png'); }

/* settings */
.setting-buttons { position:absolute; width:430px; left:425px; top:290px; display:grid; gap:14px; }
.setting-row { position:relative; width:430px; height:auto; padding:0; transition:transform .12s,filter .12s; }
#music-toggle { aspect-ratio:760/134; --track-left:303.829px; --track-top:20.368px; --track-width:75.816px; --track-height:33.947px; }
#sfx-toggle { aspect-ratio:751/133; --track-left:302.317px; --track-top:22.330px; --track-width:76.152px; --track-height:33.782px; }
#fullscreen-toggle { aspect-ratio:755/137; --track-left:303.563px; --track-top:20.503px; --track-width:75.748px; --track-height:34.172px; }
.row-art { width:100%; height:100%; position:absolute; inset:0; object-fit:contain; pointer-events:none; }
.switch { position:absolute; left:var(--track-left); top:var(--track-top); width:var(--track-width); height:var(--track-height); border-radius:999px; pointer-events:none; }
.switch:before { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(#43362f,#5e4c40); box-shadow:inset 0 2px 4px #160c0abf; opacity:0; transition:opacity .15s; }
.switch-knob { position:absolute; left:calc(100% - var(--track-height) + 1px); top:1px; width:calc(var(--track-height) - 2px); height:calc(var(--track-height) - 2px); object-fit:contain; transition:left .15s; }
.setting-row[aria-pressed="false"] .switch:before { opacity:1; }
.setting-row[aria-pressed="false"] .switch-knob { left:1px; }
.keys-help { position:absolute; top:540px; width:100%; text-align:center; font:400 14px 'Russo One',sans-serif; color:#e9cfa6; letter-spacing:1px; text-shadow:0 2px 3px #000; }
.back-button { position:absolute; width:250px; height:70px; left:515px; top:585px; }
#fullscreen-note { position:absolute; top:668px; text-align:center; width:100%; font:400 14px 'Russo One',sans-serif; color:#ffe0af; }

/* highscores */
.score-columns { position:absolute; top:282px; left:130px; width:1020px; display:flex; gap:24px; }
.score-col { flex:1; height:290px; text-align:center; padding:0 6px; }
.score-col h2 { margin:0; font:400 34px 'Creepster',cursive; letter-spacing:3px; color:#ffb52e; text-shadow:0 3px 0 #4a1405,0 0 14px #ff6a00; }
.score-col[data-mode="arcade"] h2 { color:#d38bff; text-shadow:0 3px 0 #2c0b40,0 0 14px #a43dff; }
.score-col[data-mode="zen"] h2 { color:#8ff0ff; text-shadow:0 3px 0 #0a2c40,0 0 14px #2dc8ff; }
.col-best { font:400 46px 'Russo One',sans-serif; color:#ffd04a; line-height:1.1; }
.score-col ol { list-style:none; padding:0; margin:8px 0 0; font:400 17px 'Russo One',sans-serif; }
.score-col li { display:flex; justify-content:space-between; padding:4px 6px; border-top:1px solid #e3b98b38; color:#e8cdb4; }
.score-col li b { color:#ffe2a8; font-weight:400; }
.score-col .empty { color:#c8a98f; font-size:14px; padding-top:20px; }

/* hud */
.pause-button { position:absolute; top:16px; right:18px; width:62px; height:62px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#7a3a1e,#3a1810 70%); border:3px solid #d0843f; box-shadow:0 0 18px #ff6a0077,inset 0 2px 0 #ffb06a66,0 5px 0 #120a14; }
.pause-button i { width:9px; height:26px; background:linear-gradient(#fff1c0,#efaf66); border-radius:2px; box-shadow:1px 2px 0 #55251d; }
.pause-button:hover { filter:brightness(1.2); }

/* overlays */
.overlay { background:radial-gradient(ellipse at center,#14081ccc,#04030bf0 75%); backdrop-filter:blur(3px); pointer-events:auto; }
.pause-content { position:absolute; width:440px; top:150px; left:420px; text-align:center; }
.pause-content p { font:400 22px 'Russo One',sans-serif; color:#e5d4c3; margin:6px 0 18px; }
.pause-menu-button { width:320px; height:86px; margin:16px auto; }

/* continue */
.cont-title { position:absolute; top:58px; width:100%; text-align:center; font:400 96px 'Creepster',cursive; letter-spacing:6px; color:#ffb52e; text-shadow:0 5px 0 #5a1606,0 0 26px #ff6a00,0 0 60px #ff2a00aa; animation:throb 1s ease-in-out infinite; }
.cont-ring { position:absolute; left:550px; top:190px; width:180px; height:180px; }
.cont-ring svg { width:100%; height:100%; transform:rotate(-90deg); filter:drop-shadow(0 0 10px #ff7a18); }
.cont-ring .track { fill:#0c0612cc; stroke:#3a1d14; stroke-width:12; }
.cont-ring .arc { fill:none; stroke:#ffa83a; stroke-width:12; stroke-linecap:round; stroke-dasharray:540.35; stroke-dashoffset:0; }
.cont-ring b { position:absolute; inset:0; display:grid; place-items:center; font:400 86px 'Russo One',sans-serif; color:#ffe7b0; text-shadow:0 4px 0 #6a290e,0 0 20px #ff8a1a; }
.cont-score { position:absolute; top:384px; width:100%; text-align:center; font:400 22px 'Russo One',sans-serif; color:#e9cfa6; letter-spacing:2px; }
.cont-score b { color:#ffd04a; font-weight:400; font-size:30px; margin-left:8px; }
.cont-button { will-change:transform; position:absolute; left:470px; top:432px; width:340px; height:104px; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:linear-gradient(#ffb43a,#ff6a12 55%,#c63c06); border:4px solid #ffe2a0; box-shadow:0 0 36px #ff7a18cc,0 8px 0 #5a1606,inset 0 3px 0 #fff3c0aa; animation:cont-pulse 1.1s ease-in-out infinite; }
.cont-button .cb-main { font:400 46px 'Creepster',cursive; letter-spacing:4px; color:#fffbe6; text-shadow:0 3px 0 #7a2206,0 0 12px #fff2; }
.cont-button .cb-sub { font:400 16px 'Russo One',sans-serif; color:#3a0e02; letter-spacing:1px; }
.cont-button .cb-sub:before { content:'\25B6  '; }
.cont-button.no-sub .cb-sub { display:none; }
.cont-button.busy { opacity:.6; animation:none; }
.cont-button.kbsel { transform:scale(1.06) !important; }
.cont-no { position:absolute; left:540px; top:566px; width:200px; height:46px; font:400 20px 'Russo One',sans-serif; color:#d6c1b0; letter-spacing:2px; text-decoration:underline; text-underline-offset:5px; }
.cont-no:hover { color:#fff; }
.cont-no.kbsel { color:#ffe24a; text-shadow:0 0 12px #ffd21f; filter:none !important; }
#cont-msg { position:absolute; top:628px; width:100%; text-align:center; font:400 18px 'Russo One',sans-serif; color:#ff9a8a; }

/* game over */
.over-board { position:absolute; top:4px; left:320px; width:640px; height:232px; object-fit:contain; animation:drop-in .7s cubic-bezier(.2,1.6,.4,1) both; }
.mode-chip { position:absolute; top:214px; left:565px; width:150px; text-align:center; padding:4px 0; border-radius:16px; font:400 16px 'Russo One',sans-serif; letter-spacing:3px; color:#1a0b05; background:linear-gradient(#ffd77a,#ff9c2a); box-shadow:0 0 14px #ff8a1a99; }
.final-score { position:absolute; top:244px; width:380px; left:450px; height:170px; text-align:center; padding:0; animation:pop-in .5s .25s cubic-bezier(.2,1.6,.4,1) both; }
.final-score span { font:400 15px 'Russo One',sans-serif; letter-spacing:4px; color:#e9c49c; }
.final-score strong { display:block; font:400 66px 'Russo One',sans-serif; color:#ffc749; line-height:1.15; text-shadow:0 4px 0 #8a2a0c,0 0 20px #ff8a1a88; }
.final-score small { font:400 16px 'Russo One',sans-serif; color:#e7cbaa; }
#new-record { display:none; position:absolute; top:392px; left:0; width:100%; text-align:center; font:400 40px 'Creepster',cursive; letter-spacing:4px; color:#fff07a; text-shadow:0 3px 0 #7a3a06,0 0 18px #ffcc00,0 0 40px #ff8800; animation:throb .8s ease-in-out infinite; }
.stats { position:absolute; top:446px; left:210px; width:860px; display:flex; gap:14px; justify-content:center; }
.stat { width:200px; height:92px; text-align:center; padding-top:0; background:none; border-style:solid; border-width:20px; border-color:transparent; border-image:url('../assets/images/panel-2.png') 62 58 fill / 20px 20px stretch; filter:drop-shadow(0 6px 4px #000a); animation:pop-in .45s cubic-bezier(.2,1.6,.4,1) both; }
.stat b { display:block; line-height:1.05; font:400 30px 'Russo One',sans-serif; color:#ffe2a8; text-shadow:0 0 10px #ff8a1a88; }
.stat span { font:400 12px 'Russo One',sans-serif; letter-spacing:2px; color:#ffe2c0; text-shadow:0 2px 0 #3c1d18; }
.over-decor { position:absolute; left:495px; top:545px; width:290px; height:125px; object-fit:contain; }
.over-buttons { position:absolute; top:578px; left:180px; width:920px; display:flex; justify-content:space-between; }
.over-buttons .art-button { width:270px; height:80px; }

#orientation-hint { display:none; position:fixed; bottom:calc(16px + env(safe-area-inset-bottom)); left:10px; right:10px; text-align:center; color:#bfc8db; font:400 13px 'Russo One',sans-serif; pointer-events:none; }
@media (orientation:portrait) and (max-width:800px) { #orientation-hint { display:block; } }
@keyframes float-title { 50% { transform:translateY(6px) rotate(-.6deg); } }
@keyframes throb { 50% { transform:scale(1.05); } }
@keyframes cont-pulse { 50% { transform:scale(1.05); } }
@keyframes drop-in { from { transform:translateY(-260px) rotate(-8deg); opacity:0; } }
@keyframes pop-in { from { transform:scale(.3); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .menu-title,.title-art,.cont-title,.cont-button { animation:none; } }

/* panels, seeds, shop, missions */
.panel-button { position:absolute; display:flex; align-items:center; justify-content:center; border-style:solid; border-width:18px; border-color:transparent; border-image:url('../assets/images/panel-1.png') 62 58 fill / 18px 18px stretch; filter:drop-shadow(0 6px 4px #000a); transition:transform .14s,filter .14s; }
.panel-button span { font:400 30px 'Creepster',cursive; letter-spacing:3px; color:#ffe2b0; text-shadow:0 3px 0 #3c1406,0 0 10px #ff7a1a88; }
.panel-button:hover { transform:scale(1.05); filter:brightness(1.15) drop-shadow(0 6px 4px #000a); }
.panel-button:active { transform:scale(.95); }
.menu-mid { width:200px; height:70px; bottom:16px; }
.menu-mid.left { left:300px; } .menu-mid.right { right:300px; }
.menu-corner { width:230px !important; height:62px !important; bottom:20px !important; }
.menu-corner.left { left:22px !important; } .menu-corner.right { right:22px !important; }
#mission-badge { position:absolute; top:-26px; right:-26px; min-width:30px; height:30px; padding:0 7px; border-radius:15px; background:radial-gradient(circle at 35% 35%,#ff7a6a,#d4140a); border:2px solid #fff0c0; font:400 16px/26px 'Russo One',sans-serif; color:#fff; font-style:normal; box-shadow:0 0 12px #ff2a00; display:none; animation:throb .9s ease-in-out infinite; }
#mission-badge.on { display:block; }
.seed-box { position:absolute; top:14px; left:18px; height:62px; min-width:150px; padding:0 8px; display:flex; align-items:center; gap:10px; }
.seed-box b { font:400 26px 'Russo One',sans-serif; color:#fff2c8; }
.seed-ic { display:inline-block; width:16px; height:24px; border-radius:50%; background:radial-gradient(ellipse at 35% 30%,#fffbe8,#f1dca6 55%,#c4a463); border:2px solid #7a5524; transform:rotate(-18deg); box-shadow:0 0 8px #ffe9a888; flex-shrink:0; }
.glow-heading.top { top:22px; font-size:72px; }
.screen-note { position:absolute; top:540px; width:100%; text-align:center; font:400 16px 'Russo One',sans-serif; color:#ecd2ac; letter-spacing:1px; text-shadow:0 2px 3px #000; }
.blade-cards { position:absolute; top:150px; left:60px; width:1160px; display:flex; gap:16px; justify-content:center; }
.blade-card { position:relative; width:212px; height:370px; padding:0; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:auto; cursor:pointer; transition:transform .14s; }
.blade-card:hover { transform:translateY(-6px); }
.blade-card h3 { margin:6px 0 0; font:400 30px 'Creepster',cursive; letter-spacing:2px; color:#fff0c8; text-shadow:0 3px 0 #3c1406,0 0 12px var(--bc,#ff8a1a); text-align:center; line-height:1; }
.blade-card canvas { width:170px; height:130px; border-radius:10px; background:radial-gradient(ellipse at center,#1a0f22,#07040c); box-shadow:inset 0 0 18px #000; }
.blade-card p { margin:0; font:400 12px 'Russo One',sans-serif; color:#f3d9b6; text-align:center; min-height:30px; }
.blade-state { margin-top:auto; margin-bottom:4px; width:150px; padding:8px 0; border-radius:12px; text-align:center; font:400 18px 'Russo One',sans-serif; display:flex; align-items:center; justify-content:center; gap:8px; }
.blade-state.equipped { background:linear-gradient(#8aff6a,#2fae1a); color:#0d2a06; box-shadow:0 0 14px #6aff4a88; }
.blade-state.equip { background:linear-gradient(#ffd77a,#ff9c2a); color:#2a0e05; }
.blade-state.buy { background:linear-gradient(#5a3a2a,#2a1810); color:#ffe2a8; border:2px solid #ffcb6a; }
.blade-state.locked { background:#1a1018; color:#8d7a70; border:2px solid #4a3a34; }
.blade-card.locked canvas { filter:grayscale(.6) brightness(.6); }
.mission-list { position:absolute; top:150px; left:240px; width:800px; display:grid; gap:14px; }
.mission { height:112px; display:grid; grid-template-columns:62px 1fr 130px; align-items:center; gap:14px; padding:0 6px; }
.mission .mcheck { width:52px; height:52px; border-radius:50%; background:#1a0e0a; border:3px solid #6a4224; display:grid; place-items:center; font:400 30px 'Russo One',sans-serif; color:#3a2418; }
.mission.done .mcheck { background:radial-gradient(circle at 35% 35%,#b6ff7a,#2fae1a); border-color:#e8ffc0; color:#0d2a06; box-shadow:0 0 16px #6aff4a; }
.mission h4 { margin:0 0 8px; font:400 20px 'Russo One',sans-serif; color:#fff2d6; }
.mbar { height:14px; border-radius:7px; background:#1a0e0a; border:2px solid #6a4224; overflow:hidden; }
.mbar i { display:block; height:100%; background:linear-gradient(90deg,#ff9c2a,#ffd77a); box-shadow:0 0 10px #ffb04a; }
.mission small { display:block; margin-top:5px; font:400 13px 'Russo One',sans-serif; color:#e8c8a0; }
.mreward { display:flex; align-items:center; justify-content:center; gap:8px; font:400 24px 'Russo One',sans-serif; color:#fff2c8; }
.over-seeds { position:absolute; top:410px; left:0; width:100%; display:flex; justify-content:center; align-items:center; gap:10px; font:400 22px 'Russo One',sans-serif; color:#fff2c8; text-shadow:0 2px 0 #3c1406; }
#new-record { top:212px !important; font-size:30px !important; left:auto !important; right:120px; width:auto !important; }
#over-missions { position:absolute; top:540px; left:0; width:100%; text-align:center; font:400 15px 'Russo One',sans-serif; color:#b6ff7a; text-shadow:0 2px 3px #000; }
.stats { top:446px !important; }
#stage.shake { animation:stage-shake .38s linear; }
@keyframes stage-shake { 10% { transform:scale(var(--s)) translate(-9px,5px); } 25% { transform:scale(var(--s)) translate(8px,-6px); } 40% { transform:scale(var(--s)) translate(-6px,4px); } 60% { transform:scale(var(--s)) translate(4px,-2px); } 80% { transform:scale(var(--s)) translate(-2px,1px); } }

/* ninja rank */
.rank-box { position:absolute; top:14px; right:18px; width:330px; height:84px; display:flex; align-items:center; gap:12px; padding:0 4px; }
.rk-lv { width:52px; height:52px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font:400 26px 'Russo One',sans-serif; color:#2a0e05; background:radial-gradient(circle at 35% 30%,#fff2b0,#ffb42e 60%,#c86a0a); border:3px solid #fff0c0; box-shadow:0 0 14px #ffb04a; text-shadow:none; }
.rk-info { flex:1; min-width:0; }
.rk-name { display:block; font:400 18px 'Creepster',cursive; letter-spacing:2px; color:#ffe2b0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-bar { height:12px; margin:4px 0 2px; border-radius:6px; background:#1a0e0a; border:2px solid #6a4224; overflow:hidden; }
.rk-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#7bff3a,#d4ff8a); box-shadow:0 0 10px #7bff3a; }
.rk-xp { font:400 12px 'Russo One',sans-serif; color:#f3d9b6; }
.over-rank { top:262px; left:60px; right:auto; width:350px; }
#level-up { display:none; position:absolute; top:356px; left:60px; width:350px; text-align:center; font:400 34px 'Creepster',cursive; letter-spacing:3px; color:#d4ff8a; text-shadow:0 3px 0 #1a4a06,0 0 18px #7bff3a; animation:throb .7s ease-in-out infinite; }
/* daily reward */
.daily-wrap { position:absolute; inset:0; display:none; place-items:center; background:radial-gradient(ellipse at center,#14081ccc,#04030bee 75%); pointer-events:auto; z-index:5; }
.daily-wrap.on { display:grid; }
.daily-panel { width:760px; height:400px; display:flex; flex-direction:column; align-items:center; animation:pop-in .45s cubic-bezier(.2,1.6,.4,1) both; }
.daily-title { font:400 64px 'Creepster',cursive; letter-spacing:4px; color:#ffb52e; text-shadow:0 4px 0 #5a1606,0 0 20px #ff6a00; margin-top:2px; }
.daily-sub { font:400 20px 'Russo One',sans-serif; color:#fff2d6; letter-spacing:2px; margin-bottom:14px; }
.daily-days { display:flex; gap:10px; margin-bottom:18px; }
.dday { width:86px; height:112px; border-radius:12px; background:#1a0e0acc; border:2px solid #6a4224; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font:400 13px 'Russo One',sans-serif; color:#d8b896; }
.dday b { font:400 20px 'Russo One',sans-serif; color:#fff2c8; display:flex; align-items:center; gap:5px; }
.dday.past { opacity:.55; } .dday.past:after { content:'✓'; color:#7bff3a; font-size:18px; }
.dday.today { border-color:#ffe24a; background:#3a1a08; box-shadow:0 0 18px #ffb04a; animation:throb .9s ease-in-out infinite; }
.daily-claim { position:relative; width:240px; height:78px; }
.daily-claim span { font-size:38px; }