body{color:var(--ink)}

/* 뷰포트 안 21:9 고정 플레이 스테이지 (레터박스) */
.play-stage{
  --play-max-w:1680px;
  --play-max-h:720px;
  position:relative;
  flex-shrink:0;
  width:min(100vw,calc(100vh * 21 / 9),var(--play-max-w));
  height:min(100vh,calc(100vw * 9 / 21),var(--play-max-h));
  width:min(100vw,calc(100dvh * 21 / 9),var(--play-max-w));
  height:min(100dvh,calc(100vw * 9 / 21),var(--play-max-h));
  overflow:hidden;
  container-type:size;
  container-name:play;
  box-shadow:0 0 0 1px rgba(0,0,0,.28),0 16px 48px rgba(0,0,0,.4);
}
.app-shell{
  position:absolute;inset:0;
  width:auto;height:auto;max-width:none;margin:0;
  overflow:hidden;
  background:#8fd47a;
}
/* 헤더 / 본문 분리 — 서로 절대배치로 겹치지 않음 */
.screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
}
.screen-body{
  flex:1 1 auto;min-height:0;min-width:0;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}

.top-bar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:var(--gap-3);
  padding:8px var(--gap-4);min-height:64px;z-index:5;
  background:linear-gradient(180deg,#9a6e40 0%,#7a532c 55%,#654220 100%);
  color:var(--cream);border-bottom:3px solid #4a3218;
  box-shadow:0 4px 0 rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.18);
}
.screen-title{font-size:var(--fs-xl)}
.game-title{font-size:var(--fs-lg);margin-right:auto;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.game-title-logo{
  margin-right:auto;
  height:clamp(42px, 8.25cqh, 60px);
  width:auto;max-width:min(63%, 390px);
  object-fit:contain;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.22));
}
.loading-logo{
  width:min(78%, 520px);
  height:auto;
  max-height:160px;
  object-fit:contain;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.28));
}
.top-bar .screen-title{margin-right:auto}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.22);border:2px solid rgba(255,248,235,.28);
  border-radius:999px;padding:4px 12px;font-size:var(--fs-sm);white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.pill b{color:#ffe27a;font-family:var(--font-display);font-size:var(--fs-lg);line-height:1}
.progress-pill{font-size:var(--fs-sm);opacity:.95}
.seed-pill .seed-icon,.seed-icon{width:18px;height:18px;flex-shrink:0;display:block}

/* ===== 캐주얼 버튼 공통 ===== */
.icon-btn{
  min-width:44px;min-height:44px;border-radius:14px;
  background:linear-gradient(180deg,#d4a86a 0%,#b88848 48%,#9a6e3a 100%);
  color:var(--cream);font-size:var(--fs-lg);
  border:2px solid #7a5528;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.15),
    0 4px 0 #5c3e1c;
  transition:transform .1s,box-shadow .1s,filter .15s;
}
.icon-btn:hover{filter:brightness(1.06)}
.icon-btn:active{
  transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.2),0 1px 0 #5c3e1c;
}
.back-btn{
  background:linear-gradient(180deg,var(--green-hi) 0%,var(--green-mid) 45%,var(--green) 100%);
  border-color:var(--green-dark);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.12),0 4px 0 var(--green-dark);
}
.back-btn:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 var(--green-dark)}

.text-btn{
  position:relative;overflow:visible;
  min-height:40px;padding:9px 16px;border-radius:14px;
  background:linear-gradient(180deg,#fffef8 0%,#ffe9c4 55%,#f5d8a0 100%);
  color:var(--ink);font-size:var(--fs-md);
  border:3px solid var(--brown);
  white-space:nowrap;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(120,80,30,.12),
    0 4px 0 rgba(90,55,25,.28);
  transition:transform .1s,box-shadow .1s,filter .15s;
}
.text-btn::after{
  content:"";position:absolute;left:10%;right:10%;top:3px;height:36%;
  border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);pointer-events:none;
}
.text-btn:hover{filter:brightness(1.04)}
.text-btn:active{
  transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 1px 0 rgba(90,55,25,.28);
}
.text-btn.danger{
  background:linear-gradient(180deg,var(--danger-hi) 0%,var(--danger) 50%,var(--danger-dark) 100%);
  color:#fff;border-color:var(--danger-dark);
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.12),0 4px 0 #8a2a20;
}

