@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#f5f6df;background:#102c25;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffdf50;outline-offset:5px}main{max-width:1800px;margin:auto;padding:0 36px}header{height:96px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#f6f7dd;font-family:'Barlow Condensed',Impact,sans-serif;font-size:25px;font-weight:800;line-height:.9;letter-spacing:1px}.brand-second{display:block;font-size:17px;letter-spacing:3px;margin-top:6px}.crest{display:grid;place-items:center;background:#ffda43;color:#a72c31;font-size:39px;width:49px;height:55px;clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%)}.header-note{font-size:12px;letter-spacing:2px;color:#9cb3a3}.tools{display:flex;gap:10px}.tools button{color:#e9eedb;background:#254337;border:1px solid #3b5645;width:46px;height:44px;border-radius:9px;font-size:22px}.tools #sound{width:72px;display:flex;align-items:center;justify-content:center;gap:8px}.tools span{font-size:10px}.arena{position:relative;height:calc(100svh - 174px);min-height:520px;max-height:980px;overflow:hidden;border-radius:18px;background:#518d54;border:1px solid #658562;isolation:isolate}canvas{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;top:30px;left:30px;right:30px;display:flex;justify-content:space-between;pointer-events:none}.scorebox{display:flex;flex-direction:column;text-shadow:0 2px 2px #163f3566}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px}.scorebox strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:72px;line-height:1.05;letter-spacing:1px}.distance{font-size:12px;color:#e0ecc7}.record{display:flex;align-items:center;gap:14px;align-self:flex-start;background:#133e31e0;padding:12px 17px;border:1px solid #ffffff25;border-radius:8px}.record span{font-size:11px;letter-spacing:1px;color:#edcf71}.record strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:28px;line-height:1}.status{position:absolute;top:36px;left:50%;transform:translateX(-50%);color:#e9f3cd;background:#143e2e9c;border:1px solid #ffffff25;border-radius:20px;padding:9px 15px;font-size:10px;font-weight:700;letter-spacing:1.4px;white-space:nowrap}.panel{position:absolute;left:6%;top:50%;transform:translateY(-41%);width:390px;padding:24px 0;filter:drop-shadow(0 3px 12px #173f3433)}.panel:before{content:'';position:absolute;inset:-45px -75px;z-index:-1;background:radial-gradient(ellipse,#1d5035d9,transparent 70%);pointer-events:none}.kicker{font-size:11px;font-weight:700;letter-spacing:2px;color:#ffe268}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(58px,6vw,100px);font-weight:800;line-height:.94;letter-spacing:-1px;margin:20px 0}h1 em{font-style:normal;color:#ffdf4e}.panel p{font-size:15px;line-height:1.65;max-width:305px;color:#edf0d7;margin-bottom:26px}.start{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#ffda43;color:#233c24;border:none;border-bottom:4px solid #c99b1d;border-radius:7px;padding:17px 20px;font-size:13px;font-weight:800;letter-spacing:.4px;width:310px}.start:hover{background:#ffe671;transform:translateY(-1px)}.start span{font-size:23px;line-height:15px}.start-hint{width:310px;text-align:center;font-size:11px;color:#cfdfbc;margin-top:13px}.playhint{position:absolute;left:30px;bottom:30px;font-size:10px;letter-spacing:1.5px;color:#e2ecc2}.dpad{position:absolute;bottom:25px;right:28px;display:grid;grid-template:48px 48px/48px 48px 48px;gap:5px}.dpad button{border:1px solid #edf2d756;background:#164932b8;color:#f2f4d9;border-radius:8px;font-size:25px;touch-action:none;box-shadow:0 3px 0 #183d2b55}.dpad button:active{background:#ffd94b;color:#193f30;transform:translateY(2px)}.up{grid-area:1/2}.left{grid-area:2/1}.down{grid-area:2/2}.right{grid-area:2/3}.toast{position:absolute;left:50%;top:24%;transform:translateX(-50%);font-family:'Barlow Condensed',Impact,sans-serif;font-size:34px;color:#ffe367;text-shadow:0 3px #19462c;pointer-events:none}footer{min-height:78px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;color:#a9bbab}.keys,.legend{display:flex;gap:15px;align-items:center}.keys>span{display:flex;align-items:center;gap:4px}kbd{font:11px 'DM Sans',sans-serif;border:1px solid #647c65;border-bottom:2px solid #647c65;border-radius:4px;min-width:20px;height:22px;display:inline-grid;place-items:center}.keys i{height:16px;width:1px;background:#4b6652}.legend b{margin-right:5px}.gold{color:#ffda43}.red{color:#e58d70}.fan{font-size:9px;letter-spacing:1px}.keys .mobile-label{display:none}[hidden]{display:none!important}@media(max-width:1000px){main{padding:0 20px}.fan{display:none}.panel{left:5%;width:330px}.status{top:42px}.header-note{display:none}.legend{gap:12px}}@media(max-width:600px){main{padding:0 10px}header{height:76px;padding:0 6px}.brand{font-size:21px}.brand-second{font-size:14px}.crest{width:39px;height:45px;font-size:32px}.arena{height:calc(100svh - 132px);min-height:470px;border-radius:12px}.hud{top:20px;left:20px;right:20px}.scorebox strong{font-size:54px}.record{padding:9px 12px;gap:9px}.record strong{font-size:23px}.record span{font-size:9px}.status{top:117px;font-size:9px}.panel{top:48%;left:7%;width:86%;transform:translateY(-36%)}h1{font-size:64px;margin:13px 0}.panel p{max-width:275px;font-size:14px;line-height:1.5;margin-bottom:18px}.start,.start-hint{width:280px;max-width:100%}.kicker{font-size:9px}.dpad{bottom:20px;right:16px;grid-template:46px 46px/46px 46px 46px}.playhint{left:18px;bottom:28px;width:140px;line-height:1.8;font-size:8px}footer{min-height:56px;font-size:10px;justify-content:center}.keys>span:first-child,.keys .desktop-label,.keys i,.keys>span:last-child,.legend,.fan{display:none}.keys .mobile-label{display:flex}.panel:before{inset:-30px;background:radial-gradient(ellipse,#1d5035ee,transparent 75%)}.toast{top:28%;font-size:28px}}@media(max-height:680px) and (min-width:601px){header{height:70px}.arena{height:calc(100svh - 130px);min-height:400px}footer{min-height:60px}h1{font-size:64px}.panel p{margin-bottom:15px}.hud{top:20px}.panel{transform:translateY(-35%)}.playhint{display:none}}

