*{box-sizing:border-box}body{margin:0;background:#f5f0df;color:#153e30;font-family:system-ui,-apple-system,sans-serif}main{max-width:820px;margin:auto;padding:20px 22px max(30px,env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:8px 0 25px}.back{color:#245b46;text-decoration:none;font-size:14px}.brand{font-size:10px;letter-spacing:2px;font-weight:700}.title{text-align:center}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#8b693a}h1{font:400 48px/1.1 Georgia,serif;margin:12px 0}h2{font:400 27px/1.2 Georgia,serif;margin:8px 0 12px}.title p{color:#597363;margin:0 0 24px}.scores{display:flex;gap:22px;align-items:center;margin:0 0 12px}.scores>div{flex:1}.scores span{font-size:9px;letter-spacing:2px;color:#667568;display:block}.scores strong{font-size:28px;font-variant-numeric:tabular-nums}.scores small{font-size:14px;font-weight:400;color:#6b786c}button{font:600 15px/1.3 system-ui;cursor:pointer;border:0;border-radius:11px;background:#174e39;color:#fff6dc;padding:14px 20px;min-height:48px}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #b88834;outline-offset:4px}#pause{width:48px;padding:10px;background:#e6ddc5;color:#245b46;font-size:22px}.stage{position:relative;overflow:hidden;border-radius:20px;border:1px solid #c4c8aa;background:#bdd6c7;box-shadow:0 7px 25px #203d2515}canvas{display:block;width:100%;aspect-ratio:12/7;touch-action:manipulation}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:#eaf0decf;backdrop-filter:blur(3px)}[hidden]{display:none!important}.overlay h2{font-size:clamp(23px,4vw,34px)}.overlay p{font-size:14px;line-height:1.5;max-width:320px;margin:0 0 15px;color:#335b46}.crest{color:#a88238;font-size:37px;line-height:1;margin-bottom:8px}.jump{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;margin-top:15px;min-height:58px;font-size:18px;touch-action:manipulation}.jump span{font-size:25px;color:#edd69a}.hint{text-align:center;font-size:12px;color:#667568;margin:10px 0 26px}.panel{background:#fffcf3;border:1px solid #e0d7bd;border-radius:18px;padding:25px;margin:20px 0}.result{text-align:center}.result label{display:block;font-size:14px;text-align:left;margin:18px 0 8px}.submit-row{display:flex;gap:8px}input{min-width:0;flex:1;border:1px solid #b4bba6;padding:13px;border-radius:10px;font:16px system-ui;color:#164630;background:white}.privacy{font-size:12px;line-height:1.5;text-align:left;color:#687568;margin-bottom:0}#save-message{font-size:14px;line-height:1.5}.chart-header{display:flex;justify-content:space-between;align-items:center}.chart-header h2{margin-bottom:0}.quiet{background:#edf0e3;color:#28523f;padding:10px;font-size:22px}.chart-copy{color:#6a7a6c;font-size:13px}ol{list-style:none;margin:18px 0 0;padding:0}ol li{display:flex;gap:12px;align-items:center;padding:13px 0;border-top:1px solid #e8e5d7}.rank{font-size:12px;color:#8c713c;width:22px;flex:none}.player{flex:1;overflow-wrap:anywhere;font-size:15px}.metres{font-size:15px;font-weight:700;white-space:nowrap}.empty{font-size:14px;color:#637867;line-height:1.5}.chart-status{font-size:13px}footer{text-align:center;color:#617362;font:italic 16px/1.6 Georgia,serif;margin:30px 0}footer span{display:block;font:12px/1.6 system-ui;margin-top:8px}@media(max-width:500px){main{padding:14px 16px 26px}h1{font-size:39px}header{padding-bottom:20px}.brand{letter-spacing:1px;font-size:8px}.panel{padding:20px}.submit-row{flex-wrap:wrap}.submit-row button{width:100%}.overlay{padding:16px}.overlay .crest{display:none}.overlay p{font-size:12px;margin-bottom:10px}.overlay h2{margin-top:0}.overlay button{min-height:44px;padding:11px 17px}}@media(prefers-reduced-motion:reduce){.overlay{backdrop-filter:none}}

.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#174e39}.brand img{object-fit:contain;flex:none}.brand small{display:block;font-size:7px;letter-spacing:1.4px;margin-top:6px;color:#927140}.pace-note{font-size:12px!important;color:#8b693a!important;margin-top:-12px!important}.crown{font-size:25px;line-height:1;width:23px;flex:none}.gold{color:#b88a20;text-shadow:0 1px #f2df98}.silver{color:#838f9b;text-shadow:0 1px #e2e6eb}.login-link{display:inline-block;border-radius:11px;padding:14px 20px;background:#174e39;color:#fff6dc;font-size:15px;font-weight:600;text-decoration:none;min-height:48px}#login-prompt p{font-size:14px;line-height:1.6}.advertisement{margin:170px 0 30px;padding:20px 0;border-top:1px solid #e0d7bd;text-align:center;min-height:140px}.advertisement p{font-size:9px;letter-spacing:2px;color:#7b806e;margin:0 0 18px}@media(max-width:500px){.brand img{width:44px;height:44px}.brand small{font-size:6px;letter-spacing:.5px}.brand{gap:6px}.title p{line-height:1.5}.crown{font-size:22px;width:20px}ol li{gap:9px}}

/* Kingdom branding — October 2026 */
body{background:radial-gradient(ellipse at top,#e8dfbd 0,#f6f1e1 65%);font-size:16px}
main>header{background:linear-gradient(120deg,#103c2e,#205740);border:1px solid #b89b50;border-radius:20px;padding:18px 24px;margin:0 0 28px;box-shadow:0 8px 24px #123e3018}
main>header .back{color:#fff1ca;font-size:14px}
main>header .brand{color:#fff3d2;gap:14px}
main>header .brand img{width:76px;height:76px;border:2px solid #c4a657;box-shadow:0 0 0 4px #e1c57518;border-radius:50%}
main>header .brand span{font-family:Georgia,serif;font-size:17px;letter-spacing:1.8px}
main>header .brand small{color:#e4cc88;font:10px/1.5 system-ui;letter-spacing:2px}
.game-title,.title{max-width:820px;margin:0 auto 24px;padding:28px 28px 26px;border:1px solid #bca263;border-radius:22px;background:linear-gradient(120deg,#123c2f,#235b43);box-shadow:inset 0 0 0 5px #d6b96718;color:#fff4d8;text-align:center}
.game-title h1,.title h1{color:#fff0c5;text-shadow:0 2px 0 #0002}
.game-title>p,.title>p{color:#e0e9d6;font-size:16px}
.game-title .eyebrow,.title .eyebrow{color:#dfc67d;font-size:11px}
.game-title .identity{color:#f0dda8;font-size:14px}
.play-panel,.stage{border:2px solid #baa05e;box-shadow:0 6px 22px #173f3012}
.chart{border-top:4px solid #bb9d50}
.game-card{border-color:#c1ac70}.game-card:hover{border-color:#987629}
main>footer{border-top:1px solid #bd9f56;margin-top:36px;padding-top:26px;font-family:Georgia,serif}
main>footer img{width:60px;height:60px;object-fit:contain}
.advertisement{max-width:820px;margin:48px auto 28px;padding:20px 12px;border-top:1px solid #d3c8a5;clear:both}
@media(max-width:600px){main>header{padding:14px 12px;gap:12px;flex-wrap:wrap}main>header .brand img{width:58px;height:58px}main>header .brand span{font-size:13px;letter-spacing:1px}main>header .brand small{font-size:8px;letter-spacing:1px}main>header .back{font-size:13px}.game-title,.title{padding:22px 14px}.game-title h1,.title h1{font-size:34px}.advertisement{margin-top:40px}}