/* Full-viewport arcade; the board scales uniformly and keeps touch targets aligned. */
.club-link{font-size:12px;font-weight:900;color:#a03779;text-decoration:none;margin-left:auto;padding:10px 13px;border:1px solid #efd1e2;border-radius:18px;background:#fff4f8}.site-header nav+.club-link{margin-left:0}
.level-node.locked .node-stars{filter:blur(4px)}.level-node.locked .node-name{color:#96819e;background:#f5e8f4e8}
html[data-view=play]{background:var(--sky)}html[data-view=play] body{height:100dvh;overflow:hidden;background:var(--sky)}html[data-view=play] .site-header,html[data-view=play] .site-footer,html[data-view=play] #difficulty-bar{display:none!important}html[data-view=play] main{max-width:none;padding:0;height:100dvh}html[data-view=play] #play-screen{height:100%;padding:0;display:flex;flex-direction:column;animation:none;background:radial-gradient(ellipse at top,#ffe7f599,transparent 70%),var(--sky)}html[data-view=play] .play-heading{height:50px;min-height:50px;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));margin:0;gap:10px;flex-wrap:nowrap;background:#fff9f1e8;border-bottom:1px solid #fff}html[data-view=play] .play-heading .back-link{font-size:12px;white-space:nowrap}html[data-view=play] .play-layout{display:flex;flex:1;min-height:0;margin:0;padding:0;gap:0}html[data-view=play] .play-info{display:none}html[data-view=play] .game-shell{display:flex;flex-direction:column;flex:1;min-height:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:var(--sky)}html[data-view=play] .level-instruction,html[data-view=play] .game-bottom{display:none}html[data-view=play] .hud{height:54px;min-height:54px;max-width:900px;width:100%;margin:0 auto;padding:6px 20px;border-radius:0 0 22px 22px;background:#fff8f3e6;border:1px solid #fff8;gap:24px}html[data-view=play] .hud-stat{min-width:80px}html[data-view=play] .hud-stat>span{font-size:8px}html[data-view=play] .hud-stat b{font-size:18px}html[data-view=play] .journey{flex:1;max-width:none}html[data-view=play] .stage{flex:1;min-height:0;height:auto;position:relative;aspect-ratio:auto}html[data-view=play] #game{display:block;width:100%;height:100%;object-fit:fill;touch-action:none}html[data-view=play] .controls{height:59px;min-height:59px;max-width:600px;width:100%;margin:0 auto;display:flex;justify-content:center;align-items:center;padding:5px 12px 11px;gap:12px;background:transparent;border:0}html[data-view=play] .controls .icon-button{width:44px;height:40px}html[data-view=play] .jump-button{min-height:40px;min-width:180px;padding:9px 20px;font-size:12px}html[data-view=play] .jump-button:disabled{display:none}html[data-view=play] .direction-controls{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:auto;margin:0;padding:0;background:transparent;z-index:3}html[data-view=play] .direction-controls:not([hidden])~.game-bottom{display:none}html[data-view=play] .game-shell:has(.direction-controls:not([hidden])) .controls{justify-content:space-between;max-width:430px}html[data-view=play] .direction-controls button{width:40px;height:38px}html[data-view=play] .overlay{padding:10px;overflow:auto;align-items:center;background:#69428c38;backdrop-filter:blur(7px)}html[data-view=play] .overlay-card{width:min(690px,100%);max-width:690px;padding:24px 28px;border-radius:28px;margin:auto;overflow:visible}html[data-view=play] .overlay-card h2{font-size:31px;margin:7px 0 10px}html[data-view=play] .overlay-card>p{max-width:520px;margin:0 auto;font-size:13px;line-height:1.6}html[data-view=play] .overlay-card .primary{width:auto;min-width:230px;margin:19px auto 5px}html[data-view=play] .result-mascot{height:95px;margin:-10px auto 0;width:150px}html[data-view=play] #result-character{width:150px;height:118px;position:absolute;bottom:0;left:0}html[data-view=play] .overlay-icon{width:36px;height:36px;font-size:22px;right:8px;bottom:8px}
.game-guide{margin:16px 0 0}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:left}.guide-grid>div{padding:14px;border:1px solid #fff;border-radius:18px;background:linear-gradient(145deg,#f7e7ff,#fff1df);box-shadow:0 3px 0 #e1c9e449}.guide-grid>div:nth-child(2){background:linear-gradient(145deg,#fff1c7,#ffe4ec)}.guide-grid>div:nth-child(3){background:linear-gradient(145deg,#dff6e5,#f1f6df)}.guide-grid b{font-size:9px;letter-spacing:.7px;color:#8c558c}.guide-grid p{font-size:11px;line-height:1.55;margin-top:7px;color:#654b6b}.guide-age{font-size:10px;color:#937399;margin-top:13px}.guide-demo{height:48px;position:relative;width:170px;margin:0 auto 13px;border-radius:30px;background:linear-gradient(100deg,#f5d7ef,#fff2cd);border:2px solid #fff;overflow:hidden}.guide-donut{font-size:31px;position:absolute;left:25px;top:3px;animation:guideDonut 2.5s ease-in-out infinite}.guide-hand{position:absolute;right:22px;top:11px;font-size:30px;animation:guideHand 2.5s ease-in-out infinite}.guide-demo i{width:27px;height:27px;border:2px solid #cd95c9;border-radius:50%;position:absolute;right:20px;top:5px;animation:guideRipple 2.5s infinite}html[data-motion=calm] .guide-demo *{animation:none!important}@keyframes guideDonut{0%,100%{transform:translateX(0) rotate(-12deg)}40%,65%{transform:translateX(44px) rotate(12deg)}}@keyframes guideHand{0%,100%{transform:translateY(5px)}40%,65%{transform:translateY(-4px)}}@keyframes guideRipple{0%,35%,100%{opacity:0;transform:scale(.5)}50%{opacity:.6}75%{opacity:0;transform:scale(1.7)}}
@media(max-width:650px){.club-link{padding:8px;font-size:10px}.site-header{gap:10px}.galaxy-word{display:none}html[data-view=play] .play-heading{padding:0 10px;height:47px;min-height:47px}html[data-view=play] .play-settings{gap:5px}.sound-button{padding:7px 8px!important;font-size:10px!important}html[data-view=play] .hud{height:49px;min-height:49px;padding:5px 13px;gap:8px;border-radius:0}html[data-view=play] .hud-stat b{font-size:15px}html[data-view=play] .hud-stat{min-width:70px}html[data-view=play] .hud .journey>span{font-size:8px}html[data-view=play] .overlay{padding:7px}html[data-view=play] .overlay-card{padding:18px 14px;border-radius:23px}html[data-view=play] .overlay-card h2{font-size:24px}html[data-view=play] .overlay-card>p{font-size:11px}html[data-view=play] .result-mascot{height:64px;width:110px}html[data-view=play] #result-character{width:110px;height:86px}.guide-grid{gap:6px}.guide-grid>div{padding:10px 8px;border-radius:12px}.guide-grid b{font-size:8px;letter-spacing:0}.guide-grid p{font-size:10px;line-height:1.45}.guide-demo{height:37px;margin-bottom:9px}.guide-donut{font-size:25px}.guide-hand{font-size:25px;top:6px}html[data-view=play] .overlay-card .primary{margin-top:13px;min-height:43px;padding:10px 16px}.guide-age{font-size:9px}.game-guide{margin-top:10px}html[data-view=play] .controls{padding-bottom:calc(9px + env(safe-area-inset-bottom));height:calc(56px + env(safe-area-inset-bottom));min-height:calc(56px + env(safe-area-inset-bottom))}html[data-view=play] .direction-controls{bottom:calc(10px + env(safe-area-inset-bottom))}}
@media(max-height:650px){html[data-view=play] .overlay-card .result-mascot{display:none}.guide-demo{display:none}html[data-view=play] .overlay-card{padding:14px 20px}html[data-view=play] .overlay-card h2{font-size:24px}.guide-grid p{font-size:10px}.guide-grid>div{padding:10px}.guide-age{margin-top:7px}html[data-view=play] .overlay-card .primary{margin-top:11px;min-height:40px;padding:10px}}
/* One viewport, one play surface. Do not let intrinsic canvas width size a flex child. */
html[data-view=play],html[data-view=play] body{width:100%;height:100%;overscroll-behavior:none}html[data-view=play] main{width:100%;height:var(--app-height,100dvh);min-width:0;overflow:hidden}html[data-view=play] #play-screen{position:fixed;inset:0;width:100%;height:var(--app-height,100dvh);max-width:none;z-index:50;overflow:hidden;padding-top:env(safe-area-inset-top)}html[data-view=play] .play-layout{align-items:stretch;min-width:0;width:100%;overflow:hidden}html[data-view=play] .game-shell{position:relative;width:100%;max-width:none;height:100%;margin:0;min-width:0;align-self:stretch}html[data-view=play] .stage{width:100%;min-width:0;overflow:hidden}html[data-view=play] #game{position:absolute;inset:0;width:100%;height:100%;min-width:0;max-width:100%}html[data-view=play] .play-heading{box-sizing:border-box;flex-shrink:0}html[data-view=play] .play-settings{margin-inline-start:auto;flex-wrap:nowrap;gap:6px}html[data-view=play] .play-settings button{min-height:42px}html[data-view=play] .hud{box-sizing:border-box;flex-shrink:0;min-width:0}html[data-view=play] .journey{min-width:0}html[data-view=play] .journey>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html[data-view=play] .hud-stat{flex-shrink:0}html[data-view=play] .controls{box-sizing:border-box;max-width:720px;flex-shrink:0;gap:8px;height:calc(64px + env(safe-area-inset-bottom));min-height:calc(64px + env(safe-area-inset-bottom));padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:#fff9f1c9}html[data-view=play] .controls .icon-button,html[data-view=play] .direction-controls button{width:44px;height:44px;min-width:44px;min-height:44px}html[data-view=play] .jump-button{min-height:44px;min-width:90px;max-width:220px;flex:1;padding:8px 12px}html[data-view=play] .direction-controls{position:static;transform:none;width:auto;bottom:auto;left:auto;display:flex;gap:5px;align-items:center}html[data-view=play] .direction-controls[hidden]{display:none}html[data-view=play] .game-shell:has(.direction-controls:not([hidden])) .controls{max-width:720px;justify-content:center}html[data-view=play] .overlay{box-sizing:border-box;align-items:flex-start;overscroll-behavior:contain}html[data-view=play] .overlay-card{box-sizing:border-box;flex-shrink:0}html[data-view=play] .guide-grid p{font-size:12px}html[data-view=play] .guide-grid b{font-size:10px}.spin-button{border:0;border-radius:16px;background:linear-gradient(#c192ff,#8750d5);color:white;font-weight:900;min-height:44px;min-width:64px;box-shadow:0 3px 0 #613797;cursor:pointer}.spin-button:disabled{opacity:.5}.spin-button[hidden]{display:none}.enemy-preview{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px auto 0;max-width:420px;background:#f5e8ff;border-radius:18px;padding:8px 12px}.enemy-preview canvas{width:58px;height:58px;flex:0 0 58px}.enemy-preview span{font-size:12px;line-height:1.5;text-align:start}
@media(max-width:600px){html[data-view=play] #play-breadcrumb,html[data-view=play] #fullscreen-label,html[data-view=play] #effects-label{display:none}html[data-view=play] .play-heading{padding-inline:8px;gap:6px}html[data-view=play] .play-heading .back-link{font-size:11px}html[data-view=play] .play-settings{gap:4px}html[data-view=play] .play-settings .language-button{min-width:56px}.guide-grid{grid-template-columns:1fr}.guide-grid>div{padding:9px 12px;display:grid;grid-template-columns:72px 1fr;align-items:center;gap:8px}.guide-grid p{margin:0!important}html[data-view=play] .overlay-card>p{font-size:12px}html[data-view=play] .guide-age{font-size:11px;line-height:1.5}html[data-view=play] .controls{gap:5px}html[data-view=play] .direction-controls{gap:4px}html[data-view=play] .jump-button{min-width:66px;font-size:11px}.spin-button{min-width:52px;font-size:11px}.site-header .star-bank{margin-inline-start:0}html[data-view=play] .overlay-card{padding:14px}}
@media(max-width:360px){html[data-view=play] .play-heading .back-link{max-width:66px;white-space:normal;font-size:10px}html[data-view=play] .hud-stat{min-width:59px}html[data-view=play] .hud-stat b{font-size:13px}html[data-view=play] .controls{gap:3px}.spin-button{min-width:48px}html[data-view=play] .jump-button{min-width:56px;padding-inline:4px}}
@media(max-height:500px) and (min-width:600px){html[data-view=play] .play-heading{height:44px;min-height:44px}html[data-view=play] .hud{height:40px;min-height:40px}html[data-view=play] .controls{height:calc(52px + env(safe-area-inset-bottom));min-height:calc(52px + env(safe-area-inset-bottom));padding-top:3px;padding-bottom:calc(5px + env(safe-area-inset-bottom))}.guide-grid{grid-template-columns:repeat(3,1fr)}.enemy-preview{display:none}}

/* A generous celebration stage, including short landscape screens. */
html[data-view=play] .overlay[data-result=won] .result-mascot{display:block;width:280px;height:190px;margin:-12px auto 4px}
html[data-view=play] .overlay[data-result=won] #result-character{width:280px;height:200px;left:0;bottom:0}
html[data-view=play] .overlay[data-result=won] .overlay-icon{right:27px;bottom:19px;box-shadow:0 7px 0 #ddb16155}
html[data-view=play] .overlay[data-result=won] .overlay-card{background:radial-gradient(ellipse at 50% 20%,#fff3bf,transparent 56%),linear-gradient(145deg,#fff9f3,#f4e9ff);box-shadow:0 12px 0 #a477bd55,0 24px 70px #46235b30}
@media(max-width:650px){html[data-view=play] .overlay[data-result=won] .result-mascot{width:230px;height:158px}html[data-view=play] .overlay[data-result=won] #result-character{width:230px;height:164px}}
@media(max-height:540px) and (min-width:651px){html[data-view=play] .overlay[data-result=won] .overlay-card{padding-left:240px;min-height:250px;position:relative}html[data-view=play] .overlay[data-result=won] .result-mascot{position:absolute;left:4px;top:45px;width:230px;height:180px}html[data-view=play] .overlay[data-result=won] #result-character{width:230px;height:164px}html[dir=rtl][data-view=play] .overlay[data-result=won] .overlay-card{padding-left:24px;padding-right:240px}html[dir=rtl][data-view=play] .overlay[data-result=won] .result-mascot{left:auto;right:4px}}