.tools .customize{width:auto;padding:0 13px;display:flex;gap:8px;align-items:center}.tools .customize span{font-size:11px;letter-spacing:.6px}dialog{color:#f4f3dd;background:#173d30;border:1px solid #69815b;border-radius:18px;padding:26px;width:min(560px,calc(100% - 24px));max-height:calc(100svh - 30px);overflow:auto;box-shadow:0 25px 100px #071f23aa}dialog::backdrop{background:#09271fbd;backdrop-filter:blur(5px)}.locker-head{display:flex;align-items:center;justify-content:space-between}.locker-head h2{font:800 36px 'Barlow Condensed',Impact,sans-serif;margin:8px 0 0}.locker-head button{border:1px solid #69815b;color:#f4f3dd;background:transparent;border-radius:8px;width:40px;height:40px;font-size:25px}#avatarPreview{height:190px;width:100%;background:radial-gradient(ellipse,#4d7642,#214733);border-radius:12px;margin-top:18px}.preview-labels{display:flex;justify-content:space-around;font-size:11px;letter-spacing:2px;color:#c3d2ae;margin-top:8px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:22px 0}.fields label{font-size:14px;display:flex;flex-direction:column;gap:7px}.fields input,.fields select{width:100%;min-width:0;background:#254d3a;color:#fff6d5;border:1px solid #779367;border-radius:7px;padding:11px;font:16px 'DM Sans',sans-serif}.locker-note{font-size:12px;color:#b9ccaa;margin:14px 0 0}#locker .start{width:100%}@media(max-width:600px){.tools .customize{padding:0 10px}.tools .customize span{display:none}dialog{padding:20px}.locker-head h2{font-size:30px}#avatarPreview{height:155px}.fields{gap:12px}.locker-head .kicker{font-size:8px}}

@media(max-width:600px){.status{max-width:90%;white-space:normal;text-align:center;line-height:1.5;width:max-content;letter-spacing:.8px}}

.pace{position:absolute;right:30px;top:90px;font-size:10px;letter-spacing:.8px;color:#edf2ce;padding:7px 10px;border-radius:5px;background:#214d37bb}.pace.urgent{color:#fff3d0;background:#a72f31;font-weight:800}@media(max-width:600px){.pace{top:72px;right:18px;font-size:8px;max-width:62%;text-align:right;letter-spacing:.2px}}

.save-result{display:block;width:310px;max-width:100%;padding:11px 8px;margin-top:9px;border:1px solid #e8d789;border-radius:6px;color:#fff0b0;background:#244e36e8;font-size:11px;font-weight:700}.ranking-note{font-size:14px;line-height:1.5;color:#c1d1b0}.ranking-controls{display:flex;gap:16px;justify-content:space-between;align-items:center;margin:22px 0 12px;font-size:13px;color:#d4dec4}.ranking-controls button{flex-shrink:0;border:1px solid #779367;border-radius:6px;background:#294d3b;color:#f4f3dd;padding:9px;font:13px inherit}.table-scroll{overflow:auto}.ranking-table{width:100%;border-collapse:collapse;font-size:15px}.ranking-table th{text-align:left;color:#a9c19c;font-size:12px;font-weight:500;padding:10px 8px;border-bottom:1px solid #537151}.ranking-table td{padding:13px 8px;border-bottom:1px solid #3a5a40}.ranking-table td:last-child,.ranking-table th:last-child{text-align:right}.ranking-table td:last-child{color:#ffe06c;font-weight:800;font-variant-numeric:tabular-nums}.ranking-table tr.mine{background:#466036}.ranking-table tr:first-child td{color:#ffe275}.ranking-table td:nth-child(2){overflow-wrap:anywhere}#scoreForm{padding:18px;background:#284b35;border:1px solid #7d8754;border-radius:10px;margin-top:20px}#scoreForm strong{display:block;color:#ffe276;margin-bottom:15px}#scoreForm label{display:block;font-size:14px;margin-bottom:7px}.score-entry{display:flex;gap:8px}.score-entry input{width:100%;min-width:0;padding:12px;background:#1b3e2c;border:1px solid #849565;color:#fff5d1;border-radius:6px;font-size:16px}.score-entry button{background:#ffda43;color:#254125;border:0;border-radius:6px;padding:12px;font-weight:800}.score-entry button:disabled{opacity:.65;cursor:default}#saveStatus{font-size:13px;line-height:1.5;color:#e9dfb5;margin:10px 0 0}#rankingStatus{line-height:1.5}@media(max-width:600px){.tools{gap:6px}.tools button,.tools .customize,.tools #sound{width:38px;padding:0;justify-content:center}.tools #sound span{display:none}.save-result{width:280px;font-size:10px;padding:9px}.panel:has(.save-result:not([hidden])) h1{font-size:52px}.panel:has(.save-result:not([hidden])) p{margin:12px 0}.ranking-controls{font-size:12px}.ranking-table{font-size:14px}}