:root {
  --bg: #fff8fb;
  --bg-2: #fffaf3;
  --paper: rgba(255, 255, 255, 0.86);
  --paper-strong: #fffdfd;
  --ink: #2a2022;
  --muted: #8f7f82;
  --line: rgba(236, 214, 221, 0.96);
  --accent: #e78cab;
  --accent-strong: #d76f95;
  --accent-soft: #ffe7ef;
  --accent-soft-2: #fff1f6;
  --peach: #fff2ea;
  --lavender: #f4efff;
  --blue-soft: #eef7ff;
  --mint-soft: #edf9f2;
  --yellow-soft: #fff8df;
  --shadow: 0 22px 60px rgba(180, 121, 143, 0.12);
  --shadow-soft: 0 12px 28px rgba(185, 118, 141, 0.08);
  --radius-2xl: 34px;
  --radius-xl: 28px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--ink);
  font-family: "Gowun Dodum", "Pretendard", -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif;
}
button, input { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(circle at 9% 6%, rgba(239, 171, 196, .22), transparent 22%),
    radial-gradient(circle at 90% 11%, rgba(203, 222, 255, .22), transparent 24%),
    radial-gradient(circle at 83% 78%, rgba(255, 225, 233, .22), transparent 20%),
    radial-gradient(circle at 12% 84%, rgba(255, 237, 211, .28), transparent 20%);
}

body::after {
  background-image:
    radial-gradient(circle at 16px 16px, rgba(231,140,171,.16) 0 2px, transparent 2.2px),
    radial-gradient(circle at 56px 20px, rgba(196,171,255,.14) 0 2px, transparent 2.2px),
    radial-gradient(circle at 34px 58px, rgba(255,205,218,.16) 0 2px, transparent 2.2px),
    radial-gradient(circle at 78px 56px, rgba(255,229,184,.16) 0 2px, transparent 2.2px);
  background-size: 96px 96px;
  opacity: .4;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0));
}

.app-shell { width: min(100%, 980px); min-height: 100dvh; margin: 0 auto; position: relative; }
.screen { min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
.screen-center { display: grid; place-items: center; align-content: center; gap: 16px; }
.muted, .subcopy, .helper, .connection-state, .player-copy span, .game-copy small, .status-label { color: var(--muted); }

.brand-mark {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(74,51,53,.76);
  border-radius: 18px;
  position: relative;
  transform: rotate(45deg);
  background: linear-gradient(180deg, #fff, #fff8fb);
  box-shadow: var(--shadow-soft);
}
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  border-radius: 999px;
}
.brand-mark::before { width: 8px; height: 30px; left: 21px; top: 10px; }
.brand-mark::after { width: 30px; height: 8px; left: 10px; top: 21px; }
.brand-mark.large { width: 70px; height: 70px; border-radius: 24px; margin-bottom: 18px; }
.brand-mark.large::before { left: 29px; top: 12px; height: 44px; }
.brand-mark.large::after { top: 30px; left: 12px; width: 44px; }

.login-wrap { min-height: calc(100dvh - 50px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 58px; }
.brand-block { position: relative; }
.brand-block::before,
.brand-block::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  z-index: -1;
}
.brand-block::before {
  width: 150px; height: 150px; right: 8%; top: 2%;
  background: radial-gradient(circle, rgba(255,229,237,.9) 0 35%, rgba(255,229,237,0) 68%);
}
.brand-block::after {
  width: 110px; height: 110px; left: -3%; bottom: 6%;
  background: radial-gradient(circle, rgba(241,235,255,.8) 0 40%, rgba(241,235,255,0) 72%);
}
.brand-block h1,
.lobby-title,
.section-heading h2,
.dialog-head h2,
.player-copy strong,
.game-copy strong,
.status-strip strong,
.primary-btn,
.secondary-btn,
.ghost-btn {
  font-family: "Jua", "Gowun Dodum", sans-serif;
}
.brand-block h1 {
  font-size: clamp(46px, 7vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 10px 0 16px;
}
.eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 900;
  color: var(--accent-strong);
}
.subcopy { font-size: 16px; line-height: 1.7; }

.card {
  background: var(--paper);
  border: 1px solid rgba(238, 219, 225, 0.96);
  box-shadow: var(--shadow);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(18px);
}
.login-card {
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.login-card::before,
.login-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.login-card::before {
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0));
}
.login-card::after {
  width: 180px; height: 180px; right: -50px; bottom: -60px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,236,242,.8) 0 35%, rgba(255,236,242,0) 70%);
}

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin: 16px 0 8px;
}
input {
  width: 100%;
  border: 1.5px solid var(--line);
  background: rgba(255,255,255,.95);
  border-radius: 20px;
  padding: 16px 18px;
  outline: none;
  transition: .2s;
}
input::placeholder { color: #beafb1; }
input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(231,140,171,.13);
}

