/* Lucky Line Defense main menu: static responsive artboard */
.menu-screen.lobby-title-screen{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100vw;
  height:100vh;
  min-height:420px;
  padding:0;
  display:grid;
  place-items:center;
  background:#05040a;
  color:#fff;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif;
}
.lobby-stage{
  --stage-w:min(100vw,177.7778vh);
  --stage-h:min(100vh,56.25vw);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:var(--stage-w);
  height:var(--stage-h);
  max-width:100vw;
  max-height:100vh;
  aspect-ratio:16/9;
  background:#05040a;
  box-shadow:0 0 0 1px rgba(255,255,255,.035),0 22px 80px rgba(0,0,0,.46);
}
.lobby-stage::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 37%,rgba(255,195,70,.18),transparent 24%),
    linear-gradient(90deg,rgba(0,0,0,.42),transparent 20%,transparent 78%,rgba(0,0,0,.36)),
    linear-gradient(180deg,rgba(0,0,0,.02),transparent 46%,rgba(0,0,0,.50));
}
.lobby-stage::after{
  content:'';
  position:absolute;
  inset:-10%;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 0 46%,rgba(0,0,0,.24) 74%,rgba(0,0,0,.66) 100%);
}
.lobby-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url('./luckybg.png'),url('./assets/luckybackground.png');
  background-size:cover;
  background-position:center;
  transform:none;
  filter:saturate(1.06) contrast(1.04) brightness(.86);
}
.lobby-topline,
.lobby-sprite,
.lobby-knight-left,
.lobby-angel,
.lobby-witch-top,
.lobby-knight-right,
.lobby-timekeeper,
.lobby-icequeen{
  display:none!important;
}
.lobby-title-core{
  position:absolute;
  left:50%;
  top:25.7%;
  z-index:7;
  display:grid;
  justify-items:center;
  width:31.5%;
  max-width:600px;
  min-width:260px;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.lobby-logo-img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 15px 12px rgba(0,0,0,.66)) drop-shadow(0 0 16px rgba(255,220,105,.22));
}
.lobby-menu-stack{
  position:absolute;
  left:50%;
  top:69.6%;
  z-index:8;
  width:36.2%;
  min-width:300px;
  max-width:640px;
  display:grid;
  gap:clamp(10px,1.6vh,18px);
  transform:translate(-50%,-50%);
}
.lobby-start,
.lobby-achievement-btn{
  position:relative;
  left:auto;
  top:auto;
  width:100%;
  height:clamp(58px,8.5vh,96px);
  transform:none;
  padding:0 clamp(24px,3vw,54px)!important;
  border-radius:18px!important;
  border:3px solid rgba(70,38,6,.62)!important;
  clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);
  cursor:pointer;
  color:#3a2105!important;
  font-size:clamp(24px,3vw,52px);
  font-weight:1000;
  letter-spacing:.035em;
  line-height:1;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:.48em;
  text-shadow:0 2px 0 rgba(255,255,255,.36);
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
.lobby-start{
  aspect-ratio:auto;
  background:linear-gradient(180deg,#ffe46b 0%,#ffc134 46%,#e48a10 100%)!important;
  box-shadow:0 8px 0 rgba(93,47,4,.68),0 20px 30px rgba(0,0,0,.46),inset 0 0 0 2px rgba(255,255,255,.20)!important;
  filter:drop-shadow(0 0 16px rgba(255,172,34,.24));
}
.lobby-achievement-btn{
  background:linear-gradient(180deg,rgba(52,40,27,.96),rgba(27,21,18,.96))!important;
  border-color:rgba(218,168,70,.68)!important;
  color:#ffe9b8!important;
  font-size:clamp(20px,2.1vw,36px);
  box-shadow:0 6px 0 rgba(0,0,0,.48),0 18px 28px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.12)!important;
  text-shadow:0 2px 0 rgba(0,0,0,.65);
}
.lobby-start img{display:none!important}
.lobby-start span{
  position:static!important;
  width:auto!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  clip:auto!important;
  white-space:nowrap!important;
  border:0!important;
}
.lobby-start::before,
.lobby-achievement-btn::before{
  display:inline-block;
  font-size:.88em;
  line-height:1;
  transform:translateY(-1px);
}
.lobby-start::before{content:'☘'}
.lobby-achievement-btn::before{content:'🏆'}
.lobby-start:hover,.lobby-start:focus-visible,
.lobby-achievement-btn:hover,.lobby-achievement-btn:focus-visible{
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.08);
}
.lobby-start:active,.lobby-achievement-btn:active{transform:translateY(3px) scale(.99)}
.lobby-start:focus-visible,.lobby-achievement-btn:focus-visible{outline:3px solid rgba(255,255,255,.88);outline-offset:6px}
.lobby-sound{display:none!important}
.lobby-settings{
  position:absolute;
  right:3.6%;
  bottom:7.6%;
  z-index:8;
  width:26.8%;
  min-width:270px;
  max-width:460px;
  padding:clamp(12px,1.45vw,22px);
  border:2px solid rgba(215,169,88,.56);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(32,24,20,.90),rgba(12,11,14,.88));
  box-shadow:0 18px 40px rgba(0,0,0,.44),inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(3px);
}
.lobby-settings h2{
  margin:0 0 10px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#ffedc7;
  font-size:clamp(16px,1.55vw,27px);
  font-weight:1000;
  letter-spacing:.02em;
  text-shadow:0 2px 0 rgba(0,0,0,.74);
}
.lobby-toggle{
  width:100%;
  min-height:clamp(42px,5.4vh,60px);
  margin-top:8px;
  padding:0 clamp(10px,1.05vw,17px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(8px,1vw,15px);
  border:1px solid rgba(201,162,96,.38);
  border-radius:6px;
  background:linear-gradient(180deg,rgba(59,43,31,.92),rgba(24,20,20,.94));
  color:#fff0d5;
  font-size:clamp(15px,1.45vw,25px);
  font-weight:1000;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
}
.lobby-toggle:hover,.lobby-toggle:focus-visible{filter:brightness(1.1)}
.lobby-toggle:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:4px}
.toggle-icon{width:1.35em;text-align:center;color:#ffd264}
.toggle-text{white-space:nowrap}
.toggle-pill{
  position:relative;
  width:clamp(62px,6vw,92px);
  height:clamp(28px,3.2vh,38px);
  border-radius:999px;
  background:linear-gradient(180deg,#ffcc45,#f19818);
  border:2px solid rgba(0,0,0,.46);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.26),0 3px 8px rgba(0,0,0,.26);
}
.toggle-pill::after{
  content:'';
  position:absolute;
  top:50%;
  right:3px;
  width:calc(clamp(28px,3.2vh,38px) - 8px);
  height:calc(clamp(28px,3.2vh,38px) - 8px);
  border-radius:50%;
  transform:translateY(-50%);
  background:linear-gradient(180deg,#fff,#d9d2c7);
  box-shadow:0 2px 5px rgba(0,0,0,.34);
}
.toggle-pill i{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:#321c04;
  font-size:clamp(10px,.95vw,14px);
  font-style:normal;
  font-weight:1000;
}
.lobby-toggle.is-off{color:rgba(255,240,213,.62)}
.lobby-toggle.is-off .toggle-pill{background:linear-gradient(180deg,#5a5249,#2f2c2c)}
.lobby-toggle.is-off .toggle-pill::after{left:3px;right:auto}
.lobby-toggle.is-off .toggle-pill i{left:auto;right:10px;color:#ddd;text-shadow:0 1px 0 #000}
.lobby-copyright{
  position:absolute;
  left:3.2%;
  bottom:3.0%;
  z-index:8;
  transform:none;
  margin:0;
  color:rgba(255,255,255,.58);
  font-size:clamp(10px,.9vw,15px);
  font-weight:800;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
  white-space:nowrap;
}
.lobby-achievement-modal{
  position:absolute;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:4%;
  background:rgba(0,0,0,.54);
  backdrop-filter:blur(4px);
}
.lobby-achievement-modal.hidden{display:none!important}
.achievement-card{
  position:relative;
  width:min(560px,88%);
  max-height:82%;
  overflow:auto;
  padding:28px;
  border-radius:22px;
  border:3px solid rgba(219,168,77,.62);
  background:linear-gradient(180deg,rgba(37,28,24,.97),rgba(12,10,14,.97));
  box-shadow:0 28px 80px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,255,255,.08);
  color:#fff1d2;
}
.achievement-card .eyebrow{margin:0 0 6px;color:#ffd069;font-size:12px;font-weight:1000;letter-spacing:.16em}
.achievement-card h2{margin:0 0 18px;font-size:clamp(26px,3vw,42px)}
.achievement-close{
  position:absolute;
  right:16px;
  top:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:26px;
  font-weight:900;
  cursor:pointer;
}
.achievement-list{display:grid;gap:10px}
.achievement-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:center;
  padding:13px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}
.achievement-item b{display:block;font-size:16px}.achievement-item small{display:block;margin-top:3px;color:rgba(255,241,210,.74);font-weight:800}
.achievement-item .mark{font-size:24px}.achievement-item.locked{filter:grayscale(.7);opacity:.62}
@media (max-width:900px),(max-height:560px){
  .menu-screen.lobby-title-screen{min-height:360px}
  .lobby-title-core{top:24%;width:38%;min-width:210px}
  .lobby-menu-stack{top:65%;width:46%;min-width:260px;gap:10px}
  .lobby-start,.lobby-achievement-btn{height:clamp(48px,8vh,76px);font-size:clamp(20px,3.3vw,34px)}
  .lobby-settings{right:2.5%;bottom:5.5%;width:27.5%;min-width:205px;padding:10px}
  .lobby-settings h2{font-size:14px;margin-bottom:6px}
  .lobby-toggle{min-height:34px;margin-top:6px;font-size:12px;gap:7px}
  .toggle-pill{width:52px;height:26px}.toggle-pill::after{width:18px;height:18px}.toggle-pill i{font-size:9px;left:8px}.lobby-toggle.is-off .toggle-pill i{right:7px}
  .lobby-copyright{bottom:2%;font-size:10px}
}
@media (max-width:640px){
  .lobby-stage{width:100vw;height:100vh;aspect-ratio:auto}
  .lobby-bg{background-position:center}
  .lobby-title-core{top:23%;width:72%;min-width:0}
  .lobby-menu-stack{top:56%;width:78%;min-width:0}
  .lobby-settings{left:50%;right:auto;bottom:8.5%;width:78%;min-width:0;transform:translateX(-50%)}
  .lobby-copyright{left:50%;bottom:2%;transform:translateX(-50%);max-width:90%;white-space:normal;text-align:center;line-height:1.25}
}