@font-face{font-family:Snackie;src:url(assets/regular.otf)}@font-face{font-family:Snackie;src:url(assets/bold.otf);font-weight:700}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#bce4e1;color:#343a30;font-family:Snackie,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #214c68;outline-offset:4px}[hidden]{display:none!important}#game,#canvas,.overlay{position:absolute;inset:0}#canvas{touch-action:none}canvas{width:100%;height:100%;display:block}header{position:absolute;inset:25px 30px auto;display:flex;align-items:center;justify-content:space-between;z-index:3;pointer-events:none}.brand{width:135px;filter:drop-shadow(0 3px 0 #ffffff50)}.top-actions{display:flex;gap:10px;pointer-events:auto}.icon{position:relative;border:1px solid #ffffff80;background:#fff8e9b8;color:#95412d;width:45px;height:45px;border-radius:16px;font-size:24px;box-shadow:0 3px 12px #43513b0b}.slash{position:absolute;inset:2px;font-size:30px}#hud{position:absolute;top:20px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 2px 0 #fff9}.distance{display:flex;align-items:baseline;justify-content:center;gap:7px}.distance span{font-size:56px;line-height:1.15;font-weight:700;letter-spacing:-2px;color:#3a4539}.distance small{font-size:16px}.score{font-size:22px;color:#9e481e}.score small{font-size:12px;margin-left:5px}.treat-icon{color:#e89e25}#zone{font-size:12px;display:inline-flex;align-items:center;gap:6px;background:#fffae9be;border:1px solid #fff9;border-radius:30px;padding:3px 12px;margin-top:10px}#zone i{width:6px;height:6px;border-radius:50%;background:#759c53}.overlay{z-index:2}#intro{background:linear-gradient(90deg,#f6f0e8ed 0%,#f6f0e8d4 27%,#f6f0e800 57%)}.intro-copy{position:absolute;left:7%;top:48%;transform:translateY(-50%);max-width:390px}.eyebrow{font:700 10px/1.6 sans-serif;letter-spacing:2.2px;color:#81795f}h1{font-size:clamp(48px,5.7vw,82px);letter-spacing:-2px;line-height:1.09;margin:22px 0 17px}h1 span{color:#c85034}p{font-size:17px;line-height:1.65;margin:0 0 18px;color:#737765}.loot{display:flex;gap:15px;margin:18px 0 25px}.loot span{display:flex;align-items:center;gap:5px;font-size:12px}.loot img{height:36px;width:25px;object-fit:contain}.loot b{color:#bb6541}.primary{background:#c65136;color:#fff8eb;padding:13px 25px;border:0;border-radius:16px;font-size:19px;font-weight:700;box-shadow:0 5px 0 #963f2a;min-width:225px;transition:transform .15s}.primary:hover{background:#db5c3e;transform:translateY(-2px)}.primary:disabled{opacity:.6;cursor:wait}.best{font-size:12px;color:#87836c;margin-top:17px}.best b{color:#b64d32}.instructions{position:absolute;bottom:47px;left:7%;display:flex;gap:16px;flex-wrap:wrap;max-width:430px;font-size:12px;color:#616b5c}.instructions b{display:inline-block;border:1px solid #c5c7b5;background:#fff8e9;border-radius:7px;padding:3px 6px;margin-right:3px;font-family:system-ui}.instructions small{width:100%;color:#8e907d}.local-tag{position:absolute;bottom:20px;right:30px;font:9px sans-serif;letter-spacing:2px;color:#49644eb3}.centered{display:flex;justify-content:center;align-items:center;background:#233c3e70;backdrop-filter:blur(8px)}.panel{background:#fff9ee;box-shadow:0 25px 100px #23454250;border:1px solid #fff;border-radius:28px;width:390px;max-width:calc(100% - 36px);padding:34px;text-align:center}h2{font-size:33px;margin:14px 0 10px;line-height:1.3}.panel p{font-size:14px}.panel .primary{width:100%;margin-top:15px}.text-button{display:block;margin:17px auto 0;border:0;background:transparent;color:#88775f;font-size:13px}.total b{display:block;color:#c65136;font-size:65px;line-height:1.15}.total span{font-size:13px;color:#8c826c}.result-stats{display:flex;justify-content:space-around;margin:25px 0 20px;padding:15px 0;border-block:1px solid #e8dfcc}.result-stats span{display:flex;flex-direction:column;font-size:11px;color:#8f8a76}.result-stats b{font-size:21px;color:#4c5e47}.record{font-size:12px;color:#7a7f6c}#share-status{display:block;height:14px;margin-top:8px;font-size:11px;color:#8e533e}#controls{position:absolute;z-index:1;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center}#controls button{width:59px;height:59px;border:1px solid #fff9;background:#fff7e2b0;border-radius:20px;font-size:26px;line-height:1;color:#6f6553;box-shadow:0 3px 0 #57644718;backdrop-filter:blur(8px);user-select:none}#controls button:active{transform:scale(.93);background:#fff7e2}#controls small{font-size:9px;display:block;margin-top:3px}#controls span{width:30px}#hint{position:absolute;bottom:5px;width:100%;text-align:center;font-size:10px;color:#4d685e}#toast{position:absolute;top:180px;left:50%;transform:translateX(-50%) translateY(10px);opacity:0;transition:all .25s;pointer-events:none;background:#fff7e9ed;color:#a95a31;padding:7px 19px;border-radius:25px;font-size:14px;white-space:nowrap}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:700px){header{inset:18px 18px auto}.brand{width:103px}.icon{width:39px;height:39px;border-radius:14px}.top-actions{gap:7px}.intro-copy{left:27px;top:145px;transform:none;width:calc(100% - 54px)}h1{font-size:53px;line-height:1.03;margin:13px 0 10px}#intro{background:linear-gradient(180deg,#f6f0e8f5 0%,#f6f0e8d9 30%,#f6f0e800 62%)}.eyebrow{font-size:9px}p{font-size:14px;line-height:1.4;margin-bottom:10px}.intro-copy p br{display:none}.loot{margin:12px 0 15px;gap:18px}.loot span{font-size:11px}.loot img{height:30px;width:22px}.primary{font-size:17px;padding:11px 20px;min-width:205px}.best{margin-top:13px}.instructions{left:25px;right:25px;bottom:32px;font-size:10px;justify-content:center;gap:8px;text-align:center}.instructions small{font-size:10px}.local-tag{display:none}#hud{top:74px}.distance span{font-size:43px}.score{font-size:20px}#zone{margin-top:4px;font-size:10px}#toast{top:205px}#controls{gap:8px;bottom:max(27px,env(safe-area-inset-bottom))}#controls button{width:56px;height:56px}#controls span{width:20px}.panel{padding:26px}.total b{font-size:55px}h2{font-size:29px}}
@media(max-height:650px){.intro-copy{top:95px}h1{font-size:40px}.loot{margin:7px 0}.instructions{bottom:12px}.intro-copy p{display:none}.panel{padding:18px}.result-stats{margin:10px 0;padding:9px 0}#hud{top:12px}.distance span{font-size:35px}#zone{display:none}#controls button{width:46px;height:46px}.best{margin-top:10px}}
#multiplier{display:inline-block;font:700 17px/1.3 sans-serif;color:#fff8de;background:#c96a32;border:1px solid #ffedab;border-radius:10px;padding:3px 8px;text-shadow:none;margin-left:5px;box-shadow:0 2px 0 #925021}.progress{height:4px;width:130px;margin:7px auto 2px;background:#ffffff73;border-radius:6px;overflow:hidden}.progress i{height:100%;display:block;background:#d99b44;transition:width .2s}#speed{display:block;font-size:10px;color:#576b63}#power-hud{position:absolute;right:25px;top:90px;z-index:1;width:174px}.power-status{background:#f0fcf5e8;border:1px solid #fff;border-radius:14px;margin:8px 0;padding:9px 12px;color:#3e7d89;font-size:12px;box-shadow:0 5px 20px #39637d17}.power-status b{float:right}.power-status i{display:block;height:4px;background:#416f7c20;margin-top:6px;border-radius:10px;overflow:hidden}.power-status em{display:block;height:100%;background:#63c2d4;transition:width .1s}.power-status.magnet{color:#ad5460}.magnet em{background:#e57a89}.multiplier-result{font-size:13px;color:#9a693f;margin-bottom:9px}.multiplier-result b{color:#bf6438;font-size:21px;margin-left:6px}.score small{display:none}#toast{top:210px}
@media(max-width:700px){#power-hud{right:12px;top:199px;width:146px}.power-status{font-size:10px;padding:7px 10px;border-radius:12px}.power-status i{margin-top:4px}#hud{top:72px}.distance span{font-size:38px}#zone{margin-top:5px}.progress{width:105px}#toast{top:269px;font-size:11px;padding:6px 13px}#multiplier{font-size:15px;padding:2px 6px}}
.power-legend{font-size:11px;color:#7d8068;margin:-10px 0 20px}.power-legend+button{margin-top:0}@media(max-width:700px){.power-legend{font-size:10px;margin:-3px 0 15px}}
@media(max-width:700px){#power-hud:not([hidden])+#toast{top:315px}}

#speed.extreme{background:#ad3d35;color:#fff4df;padding:3px 9px;border-radius:8px;font-weight:700}
.panel{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}.result-panel{width:410px}.result-panel .total b{font-size:54px}.result-panel .result-stats{margin:16px 0 13px;padding:11px 0}.result-panel .record{margin-bottom:15px}.secondary{display:block;width:100%;padding:10px 16px;background:#f4ead9;border:1px solid #dac6a8;border-radius:13px;color:#92523d;font-size:15px;margin-top:12px;font-weight:700}.primary:disabled{cursor:wait}.intro-board{margin:19px 0 0;color:#a24d36;text-decoration:underline;text-underline-offset:4px}.best{margin-top:10px}#score-form{text-align:left;border-top:1px solid #e9ddc7;padding-top:14px;margin-top:12px}#score-form>label:first-child{display:block;font-size:13px;margin-bottom:7px;font-weight:700}#nickname{width:100%;border:1px solid #d7c7af;background:#fffcf6;color:#4b483d;border-radius:11px;padding:10px 12px;font:14px Snackie,sans-serif}#nickname:focus{outline:2px solid #b77c50;outline-offset:1px}.consent{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.5;margin-top:10px;color:#7c7766}.consent input{accent-color:#bd5339;margin-top:3px;flex:none}#score-form .primary{font-size:16px;padding:10px;min-width:0;margin-top:12px}#submission-message{font-size:12px;color:#a1503d;margin:10px 0;line-height:1.5}#again{font-size:14px;margin-top:16px}.board-panel{width:560px;padding:29px}.board-panel>p{font-size:12px;margin-bottom:12px}.board-scroll{max-height:37dvh;overflow:auto;border-block:1px solid #e3d6bd;margin:15px 0}.board-panel table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.board-panel th{position:sticky;top:0;background:#f5eddf;font-size:11px;padding:11px 6px;color:#928571}.board-panel td{padding:11px 6px;border-top:1px solid #eee5d4;overflow-wrap:anywhere}.board-panel th:nth-child(n+3),.board-panel td:nth-child(n+3){text-align:right;white-space:nowrap}.board-panel td:first-child{color:#a76d39;font-weight:700}.board-panel .top-three{background:#fff0c84d}.board-panel h2{font-size:30px}#my-rank{font-size:13px;line-height:1.6;color:#925337;background:#f7e9cc;padding:11px;border-radius:12px}#board-message{color:#9c5d49;font-size:12px;margin:8px 0}#board-empty{padding:24px 8px;margin:0;font-size:13px}.recharge{display:block;text-decoration:none;font-size:17px;min-width:0;width:100%;margin-top:20px}#refresh-board{margin-top:10px}header>a{pointer-events:auto}.result-panel #share{font-size:11px}@media(max-width:700px){.board-panel{padding:22px 16px}.board-panel h2{font-size:27px}.board-panel td{font-size:11px;padding:10px 4px}.recharge{font-size:15px;padding:12px 5px}.intro-board{font-size:12px;margin-top:17px}.result-panel{padding:24px}.result-panel h2{font-size:27px}.board-scroll{max-height:35dvh}}
.overlay.centered{z-index:5}

@media(pointer:coarse),(max-width:700px){.centered,#controls button{backdrop-filter:none;-webkit-backdrop-filter:none}#controls button{background:#fff7e2e8}.brand{filter:none}}
/* Keep HUD, controls and scrollable dialogs inside Safari's visible viewport. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
#game{position:fixed;height:100dvh;width:100%;overflow:hidden}header{top:calc(var(--safe-top) + 18px);left:calc(var(--safe-left) + 18px);right:calc(var(--safe-right) + 18px)}
.overlay.centered{top:var(--view-top,0px);bottom:auto;height:var(--view-height,100dvh);padding:calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 12px)}
.panel{max-width:100%;max-height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.board-scroll{max-width:100%;overflow-x:auto}.board-panel table{table-layout:fixed}.board-panel th:first-child{width:15%}.board-panel th:nth-child(2){width:35%}.board-panel th:nth-child(3){width:27%}.board-panel th:nth-child(4){width:23%}.board-panel td:nth-child(2){overflow-wrap:anywhere}
#nickname{font-size:16px}#controls{bottom:calc(var(--safe-bottom) + 24px);max-width:calc(100% - var(--safe-left) - var(--safe-right) - 16px)}#controls button{flex:none}#hint{bottom:calc(var(--safe-bottom) + 4px);padding-inline:calc(var(--safe-left) + 8px) calc(var(--safe-right) + 8px)}
@media(max-width:700px){
 #intro{display:flex;flex-direction:column;gap:20px;padding:calc(var(--safe-top) + 83px) calc(var(--safe-right) + 24px) calc(var(--safe-bottom) + 18px) calc(var(--safe-left) + 24px);overflow-y:auto;overscroll-behavior:contain}
 .intro-copy{position:static;transform:none;left:auto;top:auto;width:100%;max-width:390px;flex-shrink:0;margin:0}
 .instructions{position:static;flex-shrink:0;width:100%;max-width:100%;margin:auto 0 0;gap:7px;font-size:10px}.instructions small{line-height:1.5}
 #hud{top:calc(var(--safe-top) + 68px);max-width:calc(100% - 32px)}#power-hud{right:calc(var(--safe-right) + 12px);top:calc(var(--safe-top) + 204px)}#toast{top:calc(var(--safe-top) + 266px);max-width:calc(100% - var(--safe-left) - var(--safe-right) - 24px);white-space:normal;text-align:center}
 .panel{padding:23px 18px}.board-panel{padding:22px 14px}.board-panel td,.board-panel th{padding-inline:3px;font-size:10px}.recharge{white-space:normal;line-height:1.5}.brand{width:98px}
}
@media(max-width:700px) and (max-height:700px){
 #intro{padding-top:calc(var(--safe-top) + 73px);gap:14px}.intro-copy h1{font-size:40px;margin:9px 0}.intro-copy .eyebrow{font-size:8px}.intro-copy p{display:block;font-size:12px;line-height:1.45}.loot{margin:9px 0}.power-legend{font-size:9px;margin:0 0 12px}.intro-board{margin-top:12px}.intro-copy .best{margin-top:10px}.instructions{font-size:9px}#hud .distance span{font-size:34px}
}
@media(orientation:landscape) and (max-height:520px){
 #intro{display:block;overflow-y:auto;padding:calc(var(--safe-top) + 65px) calc(var(--safe-right) + 22px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 22px);background:linear-gradient(90deg,#f6f0e8f5,#f6f0e8db 35%,#f6f0e800 65%)}
 .intro-copy{position:static;transform:none;width:46%;max-width:390px;margin:0}.intro-copy h1{font-size:38px;margin:7px 0}.intro-copy p{font-size:12px}.loot{margin:8px 0}.power-legend{font-size:9px;margin:0 0 10px}.intro-board{margin-top:12px}.intro-copy .primary{min-width:0;width:100%;font-size:16px}.intro-copy .best{margin-top:9px}.local-tag{display:none}
 .instructions{position:absolute;left:auto;right:calc(var(--safe-right) + 18px);bottom:calc(var(--safe-bottom) + 16px);width:40%;font-size:10px;gap:6px;justify-content:center;text-align:center;padding:8px;background:#fff7e2d9;border-radius:12px}
 #hud{top:calc(var(--safe-top) + 10px);width:145px}#hud .distance span{font-size:31px}.score{font-size:17px}.progress{margin:3px auto;width:95px}#zone{display:none}#speed{font-size:9px}
 #controls{bottom:calc(var(--safe-bottom) + 20px);gap:8px}#controls button{width:47px;height:47px;border-radius:15px;font-size:23px}#controls span{width:12px}#hint{font-size:8px}
 #power-hud{top:calc(var(--safe-top) + 70px);right:calc(var(--safe-right) + 14px);width:135px}.power-status{padding:6px 9px;font-size:10px}#toast{top:calc(var(--safe-top) + 90px);max-width:45%;font-size:10px;padding:5px 11px}.panel{padding:20px}.panel h2{font-size:27px}
}
@media(orientation:landscape) and (max-height:520px){#controls{width:calc(100% - var(--safe-left) - var(--safe-right) - 40px)}#controls span{flex:1;width:auto}}
/* Running notices belong at the edge, never in the approach to an obstacle. */
#toast{top:auto!important;bottom:calc(var(--safe-bottom) + 100px);left:50%;max-width:calc(100% - var(--safe-left) - var(--safe-right) - 28px);font-size:11px;padding:5px 12px;line-height:1.45;white-space:normal;text-align:center}
.result-panel .total{margin:12px 0 18px}.result-panel .total b{font-size:52px}.result-panel h2{margin-top:8px}.result-panel #score-form{margin-top:10px;padding-top:12px}.result-panel .eyebrow{font-size:9px}.result-panel #share-status{height:auto;min-height:0}.result-panel #share-status:empty{display:none}
.board-panel th:first-child{width:17%}.board-panel th:nth-child(2){width:48%}.board-panel th:nth-child(3){width:35%}
@media(orientation:landscape) and (max-height:520px){#toast{bottom:calc(var(--safe-bottom) + 76px);max-width:50%}}
/* Thai combining marks need room above each line, including compact phones. */
.intro-copy h1{font-size:clamp(42px,4.5vw,68px);line-height:1.5;letter-spacing:0;margin:12px 0 14px;overflow:visible;max-width:520px}
.intro-copy{max-width:520px}
.intro-copy h1 .headline-line{display:block;color:inherit;white-space:nowrap}
.intro-copy h1 strong{color:#c85034;font-weight:700}
.intro-copy p,.panel p,.panel h2,.primary,.secondary,.best,.text-button{line-height:1.65;letter-spacing:0}
.primary,.secondary{padding-block:12px}.panel h2{padding-top:.1em}
@media(max-width:700px){.intro-copy h1{font-size:clamp(30px,8.6vw,48px);line-height:1.5;margin:8px 0 10px}.intro-copy{max-width:100%}.intro-copy p{line-height:1.65}.intro-board{margin-top:12px}.intro-copy .loot{margin:10px 0 13px}.power-legend{line-height:1.65;margin-bottom:13px}}
@media(max-width:700px) and (max-height:700px){.intro-copy h1{font-size:30px;line-height:1.5;margin:5px 0 7px}.intro-copy p{font-size:11px;line-height:1.65}.intro-copy .loot{margin:6px 0}.intro-copy .power-legend{font-size:9px;margin-bottom:8px}.intro-copy .best{margin-top:6px}.intro-board{margin-top:8px}.intro-copy .primary{padding-block:9px}}
@media(orientation:landscape) and (max-height:520px){.intro-copy{max-width:46%}.intro-copy h1{font-size:clamp(24px,4.8vw,34px);line-height:1.5;margin:5px 0}.intro-copy p{line-height:1.65}.intro-copy .primary{padding-block:8px}}

.character-picker{border:0;padding:0;margin:10px 0 14px;display:flex;gap:8px;flex-wrap:wrap}.character-picker legend{font-size:13px;margin-bottom:7px}.character-picker button{padding:9px 15px;border-radius:22px;border:1px solid #cba98c;background:#fff8e9;color:#65442f;font:inherit;cursor:pointer;line-height:1.5}.character-picker button[aria-pressed=true]{background:#b64832;color:white;border-color:#b64832}.instructions small{max-width:560px;line-height:1.7}
/* Keep character selection clear of the fixed gesture guide. */
#intro .intro-copy{top:90px;transform:none;max-height:calc(100dvh - 190px);overflow-y:auto;padding-bottom:10px;scrollbar-width:thin}#intro .intro-copy h1{font-size:clamp(34px,4.2vw,56px);line-height:1.4}#intro .instructions{bottom:20px}.intro-copy .eyebrow{display:block}
@media(max-width:700px){#intro .intro-copy{top:100px;left:22px;width:calc(100% - 44px);max-height:calc(100dvh - 200px)}#intro .intro-copy h1{font-size:32px;line-height:1.45}.character-picker{margin:8px 0 12px}.character-picker button{font-size:13px;padding:7px 12px}.character-picker legend{font-size:11px}#intro .intro-copy .loot{display:none}#intro .intro-copy p{font-size:12px;margin:6px 0}#intro .power-legend{font-size:10px;margin:6px 0}#intro .instructions{bottom:16px}}
@media(orientation:landscape) and (max-height:520px){#intro .intro-copy{top:65px;max-height:calc(100dvh - 135px)}#intro .intro-copy h1{font-size:26px}#intro .intro-copy .loot,#intro .power-legend{display:none}#intro .character-picker{margin:4px 0 8px}}