.primary-btn, .secondary-btn, .ghost-btn {
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.primary-btn:hover, .secondary-btn:hover, .ghost-btn:hover { transform: translateY(-1px); }
.primary-btn {
  width: 100%;
  margin-top: 22px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #2f2526, #1d1718);
  color: #fff;
  box-shadow: 0 14px 28px rgba(44, 28, 31, .18);
}
.primary-btn.compact { width: auto; min-width: 136px; margin: 0; }
.secondary-btn {
  padding: 12px 18px;
  background: linear-gradient(180deg, #fff8fb, #fbeef3);
  border: 1px solid #efd8e0;
  color: #674c54;
  box-shadow: 0 8px 18px rgba(209, 158, 176, .08);
}
.ghost-btn {
  padding: 12px 16px;
  background: rgba(255,255,255,.76);
  color: #8d7a7e;
  border: 1px solid rgba(236,219,224,.98);
}
.form-error { color: #b34444; min-height: 20px; margin: 10px 0 0; font-size: 13px; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-top: 8px; }
.lobby-title { margin: 6px 0 0; font-size: clamp(34px, 5vw, 52px); letter-spacing: -.045em; }

.versus {
  margin-top: 28px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.versus::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,236,243,.55), rgba(255,255,255,0) 28% 72%, rgba(237,246,255,.48));
  pointer-events: none;
}
.player-card {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  align-items: center;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.player-card.reverse { grid-template-columns: 1fr 84px; text-align: right; }
.player-card.reverse .avatar-frame { order: 2; }
.player-copy { min-width: 0; }
.player-copy strong { display: block; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-copy span { display: block; font-size: 13px; margin-top: 5px; line-height: 1.46; }
.avatar-frame {
  width: 84px; height: 84px; border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #fff, #fff8fb);
  border: 1.5px solid rgba(235,216,223,.96);
  box-shadow: var(--shadow-soft);
}
.avatar-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.versus-mark {
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .18em;
  color: var(--accent-strong);
  background: linear-gradient(180deg, #fff, #fff8fb);
  border: 1px solid #f0d8df;
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: var(--shadow-soft);
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin: 14px 0 30px;
}
.status-strip > div {
  padding: 18px 16px;
  border: 1px solid rgba(237,219,225,.96);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,249,251,.95));
  border-radius: 22px;
  position: relative;
  box-shadow: var(--shadow-soft);
}
.status-strip > div::before {
  content: "";
  position: absolute;
  left: 16px; top: 0;
  width: 42px; height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #f0b9c9);
}
.status-strip > div:nth-child(2)::before { background: linear-gradient(90deg, #bca0ff, #dfcbff); }
.status-strip > div:nth-child(3)::before { background: linear-gradient(90deg, #ffcf8d, #ffe8b7); }
.status-strip strong { font-size: 18px; }

.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 14px; }
.section-heading h2 { margin: 5px 0 0; font-size: 29px; letter-spacing: -.03em; }
.game-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.game-card {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 16px;
  text-align: left;
  padding: 22px;
  min-height: 136px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,251,252,.92));
  border: 1px solid rgba(238,219,225,.98);
  border-radius: 30px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
  box-shadow: var(--shadow-soft);
}
.game-card.active {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,239,245,.95));
}
.game-card:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #e5c0ce;
}
.game-card:disabled { cursor: default; opacity: .65; }
.game-copy strong { display: block; font-size: 21px; margin: 5px 0 6px; }
.game-copy small { line-height: 1.48; }
.game-badge {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 10px; font-weight: 900; letter-spacing: .04em;
  padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff7fa, #fbeef4);
  color: #9b7281;
  border: 1px solid #f0d9e1;
}
.game-icon {
  width: 60px; height: 60px; border-radius: 22px;
  background: linear-gradient(180deg, #fff4f8, #fffbf8);
  display: grid; place-items: center; position: relative; overflow: hidden;
  border: 1px solid #f1dfe5;
}
.game-icon::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.62), transparent 64%);
}
.omok-icon { grid-template-columns: repeat(3,8px); grid-auto-rows: 8px; gap: 5px; }
.omok-icon i { width: 8px; height: 8px; background: var(--ink); border-radius: 50%; display: block; position: relative; z-index: 1; }
.omok-icon i:nth-child(2), .omok-icon i:nth-child(4) { background: #fff; border: 1px solid #b9b1ab; }
.grid-icon::before {
  content:"";
  width: 28px; height: 28px;
  background:
    linear-gradient(90deg, transparent 31%, #96898d 32% 35%, transparent 36% 64%, #96898d 65% 68%, transparent 69%),
    linear-gradient(transparent 31%, #96898d 32% 35%, transparent 36% 64%, #96898d 65% 68%, transparent 69%);
  border: 1.5px solid #96898d;
  border-radius: 4px;
  position: relative; z-index: 1;
}
.number-icon { font-weight: 900; letter-spacing: -.08em; color: #8d727b; }
.cards-icon { display: flex; align-items: center; justify-content: center; gap: 3px; }
.cards-icon i { width: 12px; height: 21px; border: 1.5px solid #876d76; border-radius: 3px; transform: rotate(-9deg); background: transparent; position: relative; z-index: 1; }
.cards-icon i:nth-child(2) { transform: rotate(0); }
.cards-icon i:nth-child(3) { transform: rotate(9deg); }
.connection-state {
  text-align: center;
  font-size: 12px;
  margin: 18px 0 0;
  padding: 12px 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(240,223,228,.95);
  border-radius: 999px;
}

.profile-dialog {
  width: min(92vw, 440px);
  border: 0;
  border-radius: 32px;
  padding: 0;
  background: linear-gradient(180deg, #fffdfd, #fff8fb);
  box-shadow: 0 28px 90px rgba(56, 33, 40, .22);
}
.profile-dialog::backdrop { background: rgba(39,29,32,.28); backdrop-filter: blur(8px); }
.profile-dialog form { padding: 24px; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; }
.dialog-head h2 { margin: 4px 0 0; }
.icon-close {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid #f1dce3;
  background: linear-gradient(180deg, #fff6fa, #f8eaf0); position: relative;
}
.icon-close::before, .icon-close::after { content:""; position:absolute; width:16px; height:1.5px; background:#725c62; top:20px; left:12px; }
.icon-close::before { transform: rotate(45deg); }
.icon-close::after { transform: rotate(-45deg); }
.profile-preview { margin: 20px 0 12px; display: grid; place-items: center; }
.profile-preview .avatar-frame { width: 128px; height: 128px; border-radius: 34px; }
.helper { font-size: 12px; line-height: 1.6; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

@media (max-width: 720px) {
  .screen { padding-left: 18px; padding-right: 18px; }
  .login-wrap { grid-template-columns: 1fr; align-content: center; gap: 26px; }
  .brand-block h1 { font-size: 54px; }
  .login-card { padding: 24px; }
  .versus { padding: 18px 14px; }
  .player-card, .player-card.reverse { grid-template-columns: 62px 1fr; gap: 10px; text-align: left; }
  .player-card.reverse .avatar-frame { order: 0; }
  .avatar-frame { width: 62px; height: 62px; border-radius: 20px; }
  .player-copy strong { font-size: 18px; }
  .status-strip { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .status-strip > div { padding: 14px 11px 13px; border-radius: 18px; }
  .status-strip strong { font-size: 15px; }
  .section-heading { align-items: center; }
  .section-heading h2 { font-size: 25px; }
  .game-grid { grid-template-columns: 1fr; }
  .game-card { min-height: 124px; border-radius: 26px; }
}


/* v1.3 — login typography + password visibility + profile stats layout */
.login-wrap,
.login-wrap input,
.login-wrap button,
.login-wrap .field-label,
.login-wrap .subcopy,
.login-wrap .eyebrow {
  font-family: "Jua", "Gowun Dodum", sans-serif;
}
.login-wrap input {
  letter-spacing: .01em;
}
.login-wrap input::placeholder {
  font-family: "Jua", "Gowun Dodum", sans-serif;
}

.password-wrap {
  position: relative;
}
.password-wrap input {
  padding-right: 58px;
}
.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #a1848e;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.password-toggle:hover,
.password-toggle:focus-visible {
  background: #fff0f5;
  color: var(--accent-strong);
  outline: none;
}
.password-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.password-toggle .eye-closed { display: none; }
.password-toggle.showing .eye-open { display: none; }
.password-toggle.showing .eye-closed { display: block; }

.player-copy .player-level,
.player-copy .player-record,
.player-copy .player-waiting {
  display: block;
}
.player-copy .player-level {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}
.player-copy .player-record {
  margin-top: 3px;
  color: #6f5a61;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
}
.player-copy .player-waiting {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 720px) {
  .player-copy .player-record { font-size: 13px; }
}


/* v1.4 — illustrated character avatars + image logo */
.main-logo {
  display: block;
  width: min(100%, 620px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(188, 119, 143, .13));
}
.login-tagline {
  margin: 14px 0 0;
  text-align: center;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 17px;
  color: #8d747c;
}
.lobby-brand {
  min-width: 0;
  display: flex;
  align-items: center;
}
.lobby-logo {
  display: block;
  width: min(440px, 68vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(188, 119, 143, .10));
}
.avatar-frame {
  background:
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.96), rgba(255,237,244,.92) 58%, rgba(248,239,255,.9));
}
.player-card.reverse .avatar-frame {
  background:
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.96), rgba(238,246,255,.92) 58%, rgba(243,240,255,.9));
}
.avatar-frame img {
  object-position: center 24%;
}
.profile-preview .avatar-frame img {
  object-position: center 20%;
}
@media (max-width: 720px) {
  .login-wrap {
    padding-top: 10px;
  }
  .main-logo {
    width: min(100%, 520px);
    margin: 0 auto;
  }
  .login-tagline {
    font-size: 15px;
    margin-top: 8px;
  }
  .topbar {
    align-items: center;
  }
  .lobby-logo {
    width: min(300px, 68vw);
  }
  .ghost-btn {
    flex: 0 0 auto;
  }
}


/* v1.5 — Byeoli mascot + stat wrapping fixes + cleaner login button */
.login-card::after {
  display: none;
}

.brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-mascot {
  margin-top: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.login-mascot img {
  width: clamp(120px, 22vw, 168px);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 20px rgba(170, 120, 135, .12));
}
.login-mascot p {
  margin: 0;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 14px;
  color: #9a7a84;
}

.status-strip {
  align-items: stretch;
}
.status-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.status-label {
  display: block;
  line-height: 1.18;
}
.status-value, .status-strip strong {
  display: block;
  margin-top: 10px;
  line-height: 1.18;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
#myRecord {
  font-size: 16px;
}
#myStreak, #myCoins {
  font-size: 20px;
}

@media (max-width: 720px) {
  .login-mascot {
    margin-top: 8px;
  }
  .login-mascot img {
    width: 126px;
  }
  .login-mascot p {
    font-size: 13px;
  }
  .status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .status-strip > div {
    min-height: 88px;
    padding: 14px 10px 12px;
  }
  .status-label {
    font-size: 11px;
    letter-spacing: -0.03em;
  }
  .status-value, .status-strip strong {
    margin-top: 8px;
  }
  #myRecord {
    font-size: 13px;
  }
  #myStreak, #myCoins {
    font-size: 18px;
  }
}


/* v1.6 HARD FIXES — cache-safe layout */
.login-card::before,
.login-card::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.primary-btn {
  position: relative;
  z-index: 2;
  background: #292323 !important;
  overflow: hidden;
}

.brand-block::before,
.brand-block::after {
  opacity: .35;
}

/* Byeoli: clearly visible between tagline and login card */
.login-mascot {
  display: flex !important;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 132px;
  margin: 4px 0 -4px;
  overflow: visible;
}
.login-mascot img {
  display: block !important;
  width: 132px !important;
  height: 132px !important;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 18px rgba(128, 87, 98, .12));
}

/* Stats: label = first row / value = second row, always */
.status-card {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
  min-width: 0;
}
.status-label {
  display: block !important;
  width: 100%;
  line-height: 1.15 !important;
  white-space: nowrap;
}
.status-value-row {
  display: flex !important;
  align-items: flex-end;
  width: 100%;
  min-height: 32px;
  padding-top: 9px;
}
.status-value-row strong {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  font-family: "Jua", "Gowun Dodum", sans-serif;
}
#myRecord { font-size: 16px !important; }
#myStreak, #myCoins { font-size: 20px !important; }

@media (max-width: 720px) {
  .login-mascot {
    height: 112px;
    margin: 3px 0 -2px;
  }
  .login-mascot img {
    width: 112px !important;
    height: 112px !important;
  }

  .status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .status-strip > div {
    min-height: 94px !important;
    padding: 14px 10px 12px !important;
  }
  .status-label {
    font-size: 11px !important;
    letter-spacing: -.04em;
  }
  .status-value-row {
    min-height: 30px;
    padding-top: 10px;
  }
  #myRecord {
    font-size: 13px !important;
  }
  #myStreak, #myCoins {
    font-size: 18px !important;
  }
}


/* v1.7 — Byeoli peeking from the login card */
.login-mascot {
  display: none !important;
}

.login-card {
  position: relative;
  overflow: visible !important;
}

.login-peek-mascot {
  position: absolute;
  right: 20px;
  top: -52px;
  width: 122px;
  height: 84px;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
}

.login-peek-mascot img {
  display: block;
  width: 122px;
  height: 122px;
  object-fit: contain;
  object-position: top center;
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 14px rgba(140, 96, 110, .12));
}

@media (max-width: 720px) {
  .login-peek-mascot {
    right: 18px;
    top: -48px;
    width: 112px;
    height: 76px;
  }

  .login-peek-mascot img {
    width: 112px;
    height: 112px;
  }
}


/* v1.8 — actual applied peek mascot + explicit version badge */
.login-mascot { display: none !important; }

.login-card {
  position: relative !important;
  overflow: visible !important;
}

.login-card::before,
.login-card::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

.primary-btn {
  background: #251f20 !important;
  overflow: hidden !important;
}

/* tiny build marker so we can verify the fresh deployment */
.build-badge {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: 10px;
  color: #d6c5cb;
  letter-spacing: .08em;
  z-index: 1;
  pointer-events: none;
}

