:root{font-family:'Trebuchet MS','Segoe UI',sans-serif;color:#163e43;background:#c7eff0;font-synthesis:none;--ink:#163e43;--orange:#ffc064;--paper:#fffdf3;--teal:#347d81}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fa865b;outline-offset:4px}button:disabled{cursor:default}[hidden]{display:none!important}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icons{width:0;height:0;position:absolute;overflow:hidden}#world{position:fixed;inset:0;width:100%;height:100%;touch-action:none;user-select:none}header{position:fixed;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));top:max(22px,env(safe-area-inset-top));z-index:8;display:flex;justify-content:space-between;pointer-events:none}.header-actions{display:flex;gap:9px}.round-button{pointer-events:auto;width:44px;height:44px;border:1px solid #ffffff9c;border-radius:50%;display:grid;place-items:center;background:#fffdf3dc;color:var(--ink);text-decoration:none;box-shadow:0 3px 12px #0c666914;font-size:25px;position:relative;transition:transform .15s,background .15s}.round-button:hover{background:white;transform:translateY(-2px)}.muted:after{content:'';position:absolute;width:25px;height:2px;background:var(--ink);transform:rotate(-45deg)}.screen{position:fixed;inset:0;z-index:4;overflow:auto}#menu{pointer-events:none;background:linear-gradient(90deg,#d7eeeadb,transparent 72%)}.intro{position:absolute;left:8vw;top:22%;pointer-events:auto}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.6px;color:var(--teal);margin:0 0 18px}h1{font-size:clamp(65px,7.8vw,116px);line-height:.95;letter-spacing:-7px;margin:0;font-weight:900}h1 span{display:block;font-size:.43em;letter-spacing:.25em;color:var(--teal);margin-top:13px;padding-left:5px}.intro-copy{font-size:23px;line-height:1.45;margin:27px 0 29px;color:#285d61}.primary{display:flex;gap:35px;align-items:center;justify-content:space-between;border:0;border-radius:16px;background:var(--orange);color:var(--ink);padding:19px 25px;min-width:225px;font-size:17px;font-weight:800;box-shadow:0 5px 0 #dea257,0 10px 25px #78633318;text-decoration:none;transition:transform .15s,background .15s}.primary:hover{background:#ffd08d;transform:translateY(-2px)}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #dea257}.primary svg{width:25px;height:25px}.menu-controls{font-size:12px;color:#356e72;margin-top:23px}.record{display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:1.7px;margin-top:31px;color:#43767a}.record b{font-size:18px;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}.menu-footer{position:absolute;bottom:25px;left:8vw;font-size:11px;color:#336c70;letter-spacing:.4px}
#hud{position:fixed;inset:0;z-index:2;pointer-events:none}.score{position:absolute;left:28px;top:83px;text-shadow:0 2px 12px #d5f3f3}.score>span{display:block;font-size:9px;letter-spacing:2px;font-weight:bold;color:#33777b}.score>b{display:block;font-size:32px;letter-spacing:-1px;font-variant-numeric:tabular-nums}.island{position:absolute;top:23px;left:50%;transform:translateX(-50%);width:180px;text-align:center;padding:11px 17px 10px;border-radius:18px;background:#fffdf3ed;box-shadow:0 5px 20px #155b6615}.island>span{font-size:9px;letter-spacing:2.5px;color:var(--teal);font-weight:800}.island>b{display:block;font-size:15px;margin:4px 0 9px}.progress-track{height:5px;background:#d5e7dd;border-radius:5px;overflow:hidden}.progress-track>i{display:block;height:100%;width:0;background:#64bd9d;border-radius:5px;transition:width .3s}.island>small{display:block;font-size:9px;color:#4a7a7b;margin-top:6px}.dock{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 36px));display:flex;align-items:center;gap:20px;background:#fffdf3f2;border:1px solid #ffffffb0;border-radius:24px;padding:13px 16px;box-shadow:0 8px 32px #134e591c;pointer-events:auto}.ball-info{display:flex;align-items:center;gap:13px;flex:1;min-width:0}.ball{background:var(--ball-color,#f86c80);width:55px;height:55px;border-radius:50%;border:3px solid #fff;box-shadow:inset -5px -7px 0 #00000018,inset 4px 5px 0 #ffffff29,0 3px 9px #29454322;position:relative;display:grid;place-items:center;flex-shrink:0}.ball:before{content:'';position:absolute;width:13px;height:7px;border-radius:50%;background:#ffffff88;left:11px;top:8px;transform:rotate(-33deg)}.ball svg{display:none;width:25px;height:25px;color:white;filter:drop-shadow(0 1px 2px #27324d)}.ball.wild{background:conic-gradient(#f86c80,#ffc65a,#91d45f,#51cee0,#6488f3,#b18af1,#f86c80)}.ball.wild svg{display:block}.ball-info>div>span{font-size:9px;font-weight:800;letter-spacing:1.6px;color:var(--teal);display:block}.ball-info b{display:block;margin-top:4px;font-size:15px;white-space:nowrap}.ball-info strong{font-size:26px;letter-spacing:-1px;font-variant-numeric:tabular-nums}.ball-info small{font-size:12px;font-weight:normal;color:#4a7478}.coins{display:flex;align-items:center;gap:5px;font-size:15px;white-space:nowrap}.coin{color:#dba243;font-style:normal;text-shadow:0 1px #946429}.coins>.coin{font-size:24px}.power{display:grid;grid-template-rows:29px 13px 15px;gap:3px;justify-items:center;padding:7px 10px;border:1px solid #d3e1d9;border-radius:15px;background:#e9f1e9;color:var(--ink);min-width:69px;transition:transform .15s,background .15s}.power>svg{width:28px;height:28px;color:#408b8c}.power:disabled{opacity:.45}.power:not(:disabled):hover{background:#fff;transform:translateY(-2px)}.power-name{font-size:9px;font-weight:800}.power>small{font-size:10px;color:#577c78}.rainbow-icon{border-radius:50%;width:28px;height:28px;display:grid;place-items:center;background:conic-gradient(#f86c80,#ffc65a,#91d45f,#51cee0,#6488f3,#b18af1,#f86c80)}.rainbow-icon svg{width:18px;height:18px;color:#fff}.power.active{border-color:#a785dc;background:#f0e5fc;opacity:1}#rotate-controls{position:absolute;bottom:145px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;white-space:nowrap}#rotate-controls>button{width:38px;height:38px;font-size:25px;background:#fffdf3ba}#hint{font-size:11px;color:#24565d;text-shadow:0 1px 8px #cef1ef;max-width:calc(100vw - 132px);overflow:hidden;text-overflow:ellipsis}
#toast{position:fixed;left:50%;top:143px;transform:translate(-50%,-8px);z-index:6;border-radius:30px;padding:10px 20px;background:#fffdf3f2;color:#24565d;box-shadow:0 4px 20px #1d4d6420;font-size:12px;font-weight:800;max-width:90vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}#toast.visible{opacity:1;transform:translate(-50%,0)}#combo{position:fixed;right:7vw;top:35%;display:flex;flex-direction:column;align-items:center;color:var(--ink);z-index:3;pointer-events:none;opacity:0;transform:translateY(15px) rotate(-7deg);text-shadow:0 2px 12px #ffffffae;transition:opacity .18s,transform .18s}#combo>b{font-size:65px;letter-spacing:-4px;line-height:1}#combo>span{font-size:11px;letter-spacing:1px;font-weight:800;margin-top:8px}#combo.visible{opacity:1;transform:translateY(0) rotate(-7deg)}.overlay{display:grid;place-items:center;padding:85px 20px 25px;background:#214d5940;backdrop-filter:blur(7px)}.panel{width:min(450px,100%);background:var(--paper);border:1px solid #fff;border-radius:28px;padding:35px;box-shadow:0 15px 65px #17394a30}.panel h2{font-size:49px;line-height:1.02;letter-spacing:-2.6px;margin:10px 0 20px}.panel h2 span{color:var(--teal)}.panel>p:not(.eyebrow){font-size:13px;line-height:1.6;color:#59787a}.panel .primary{width:100%;margin-top:23px}.panel .secondary{display:block;border:0;background:none;font-size:11px;font-weight:800;letter-spacing:.6px;color:#658783;margin:22px auto 0;padding:5px}.result-stats{display:flex;gap:35px;margin:25px 0 15px}.result-stats span{display:block;font-size:9px;letter-spacing:1.6px;color:#698886}.result-stats b{display:block;font-size:32px;letter-spacing:-1px;margin-top:6px;font-variant-numeric:tabular-nums}.leaders{border-top:1px solid #dbe6df;margin-top:25px;padding-top:17px}.leaders>span{font-size:9px;letter-spacing:1.7px;color:#648580}.leaders ol{font-size:11px;line-height:1.7;padding-left:20px;margin-bottom:0}.leaders li{padding:2px 0}.leaders b{float:right;font-variant-numeric:tabular-nums}.instructions-copy p{font-size:13px;line-height:1.5;color:#557477}.instructions-copy b{color:var(--ink)}.instructions-copy .keyboard-help{font-size:10px;line-height:1.8;color:#72908c}
@media(max-width:700px){header{left:16px;right:16px;top:max(15px,env(safe-area-inset-top))}.round-button{width:38px;height:38px}.header-actions{gap:6px}.intro{left:7vw;top:15%}#menu{background:linear-gradient(180deg,#d6eeeaeb,transparent 65%)}h1{font-size:clamp(53px,13.5vw,88px);letter-spacing:-4px}h1 span{letter-spacing:.24em;margin-top:8px}.eyebrow{font-size:8px;letter-spacing:1.8px;margin-bottom:13px}.intro-copy{font-size:17px;margin:19px 0}.primary{min-width:180px;font-size:14px;padding:16px 20px;border-radius:13px}.menu-controls{font-size:10px;margin-top:18px}.record{margin-top:18px;font-size:8px}.record b{font-size:15px}.menu-footer{left:7vw;bottom:16px;font-size:9px}.island{top:16px;width:147px;padding:9px 12px}.island>b{font-size:13px;margin:3px 0 7px}.island>span{font-size:8px}.island>small{font-size:8px}.score{left:19px;top:69px}.score>b{font-size:25px}.score>span{font-size:8px}.dock{width:calc(100% - 24px);gap:10px;border-radius:21px;padding:10px}.ball{width:45px;height:45px}.ball-info{gap:8px}.ball-info>div>span{font-size:8px;letter-spacing:.8px}.ball-info strong{font-size:23px}.ball-info small{font-size:10px}.coins{font-size:12px;gap:3px}.coins>.coin{font-size:18px}.power{min-width:55px;padding:6px 7px;grid-template-rows:24px 12px 13px;gap:2px;border-radius:12px}.rainbow-icon{width:23px;height:23px}.power>svg{width:23px;height:23px}.power-name{font-size:8px}.power>small{font-size:9px}#rotate-controls{bottom:123px;gap:12px}#hint{font-size:9px}#rotate-controls>button{width:33px;height:33px}#combo{right:6vw;top:35%}#combo>b{font-size:45px;letter-spacing:-2px}#combo>span{font-size:9px}.panel{padding:27px;border-radius:24px}.panel h2{font-size:41px}.result-stats b{font-size:27px}.overlay{padding-top:74px}#toast{top:128px;font-size:11px}.instructions-copy .keyboard-help{display:none}}
#rotate-controls button{touch-action:none}
@media(max-width:700px){#menu{background:linear-gradient(180deg,#d6eeea,#d6eeeade 40%,#d6eeea5e 65%,transparent 88%)}}
@media(max-width:700px){body:not([data-mode="menu"]) #help{position:absolute;right:0;top:58px}}
@media(max-width:370px){.dock{gap:7px}.coins{position:absolute;right:20px;top:-33px;background:#fffdf3e0;border-radius:20px;padding:3px 10px}.power{min-width:53px}.ball-info small{font-size:9px}.ball-info>div>span{font-size:7px}.island{left:46%;width:130px}.header-actions{gap:4px}.round-button{width:34px;height:34px}}
@media(max-height:550px){.intro{top:17%}h1{font-size:61px;letter-spacing:-4px}h1 span{margin-top:5px}.intro-copy{font-size:16px;margin:16px 0}.eyebrow{font-size:8px;margin-bottom:10px}.menu-controls{font-size:9px;margin-top:14px}.record{margin-top:12px}.primary{padding:13px 20px;min-width:180px;font-size:14px}.menu-footer{display:none}.dock{bottom:12px;width:380px;padding:8px 12px;gap:13px;border-radius:18px}.ball{width:39px;height:39px}.ball-info{gap:9px}.ball-info strong{font-size:21px}.ball-info small{font-size:10px}.ball-info>div>span{font-size:8px}.power{min-width:49px;padding:5px;grid-template-rows:23px 0 12px;gap:3px}.power-name{display:none}.power>svg,.rainbow-icon{width:22px;height:22px}.coins{font-size:12px}.coins>.coin{font-size:19px}#rotate-controls{bottom:94px;gap:12px}#rotate-controls>button{width:30px;height:30px}#hint{font-size:9px}.island{width:158px;padding:7px 12px;top:15px}.island>b{font-size:12px;margin:2px 0 5px}.island>small{display:none}.score{top:69px}.score>b{font-size:23px}.overlay{padding:70px 16px 16px;place-items:start center}.panel{margin:auto;padding:24px}.panel h2{font-size:35px;margin:10px 0 15px}.panel .primary{margin-top:16px}.panel .secondary{margin-top:16px}.result-stats{margin:15px 0}.leaders{margin-top:16px;padding-top:12px}#toast{top:88px}.instructions-copy .keyboard-help{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
@media(max-width:370px){.coins{position:static;background:none;padding:0;font-size:10px;gap:2px}.coins>.coin{font-size:17px}.power{min-width:49px;padding:6px 5px}.ball-info b{white-space:normal;margin-top:1px}.ball-info small{display:block;font-size:8px;line-height:1}}