:root {
  --bg: #fff7dc;
  --panel: rgba(255, 255, 255, 0.78);
  --ink: #2f2a23;
  --muted: #766b5d;
  --green: #72c97a;
  --yellow: #f4c95d;
  --gray: #c8c2b7;
  --pink: #ff8fb3;
  --blue: #8cc7ff;
  --shadow: 0 22px 60px rgba(97, 67, 28, 0.16);
  font-family: ui-rounded, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  background: var(--stage-bg, radial-gradient(circle at 12% 12%, #fff 0 9rem, transparent 9.2rem), linear-gradient(135deg, #fff7dc, #ffe5ef 52%, #e8f5ff));
  overflow-x: hidden;
  transition: background .55s ease;
}
body::before {
  content: var(--stage-emoji, "🌱");
  position: fixed; right: clamp(10px, 5vw, 42px); top: clamp(10px, 5vw, 42px);
  font-size: clamp(3rem, 16vw, 9rem); opacity: .12; transform: rotate(10deg); pointer-events: none; z-index: -1;
}
.bg-orb { position: fixed; width: 18rem; height: 18rem; border-radius: 50%; filter: blur(10px); opacity: .45; pointer-events: none; }
.orb-a { background: #ffd166; left: -6rem; bottom: 5rem; }
.orb-b { background: #8ecae6; right: -6rem; top: 4rem; }
.app-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0; }
.panel { background: var(--panel); border: 2px solid rgba(255,255,255,.9); border-radius: 28px; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.hidden { display: none !important; }
.hero, .result { max-width: 720px; margin: 7vh auto 0; padding: 42px; text-align: center; }
.mascot { width: 86px; height: 86px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 28px; background: #fff3c4; font-size: 52px; transform: rotate(-5deg); }
.mascot.small { width: 62px; height: 62px; font-size: 38px; }
.eyebrow { margin: 0 0 6px; color: #d16b8f; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
h1 { margin: 0; font-size: clamp(3rem, 9vw, 6rem); line-height: .92; }
h2, h3 { margin: 0; }
.hero-copy { margin: 18px auto 28px; color: var(--muted); font-size: 1.08rem; line-height: 1.7; max-width: 520px; }
.start-form { text-align: left; max-width: 520px; margin: 0 auto; }
label { display: block; margin: 0 0 8px 10px; font-weight: 800; }
.inline-input, .guess-form { display: flex; gap: 10px; }
input { width: 100%; border: 0; border-radius: 18px; padding: 16px 18px; font: inherit; font-weight: 800; background: #fff; color: var(--ink); outline: 3px solid transparent; }
input:focus { outline-color: rgba(255, 143, 179, .42); }
button { border: 0; border-radius: 18px; padding: 0 22px; font: inherit; font-weight: 900; color: #fff; background: linear-gradient(135deg, #ff7aaa, #ffb24d); cursor: pointer; box-shadow: 0 10px 20px rgba(255, 122, 170, .25); white-space: nowrap; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary { background: #fff; color: var(--ink); border: 2px solid #ffe0a5; box-shadow: none; }
button.ghost { background: #fff8; color: var(--muted); border: 2px dashed #ead8ba; box-shadow: none; padding: 10px 14px; }
.start-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
.start-actions button { min-height: 46px; padding: 0 18px; }
.attendance-btn { background: linear-gradient(135deg, #f59e0b, #facc15); color: #4a2b00; box-shadow: 0 8px 18px rgba(245,158,11,.22); }
.attendance-btn.claimed { background: #ecfdf5; color: #15803d; border: 2px solid #bbf7d0; box-shadow: none; opacity: 1; }
.start-leaderboard { margin-top: 16px; }
.mini-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.mini-rules div { background: #fff8; border-radius: 18px; padding: 14px; }
.mini-rules strong { display: block; }
.mini-rules span { color: var(--muted); font-size: .9rem; }
.game { display: grid; grid-template-columns: 1fr; grid-template-areas: "top" "main"; gap: 18px; max-width: 820px; margin: 0 auto; }
.topbar { grid-area: top; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.stats { display: flex; gap: 10px; }
.stats div { min-width: 86px; padding: 12px 14px; border-radius: 20px; text-align: center; background: #fff; }
.stats span { display: block; font-size: 1.8rem; font-weight: 1000; }
.stats small { color: var(--muted); font-weight: 800; }
.tower-wrap { grid-area: main; padding: 26px; }
.tower-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.stage-badge { padding: 10px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.55)); font-weight: 1000; color: #b94f75; box-shadow: inset 0 -3px rgba(0,0,0,.04); white-space: nowrap; }
.board { display: flex; flex-direction: column; gap: 8px; min-height: 260px; margin-bottom: 18px; }
.row { --label-w: 5.5rem; --cell-gap: 6px; --gaps-w: 42px; display: flex; gap: var(--cell-gap); flex-wrap: wrap; width: 100%; }
.tile { width: clamp(34px, 7vw, 52px); height: clamp(34px, 7vw, 52px); border-radius: 14px; display: grid; place-items: center; background: #fff; font-size: 1.35rem; font-weight: 1000; box-shadow: inset 0 -4px rgba(0,0,0,.05); transition: transform .12s ease, background .18s ease; }
.tile.pending { outline: 3px solid rgba(255, 143, 179, .32); transform: translateY(-1px); }
.tile.o { background: var(--green); color: #fff; }
.tile.c { background: var(--yellow); color: #fff; }
.tile.x { background: var(--gray); color: #fff; }
.word-label { min-width: var(--label-w); width: var(--label-w); align-self: center; font-weight: 1000; color: var(--muted); }
.keyboard { margin: 18px 0 14px; display: flex; flex-direction: column; gap: 7px; touch-action: manipulation; }
.key-row { display: flex; justify-content: center; gap: 6px; }
.key { min-width: 0; height: 44px; padding: 0; flex: 1 1 0; max-width: 54px; border-radius: 13px; background: #fff; color: var(--ink); box-shadow: inset 0 -4px rgba(0,0,0,.08), 0 6px 12px rgba(97,67,28,.08); border: 1px solid rgba(255,255,255,.8); font-size: 1.05rem; }
.key:active { transform: translateY(2px); box-shadow: inset 0 -2px rgba(0,0,0,.08); }
.key.wide { flex: 1.7 1 0; max-width: 86px; font-size: .9rem; }
.key.o { background: var(--green); color: #fff; }
.key.c { background: var(--yellow); color: #fff; }
.key.x { background: var(--gray); color: #fff; }
.message { min-height: 1.4em; color: var(--muted); font-weight: 800; }
.hint { color: var(--muted); line-height: 1.6; }
.share-card { padding: 24px; border-radius: 24px; background: linear-gradient(180deg, #fffaf0, #fff); border: 2px dashed #ffd597; }
.big-floor { margin: 12px 0; font-size: clamp(3rem, 14vw, 7rem); font-weight: 1000; color: #ff7aaa; text-shadow: 0 5px #ffe0ec; }
.result-tier { display: inline-block; margin: 0 0 8px; padding: 8px 14px; border-radius: 999px; background: #fff0f6; color: #b94f75; font-weight: 1000; }
.result-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.badge { padding: 8px 12px; border-radius: 999px; background: #fff0f6; font-weight: 900; color: #b94f75; }
.actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.rank-card { margin: 16px auto 6px; padding: 16px; max-width: 460px; border-radius: 22px; background: linear-gradient(180deg, #fff, #fff7fb); border: 2px solid #ffe0ec; box-shadow: inset 0 -4px rgba(255,122,170,.08); }
.rank-head { display: flex; align-items: baseline; justify-content: center; gap: 10px; color: var(--muted); font-weight: 1000; }
.rank-head strong { color: #ff6fa5; font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1; text-shadow: 0 4px #ffe0ec; }
.rank-track { height: 18px; margin: 12px 0 10px; border-radius: 999px; background: #f0e6da; overflow: hidden; box-shadow: inset 0 2px 6px rgba(0,0,0,.08); }
.rank-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd166, #ff8fb3, #8cc7ff); animation: climbBar .9s cubic-bezier(.2,.8,.2,1) both; }
.rank-meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.rank-meta span { padding: 6px 10px; border-radius: 999px; background: #fff0f6; color: #b94f75; font-size: .82rem; font-weight: 900; }
.rank-card small { display: block; margin-top: 10px; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.rank-notice { min-height: 1.2em; margin: 8px 0 0; color: #b94f75; font-weight: 1000; font-size: .9rem; }
.rank-notice.muted { color: var(--muted); }
@keyframes climbBar { from { width: 4%; filter: saturate(.5); } }
.tier-map { max-width: 560px; margin: 14px auto 0; padding: 14px; border-radius: 22px; background: rgba(255,255,255,.68); border: 2px dashed #ffd597; text-align: left; }
.tier-step { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; }
.tier-step.active { background: linear-gradient(135deg, #fff0f6, #fff7dc); outline: 2px solid rgba(255,143,179,.38); }
.tier-emoji { font-size: 1.8rem; }
.tier-step strong { display: block; font-size: .98rem; }
.tier-step small { display: block; color: var(--muted); line-height: 1.35; }
.leaderboard { max-width: 560px; margin: 16px auto 0; padding: 16px; border-radius: 24px; background: rgba(255,255,255,.76); border: 2px solid rgba(255,255,255,.9); text-align: left; }
.league-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.league-tabs button { min-height: 38px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--muted); border: 2px solid #ffe0a5; box-shadow: none; font-size: .86rem; }
.league-tabs button.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #ff7aaa, #ffb24d); box-shadow: 0 8px 16px rgba(255,122,170,.18); }
.leader-callout { margin-bottom: 10px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #fff3c4, #fff0f6); text-align: center; font-weight: 1000; color: #b94f75; }
.leaderboard ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.leaderboard li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 16px; background: #fff; }
.leaderboard li.current { outline: 2px solid rgba(255,143,179,.55); background: #fff7fb; }
.leaderboard li.podium { background: linear-gradient(135deg, #fff, #fff7dc); }
.leaderboard li.rank-1 { outline: 2px solid rgba(245,158,11,.45); box-shadow: inset 0 -4px rgba(245,158,11,.10); }
.leaderboard li.rank-2 { outline: 2px solid rgba(148,163,184,.45); }
.leaderboard li.rank-3 { outline: 2px solid rgba(180,83,9,.35); }
.leaderboard li span em { display: inline-block; margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: #fff0f6; color: #b94f75; font-size: .68rem; font-style: normal; vertical-align: middle; }
.leaderboard li.rank-1 span em { background: #fff3c4; color: #a16207; }
.leaderboard li b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ffeff6; color: #b94f75; }
.leaderboard li span { font-weight: 1000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard li strong { color: #ff6fa5; white-space: nowrap; }
.leaderboard li small { grid-column: 2 / 4; color: var(--muted); font-weight: 800; }
.leaderboard p { margin: 10px 4px 0; color: var(--muted); font-size: .78rem; line-height: 1.45; text-align: center; }
.adfit-slot { width: 100%; max-width: 360px; min-height: 124px; margin: 18px auto 0; padding: 10px 0 14px; display: grid; place-items: center; border-radius: 18px; background: rgba(255,255,255,.48); border: 1px dashed rgba(185,79,117,.22); overflow: hidden; }
.adfit-dock { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; margin: 0; background: rgba(255,255,255,.9); box-shadow: 0 12px 32px rgba(97,67,28,.16); backdrop-filter: blur(12px); }
.adfit-slot.ad-empty { display: none !important; }
body.adfit-visible .app-shell { padding-bottom: 154px; }
.ad-label { margin-bottom: 6px; color: var(--muted); font-size: .72rem; font-weight: 900; opacity: .72; }
@media (max-width: 820px) {
  body { overscroll-behavior: none; }
  .app-shell { width: min(100% - 20px, 720px); padding: 16px 0; }
  .hero, .result { padding: 28px 18px; margin-top: 2vh; }
  .adfit-slot { max-width: 340px; min-height: 120px; margin-top: 14px; }
  .adfit-dock { width: min(340px, calc(100% - 20px)); margin: 0; }
  .start-leaderboard { margin-top: 14px; }
  .mini-rules, .game { grid-template-columns: 1fr; }
  .game { grid-template-areas: "top" "main"; }
  .topbar, .inline-input, .guess-form { flex-direction: column; align-items: stretch; }
  .stats { width: 100%; }
  .stats div { flex: 1; min-width: 0; }
  button { min-height: 52px; }
  .guess-form { display: none; }
  .tower-wrap { padding: 18px 12px; }
  .board { min-height: 226px; }
  .key { height: 46px; border-radius: 12px; font-size: 1rem; }
  .key-row { gap: 4px; }
}
@media (min-width: 821px) {
  .guess-form { margin-bottom: 4px; }
}

/* Mobile portrait tuning: keep the board + touch keyboard usable above the fold. */
@media (max-width: 480px) {
  .app-shell { width: min(100% - 12px, 720px); padding: 8px 0; }
  .panel { border-radius: 22px; }
  .topbar { padding: 16px; gap: 10px; }
  .topbar h2 { font-size: clamp(1.45rem, 9vw, 2.15rem); line-height: 1.12; }
  .stats { gap: 6px; }
  .stats div { padding: 8px 6px; border-radius: 16px; }
  .stats span { font-size: 1.55rem; line-height: 1.05; }
  .stats small { font-size: .78rem; }
  .tower-wrap { padding: 14px 10px; }
  .tower-header { margin-bottom: 10px; align-items: flex-start; }
  .stage-badge { padding: 7px 9px; font-size: .78rem; }
  .tower-header h3 { font-size: clamp(1.25rem, 7vw, 1.75rem); }
  .board { min-height: 188px; gap: 5px; margin-bottom: 8px; }
  .row { --label-w: 34px; --cell-gap: 4px; --gaps-w: 28px; flex-wrap: nowrap; align-items: center; }
  .word-label { font-size: .86rem; line-height: 1; letter-spacing: -.04em; }
  .tile {
    width: clamp(36px, 10.7vw, 46px);
    height: clamp(36px, 10.7vw, 46px);
    border-radius: 12px;
    font-size: clamp(1.22rem, 6vw, 1.55rem);
  }
  .keyboard { margin: 8px 0 8px; gap: 5px; }
  .key-row { gap: 4px; }
  .key { height: 40px; border-radius: 11px; font-size: .95rem; }
  .key.wide { max-width: 96px; }
  .message { font-size: .95rem; line-height: 1.35; }
  .rank-card { padding: 13px 10px; }
  .rank-meta span { font-size: .76rem; }
  .leaderboard { padding: 12px; }
  .leaderboard li { grid-template-columns: 28px 1fr auto; padding: 9px; }
  .adfit-slot { max-width: 326px; min-height: 118px; }
  .adfit-dock { width: min(326px, calc(100% - 16px)); }
}

@media (max-width: 360px) {
  .row { --label-w: 30px; --cell-gap: 3px; --gaps-w: 21px; }
  .word-label { font-size: .76rem; }
  .tile {
    width: clamp(33px, 10.7vw, 41px);
    height: clamp(33px, 10.7vw, 41px);
    font-size: clamp(1.08rem, 5.6vw, 1.34rem);
  }
  .key { height: 38px; font-size: .9rem; }
}

/* Very small portrait phones, e.g. iPhone SE with browser chrome. */
@media (max-width: 480px) and (max-height: 700px) {
  .app-shell { padding: 6px 0; }
  .game { gap: 8px; }
  .topbar { padding: 12px; }
  .topbar h2 { font-size: clamp(1.25rem, 8vw, 1.65rem); }
  .eyebrow { font-size: .68rem; margin-bottom: 3px; }
  .stats div { padding: 6px 4px; border-radius: 14px; }
  .stats span { font-size: 1.3rem; }
  .stats small { font-size: .68rem; }
  .tower-wrap { padding: 10px 8px; }
  .tower-header { margin-bottom: 6px; }
  .stage-badge { padding: 5px 7px; font-size: .68rem; }
  .tower-header h3 { font-size: clamp(1.05rem, 6vw, 1.35rem); }
  .board { min-height: 150px; gap: 3px; margin-bottom: 5px; }
  .row { --label-w: 30px; --cell-gap: 3px; --gaps-w: 21px; }
  .word-label { font-size: .72rem; }
  .tile {
    width: clamp(32px, 9.8vw, 39px);
    height: clamp(32px, 9.8vw, 39px);
    border-radius: 9px;
    font-size: clamp(1.04rem, 5.4vw, 1.25rem);
  }
  .keyboard { margin: 5px 0; gap: 3px; }
  .key-row { gap: 3px; }
  .key { height: 32px; border-radius: 9px; font-size: .82rem; }
  .key.wide { max-width: 82px; min-height: 38px; }
  .message { font-size: .82rem; line-height: 1.25; min-height: 1.1em; }
  .rank-card small, .leaderboard p { font-size: .68rem; }
  .tier-map, .leaderboard { padding: 10px; }
  .tier-step { grid-template-columns: 34px 1fr; gap: 7px; padding: 8px; }
  .tier-emoji { font-size: 1.45rem; }
  .adfit-slot { margin-top: 10px; }
  body.adfit-visible .app-shell { padding-bottom: 136px; }
}

@media (max-width: 360px) and (max-height: 700px) {
  .topbar { padding: 10px; }
  .topbar h2 { font-size: clamp(1.12rem, 7.4vw, 1.45rem); }
  .stats span { font-size: 1.18rem; }
  .tower-wrap { padding: 8px; }
  .board { min-height: 126px; }
  .row { --label-w: 28px; --cell-gap: 2px; --gaps-w: 14px; }
  .tile {
    width: clamp(31px, 9.7vw, 37px);
    height: clamp(31px, 9.7vw, 37px);
  }
  .key { height: 30px; }
  .key.wide { min-height: 34px; }
}

.monthly-averages { margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(255, 213, 151, .75); }
.monthly-title { text-align: center; font-weight: 1000; color: #b94f75; margin: 2px 0 10px; }
.monthly-card { margin-top: 10px; padding: 12px; border-radius: 18px; background: rgba(255, 250, 240, .72); }
.monthly-card h4 { margin: 0 0 8px; color: #b94f75; font-size: .95rem; text-align: center; }
.monthly-card ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.monthly-card li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 8px 9px; border-radius: 14px; background: #fff; }
.monthly-card li b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #fff0f6; color: #b94f75; font-size: .82rem; }
.monthly-card li span { min-width: 0; font-weight: 1000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monthly-card li span small { display: block; margin-top: 2px; color: var(--muted); font-size: .7rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.monthly-card li strong { color: #ff6fa5; font-size: .84rem; white-space: nowrap; }
.monthly-loading, .monthly-empty, .monthly-note { margin: 8px 4px 0; color: var(--muted); font-size: .76rem; line-height: 1.45; text-align: center; font-weight: 800; }
.monthly-note { margin-top: 10px; }
@media (max-width: 480px) {
  .monthly-card { padding: 10px; }
  .monthly-card li { grid-template-columns: 26px 1fr auto; gap: 6px; padding: 8px; }
  .monthly-card li strong { font-size: .78rem; }
}

.league-tabs { flex-wrap: wrap; }
@media (max-width: 480px) {
  .league-tabs { gap: 6px; }
  .league-tabs button { min-height: 36px; padding: 0 10px; font-size: .78rem; flex: 1 1 calc(50% - 6px); }
}

.monthly-card li span small + small { margin-top: 1px; opacity: .82; }

.monthly-hero { margin-bottom: 12px; padding: 16px 14px; border-radius: 22px; background: radial-gradient(circle at 18% 20%, #fff 0 28px, transparent 30px), linear-gradient(135deg, #fff3c4, #ffd6e8 48%, #c7e7ff); text-align: center; color: #9f3f66; box-shadow: inset 0 -5px rgba(255,122,170,.10); }
.monthly-hero span { display: block; font-size: 2.2rem; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 4px 0 rgba(255,255,255,.8)); }
.monthly-hero strong { display: block; font-size: 1.18rem; font-weight: 1000; }
.monthly-hero small { display: block; margin-top: 3px; color: #b94f75; font-weight: 900; }
.monthly-card li.monthly-row { grid-template-columns: 34px 1fr auto; align-items: center; position: relative; overflow: hidden; }
.monthly-card li.monthly-podium { padding: 11px 10px; border: 2px solid transparent; box-shadow: inset 0 -5px rgba(0,0,0,.04), 0 8px 18px rgba(97,67,28,.08); }
.monthly-card li.monthly-rank-1 { background: linear-gradient(135deg, #fff7c2, #fff, #ffe0ec); border-color: rgba(245,158,11,.55); }
.monthly-card li.monthly-rank-2 { background: linear-gradient(135deg, #eef2ff, #fff, #e0f2fe); border-color: rgba(148,163,184,.55); }
.monthly-card li.monthly-rank-3 { background: linear-gradient(135deg, #ffedd5, #fff, #fde68a); border-color: rgba(180,83,9,.45); }
.monthly-card li.monthly-podium::after { content: ''; position: absolute; right: -24px; top: -24px; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.45); }
.monthly-card li.monthly-row > b { width: 29px; height: 29px; font-size: .92rem; z-index: 1; }
.monthly-card li.monthly-rank-1 > b { background: #fbbf24; color: #fff; box-shadow: 0 4px 10px rgba(245,158,11,.32); }
.monthly-card li.monthly-rank-2 > b { background: #94a3b8; color: #fff; }
.monthly-card li.monthly-rank-3 > b { background: #d97706; color: #fff; }
.monthly-name { display: block; font-size: .98rem; line-height: 1.1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monthly-tier { display: flex !important; align-items: center; gap: 4px; color: #b94f75 !important; font-size: .78rem !important; opacity: 1 !important; }
.monthly-tier em { font-style: normal; font-size: 1.18rem; line-height: 1; }
.monthly-floor { position: relative; z-index: 1; padding: 7px 9px; border-radius: 999px; background: #fff0f6; color: #ff5f9d !important; font-size: .9rem !important; font-weight: 1000; }
.monthly-rank-1 .monthly-floor { background: #fff3c4; color: #a16207 !important; }
.monthly-rank-2 .monthly-floor { background: #eef2ff; color: #475569 !important; }
.monthly-rank-3 .monthly-floor { background: #ffedd5; color: #9a3412 !important; }
@media (max-width: 480px) {
  .monthly-hero { padding: 14px 10px; }
  .monthly-card li.monthly-row { grid-template-columns: 32px 1fr auto; }
  .monthly-tier { font-size: .74rem !important; }
  .monthly-tier em { font-size: 1.08rem; }
  .monthly-floor { padding: 6px 8px; font-size: .78rem !important; }
}

.total-climb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 4px auto 8px; padding: 9px 13px; border-radius: 999px; background: linear-gradient(135deg, #fff3c4, #fff0f6); color: #b94f75; font-weight: 1000; box-shadow: inset 0 -3px rgba(255,122,170,.08); }
.total-climb strong { color: #ff5f9d; }
.total-climb.muted { color: var(--muted); background: rgba(255,255,255,.55); }
@media (max-width: 480px) { .total-climb { font-size: .88rem; padding: 8px 11px; } }

.hidden-tier-hint { margin: 10px 4px 2px; padding: 11px 12px; border-radius: 16px; background: linear-gradient(135deg, #fff3c4, #fff0f6); color: #b94f75; text-align: center; font-weight: 1000; font-size: .82rem; }
@media (max-width: 480px) { .league-tabs button { flex-basis: calc(33.333% - 6px); padding: 0 7px; font-size: .72rem; } }

.game-over-panel { margin: 12px 0 10px; padding: 16px; border-radius: 22px; background: linear-gradient(135deg, #fff3c4, #fff0f6); border: 2px solid rgba(255,143,179,.35); text-align: center; box-shadow: inset 0 -4px rgba(255,122,170,.08); }
.game-over-title { margin: 0 0 6px; color: #b94f75; font-weight: 1000; }
.game-over-answer { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; margin: 2px 0 8px; padding: 10px 18px; border-radius: 18px; background: #fff; color: #ff5f9d; font-size: clamp(1.8rem, 9vw, 2.7rem); font-weight: 1000; box-shadow: inset 0 -4px rgba(0,0,0,.05); }
.game-over-copy { margin: 0 auto 12px; color: var(--muted); font-weight: 900; line-height: 1.45; }
.game-over-panel button { min-height: 46px; padding: 0 20px; }
@media (max-width: 480px) { .game-over-panel { padding: 13px 10px; } .game-over-answer { font-size: clamp(1.6rem, 8vw, 2.2rem); } }

/* Compact answer reveal: sits near the board so players can compare attempts. */
.game-over-panel { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; margin: -6px 0 10px; padding: 9px 10px; border-radius: 16px; text-align: center; }
.game-over-title { margin: 0; font-size: .82rem; }
.game-over-answer { min-width: 0; margin: 0; padding: 6px 10px; border-radius: 12px; font-size: 1.15rem; line-height: 1; }
.game-over-jamo { padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.72); color: var(--muted); font-size: .78rem; font-weight: 1000; }
.game-over-panel button { min-height: 36px; padding: 0 13px; border-radius: 13px; font-size: .84rem; }
@media (max-width: 480px) { .game-over-panel { margin: -2px 0 8px; gap: 5px; } .game-over-answer { font-size: 1.05rem; } .game-over-jamo { font-size: .7rem; } }

.monthly-desc { color: var(--muted) !important; font-size: .72rem !important; font-weight: 800 !important; line-height: 1.25; white-space: normal !important; opacity: .9 !important; }
.monthly-card li.monthly-podium .monthly-desc { color: #8a5d6f !important; opacity: .95 !important; }
@media (max-width: 480px) { .monthly-desc { font-size: .68rem !important; } }

.tier-desc { margin: -4px auto 8px; color: var(--muted); font-weight: 900; font-size: .9rem; line-height: 1.35; }
.total-climb small { flex-basis: 100%; color: var(--muted); font-size: .76rem; line-height: 1.25; }
@media (max-width: 480px) { .tier-desc { font-size: .82rem; } .total-climb small { font-size: .7rem; } }

/* Board-game clean theme override */
:root {
  --bg: #f6efe3;
  --panel: rgba(255, 252, 244, 0.9);
  --ink: #2f2a23;
  --muted: #6f6658;
  --green: #4f9d69;
  --yellow: #d8a83f;
  --gray: #a9a295;
  --pink: #a86f3f;
  --blue: #4f7f95;
  --shadow: 0 18px 44px rgba(55, 42, 24, 0.14);
}
body {
  background: var(--stage-bg, radial-gradient(circle at 12% 12%, rgba(255,255,255,.7) 0 8rem, transparent 8.2rem), linear-gradient(135deg, #f7efd9, #eadcc5 52%, #d7e1d6));
}
.bg-orb { opacity: .22; filter: blur(18px); }
.orb-a { background: #c28b51; }
.orb-b { background: #6f9aa8; }
.panel { border: 1px solid rgba(92, 70, 42, .14); border-radius: 22px; }
.share-card { background: linear-gradient(180deg, #fffaf0, #fffdf8); border: 1px solid rgba(92, 70, 42, .18); }
.mascot { background: #f2dfb9; border: 1px solid rgba(92,70,42,.12); }
.eyebrow { color: #8a613b; letter-spacing: .06em; }
button { background: linear-gradient(135deg, #7d8f5b, #b9854d); box-shadow: 0 8px 18px rgba(90, 68, 38, .18); }
button.secondary { background: #fffdf7; color: var(--ink); border: 1px solid rgba(92,70,42,.22); }
button.ghost { background: #fffdf7; border: 1px dashed rgba(92,70,42,.32); }
input { border: 1px solid rgba(92,70,42,.16); background: #fffdf8; }
input:focus { outline-color: rgba(126, 143, 91, .32); }
.mini-rules div, .stats div, .tile, .key, .leaderboard li, .monthly-card li { background: #fffdf8; }
.stage-badge, .result-tier, .badge, .rank-meta span, .monthly-floor, .total-climb, .leader-callout, .hidden-tier-hint, .game-over-panel {
  background: linear-gradient(135deg, #fff5d8, #f7efe1);
  color: #7a5635;
}
.big-floor { color: #8a613b; text-shadow: 0 4px #eadcc5; }
.rank-card { background: linear-gradient(180deg, #fffdf8, #f7efe1); border: 1px solid rgba(92,70,42,.16); box-shadow: inset 0 -4px rgba(92,70,42,.04); }
.rank-head strong { color: #7d8f5b; text-shadow: 0 3px #e3ead3; }
.rank-track span { background: linear-gradient(90deg, #b9854d, #7d8f5b, #4f7f95); }
.league-tabs button { border: 1px solid rgba(92,70,42,.2); background: #fffdf8; color: #6f6658; }
.league-tabs button.active { background: linear-gradient(135deg, #7d8f5b, #b9854d); color: #fff; }
.leaderboard li.rank-1, .monthly-card li.monthly-rank-1 { outline: 1px solid rgba(185,133,77,.45); background: linear-gradient(135deg, #fff7d8, #fffdf8); }
.leaderboard li.rank-2, .monthly-card li.monthly-rank-2 { outline: 1px solid rgba(111,154,168,.38); background: linear-gradient(135deg, #edf4f2, #fffdf8); }
.leaderboard li.rank-3, .monthly-card li.monthly-rank-3 { outline: 1px solid rgba(138,97,59,.32); background: linear-gradient(135deg, #f4e4cd, #fffdf8); }
.leaderboard li b, .monthly-card li b { background: #efe2c9; color: #7a5635; }
.leaderboard li strong, .monthly-floor, .total-climb strong { color: #8a613b !important; }
.monthly-tier, .rank-notice, .leader-callout strong { color: #7a5635 !important; }
.tile.o, .key.o { background: #4f9d69; }
.tile.c, .key.c { background: #d8a83f; }
.tile.x, .key.x { background: #a9a295; }
.keyboard { background: rgba(255, 252, 244, .48); padding: 8px; border-radius: 18px; border: 1px solid rgba(92,70,42,.1); }
.key { border-color: rgba(92,70,42,.14); box-shadow: inset 0 -3px rgba(55,42,24,.08), 0 4px 10px rgba(55,42,24,.06); }
.game-over-answer { color: #7d8f5b; }
.adfit-slot { border-color: rgba(92,70,42,.18); background: rgba(255,252,244,.72); }

.champion-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.champion-callout .champion-message {
  flex: 1 1 100%;
  min-width: 0;
  color: #5f4a32;
  font-size: .98rem;
}
.champion-callout small {
  flex: 0 0 auto;
  color: #8b6b46;
}
.item-shop {
  width: min(100%, 420px);
  margin: 8px auto 10px;
  padding: 12px;
  border: 1px solid rgba(120, 94, 60, .18);
  border-radius: 18px;
  background: #fffaf0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.item-shop-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ink); }
.item-shop-head span, .item-shop-note { color: var(--muted); font-weight: 800; }
.item-shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.item-buy {
  min-height: 54px;
  padding: 8px 6px;
  border-radius: 14px;
  border: 1px solid rgba(120, 94, 60, .2);
  background: #fffdf8;
  color: var(--ink);
  font-weight: 1000;
  box-shadow: 0 3px 0 rgba(120, 94, 60, .14);
}
.item-buy small { display: block; margin-top: 2px; color: var(--muted); font-weight: 900; }
.item-buy:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.coin-stat span { color: #b7791f; }
@media (max-width: 520px) {
  .item-shop { padding: 10px; }
  .item-shop-grid { grid-template-columns: 1fr; }
  .item-buy { min-height: 44px; }
}

.coin-stat {
  background: linear-gradient(180deg, #fff7cd, #ffe58f) !important;
  border: 2px solid rgba(184, 134, 11, .18);
  box-shadow: inset 0 -4px rgba(184, 134, 11, .10), 0 8px 18px rgba(184, 134, 11, .10);
}
.coin-stat span { color: #9a5b00; }
.coin-stat small { color: #7c4a00; }
.coin-float {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 60;
  padding: 9px 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8cf, #ffe58a);
  color: #7c4a00;
  border: 2px solid rgba(184, 134, 11, .22);
  box-shadow: 0 10px 26px rgba(97, 67, 28, .16), inset 0 -3px rgba(184, 134, 11, .12);
  font-weight: 1000;
  letter-spacing: -.02em;
  pointer-events: none;
}
.coin-toast {
  position: fixed;
  left: 50%;
  top: max(58px, calc(env(safe-area-inset-top) + 58px));
  transform: translate(-50%, -8px) scale(.98);
  z-index: 70;
  max-width: min(92vw, 420px);
  padding: 13px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff9d7, #fff3a7);
  color: #7c4a00;
  border: 2px solid rgba(184, 134, 11, .22);
  box-shadow: 0 16px 36px rgba(97, 67, 28, .20);
  font-weight: 1000;
  text-align: center;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.coin-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
@media (max-width: 480px) {
  .coin-float { top: max(8px, env(safe-area-inset-top)); right: 8px; padding: 7px 10px; font-size: .9rem; }
  .coin-toast { top: max(50px, calc(env(safe-area-inset-top) + 50px)); padding: 11px 14px; font-size: .95rem; }
}

.leader-name, .monthly-name { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.coin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8ce, #ffe899);
  color: #8a5200;
  border: 1px solid rgba(184, 134, 11, .18);
  font-size: .72rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1.35;
  box-shadow: inset 0 -2px rgba(184, 134, 11, .08);
  vertical-align: middle;
}
.coin-badge.coin-empty { opacity: .62; filter: grayscale(.18); }
.champion-callout .coin-badge { margin-left: 4px; transform: translateY(-1px); }
@media (max-width: 480px) {
  .coin-badge { min-width: 38px; padding: 2px 6px; font-size: .66rem; }
}

.prize-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(47, 42, 35, .38);
  backdrop-filter: blur(6px);
}
.prize-modal.show { display: grid; }
.prize-card {
  width: min(92vw, 420px);
  padding: 28px 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, #fffdf8, #fff4d1);
  border: 2px solid rgba(184, 134, 11, .22);
  box-shadow: 0 24px 60px rgba(47, 42, 35, .24), inset 0 -6px rgba(184, 134, 11, .08);
  text-align: center;
}
.prize-emoji { font-size: 3.5rem; margin-bottom: 4px; }
.prize-card h3 { margin: 6px 0 8px; color: #9a5b00; }
.prize-card p { color: var(--muted); font-weight: 800; line-height: 1.5; }
.prize-card code {
  display: block;
  margin: 16px auto;
  padding: 13px 14px;
  border-radius: 16px;
  background: #fff;
  border: 2px dashed rgba(184, 134, 11, .35);
  color: #7c4a00;
  font-size: 1rem;
  font-weight: 1000;
  white-space: pre-wrap;
  word-break: break-all;
}
.prize-card button { width: 100%; }

.message-card { max-height: min(86vh, 760px); overflow: auto; text-align: left; }
.message-card .prize-emoji, .message-card h3 { text-align: center; }
.message-card h4 { margin: 16px 0 8px; color: #9a5b00; }
.message-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.message-list li { padding: 10px; border-radius: 16px; background: #fffdf8; border: 1px solid rgba(184,134,11,.14); }
.message-list strong { display: block; margin-bottom: 4px; color: var(--ink); }
.message-list small { display: block; color: var(--muted); font-weight: 800; line-height: 1.45; }
.message-list code { margin: 8px 0 0; font-size: .82rem; }
.message-actions { display: flex; gap: 8px; margin-top: 8px; }
.message-actions button { flex: 1; min-height: 42px; padding: 8px 10px; font-size: .9rem; }

.duel-input {
  width: 100%;
  margin: 6px 0 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 2px solid #ffe0ec;
  background: #fffdf8;
  font: inherit;
  font-weight: 900;
  box-sizing: border-box;
}
.duel-suggest-list {
  margin: -4px 0 10px;
  display: grid;
  gap: 6px;
}
.duel-suggest-list button {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 14px;
  background: #fff4d1;
  color: #7c4a00;
  text-align: left;
  box-shadow: none;
}
.duel-suggest-list small { color: var(--muted); font-weight: 800; }

.duel-wallet-status {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff8ce, #ffe899);
  color: #7c4a00;
  border: 1px solid rgba(184, 134, 11, .22);
  font-weight: 1000;
  text-align: center;
}
.duel-wallet-status.not-enough { background: #fff1f2; color: #be123c; border-color: #fecdd3; }


.duel-test-panel {
  margin: 14px auto 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 253, 248, .96);
  border: 2px solid #ffe0ec;
  box-shadow: 0 10px 28px rgba(47,42,35,.12);
  font-size: .9rem;
  text-align: center;
}
.duel-test-panel small { color: var(--muted); font-weight: 800; }
.duel-test-panel button { min-height: 42px; padding: 8px 10px; font-size: .86rem; border-radius: 14px; }

.arena-card h3 { text-align: center; }
.arena-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.arena-ranks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.arena-ranks li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 10px; border-radius: 16px; background: #fffdf8; border: 1px solid rgba(184,134,11,.14); }
.arena-ranks b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: #fff4d1; color: #9a5b00; }
.arena-ranks strong { display: block; color: var(--ink); }
.arena-ranks small, .arena-logs small { color: var(--muted); font-weight: 800; }
.arena-logs li strong { color: #7c4a00; line-height: 1.45; }
@media (max-width: 520px) { .arena-grid { grid-template-columns: 1fr; } }

.arena-card { width: min(96vw, 760px); }
.arena-card > .eyebrow, .arena-card > h3 { text-align: center; }
.arena-board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.arena-leaderboard { padding: 12px; margin: 0; max-height: none; }
.arena-leaderboard h4 { margin: 2px 0 10px; text-align: center; color: #9a5b00; }
.arena-leaderboard ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.arena-leaderboard li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border-radius: 18px; background: #fffdf8; border: 1px solid rgba(184,134,11,.12); }
.arena-leaderboard li.podium { background: linear-gradient(135deg, #fff8ce, #fffdf8); border-color: rgba(184,134,11,.22); }
.arena-leaderboard li > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #fff4d1; color: #9a5b00; font-weight: 1000; }
.arena-leaderboard li span { min-width: 0; }
.arena-leaderboard li span strong { display: block; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-leaderboard li span em { display: block; color: #b94f75; font-size: .76rem; font-style: normal; font-weight: 1000; }
.arena-leaderboard li span small { display: block; color: var(--muted); font-weight: 800; font-size: .74rem; }
.arena-leaderboard li > strong { color: #ff6fa5; font-size: 1.25rem; font-weight: 1000; }
.arena-empty { grid-template-columns: 1fr !important; text-align: center; }
.arena-log-card { margin-top: 12px; padding: 12px; border-radius: 20px; background: #fffaf0; border: 1px solid rgba(184,134,11,.14); }
.arena-log-card h4 { margin: 0 0 8px; text-align: center; color: #9a5b00; }
@media (max-width: 720px) { .arena-board { grid-template-columns: 1fr; } .arena-card { width: min(94vw, 460px); } }

.start-arena-slot { margin-top: 16px; }
.start-arena-section { display: grid; gap: 10px; }
.inline-arena-board { margin: 0; }
.arena-mini-hero { margin-top: 0; }
.start-leaderboard .arena-leaderboard { box-shadow: inset 0 -4px rgba(184,134,11,.06); }

/* 메시지함 미처리 결투 배지 */
#prizeInboxBtn { position: relative; }
#prizeInboxBtn.has-badge::after {
  content: attr(data-badge);
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(239,68,68,.28);
  font-size: .72rem;
  font-weight: 1000;
  line-height: 1;
}
.message-hint { margin: 0 0 10px; color: var(--muted); font-size: .82rem; font-weight: 800; text-align: center; }
.message-time { color: var(--muted); opacity: .9; }
.message-state { font-weight: 1000; padding: 2px 7px; border-radius: 999px; }
.message-state-win { color: #1d4ed8; background: #dbeafe; }
.message-state-loss { color: #dc2626; background: #fee2e2; }

/* 결투 결과 로그: 모바일에서 겹치지 않는 카드형 */
.arena-logs { gap: 10px; }
.arena-logs .duel-log-row {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  overflow: hidden;
}
.duel-log-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.duel-log-main strong {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.duel-log-main b {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  color: #1d4ed8;
  background: #dbeafe;
  font-size: .78rem;
  font-weight: 1000;
  white-space: nowrap;
}
.arena-logs .duel-log-message {
  display: block;
  color: #9a5b00;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.arena-logs .duel-log-time {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  text-align: right;
}
@media (max-width: 520px) {
  .duel-log-main { align-items: flex-start; flex-direction: column; gap: 4px; }
  .duel-log-main b { align-self: flex-start; }
  .arena-logs .duel-log-time { text-align: left; }
}

/* 결투 결과 로그: 모바일에서 겹치지 않는 카드형 */
.arena-logs { gap: 10px; }
.arena-logs .duel-log-row {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  overflow: hidden;
}
.duel-log-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.duel-log-main strong {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.duel-log-main b {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  color: #1d4ed8;
  background: #dbeafe;
  font-size: .78rem;
  font-weight: 1000;
  white-space: nowrap;
}
.arena-logs .duel-log-message {
  display: block;
  color: #9a5b00;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.arena-logs .duel-log-time {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  text-align: right;
}
@media (max-width: 520px) {
  .duel-log-main { align-items: flex-start; flex-direction: column; gap: 4px; }
  .duel-log-main b { align-self: flex-start; }
  .arena-logs .duel-log-time { text-align: left; }
}

/* 더 짧은 결투 로그: A(패) vs B(승) */
.arena-logs .compact-duel-log {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px 11px;
}
.compact-duel-log .duel-log-matchup {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 1000;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}
.compact-duel-log .duel-log-message {
  display: block;
  max-width: 100%;
  color: #9a5b00;
  font-size: .84rem;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compact-duel-log .duel-log-time {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}
.compact-duel-log .duel-log-matchup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 5px;
}
.duel-log-matchup span {
  min-width: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duel-log-matchup em {
  color: var(--muted);
  font-size: .72rem;
  font-style: normal;
  font-weight: 1000;
}
.duel-result-badge {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #fff;
  font-size: .72rem;
  font-weight: 1000;
  line-height: 1;
}
.duel-result-badge.win { background: #2563eb; }
.duel-result-badge.loss { background: #ef4444; }
@media (max-width: 380px) {
  .duel-log-matchup span { max-width: 38%; }
}

/* 결투 로그 최종 정리: 상단 승패+시간, 하단 메시지 */
.arena-logs .compact-duel-log {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 11px 12px;
}
.compact-duel-log .duel-log-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}
.compact-duel-log .duel-log-matchup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5px;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 1000;
  line-height: 1.25;
}
.compact-duel-log .duel-log-time {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
.compact-duel-log .duel-log-message {
  display: block;
  width: 100%;
  color: #9a5b00;
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.duel-log-matchup span {
  min-width: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duel-result-badge {
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  font-size: .86rem;
  font-weight: 1000;
  line-height: 1.2;
}
.duel-result-badge.win { color: #2563eb; }
.duel-result-badge.loss { color: #ef4444; }
@media (max-width: 380px) {
  .compact-duel-log .duel-log-top { grid-template-columns: 1fr; gap: 4px; }
  .compact-duel-log .duel-log-time { text-align: left; }
  .duel-log-matchup span { max-width: 40%; }
}

/* 강제 2줄 배치: 1줄=결과/시간, 2줄=메시지 */
.arena-logs li.compact-duel-log {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 7px !important;
}
.compact-duel-log > .duel-log-top {
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: start !important;
  width: 100% !important;
}
.compact-duel-log > .duel-log-message-row {
  grid-row: 2 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  clear: both !important;
}
.compact-duel-log .duel-log-message-row .duel-log-message {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 420px) {
  .compact-duel-log > .duel-log-top {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .compact-duel-log .duel-log-time { text-align: left !important; }
}

/* 결투 로그 3줄 고정: 시간 / 승패 / 메시지 */
.arena-logs li.compact-duel-log {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  gap: 5px !important;
  padding: 11px 12px !important;
}
.compact-duel-log > .duel-log-time {
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  white-space: normal !important;
  color: var(--muted) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.compact-duel-log > .duel-log-top {
  grid-row: 2 !important;
  display: block !important;
  width: 100% !important;
}
.compact-duel-log > .duel-log-top .duel-log-matchup {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 3px 5px !important;
  width: 100% !important;
}
.compact-duel-log > .duel-log-message-row {
  grid-row: 3 !important;
  width: 100% !important;
}

/* 메시지함 우상단 닫기 */
.message-card { position: relative; }
.modal-close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(92,70,42,.16);
  background: rgba(255,255,255,.92);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(92,70,42,.12);
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 1000;
}
.modal-close-x:hover { transform: translateY(-1px); }
.item-hint-text {
  color: #16a34a;
  font-weight: 1000;
  background: #dcfce7;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.active-hints {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 2px solid #86efac;
  border-radius: 16px;
  background: #f0fdf4;
  color: #166534;
}
.active-hints > b { font-size: .82rem; white-space: nowrap; }
.active-hints > div { display: flex; gap: 7px; }
.active-hints span { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 11px; background: #fff; box-shadow: 0 3px 9px rgba(22,101,52,.1); }
.active-hints small { color: #4b7c5c; font-size: .72rem; font-weight: 900; }
.active-hints strong { color: #15803d; font-size: 1.25rem; line-height: 1; }
@media (max-width: 380px) {
  .active-hints { align-items: flex-start; flex-direction: column; }
}

/* 메시지함 X 버튼 슬림 버전 */
.modal-close-x {
  top: 8px !important;
  right: 8px !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(92,70,42,.58) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.modal-close-x:hover { color: var(--ink) !important; transform: none !important; }

.guess-form.submitting { opacity: .72; }
.guess-form.submitting button { cursor: wait; }

.group-lab {
  margin: 18px 0 4px;
  padding: 16px;
  border: 1px solid #c7d2fe;
  border-radius: 18px;
  background: linear-gradient(145deg, #f8fafc, #eef2ff);
  text-align: left;
}
.group-lab-head, .group-actions, .group-board li { display: flex; align-items: center; }
.group-lab-head { justify-content: space-between; gap: 12px; }
.group-lab-head div { display: grid; gap: 2px; }
.group-lab-head small { color: #6366f1; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.group-lab-head strong { font-size: 1.05rem; }
#groupCodeBadge { padding: 5px 9px; border-radius: 9px; background: #312e81; color: white; font-weight: 900; letter-spacing: .08em; }
.group-lab > p { margin: 9px 0 12px; color: var(--muted); font-size: .86rem; }
.group-actions { flex-wrap: wrap; gap: 7px; }
.group-actions button { min-height: 38px; padding: 8px 11px; font-size: .8rem; }
.group-board { margin-top: 14px; padding-top: 12px; border-top: 1px solid #c7d2fe; }
.group-board h4 { margin: 0 0 8px; }
.group-board ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.group-board li { gap: 9px; padding: 8px 10px; border-radius: 11px; background: rgba(255,255,255,.78); }
.group-board li b { width: 25px; text-align: center; }
.group-board li span { flex: 1; font-weight: 800; }
.group-board li strong { color: #4338ca; }
.group-board li.empty { color: var(--muted); justify-content: center; }
.group-board > small { display: block; margin-top: 9px; color: var(--muted); line-height: 1.4; }