/* Byeoli peeking from the top-right edge of the login card */
.login-peek-mascot {
  position: absolute !important;
  right: 16px;
  top: -44px;
  width: 104px;
  height: 66px;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
}

.login-peek-mascot img {
  display: block !important;
  width: 104px;
  height: 104px;
  object-fit: contain;
  object-position: top center;
  transform: translateY(-6px);
  filter: drop-shadow(0 8px 14px rgba(137, 96, 110, .14));
}

@media (max-width: 720px) {
  .login-peek-mascot {
    right: 14px;
    top: -40px;
    width: 96px;
    height: 60px;
  }

  .login-peek-mascot img {
    width: 96px;
    height: 96px;
  }

  .build-badge {
    right: 16px;
    bottom: 12px;
    font-size: 9px;
  }
}


/* v1.9 — new Byeoli peeking illustration */
.build-badge {
  display: none !important;
}

.login-card {
  position: relative !important;
  overflow: visible !important;
  margin-top: 38px;
}

.login-peek-mascot {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: -118px !important;
  transform: translateX(-50%);
  width: 190px !important;
  height: 126px !important;
  overflow: hidden !important;
  z-index: 8 !important;
  pointer-events: none;
}

.login-peek-mascot img {
  display: block !important;
  width: 190px !important;
  height: 190px !important;
  object-fit: contain !important;
  object-position: top center !important;
  transform: none !important;
  filter: drop-shadow(0 10px 18px rgba(123, 82, 96, .15));
}

@media (max-width: 720px) {
  .login-card {
    margin-top: 34px;
  }

  .login-peek-mascot {
    top: -102px !important;
    width: 168px !important;
    height: 110px !important;
  }

  .login-peek-mascot img {
    width: 168px !important;
    height: 168px !important;
  }
}


/* v1.10 — move Byeoli behind the form, slightly to the right */
.login-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  margin-top: 18px !important;
}

/* keep all actual form content above Byeoli */
.login-card > *:not(.login-peek-mascot) {
  position: relative;
  z-index: 2;
}

.login-peek-mascot {
  position: absolute !important;
  left: auto !important;
  right: -12px !important;
  top: 34px !important;
  width: 178px !important;
  height: 188px !important;
  transform: none !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none;
  opacity: .5;
}

.login-peek-mascot img {
  display: block !important;
  width: 178px !important;
  height: 178px !important;
  object-fit: contain !important;
  object-position: center top !important;
  filter: drop-shadow(0 8px 14px rgba(126, 93, 103, .10));
}

/* gently soften the art so it feels like a background layer */
.login-peek-mascot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(255,255,255,.10), rgba(255,255,255,.42) 38%, rgba(255,255,255,.58));
}

@media (max-width: 720px) {
  .login-card {
    margin-top: 14px !important;
  }

  .login-peek-mascot {
    right: -18px !important;
    top: 52px !important;
    width: 152px !important;
    height: 160px !important;
    opacity: .48;
  }

  .login-peek-mascot img {
    width: 152px !important;
    height: 152px !important;
  }
}


/* v1.11 — layout adjusted to match the second reference */
#loginView .brand-block {
  margin-bottom: 8px;
}

#loginView .login-tagline {
  position: relative;
  z-index: 3;
  margin-top: 10px;
  margin-bottom: 8px;
}

/* Put Byeoli between the tagline and the card, centered like the reference */
#loginView .login-card {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
  margin-top: 108px !important;
  padding-top: 34px !important;
}

#loginView .login-card > *:not(.login-peek-mascot) {
  position: relative;
  z-index: 3;
}

#loginView .login-peek-mascot {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: -132px !important;
  transform: translateX(-50%) !important;
  width: 214px !important;
  height: 170px !important;
  overflow: visible !important;
  z-index: 2 !important;
  pointer-events: none;
  opacity: 1 !important;
}

#loginView .login-peek-mascot::after {
  display: none !important;
}

#loginView .login-peek-mascot img {
  display: block !important;
  width: 214px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  filter: drop-shadow(0 10px 16px rgba(149, 108, 122, .14)) !important;
}

/* keep the button clean */
#loginView .login-card::before,
#loginView .login-card::after {
  display: none !important;
  content: none !important;
}

#loginView .primary-btn {
  background: #261f20 !important;
}

/* subtle decorative styling closer to the reference without changing the layout too much */
#loginView .login-card {
  border-style: solid !important;
  border-color: #edd7df !important;
  box-shadow: 0 22px 38px rgba(97, 75, 83, .08), inset 0 0 0 1px rgba(255,255,255,.68);
}

@media (max-width: 720px) {
  #loginView .login-tagline {
    margin-bottom: 6px;
  }

  #loginView .login-card {
    margin-top: 98px !important;
    padding-top: 28px !important;
  }

  #loginView .login-peek-mascot {
    top: -122px !important;
    width: 190px !important;
    height: 152px !important;
  }

  #loginView .login-peek-mascot img {
    width: 190px !important;
  }
}


/* =========================================================
   v2.0 — REALTIME OMOK
   ========================================================= */

.omok-live-badge {
  color: #c05d80 !important;
  background: linear-gradient(180deg, #fff1f6, #ffe5ee) !important;
}

.omok-screen {
  padding-top: max(18px, env(safe-area-inset-top));
}

.omok-topbar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.round-icon-btn {
  width: 46px;
  height: 46px;
  border: 1px solid #eed8df;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
}

.back-arrow {
  width: 13px;
  height: 13px;
  border-left: 2.5px solid #6f575f;
  border-bottom: 2.5px solid #6f575f;
  transform: rotate(45deg);
  margin-left: 5px;
}

.omok-mini-logo {
  justify-self: center;
  width: min(270px, 50vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(178,112,134,.08));
}

.omok-round-pill {
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  color: #9a7782;
  border: 1px solid #edd7df;
  background: rgba(255,255,255,.74);
  border-radius: 999px;
  padding: 9px 12px;
  white-space: nowrap;
}

.omok-match-card {
  display: grid;
  grid-template-columns: 1fr minmax(130px, auto) 1fr;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
}

.omok-match-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,229,239,.5), transparent 35% 65%, rgba(234,244,255,.48));
  pointer-events: none;
}

.omok-player-slot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.omok-player-slot.right {
  flex-direction: row-reverse;
  text-align: right;
}

.omok-avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  overflow: visible;
  position: relative;
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #edd7df;
  box-shadow: var(--shadow-soft);
}

.omok-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.mini-stone {
  position: absolute;
  width: 18px;
  height: 18px;
  right: -4px;
  bottom: -3px;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(53,37,42,.18);
}

.mini-stone.black {
  background: radial-gradient(circle at 35% 28%, #5a5051, #1f1a1b 68%, #100d0e);
  border: 1px solid #171213;
}

.mini-stone.white {
  background: radial-gradient(circle at 34% 28%, #fff, #f5eceb 72%, #d7c8c5);
  border: 1px solid #c7b7b5;
}

.omok-player-copy {
  min-width: 0;
}

.omok-player-copy strong {
  display: block;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.omok-player-copy span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.omok-empty-avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  border: 1px dashed #dfcbd2;
  background: rgba(255,255,255,.6);
  flex: 0 0 auto;
}

.omok-turn-center {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  text-align: center;
}

.omok-turn-center strong {
  grid-column: 2;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 18px;
  line-height: 1.1;
}

.omok-turn-center small {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}

.stone-sample {
  width: 17px;
  height: 17px;
  border-radius: 50%;
}

.stone-sample.black {
  grid-column: 1;
  background: #231d1e;
}

.stone-sample.white {
  grid-column: 3;
  background: #fff;
  border: 1px solid #cdbfbc;
}

.omok-board-card {
  padding: 18px;
}

.omok-board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.omok-board-head h2 {
  font-family: "Jua", "Gowun Dodum", sans-serif;
  margin: 4px 0 0;
  font-size: 28px;
}

.omok-turn-badge {
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 12px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid #ead5dd;
  background: #fff6fa;
  color: #a67586;
}

.omok-turn-badge.my-turn {
  background: #ffe6ef;
  color: #c25e82;
  animation: turnPulse 1.6s ease-in-out infinite;
}

.omok-turn-badge.other-turn {
  background: #f4f0ff;
  color: #8875b2;
}

.omok-turn-badge.waiting {
  background: #fff7e8;
  color: #a98147;
}

.omok-turn-badge.finished {
  background: #eef8f2;
  color: #63866e;
}

@keyframes turnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,140,171,.12); }
  50% { box-shadow: 0 0 0 7px rgba(231,140,171,.10); }
}

.omok-board-wrap {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 9px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 25% 16%, rgba(255,255,255,.42), transparent 23%),
    linear-gradient(145deg, #efce9f, #e9c38c 52%, #dfb57a);
  border: 1px solid #d8ad75;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.35),
    inset 0 -4px 8px rgba(130,84,45,.08),
    0 12px 30px rgba(133,84,64,.10);
}

.omok-board {
  width: min(100%, 610px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  padding: 4px;
  touch-action: manipulation;
}

.omok-cell {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  appearance: none;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
}

.omok-cell::before,
.omok-cell::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: rgba(93,62,37,.55);
  pointer-events: none;
}

.omok-cell::before {
  height: 1px;
  width: 100%;
  top: 50%;
  left: 0;
}

.omok-cell::after {
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
}

.omok-cell.edge-left::before {
  left: 50%;
  width: 50%;
}