.primary-btn{
  position:relative;overflow:visible;
  min-height:48px;padding:11px 26px;border-radius:18px;
  background:linear-gradient(180deg,var(--green-hi) 0%,var(--green-mid) 42%,var(--green) 78%,var(--green-dark) 100%);
  color:#fff;font-size:var(--fs-xl);
  border:3px solid var(--green-dark);
  text-shadow:0 2px 0 rgba(0,0,0,.18);
  white-space:nowrap;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.45),
    inset 0 -3px 0 rgba(0,0,0,.12),
    0 6px 0 var(--green-dark),
    0 10px 18px rgba(40,90,30,.22);
  transition:transform .1s,box-shadow .1s,filter .15s;
}
.primary-btn::after{
  content:"";position:absolute;left:12%;right:12%;top:4px;height:40%;
  border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);pointer-events:none;
}
.primary-btn:hover{filter:brightness(1.05)}
.primary-btn:active{
  transform:translateY(4px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 2px 0 var(--green-dark),0 4px 10px rgba(40,90,30,.18);
}
.primary-btn:disabled{filter:grayscale(.75);opacity:.55;box-shadow:0 3px 0 #777}

.dialog{
  background:linear-gradient(180deg,var(--cream-soft),var(--cream));
  border:4px solid var(--brown);border-radius:var(--radius-lg);
  padding:var(--gap-6);display:flex;flex-direction:column;gap:var(--gap-3);
  align-items:center;max-width:440px;margin:auto;
  box-shadow:var(--shadow-soft),0 8px 0 rgba(70,48,20,.18);
}

/* 로딩 */
#screen-loading{
  background:
    url("../assets/ui/lobby_bg.png") center/cover no-repeat,
    linear-gradient(#2f5a2c,#15301a);
  color:var(--cream);align-items:center;justify-content:center;
}
#screen-loading::before{
  content:"";position:absolute;inset:0;background:rgba(12,28,14,.55);pointer-events:none;
}
.loading-box{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;gap:var(--gap-3);align-items:center}
.loading-box p{font-size:var(--fs-md);opacity:.92}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(8deg)}}
.loading-bar{width:260px;height:16px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden;border:2px solid rgba(255,255,255,.28)}
.loading-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe27a,#6ed67a);transition:width .2s;border-radius:999px}

#screen-settings{
  background:
    linear-gradient(180deg,rgba(255,255,255,.2),rgba(40,80,30,.1)),
    url("../assets/ui/lobby_bg.png") center/cover no-repeat;
}
.settings-body{
  display:flex;flex-direction:column;gap:var(--gap-4);
  padding:var(--gap-6);max-width:480px;width:100%;margin:0 auto;
  overflow-y:auto;align-items:stretch;box-sizing:border-box;
}
.setting-row{
  display:flex;justify-content:space-between;align-items:center;gap:var(--gap-3);
  background:linear-gradient(180deg,var(--cream-soft),var(--cream));
  border-radius:var(--radius-lg);padding:16px 18px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 5px 0 rgba(90,55,25,.22);
  border:3px solid var(--brown);
}
.setting-label{
  font-family:var(--font-display);font-size:var(--fs-lg);color:var(--ink);
  flex-shrink:0;
}

