@font-face { font-family: Clay; src: url('./ui/LilitaOne-Regular.ttf'); font-display: swap; }
@font-face { font-family: Nunito; src: url('./ui/Nunito-SemiBold.ttf'); font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #182d3d; color: #fff0d4; font: 16px Nunito, system-ui; }
canvas { display: block; width: 100%; height: 100%; outline: none; }
[hidden] { display: none !important; }
#lobby { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 3; padding: 24px; overflow-y: auto; background: linear-gradient(120deg, #263a4588, #182a3bd9), url('./ui/clay-far.png') center / cover; }
.menu-card { width: min(100%, 480px); padding: 26px 34px 16px; border-radius: 42px 38px 44px 37px; background: #263d4ae8; box-shadow: 0 12px 0 #152b37aa, inset 0 3px 3px #99bbbd44, 0 28px 80px #08192377; }
.eyebrow { font-size: 11px; letter-spacing: .18em; color: #d4c7ad; }
h1 { font: 110px/.95 Clay, sans-serif; letter-spacing: 3px; margin: 12px 0 8px; color: #ffe3ad; text-shadow: 0 3px #d7ab74, 0 8px #172e39, 0 12px 14px #10233177; transform: rotate(-3deg); }
.tagline { margin: 16px 0 26px; font-size: 19px; }
nav { display: grid; gap: 15px; }
button, a { color: inherit; }
button { font: 23px Clay, sans-serif; border: 0; border-radius: 19px 22px 18px 21px; padding: 12px 20px; background: #bf805f; box-shadow: inset 0 3px 2px #ffd2a580, inset 0 -3px 2px #7f4e42, 0 5px 0 #142a34; cursor: pointer; transition: transform .12s, filter .12s; }
button span { display: block; font: 13px Nunito, system-ui; margin-top: 3px; }
button.primary { background: #518f87; box-shadow: inset 0 3px 2px #b4e0c480, inset 0 -3px 2px #326a67, 0 5px 0 #142a34; }
button:hover, button:focus-visible { filter: brightness(1.12); transform: translateY(-2px); outline: 3px solid #ffdd9b; outline-offset: 4px; }
button:active { transform: translateY(3px); }
button:disabled { opacity: .5; cursor: wait; }
#status { min-height: 24px; font-size: 14px; margin: 20px 0 0; white-space: pre-wrap; }
#join-form { text-align: left; } #join-form div { display: flex; gap: 14px; margin-top: 16px; }
input { font: 15px Nunito, system-ui; width: 100%; background: #152e3b; color: #fff0d4; border: 1px solid #739b9b; padding: 12px; border-radius: 10px; margin-top: 8px; }
.footer-note { position: absolute; bottom: 12px; font-size: 12px; opacity: .8; }
#network { position: absolute; left: 10px; top: 10px; z-index: 2; max-width: min(260px, 45vw); font-size: 12px; background: #152c39ee; padding: 10px 14px; border-radius: 15px; }
#network button { font: 14px Nunito, system-ui; padding: 7px 11px; margin-top: 8px; box-shadow: none; }
#network summary { cursor: pointer; } #details { opacity: .7; margin-top: 5px; }
#invite { font-size: 12px; }
@media(max-height: 640px) { #lobby { padding: 12px; } .menu-card { padding: 15px 25px; } h1 { font-size: 76px; } .tagline { margin: 12px 0 18px; } nav { gap: 12px; } button { padding: 8px 16px; } .footer-note { display: none; } }
@media(prefers-reduced-motion: reduce) { button { transition: none; } }

body.playing #network { display: none; }