@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#fff;background:#25134a;font-synthesis:none}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation}button:focus-visible{outline:3px solid #dbff61;outline-offset:5px}[hidden]{display:none!important}#app{position:fixed;inset:0;isolation:isolate}canvas{display:block;width:100%;height:100%;outline:none}#effects{position:absolute;inset:0;pointer-events:none;overflow:hidden}#effects span{position:absolute;transform:translate(-50%,-50%);font-weight:800;color:#edff8a;text-shadow:0 2px 8px #182735;white-space:nowrap}.screen{position:absolute;inset:0}#menu{background:linear-gradient(90deg,#25104afc 0%,#311654f5 31%,#30185291 58%,#3414550a 85%),linear-gradient(0deg,#211237f2,transparent 55%);overflow:auto}.menu-top{position:absolute;left:4.5vw;right:3vw;top:3.5vh;display:flex;justify-content:space-between;align-items:center}.wordmark{font:900 38px 'Barlow Condensed',Impact,sans-serif;font-style:italic;letter-spacing:-1px}.wordmark>span{color:#dcff64;font-size:28px;margin-left:5px}.icon{background:#261c4359;backdrop-filter:blur(12px);border:1px solid #ffffff30;width:48px;height:48px;border-radius:15px;font-size:26px;display:grid;place-items:center}.icon:hover{background:#583d7988}.menu-content{position:relative;margin:17vh 0 0 8vw;width:51%;max-width:780px}.pill{display:inline-block;font-size:10px;letter-spacing:2.4px;font-weight:700;color:#e0ff79}.menu-content>.pill{border:1px solid #a888d967;padding:8px 12px;border-radius:5px;transform:rotate(-2deg)}h1{font:900 clamp(58px,6.9vw,116px)/.91 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:25px 0 19px;transform:skew(-6deg);text-shadow:0 7px 0 #120b3022}h1 em{font-style:normal;color:#ddff68}.menu-tagline{font-size:14px;color:#d0bfdf;margin:0 0 27px}.primary{background:#deff69;color:#241444;border-radius:12px;padding:17px 27px;font:800 23px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;box-shadow:0 5px 0 #86a63c,0 12px 35px #c9ff4920;display:flex;align-items:center;justify-content:space-between;gap:70px;min-width:245px;transition:transform .15s,background .15s}.primary:hover{background:#edffab;transform:translateY(-2px)}.primary:active{transform:translateY(3px)}.primary>span{font:28px 'DM Sans',sans-serif}.text-button{display:block;background:none;color:#d9cde6;font-size:12px;padding:17px 0}.text-button span{margin-left:20px;color:#dfff6c}#help{position:absolute;background:#352050f5;backdrop-filter:blur(15px);padding:14px 20px;border:1px solid #b697d250;border-radius:12px;z-index:5;box-shadow:0 10px 40px #14052b80;font-size:12px}#help p{margin:8px 0}kbd{font:700 10px 'DM Sans',sans-serif;background:#ffffff20;padding:5px 8px;border-radius:4px;margin-right:5px}.map-picker{position:absolute;left:8vw;bottom:5vh;width:min(640px,55vw)}.map-heading{display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:1.7px;margin-bottom:13px;color:#c8b6db}.map-heading span:last-child{color:#e0ff79;letter-spacing:.8px}.map-list{display:flex;gap:13px}.map-card{flex:1;min-width:0;padding:0;overflow:hidden;background:#48355a;border:2px solid #ffffff26;border-radius:12px;text-align:left;transition:transform .2s,border-color .2s}.map-card:hover{transform:translateY(-5px)}.map-card[aria-pressed=true]{border-color:#dcff69;box-shadow:0 0 22px #d4ff3d18}.map-art{height:72px;position:relative;display:block;overflow:hidden;background:linear-gradient(145deg,#76e2b6,#15a4ae)}.coast .map-art{background:linear-gradient(155deg,#63dbff 50%,#098bc1 51%,#51d3d6 76%,#ffe1a1 77%)}.sunset .map-art{background:radial-gradient(circle at 75% 47%,#ffe889 0 15%,transparent 16%),linear-gradient(160deg,#9e44d6,#fb747c 70%,#feab80)}.map-art:before,.map-art:after{content:'';position:absolute;width:45%;height:70%;bottom:-24%;left:8%;background:#236e6970;border-radius:60% 60% 0 0;transform:rotate(-15deg)}.map-art:after{left:55%;height:90%;background:#236e6940}.map-art i{position:absolute;left:48%;bottom:0;width:29%;height:65%;border:5px solid #fcffe6;border-bottom:0;transform:skewY(-9deg);z-index:1}.map-art b{position:absolute;left:12px;top:6px;font:800 34px 'Barlow Condensed',Impact,sans-serif;color:#ffffffbd}.selected{display:none;position:absolute;right:8px;top:8px;background:#ddff69;color:#293743;width:20px;height:20px;border-radius:50%;text-align:center;font-size:13px;z-index:2}.map-card[aria-pressed=true] .selected{display:block}.map-info{display:block;padding:10px 12px;background:#322043}.map-info strong{display:block;font-size:12px}.map-info small{display:block;font-size:7px;letter-spacing:1px;color:#b6a4c9;margin-top:5px}.menu-sticker{position:absolute;right:6vw;top:19vh;transform:rotate(12deg);width:110px;height:110px;display:grid;place-content:center;border-radius:50%;background:#ff8558;color:#3a1747;font:900 30px/.8 'Barlow Condensed',Impact,sans-serif;box-shadow:0 0 0 6px #ff855829}.menu-sticker span{position:absolute;right:15px;bottom:10px;font-size:24px}#hud{position:absolute;inset:0;pointer-events:none}.hud-score{position:absolute;top:max(24px,env(safe-area-inset-top));left:30px;display:flex;align-items:center;gap:18px;filter:drop-shadow(0 2px 5px #20392d60)}.hud-score strong{font:800 48px 'Barlow Condensed',Impact,sans-serif}.hud-score>span{font-weight:700;font-size:12px;background:#21324770;padding:8px 12px;border-radius:30px;backdrop-filter:blur(10px)}.hud-actions{position:absolute;right:24px;top:24px;display:flex;gap:8px;pointer-events:auto}#start-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);background:#201b4277;backdrop-filter:blur(12px);padding:12px 17px;border-radius:12px;font-size:12px;white-space:nowrap}#start-hint>span{padding:0 10px;opacity:.5}.dialog-screen{position:absolute;inset:0;background:#201333ad;backdrop-filter:blur(10px);display:grid;place-items:center}.dialog{width:min(390px,88vw);text-align:center;padding:35px 30px;background:linear-gradient(145deg,#483060,#24173b);border:1px solid #ffffff26;border-radius:24px;box-shadow:0 30px 100px #180f3d80}.dialog h2{font:900 65px/.95 'Barlow Condensed',Impact,sans-serif;margin:22px 0}.dialog .primary{width:100%;min-width:0}.dialog .text-button{margin:auto}.secondary{width:100%;background:#ffffff12;padding:15px;margin-top:15px;border-radius:10px;font-size:13px}.result-points{font:800 68px 'Barlow Condensed',Impact,sans-serif;color:#deff69}.dialog p{font-size:12px;color:#ccbcdb;margin:5px 0 26px}.touch{display:none;position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:24px;right:24px;justify-content:space-between;pointer-events:none}.touch button{width:78px;height:78px;border-radius:50%;background:#241b4988;backdrop-filter:blur(12px);border:2px solid #ffffff60;font-size:28px;pointer-events:auto;touch-action:none;user-select:none}.touch small{display:block;font-size:8px;font-weight:700;letter-spacing:1px}.touch .pressed{background:#dfff69;color:#24183e}@media(pointer:coarse){.touch{display:flex}#start-hint{bottom:125px}}@media(max-height:760px) and (min-width:701px){.menu-content{margin-top:14vh}h1{font-size:clamp(48px,6vw,90px);margin:16px 0}.menu-tagline{margin-bottom:16px}.map-picker{bottom:3vh}.map-art{height:52px}.primary{padding:12px 24px}.menu-content>.pill{padding:6px 10px}}@media(max-width:700px){.menu-top{left:6vw;right:6vw;top:22px}.wordmark{font-size:32px}.menu-content{margin:17vh 0 0 7vw;width:85%}h1{font-size:clamp(50px,12vw,76px)}.menu-tagline{font-size:12px}.menu-content>.pill{font-size:8px}.menu-sticker{display:none}.map-picker{left:6vw;bottom:4vh;width:88vw}.map-list{gap:8px}.map-art{height:57px}.map-info{padding:9px 7px}.map-info strong{font-size:10px}.map-info small{font-size:6px;letter-spacing:.3px}.map-heading{font-size:8px;letter-spacing:.7px}.map-art b{font-size:27px}.primary{min-width:210px}.hud-score{left:18px;top:18px}.hud-score strong{font-size:38px}.hud-actions{right:16px;top:18px}.icon{width:42px;height:42px}#menu{background:linear-gradient(90deg,#25104af2,#311654a8 65%,#34145565),linear-gradient(0deg,#211237f2,transparent 65%)}}@media(max-height:530px){.menu-top{top:15px}.menu-content{margin-top:85px;width:50%}h1{font-size:48px}.menu-tagline,.menu-content>.pill,.menu-sticker{display:none}.map-picker{left:auto;right:4vw;bottom:8vh;width:39vw}.map-art{height:65px}.map-info small{display:none}.map-heading span:last-child{display:none}.primary{padding:10px 20px;min-width:180px}.map-list{gap:7px}.map-info{padding:8px 5px}.map-info strong{font-size:9px}}
/* Phone controls: safe edges, independent fingers, and no gesture scrolling. */
#app{height:100dvh;bottom:auto}#game{-webkit-touch-callout:none;touch-action:none}.touch-help{display:none}body[data-touch=true] .touch-help{display:block}body[data-touch=true] .keyboard-help{display:none}body[data-touch=true] .touch{display:flex;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));gap:20px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}body[data-touch=true] .touch button{width:112px;height:112px;border-radius:28px;border:2px solid #ffffff80;background:linear-gradient(145deg,#443160e8,#24193ee8);box-shadow:0 5px 0 #1c123bd9,0 10px 25px #0003;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;touch-action:none;transition:background .08s,transform .08s}body[data-touch=true] .touch button[data-key=Space]{border-color:#dfff78}body[data-touch=true] .touch .pressed{background:linear-gradient(145deg,#edff9b,#b9e645);color:#26153e;transform:translateY(4px);box-shadow:0 1px 0 #708934}.touch strong{font-size:13px;letter-spacing:1px}.touch small{font-size:8px;letter-spacing:0}.control-symbol{font-size:29px;line-height:1.1}body[data-touch=true] #start-hint{bottom:calc(145px + env(safe-area-inset-bottom));font-size:11px;max-width:90%;white-space:normal;text-align:center;width:max-content}body[data-touch=true] .hud-actions{top:calc(12px + env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}body[data-touch=true] .hud-score{top:calc(12px + env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left))}body[data-touch=true] .icon{width:48px;height:48px}.dialog-screen{padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));overflow:auto}.dialog{max-height:100%;overflow:auto}body[data-touch=true] .menu-top{top:calc(16px + env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right))}
@media(max-width:700px) and (orientation:portrait){body[data-touch=true] #menu{display:flex;flex-direction:column;padding:calc(98px + env(safe-area-inset-top)) 7vw calc(22px + env(safe-area-inset-bottom));gap:25px}body[data-touch=true] .menu-content{margin:0;width:100%;flex:1}body[data-touch=true] .map-picker{position:relative;inset:auto;width:100%;margin-top:auto}body[data-touch=true] #help{position:relative;margin-top:0}body[data-touch=true] h1{font-size:clamp(48px,13vw,78px);margin:22px 0 16px}body[data-touch=true] .menu-tagline{margin-bottom:22px}body[data-touch=true] .menu-sticker{display:none}}
@media(orientation:landscape) and (max-height:550px){body[data-touch=true] .touch button{width:104px;height:86px;border-radius:23px;gap:2px}body[data-touch=true] .touch{bottom:calc(10px + env(safe-area-inset-bottom));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right))}body[data-touch=true] #start-hint{bottom:30px;max-width:45%}.dialog{padding:18px 24px}.dialog h2{font-size:40px;margin:10px 0}.dialog .pill{font-size:8px}.result-points{font-size:40px}.dialog p{margin:5px 0 12px}.dialog .primary{padding:8px 20px}.dialog .secondary{padding:10px;margin-top:12px}.dialog .text-button{padding:10px 0}body[data-touch=true] #help{position:fixed;left:20%;top:20%;width:60%;max-height:70dvh;overflow:auto}body[data-touch=true] .menu-content{margin-top:90px;margin-left:max(7vw,env(safe-area-inset-left))}body[data-touch=true] .menu-top{top:calc(10px + env(safe-area-inset-top))}body[data-touch=true] .map-picker{right:max(4vw,env(safe-area-inset-right))}}
@media(max-width:360px) and (orientation:portrait){body[data-touch=true] .touch button{width:100px;height:104px}body[data-touch=true] h1{font-size:46px}body[data-touch=true] .menu-tagline{font-size:11px}}
#result-title{font-size:clamp(34px,7vw,56px);overflow-wrap:anywhere}#result-label{line-height:1.7;letter-spacing:1px}#effects span{font-family:'Barlow Condensed',Impact,sans-serif;font-size:28px;font-style:italic}
.twist-controls{display:flex;align-items:center;justify-content:center;gap:6px;position:relative;align-self:flex-end;margin-bottom:20px;pointer-events:auto}.touch .twist-controls button,body[data-touch=true] .touch .twist-controls button{width:44px;height:55px;border-radius:16px;font-size:29px;flex-shrink:0}.twist-controls>small{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1px;font-weight:700;color:white;text-shadow:0 1px 3px #211333}body[data-touch=true] .touch{gap:8px}@media(max-width:380px){body[data-touch=true] .touch>button{width:92px;height:100px}.twist-controls{gap:4px}.touch .twist-controls button,body[data-touch=true] .touch .twist-controls button{width:40px}}@media(orientation:landscape){.twist-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:0}}
.character-picker{width:320px;max-width:100%;margin:0 0 22px}.character-heading{font-size:9px;letter-spacing:1.5px;color:#c9b9df;display:flex;justify-content:space-between;margin-bottom:9px}.character-heading span{color:#dfff78;font-size:10px;letter-spacing:.5px}#character-list{display:flex;gap:8px}#character-list button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;background:#ffffff0e;border:2px solid #ffffff22;border-radius:12px;padding:8px 5px 6px;font-size:10px;color:#e6daf4;transition:background .15s,transform .15s}#character-list button:hover{background:#ffffff20;transform:translateY(-2px)}#character-list button[aria-pressed=true]{border-color:#dfff78;background:#dfff781c;color:#efffb4}.character-avatar{position:relative;display:block;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#675782,#322542);overflow:hidden}.character-avatar:before{content:'';position:absolute;left:6px;bottom:-12px;width:28px;height:30px;border-radius:12px;background:var(--outfit)}.character-avatar i{position:absolute;left:10px;top:5px;width:20px;height:23px;border-radius:10px;background:var(--skin);border-top:6px solid var(--hair)}[data-character=neon] .character-avatar i:before{content:'';position:absolute;background:var(--hair);width:10px;height:10px;border-radius:50%;top:-10px;left:5px}[data-character=astro] .character-avatar i{border:4px solid #eff4ff;background:#255c7e;border-radius:11px}[data-character=shadow] .character-avatar i:after{content:'';position:absolute;background:#332749;left:-1px;right:-1px;bottom:0;height:11px;border-radius:0 0 10px 10px}@media(max-height:800px) and (min-width:701px){.character-picker{margin-bottom:14px}#character-list button{padding:5px 4px;gap:3px}.character-avatar{width:32px;height:32px}.menu-content{margin-top:12vh}h1{font-size:clamp(45px,5.4vw,78px);margin:16px 0}.menu-tagline{margin-bottom:14px}}@media(max-width:700px) and (orientation:portrait){.character-picker{width:100%;margin-bottom:20px}body[data-touch=true] #menu{gap:24px}}@media(max-height:530px) and (orientation:landscape){.character-picker{width:280px;margin-bottom:12px}.character-avatar{display:none}.character-heading{margin-bottom:5px}#character-list button{min-height:34px;padding:6px}.menu-content{margin-top:75px}body[data-touch=true] .menu-content{margin-top:75px}h1{font-size:40px;margin:8px 0 14px}}
#target-guide{position:absolute;transform:translate(-50%,-50%);background:#211638c9;border:1px solid #e3ff8a99;color:#e7ff96;padding:8px 10px;border-radius:25px;font:700 12px 'DM Sans',sans-serif;pointer-events:none;backdrop-filter:blur(8px);white-space:nowrap;box-shadow:0 2px 12px #0002}body[data-touch=true] #start-hint{bottom:calc(136px + env(safe-area-inset-bottom))}@media(orientation:landscape) and (max-height:550px){body[data-touch=true] #start-hint{bottom:105px;font-size:10px}}
/* Character-first main menu. */
body[data-screen=menu] #game{visibility:hidden}
body[data-screen=menu] #menu{display:grid;grid-template-rows:54px minmax(0,1fr) 128px;gap:8px;padding:18px max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom));overflow:auto;background:radial-gradient(ellipse at 50% 39%,#7950bb55,transparent 42%),radial-gradient(ellipse at 90% 5%,#27788366,transparent 42%),linear-gradient(135deg,#30154d,#201439 65%,#40246a)}
#menu .menu-top{position:relative;inset:auto;display:flex;align-items:center;justify-content:space-between;width:100%}
#menu .menu-content{position:relative;inset:auto;margin:0 auto;max-width:620px;width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center}
.character-stage{position:relative;flex:1;min-height:130px;width:min(500px,100%)}#character-preview{position:relative;width:100%;height:100%;pointer-events:none;z-index:1}.stage-halo{position:absolute;left:50%;bottom:5%;width:53%;height:8%;transform:translateX(-50%);border-radius:50%;background:#bd85ff30;box-shadow:0 0 50px #965cec44,0 0 0 1px #d3afff40}.character-stage:before{content:'';position:absolute;width:65%;height:70%;left:17.5%;top:12%;border-radius:50%;border:1px solid #d9b9ff12;box-shadow:0 0 0 22px #bf8cff05}
.character-arrow{position:absolute;top:48%;transform:translateY(-50%);z-index:2;width:60px;height:60px;border-radius:50%;border:1px solid #d9baff66;background:#76519b40;backdrop-filter:blur(10px);font:400 48px/1 sans-serif;display:grid;place-items:center;padding-bottom:5px;box-shadow:0 5px 20px #1b0b3020;transition:background .15s,scale .15s}.character-arrow:hover{background:#b0ed6740;border-color:#dfff78;scale:1.08}#character-prev{left:2%}#character-next{right:2%}.character-caption{text-align:center;margin:0 0 12px;flex-shrink:0}.character-caption>span{font-size:9px;letter-spacing:3px;color:#c4a6e6}#menu #character-name{font:800 36px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;transform:none;color:#e4ff8b;margin:5px 0;text-shadow:none;text-transform:uppercase}#character-style{margin:0;font-size:11px;color:#c5b1d7}#menu .primary{min-width:250px;padding:12px 25px;flex-shrink:0}#menu .text-button{padding:12px 10px;font-size:11px;flex-shrink:0}#menu .map-picker{position:relative;inset:auto;width:min(620px,100%);margin:0 auto;align-self:end}#menu .map-heading{margin-bottom:9px}#menu .map-art{height:42px}#menu .map-info{padding:8px 12px}#menu .map-info strong{font-size:12px}#menu .map-info small{display:block;font-size:7px}#menu .map-heading span:last-child{display:block}#menu #help{position:absolute;top:auto;bottom:80px;left:50%;transform:translateX(-50%);width:min(360px,95vw);max-height:60dvh;overflow:auto;z-index:10}
@media(max-width:700px) and (orientation:portrait){body[data-screen=menu] #menu{grid-template-rows:48px minmax(0,1fr) 115px;padding:calc(12px + env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));gap:4px}#menu .wordmark{font-size:30px}#menu .character-arrow{width:48px;height:48px;font-size:39px}#menu .map-art{height:38px}#menu .map-info{padding:7px}#menu .map-info strong{font-size:10px}#menu .map-info small{font-size:6px}#menu #character-name{font-size:32px}.character-caption{margin-bottom:10px}#menu .primary{min-width:220px;padding:10px 22px}#menu .map-list{gap:8px}}
@media(max-height:540px) and (orientation:landscape){body[data-screen=menu] #menu{grid-template-rows:40px minmax(0,1fr) 90px;padding:8px max(20px,env(safe-area-inset-right)) 10px;gap:0}#menu .menu-content{max-width:none;display:block}.character-stage{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%;width:300px;min-height:0}#menu .character-caption{position:absolute;left:calc(50% + 165px);top:15px;width:140px;margin:0}#menu .primary{position:absolute;left:calc(50% + 150px);top:95px;min-width:170px;padding:8px 16px;font-size:20px}#menu .text-button{position:absolute;left:calc(50% + 157px);top:144px;padding:8px 0}.character-arrow{width:44px;height:44px;font-size:35px}#menu #character-name{font-size:28px}#menu .map-art{height:27px}#menu .map-info{padding:5px 10px}#menu .map-info small{display:none}#menu .map-heading{margin-bottom:6px}.stage-halo{bottom:0}#menu #help{position:fixed;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);max-height:80dvh}}
/* Five-card map carousel: selected centre, two ghost cards on either side. */
#menu .map-picker{width:min(850px,100%)}.map-carousel{position:relative;height:104px;--card-width:190px;--step:145px;--far:280px}#map-track{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;cursor:grab;outline:none;user-select:none;-webkit-user-select:none}#map-track.dragging{cursor:grabbing}#menu #map-track .map-card{position:absolute;width:var(--card-width);height:100px;left:50%;top:0;margin:0;display:block;flex:none;transform:translateX(calc(-50% + var(--drag,0px)));z-index:5;opacity:1;transition:transform .28s ease,opacity .28s ease,filter .28s ease;will-change:transform}#menu #map-track .map-card[data-offset='-1']{transform:translateX(calc(-50% - var(--step) + var(--drag,0px))) scale(.82);opacity:.36;z-index:4;filter:saturate(.45)}#menu #map-track .map-card[data-offset='1']{transform:translateX(calc(-50% + var(--step) + var(--drag,0px))) scale(.82);opacity:.36;z-index:4;filter:saturate(.45)}#menu #map-track .map-card[data-offset='-2']{transform:translateX(calc(-50% - var(--far) + var(--drag,0px))) scale(.65);opacity:.15;z-index:3;filter:saturate(.15)}#menu #map-track .map-card[data-offset='2']{transform:translateX(calc(-50% + var(--far) + var(--drag,0px))) scale(.65);opacity:.15;z-index:3;filter:saturate(.15)}#menu #map-track .map-card[aria-hidden=true]{opacity:0;visibility:hidden;pointer-events:none}#menu #map-track.dragging .map-card{transition:none}.map-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:9;width:36px;height:44px;border:1px solid #b998db6b;border-radius:13px;background:#281b43e8;font-size:32px;line-height:1;padding-bottom:5px}#map-prev{left:0}#map-next{right:0}.map-arrow:hover{background:#513470}#menu #map-track .map-art{height:52px}#menu #map-track .map-info{height:44px;padding:6px 10px}#menu #map-track .map-info small{display:block}#menu #map-track .map-info strong{font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#map-counter{margin-left:10px;color:#dfc7fa}
.city .map-art{background:linear-gradient(145deg,#6b78ad,#c1b6df)}.city .map-art:before{border-radius:0;left:8%;bottom:0;width:16%;height:75%;background:repeating-linear-gradient(0deg,#293c63 0 8px,#b5d9e3 9px 12px);transform:none;box-shadow:32px 15px 0 #405886,75px -10px 0 #344363}.city .map-art:after{display:none}.harbor .map-art{background:linear-gradient(#9acfd9 65%,#267697 66%)}.harbor .map-art:before{border-radius:0;bottom:0;left:9%;width:32%;height:30%;background:#d96555;transform:none;box-shadow:37px -13px 0 #e6b154,65px 0 0 #386d94}.harbor .map-art:after{border-radius:0;transform:none;left:65%;bottom:22%;width:4px;height:70%;background:#f2c958;box-shadow:12px 0 0 #f2c958}.alpine .map-art{background:linear-gradient(#a6d9ed,#edf6fc)}.alpine .map-art:before{background:#789aaa;transform:rotate(45deg);border-radius:3px;width:58%;height:140%;bottom:-90%;left:7%}.alpine .map-art:after{background:#fff;transform:rotate(45deg);border-radius:3px;width:40%;height:110%;bottom:-65%;left:52%}.sunset .map-art i{border-color:#ffc687;border-width:10px;border-radius:45% 45% 0 0}.city .map-art i,.harbor .map-art i,.alpine .map-art i{opacity:.4;width:21%;height:43%;left:63%}
@media(max-width:700px){.map-carousel{--card-width:142px;--step:89px;--far:146px}.map-arrow{width:30px;height:42px;font-size:28px}#menu #map-track .map-info strong{font-size:10px}#menu #map-track .map-info small{font-size:6px}#menu #map-track .map-info{padding:7px 5px}#menu #map-track .map-art{height:49px}}@media(max-height:540px) and (orientation:landscape){.map-carousel{height:72px;--card-width:164px;--step:132px;--far:250px}#menu #map-track .map-card{height:70px}#menu #map-track .map-art{height:32px}#menu #map-track .map-info{height:34px;padding:4px 8px}#menu #map-track .map-info strong{font-size:11px}#menu #map-track .map-info small{font-size:6px}}
#menu #map-counter{display:inline;margin-left:8px}

/* Combo feedback stays clear of the player and touch controls. */
#combo-display{position:fixed;z-index:12;top:max(88px,calc(env(safe-area-inset-top) + 74px));left:calc(50% - 95px);width:190px;text-align:center;pointer-events:none;color:var(--combo-color,#bcff58);filter:drop-shadow(0 4px 0 #26103b) drop-shadow(0 0 18px #b3ff5540);font-weight:900;line-height:1}
#combo-display[hidden]{display:none}#combo-caption{display:block;font-size:12px;letter-spacing:2px}#combo-multiplier{display:block;font-size:64px;font-style:italic;letter-spacing:-5px}#combo-bonus{display:inline-block;margin-top:6px;border-radius:20px;background:#251044df;padding:7px 12px;font-size:13px;color:#fff}#combo-sparks{position:absolute;inset:50% 0 auto 50%}#combo-sparks i{position:absolute;width:7px;height:13px;background:var(--combo-color);border-radius:3px;opacity:0}
body:not([data-screen="play"]) #combo-display{display:none}
@media(max-width:600px){#combo-display{top:max(85px,calc(env(safe-area-inset-top) + 70px))}#combo-multiplier{font-size:52px}}
@media(max-height:500px){#combo-display{top:14px;left:calc(50% - 95px)}#combo-multiplier{font-size:40px}#combo-caption{font-size:10px}#combo-bonus{margin-top:3px;padding:4px 9px}}
/* Quiet, translucent touch controls with full-size thumb targets. */
body[data-touch=true] .touch{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));align-items:flex-end;gap:12px}
body[data-touch=true] .touch button,body[data-touch=true] .touch .twist-controls button{width:72px;height:72px;min-width:0;flex-shrink:0;padding:0;border-radius:7px;border:1px solid #ffffff30;background:#15202c1a;backdrop-filter:none;box-shadow:none;color:#ffffffa6;text-shadow:0 1px 3px #15202c55;gap:0;transform:none;transition:background .12s,border-color .12s,color .12s}
body[data-touch=true] .touch button[data-key=Space]{border-color:#ffffff30}
body[data-touch=true] .touch strong{font-size:11px;font-weight:500;letter-spacing:1px}
body[data-touch=true] .touch .control-symbol,body[data-touch=true] .touch small{display:none}
body[data-touch=true] .touch .twist-controls{position:static;transform:none;align-self:center;margin:0;gap:8px}
body[data-touch=true] .touch .twist-controls button{width:48px;height:48px;font-size:24px;font-weight:400}
body[data-touch=true] .touch button.pressed{background:#ffffff2e;border-color:#ffffff80;color:#fffffff2;box-shadow:none;transform:none}
body[data-touch=true] #start-hint{bottom:calc(104px + env(safe-area-inset-bottom));background:#15202c26;backdrop-filter:none;border-radius:5px;color:#ffffffb3;font-size:10px;padding:7px 10px}
/* Water destinations have shoreline silhouettes in the map picker. */
#menu .coast .map-art,#menu .harbor .map-art{background:linear-gradient(170deg,#8be4f0 0 44%,#22babb 45% 100%)}
#menu .sunset .map-art{background:radial-gradient(circle at 76% 27%,#ffdd99 0 12%,transparent 13%),linear-gradient(#e8a095 0 46%,#489ea4 47%)}
#menu .alpine .map-art{background:linear-gradient(#c6e9f7 0 45%,#3b9eba 46%)}
#menu :is(.coast,.sunset,.harbor,.alpine) .map-art:before{left:-5%;bottom:-8%;width:43%;height:78%;border-radius:4px 12px 0 0;transform:rotate(-6deg);background:#748e76;clip-path:polygon(0 8%,100% 0,89% 65%,68% 100%,0 100%)}
#menu .sunset .map-art:before{background:#be8061}#menu .alpine .map-art:before{background:#7d93a1}
#menu :is(.coast,.sunset,.harbor,.alpine) .map-art i{left:16%;bottom:55%;width:17%;height:35%;border-width:3px;transform:none}
#menu .harbor .map-art:after{background:#598767;border-radius:50% 50% 0 0;height:26%;bottom:8%;width:30%;left:62%;transform:none}
#menu .alpine .map-art:after{background:linear-gradient(#f1f5ff 0 26%,#8aa2b5 27%);clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0;bottom:20%;height:65%;transform:none}
/* Campaign: character shop above a linear chapter trail. */
.menu-wallet{display:flex;align-items:center;gap:14px}#wallet{color:#ffe09b;font-weight:800;font-size:18px;white-space:nowrap}
body[data-screen=menu] #menu{grid-template-rows:54px minmax(0,1fr) 176px}
#menu .character-caption{max-width:420px;margin-bottom:9px}#menu #character-style{font-size:10px}#character-ability{color:#e4d4f6;font-size:11px;line-height:1.45;margin:7px auto 0;max-width:340px}
.buy-button{background:#ffe09b;color:#342145;border:0;border-radius:7px;font-size:12px;font-weight:700;padding:9px 17px;margin-top:8px}.buy-button:disabled{background:#ffffff12;color:#c7b6d2}
#menu .primary:disabled{background:#ffffff15;color:#ae9fbd;box-shadow:none;transform:none;cursor:default}
.chapter-brief{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin-bottom:9px;align-items:center}.chapter-brief strong{font-size:13px;color:#edddff}.chapter-brief>span{font-size:9px;color:#e4ff8b}.chapter-brief p{grid-column:1/-1;margin:0;font-size:10px;color:#baabc9;line-height:1.4}
#menu .map-heading{margin-bottom:6px}#menu .map-card.locked .map-art{filter:saturate(.15) brightness(.6)}#menu .map-card.locked .map-art:after{content:'×';clip-path:none;background:#251a3bcc;border-radius:50%;transform:none;display:grid;place-items:center;font-size:22px;width:27px;height:27px;top:9px;left:auto;right:9px;box-shadow:none;color:#eee}
#hud-goal{position:absolute;top:100%;left:0;font-size:11px;white-space:nowrap;color:#fff;opacity:.85;font-weight:700}.hud-score{padding-bottom:4px}
#result-reward{color:#ffe09b;font-weight:800;font-size:21px;margin:10px 0}#result-unlock{line-height:1.5;color:#e5d8f1}#next-chapter{margin-bottom:12px}#result .primary{font-size:19px;gap:10px}
body[data-touch=true] .touch .twist-controls{position:relative}body[data-touch=true] .touch .twist-controls .special-control{position:absolute;bottom:56px;left:calc(50% - 28px);width:56px;height:44px;font-size:8px;letter-spacing:.6px}body[data-touch=true] .touch .special-control.spent{opacity:.35}body[data-touch=true] #start-hint{bottom:calc(132px + env(safe-area-inset-bottom))}
@media(max-width:700px) and (orientation:portrait){body[data-screen=menu] #menu{grid-template-rows:42px minmax(0,1fr) 173px;padding-top:calc(8px + env(safe-area-inset-top));gap:4px}#menu .character-stage{min-height:100px}#menu #character-name{font-size:27px}#character-ability{font-size:10px;max-width:290px}#menu .character-caption{margin-bottom:7px}.chapter-brief{grid-template-columns:1fr;gap:3px;margin-bottom:7px}.chapter-brief p{font-size:9px}.chapter-brief strong{font-size:12px}.chapter-brief>span{font-size:8px}#menu .map-heading{font-size:8px}#wallet{font-size:16px}.menu-wallet{gap:8px}#menu .primary{font-size:20px;padding:9px 18px}#menu .text-button{padding:8px}#menu #character-style{font-size:9px}}
@media(max-height:640px) and (orientation:portrait){#menu .character-stage{min-height:75px}#menu .character-caption{margin-bottom:4px}#menu #character-name{font-size:23px}#menu #character-style{display:none}#character-ability{margin-top:3px;font-size:9px;line-height:1.2}.buy-button{margin-top:4px;padding:6px 10px}#menu .text-button{padding:6px}#menu .character-arrow{width:40px;height:40px}}
@media(max-height:540px) and (orientation:landscape){body[data-screen=menu] #menu{grid-template-rows:38px minmax(0,1fr) 122px}#menu .character-stage{left:36%;width:280px}#menu .character-caption{left:60%;top:0;width:34%;max-width:280px}#menu #character-name{font-size:23px}#menu #character-style{display:none}#character-ability{font-size:9px;margin:3px 0}.buy-button{margin:4px 0 0;padding:6px 10px;font-size:10px}#menu .primary{left:64%;top:110px;font-size:16px;padding:7px 12px;min-width:150px}#menu .text-button{left:9%;top:auto;bottom:0;font-size:10px}.chapter-brief{margin-bottom:5px}.chapter-brief p{display:none}.chapter-brief strong{font-size:11px}#menu .map-heading{margin-bottom:3px}#menu #help{z-index:20}#menu .character-arrow{width:40px;height:40px}#wallet{font-size:15px}}
body[data-touch=true] .touch .twist-controls{left:auto;right:auto;top:auto;bottom:auto}.map-arrow:disabled{opacity:.25;cursor:default}
/* Minimal extra actions stay above the twist buttons. */
body[data-touch=true] .touch .twist-controls .bomb-control,body[data-touch=true] .touch .twist-controls .dive-control{position:absolute;bottom:108px;width:48px;height:44px;font-size:9px}
body[data-touch=true] .touch .twist-controls .bomb-control{left:0}body[data-touch=true] .touch .twist-controls .dive-control{right:0}
.guide-button{background:#ffffff0e;border:1px solid #ffffff30;color:#ebdef7;font-size:11px;letter-spacing:1px;padding:8px 15px;border-radius:7px;margin-top:8px}
#menu .character-stage{min-height:80px}.guide-screen{position:absolute;inset:0;z-index:30;background:#171426ed;backdrop-filter:blur(12px);overflow:auto;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom))}
.guide-shell{max-width:850px;margin:auto;background:#f2ebdd;color:#302c42;border-radius:18px;overflow:hidden;box-shadow:0 18px 80px #0006}.guide-shell header{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #33294422}.guide-shell h2{margin:4px 0 0;font-size:28px}.guide-shell header small{font-size:9px;letter-spacing:2px;color:#766775}.guide-shell .icon{color:#302c42;background:#3329440d;border-color:#33294422}
.guide-layout{display:grid;grid-template-columns:195px 1fr}#trick-list{padding:12px;border-right:1px solid #33294422;display:flex;flex-direction:column;gap:5px;max-height:72vh;overflow:auto}#trick-list button{background:transparent;color:#54445c;text-align:left;padding:10px;border-radius:7px;display:grid;gap:4px}#trick-list button strong{font-size:12px}#trick-list button span{font-size:8px;letter-spacing:1px;opacity:.6}#trick-list button[aria-current=true]{background:#352448;color:#f5f0da}
.trick-page{padding:22px;min-width:0}.trick-top{display:flex;justify-content:space-between;font-size:9px;font-weight:700;color:#806950;gap:10px}#trick-state[data-unlocked=true]{color:#347857}.trick-page h3{font-size:29px;margin:9px 0 5px}#trick-owners{font-size:10px;letter-spacing:.6px;color:#756877;margin:0 0 14px}#trick-demo{width:100%;height:auto;aspect-ratio:520/230;border-radius:10px}#demo-cue{text-align:center;font-size:11px;font-weight:700;min-height:29px;padding:8px;background:#e2d9cf}#trick-keys{margin-top:15px;font-size:13px;font-weight:800;color:#7150a1}#trick-how{font-size:13px;line-height:1.6}#trick-unlock{font-size:11px;color:#81717b}.guide-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.guide-actions .secondary{color:#302c42;border:1px solid #33294433;width:auto;padding:10px;font-size:10px;margin:0}.guide-actions .primary{min-width:0;padding:10px 15px;font-size:16px;gap:10px;box-shadow:none}
.is-tutorial .guide-shell{max-width:580px}.is-tutorial .guide-layout{display:block}.is-tutorial #trick-list{display:none}
#menu #map-track .map-art{position:relative;background:#283a40}#menu #map-track .map-art:before,#menu #map-track .map-art:after,#menu #map-track .map-art i{display:none}#menu #map-track .map-art img{width:100%;height:100%;object-fit:cover;display:block}#menu #map-track .map-art b{font-size:18px;top:5px;left:7px;text-shadow:0 1px 4px #000a}#menu .map-card.locked .map-art{filter:saturate(.3) brightness(.65)}
@media(max-width:600px){.guide-shell header{padding:14px}.guide-shell h2{font-size:23px}.guide-layout{display:flex;flex-direction:column}#trick-list{flex-direction:row;max-height:none;overflow-x:auto;border-right:0;border-bottom:1px solid #33294422;flex-shrink:0}#trick-list button{min-width:110px;flex-shrink:0}.trick-page{padding:15px}.trick-page h3{font-size:25px}.guide-button{margin-top:5px;padding:6px 12px;font-size:10px}}
@media(max-height:640px) and (orientation:portrait){#menu .character-stage{min-height:55px}.guide-button{padding:5px 10px;margin-top:4px}#menu .text-button{padding:5px}}
@media(max-height:540px) and (orientation:landscape){#menu .guide-button{position:absolute;left:9%;bottom:30px;margin:0;font-size:10px}.guide-screen{padding:8px}.guide-shell header{padding:8px 16px}.guide-shell h2{font-size:20px}.guide-shell .icon{height:32px;width:32px}.trick-page{padding:12px}#trick-demo{max-height:160px}.guide-layout{grid-template-columns:170px 1fr}.is-tutorial .guide-shell{max-width:680px}.is-tutorial .trick-page{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px}.is-tutorial .trick-top,.is-tutorial h3,.is-tutorial #trick-owners{grid-column:1/-1;margin:0}.is-tutorial #trick-demo{grid-column:1;grid-row:4/8}.is-tutorial #demo-cue{grid-column:1;grid-row:8}.is-tutorial #trick-how{font-size:11px;margin:0}.is-tutorial #trick-keys{margin-top:0}.is-tutorial .guide-actions{grid-column:2}.is-tutorial #trick-unlock{margin:0}}

body[data-touch=true] #start-hint{bottom:calc(185px + env(safe-area-inset-bottom))}

body[data-touch=true] .touch .twist-controls .grab-control{position:absolute;bottom:56px;left:0;width:48px;height:44px;font-size:8px}body[data-touch=true] .touch .twist-controls .special-control{left:auto;right:0;width:48px}

.sound-settings{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 20px}.sound-settings label{display:grid;gap:7px;font-size:10px;letter-spacing:1px}.sound-settings input{width:150px;accent-color:#deff69}.menu-wallet .sound-toggle{font-size:22px}
/* Touch controls: two spaced rows, with primary actions at the thumb corners. */
#app,#app *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#game{touch-action:none}
body[data-touch=true] #touch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:64px 84px;gap:12px;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));align-items:stretch;touch-action:none}
body[data-touch=true] #touch .twist-controls{display:contents}
body[data-touch=true] #touch button,body[data-touch=true] #touch .twist-controls button{position:static;inset:auto;width:100%;height:100%;min-width:0;min-height:60px;padding:0;border-radius:12px;border:1px solid #ffffff52;background:#1a29452b;backdrop-filter:blur(4px);color:#ffffffe0;font-size:12px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 #ffffff16;touch-action:none}
body[data-touch=true] #touch button strong{font-size:14px;letter-spacing:.7px}
body[data-touch=true] #touch small,body[data-touch=true] #touch .control-symbol{display:none}
body[data-touch=true] #touch [data-key=ArrowDown]{grid-row:2;grid-column:1}
body[data-touch=true] #touch [data-key=Space]{grid-row:2;grid-column:4}
body[data-touch=true] #touch [data-key=ArrowLeft]{grid-row:2;grid-column:2;font-size:30px}
body[data-touch=true] #touch [data-key=ArrowRight]{grid-row:2;grid-column:3;font-size:30px}
body[data-touch=true] #touch [data-key=ArrowUp]{grid-row:1;grid-column:1}
body[data-touch=true] #touch [data-key=KeyE]{grid-row:1;grid-column:2}
body[data-touch=true] #touch [data-key=KeyB]{grid-row:1;grid-column:3}
body[data-touch=true] #touch [data-key=KeyF]{grid-row:1;grid-column:4}
body[data-touch=true] #touch button.pressed{background:#ddff694d;border-color:#e4ff88;color:#fff;transform:scale(.96);box-shadow:0 0 0 2px #deff6926}
body[data-touch=true] #start-hint{bottom:calc(190px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);white-space:normal;text-align:center;pointer-events:none}
@media(orientation:landscape){
 body[data-touch=true] #touch{grid-template-columns:1.25fr repeat(6,minmax(0,1fr)) 1.25fr;grid-template-rows:68px;gap:10px;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
 body[data-touch=true] #touch button,body[data-touch=true] #touch .twist-controls button{grid-row:1;font-size:11px}
 body[data-touch=true] #touch [data-key=ArrowDown]{grid-column:1}
 body[data-touch=true] #touch [data-key=ArrowLeft]{grid-column:2;font-size:28px}
 body[data-touch=true] #touch [data-key=ArrowUp]{grid-column:3}
 body[data-touch=true] #touch [data-key=KeyE]{grid-column:4}
 body[data-touch=true] #touch [data-key=KeyB]{grid-column:5}
 body[data-touch=true] #touch [data-key=KeyF]{grid-column:6}
 body[data-touch=true] #touch [data-key=ArrowRight]{grid-column:7;font-size:28px}
 body[data-touch=true] #touch [data-key=Space]{grid-column:8}
 body[data-touch=true] #start-hint{bottom:calc(94px + env(safe-area-inset-bottom))}
}
body[data-touch=true] #touch .twist-controls [data-key=ArrowLeft],body[data-touch=true] #touch .twist-controls [data-key=ArrowRight]{font-size:30px;font-weight:500}
@media(orientation:landscape){body[data-touch=true] #touch [data-key]{grid-row:1}}

.board-body{padding:22px}.board-body label{display:block;font-size:12px;font-weight:700;margin:12px 0 8px}.board-body input,.board-body select{width:100%;background:#fff9f0;border:1px solid #b7a8be;color:#302c42;border-radius:8px;padding:12px;font:inherit;min-width:0}#app #boards input{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}#board-profile>div{display:flex;gap:10px}#board-profile .primary{min-width:80px;padding:10px;font-size:18px;box-shadow:none}#board-profile small,.board-rules{font-size:11px;line-height:1.5;color:#766775}.board-toolbar{display:flex;gap:10px;align-items:center;margin:18px 0}#board-status{flex:1;font-size:12px}#board-refresh{width:auto;color:#302c42;margin:0}#board-rows{list-style:none;padding:0;margin:0}#board-rows li{display:grid;grid-template-columns:32px 1fr auto;gap:12px;padding:14px 6px;border-top:1px solid #35244820;font-size:13px}#board-rows strong{overflow-wrap:anywhere}#board-rows li.is-you{background:#ddff6944}#menu #boards-open{margin-top:6px}#menu #guide-open{margin-top:4px}@media(max-height:540px) and (orientation:landscape){#menu #boards-open{bottom:62px}}