/* LKDOUB LOGIN ONLY. All rules are restricted to the lobby or to the
   document while the lobby is visible. Game screen CSS is not changed. */
/* Keep the original LKDOUB header visible on the login page. */
body:has(#lobby:not([hidden])) main { max-width:none; padding:0; }
body:has(#lobby:not([hidden])) #message { max-width:520px; margin:0 auto; padding:0 12px; }

#lobby.lk-landing {
  width:100%; max-width:none; min-height:calc(100dvh - 63px);
  margin:0; padding:36px 22px 45px;
  display:flex; justify-content:center; align-items:center;
  border:0; border-radius:0; background:transparent; box-shadow:none;
}
#lobby.lk-landing .lk-landing-inner { width:min(100%,550px); }
#lobby .lk-seal { color:#f1c873; letter-spacing:5px; font-size:20px; font-weight:700; }
#lobby .lk-seal span { font-size:26px; letter-spacing:2px; font-weight:500; }
#lobby .lk-eyebrow { color:#e5c17d; font-size:10px; font-weight:900; letter-spacing:4px; margin:17px 0 13px; }
#lobby h1 { color:#fff5de; font-size:clamp(42px,6vw,65px); font-weight:900; letter-spacing:-2px; line-height:1.03; margin:0; }
#lobby h1 em { color:#f1c873; font-style:normal; }
#lobby .lk-landing-intro { font-size:14px; color:#b2d8d1; margin:21px 0 30px; }
#lobby .lk-join-form {
  background:#082a33ef; border:1px solid #f1c87366;
  border-radius:19px; padding:20px 16px 22px;
  box-shadow:0 18px 55px #0006;
}
#lobby .dardino-account { margin:0 0 20px; min-height:48px; }
#lobby .lk-field-label, #lobby .lk-avatar-heading {
  display:block; margin:13px 0 10px; font-size:10px;
  font-weight:900; letter-spacing:1.8px; color:#f1c873;
}
#lobby input {
  width:100%; min-height:46px; border-radius:9px;
  border:1px solid #fff5df38; background:#051c24;
  padding:11px 12px; font-size:16px; color:#fff5de; outline:none;
}
#lobby input:focus { border-color:#f1c873; }
#lobby .avatar-list {
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px; margin:0 0 19px;
}
#lobby .avatar-list button {
  min-width:0; min-height:69px; padding:5px 2px 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; border:1px solid #d2b47644; border-radius:12px;
  background:#062b2b; color:#d9e7dc;
}
#lobby .avatar-list button::after {
  content:attr(title); font-size:9px; line-height:1.15;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#lobby .avatar-list img { width:45px; height:45px; display:block; }
#lobby .avatar-list button[aria-pressed=true] {
  outline:none; border-color:#f1c873; background:#425333;
  box-shadow:0 0 0 1px #f1c873;
}
#lobby .avatar-list button:focus-visible { outline:2px solid #fff0b6; outline-offset:2px; }
#lobby .lk-room-actions { display:grid; gap:9px; }
#lobby .lk-create {
  width:100%; min-height:44px; border:1px solid #ffd98e;
  background:linear-gradient(135deg,#fff0ab,#e8bd69 55%,#c69238);
  color:#17383d; font-size:12px; font-weight:900;
}
#lobby .lk-join-inline { display:grid; grid-template-columns:minmax(0,1fr) 116px; gap:6px; }
#lobby .lk-join-inline input { min-width:0; text-align:center; letter-spacing:1px; }
#lobby #join {
  min-height:46px; border:1px solid #d9b57499;
  background:#123f48; color:#ffe2a6; font-size:12px; font-weight:900;
}
#lobby #identityNote { margin:16px 0 0; font-size:11px; color:#8cb6b4; line-height:1.5; }
@media(max-width:700px) {
  #lobby.lk-landing { align-items:flex-start; min-height:calc(100dvh - 53px); padding:30px 17px 35px; }
  #lobby .lk-seal { font-size:18px; }
  #lobby .lk-seal span { font-size:23px; }
  #lobby h1 { font-size:clamp(40px,10vw,51px); }
  #lobby .lk-landing-intro { font-size:13px; margin:20px 0 30px; }
  #lobby .lk-join-form { padding:15px; }
}
@media(max-width:400px) {
  #lobby .avatar-list { gap:5px; }
  #lobby .avatar-list img { width:36px; height:36px; }
  #lobby .avatar-list button { min-height:61px; }
  #lobby .avatar-list button::after { font-size:8px; }
}