/* 사다리에 필요한 기본 UI만 분리. 나머지 게임 CSS는 로드하지 않는다. */

:root {
  --bg: #fff8f4;
  --bg-2: #f7f1ff;
  --card: #fffdfc;
  --paper: #fffefa;
  --text: #443c52;
  --muted: #8d8398;
  --line: #eadff0;
  --pink: #ff6f91;
  --pink-dark: #e84f78;
  --pink-soft: #ffe8ef;
  --lavender: #9f7eff;
  --lavender-dark: #765bd4;
  --lavender-soft: #eee8ff;
  --peach: #ffad73;
  --peach-soft: #fff0e5;
  --yellow: #ffd86b;
  --yellow-soft: #fff8d8;
  --danger: #e85d72;
  --shadow: 0 18px 48px rgba(91, 70, 111, .13);
  --soft-shadow: 0 9px 24px rgba(91, 70, 111, .09);
  font-family: Pretendard, "Arial Rounded MT Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 216, 107, .24), transparent 24%),
    radial-gradient(circle at 86% 12%, rgba(159, 126, 255, .14), transparent 28%),
    radial-gradient(circle at 83% 88%, rgba(255, 111, 145, .12), transparent 25%),
    linear-gradient(145deg, #fffaf6 0%, #f8f3ff 52%, #fff6f8 100%);
}
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(1px);
}
body::before { width: 220px; height: 220px; left: -90px; bottom: -70px; background: rgba(255, 173, 115, .12); }
body::after { width: 250px; height: 250px; right: -100px; top: -80px; background: rgba(159, 126, 255, .10); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
.hidden { display: none !important; }

.app-shell {
  position: relative;
  width: min(97vw, calc(97vh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 1.5vh auto;
  padding: clamp(18px, 2.3vw, 34px);
  overflow: auto;
  background: rgba(255, 253, 252, .92);
  border: 2px solid rgba(234, 223, 240, .9);
  border-radius: 32px;
  box-shadow: 0 28px 90px rgba(91, 70, 111, .16);
}
.app-shell::before,
.app-shell::after {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  font-size: clamp(23px, 2.645vw, 38.08px);
  opacity: .55;
}
.app-shell::before { content: "✦"; left: 2.4%; top: 2.2%; color: var(--peach); transform: rotate(-14deg); }
.app-shell::after { content: "✧"; right: 2.6%; bottom: 2.4%; color: var(--lavender); transform: rotate(12deg); }
.app-shell > * { position: relative; z-index: 1; }
body[data-view="game"] .app-shell,
body[data-view="result"] .app-shell {
  overflow: hidden;
  padding: 0;
  background: #fffafc;
}

.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.hero-copy { max-width: 72%; }
.hero-side { display: flex; align-items: center; gap: 14px; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hero-mascot {
  position: relative;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 28px 28px 32px 32px;
  background: linear-gradient(145deg, var(--yellow-soft), #fff3c0);
  border: 2px solid #ffe49b;
  box-shadow: var(--soft-shadow);
  transform: rotate(3deg);
}
.mascot-face { font-size: 51.52px; line-height: 1; filter: saturate(.9); }
.mascot-spark { position: absolute; right: -7px; top: -12px; color: var(--pink); font-size: 29.12px; transform: rotate(10deg); }
.eyebrow, .step-tag { color: var(--pink-dark); font-size: 13px; font-weight: 950; letter-spacing: .14em; }
h1 { margin: 5px 0 7px; font-size: clamp(33.6px, 5.06vw, 60.48px); line-height: 1; letter-spacing: -.055em; color: #453b56; text-shadow: 0 3px 0 #fff; }
h2 { margin: 5px 0 0; font-size: 26.88px; letter-spacing: -.04em; }
h3 { margin: 0; font-size: 19px; }
.sub, .wizard-head p, .setting-block p, .result-titlebar p { margin: 7px 0 0; color: var(--muted); line-height: 1.55; }

.stepper { display: flex; align-items: center; margin: 0 0 18px; padding: 0 5px; }
.step-dot { width: 90px; border: 0; background: transparent; color: #aaa0b5; display: grid; justify-items: center; gap: 5px; padding: 0; }
.step-dot b {
  width: 34px; height: 34px; border-radius: 13px; display: grid; place-items: center;
  background: #f1ebf4; border: 1px solid #e8deed; font-size: 14px;
  transition: transform .18s ease, background .18s ease;
}
.step-dot span { font-size: 13px; font-weight: 900; white-space: nowrap; }
.step-dot.active { color: var(--pink-dark); }
.step-dot.active b { background: var(--pink); border-color: var(--pink); color: white; box-shadow: 0 6px 16px rgba(255,111,145,.24); transform: translateY(-2px) rotate(-2deg); }
.step-dot.done b { background: var(--lavender-soft); border-color: #d9ccff; color: var(--lavender-dark); }
.step-line { height: 3px; flex: 1; min-width: 10px; border-radius: 999px; background: #eee6f1; margin-bottom: 18px; }

.card {
  background: rgba(255,255,255,.96);
  border: 2px solid #f0e5f2;
  border-radius: 28px;
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow: var(--shadow);
}
.wizard-card { min-height: 400px; }
.wizard-head { max-width: 720px; }

.count-stepper { width: min(330px,100%); margin: 34px auto 0; display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; gap: 13px; }
.count-control {
  height: 64px; border: 2px solid #eadff0; border-radius: 23px; background: #fff;
  color: #635873; font-size: 33.6px; font-weight: 950; transition: .16s;
  box-shadow: 0 7px 0 #f1e8f4;
}
.count-control:hover:not(:disabled) { transform: translateY(-2px); border-color: #ffc2d1; background: var(--pink-soft); color: var(--pink-dark); }
.count-control:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 #f1e8f4; }
.count-value {
  height: 80px; display: grid; place-items: center; border-radius: 26px;
  background: linear-gradient(145deg, #fff1f5, #f3edff); border: 3px solid #ffc1d1;
  color: var(--pink-dark); font-size: 44.8px; font-weight: 950; box-shadow: inset 0 0 0 5px rgba(255,255,255,.58), 0 10px 24px rgba(255,111,145,.12);
}
.count-help { margin: 13px 0 0; text-align: center; color: var(--muted); font-size: 14px; }

.last-settings-badge {
  width: fit-content; max-width: 100%; margin: 14px auto 0; padding: 9px 14px; border-radius: 999px;
  border: 2px solid #eadff0; background: linear-gradient(145deg, #fff8fb, #f5f0ff);
  color: #756a80; font-size: 14px; font-weight: 900; text-align: center;
}

.mode-switch-panel {
  margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px; border: 2px solid #eadff0; border-radius: 28px;
  background: linear-gradient(145deg, #fffdfb, #f9f5ff); box-shadow: 0 8px 0 #f1eaf4;
}
.mode-current { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mode-current .mode-icon { margin: 0; flex: 0 0 auto; }
.mode-current strong { display: block; margin-top: 3px; font-size: 24.64px; color: #51465f; }
.mode-current p { margin: 5px 0 0; color: var(--muted); font-size: 16px; }
.mode-kicker { color: var(--pink-dark); font-size: 13px; font-weight: 950; letter-spacing: .08em; }
.mode-toggle-btn {
  flex: 0 0 auto; border: 2px solid #dcd0ef; border-radius: 17px; padding: 13px 17px;
  background: var(--lavender-soft); color: var(--lavender-dark); font-weight: 950; box-shadow: 0 5px 0 #ddd3f5;
  transition: .15s;
}
.mode-toggle-btn:hover { transform: translateY(-2px); background: #e7dfff; }
.mode-toggle-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #ddd3f5; }
.mode-toggle-btn.custom-active { background: var(--yellow-soft); color: #886b19; border-color: #f1dda0; box-shadow: 0 5px 0 #eadbaf; }

.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.mode-card {
  min-height: 178px; border: 2px solid #eadff0; border-radius: 27px; background: #fff;
  padding: 25px; display: grid; justify-items: start; align-content: center; text-align: left;
  transition: .18s; box-shadow: 0 7px 0 #f4edf6;
}
.mode-card:hover { transform: translateY(-3px) rotate(-.3deg); box-shadow: 0 12px 26px rgba(91,70,111,.10); }
.mode-card.active { border-color: #ffb6c8; background: linear-gradient(145deg, #fff4f7, #f8f4ff); box-shadow: 0 8px 0 #ffe2e9, 0 16px 30px rgba(255,111,145,.10); }
.mode-icon {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 20px;
  font-size: 35.84px; margin-bottom: 13px; background: var(--yellow-soft); border: 1px solid #ffe8a7;
}
.mode-card:nth-child(2) .mode-icon { background: var(--lavender-soft); border-color: #ded3ff; }
.mode-title { font-weight: 950; font-size: 22px; margin-bottom: 6px; }
.mode-desc { color: var(--muted); line-height: 1.5; }

.setting-block {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 25px; padding: 19px;
  border: 2px solid #f0e6f2; border-radius: 22px; background: linear-gradient(145deg, #fffdfa, #fcf8ff);
}
.segmented { display: flex; padding: 5px; border-radius: 17px; background: #f1eaf4; flex: 0 0 auto; }
.segment { min-width: 72px; border: 0; background: transparent; border-radius: 13px; padding: 9px 13px; font-weight: 900; color: var(--muted); }
.segment.active { background: white; color: var(--pink-dark); box-shadow: 0 4px 12px rgba(91,70,111,.10); }
.field-block { display: grid; gap: 8px; margin-top: 18px; }
.field-block > span { font-size: 16px; font-weight: 900; color: #62576d; }
input { width: 100%; border: 2px solid #eadff0; border-radius: 16px; padding: 13px 14px; outline: none; transition: .15s; background: #fffdfd; color: var(--text); }
input:focus { border-color: #ffb2c5; box-shadow: 0 0 0 4px rgba(255,111,145,.10); }
.result-preview-wrap { margin-top: 23px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 21px 0 11px; }
.result-list, .result-input-list { display: grid; gap: 9px; }
.result-row {
  display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; min-height: 50px;
  border: 2px solid #f0e6f2; background: #fffdfd; border-radius: 17px; padding: 6px 12px 6px 7px;
}
.result-row .line-num, .result-input-row .line-num {
  width: 35px; height: 35px; display: grid; place-items: center; border-radius: 13px;
  background: var(--lavender-soft); color: var(--lavender-dark); font-size: 13px; font-weight: 950;
}
.result-row .result-text { font-weight: 900; }
.result-row .result-text.chicken { color: #cf762b; }
.result-row .result-text.penalty { color: var(--danger); }
.result-input-row { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 9px; }

.wizard-actions { display: flex; gap: 10px; margin-top: 28px; }
.wizard-actions.end { justify-content: flex-end; }
.wizard-actions.split { justify-content: space-between; }
.primary-btn, .secondary-btn, .ghost-btn, .tiny-btn, .icon-btn { border: 0; font-weight: 900; transition: .15s; }
.primary-btn {
  min-width: 145px; padding: 13px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--pink), #ff8ca7); color: white;
  box-shadow: 0 7px 0 #d94f71, 0 11px 20px rgba(255,111,145,.18);
}
.primary-btn:hover { transform: translateY(-2px); filter: saturate(1.05); }
.primary-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #d94f71; }
.secondary-btn { padding: 12px 15px; border-radius: 15px; background: #f2ecf5; color: #62576c; box-shadow: 0 5px 0 #e4dae9; }
.secondary-btn:hover { background: #eee5f2; transform: translateY(-1px); }
.ghost-btn { padding: 10px 13px; border-radius: 14px; background: rgba(255,255,255,.75); color: #756a80; border: 2px solid #eadff0; }
.ghost-btn:hover { background: #fff4f7; border-color: #ffc6d4; color: var(--pink-dark); }
.tiny-btn { padding: 8px 11px; border-radius: 12px; background: var(--lavender-soft); color: var(--lavender-dark); font-size: 14px; }
.tiny-btn:hover { transform: translateY(-1px); background: #e8e0ff; }
.icon-btn { width: 36px; height: 36px; border-radius: 13px; background: #f3edf5; font-size: 25.76px; line-height: 1; color: #796e82; }

/* 16:9 game layout */
.game-screen { width: 100%; height: 100%; position: relative; background: #fff9fb; }
.game-titlebar {
  height: 11%; min-height: 64px; padding: 0 2.6%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 2px solid #f0e4ef; background: rgba(255,253,253,.97);
}
.game-title-group { display: flex; align-items: center; gap: 13px; }
.title-mascot {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px;
  background: var(--yellow-soft); border: 1px solid #ffe3a0; font-size: 32.48px; transform: rotate(-3deg);
}
.game-title-group h2 { margin: 0; font-size: clamp(31.36px, 3.105vw, 44.8px); }
.game-status { padding: 8px 12px; border-radius: 999px; background: var(--lavender-soft); color: var(--lavender-dark); font-size: 16px; font-weight: 950; letter-spacing: .11em; }
.title-actions { display: flex; gap: 7px; }
.title-btn { border: 2px solid #eee3ef; border-radius: 14px; padding: 10px 14px; background: #fff; color: #756a80; font-size: 18px; font-weight: 900; }
.title-btn:hover { background: var(--pink-soft); border-color: #ffc4d2; color: var(--pink-dark); }
.sound-toggle { min-width: 124px; }
.sound-toggle.muted { background: #f4eef6; color: #9a8da3; border-color: #e5dbe8; }
.sound-toggle:active { transform: translateY(1px); }

.playfield {
  position: relative; width: 100%; height: 89%; overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(255,216,107,.18), transparent 18%),
    radial-gradient(circle at 92% 82%, rgba(159,126,255,.13), transparent 22%),
    linear-gradient(180deg, #fffafb 0%, #f8f2ff 100%);
}
.playfield::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(255,111,145,.16) 1.1px, transparent 1.1px);
  background-size: 24px 24px;
}

.ladder-paper {
  position: absolute; left: 50%; top: 50%; width: calc(100% - 18px); height: calc(100% - 14px);
  transform: translate(-50%, -50%);
  border: 2px solid #eadcf0; border-radius: 24px;
  background:
    repeating-linear-gradient(to bottom, rgba(159,126,255,.065) 0, rgba(159,126,255,.065) 1px, transparent 1px, transparent 28px),
    linear-gradient(180deg, #fffefa 0%, #fffafd 100%);
  box-shadow: 0 16px 34px rgba(91,70,111,.14);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(8px, .8vw, 12px) clamp(11px, 1.1vw, 17px);
  z-index: 2;
}
.paper-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; }
.blind-title { display: flex; align-items: center; gap: 10px; min-width: 0; color: #8b8095; }
.blind-title strong { color: #5f5469; font-size: 19px; letter-spacing: .10em; }
.blind-title > span:last-child { font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blind-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--peach); box-shadow: 0 0 0 5px rgba(255,173,115,.14); flex: 0 0 auto; }
.ladder-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex: 0 0 auto; }
.ladder-toggle-btn {
  border: 0; border-radius: 15px; padding: 11px 16px; background: #554a65; color: #fff; font-size: 19px; font-weight: 900;
  box-shadow: 0 5px 0 #3d3548;
}
.ladder-toggle-btn:hover { background: #493f58; transform: translateY(-1px); }
.ladder-toggle-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #3d3548; }
.ladder-speed-btn { min-width: 142px; }
.ladder-speed-btn[data-speed="spicy"] { background: linear-gradient(180deg,#ff7d6e,#f34e56)!important; color:#fff!important; border-color:#ff8e7f!important; box-shadow:0 5px 0 #c93342,0 10px 20px rgba(224,57,70,.18)!important; }
.ladder-speed-btn[data-speed="normal"] { background: linear-gradient(180deg,#7fd8ff,#4ca6ee)!important; color:#123f78!important; border-color:#91ddff!important; box-shadow:0 5px 0 #3385c8,0 10px 20px rgba(50,133,200,.17)!important; }
.ladder-speed-btn[data-speed="sour"] { background: linear-gradient(180deg,#d9f66d,#9edc45)!important; color:#365f16!important; border-color:#d9f66d!important; box-shadow:0 5px 0 #71b22c,0 10px 20px rgba(113,178,44,.17)!important; }
.ladder-speed-btn:disabled { cursor:not-allowed; filter:saturate(.65); opacity:.7; transform:none!important; }

.board-wrap { min-height: 0; overflow-x: auto; overflow-y: hidden; }
.board-inner { height: 100%; min-width: 620px; display: grid; grid-template-rows: 100px 1fr 60px; position: relative; }
.label-row { position: relative; height: 60px; }
.top-labels { height: 100px; }
.top-label-stack {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: var(--name-width, 88px);
  z-index: 2;
}
.player-name-input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 5px 6px;
  border: 2px solid #e8dfea;
  border-radius: 11px;
  outline: none;
  background: rgba(255,255,255,.96);
  color: #554a65;
  text-align: center;
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 3px 0 rgba(99,82,116,.06);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.player-name-input::placeholder { color: #b4a9b9; font-weight: 750; }
.player-name-input:focus {
  border-color: #b7a8c4;
  background: #fff;
  box-shadow: 0 3px 0 rgba(99,82,116,.08), 0 0 0 4px rgba(159,126,255,.10);
}
.top-label-stack .label-chip {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  min-width: 52px;
}
.top-label-stack .label-chip:hover,
.top-label-stack .label-chip.active { transform: translateY(-2px); }
.top-label-stack .label-chip.played:hover,
.top-label-stack .label-chip.played.active { transform: translateY(-2px); }
#ladderCanvas { display: block; width: 100%; height: 100%; min-height: 150px; }
.label-chip {
  position: absolute; top: 50%; transform: translate(-50%, -50%); min-width: 52px; max-width: 150px; padding: 10px 13px;
  border: 2px solid #e4dce9;
  border-radius: 17px; text-align: center; font-size: 19px; font-weight: 950; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: .16s; box-shadow: 0 4px 0 rgba(99,82,116,.08);
  color: #51475f; background: #fffafd;
}
.bottom-labels .label-chip { color: #665a6e; background: #fffdfb; }
.label-chip:hover, .label-chip.active {
  border-color: #b9acc5 !important; background: #f5eff8 !important;
  color: #443c52 !important; transform: translate(-50%, calc(-50% - 2px));
}
.label-chip.played {
  border-color: var(--played-color, #b9acc5) !important;
  background: var(--played-bg, #f1ebf5) !important;
  color: var(--played-color, #443c52) !important;
  box-shadow: 0 5px 0 var(--played-shadow, rgba(99,82,116,.11));
}
.label-chip.played:hover,
.label-chip.played.active {
  border-color: var(--played-color, #b9acc5) !important;
  background: var(--played-bg, #f1ebf5) !important;
  color: var(--played-color, #443c52) !important;
}
.label-chip.played::after{content:none!important;}

.paper-footer { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 2px dashed #eee2ef; padding-top: 7px; }
.result-toast { min-width: 0; color: #756b7e; font-size: 19px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-toast.show { color: var(--pink-dark); }
.result-toast.playing { color: #c77239; }
.paper-actions { display: flex; gap: 8px; flex-wrap: nowrap; }
.paper-btn { border: 0; background: transparent; color: #74697e; padding: 10px 12px; border-radius: 12px; font-size: 17px; font-weight: 900; white-space: nowrap; }
.paper-btn:hover { background: #f5edf6; color: #5a4f65; }
.paper-btn.strong { color: #fff; background: var(--pink); box-shadow: 0 4px 0 #d94f71; }
.paper-btn.strong:hover { background: var(--pink-dark); }

/* Separate result screen */
.result-screen { width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr; background: linear-gradient(145deg, #fff9fb, #f7f2ff); }
.result-titlebar { padding: 3.2% 4%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 2px solid #efe4ef; background: rgba(255,255,255,.95); }
.result-titlebar h2 { margin-top: 4px; font-size: clamp(28px, 3.68vw, 48.16px); }
.result-actions { display: flex; gap: 8px; }
.result-board { min-height: 0; overflow: auto; padding: 3% 4%; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 13px; }
.summary-item {
  position: relative; overflow: hidden; border: 2px solid #e9e0ed; border-radius: 22px;
  background: linear-gradient(145deg, #fffafd, #fff); padding: 17px;
  box-shadow: 0 8px 0 #f2ebf4, 0 12px 24px rgba(91,70,111,.07);
}
.summary-item::after { content: "✦"; position: absolute; right: 12px; top: 9px; color: #ffd06a; opacity: .75; }
.summary-item .who { color: var(--muted); font-size: 13px; font-weight: 900; margin-bottom: 7px; }
.summary-item .what { font-size: 22px; font-weight: 950; color: #554a65; }
.summary-item .line { margin-top: 6px; font-size: 12px; color: #aaa0b0; }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: rgba(65,52,76,.42); backdrop-filter: blur(6px); }
.modal-card { width: min(480px, 96vw); max-height: 86vh; overflow: auto; border: 2px solid #eee2ef; border-radius: 27px; background: #fffdfd; padding: 24px; box-shadow: 0 28px 90px rgba(65,52,76,.26); }
.wide-modal { width: min(720px, 96vw); }
.modal-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.modal-note { margin: 14px 0 0; padding: 12px 13px; border-radius: 15px; background: linear-gradient(145deg, #fff2f6, #f3efff); color: #776b80; font-size: 13px; line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.saved-list { display: grid; gap: 10px; margin-top: 16px; }
.saved-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 2px solid #eee3ef; border-radius: 17px; padding: 13px; background: #fff; }
.saved-name { font-weight: 950; }
.saved-meta { margin-top: 4px; color: var(--muted); font-size: 13px; }
.saved-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.delete-btn { border: 0; border-radius: 13px; padding: 9px 11px; background: #fff0f2; color: #d34f68; font-weight: 900; }
.saved-empty { padding: 29px; text-align: center; color: var(--muted); border: 2px dashed #e7dce9; border-radius: 17px; background: #fffbfd; }

@media (max-width: 820px) {
  .app-shell { width: 100%; min-height: 100vh; height: auto; aspect-ratio: auto; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
  body[data-view="game"] .app-shell, body[data-view="result"] .app-shell { height: 100svh; aspect-ratio: auto; }
  .hero { align-items: flex-start; flex-direction: column; }
  .hero-copy { max-width: 100%; }
  .hero-side { width: 100%; justify-content: space-between; }
  .hero-mascot { width: 66px; height: 66px; border-radius: 23px; }
  .mascot-face { font-size: 43.68px; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-switch-panel { align-items: stretch; flex-direction: column; }
  .mode-toggle-btn { width: 100%; }
  .setting-block { align-items: flex-start; flex-direction: column; }
  .step-dot { width: 66px; }
  .step-dot span { display: none; }
  .ladder-paper { width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 18px; }
  .paper-footer { align-items: flex-start; flex-direction: column; }
  .paper-actions { width: 100%; overflow-x: auto; }
  #loadSettingsInGameBtn { display: none; }
  .result-titlebar { flex-direction: column; }
  .result-actions { width: 100%; flex-wrap: wrap; }
}

/* PC와 모바일 모두 문서 스크롤과 보드 내부 가로 스크롤을 사용한다. */
html:has(#ladderApp){height:auto!important;overflow-x:hidden;overflow-y:auto}
#ladderApp{--text:#273653;--muted:#64748b;--line:#dfe8f3;--pink:#3475df;--pink-dark:#245baa;--shadow:0 12px 32px #28456f0b;background:radial-gradient(ellipse at 15% 0%,#e5efff,transparent 55%),#f4f7fc!important;position:static!important;min-height:100dvh!important;height:auto!important;max-height:none!important;overflow-x:clip!important;overflow-y:visible!important;touch-action:pan-x pan-y pinch-zoom}
#ladderApp:before,#ladderApp:after,#ladderApp .app-shell:before,#ladderApp .app-shell:after{display:none!important}
#ladderApp>.app-shell{position:relative!important;inset:auto!important;width:100%!important;max-width:1440px!important;height:auto!important;min-height:100dvh!important;max-height:none!important;aspect-ratio:auto!important;transform:none!important;overflow:visible!important;margin:0 auto!important;padding:24px!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
#ladderApp .hero{max-width:960px;margin:0 auto 20px;padding:24px 28px;background:white;border:1px solid var(--line);border-radius:24px;align-items:center;box-shadow:var(--shadow)}
#ladderApp .hero-mascot{display:none}
#ladderApp .hero-copy{max-width:100%}
#ladderApp .hero-side{max-width:380px}
#ladderApp .eyebrow{font-size:11px;letter-spacing:.13em;color:#4278be}
#ladderApp h1{font-size:36px;color:var(--text);text-shadow:none}
#ladderApp h2{color:var(--text);font-size:26px}
#ladderApp .sub,#ladderApp .wizard-head p{font-size:15px;line-height:1.7}
#ladderApp button{font-family:inherit;touch-action:manipulation;transition:background .15s,border-color .15s;cursor:pointer}
#ladderApp button:focus-visible,#ladderApp input:focus-visible,#ladderApp #boardWrap:focus-visible{outline:3px solid #4b8bee;outline-offset:3px}
#ladderApp :is(.ghost-btn,.secondary-btn,.tiny-btn,.title-btn,.paper-btn,.ladder-toggle-btn,.mode-toggle-btn){min-height:44px;padding:10px 16px;font-size:14px;line-height:1.4;font-weight:750;border:1px solid #ccd9eb;border-radius:12px;color:var(--text)!important;-webkit-text-fill-color:currentColor!important;background:white!important;box-shadow:0 2px 0 #253b5d06!important;white-space:normal;transform:none}
#ladderApp :is(.primary-btn,.paper-btn.strong){min-height:46px;padding:12px 22px;font-size:15px;border:1px solid #3475df;border-radius:12px;background:#3475df!important;color:white!important;box-shadow:0 5px 14px #3475df25}
#ladderApp .hero-actions{gap:8px}
#ladderApp nav.stepper{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;max-width:820px;margin:0 auto 20px;gap:6px}
#ladderApp .step-dot{width:auto;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted)}
#ladderApp .step-dot span{display:block;font-size:13px}
#ladderApp .step-dot b{width:30px;height:30px;border:0;background:#e5ecf6;box-shadow:none;border-radius:10px;transform:none;color:#5c6e87}
#ladderApp .step-dot.active b{background:#3475df;color:white}
#ladderApp .step-dot.active{color:#245baa}
#ladderApp .step-line{height:2px;margin:0;background:#d9e4f1}
#ladderApp .wizard-card{width:100%;max-width:820px;margin:0 auto;padding:32px;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);background:white}
#ladderApp .wizard-card:before,#ladderApp .wizard-card:after{display:none}
#ladderApp .step-tag{font-size:11px;letter-spacing:.1em;background:#edf4ff;color:#3475df;padding:6px 10px;border-radius:8px}
#ladderApp .count-stepper{gap:30px;margin:30px auto 18px}
#ladderApp .count-control{width:56px;height:56px;font-size:30px;border:1px solid #ccd9eb;border-radius:16px;background:#f4f8ff;color:#3475df;box-shadow:none}
#ladderApp .count-value{font-size:64px;min-width:90px;color:var(--text);border:0;background:none;box-shadow:none}
#ladderApp .count-help,#ladderApp .last-settings-badge{font-size:13px;color:var(--muted)}
#ladderApp .wizard-actions{margin-top:28px;gap:12px}
#ladderApp .mode-switch-panel{padding:20px;gap:20px;border:1px solid var(--line);border-radius:18px;background:#f5f8fd;box-shadow:none}
#ladderApp :is(.field-block input,.result-input-list input){font-size:16px;min-height:48px;border:1px solid #ccd9eb;border-radius:10px;background:white;color:var(--text)}
#ladderApp .game-screen{position:relative;width:100%;height:auto;min-height:0;padding:0;overflow:visible;background:none}
#ladderApp .game-titlebar{position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:0 4px 18px;border:0;background:none;min-height:0;box-shadow:none}
#ladderApp .game-title-group{display:flex;align-items:center;gap:12px;min-width:0}
#ladderApp .game-title-group h2{font-size:26px}
#ladderApp .title-mascot{width:42px;height:42px;border-radius:14px;overflow:hidden;background:white}
#ladderApp .title-mascot img{width:100%;height:100%;object-fit:cover}
#ladderApp .game-status{background:#e8f1ff;color:#3267b0;font-size:11px;letter-spacing:0;border:0;padding:6px 10px;border-radius:20px}
#ladderApp .title-actions{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
#ladderApp .playfield{position:relative;width:100%;height:auto;min-height:0;overflow:visible;padding:0;background:none}
#ladderApp .ladder-paper{position:relative;inset:auto;transform:none;width:100%;height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;padding:0;margin:0;overflow:hidden;border:1px solid #dce5f2;border-radius:24px;background:white;box-shadow:var(--shadow)}
#ladderApp .paper-topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:18px 22px;gap:16px;border-bottom:1px solid #e8eef6}
#ladderApp .blind-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#ladderApp .blind-title strong{font-size:16px;letter-spacing:0;color:var(--text)}
#ladderApp #ladderSpeedHelp{flex-basis:100%;font-size:12px;line-height:1.5;color:var(--muted);white-space:normal;overflow:visible}
#ladderApp .blind-dot{width:8px;height:8px;background:#4a86e4;box-shadow:none}
#ladderApp .ladder-top-actions{display:flex;gap:8px}
#ladderApp .ladder-scroll-hint{margin:0;padding:8px 12px;font-size:13px;text-align:center;background:#edf5ff;color:#34496c}
#ladderApp .board-wrap{width:100%;height:auto;min-height:0;max-height:none;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#7892bd #e6edfa;background:linear-gradient(#fff,#fafcff)}
#ladderApp .board-inner{height:var(--ladder-board-height);min-height:0;display:grid;grid-template-rows:104px var(--ladder-canvas-height) var(--ladder-bottom-height);overflow:visible}
#ladderApp #ladderCanvas{height:var(--ladder-canvas-height);min-height:0;max-height:none;pointer-events:none}
#ladderApp .top-labels{height:104px;padding:0}
#ladderApp .bottom-labels{height:var(--ladder-bottom-height);padding:0}
#ladderApp .top-label-stack{width:var(--name-width);gap:6px}
#ladderApp .player-name-input{width:100%;max-width:none;height:44px;min-height:44px;font-size:16px;padding:6px 4px;border:1px solid #cfdbeb;border-radius:10px;box-shadow:none;color:var(--text)}
#ladderApp #topLabels .label-chip,#ladderApp #bottomLabels .label-chip{width:var(--chip-width);min-width:44px;max-width:none;min-height:44px;padding:6px 4px;border:1px solid #d0ddec;border-radius:12px;background:#f1f6ff;font-size:16px;line-height:1.3;word-break:break-all;white-space:normal;color:var(--text);box-shadow:0 3px 0 #354c7010}
#ladderApp #bottomLabels .label-chip{background:#fffaf0;border-color:#eadfc8}
#ladderApp .label-chip.active{outline:2px solid #3475df;outline-offset:2px}
/* 상단 번호는 기존 경로색 유지. 하단 당첨은 추첨 전 중립색으로 숨깁니다. */
#ladderApp #topLabels .label-chip{
  background:var(--line-color)!important;border-color:var(--line-color)!important;
  color:#1a1520!important;-webkit-text-fill-color:#1a1520!important;
}
/* 아직 결과를 확인하지 않은 아래 버튼에는 미리 계산한 경로색을 사용하지 않습니다. */
#ladderApp #bottomLabels .label-chip:not(.played):not(.active){
  background:#fffaf0!important;border-color:#eadfc8!important;
  color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;
}
/* 선택 결과가 확정된 버튼만 연결된 번호의 경로색으로 표시합니다. */
#ladderApp #bottomLabels .label-chip.played,
#ladderApp #bottomLabels .label-chip.active{
  background:var(--line-color)!important;border-color:var(--line-color)!important;
  color:#1a1520!important;-webkit-text-fill-color:#1a1520!important;
}
#ladderApp #topLabels .label-chip.active,
#ladderApp #bottomLabels .label-chip.active{outline-color:#1a1520}
#ladderApp .paper-footer{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 20px;border-top:1px solid #e3ebf6;background:#f7faff}
#ladderApp .result-toast{flex:1 1 260px;min-height:48px;padding:10px 14px;font-size:17px;line-height:1.5;word-break:break-word;white-space:normal;color:#31496d;background:#eaf2ff;border-radius:12px}
#ladderApp .paper-actions{display:flex;flex-wrap:wrap;gap:8px;width:auto}
#ladderApp .result-screen{height:auto;overflow:visible;background:none}
#ladderApp .result-titlebar,#ladderApp .result-board{padding:24px;border:1px solid var(--line);border-radius:20px;background:white}
#ladderApp .result-titlebar{gap:20px;flex-wrap:wrap}
#ladderApp .result-board{margin-top:16px}
#ladderApp .summary-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
#ladderApp .summary-item{border:1px solid var(--line);border-radius:14px;box-shadow:none;padding:18px;overflow-wrap:anywhere}
#ladderApp .summary-item:after{display:none}
#ladderApp .modal-card{border-radius:20px;max-height:85dvh}
#ladderApp .jukdol-mirror-surface{transform:scaleX(-1)!important;transform-origin:center}
#ladderApp #jukdolBgmControl .jbgm-fab,#ladderApp #jukdolAudioControl .jv-btn{display:none!important}
#ladderApp .hidden,#ladderApp [hidden]{display:none!important}
@media(max-width:820px){
 #ladderApp>.app-shell{padding:12px 8px!important}
 #ladderApp .hero{display:block;padding:20px 16px;margin-bottom:14px;border-radius:18px}
 #ladderApp h1{font-size:28px}
 #ladderApp .hero-side{max-width:none}
 #ladderApp .hero-actions{justify-content:flex-start;margin-top:16px;gap:8px}
 #ladderApp nav.stepper{grid-template-columns:1fr 10px 1fr 10px 1fr 10px 1fr;padding:0;gap:2px;margin-bottom:14px}
 #ladderApp .step-dot{flex-direction:column;gap:5px;min-height:64px}
 #ladderApp .step-dot span{font-size:12px}
 #ladderApp .wizard-card{padding:22px 16px;border-radius:18px}
 #ladderApp .wizard-head h2{font-size:22px}
 #ladderApp .result-input-list{grid-template-columns:minmax(0,1fr)}
 #ladderApp .mode-switch-panel{flex-direction:column;align-items:stretch;padding:16px}
 #ladderApp .mode-toggle-btn{width:100%}
 #ladderApp .game-status{display:none}
 #ladderApp .game-titlebar{gap:12px;padding:4px 4px 14px}
 #ladderApp .game-title-group h2{font-size:24px}
 #ladderApp .title-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #ladderApp .title-btn{padding:8px 4px;font-size:13px}
 #ladderApp .ladder-paper{border-radius:18px}
 #ladderApp .paper-topbar{padding:14px 12px;gap:12px}
 #ladderApp .ladder-top-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
 #ladderApp #ladderDensityBtn{grid-column:1/-1}
 #ladderApp .ladder-toggle-btn{min-width:0}
 #ladderApp .paper-footer{display:block;padding:12px 10px max(12px,env(safe-area-inset-bottom,0px))}
 #ladderApp .result-toast{width:100%;min-height:48px;margin-bottom:10px}
 #ladderApp .paper-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible}
 #ladderApp .paper-btn{width:100%;min-width:0;padding:10px 6px}
 #ladderApp .result-titlebar,#ladderApp .result-board{padding:16px}
 #ladderApp .summary-grid{grid-template-columns:minmax(0,1fr)}
 #ladderApp #loadSettingsInGameBtn{display:inline-block}
}
@media(min-width:1025px){#ladderApp .jukdol-mobile-only-control{display:none!important}}
@media(prefers-reduced-motion:reduce){#ladderApp *{scroll-behavior:auto!important;transition:none!important}}
/* 사다리는 확대 모드를 사용하지 않으므로 공통 확대 보조 UI를 숨긴다. */
#ladderApp #jukdolFocusExit,#ladderApp #jukdolFocusBackdrop{display:none!important}
#ladderApp #v14GameFxLayer,#ladderApp .global-tap-fx{pointer-events:none!important}

/* 확대 화면은 상단 조작과 사다리만 표시하고 브금 패널은 위에 띄운다. */
html.ladder-expanded-html,#ladderApp.ladder-expanded{overflow:hidden!important}
#ladderApp.ladder-expanded>:not(.app-shell):not(#jukdolBgmControl),#ladderApp.ladder-expanded>.app-shell>:not(#step4),#ladderApp.ladder-expanded .game-titlebar,#ladderApp.ladder-expanded #ladderPanel>.paper-topbar,#ladderApp.ladder-expanded #ladderPanel>.paper-footer,#ladderApp.ladder-expanded #ladderScrollHint{display:none!important}
#ladderApp.ladder-expanded #ladderPanel{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none;z-index:2147482000;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:#fff}
#ladderApp.ladder-expanded #boardWrap{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain}
#ladderApp #ladderExpandedToolbar{display:grid;grid-template-columns:minmax(110px,1.2fr) minmax(64px,.8fr) minmax(76px,.8fr) minmax(120px,1.3fr) minmax(70px,.8fr);flex:0 0 auto;gap:6px;padding:6px 8px;border-bottom:1px solid #dbe5f1;background:#f5f9ff;position:relative;z-index:2}
#ladderApp #ladderExpandedMirrorSlot{display:contents}
#ladderApp #ladderExpandedToolbar button{display:flex!important;align-items:center;justify-content:center;min-height:44px;min-width:0;width:100%;padding:6px 8px;font-size:14px;line-height:1.35;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;text-align:center;border:1px solid #c8d9ed;border-radius:10px;background:#fff;color:#29486e;box-shadow:none}
#ladderApp #ladderExpandedToolbar button:disabled{opacity:.45;cursor:wait}
#ladderApp #ladderExpandedToolbar button[aria-pressed="true"],#ladderApp #ladderExpandedToolbar button.is-playing{background:#dfedff;border-color:#6595d7;color:#174b91}
#ladderApp #jukdolFlipBtn:not([hidden]){display:inline-flex!important}
#ladderApp.ladder-expanded #jukdolBgmControl .jbgm-panel{position:fixed;right:max(8px,env(safe-area-inset-right,0px));top:calc(62px + env(safe-area-inset-top,0px));bottom:auto;width:min(340px,calc(100vw - 16px));max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain}
#ladderApp.ladder-expanded #jukdolBgmControl .jbgm-panel>*{flex-shrink:0}
#ladderApp.ladder-expanded #jukdolBgmControl button{min-height:44px}
@media(max-width:600px){
  #ladderApp #ladderExpandedToolbar{grid-template-columns:1.25fr 1fr .85fr;gap:6px;padding:5px 8px}
  #ladderApp #ladderExpandedMirrorSlot #jukdolFlipBtn{grid-column:1;grid-row:1}
  #ladderApp #ladderExpandedBgmBtn{grid-column:2;grid-row:1}
  #ladderApp #ladderExpandExitBtn{grid-column:3;grid-row:1}
  #ladderApp #ladderExpandedRemakeBtn{grid-column:1;grid-row:2}
  #ladderApp #ladderExpandedShuffleBtn{grid-column:2/4;grid-row:2}
  #ladderApp.ladder-expanded #jukdolBgmControl .jbgm-panel{top:calc(110px + env(safe-area-inset-top,0px));max-height:calc(100vh - 126px);max-height:calc(100dvh - 126px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
}
@media(max-width:820px){#ladderApp #ladderExpandBtn{grid-column:1/-1}}