.omok-cell.edge-right::before {
  width: 50%;
}

.omok-cell.edge-top::after {
  top: 50%;
  height: 50%;
}

.omok-cell.edge-bottom::after {
  height: 50%;
}

.board-stone {
  position: absolute;
  z-index: 2;
  width: 78%;
  height: 78%;
  top: 11%;
  left: 11%;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(.96);
  animation: stoneDrop .14s ease-out;
}

@keyframes stoneDrop {
  from { transform: scale(.55); opacity: .35; }
  to { transform: scale(.96); opacity: 1; }
}

.board-stone.black {
  background:
    radial-gradient(circle at 32% 25%, #625759 0 5%, #30292a 38%, #171314 82%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.22),
    0 2px 3px rgba(60,37,24,.28);
}

.board-stone.white {
  background:
    radial-gradient(circle at 30% 22%, #fff 0 8%, #fffafa 42%, #e6dcd9 85%);
  border: 1px solid #cbbab6;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.75),
    0 2px 3px rgba(74,49,37,.16);
}

.omok-cell.last-move .board-stone::after {
  content: "";
  position: absolute;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  left: 40%;
  top: 40%;
  background: #ea779b;
  box-shadow: 0 0 0 1px rgba(255,255,255,.58);
}

.omok-cell:not(:disabled):hover::after {
  background: rgba(93,62,37,.70);
}

.omok-cell:not(:disabled)::selection {
  background: transparent;
}

.omok-footnote {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  margin-top: 10px;
  padding: 0 4px;
}

.omok-waiting-card {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid #ecd7df;
  background: rgba(255,255,255,.76);
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.omok-waiting-card strong {
  display: block;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  color: #745d65;
  font-size: 15px;
}

.omok-waiting-card small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
}

.waiting-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 8px;
}

.waiting-dots i {
  width: 7px;
  height: 7px;
  background: #dc91aa;
  border-radius: 50%;
  animation: waitingDot 1.1s ease-in-out infinite;
}

.waiting-dots i:nth-child(2) { animation-delay: .12s; }
.waiting-dots i:nth-child(3) { animation-delay: .24s; }

@keyframes waitingDot {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* Result dialog */
.omok-result-dialog {
  width: min(92vw, 410px);
  border: 0;
  padding: 26px 24px 24px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,226,237,.75), transparent 32%),
    linear-gradient(180deg, #fffdfd, #fff8fb);
  box-shadow: 0 28px 90px rgba(64,40,47,.24);
  text-align: center;
  overflow: hidden;
}

.omok-result-dialog::backdrop {
  background: rgba(40,29,32,.34);
  backdrop-filter: blur(7px);
}

.result-avatar {
  display: grid;
  place-items: center;
  margin: 4px 0 14px;
}

.result-avatar-frame {
  width: 118px;
  height: 118px;
  border-radius: 34px;
  overflow: hidden;
  border: 2px solid #f0d6df;
  background: #fff;
  box-shadow: 0 14px 30px rgba(192,116,143,.12);
}

.result-avatar-frame.winner {
  box-shadow: 0 0 0 6px #fff2d4, 0 14px 30px rgba(192,116,143,.12);
}

.result-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.omok-result-dialog h2 {
  font-family: "Jua", "Gowun Dodum", sans-serif;
  margin: 5px 0 8px;
  font-size: 31px;
}

.result-message {
  margin: 0 auto 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.reward-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.reward-box > div {
  min-width: 0;
  border: 1px solid #edd8df;
  background: rgba(255,255,255,.76);
  border-radius: 18px;
  padding: 10px 6px;
}

.reward-box > div span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.reward-box > div strong {
  display: block;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 17px;
  margin-top: 3px;
}

.result-actions {
  display: grid;
  gap: 8px;
}

.result-primary {
  margin-top: 0 !important;
}

.result-secondary,
.result-ghost {
  width: 100%;
  min-height: 46px;
}

.result-confetti i {
  position: absolute;
  width: 9px;
  height: 15px;
  border-radius: 5px;
  background: #ee9ab5;
  opacity: .7;
}

.result-confetti i:nth-child(1) { top: 20px; left: 35px; transform: rotate(25deg); }
.result-confetti i:nth-child(2) { top: 45px; right: 36px; transform: rotate(-30deg); background: #b9a1f2; }
.result-confetti i:nth-child(3) { top: 102px; left: 25px; transform: rotate(55deg); background: #f5cf76; }
.result-confetti i:nth-child(4) { top: 110px; right: 22px; transform: rotate(18deg); }
.result-confetti i:nth-child(5) { top: 14px; right: 92px; transform: rotate(70deg); background: #92c8ed; }

@media (max-width: 720px) {
  .omok-screen {
    padding-left: 12px;
    padding-right: 12px;
  }

  .omok-topbar {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .round-icon-btn {
    width: 40px;
    height: 40px;
  }

  .omok-mini-logo {
    width: min(215px, 48vw);
  }

  .omok-round-pill {
    font-size: 9px;
    padding: 8px 9px;
  }

  .omok-match-card {
    grid-template-columns: 1fr 104px 1fr;
    padding: 13px 10px;
    gap: 6px;
  }

  .omok-avatar,
  .omok-empty-avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .omok-player-slot {
    gap: 7px;
  }

  .omok-player-copy strong {
    font-size: 14px;
  }

  .omok-player-copy span {
    font-size: 9px;
  }

  .omok-turn-center strong {
    font-size: 15px;
  }

  .omok-turn-center small {
    font-size: 8px;
  }

  .stone-sample {
    width: 13px;
    height: 13px;
  }

  .omok-board-card {
    padding: 13px 10px 12px;
    border-radius: 28px;
  }

  .omok-board-head {
    margin-bottom: 10px;
    padding: 0 3px;
  }

  .omok-board-head h2 {
    font-size: 23px;
  }

  .omok-turn-badge {
    font-size: 10px;
    padding: 7px 10px;
  }

  .omok-board-wrap {
    padding: 6px;
    border-radius: 20px;
  }

  .omok-board {
    width: 100%;
    padding: 2px;
  }

  .board-stone {
    width: 82%;
    height: 82%;
    left: 9%;
    top: 9%;
  }

  .omok-footnote {
    font-size: 9px;
  }
}


/* =========================================================
   v2.1 — Byeoli + pink cloud landing placement
   ========================================================= */

#loginView .login-card {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
  margin-top: 122px !important;
  padding-top: 34px !important;
}

#loginView .login-card > *:not(.login-peek-mascot) {
  position: relative;
  z-index: 4;
}

/* Centered cloud mascot: slightly smaller than the mockup */
#loginView .login-peek-mascot {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: -154px !important;
  transform: translateX(-50%) !important;
  width: min(302px, 78vw) !important;
  height: auto !important;
  overflow: visible !important;
  z-index: 3 !important;
  opacity: 1 !important;
  pointer-events: none;
}

#loginView .login-peek-mascot::after {
  display: none !important;
  content: none !important;
}

#loginView .login-peek-mascot img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
  filter: drop-shadow(0 10px 18px rgba(160, 107, 128, .12)) !important;
}

/* keep the tagline fully readable above the mascot */
#loginView .login-tagline {
  position: relative;
  z-index: 5;
  margin-bottom: 0 !important;
}

/* cloud is the visual separator, so keep the card top line subtle */
#loginView .login-card {
  border-color: rgba(237, 215, 223, .72) !important;
}

@media (max-width: 720px) {
  #loginView .login-card {
    margin-top: 112px !important;
    padding-top: 30px !important;
  }

  #loginView .login-peek-mascot {
    top: -142px !important;
    width: min(270px, 76vw) !important;
  }
}


/* =========================================================
   v2.2 — DRESS-UP SHOP
   ========================================================= */

