:root{color-scheme:dark;--green:#65cf6c;--panel:#101820}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100%;margin:0}
body{overflow:hidden;background:#10161d;color:white;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body:before{content:"";position:fixed;inset:-16%;z-index:-2;background-image:linear-gradient(120deg,rgba(8,15,22,.78),rgba(8,15,22,.94)),url('assets/bg_night.png');background-size:cover;background-position:center;filter:blur(23px);opacity:.82}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.3))}
.stage{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px 10px max(8px,env(safe-area-inset-bottom))}
.screen-wrap{width:min(calc((100dvh - 77px) * .5625),calc(100vw - 20px),500px);aspect-ratio:288/512;max-height:calc(100dvh - 77px);position:relative;overflow:hidden;border-radius:7px;border:2px solid #35424b;box-shadow:0 15px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09);background:#53b8bf;flex-shrink:1;touch-action:none}
canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;cursor:pointer;outline:none;image-rendering:auto}
.below{width:min(calc((100dvh - 77px) * .5625),calc(100vw - 20px),500px);display:flex;justify-content:space-between;align-items:center;gap:7px;min-height:44px}
.hints{display:flex;flex-direction:column;gap:3px;font-family:monospace;font-size:clamp(8px,1.7vw,10px);font-weight:900;letter-spacing:.055em;color:#8ea8b2;white-space:nowrap}
.hints span:first-child{color:#f1e5b0;font-size:clamp(10px,2vw,12px)}
.actions{display:flex;gap:6px;flex-shrink:0}
.actions button{padding:10px 8px;border:1px solid #43515a;border-radius:5px;background:#202e35;color:#ecf1e4;font:700 9px/1 monospace;letter-spacing:.015em;cursor:pointer;min-height:36px}
.actions button:active{transform:translateY(1px);background:#3d555d}
button:focus-visible,canvas:focus-visible{outline:2px solid #e9db8d;outline-offset:2px}
.screen-wrap:fullscreen{width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;display:grid;place-items:center;background:#050e14}
.screen-wrap:fullscreen canvas{width:min(100vw,calc(100dvh * .5625));height:min(100dvh,calc(100vw * 1.7777778));max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:550px){.stage{padding:0 0 max(4px,env(safe-area-inset-bottom));gap:6px}.screen-wrap{border:0;border-radius:0;width:min(100vw,calc((100dvh - 50px) * .5625));max-height:calc(100dvh - 50px)}.below{width:min(100vw,calc((100dvh - 50px) * .5625));padding:0 7px;min-height:40px}.actions button{padding:7px 7px;min-height:31px}}
@media(orientation:landscape) and (max-height:500px){.stage{flex-direction:row;gap:13px}.screen-wrap{width:min(calc(100dvh * .5625),calc(100vw - 130px));max-height:100dvh}.below{width:110px;min-height:0;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px}.actions{flex-direction:column}}

/* Worldwide Top 50 */
[hidden]{display:none!important}
.board-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(3,11,18,.86);backdrop-filter:blur(8px);overflow:auto;overscroll-behavior:contain}
.board-panel{width:min(100%,460px);max-height:min(94dvh,850px);display:flex;flex-direction:column;background:#111f2c;border:1px solid #547d9b;border-radius:15px;padding:16px;color:#ecf8ff;box-shadow:0 16px 55px #000b;gap:9px;font-family:system-ui,-apple-system,sans-serif}
.board-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.board-heading h1{margin:0;color:#d9f8ff;font-size:clamp(22px,5vw,29px);letter-spacing:.025em;font-weight:1000}
.board-kicker{font-size:10px;font-weight:800;letter-spacing:.15em;color:#65caff}
.board-panel button{min-height:37px;border:1px solid #417d9b;border-radius:8px;padding:9px 13px;background:#164665;color:white;font-size:12px;font-weight:800;cursor:pointer}
.board-panel button:active{transform:translateY(1px)}
.board-panel button:disabled{opacity:.5;cursor:wait}
.board-panel .board-x{border:0;background:#273849;font-size:26px;min-height:36px;line-height:18px}
.board-player{margin:0;font-size:12px;letter-spacing:.07em;font-weight:800;color:#fce39b}
.board-signup{padding:10px;background:#1a344a;border-radius:10px;display:grid;gap:8px}
.board-signup label{font-size:11px;font-weight:900;letter-spacing:.05em;color:#d8efff}
.board-form-row{display:flex;gap:7px}
.board-form-row input{width:100%;min-width:0;background:#061a28;border:1px solid #5985a0;border-radius:7px;color:#fff;padding:9px;font-size:14px;outline-offset:2px;user-select:text;-webkit-user-select:text}
.board-form-row button{flex-shrink:0;background:#1890b2;color:white}
.board-terms{margin:0;color:#b0c7d8;font-size:11px;line-height:1.35}
.board-my-record{border:1px solid #387ba0;background:#1c4461;border-radius:8px;padding:10px;font-weight:900;font-size:13px;color:#fff1aa}
.board-status{min-height:16px;margin:0;text-align:center;font-size:10px;font-weight:800;letter-spacing:.04em;color:#a9c9dd}
.board-status[data-status=error]{color:#ffc1ae}
.board-status[data-status=success]{color:#9cf3bd}
.board-list-head{display:grid;grid-template-columns:54px 1fr 67px;gap:7px;background:#2a465a;color:#a6d6f4;font-size:11px;font-weight:900;padding:9px 10px;border-radius:7px}
.board-list-head span:last-child{text-align:right}
.board-list{min-height:80px;margin:0;padding:0;list-style:none;overflow:auto;overscroll-behavior:contain;scrollbar-color:#477590 #0b1b2a;flex:1}
.board-entry{display:grid;grid-template-columns:54px minmax(0,1fr) 67px;gap:7px;padding:9px 10px;border-bottom:1px solid #284053;font-size:13px;align-items:center}
.board-entry:nth-child(odd){background:#182d3d}
.board-self{background:#1f5674!important;color:#fff0aa}
.board-rank{color:#a3d9f9;font-weight:1000}
.board-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.board-score{text-align:right;font-variant-numeric:tabular-nums;font-weight:900;color:#ffe596}
.board-empty{text-align:center;padding:19px;color:#b1cbd9;font-size:13px}
.board-footer{display:flex;gap:8px}
.board-footer button{flex:1}
.board-footer button:last-child{background:#27799b}
@media(max-width:550px){.actions{gap:4px}.actions button{padding:6px 5px;font-size:8px}.hints{font-size:8px}.below{padding:0 5px}.board-panel{padding:12px;max-height:95dvh}.board-entry{padding:7px 9px}}
@media(orientation:landscape) and (max-height:500px){.board-panel{width:min(90vw,540px);max-height:96dvh;gap:5px;padding:10px}.board-heading h1{font-size:20px}.board-signup{padding:6px}.board-entry{padding:5px 8px}.board-terms{display:none}}

.board-key{background:#203e51!important;font-size:10px!important;min-height:31px!important}
.board-restore{font-size:11px;color:#a9d9ef}
.board-restore summary{cursor:pointer;list-style-position:inside;padding:4px 0}
.board-restore form{padding-top:7px}
.board-restore input{width:100%;min-width:0;border:1px solid #4b839e;border-radius:8px;background:#091c2a;color:#fff;padding:9px;font-size:12px;user-select:text;-webkit-user-select:text}

/* First-visit name entry: compact and clearly separate from the ranking view. */
.board-welcome{font-size:14px;line-height:1.4;margin:0;color:#c8eafa}
.board-backdrop.is-welcome .board-panel{max-width:410px;gap:14px;max-height:min(94dvh,750px)}
.board-backdrop.is-welcome .board-list-head,
.board-backdrop.is-welcome .board-list,
.board-backdrop.is-welcome #leaderboardRefresh{display:none}
.board-backdrop.is-welcome #leaderboardSkip{width:100%;flex:1}
.board-backdrop.is-welcome .board-heading h1{font-size:clamp(24px,6vw,30px)}
.board-backdrop.is-welcome .board-x{display:none}
.board-backdrop.is-welcome .board-player{color:#84d4fd}
.board-backdrop.is-welcome .board-status{font-size:11px;line-height:1.5;min-height:20px}