:root { --background:#efeee0; --text:#262322; --secondary:#5f5a54; --selection:#d4635b; }
*, *::before, *::after { box-sizing:border-box; }
html {
    --s:47px; --c1:var(--secondary); --c2:var(--text);
    --_g:var(--c1) 0% 5%,var(--c2) 6% 15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,#0000 96%;
    background:radial-gradient(50% 50% at 100% 0,var(--_g)),radial-gradient(50% 50% at 0 100%,var(--_g)),radial-gradient(50% 50%,var(--_g)),radial-gradient(50% 50%,var(--_g)) calc(var(--s)/2) calc(var(--s)/2) var(--c1);
    background-size:var(--s) var(--s);
}
body, input, button { font-family:"Playpen Sans",cursive; font-weight:600; font-size:clamp(16px,2vh,20px); }
body { margin:0; color:var(--text); }
main { min-height:100dvh; display:flex; justify-content:center; align-items:center; flex-direction:column; padding:70px 20px 35px; }
[hidden] { display:none !important; }
.box { width:min(560px,100%); padding:clamp(22px,3vh,36px); border-radius:20px; border:0; background:var(--background); box-shadow:0 8px 14px #26232280; text-align:center; }
.box > *:first-child { margin-top:0; }
h1 { font-size:1.7em; margin-bottom:24px; }
h2 { font-size:1.2em; }
p { line-height:1.6; overflow-wrap:anywhere; }
button { display:block; cursor:pointer; width:100%; padding:12px 16px; margin-top:14px; border-radius:14px; border:0; background:var(--selection); color:var(--background); font-size:1.1em; }
.secondary-button { background:var(--secondary); }
.link-button { background:none; color:var(--secondary); text-decoration:underline; }
button:focus-visible, input:focus-visible { outline:3px solid var(--text); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.5; }
form { display:flex; flex-direction:column; gap:14px; }
label { display:block; width:100%; text-align:left; }
label span { display:block; margin-bottom:7px; }
input { width:100%; padding:12px; border-radius:12px; border:2px solid var(--secondary); background:var(--background); color:var(--text); }
input[inputmode="numeric"] { text-align:center; letter-spacing:.35em; font-size:1.5em; }
form button { margin:0; }
.game-card { border:2px solid var(--secondary); border-radius:14px; padding:20px; margin:18px 0; }
.game-card h2 { margin-top:0; }
dialog::backdrop { background:#262322b3; }
dialog { max-width:calc(100vw - 40px); max-height:90dvh; overflow:auto; }
#dev-banner { position:fixed; top:0; left:0; right:0; z-index:30; padding:8px; background:#e8c064; text-align:center; font:14px system-ui,sans-serif; }
#dev-banner form { display:inline; }
#dev-banner button { display:inline; width:auto; margin:0 0 0 12px; padding:4px 9px; font:inherit; }
#update-banner { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:40; width:min(500px,92vw); padding:16px; border-radius:12px; text-align:center; background:var(--background); box-shadow:0 3px 14px #26232280; }
#update-banner button { display:inline; width:auto; margin:0; font:inherit; }
#connection-error { position:relative; margin:0 auto 24px; width:min(560px,calc(100% - 40px)); }
#request-status { position:fixed; bottom:8px; right:12px; padding:4px 10px; background:var(--background); border-radius:8px; font-size:14px; }
#request-status:empty { display:none; }
main[aria-busy="true"] button { cursor:wait; opacity:.65; }