.lobby-action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.shop-open-btn {
  border: 1px solid #edcbd7;
  background: linear-gradient(180deg, #ef98b5, #dc789a);
  color: #fff;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  box-shadow: 0 9px 18px rgba(205, 105, 140, .15);
}

/* Decorated avatar base */
.avatar-stage {
  width: 84px;
  height: 84px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 27px;
  display: block;
}

.avatar-stage .avatar-frame {
  width: 100% !important;
  height: 100% !important;
  position: relative;
  z-index: 2;
}

.avatar-stage.bg-heart {
  background:
    radial-gradient(circle at 18% 22%, #ffc8d9 0 4px, transparent 4.5px),
    radial-gradient(circle at 82% 72%, #f5a8c0 0 4px, transparent 4.5px),
    linear-gradient(145deg, #fff3f7, #ffe5ef);
  padding: 4px;
}

.avatar-stage.bg-sparkle {
  background:
    radial-gradient(circle at 18% 20%, #fff8c9 0 3px, transparent 3.5px),
    radial-gradient(circle at 78% 24%, #e8dcff 0 3px, transparent 3.5px),
    radial-gradient(circle at 72% 78%, #cdeeff 0 3px, transparent 3.5px),
    linear-gradient(145deg, #fff8fc, #f2ecff);
  padding: 4px;
}

.avatar-stage.frame-pink {
  box-shadow:
    0 0 0 4px #ffd8e5,
    0 0 0 7px #fff4f8,
    0 10px 20px rgba(199, 107, 137, .12);
}

.avatar-stage.frame-cloud {
  box-shadow:
    -8px -2px 0 -1px #fff,
    8px -2px 0 -1px #fff,
    -9px 11px 0 -2px #ffeef5,
    9px 11px 0 -2px #ffeef5,
    0 0 0 4px #f6e9ff,
    0 9px 22px rgba(153, 119, 179, .12);
}

.avatar-deco {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

/* Pink ribbon */
.avatar-stage .head-ribbon {
  width: 38%;
  height: 25%;
  right: -2%;
  top: -9%;
}

.avatar-stage .head-ribbon::before,
.avatar-stage .head-ribbon::after {
  content: "";
  position: absolute;
  width: 47%;
  height: 72%;
  top: 8%;
  background: linear-gradient(145deg, #ffbad0, #e87fa2);
  border: 1px solid #d86f93;
}

.avatar-stage .head-ribbon::before {
  left: 0;
  border-radius: 75% 24% 65% 35%;
  transform: rotate(22deg);
}

.avatar-stage .head-ribbon::after {
  right: 0;
  border-radius: 24% 75% 35% 65%;
  transform: rotate(-22deg);
}

.avatar-stage .head-ribbon {
  filter: drop-shadow(0 3px 4px rgba(130,75,93,.14));
}

.avatar-stage .head-ribbon + .avatar-deco {}

.avatar-stage .head-ribbon::marker { display:none; }

/* bow center via box shadow pseudo trick */
.avatar-stage:has(.head-ribbon) .head-ribbon {
  background:
    radial-gradient(circle at 50% 48%, #ff91b5 0 16%, #d9688e 17% 23%, transparent 24%);
}

/* Crown */
.avatar-stage .head-crown {
  width: 39%;
  height: 28%;
  left: 31%;
  top: -17%;
  background: linear-gradient(180deg, #ffe992, #f4b94e);
  border: 1px solid #cc8f2e;
  clip-path: polygon(4% 88%, 1% 30%, 27% 58%, 43% 5%, 60% 57%, 92% 25%, 96% 88%);
  filter: drop-shadow(0 3px 4px rgba(136,90,23,.16));
}

/* Round glasses */
.avatar-stage .face-round-glasses {
  left: 16%;
  top: 34%;
  width: 68%;
  height: 29%;
  background:
    radial-gradient(circle at 24% 50%, transparent 0 31%, #745768 33% 39%, transparent 41%),
    radial-gradient(circle at 76% 50%, transparent 0 31%, #745768 33% 39%, transparent 41%),
    linear-gradient(#745768,#745768) center 50% / 18% 2px no-repeat;
}

/* Heart glasses */
.avatar-stage .face-heart-glasses {
  left: 15%;
  top: 34%;
  width: 70%;
  height: 31%;
}

.avatar-stage .face-heart-glasses::before,
.avatar-stage .face-heart-glasses::after {
  content: "";
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  top: 2%;
  background: rgba(238, 115, 157, .28);
  border: 2px solid #d96791;
  transform: rotate(-45deg);
  border-radius: 50% 50% 0 50%;
}

.avatar-stage .face-heart-glasses::before { left: 9%; }
.avatar-stage .face-heart-glasses::after { right: 9%; }

.avatar-stage:has(.face-heart-glasses) .face-heart-glasses {
  background: linear-gradient(#d96791,#d96791) center 42% / 18% 2px no-repeat;
}

/* Larger preview sizes */
.profile-preview .avatar-stage {
  width: 128px;
  height: 128px;
  border-radius: 35px;
}

.shop-size {
  width: 150px !important;
  height: 150px !important;
  border-radius: 42px !important;
}

/* Shop dialog */
.shop-dialog {
  width: min(94vw, 650px);
  max-height: min(88dvh, 760px);
  border: 0;
  padding: 0;
  border-radius: 34px;
  background: linear-gradient(180deg, #fffdfd, #fff8fb);
  box-shadow: 0 28px 90px rgba(57,35,43,.24);
  overflow: hidden;
}

.shop-dialog::backdrop {
  background: rgba(42,29,34,.32);
  backdrop-filter: blur(8px);
}

.shop-shell {
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  padding: 24px;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.shop-header h2 {
  margin: 4px 0 0;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 30px;
}

.shop-header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.shop-coin-pill {
  min-width: 94px;
  padding: 8px 12px;
  background: #fff8e9;
  border: 1px solid #efd9a4;
  border-radius: 999px;
  text-align: center;
}

.shop-coin-pill span {
  display: block;
  font-size: 8px;
  letter-spacing: .13em;
  color: #a38346;
}

.shop-coin-pill strong {
  display: block;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  color: #765a2d;
  font-size: 17px;
  margin-top: 1px;
}

.shop-preview-card {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #edd9e0;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,224,235,.75), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(250,243,255,.88));
  border-radius: 28px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.shop-avatar-preview {
  width: 160px;
  min-width: 160px;
  display: grid;
  place-items: center;
}

.shop-preview-copy strong {
  display: block;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 25px;
}

.shop-preview-copy span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.5;
}

.shop-reset-btn {
  margin-top: 12px;
  border: 1px solid #e8d5dc;
  background: rgba(255,255,255,.76);
  color: #8a6e78;
  border-radius: 999px;
  padding: 8px 13px;
  font-family: "Jua", "Gowun Dodum", sans-serif;
}

.shop-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 18px 0 10px;
  scrollbar-width: none;
}

.shop-tabs::-webkit-scrollbar { display: none; }

.shop-tab {
  flex: 0 0 auto;
  border: 1px solid #edd8df;
  background: #fff;
  color: #927780;
  border-radius: 999px;
  padding: 9px 14px;
  font-family: "Jua", "Gowun Dodum", sans-serif;
}

.shop-tab.active {
  background: #e98cab;
  border-color: #e98cab;
  color: #fff;
  box-shadow: 0 7px 16px rgba(214,111,147,.15);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  padding: 4px 0 10px;
}

.shop-item-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #eedce2;
  background: rgba(255,255,255,.82);
  border-radius: 24px;
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0,1fr);
  grid-template-rows: 1fr auto;
  column-gap: 11px;
}

.shop-item-card.is-equipped {
  border-color: #e48cab;
  box-shadow: inset 0 0 0 1px #f3b4c8;
  background: #fff7fa;
}

.shop-item-demo {
  grid-row: 1 / 3;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff4f8, #f4efff);
  position: relative;
  overflow: hidden;
  border: 1px solid #f0dfe5;
}

.shop-demo-face {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  left: 11px;
  top: 14px;
  background:
    radial-gradient(circle at 36% 43%, #5e4c51 0 2px, transparent 2.5px),
    radial-gradient(circle at 65% 43%, #5e4c51 0 2px, transparent 2.5px),
    linear-gradient(145deg, #ffe1d5, #f7c9bb);
  border: 1px solid #e7b9ad;
}

.shop-item-copy {
  min-width: 0;
  align-self: center;
}

.shop-item-copy small {
  display: block;
  color: #b18c99;
  font-size: 9px;
}

.shop-item-copy strong {
  display: block;
  margin-top: 2px;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-item-action {
  grid-column: 2;
  justify-self: stretch;
  margin-top: 8px;
  border-radius: 999px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #ead7de;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 11px;
}

.shop-item-action.buy {
  background: #292122;
  color: #fff;
  border-color: #292122;
}

.shop-item-action.owned {
  background: #ffeaf1;
  color: #b85e7e;
}

.shop-item-action.equipped {
  background: #f1edf4;
  color: #a193a0;
}

/* Small shop visual demos */
.shop-demo-deco {
  position: absolute;
  z-index: 4;
}

/* Reuse the same look, translated for demo tiles */
.shop-item-demo.head-ribbon .shop-demo-deco {
  width: 27px;
  height: 18px;
  right: 2px;
  top: 4px;
  background:
    radial-gradient(circle at 50% 50%, #ff8fb2 0 18%, transparent 20%);
}

.shop-item-demo.head-ribbon .shop-demo-deco::before,
.shop-item-demo.head-ribbon .shop-demo-deco::after {
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  top:2px;
  background:#f28cac;
  border:1px solid #d96c91;
}
.shop-item-demo.head-ribbon .shop-demo-deco::before {
  left:0;
  border-radius:80% 20% 70% 30%;
  transform:rotate(24deg);
}
.shop-item-demo.head-ribbon .shop-demo-deco::after {
  right:0;
  border-radius:20% 80% 30% 70%;
  transform:rotate(-24deg);
}

.shop-item-demo.head-crown .shop-demo-deco {
  width: 29px;
  height: 20px;
  left: 18px;
  top: 2px;
  background: linear-gradient(#ffe78a,#efb347);
  border: 1px solid #cf9636;
  clip-path: polygon(3% 88%, 0 30%, 28% 58%, 44% 3%, 61% 57%, 94% 25%, 97% 88%);
}

.shop-item-demo.face-round-glasses .shop-demo-deco {
  width: 40px;
  height: 18px;
  left: 12px;
  top: 27px;
  background:
    radial-gradient(circle at 23% 50%, transparent 0 29%, #795a69 32% 39%, transparent 42%),
    radial-gradient(circle at 77% 50%, transparent 0 29%, #795a69 32% 39%, transparent 42%),
    linear-gradient(#795a69,#795a69) center / 16% 2px no-repeat;
}

.shop-item-demo.face-heart-glasses .shop-demo-deco {
  width: 43px;
  height: 19px;
  left: 11px;
  top: 27px;
}
.shop-item-demo.face-heart-glasses .shop-demo-deco::before,
.shop-item-demo.face-heart-glasses .shop-demo-deco::after {
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  border:2px solid #d76790;
  background:rgba(239,116,158,.22);
  transform:rotate(-45deg);
  border-radius:50% 50% 0 50%;
  top:1px;
}
.shop-item-demo.face-heart-glasses .shop-demo-deco::before { left:5px; }
.shop-item-demo.face-heart-glasses .shop-demo-deco::after { right:5px; }

.shop-item-demo.frame-pink {
  box-shadow: inset 0 0 0 4px #ffd5e2;
}

.shop-item-demo.frame-cloud {
  box-shadow:
    inset 0 0 0 3px #f1e8ff,
    -4px 0 0 -1px #fff,
    4px 0 0 -1px #fff;
}

.shop-item-demo.bg-heart {
  background:
    radial-gradient(circle at 18% 20%, #f4a1bd 0 3px, transparent 3.5px),
    radial-gradient(circle at 80% 70%, #ffc6d9 0 4px, transparent 4.5px),
    #fff0f5;
}

.shop-item-demo.bg-sparkle {
  background:
    radial-gradient(circle at 20% 22%, #ffdd78 0 3px, transparent 3.5px),
    radial-gradient(circle at 78% 24%, #bca6ef 0 3px, transparent 3.5px),
    radial-gradient(circle at 65% 78%, #9fd8f4 0 3px, transparent 3.5px),
    #f7f2ff;
}

.shop-message {
  min-height: 22px;
  margin: 5px 4px 0;
  text-align: center;
  color: #ba6481;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 12px;
}

.shop-message.error {
  color: #b24f4f;
}

@media (max-width: 720px) {
  .lobby-action-buttons {
    gap: 6px;
  }

  .secondary-btn,
  .shop-open-btn {
    padding: 10px 12px;
    font-size: 13px;
  }

  .player-card .avatar-stage,
  .player-card.reverse .avatar-stage {
    width: 62px;
    height: 62px;
    border-radius: 21px;
  }

  .shop-shell {
    padding: 19px 16px 20px;
  }

  .shop-header h2 {
    font-size: 26px;
  }

  .shop-coin-pill {
    min-width: 82px;
  }

  .shop-preview-card {
    padding: 16px 12px;
    gap: 13px;
  }

  .shop-avatar-preview {
    min-width: 128px;
    width: 128px;
  }

  .shop-size {
    width: 124px !important;
    height: 124px !important;
    border-radius: 34px !important;
  }

  .shop-preview-copy strong {
    font-size: 21px;
  }

  .shop-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .shop-item-card {
    grid-template-columns: 54px minmax(0,1fr);
    padding: 11px 9px;
    border-radius: 20px;
    column-gap: 7px;
  }

  .shop-item-demo {
    width: 51px;
    height: 58px;
    border-radius: 17px;
  }

  .shop-demo-face {
    width: 35px;
    height: 35px;
    left: 8px;
    top: 15px;
  }

  .shop-item-copy strong {
    font-size: 13px;
  }

  .shop-item-action {
    font-size: 10px;
    min-height: 31px;
    padding: 6px 5px;
  }
}


/* =========================================================
   v2.3 — IMAGE-BASED SHOP ITEMS
   ========================================================= */

.avatar-stage {
  position: relative;
  overflow: visible;
}

.avatar-stage .avatar-base {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(145deg, #fff8fb, #f8f0ff);
  box-shadow: 0 6px 16px rgba(130, 90, 110, .08);
}

.avatar-stage .avatar-base img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-layer {
  position: absolute;
  pointer-events: none;
  image-rendering: auto;
}

.avatar-background {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: inherit;
}

.avatar-frame {
  z-index: 3;
}

.avatar-frame.avatar-base {
  z-index: 3;
}

.avatar-stage > .avatar-frame:not(.avatar-base),
.avatar-layer.avatar-frame {
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: contain;
  z-index: 5;
}

.avatar-head {
  z-index: 6;
}

.avatar-face {
  z-index: 7;
}

.item-ribbonPink.avatar-head {
  width: 64%;
  top: -10%;
  right: -8%;
  transform: rotate(8deg);
}

.item-crownGold.avatar-head {
  width: 58%;
  top: -18%;
  left: 21%;
}

.item-glassesRound.avatar-face {
  width: 67%;
  left: 16%;
  top: 36%;
}

.item-glassesHeart.avatar-face {
  width: 71%;
  left: 13%;
  top: 35%;
}

.shop-item-demo {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fff7fb, #f6f0ff);
  border: 1px solid #f0dfe6;
}

.shop-item-demo .avatar-stage {
  width: 54px;
  height: 54px;
  border-radius: 18px;
}

.shop-demo-size {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
}

.shop-item-card {
  align-items: center;
}

.shop-item-card .shop-item-demo {
  grid-row: 1 / 3;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  overflow: visible;
}

.shop-item-copy small {
  letter-spacing: .02em;
}

.shop-message {
  transition: color .18s ease;
}

@media (max-width: 720px) {
  .item-ribbonPink.avatar-head {
    width: 64%;
    top: -10%;
    right: -9%;
  }

  .item-crownGold.avatar-head {
    width: 57%;
    top: -17%;
    left: 22%;
  }

  .item-glassesRound.avatar-face {
    width: 68%;
    left: 15%;
    top: 36%;
  }

  .item-glassesHeart.avatar-face {
    width: 72%;
    left: 12%;
    top: 35%;
  }

  .shop-item-card .shop-item-demo {
    width: 54px;
    height: 58px;
    border-radius: 18px;
  }

  .shop-item-demo .avatar-stage,
  .shop-demo-size {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
  }
}


/* =========================================================
   v2.4 — FIXED ITEM LAYERS + CUSTOM PURCHASE CONFIRM
   ========================================================= */

/* Important: layer names no longer inherit the old avatar-frame box rules */
.avatar-layer.avatar-background,
.avatar-layer.avatar-frame,
.avatar-layer.avatar-head,
.avatar-layer.avatar-face {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
}

/* The character itself */
.avatar-stage {
  position: relative !important;
  isolation: isolate;
}

.avatar-stage .avatar-base {
  z-index: 3 !important;
}

/* Background sits behind the transparent character */
.avatar-layer.avatar-background {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  border-radius: inherit !important;
}

/* Decorative frames always stay aligned to the portrait square */
.avatar-layer.avatar-frame {
  left: 50% !important;
  top: 50% !important;
  width: 106% !important;
  height: 106% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  z-index: 5 !important;
}

/* ---------- Princess item coordinates ---------- */
.avatar-princess .item-ribbonPink.avatar-head {
  width: 58% !important;
  height: auto !important;
  right: -4% !important;
  top: -5% !important;
  left: auto !important;
  transform: rotate(5deg) !important;
}

.avatar-princess .item-crownGold.avatar-head {
  width: 48% !important;
  height: auto !important;
  left: 26% !important;
  top: -10% !important;
  transform: none !important;
}

.avatar-princess .item-glassesRound.avatar-face {
  width: 56% !important;
  height: auto !important;
  left: 22% !important;
  top: 26% !important;
  transform: none !important;
}

.avatar-princess .item-glassesHeart.avatar-face {
  width: 60% !important;
  height: auto !important;
  left: 20% !important;
  top: 25% !important;
  transform: none !important;
}

/* ---------- Nobi item coordinates ---------- */
.avatar-nobi .item-ribbonPink.avatar-head {
  width: 52% !important;
  height: auto !important;
  right: -1% !important;
  top: -5% !important;
  left: auto !important;
  transform: rotate(5deg) !important;
}

.avatar-nobi .item-crownGold.avatar-head {
  width: 46% !important;
  height: auto !important;
  left: 27% !important;
  top: -8% !important;
  transform: none !important;
}

.avatar-nobi .item-glassesRound.avatar-face {
  width: 54% !important;
  height: auto !important;
  left: 28% !important;
  top: 28% !important;
  transform: rotate(5deg) !important;
}

.avatar-nobi .item-glassesHeart.avatar-face {
  width: 58% !important;
  height: auto !important;
  left: 26% !important;
  top: 27% !important;
  transform: rotate(5deg) !important;
}

/* Shop cards: nothing may escape the preview box anymore */
.shop-item-card .shop-item-demo {
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

.shop-item-demo .avatar-stage,
.shop-item-demo .shop-demo-size {
  width: 54px !important;
  height: 54px !important;
  border-radius: 17px !important;
}

/* Slightly shrink frames inside tiny shop thumbnails */
.shop-item-demo .avatar-layer.avatar-frame {
  width: 100% !important;
  height: 100% !important;
}

/* Larger shop preview should be fully visible */
.shop-avatar-preview {
  overflow: visible !important;
}

.purchase-size {
  width: 142px !important;
  height: 142px !important;
  border-radius: 40px !important;
}

/* ---------- Cute purchase confirmation ---------- */
.purchase-dialog {
  width: min(88vw, 360px);
  border: 0;
  padding: 0;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% -4%, rgba(255,216,231,.85), transparent 36%),
    linear-gradient(180deg, #fffdfd, #fff7fb);
  box-shadow: 0 28px 80px rgba(58,35,43,.24);
  overflow: hidden;
}

.purchase-dialog::backdrop {
  background: rgba(44,30,35,.32);
  backdrop-filter: blur(8px);
}

.purchase-shell {
  position: relative;
  padding: 26px 24px 24px;
  text-align: center;
}

.purchase-shell h2 {
  margin: 4px 0 14px;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 30px;
}

.purchase-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #efd8e1;
  background: rgba(255,255,255,.82);
  color: #9a7782;
  font-size: 24px;
  line-height: 1;
}

.purchase-preview {
  display: grid;
  place-items: center;
  min-height: 154px;
  margin: 4px auto 12px;
}

.purchase-item-name {
  display: block;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 22px;
}

.purchase-question {
  margin: 7px 0 17px;
  color: var(--muted);
  font-size: 12px;
}

.purchase-price-row,
.purchase-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 12px;
}

.purchase-price-row {
  background: #fff2f6;
  border: 1px solid #f1d5df;
}

.purchase-balance-row {
  margin-top: 7px;
  background: #fff9e9;
  border: 1px solid #efe0b5;
}

.purchase-price-row span,
.purchase-balance-row span {
  color: var(--muted);
}

.purchase-price-row strong,
.purchase-balance-row strong {
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 15px;
}

.purchase-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
  margin-top: 18px;
}

.purchase-cancel-btn,
.purchase-confirm-btn {
  min-height: 48px;
  border-radius: 999px;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 15px;
}

.purchase-cancel-btn {
  border: 1px solid #ead7de;
  background: #fff;
  color: #8f737d;
}

.purchase-confirm-btn {
  border: 0;
  background: linear-gradient(180deg, #eb94b2, #d96f94);
  color: #fff;
  box-shadow: 0 9px 18px rgba(210,102,140,.18);
}

.purchase-confirm-btn:disabled {
  background: #d8d0d2;
  color: #fff;
  box-shadow: none;
}

@media (max-width: 720px) {
  .shop-item-demo .avatar-stage,
  .shop-item-demo .shop-demo-size {
    width: 47px !important;
    height: 47px !important;
  }

  .purchase-size {
    width: 128px !important;
    height: 128px !important;
    border-radius: 36px !important;
  }

  .purchase-preview {
    min-height: 140px;
  }
}


/* =========================================================
   v2.5 — CLEAN AVATAR LAYER SYSTEM
   ========================================================= */

/* Old item-layer rules are superseded by these dedicated layer classes. */
.avatar-stage {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.avatar-stage .avatar-base {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 3 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  background: linear-gradient(145deg, #fff8fb, #f7f0ff) !important;
}

.avatar-stage .avatar-base > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.avatar-layer {
  position: absolute !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  max-width: none !important;
  max-height: none !important;
}

.layer-background {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  z-index: 1 !important;
}

.layer-frame {
  left: 50% !important;
  top: 50% !important;
  width: 111% !important;
  height: 111% !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  z-index: 5 !important;
}

/* Wearables use tightly-cropped PNGs from v2.5 */
.layer-head,
.layer-face {
  height: auto !important;
}

.layer-head {
  z-index: 7 !important;
}

.layer-face {
  z-index: 8 !important;
}

/* ---------- Princess calibrated positions ---------- */
.avatar-princess .item-ribbonPink.layer-head {
  width: 48% !important;
  right: -1% !important;
  top: -4% !important;
  left: auto !important;
  transform: rotate(6deg) !important;
}

.avatar-princess .item-crownGold.layer-head {
  width: 42% !important;
  left: 29% !important;
  top: -7% !important;
  transform: none !important;
}

.avatar-princess .item-glassesRound.layer-face {
  width: 47% !important;
  left: 26.5% !important;
  top: 25% !important;
  transform: none !important;
}

.avatar-princess .item-glassesHeart.layer-face {
  width: 51% !important;
  left: 24.5% !important;
  top: 24% !important;
  transform: none !important;
}

/* ---------- Nobi calibrated positions ---------- */
.avatar-nobi .item-ribbonPink.layer-head {
  width: 44% !important;
  right: 1% !important;
  top: -2% !important;
  left: auto !important;
  transform: rotate(5deg) !important;
}

.avatar-nobi .item-crownGold.layer-head {
  width: 39% !important;
  left: 31% !important;
  top: -4% !important;
  transform: none !important;
}

.avatar-nobi .item-glassesRound.layer-face {
  width: 44% !important;
  left: 29% !important;
  top: 27% !important;
  transform: rotate(3deg) !important;
}

.avatar-nobi .item-glassesHeart.layer-face {
  width: 48% !important;
  left: 27% !important;
  top: 26% !important;
  transform: rotate(3deg) !important;
}

/* Frames hug the square; backgrounds remain behind the transparent portraits. */
.item-framePink.layer-frame,
.item-frameCloud.layer-frame {
  width: 112% !important;
  height: 112% !important;
}

/* Tiny shop thumbnails: use a slightly tighter frame so it doesn't look oversized. */
.shop-item-demo {
  overflow: hidden !important;
}

.shop-item-demo .avatar-stage {
  overflow: visible !important;
}

.shop-item-demo .layer-frame {
  width: 100% !important;
  height: 100% !important;
}

.shop-item-demo .avatar-princess .item-ribbonPink.layer-head,
.shop-item-demo .avatar-nobi .item-ribbonPink.layer-head {
  width: 45% !important;
}

.shop-item-demo .avatar-princess .item-crownGold.layer-head,
.shop-item-demo .avatar-nobi .item-crownGold.layer-head {
  width: 39% !important;
}

.shop-item-demo .avatar-princess .item-glassesRound.layer-face,
.shop-item-demo .avatar-nobi .item-glassesRound.layer-face {
  width: 44% !important;
}

.shop-item-demo .avatar-princess .item-glassesHeart.layer-face,
.shop-item-demo .avatar-nobi .item-glassesHeart.layer-face {
  width: 48% !important;
}

/* The full-size shop preview can breathe a little more. */
.shop-avatar-preview .avatar-stage {
  overflow: visible !important;
}

/* Remove accidental legacy decoration shapes if any remain in markup/styles. */
.avatar-stage > .avatar-deco {
  display: none !important;
}

@media (max-width: 720px) {
  .avatar-princess .item-glassesRound.layer-face {
    top: 25% !important;
  }

  .avatar-princess .item-glassesHeart.layer-face {
    top: 24% !important;
  }

  .avatar-nobi .item-glassesRound.layer-face {
    top: 27% !important;
  }

  .avatar-nobi .item-glassesHeart.layer-face {
    top: 26% !important;
  }
}


/* =========================================================
   v3.0 — ROOM BACKGROUNDS + BINGO + BASEBALL + RPS
   ========================================================= */

body.has-room-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: var(--room-theme-image);
  background-size: cover;
  background-position: center;
  opacity: .52;
  filter: saturate(.9);
}
body.has-room-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(255,250,252,.40);
  backdrop-filter: blur(2px);
}
body.has-room-theme .app-shell { background: transparent; }
body.has-room-theme #lobbyView,
body.has-room-theme .mini-game-screen,
body.has-room-theme .omok-screen { background: rgba(255,248,251,.22); border-radius: 34px; }

.live-mini-badge { color:#c05d80 !important; background:linear-gradient(180deg,#fff1f6,#ffe5ee) !important; }
.mini-game-screen { padding-top:max(18px, env(safe-area-inset-top)); }
.mini-game-topbar { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; margin-bottom:14px; }
.mini-match-card { display:grid; grid-template-columns:1fr minmax(125px,auto) 1fr; align-items:center; gap:10px; padding:14px 16px; margin-bottom:12px; overflow:hidden; }
.mini-player { display:flex; align-items:center; gap:8px; min-width:0; }
.mini-player.right { flex-direction:row-reverse; text-align:right; }
.mini-player > div:last-child { min-width:0; }
.mini-player strong { display:block; font-family:"Jua","Gowun Dodum",sans-serif; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-player span { display:block; color:var(--muted); font-size:9px; margin-top:2px; }
.mini-empty-avatar { width:48px; height:48px; flex:0 0 auto; border:1px dashed #dfcbd2; border-radius:16px; background:#fff9fb; }
.mini-avatar-size { width:50px !important; height:50px !important; border-radius:16px !important; }
.mini-game-status { text-align:center; min-width:0; }
.mini-game-status strong { display:block; font-family:"Jua","Gowun Dodum",sans-serif; font-size:16px; line-height:1.15; }
.mini-game-status small { display:block; margin-top:4px; color:var(--muted); font-size:9px; line-height:1.3; }
.mini-game-card { padding:18px; margin-bottom:12px; }
.mini-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:15px; }
.mini-card-head h2 { margin:3px 0 0; font-family:"Jua","Gowun Dodum",sans-serif; font-size:27px; }
.mini-helper { color:var(--muted); font-size:11px; line-height:1.55; text-align:center; margin:13px 4px 0; }
.mini-message { min-height:20px; margin:8px 0 0; color:#bf6b88; font-family:"Jua","Gowun Dodum",sans-serif; font-size:12px; text-align:center; }
.mini-primary-btn { border:0; background:#292122; color:#fff; border-radius:18px; padding:0 18px; font-family:"Jua","Gowun Dodum",sans-serif; font-size:14px; min-height:52px; }
.mini-primary-btn:disabled { opacity:.42; }

.bingo-score-row { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin-bottom:14px; }
.bingo-score-row > div:not(.bingo-vs-dot) { padding:10px 12px; border:1px solid #edd8df; border-radius:18px; background:rgba(255,255,255,.72); text-align:center; }
.bingo-score-row span { display:block; color:var(--muted); font-size:9px; }
.bingo-score-row strong { display:block; font-family:"Jua","Gowun Dodum",sans-serif; font-size:18px; margin-top:2px; }
.bingo-vs-dot { color:#d17a98; font-family:"Jua",sans-serif; font-size:12px; }
.bingo-board { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; padding:12px; border-radius:25px; background:linear-gradient(145deg,#fff1f6,#f5efff); border:1px solid #ecd9e1; }
.bingo-board button { aspect-ratio:1; border:1px solid #e5cbd5; border-radius:15px; background:#fff; color:#5e4a51; font-family:"Jua","Gowun Dodum",sans-serif; font-size:17px; box-shadow:0 5px 10px rgba(120,80,95,.06); }
.bingo-board button.called { color:#fff; border-color:#e987a8; background:linear-gradient(145deg,#f3a0ba,#dd789b); text-decoration:line-through; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }
.bingo-board button:disabled:not(.called) { opacity:.68; }

.secret-card h2 { font-family:"Jua","Gowun Dodum",sans-serif; margin:4px 0 5px; }
.number-entry-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:15px; }
.number-entry { min-width:0; min-height:54px; border:1px solid #e9d4dc; border-radius:18px; background:#fff; padding:0 18px; font-family:"Jua","Gowun Dodum",sans-serif; font-size:24px; letter-spacing:.3em; text-align:center; color:#4e3f44; outline:none; }
.number-entry:focus { border-color:#e48aaa; box-shadow:0 0 0 4px rgba(228,138,170,.10); }
.baseball-history-wrap { margin-top:18px; }
.baseball-history-wrap h3 { margin:0 0 8px; font-family:"Jua","Gowun Dodum",sans-serif; font-size:16px; }
.baseball-history { display:grid; gap:7px; max-height:240px; overflow:auto; }
.baseball-history-row { display:flex; justify-content:space-between; align-items:center; padding:11px 14px; border-radius:15px; border:1px solid #ecdae1; background:rgba(255,255,255,.74); }
.baseball-history-row strong { font-family:"Jua",sans-serif; letter-spacing:.16em; font-size:18px; }
.baseball-history-row span { color:#b66582; font-family:"Jua",sans-serif; }
.empty-history { text-align:center; color:var(--muted); font-size:11px; padding:18px 0; }

.rps-scoreboard { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:end; max-width:280px; margin:0 auto 14px; text-align:center; }
.rps-scoreboard span { display:block; color:var(--muted); font-size:10px; }
.rps-scoreboard strong { display:block; font-family:"Jua",sans-serif; font-size:39px; line-height:1; margin-top:3px; }
.rps-score-divider { font-family:"Jua",sans-serif; font-size:25px; color:#d48aa3; padding-bottom:2px; }
.rps-last-result { min-height:55px; display:grid; place-items:center; text-align:center; padding:10px; margin-bottom:13px; border-radius:18px; background:#fff5f9; border:1px solid #efd9e1; color:#80636d; font-size:12px; }
.rps-last-result strong { display:block; font-family:"Jua",sans-serif; color:#6c515b; font-size:15px; }
.rps-last-result span { display:block; margin-top:2px; }
.rps-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rps-choices button { min-width:0; min-height:112px; border:1px solid #ead6de; border-radius:22px; background:linear-gradient(180deg,#fff,#fff6fa); display:grid; place-items:center; align-content:center; gap:7px; color:#5b464d; box-shadow:0 7px 16px rgba(110,75,88,.06); }
.rps-choices button.selected { border-color:#e584a5; background:#ffe8f0; box-shadow:0 0 0 3px rgba(229,132,165,.12); }
.rps-choices button:disabled:not(.selected) { opacity:.45; }
.rps-choices strong { font-family:"Jua",sans-serif; font-size:17px; }
.rps-symbol { width:43px; height:43px; position:relative; display:block; }
.rock-symbol { border-radius:50% 46% 42% 50%; background:linear-gradient(145deg,#f3bfd0,#d982a1); box-shadow:inset -4px -5px 0 rgba(160,81,109,.12); transform:rotate(-8deg); }
.paper-symbol { border-radius:10px 10px 16px 16px; background:linear-gradient(180deg,#f9e8ef,#edb8ca); border:1px solid #d99aae; }
.paper-symbol::before,.paper-symbol::after { content:""; position:absolute; width:7px; height:24px; top:-9px; border-radius:7px; background:#f1c2d2; border:1px solid #dba2b5; }
.paper-symbol::before { left:8px; } .paper-symbol::after { right:8px; }
.scissors-symbol::before,.scissors-symbol::after { content:""; position:absolute; left:18px; bottom:3px; width:8px; height:42px; border-radius:8px; background:linear-gradient(#efbed0,#dc8ba8); transform-origin:bottom center; border:1px solid #d4839f; }
.scissors-symbol::before { transform:rotate(28deg); } .scissors-symbol::after { transform:rotate(-28deg); }

.result-avatar-stage { width:118px !important; height:118px !important; border-radius:34px !important; }
.multi-result-dialog .result-avatar-stage { margin:auto; }

@media (max-width:720px) {
  .mini-game-screen { padding-left:12px; padding-right:12px; }
  .mini-game-topbar { grid-template-columns:42px minmax(0,1fr) auto; gap:8px; }
  .mini-match-card { grid-template-columns:1fr 100px 1fr; padding:12px 10px; gap:5px; }
  .mini-avatar-size { width:43px !important; height:43px !important; border-radius:14px !important; }
  .mini-player strong { font-size:13px; }
  .mini-game-status strong { font-size:14px; }
  .mini-game-status small { font-size:8px; }
  .mini-game-card { padding:14px 11px; border-radius:28px; }
  .bingo-board { gap:5px; padding:8px; border-radius:20px; }
  .bingo-board button { border-radius:12px; font-size:15px; }
  .number-entry { font-size:21px; padding:0 12px; }
  .mini-primary-btn { padding:0 13px; font-size:13px; }
  .rps-choices button { min-height:100px; border-radius:19px; }
}


/* =========================================================
   v3.2 — Topic Bingo only
   ========================================================= */
.topic-bingo-card { overflow: hidden; }

.bingo-topic-panel {
  margin-bottom: 14px;
  padding: 15px;
  border: 1px solid #efd4df;
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(145deg, #fff0f6, #f4efff);
}

.topic-panel-label {
  display: block;
  margin-bottom: 8px;
  color: #b47c90;
  font-size: 9px;
  letter-spacing: .08em;
}

.bingo-topic-wheel {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid #ecd2dc;
  border-radius: 19px;
  background: rgba(255,255,255,.76);
}

.bingo-topic-wheel span { font-size: 32px; }
.bingo-topic-wheel strong {
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 24px;
}

.bingo-topic-wheel.spinning {
  animation: topicBingoSpin .4s ease-in-out infinite alternate;
}

@keyframes topicBingoSpin {
  to { transform: translateY(-3px) scale(1.02); }
}

#bingoTopicHint {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
}

.bingo-setup-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.bingo-setup-head span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.bingo-setup-head strong {
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 19px;
}

.bingo-timer {
  min-width: 77px;
  padding: 9px 12px;
  border: 1px solid #edccd8;
  border-radius: 999px;
  background: #fff4f7;
  color: #ba647f;
  text-align: center;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.bingo-timer.urgent {
  border-color: #df799b;
  background: #df799b;
  color: #fff;
}

.bingo-setup-copy {
  margin: 0 0 11px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.bingo-input-grid,
.bingo-board.topic-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid #ead4dd;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff2f7, #f4eeff);
}

.bingo-input-grid input {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1.1;
  border: 1px solid #e5cbd5;
  border-radius: 12px;
  padding: 5px;
  outline: none;
  background: rgba(255,255,255,.92);
  color: #59464d;
  text-align: center;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 11px;
}

.bingo-input-grid input:focus {
  border-color: #dc83a1;
  box-shadow: 0 0 0 3px rgba(220,131,161,.11);
}

.bingo-input-grid input:disabled {
  background: #f6f2f4;
  color: #8b767d;
}

.bingo-ready-btn { margin-top: 12px !important; }

.mini-message.error { color: #b54d57; }

.bingo-draw-card {
  margin-bottom: 12px;
  padding: 15px;
  border: 1px solid #e8ccd8;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffe5ef, #eee8ff);
  text-align: center;
}

.bingo-draw-card > span {
  display: block;
  color: #aa7588;
  font-size: 9px;
}

.bingo-draw-card > strong {
  display: block;
  min-height: 31px;
  margin: 7px 0 10px;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 23px;
}

.bingo-draw-card.rolling > strong {
  animation: topicDrawPop .2s infinite alternate;
}

@keyframes topicDrawPop {
  to { transform: scale(1.07); }
}

.bingo-draw-btn {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #e98fab, #d86f94);
  color: #fff;
  font-family: "Jua", "Gowun Dodum", sans-serif;
  font-size: 15px;
}

.bingo-draw-btn:disabled {
  background: #d9d0d3;
}

.bingo-board.topic-board button {
  aspect-ratio: 1.08;
  padding: 4px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.15;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.bingo-board.topic-board button.called {
  border-color: #d87596;
  background: linear-gradient(145deg, #f6a5be, #dc7899);
  color: #fff;
}

@media (max-width: 720px) {
  .bingo-input-grid,
  .bingo-board.topic-board { gap: 5px; padding: 7px; }

  .bingo-input-grid input,
  .bingo-board.topic-board button { font-size: 10.5px; }
}

/* v3.2 final patch: show purchased background art behind transparent avatar */
.avatar-stage:has(.layer-background) .avatar-base { background: transparent !important; }
.shop-item-demo .avatar-stage:has(.layer-background) .avatar-base { background: transparent !important; }

/* RPS uses real image assets instead of CSS-drawn symbols */
.rps-image { width:58px; height:58px; display:block; object-fit:contain; border-radius:16px; }
@media (max-width:720px) { .rps-image { width:54px; height:54px; } }