@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#214350;background:#eaf4f2}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}#app{height:100svh;min-height:560px;display:flex;flex-direction:column;background:#eaf4f2}.topbar{height:96px;flex:none;display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;padding:0 3vw;background:#f8fbf6;box-shadow:0 3px 24px #315b5a0b;position:relative;z-index:2}.brand{display:flex;align-items:baseline;gap:4px;font:800 31px Outfit,Arial,sans-serif;letter-spacing:-1.5px}.brand-mark{color:#f1a35f;font-size:27px;margin-right:9px;animation:twinkle 4s ease-in-out infinite}.brand-accent{color:#e7a56f}.brand small{font:700 9px 'DM Sans',Arial,sans-serif;letter-spacing:2px;color:#87a3a4;align-self:center;margin:5px 0 0 12px}.mission{text-align:center;align-self:center}.eyebrow{display:block;color:#91a8aa;font-size:10px;font-weight:800;letter-spacing:2px}.mission-row{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:6px}.mission strong{font:700 clamp(18px,2vw,27px) Outfit,Arial,sans-serif;color:#284b54;white-space:nowrap}#target-icon{height:32px;width:36px;display:inline-grid;place-items:center}#target-icon svg{width:33px;height:33px;filter:drop-shadow(0 3px 3px #e8a87a50)}.stats{display:flex;justify-content:flex-end;gap:clamp(20px,3vw,58px)}.stats>div{text-align:center}.stats strong{font:700 23px Outfit,Arial,sans-serif;display:block;margin-top:5px;color:#2a4b56}.stats .mistakes strong{color:#e69181;white-space:nowrap;font-size:22px;letter-spacing:3px}.game-shell{position:relative;flex:1;min-height:0;overflow:hidden}#game{display:block;width:100%;height:100%;background:#deefed}.corner-note{position:absolute;top:22px;left:3vw;font-size:10px;letter-spacing:2px;font-weight:800;color:#749ca0;pointer-events:none}.corner-note span{color:#e5ae81;padding:0 5px}.ability-bar{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#f9fcf7ee;backdrop-filter:blur(12px);border:1px solid #fff;border-radius:19px;padding:7px 8px;box-shadow:0 16px 35px #48707325;white-space:nowrap}.ability{position:relative;overflow:hidden;border:0;border-radius:13px;height:48px;padding:0 15px;display:flex;gap:9px;align-items:center;background:#e98670;color:white;font-size:11px;font-weight:800;letter-spacing:1px;box-shadow:0 5px 12px #dc88695c}.ability:disabled{opacity:.55;cursor:not-allowed}.ability-symbol{font-size:24px;font-weight:400}.ability b{font:700 13px Outfit,Arial,sans-serif;background:#ffffff36;border-radius:20px;min-width:22px;padding:3px}.ability i{position:absolute;bottom:0;left:0;height:3px;background:#fff;width:0}.bonus-status{padding:0 15px;color:#718f91;font-size:11px;font-weight:700;min-width:165px}.round-button{width:42px;height:42px;border:0;border-radius:13px;background:#e9f3ef;color:#63888b;font-size:20px}.round-button:hover{background:#d9eae6}.footer{height:66px;flex:none;background:#f8fbf6;display:flex;align-items:center;justify-content:space-between;padding:0 3vw;gap:24px;position:relative;z-index:2}.legend{display:flex;gap:19px;color:#829da0;text-transform:uppercase;letter-spacing:1.1px;font-size:9px;font-weight:800}.legend span{display:flex;align-items:center;gap:6px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#edae78}.bonus-dot{background:#b79adb}.obstacle-dot{background:#839dab}.fame{display:flex;align-items:center;gap:18px;min-width:0}.fame .eyebrow{white-space:nowrap}.fame ol{list-style:none;display:flex;gap:17px;margin:0;padding:0;color:#536f77;font:700 11px Outfit,Arial,sans-serif;white-space:nowrap}.fame li span{color:#dc9d78;margin-right:5px}.footer-right{font-size:9px;font-weight:800;letter-spacing:1.6px;color:#a5b8b6;white-space:nowrap}.footer-right span{color:#e6ab80}.modal{position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;background:#d8ece9a6;backdrop-filter:blur(7px)}.modal.visible{display:flex}.modal-glow{position:absolute;width:min(600px,80vw);height:min(600px,80vw);border-radius:50%;background:radial-gradient(circle,#fff9ebbb,transparent 68%);pointer-events:none}.modal-content{position:relative;text-align:center;width:min(510px,90vw);max-height:96%;overflow:auto;padding:34px 48px 38px;border-radius:30px;background:#fcfdf8f5;box-shadow:0 27px 80px #477a7660,0 0 0 1px #fff;animation:rise .5s both}.modal-kicker{color:#dfa477;font-size:10px;letter-spacing:2.5px;font-weight:800}.modal h1,.modal h2{font:800 clamp(58px,7vw,82px) Outfit,Arial,sans-serif;letter-spacing:-4px;margin:3px 0;color:#2c5960;line-height:1.1}.modal h2{font-size:50px;letter-spacing:-2px;margin:12px 0}.lead{font:500 15px/1.65 'DM Sans',Arial,sans-serif;color:#739094;margin:0 auto 21px;max-width:370px}.instructions{text-align:left;border-top:1px solid #dfece6;border-bottom:1px solid #dfece6;padding:12px 0;margin-bottom:22px;color:#5d7c81;font-size:12px;font-weight:700;line-height:2.25}.instructions span{color:#e6a277;font:800 11px Outfit,Arial,sans-serif;margin-right:16px}.primary{height:49px;border:0;border-radius:13px;background:#315e63;color:#fff;font:700 14px Outfit,Arial,sans-serif;padding:0 24px;box-shadow:0 8px 20px #315e633d;transition:transform .2s,background .2s}.primary:hover{transform:translateY(-2px);background:#254f55}.primary span{margin-left:16px;font-size:20px;vertical-align:-1px}.tiny{margin-top:13px;color:#9bb0af;font-size:10px;font-weight:700;letter-spacing:.6px}.toast{position:absolute;z-index:4;top:65px;left:50%;transform:translate(-50%,-12px);background:#f8fcf6ef;color:#426970;padding:9px 17px;border-radius:20px;box-shadow:0 8px 25px #4b7b7830;font-size:12px;font-weight:800;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.final-score{margin:20px auto 18px;display:grid}.final-score small,.name-label{font-size:10px;letter-spacing:1.5px;color:#92a9aa;font-weight:800}.final-score strong{font:800 54px Outfit,Arial,sans-serif;color:#e4a578}.name-label{display:block;margin-bottom:10px}.name-row{display:flex;gap:7px;margin-bottom:14px}.name-row input{flex:1;min-width:0;border:1px solid #cfe2de;background:#f4faf6;border-radius:10px;padding:11px 13px;outline:none;color:#2b555c}.name-row input:focus{border-color:#e4a578}.name-row button{border:0;border-radius:10px;background:#e8aa7c;color:white;font-weight:800;padding:0 16px}.name-row button:disabled{opacity:.5}#pause-modal .modal-content{width:330px}.footer-right{display:block}@keyframes rise{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}@keyframes twinkle{50%{transform:rotate(25deg) scale(1.14)}}@media(max-width:850px){.topbar{height:79px;padding:0 18px;grid-template-columns:1fr 1.3fr 1fr}.brand{font-size:23px}.brand small{display:none}.mission strong{font-size:16px}.stats{gap:13px}.stats strong{font-size:17px}.stats .mistakes strong{font-size:15px}.eyebrow{font-size:8px}.footer{height:50px;padding:0 18px}.fame{display:none}.footer-right{font-size:8px}.legend{gap:10px;font-size:8px}.bonus-status{display:none}}@media(max-width:520px){.topbar{height:74px;grid-template-columns:.7fr 1.4fr 1fr;padding:0 11px}.brand{font-size:18px}.brand-mark{margin-right:2px;font-size:18px}.mission-row{gap:4px}.mission strong{font-size:13px;white-space:normal;line-height:1.05}#target-icon{width:23px}#target-icon svg{width:23px}.stats{gap:6px}.stats>div:nth-child(2){display:none}.stats strong{font-size:15px}.stats .mistakes strong{font-size:12px;letter-spacing:0}.corner-note{font-size:8px}.ability-bar{bottom:15px}.ability{font-size:9px;padding:0 10px;height:43px}.round-button{height:37px;width:37px}.footer-right{display:none}.modal-content{padding:25px 22px}.modal h1{font-size:62px}.lead{font-size:13px}}
@media(max-width:520px) and (max-height:700px){.modal-content{padding:17px 22px;max-height:94%}.modal h1{font-size:52px}.modal-kicker{font-size:8px}.lead{font-size:12px;line-height:1.45;margin-bottom:10px}.instructions{padding:6px 0;margin-bottom:12px;font-size:10px;line-height:1.8}.instructions span{margin-right:8px}.primary{height:42px}.tiny{margin-top:7px}}

@media(max-width:520px){.footer{justify-content:center}.footer .legend{display:none}.footer .fame{display:flex;gap:8px}.footer .fame .eyebrow{display:block;font-size:8px;letter-spacing:1px}.footer .fame ol{gap:8px;font-size:9px}.footer .fame li:nth-child(n+3){display:none}}