/* 캐주얼 토글 스위치 */
.toggle-switch{
  position:relative;overflow:hidden;
  width:108px;height:44px;border-radius:999px;flex-shrink:0;
  border:3px solid var(--green-dark);
  background:linear-gradient(180deg,var(--green-hi) 0%,var(--green-mid) 45%,var(--green) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.1),0 4px 0 var(--green-dark);
  transition:background .18s,border-color .18s,box-shadow .18s,filter .15s;
}
.toggle-switch::after{
  content:"";position:absolute;left:12%;right:12%;top:3px;height:36%;
  border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);pointer-events:none;
}
.toggle-switch .toggle-knob{
  position:absolute;top:4px;left:56px;z-index:2;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(180deg,#fffef8,#ffe9c4);
  border:2px solid var(--brown);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 2px 4px rgba(0,0,0,.18);
  transition:left .18s cubic-bezier(.34,1.4,.64,1);
}
.toggle-switch .toggle-text{
  position:absolute;top:0;bottom:0;z-index:1;
  display:flex;align-items:center;
  font-family:var(--font-display);font-size:var(--fs-sm);
  color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.2);pointer-events:none;
}
.toggle-switch .toggle-text.on{left:12px}
.toggle-switch .toggle-text.off{right:12px;opacity:0}
.toggle-switch[aria-pressed="false"]{
  border-color:#7a6348;
  background:linear-gradient(180deg,#d8c8b0 0%,#b8a488 55%,#9a8468 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.1),0 4px 0 #6b5538;
}
.toggle-switch[aria-pressed="false"] .toggle-knob{left:6px}
.toggle-switch[aria-pressed="false"] .toggle-text.on{opacity:0}
.toggle-switch[aria-pressed="false"] .toggle-text.off{opacity:1;color:var(--cream)}
.toggle-switch:hover{filter:brightness(1.04)}
.toggle-switch:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 var(--green-dark)}
.toggle-switch[aria-pressed="false"]:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 1px 0 #6b5538}

/* 배속 선택 버튼 (드롭다운 대체) */
.speed-picks{display:flex;gap:8px;flex-shrink:0}
.speed-pick{
  position:relative;overflow:hidden;
  min-width:76px;min-height:44px;padding:0 14px;border-radius:14px;
  font-family:var(--font-display);font-size:var(--fs-md);color:var(--ink);
  background:linear-gradient(180deg,#fffef8 0%,#ffe9c4 55%,#f0d8a8 100%);
  border:3px solid var(--brown-light);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 rgba(90,55,25,.2);
  transition:transform .1s,box-shadow .1s,filter .15s,border-color .15s,color .15s;
}
.speed-pick::after{
  content:"";position:absolute;left:12%;right:12%;top:3px;height:34%;
  border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);pointer-events:none;
}
.speed-pick:hover{filter:brightness(1.04)}
.speed-pick:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 1px 0 rgba(90,55,25,.2)}
.speed-pick.active{
  color:#fff;border-color:var(--orange-dark);
  background:linear-gradient(180deg,var(--orange-hi) 0%,var(--orange) 50%,var(--orange-dark) 100%);
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.1),0 4px 0 #b85e10;
}
.speed-pick.active:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 #b85e10}

.setting-row-stack{
  flex-direction:column;align-items:stretch;gap:10px;
}
.setting-row-top{
  display:flex;justify-content:space-between;align-items:center;gap:var(--gap-2);
}
.vol-value{
  font-family:var(--font-display);font-size:var(--fs-lg);color:var(--orange-dark);min-width:2.2em;text-align:right;
}
.vol-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:14px;border-radius:999px;
  background:linear-gradient(180deg,#efe0c4,#d8c4a0);
  border:2px solid var(--brown);
  box-shadow:inset 0 2px 4px rgba(90,55,25,.18);
  outline:none;cursor:pointer;
}
.vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 55%,var(--orange-dark));
  border:3px solid #a85a12;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 3px 0 #b85e10;
  cursor:pointer;
}
.vol-slider::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange));
  border:3px solid #a85a12;
  box-shadow:0 3px 0 #b85e10;
  cursor:pointer;
}
.vol-slider::-moz-range-track{
  height:14px;border-radius:999px;background:#d8c4a0;border:2px solid var(--brown);
}

#settingResetSave{align-self:stretch;min-height:52px;font-size:var(--fs-lg)}

.rotate-hint{
  display:none;position:fixed;inset:0;z-index:200;
  align-items:center;justify-content:center;
  padding:24px;
  background:rgba(12,22,14,.88);
  color:#fff;
  font-family:var(--font-display);
  text-align:center;
}
.rotate-hint-card{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:28px 32px;border-radius:20px;
  background:linear-gradient(180deg,#3a5a34,#1e3420);
  border:3px solid rgba(255,248,235,.22);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.rotate-hint-icon{
  font-size:42px;line-height:1;
  animation:rotate-nudge 1.6s ease-in-out infinite;
}
.rotate-hint p{font-size:clamp(18px,4.5vw,24px);line-height:1.35;margin:0}
@keyframes rotate-nudge{
  0%,100%{transform:rotate(-12deg)}
  50%{transform:rotate(18deg)}
}