/* ABOUTME: Yardmatch lobby and overlays using Hello Gravel's mineral palette and fonts. */
/* ABOUTME: Keeps controls readable across desktop, touch, and reduced-motion settings. */
@font-face{font-family:Display;src:url('/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Body;src:url('/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Data;src:url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{font-family:Body,sans-serif;color:#F7F5F0;background:#1A1714;color-scheme:dark}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{touch-action:manipulation}:focus-visible{outline:2px solid #F5841F;outline-offset:2px}
[hidden]{display:none!important}#game{height:100dvh;min-height:320px;position:relative;display:grid;place-items:center;overflow:hidden}#screen{display:block;image-rendering:pixelated;max-width:100%;max-height:100%;background:#1A1714}
a{color:#D4CEC5;display:block}button{font-family:Display,sans-serif;font-weight:700;background:#F5841F;color:#1A1714;border:0;border-radius:8px;min-height:44px;padding:12px 16px;cursor:pointer}button:hover{background:#E0730E}button:disabled{opacity:.6;cursor:wait}.secondary{background:#EAE6DE;color:#1A1714}
.panel{position:absolute;z-index:5;width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;background:#1E1B17;border:1px solid #D4CEC5;border-radius:12px;box-shadow:0 24px 80px #1A1714}
h1,h2{font-family:Display,sans-serif;letter-spacing:-.03em;line-height:1.05;margin:16px 0}h1{font-size:clamp(3rem,8vw,4.5rem);color:#F5841F}h2{font-size:2.25rem}p{line-height:1.5;margin:12px 0}.eyebrow,.muted{color:#D4CEC5}.eyebrow{margin-top:24px}.muted{font-size:.875rem}label,legend{display:block;margin:16px 0 8px;font-weight:600}
input:not([type=radio]){width:100%;min-height:44px;background:#1A1714;color:#F7F5F0;border:1px solid #D4CEC5;border-radius:4px;padding:10px}fieldset{border:0;padding:0;margin:0}#characters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}#characters label{position:relative;margin:0;padding:8px;border:1px solid #D4CEC5;border-radius:8px;text-align:center;font-size:.875rem;cursor:pointer}#characters label:has(input:checked){border-color:#F5841F;background:#2E2A24}#characters input{position:absolute;left:8px;top:8px}#characters img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}#characters span{display:block;margin-top:4px}#join-button{width:100%;margin-top:8px}#menu button{margin:8px 8px 0 0}
#hud{position:absolute;inset:0;pointer-events:none;padding:12px}#top{display:flex;gap:16px;align-items:center}#top button{pointer-events:auto;font-size:.875rem}#clock,#connection{font-family:Data,monospace;background:#1A1714;padding:8px;border-radius:4px}#scores{position:absolute;right:12px;top:72px;background:#1A1714;border-radius:8px;padding:8px;font-size:.875rem}table{border-collapse:collapse}th,td{text-align:left;padding:4px 8px}td:not(:first-child){font-family:Data,monospace}tr[data-self]{color:#F5841F}#feed{position:absolute;bottom:18%;left:16px;background:#1A1714;padding:8px;border-radius:4px}#feed:empty{display:none}#banner{position:absolute;top:45%;left:0;width:100%;text-align:center;font-family:Display,sans-serif;font-weight:700;font-size:1.5rem;text-shadow:2px 2px #1A1714}
.skip{position:absolute;left:8px;top:-80px;z-index:20;background:#1A1714;padding:12px}.skip:focus{top:8px}#touch{position:absolute;inset:0;pointer-events:none;z-index:2}#touch [data-movepad],#touch [data-lookpad]{position:absolute;top:25%;bottom:0;width:50%;pointer-events:auto;touch-action:none}#touch [data-movepad]{left:0}#touch [data-lookpad]{right:0}#touch button{position:absolute;right:16px;bottom:72px;pointer-events:auto;touch-action:none;opacity:.85}#touch [data-act]{right:16px;bottom:16px}#touch [data-stick]{position:fixed;width:92px;height:92px;border:2px solid #D4CEC5;border-radius:50%;transform:translate(-50%,-50%)}#touch [data-knob]{position:absolute;left:50%;top:50%;width:32px;height:32px;background:#F5841F;border-radius:50%;transform:translate(-50%,-50%)}
@media(max-width:600px){.panel{padding:16px}#characters{grid-template-columns:repeat(4,1fr)}#characters label{padding:4px;font-size:.75rem}#top{gap:4px}#connection{display:none}#scores{font-size:.75rem;top:64px}th,td{padding:3px 4px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}