@font-face {
  font-family: "Tmoney RoundWind";
  src: url("assets/resources/figma-v2/fonts/TmoneyRoundWindRegular.woff2") format("woff2"),
       url("assets/resources/figma-v2/fonts/TmoneyRoundWindRegular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Tmoney RoundWind";
  src: url("assets/resources/figma-v2/fonts/TmoneyRoundWindExtraBold.woff2") format("woff2"),
       url("assets/resources/figma-v2/fonts/TmoneyRoundWindExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
}

:root {
  --figma-font: "Tmoney RoundWind", "Pretendard Variable", Pretendard, sans-serif;
  --figma-brown: #583011;
  --figma-muted-brown: #c19c86;
  --figma-mint: #74c7ba;
  --figma-deep-mint: #2a5756;
  --figma-orange: #ff9b39;
  --figma-pink: #e77ae1;
  /* 서버 멈춤 안내창 본문(2026-10-28 시안) */
  --stall-message-ink: #5a4a3a;
  --stall-message-size: 16px;
  --stall-title-size: 22px;
  /* 회원탈퇴 창(2026-10-30 시안) */
  --withdraw-panel-line: #ebcba8;
  --withdraw-panel-bg: #fff6ea;
  --withdraw-panel-size: 14px;
  --withdraw-lost: #c2410c;
  --withdraw-kept: #2f8f6a;
  --withdraw-note-ink: #6e5d4e;
  --withdraw-note-size: 12px;
  --withdraw-fade-solid: #000; /* 안내 칸 아래 흐림 마스크의 불투명 쪽(색이 아니라 알파로만 쓰인다) */
  --withdraw-quit-ink: #b0312a;
  --withdraw-running-line: #dccfc6;
  --withdraw-running-bg: #f3ece7;
  --withdraw-running-ink: #8a7466;
  --withdraw-running-size: 17px;
  --settings-meta-ink: #3e5a6e;
  --settings-meta-size: 12px;
  /* Original painted backgrounds remain in assets; clouds render separately in Lottie. */
  --figma-bg-landscape: linear-gradient(180deg, #81cbfc 0%, #aadcf9 50%, #c5e6f3 100%);
  --figma-bg-portrait: linear-gradient(180deg, #a2d7fb 0%, #b9e1f7 50%, #cce9f2 100%);
}

body,
button,
input,
textarea,
select {
  font-family: var(--figma-font) !important;
}

body {
  background: #8ed4f4;
}

#game-container {
  isolation: isolate;
  background: #8ed4f4;
}

#portrait-warning {
  display: none !important;
}

.screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden;
  background-color: #8ed4f4 !important;
  background-image: var(--figma-bg-landscape) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  color: var(--figma-brown);
}

/* data-quiet-focus: 창이 열리며 초점만 받은 버튼 — 테두리 없음 (2026-10-29 Kay님) */
button:not([data-quiet-focus]):focus-visible {
  outline: 4px solid rgba(255, 155, 57, 0.9) !important;
  outline-offset: 3px;
}

/* 브라우저 기본 테두리(outline: auto)도 그리지 않는다 — 삼성 인터넷 30 실측 */
button[data-quiet-focus]:focus-visible {
  outline: none;
}

#retry-btn-overlay:disabled {
  cursor: not-allowed !important;
  filter: grayscale(1) !important;
  opacity: 0.48 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Shared lobby navigation */
#global-top-bar {
  position: absolute !important;
  z-index: 50 !important;
  top: 2.96% !important;
  left: 1.67% !important;
  width: 96.3% !important;
  height: 12.59% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  pointer-events: none;
}

#global-top-bar.hidden {
  display: none !important;
}

#global-top-bar .top-menu {
  width: 57.62% !important;
  height: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0.35% !important;
  display: flex !important;
  align-items: flex-start !important;
  overflow: visible !important;
  pointer-events: auto;
}

#global-top-bar .menu-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 71.2% !important;
  aspect-ratio: 193 / 94 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin-top: 2.95% !important;
  padding: 0 0.4em !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/resources/figma-v2/imgObMainMenuUnselected.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  color: var(--figma-muted-brown) !important;
  font-size: clamp(15px, 1.62cqw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  transform: none !important;
}

#global-top-bar .menu-btn.active {
  height: 100% !important;
  aspect-ratio: 230 / 132 !important;
  margin-top: 0 !important;
  padding-top: 0.6% !important;
  background-image: url("assets/resources/figma-v2/imgObMainMenuSelected.png") !important;
  color: #fff !important;
  font-size: clamp(16px, 1.68cqw, 33px) !important;
  text-shadow: 0 2px 0 rgba(42, 87, 86, 0.58) !important;
}

#global-top-bar .menu-btn:hover,
#global-top-bar .menu-btn:active {
  filter: brightness(1.03);
  transform: none !important;
}

#global-top-bar .top-status-right {
  position: absolute !important;
  top: 18.42% !important;
  left: 63.6% !important;
  width: 36.4% !important;
  height: 74.98% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2.4% !important;
  align-items: stretch !important;
  pointer-events: auto;
}

#global-top-bar .hud-pill {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 7% 0 31% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/resources/figma-v2/imgFrSource.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  color: var(--figma-brown) !important;
  gap: 0.2em !important;
  justify-content: center !important;
  font-size: clamp(13px, 1.65cqw, 32px) !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

#global-top-bar .hud-pill::before {
  content: "";
  position: absolute;
  left: 8%;
  top: 21%;
  width: 17.4%;
  height: 58%;
  background: url("assets/resources/figma-v2/imgIconGold001.png") center / contain no-repeat;
}

#global-top-bar .hud-attempts {
  padding-left: 27% !important;
}

#global-top-bar .hud-attempts::before {
  left: 10%;
  top: 21.5%;
  width: 12.8%;
  height: 57%;
  background-image: url("assets/resources/figma-v2/imgIconTryNumber1.png");
}

#game-container > #global-top-bar > .top-status-right > .hud-pill {
  justify-content: flex-end !important;
  text-align: right !important;
}

#game-container > #global-top-bar > .top-status-right > .hud-points {
  padding: 0 7% 0 31% !important;
}

#global-top-bar .coin-icon {
  display: none !important;
}

#global-top-bar #point-count {
  color: var(--figma-brown) !important;
}

#global-top-bar #point-count::after {
  content: " P";
  color: var(--figma-orange);
}

#global-top-bar .hud-points {
  font-size: 0 !important;
}

#global-top-bar .hud-points #point-count {
  font-size: clamp(13px, 1.65cqw, 32px) !important;
}

#global-top-bar .hud-attempts-label {
  display: inline !important;
}

#global-top-bar #daily-attempts-display {
  color: var(--figma-pink) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: inline !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Splash and account connection */
#splash-screen {
  z-index: 60;
  justify-content: flex-start !important;
}

#splash-screen .splash-effects {
  display: none !important;
}

#splash-screen .splash-content {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

#splash-screen .splash-title {
  position: absolute !important;
  top: 5.85% !important;
  left: 50% !important;
  width: 44.74% !important;
  height: 39.63% !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  background: url("assets/resources/figma-v2/imgLogoTitle.png") center / contain no-repeat !important;
  /* 무손실 WebP(같은 화소, 314KB→205KB). image-set type() 을 모르는 브라우저는 이 줄을 버리고 위 PNG 를 쓴다. */
  background-image: image-set(url("assets/resources/figma-v2/imgLogoTitle.webp") type("image/webp"), url("assets/resources/figma-v2/imgLogoTitle.png") type("image/png")) !important;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
  transform-origin: 50% 55% !important;
  will-change: opacity, filter, translate, scale;
  animation:
    splashLogoEnter 820ms cubic-bezier(0.2, 0.9, 0.25, 1.18) both,
    splashLogoIdle 2.7s ease-in-out 820ms infinite !important;
}

@keyframes splashLogoEnter {
  0% {
    opacity: 0;
    filter: blur(8px) brightness(1.24);
    scale: 0.68;
  }
  58% {
    opacity: 1;
    filter: blur(0) brightness(1.05);
    scale: 1.08;
  }
  78% { scale: 0.97; }
  100% {
    opacity: 1;
    filter: none;
    scale: 1;
  }
}

@keyframes splashLogoIdle {
  0%, 100% {
    translate: 0 0;
    scale: 1;
  }
  12% {
    translate: 0 -2.2%;
    scale: 1.035;
  }
  22% {
    translate: 0 -0.7%;
    scale: 1;
  }
  34% {
    translate: 0 -1.8%;
    scale: 1.024;
  }
  50% {
    translate: 0 0;
    scale: 1;
  }
  76% {
    translate: 0 -1.1%;
    scale: 1.012;
  }
}

#splash-screen .splash-subtitle {
  display: none !important;
}

#splash-screen .sns-login-row {
  position: absolute !important;
  z-index: 3;
  /* 시안값 48.52% 는 로고 상자 끝과 3% 차이라 가로에서 아이콘이 로고에 붙어 보였다(10/27 갤럭시 탭 1408×717 실측 22px).
     58% 로 내려 간격을 아이콘 높이의 약 1.2배로 맞춘다(10/27 Kay님 B안). 높이 낮은 가로는 아래 규칙이 시안값을 유지한다 */
  top: 58% !important;
  left: 50% !important;
  width: 29.2% !important;
  /* 아이콘 크기는 높이 10.47% 인데 줄 폭은 화면 폭 29.2% 라, 16:9 보다 좁은 가로(폴드 펼침 690×654 등)에선
     아이콘 4개가 줄을 넘쳐 오른쪽으로 쏠렸다(10/27). 16:9 에서 같은 값인 폭 기준 5.889cqw 로 상한을 둬 간격 비율을 유지한다.
     상한에 걸리면 아이콘이 41px 로 작아 보여 1.28배(7.538cqw)로 올리고, 줄 폭도 높이×4.958(=29.2/5.889)로 같이 넓혀
     간격 비율을 지킨다(10/27 Kay님 B안). 16:9 이상 넓은 화면은 max 가 29.2% 를 골라 그대로다.
     앞 줄은 cqw 를 모르는 브라우저용 — 그곳에선 뒤 줄 전체가 버려진다 */
  width: max(29.2%, min(51.91cqh, 37.37cqw)) !important;
  height: 10.47% !important;
  height: min(10.47%, 7.538cqw) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 2% !important;
}

#splash-screen .sns-login-row.hidden {
  display: none !important;
}

#splash-screen .sns-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 100% !important;
  aspect-ratio: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
}

#splash-screen .sns-btn svg {
  display: none !important;
}

/* 좁은 가로에서 아이콘이 40px 대로 작아져도 누르는 영역은 사방 4px 넓힌다(보이는 크기는 그대로).
   style.css 의 overflow: hidden !important 가 넓힌 영역을 잘라 내므로 풀어 준다 — 그림은 배경이라 넘칠 것이 없다 */
#splash-screen .sns-btn {
  position: relative;
  overflow: visible !important;
}

#splash-screen .sns-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
}

#splash-screen #btn-login-naver {
  order: 1;
  background-image: url("assets/resources/figma-v2/imgBtnNaver.png") !important;
}

#splash-screen #btn-login-apple {
  order: 2;
  background-image: url("assets/resources/figma-v2/imgBtnApple.png") !important;
}

#splash-screen #btn-login-google {
  order: 3;
  background-image: url("assets/resources/figma-v2/imgBtnGoogle.png") !important;
}

#splash-screen #btn-login-kakao {
  order: 4;
  background-image: url("assets/resources/figma-v2/imgBtnKakao.png") !important;
}

/* 게스트 줄은 옛 테스트 로그인 버튼 자리(62.87%)에 둔다 — 그 버튼은 출시 전 정리로 뺐다(2026-10-27) */
#splash-screen #guest-login-container {
  position: absolute !important;
  z-index: 3;
  top: 62.87% !important;
  left: 50% !important;
  transform: translateX(-50%);
}

#splash-screen #btn-login-guest {
  color: rgba(42, 87, 86, 0.78) !important;
  font-size: clamp(12px, 1.15cqw, 21px) !important;
}

#splash-screen #start-btn {
  position: absolute !important;
  z-index: 3;
  /* 소셜 버튼이 함께 보이는 NFC 연동 안내 상태 전용 값(로그인 뒤 숨김 상태는 아래 62%). 시안값 76.76% 는 가로에서
     약관 링크에 붙어(10/27 갤럭시 탭 1408×717 −2px) 69% 로 올린다 — 아이콘 줄 53% 와 짝(10/27 Kay님 B안) */
  top: var(--splash-start-top, 69%) !important;
  left: 50% !important;
  width: 40.89% !important;
  height: 13.98% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgObStartMessage001.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: var(--figma-brown) !important;
  font-size: clamp(17px, 2.1cqw, 40px) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* 아이콘과 시작 버튼이 같이 보이는 NFC 연동 안내 상태는 세 간격(로고·아이콘·시작 버튼·약관)을 고르게 —
   아이콘 53% · 시작 버튼 69% (10/27 갤럭시 탭 시안 B안: 56·40·54px). 세로는 자기 규칙이 따로 있어 가로에만 건다 */
@media (orientation: landscape) {
  #splash-screen:has(#start-btn:not(.hidden)) .sns-login-row {
    top: 53% !important;
  }
}

/* 로그인 뒤 소셜 버튼 줄이 숨겨지면 시작 버튼을 로고 쪽으로 올려 가운데 빈자리를 줄인다 (10/17 시안 B안) */
#splash-screen:has(#sns-login-container.hidden) {
  --splash-start-top: 62%;
}

/* 높이 낮은 가로 화면(폴드 접힘 802×296·일반 폰 891×315)에서 소셜 버튼이 보이는 NFC 연동 안내 상태면
   76.76% 자리의 시작 버튼이 맨 아래 버전 글자를 덮는다 → 소셜 버튼과 버전 글자 사이 가운데로 올린다 (10/17 시안 승인).
   로그인 뒤 상태는 위 :has 규칙(62%)이 더 구체적이라 그대로다. */
@media (orientation: landscape) and (max-height: 420px) {
  #splash-screen {
    --splash-start-top: 67%;
  }

  /* 높이 낮은 가로는 아래 약관 링크가 화면 비율로 위에 올라와 있어, 아이콘을 58% 로 내리면 시작 버튼(67%)과 겹친다 → 시안값 유지 */
  #splash-screen .sns-login-row,
  #splash-screen:has(#start-btn:not(.hidden)) .sns-login-row {
    top: 48.52% !important;
  }
}

/* 높이 낮은 가로: 62% 자리의 시작 버튼이 약관 줄과 겹쳐 글자를 가렸다(632×209 ~ 568×280 실측, 2026-11-05).
   약관 줄 위끝은 화면 아래에서 약 68px, 버튼 높이는 13.98% — 버튼 아래끝이 약관 줄 위 8px 에 오도록 올린다. */
@media (orientation: landscape) and (max-height: 300px) {
  #splash-screen:has(#sns-login-container.hidden) {
    --splash-start-top: min(62%, calc(86.02% - 76px));
  }
}

#splash-screen .splash-copyright {
  position: absolute !important;
  z-index: 3;
  right: 0;
  bottom: max(1.5%, env(safe-area-inset-bottom));
  left: 0;
  color: rgba(42, 87, 86, 0.72) !important;
  font-size: clamp(10px, 0.8cqw, 15px) !important;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

/* 이용약관·개인정보처리방침 링크 (2026-10-25 시안 승인) — 로그인·설정 화면 공통 모양 */
.legal-links {
  display: flex;
  /* 링크 3개(2026-11-05 확률 정보 추가)가 글자 확대에서 한 줄을 넘으면 낱말 중간이 아니라 링크 단위로 내린다 */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1.4;
}

.legal-links a {
  color: inherit;
  white-space: nowrap;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-links span {
  margin: 0 10px;
  opacity: 0.5;
}

/* 로그인 화면: 버전 줄(index.html 인라인 bottom 식) 바로 위 8px.
   버전 줄 bottom = 저작권 bottom + 저작권 줄 높이 + 3px, 버전 줄 높이 = 글자 크기 × 1.4 */
#splash-screen #splash-legal {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: calc(max(1.5%, env(safe-area-inset-bottom)) + clamp(10px, 0.8cqw, 15px) * 1.4 + 3px + clamp(9px, 0.7cqw, 13px) * 1.4 + 8px);
  left: 0;
  color: rgba(42, 87, 86, 0.72);
}

/* Main stage selection */
#stage-selection-screen .stage-main-area {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

#stage-selection-screen .difficulty-tabs {
  position: absolute !important;
  z-index: 5;
  top: 24.81% !important;
  left: 24.01% !important;
  width: 51.98% !important;
  height: 13.5% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 1.85cqh 5.8% !important;
  box-sizing: border-box !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrDifficulty.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: center !important;
  gap: 0 !important;
}

#stage-selection-screen .diff-tab {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  color: var(--figma-muted-brown) !important;
  font-size: clamp(18px, 1.88cqw, 36px) !important;
  font-weight: 800 !important;
  transform: none !important;
}

#stage-selection-screen .diff-tab.active {
  background: url("assets/resources/figma-v2/imgObDifficultySelected.png") center / 100% 100% no-repeat !important;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(42, 87, 86, 0.58) !important;
}

#stage-selection-screen .stage-slider-container {
  position: absolute !important;
  top: 42.78% !important;
  left: 3.49% !important;
  width: 93.44% !important;
  height: 46.3% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

#stage-selection-screen .stage-cards-wrapper {
  order: 2;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#stage-selection-screen .stage-cards {
  width: max-content !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 0 0 1.87cqw !important;
  gap: 1.17cqw !important;
  align-items: center !important;
}

#stage-selection-screen .stage-card-item {
  flex: 0 0 min(44.53cqw, 88cqh) !important;
  width: min(44.53cqw, 88cqh) !important;
  height: auto !important;
  aspect-ratio: 855 / 500 !important;
  margin: 0 !important;
}

#stage-selection-screen .stage-card {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 7.8% 4.9% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/resources/figma-v2/imgFrMapSelect.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden !important;
}

#stage-selection-screen .stage-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 7.65% 4.6%;
  background: url("assets/resources/figma-v2/imgMaskMapMainStageEdge.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

#stage-selection-screen .stage-card.locked::after {
  inset: 8.25% 5% !important;
  width: auto !important;
  height: auto !important;
  border-radius: 5.2% !important;
}

#stage-selection-screen .stage-card .thumb {
  position: absolute !important;
  z-index: 1;
  inset: 8.25% 5% !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 5.2% !important;
  background-color: #111 !important;
  background-position: center !important;
  background-size: cover !important;
  overflow: hidden !important;
}

#stage-selection-screen .stage-card:hover,
#stage-selection-screen .stage-card.selected {
  filter: brightness(1.04) drop-shadow(0 6px 8px rgba(42, 87, 86, 0.25));
}

#stage-selection-screen .stage-card.locked .thumb {
  filter: grayscale(0.7) brightness(0.62);
}

#stage-selection-screen .stage-number-badge,
#stage-selection-screen .match-badge {
  z-index: 5 !important;
  border: 0 !important;
  background: rgba(255, 247, 237, 0.9) !important;
  color: var(--figma-brown) !important;
  box-shadow: 0 2px 0 rgba(88, 48, 17, 0.16) !important;
  font-weight: 800 !important;
}

#stage-selection-screen .stars-overlay {
  z-index: 5 !important;
  left: 5.2% !important;
  bottom: 8.9% !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 2px 8px !important;
  border: 2px solid #fff4e8 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #9cddd2, var(--figma-mint)) !important;
  box-shadow: 0 2px 0 rgba(42, 87, 86, 0.32) !important;
  backdrop-filter: none !important;
}

#stage-selection-screen .stars-overlay .star {
  width: 1em !important;
  height: 1em !important;
  aspect-ratio: auto !important;
}

#stage-selection-screen .stars-overlay .star::before {
  width: 100% !important;
  height: 100% !important;
  background: rgba(42, 87, 86, 0.52) !important;
  clip-path: polygon(50% 3%, 61% 36%, 96% 36%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 4% 36%, 39% 36%) !important;
}

#stage-selection-screen .stars-overlay .star.filled::before {
  background: var(--figma-orange) !important;
}

#stage-selection-screen .match-badge {
  top: 8.9% !important;
  right: 5.2% !important;
}

#stage-selection-screen .slider-arrow {
  position: absolute !important;
  z-index: 8 !important;
  top: 33.2% !important;
  width: 6.78cqw !important;
  height: 11.95cqh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  transform: none !important;
}

#stage-selection-screen #prev-stage {
  left: 0 !important;
  background-image: url("assets/resources/figma-v2/imgBtnMapSelectLeft.png") !important;
}

#stage-selection-screen #next-stage {
  right: 0 !important;
  background-image: url("assets/resources/figma-v2/imgBtnMapSelectRight.png") !important;
}

/* Stage information and start */
#stage-ready-screen {
  display: block;
}

#stage-ready-screen .selection-header {
  position: absolute !important;
  z-index: 10;
  inset: 0 !important;
  width: 100% !important;
  height: 15% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
}

#stage-ready-screen #back-to-selection {
  position: absolute !important;
  top: 19.1% !important;
  left: 1.88% !important;
  width: 7.66% !important;
  height: 73.5% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgBtnBack.png") center / contain no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

#stage-ready-screen #ready-stage-title {
  position: absolute !important;
  top: 12.3% !important;
  left: 30.68% !important;
  width: 16.62% !important;
  height: 75.3% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: url("assets/resources/figma-v2/imgFrStageNumber1.png") center / 100% 100% no-repeat !important;
  color: #41706f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(15px, 1.65cqw, 32px) !important;
  font-weight: 800 !important;
}

#stage-ready-screen .ready-header-status {
  position: absolute !important;
  top: 19.75% !important;
  right: 2.18% !important;
  width: 16.45% !important;
  height: 58.7% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 2.18fr 1fr !important;
  gap: 4.2% !important;
}

#stage-ready-screen .ready-header-status .hud-pill {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 7% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: var(--figma-brown) !important;
  font-size: clamp(13px, 1.65cqw, 32px) !important;
}

#stage-ready-screen .ready-header-status .hud-pill.primary {
  padding-left: 31% !important;
  background-image: url("assets/resources/figma-v2/imgFrGold.png") !important;
}

#stage-ready-screen .ready-header-status .hud-pill.primary::before {
  content: "";
  position: absolute;
  left: 9%;
  top: 19%;
  width: 27.5%;
  height: 62%;
  background: url("assets/resources/figma-v2/imgIconGold001.png") center / contain no-repeat;
}

#stage-ready-screen .ready-header-status .hud-attempts {
  background-image: url("assets/resources/figma-v2/imgFrCircle.png") !important;
}

#stage-ready-screen .ready-header-status .hud-attempts-label {
  display: none !important;
}

#stage-ready-screen .ready-content {
  position: absolute !important;
  top: 21.3% !important;
  left: 3.13% !important;
  width: 65.07% !important;
  height: 67.7% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
}

#stage-ready-screen .ready-main {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 7.9% 4.85% !important;
  background: url("assets/resources/figma-v2/imgFrMapInfo.png") center / 100% 100% no-repeat !important;
}

#stage-ready-screen .ready-image-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 4% !important;
  background: #111 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#stage-ready-screen .ready-image-container::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -0.8%;
  background: url("assets/resources/figma-v2/imgMaskMapMainInfoStageEdge.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

#stage-ready-screen #ready-stage-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#stage-ready-screen .ready-image-container > .stars-overlay {
  display: none !important;
}

#stage-ready-screen .ready-side {
  position: absolute !important;
  z-index: 6;
  right: 6.9% !important;
  bottom: 11.9% !important;
  width: 47.25% !important;
  height: 20.77% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#stage-ready-screen .ready-side .info-area {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 3.2% !important;
  background: transparent !important;
}

#stage-ready-screen .info-block {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10% 7% 5% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrMapInfoGreen.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

#stage-ready-screen .info-block:nth-child(n + 3) {
  display: none !important;
}

#stage-ready-screen .info-block h3 {
  position: absolute !important;
  top: 10% !important;
  margin: 0 !important;
  color: var(--figma-deep-mint) !important;
  font-size: clamp(10px, 0.94cqw, 18px) !important;
  font-weight: 800 !important;
}

#stage-ready-screen .info-value {
  color: #fff !important;
  font-size: clamp(20px, 2.6cqw, 50px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
}

#stage-ready-screen .ready-diff-count {
  display: block !important;
  margin-top: 0.35em !important;
  color: #d2e7e3 !important;
  font-size: 0.4em !important;
}

#stage-ready-screen .stars-attain {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3% !important;
  width: 92% !important;
  margin-top: 14% !important;
}

#stage-ready-screen .star {
  width: 18% !important;
  height: auto !important;
  aspect-ratio: 60 / 58 !important;
  background: url("assets/resources/figma-v2/imgIconStarEmpty.png") center / contain no-repeat !important;
}

#stage-ready-screen .star::before,
#stage-ready-screen .star::after {
  display: none !important;
}

#stage-ready-screen .star.filled {
  background-image: url("assets/resources/figma-v2/imgIconStar1.png") !important;
}

#stage-ready-screen .ready-footer {
  position: absolute !important;
  z-index: 8;
  top: 46.3% !important;
  right: 3.75% !important;
  width: 26.15% !important;
  height: 40.3% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
}

#stage-ready-screen .item-shop-row {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 74.7% !important;
  height: 61.9% !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 3.8% !important;
  margin: 0 !important;
}

#stage-ready-screen .buy-item-card {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 17% 8% 7% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrItemList00.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

#stage-ready-screen .buy-item-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -10.8%;
  left: 25.8%;
  width: 48.4%;
  height: 21.9%;
  background: url("assets/resources/figma-v2/imgFrPrice.png") center / 100% 100% no-repeat;
}

#stage-ready-screen .buy-item-card .item-name {
  display: none !important;
}

#stage-ready-screen .item-icon-box {
  width: 65% !important;
  height: 48% !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#stage-ready-screen .item-icon-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#stage-ready-screen .owned-count {
  position: absolute !important;
  z-index: 3;
  top: -8.4% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: clamp(14px, 1.72vw, 33px) !important;
}

#stage-ready-screen .buy-btn {
  position: absolute !important;
  bottom: 8% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 88% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: clamp(11px, 1.35cqw, 26px) !important;
  font-weight: 800 !important;
}

#stage-ready-screen .start-action {
  position: absolute !important;
  right: 0 !important;
  bottom: 0.3% !important;
  width: 100% !important;
  height: 37.44% !important;
  margin: 0 !important;
}

#stage-ready-screen .ready-attempts-pill {
  container-type: size;   /* 도전 횟수 글자가 알약 폭(cqw)을 따른다. 시작 묶음(.start-action)을 컨테이너로 하면 «시작하기» 글자 기준까지 바뀌어 세로 태블릿에서 10px 로 줄었다 */
  position: absolute !important;
  z-index: 3;
  top: -4% !important;
  right: 12% !important;
  width: 17.4% !important;
  height: 31.3% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrPrice.png") center / 100% 100% no-repeat !important;
  color: #fff !important;
  font-size: clamp(14px, 1.72vw, 33px) !important;
}

#stage-ready-screen .ready-attempts-pill::after {
  display: none !important;
}

#stage-ready-screen #start-game-btn {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgBtnStart1.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* Game play */
#game-screen {
  display: block;
}

#game-screen .main-play-area {
  position: absolute !important;
  top: 5.65% !important;
  left: 2.6% !important;
  width: 95.65% !important;
  height: 56.5% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#game-screen .image-wrapper {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.8% !important;
  align-items: stretch !important;
}

#game-screen .canvas-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5.35% 3.4% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/resources/figma-v2/imgFrIngameEdge3.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#game-screen .canvas-container::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 5% 3.05%;
  background: url("assets/resources/figma-v2/imgMaskIngamePictureEdge1.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

#game-screen canvas {
  position: relative !important;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 3% !important;
  object-fit: fill !important;
  background: #111;
}

#game-screen .progress-section {
  position: absolute !important;
  z-index: 8;
  top: 64.17% !important;
  left: 22.92% !important;
  width: 54.11% !important;
  height: 18.7% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#game-screen .progress-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 40.6% !important;
  min-height: 0 !important;
  padding: 18.2% 1.85% 20% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrTimeGaugeBack2.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#game-screen .progress-bar {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 999px !important;
  background-color: #74c7ba !important;
  background-image: url("assets/resources/figma-v2/imgObTimeGauge2.png") !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  box-shadow: none !important;
}

#game-screen .star-thresholds {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}

#game-screen .star-marker,
#game-screen .threshold-star {
  width: 7.32% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  transform: translate(-50%, -8%) !important;
  background: url("assets/resources/figma-v2/imgObTimeGaugeStar1.png") center / contain no-repeat !important;
}

#game-screen .star-marker .star-icon,
#game-screen .threshold-star::before,
#game-screen .star-marker .marker-line {
  display: none !important;
}

#game-screen .timer-bubble {
  position: absolute !important;
  top: 39.2% !important;
  left: 50% !important;
  width: 25.7% !important;
  height: 59.1% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrRemainingTime1.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: var(--figma-deep-mint) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(17px, 2.02cqw, 39px) !important;
  font-weight: 800 !important;
}

#game-screen .bottom-hud {
  position: absolute !important;
  z-index: 8;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none;
}

#game-screen .hud-right {
  position: absolute !important;
  right: 2.65% !important;
  bottom: 3.25% !important;
  width: 20.26% !important;
  height: 18.7% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 4.4% !important;
  pointer-events: auto;
}

#game-screen .item-btn {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14% 10% 8% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrIngameItemSlot2.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #fff !important;
}

#game-screen .item-btn .cooldown-overlay {
  inset: 8.4% 2.7% 1.5% !important;
  width: auto !important;
  height: auto !important;
  border-radius: 18% / 17% !important;
}

#game-screen .item-icon {
  width: 72% !important;
  height: 66% !important;
  margin: 0 auto !important;
  border: 0 !important;
  background: transparent !important;
}

#game-screen .item-count {
  position: absolute !important;
  top: 3% !important;
  left: 50% !important;
  width: auto !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: clamp(14px, 1.72cqw, 33px) !important;
  font-weight: 800 !important;
}

#game-screen .item-label {
  position: absolute !important;
  bottom: 5% !important;
  left: 0 !important;
  width: 100% !important;
  color: var(--figma-brown) !important;
  font-size: clamp(10px, 0.9cqw, 17px) !important;
  font-weight: 800 !important;
  text-align: center !important;
}

#game-screen .find-indicators {
  position: absolute !important;
  z-index: 9;
  left: 2.35% !important;
  bottom: 3.3% !important;
  width: 13.1% !important;
  height: 10.8% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4% !important;
  overflow: visible !important;
}

#game-screen .indicator {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: 4.8cqw !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  border: 0 !important;
  background: url("assets/resources/figma-v2/imgBtn1.png") center / contain no-repeat !important;
  box-shadow: none !important;
}

#game-screen .indicator.found {
  filter: hue-rotate(245deg) saturate(1.3) brightness(1.1);
}

/* Roulette */
#roulette-screen > .roulette-content {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

#roulette-screen > .roulette-content > .roulette-box-stage {
  position: absolute !important;
  top: 22% !important;
  left: 8% !important;
  width: 44% !important;
  height: 65% !important;
  margin: 0 !important;
}

#roulette-wheel {
  width: 100% !important;
  height: 100% !important;
  filter: none !important;
}

#roulette-wheel img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 뽑기 버튼 글자는 버튼 그림 높이에 묶는다(10/17 Kay님 승인 시안 — 글자 크기 검증 7단계).
   예전엔 게임 틀 폭(cqw) 기준이라 PC·태블릿 가로에서 버튼은 그대로인데 글자만 커져 동전을 덮었다(«3000» 이 «300P» 로 보임).
   비율은 폰 390×844 값: 버튼 높이 82px 에 가격 23.4px · 무료 15px. 버튼이 size 컨테이너라 cqh = 버튼 높이 */
:root {
  --fit-roulette-price-fs: clamp(12px, 28.5cqh, 54px);
  --fit-roulette-free-fs: clamp(10px, 18.3cqh, 44px);
  --fit-roulette-remaining-fs: clamp(7px, 12.4cqh, 30px);   /* «무료뽑기» 의 0.68배 */
}

#roulette-screen #spin-roulette-btn {
  position: absolute !important;
  top: 46.49% !important;
  left: 55.83% !important;
  width: var(--roulette-btn-w, 22.4%) !important;
  height: auto !important;
  aspect-ratio: 413 / 168;
  container-type: size;
  column-gap: 4.5%;   /* 동전·숫자·P 사이 = 버튼 폭의 4.5%(무료뽑기는 .is-free 의 gap 이 덮는다) */
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgBtnPriceDrawing1.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: clamp(17px, 2.3cqw, 44px) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  overflow: visible !important;
}

/* 동전 · 숫자 · P 는 버튼 그림 위 고정 % 자리에 따로 두면 사이가 2.7% 뿐이라 «3000» 에서 붙었다(10/17 Kay님 지적).
   버튼(가운데 정렬 flex) 안에 한 줄로 늘어놓고 사이는 버튼의 column-gap 으로 준다.
   세로는 버튼 그림 윗면 가운데(47.6%) — 가운데 정렬이라 위로 4.8cqh 만큼 올린다. 크기는 원래 비율(cqw/cqh = 버튼 기준) */
#roulette-screen #spin-roulette-btn > .roulette-price-icon,
#roulette-screen #spin-roulette-btn > .roulette-price-unit {
  position: relative !important;
  flex: none;
  display: block !important;
  max-width: none !important;
  margin: -4.8cqh 0 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

#roulette-screen #spin-roulette-btn > .roulette-price-icon {
  width: 15.21cqw !important;
  height: 38.69cqh !important;
}

#roulette-screen #spin-roulette-btn > .roulette-price-value {
  position: relative !important;
  flex: none;
  margin-top: -4.8cqh;
  width: auto !important;
  height: 40.02cqh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-family: "Tmoney RoundWind", "Pretendard Variable", Pretendard, sans-serif !important;
  font-size: var(--fit-roulette-price-fs) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  -webkit-text-stroke: max(0.75px, 0.1cqw) #4e867c !important;
  text-shadow: 0 max(0.75px, 0.1cqw) 0 rgba(78, 134, 124, 0.45) !important;
  pointer-events: none !important;
}

#roulette-screen #spin-roulette-btn > .roulette-price-unit {
  width: 10.41cqw !important;
  height: 30.36cqh !important;
}

#roulette-screen #spin-roulette-btn.is-free {
  padding: 0 !important;
  gap: 0.45em !important;
  justify-content: center !important;
  font-size: clamp(15px, 2.3cqw, 44px) !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(78, 134, 124, 0.45) !important;
}

#roulette-screen #spin-roulette-btn > .roulette-free-label {
  font-size: var(--fit-roulette-free-fs);
  white-space: nowrap !important;
}

#roulette-screen #spin-roulette-btn > .roulette-free-remaining {
  font-size: var(--fit-roulette-remaining-fs) !important;
  white-space: nowrap !important;
}

/* 게임 틀 폭 1100px 이상(PC·태블릿 가로): 뽑기 버튼이 980px 판 기준 220px 로 고정돼 화면에 비해 작았다 — 게임 틀 폭에 맞춰 키운다(10/17 승인 시안 안 B) */
@container (min-width: 1100px) {
  #roulette-screen #spin-roulette-btn { --roulette-btn-w: clamp(220px, 20cqw, 420px); }
}

/* Collection recipes */
#collection-screen {
  padding: 0 !important;
}

#collection-list-container {
  position: absolute !important;
  top: 19.35% !important;
  left: 5.05% !important;
  width: 89.9% !important;
  height: 77.5% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 3% !important;
  gap: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none;
}

#collection-list-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#collection-list-container .collection-card {
  position: relative !important;
  flex: 0 0 35.93cqh !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 -1.11cqh !important;
  padding: 4.2% 3.9% 2.3% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/resources/figma-v2/imgFrCollectionList2.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  display: block !important;
  overflow: hidden !important;
}

#collection-list-container .collection-reward-row {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

#collection-list-container .collection-reward-name {
  position: absolute !important;
  top: 15.2% !important;
  left: 5% !important;
  width: 64% !important;
  color: var(--figma-brown) !important;
  font-size: calc(var(--figma-frame-height) * 0.04233) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

#collection-list-container .collection-reward-icon {
  position: absolute !important;
  top: 37% !important;
  right: auto !important;
  left: 70.7% !important;
  width: 7.7% !important;
  height: 34.3% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#collection-list-container .combine-btn {
  position: absolute !important;
  z-index: 4;
  top: 11.3% !important;
  right: 3.05% !important;
  width: 17.03% !important;
  height: 30.93% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/resources/figma-v2/imgBtnCollectionExchange2.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

#collection-list-container .combine-btn:disabled {
  filter: none !important;
  background-image: url("assets/resources/figma-v2/imgBtnCollectionExchangeOff1.png") !important;
}

#collection-list-container .collection-materials {
  position: absolute !important;
  left: 3.9% !important;
  bottom: 8.2% !important;
  width: 66% !important;
  height: 51% !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 1.1% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  overscroll-behavior-x: contain !important;
}

#collection-list-container .collection-materials::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#collection-list-container .collection-material {
  position: relative !important;
  flex: 0 0 13.08% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrCollectionListItem3.png") center / 100% 100% no-repeat !important;
  color: var(--figma-brown) !important;
}

#collection-list-container .collection-material-icon {
  position: absolute !important;
  top: 5.5% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 56% !important;
  height: 42% !important;
  flex: none !important;
  margin: 0 !important;
}

#collection-list-container .collection-material-icon img,
#collection-list-container .collection-material-icon > div {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

#collection-list-container .collection-material-name {
  position: absolute !important;
  top: 51.5% !important;
  left: 5% !important;
  width: 90% !important;
  height: 13% !important;
  margin: 0 !important;
  color: var(--figma-brown) !important;
  font-size: calc(var(--figma-frame-height) * 0.0208) !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#collection-list-container .collection-material-count {
  position: absolute !important;
  left: 8% !important;
  bottom: 4% !important;
  width: 84% !important;
  min-width: 0 !important;
  height: 17% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Tmoney RoundWind", "Pretendard Variable", Pretendard, sans-serif !important;
  font-size: calc(var(--figma-frame-height) * 0.02778) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#collection-list-container .collection-material-count.is-complete {
  color: #2c8c66 !important;
}

#collection-list-container .collection-material-count.is-missing {
  color: #cd4239 !important;
}

/* Inventory */
#inventory-screen {
  padding: 0 !important;
}

#inventory-screen::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 31.95% !important;
  left: 50% !important;
  width: 40.7% !important;
  height: 8.25% !important;
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  background: url("assets/resources/figma-v2/imgLogoMyBag1.png") center / contain no-repeat !important;
}

/* 감싼 상자(인라인 max-width:1000px)는 1366 화면 모양 그대로 큰 화면에서 같이 커진다 — 폭·높이 중 작은 쪽 비율.
   (예전 :first-child 규칙은 맨 앞에 끼어드는 구름 상자(.lottie-clouds) 때문에 한 번도 걸리지 않았다. 2026-10-29 시안 C 승인) */
#inventory-screen > div:has(> #reward-list) {
  max-width: max(1000px, min(calc(var(--figma-frame-width) * 0.732), calc(var(--figma-frame-height) * 1.302))) !important;
}

#reward-list.inventory-grid {
  position: absolute !important;
  top: 46.4% !important;
  left: 5.35% !important;
  width: 89.3% !important;
  height: 49.5% !important;
  margin: 0 !important;
  padding: 0 0 3% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  gap: clamp(8px, 1.2cqh, 20px) 2.45% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#inventory-screen .inventory-item {
  position: relative !important;
  box-sizing: border-box !important;
  appearance: none;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  display: block !important;
  color: var(--figma-brown) !important;
  /* 이름 글자를 카드 폭(cqw)에 묶는다 — 카드보다 글자가 먼저 커져 두 줄로 넘치던 것 */
  container-type: inline-size;
}

#inventory-screen .inventory-item .inventory-item-art {
  /* Keep the bitmap in normal flow so Grid reserves its full responsive height. */
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 926 / 260;
  background: url("assets/resources/figma-v2/imgFrReward1.png") center / contain no-repeat;
}

#inventory-screen .inventory-item .icon {
  /* The painted icon slot is x=48, y=46, w=154, h=154 in the 926x260 frame. */
  position: absolute !important;
  left: 5.1836% !important;
  top: 17.6923% !important;
  width: 16.6307% !important;
  height: 59.2308% !important;
  margin: 0 !important;
  background: transparent !important;
}

#inventory-screen .inventory-item .icon img {
  width: 88% !important;
  height: 88% !important;
  object-fit: contain !important;
}

#inventory-screen .inventory-item .name {
  position: absolute !important;
  inset: 15% 6% 23% 25% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--figma-brown) !important;
  font-size: min(clamp(16px, calc(var(--figma-frame-width) * 0.0208), 40px), 6.6cqw) !important;
  font-weight: 800 !important;
  text-align: center !important;
}

#inventory-screen .empty-msg {
  grid-column: 1 / -1;
  align-self: center;
  color: var(--figma-brown);
  font-size: clamp(18px, 2cqw, 38px);
  text-align: center;
}

/* Figma result popup */
#reward-modal {
  position: fixed !important;
  z-index: 10020 !important;
  background: rgba(16, 52, 74, 0.56) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#reward-modal.hidden {
  display: none !important;
}

#reward-modal .modal-card {
  --reward-card-width: calc(var(--figma-frame-width) * 0.4307);
  --reward-card-height: 947;
  position: relative !important;
  width: var(--reward-card-width) !important;
  height: auto !important;
  aspect-ratio: 827 / 947 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgPopupReward1.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#reward-modal.collection-result .modal-card {
  --reward-card-height: 906;
  aspect-ratio: 827 / 906 !important;
  background-image: url("assets/resources/figma-v2/imgPopupExchange1.png") !important;
}

#reward-modal .modal-title {
  position: absolute !important;
  top: 8.4% !important;
  left: 27.8% !important;
  width: 44.4% !important;
  height: 6.8% !important;
  margin: 0 !important;
  background: url("assets/resources/figma-v2/imgLogoReward1.png") center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
}

#reward-modal.collection-result .modal-title {
  background-image: url("assets/resources/figma-v2/imgLogoExchangeSuccess1.png") !important;
}

#reward-modal .modal-icon-container {
  position: absolute !important;
  top: 24.5% !important;
  left: 26.5% !important;
  width: 47.2% !important;
  height: auto !important;
  aspect-ratio: 390 / 386 !important;
  margin: 0 !important;
  padding: 8% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrRewardItem1.png") center / contain no-repeat !important;
}

#reward-modal.collection-result .modal-icon-container {
  background-image: url("assets/resources/figma-v2/imgFrExchangeItem1.png") !important;
}

#reward-modal .modal-icon-container img,
#reward-modal .modal-icon-container > div {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

#reward-modal .modal-message {
  position: absolute !important;
  top: 65.3% !important;
  left: 5% !important;
  width: 90% !important;
  height: 4.44% !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: var(--figma-brown) !important;
  font-size: var(--reward-message-fs, clamp(15px, 1.6cqw, 31px)) !important;
  font-weight: 800 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#reward-modal.roulette-result #reward-name-display {
  top: 65.5% !important;
  height: 7% !important;
  display: flex !important;
  z-index: 4;
  /* 카드 폭 비율만 따르면 960·폰에서 12px 대까지 작아진다 — 최소 16px(2026-10-29 시안 승인). */
  font-size: var(--reward-name-fs, clamp(16px, 1.3cqw, 24px)) !important;
  line-height: 1.1 !important;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

#reward-modal #reward-close-btn {
  position: absolute !important;
  top: 73.3% !important;
  left: 29.9% !important;
  width: 40.3% !important;
  height: auto !important;
  aspect-ratio: 333 / 133 !important;
  min-height: 0 !important;
  margin-top: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgBtnRewardCheck1.png") center / contain no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

#reward-modal.collection-result #reward-close-btn {
  top: 73.84% !important;
  background-image: url("assets/resources/figma-v2/imgBtnExchangeCheck1.png") !important;
}

#reward-modal.collection-result .modal-title {
  top: 8.5% !important;
  height: 7.06% !important;
}

#reward-modal.collection-result .modal-icon-container {
  top: 25.17% !important;
}

#reward-modal.collection-result .modal-message {
  display: none !important;
}

@media screen and (orientation: portrait) {
  .screen {
    background-image: var(--figma-bg-portrait) !important;
  }

  #global-top-bar,
  #global-top-bar.selection-header,
  #global-top-bar.stage-sel-header,
  #global-top-bar.selection-header.stage-sel-header {
    top: 1.67% !important;
    left: 1.67% !important;
    width: 96.67% !important;
    height: 13.55% !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  #global-top-bar .top-menu {
    width: 100% !important;
    height: 52.2% !important;
  }

  #global-top-bar .menu-btn {
    height: 71.2% !important;
    margin-top: 2.95% !important;
    font-size: clamp(12px, 2.75cqw, 30px) !important;
  }

  #global-top-bar .menu-btn.active {
    height: 100% !important;
    margin-top: 0 !important;
    font-size: clamp(13px, 2.85cqw, 31px) !important;
  }

  #global-top-bar .top-status-right {
    position: absolute !important;
    top: 60.7% !important;
    left: 17.72% !important;
    width: 64.46% !important;
    height: 39.21% !important;
    margin: 0 !important;
    gap: 2.6% !important;
  }

  #game-container > #global-top-bar > .top-status-right > .hud-pill {
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
  }

  #game-container > #global-top-bar > .top-status-right > .hud-attempts {
    padding: 0 4% 0 27% !important;
    gap: 0.1em !important;
  }

  #game-container > #global-top-bar > .top-status-right > .hud-attempts > .hud-attempts-label,
  #game-container > #global-top-bar > .top-status-right > .hud-attempts > #daily-attempts-display {
    font-size: clamp(9px, 2.95cqw, 12px) !important;
  }

  #global-top-bar .hud-pill,
  #global-top-bar .hud-points #point-count {
    font-size: clamp(12px, 2.95cqw, 32px) !important;
  }

  #splash-screen .splash-title {
    top: 20.83% !important;
    width: 79.54% !important;
    height: 22.29% !important;
  }

  #splash-screen .sns-login-row {
    top: 52.08% !important;
    width: 49.1% !important;
    /* 아이콘은 높이 5.89% 인데 줄 폭은 화면 폭 49.1% 라, 9:16 보다 키 큰 세로(폴드 접힘 344×746 등)에선
       아이콘 4개가 줄을 넘쳐 오른쪽으로 7px 쏠렸다(10/27 실기기). 줄 폭을 높이×4.69(=49.1/10.47)까지 넓혀
       9:16 과 같은 간격 비율을 지킨다. 9:16 이상 넓은 세로는 max 가 49.1% 를 골라 그대로다 */
    width: max(49.1%, 27.62cqh) !important;
    height: 5.89% !important;
  }

  #splash-screen #guest-login-container {
    top: 59.17% !important;
  }

  #splash-screen #btn-login-guest {
    font-size: clamp(11px, 2.5cqw, 26px) !important;
  }

  #splash-screen #start-btn {
    top: var(--splash-start-top, 65.2%) !important;
    width: 72.69% !important;
    height: 7.87% !important;
    font-size: clamp(16px, 4cqw, 43px) !important;
  }

  #splash-screen:has(#sns-login-container.hidden) {
    --splash-start-top: 58%;
  }

  #stage-selection-screen .difficulty-tabs {
    top: 23.6% !important;
    left: 3.8% !important;
    width: 92.4% !important;
    height: 9.48% !important;
    padding: 1.7cqh 6.35% !important;
  }

  #stage-selection-screen .diff-tab {
    font-size: clamp(17px, 3.35cqw, 36px) !important;
  }

  #stage-selection-screen .stage-slider-container {
    top: 33.49% !important;
    left: 2.13% !important;
    width: 95.65% !important;
    height: 31.46% !important;
    max-width: none !important;
    padding: 0 !important;
  }

  #stage-selection-screen .stage-cards {
    padding: 0 !important;
    gap: 2.3cqw !important;
  }

  #stage-selection-screen .stage-card-item {
    flex-basis: 95.65cqw !important;
    width: 95.65cqw !important;
    aspect-ratio: 1033 / 604 !important;
  }

  #stage-selection-screen .slider-arrow {
    top: 39.24% !important;
    width: 12.04cqw !important;
    height: auto !important;
    aspect-ratio: 130 / 129 !important;
  }

  #stage-ready-screen .selection-header {
    height: 8.2% !important;
  }

  #stage-ready-screen #back-to-selection {
    top: 19.8% !important;
    left: 3.33% !important;
    width: 13.61% !important;
    height: 75.61% !important;
  }

  #stage-ready-screen #ready-stage-title {
    top: 17.8% !important;
    left: 29.17% !important;
    width: 29.54% !important;
    height: 77.44% !important;
    font-size: clamp(15px, 2.95cqw, 32px) !important;
  }

  #stage-ready-screen .ready-header-status {
    top: 26.8% !important;
    right: 3.7% !important;
    width: 29.26% !important;
    height: 60.4% !important;
  }

  #stage-ready-screen .ready-header-status .hud-pill {
    font-size: clamp(12px, 2.85cqw, 31px) !important;
  }

  #stage-ready-screen .ready-content {
    top: 17.97% !important;
    left: 5.18% !important;
    width: 89.72% !important;
    height: 43.03% !important;
  }

  #stage-ready-screen .ready-main {
    top: 0 !important;
    height: 68.7% !important;
    padding: 4.85% 5.25% !important;
  }

  #stage-ready-screen .ready-side {
    right: auto !important;
    left: 2.58% !important;
    bottom: 0 !important;
    width: 94.67% !important;
    height: 28.6% !important;
  }

  #stage-ready-screen .info-block h3 {
    font-size: clamp(10px, 1.65cqw, 18px) !important;
  }

  #stage-ready-screen .info-value {
    font-size: clamp(19px, 4.63cqw, 50px) !important;
  }

  #stage-ready-screen .ready-footer {
    top: auto !important;
    right: 3.7% !important;
    bottom: 2.45% !important;
    width: 92.97% !important;
    height: 13.13% !important;
  }

  #stage-ready-screen .item-shop-row {
    width: 37.35% !important;
    height: 100% !important;
    gap: 3.7% !important;
  }

  #stage-ready-screen .owned-count {
    font-size: clamp(14px, 3.05cqw, 33px) !important;
  }

  #stage-ready-screen .buy-btn {
    font-size: clamp(10px, 2.4cqw, 26px) !important;
  }

  #stage-ready-screen .start-action {
    right: 0 !important;
    bottom: 0 !important;
    width: 41.13% !important;
    height: 59.9% !important;
  }

  #stage-ready-screen .ready-attempts-pill {
    font-size: clamp(14px, 3.05cqw, 33px) !important;
  }

  #game-screen .main-play-area {
    top: 3.75% !important;
    left: 5.09% !important;
    width: 89.82% !important;
    height: 55.89% !important;
  }

  #game-screen .image-wrapper {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(2, 1fr) !important;
        gap: 0 !important;
  }

  #game-screen .canvas-container {
    padding: 3.6% 3.4% !important;
    background-image: url("assets/resources/figma-v2/imgFrIngameEdge1.png") !important;
  }

  #game-screen .canvas-container::after {
    display: none !important;
  }

  #game-screen .progress-section {
    top: 68.54% !important;
    left: 10.18% !important;
    width: 79.54% !important;
    height: 9.8% !important;
  }

  #game-screen .progress-container {
    height: 43.6% !important;
    padding: 17.2% 2.1% 20% !important;
    background-image: url("assets/resources/figma-v2/imgFrTimeGaugeBack1.png") !important;
  }

  #game-screen .progress-bar {
    background-image: url("assets/resources/figma-v2/imgObTimeGauge1.png") !important;
  }

  #game-screen .timer-bubble {
    top: 42% !important;
    width: 27.6% !important;
    height: 56% !important;
    font-size: clamp(16px, 2.97cqw, 32px) !important;
  }

  #game-screen .hud-right {
    right: 3.33% !important;
    bottom: 1.88% !important;
    width: 36.39% !important;
    height: 10.52% !important;
    gap: 5.3% !important;
  }

  #game-screen .bottom-hud {
    display: block !important;
  }

  #game-screen .item-btn {
    background-image: url("assets/resources/figma-v2/imgFrIngameItemSlot1.png") !important;
  }

  #game-screen .item-count {
    font-size: clamp(14px, 3.05cqw, 33px) !important;
  }

  #game-screen .item-label {
    font-size: clamp(9px, 1.7cqw, 18px) !important;
  }

  #game-screen .find-indicators {
    left: 3.43% !important;
    bottom: 1.77% !important;
    width: 18.24% !important;
    height: 4.8% !important;
    max-width: none !important;
    gap: 1.2cqw !important;
  }

  #game-screen .indicator {
    max-width: 8.52cqw !important;
  }

  #roulette-screen > .roulette-content > .roulette-box-stage {
    top: 24% !important;
    left: 5% !important;
    width: 90% !important;
    height: 40% !important;
  }

  #roulette-screen #spin-roulette-btn {
    top: 68.49% !important;
    left: 24% !important;
    width: var(--roulette-btn-w, 52%) !important;
    height: auto !important;
    padding: 0 !important;
    font-size: clamp(16px, 4cqw, 43px) !important;
  }

  #collection-list-container {
    top: 19.22% !important;
    left: 3.98% !important;
    width: 92.04% !important;
    height: 79.1% !important;
    gap: 2.34cqh !important;
  }

  #collection-list-container .collection-card {
    flex-basis: 19.01cqh !important;
    width: calc(100% - 0.1cqw) !important;
    margin-bottom: 0 !important;
    padding: 5.8% 6.6% 2.5% !important;
    background-image: url("assets/resources/figma-v2/imgFrCollectionList1.png") !important;
  }

  #collection-list-container .collection-reward-name {
    top: 15.6% !important;
    left: 7.8% !important;
    width: 58% !important;
    font-size: clamp(16px, 4.23cqw, 46px) !important;
  }

  #collection-list-container .collection-reward-icon {
    top: 40% !important;
    right: 20% !important;
    width: 16% !important;
    height: 44% !important;
  }

  #collection-list-container .combine-btn {
    top: 14.2% !important;
    right: 7.5% !important;
    width: 24.07% !important;
    height: 27.4% !important;
    background-image: url("assets/resources/figma-v2/imgBtnCollectionExchange1.png") !important;
  }

  #collection-list-container .collection-materials {
    left: 6.6% !important;
    bottom: 10.9% !important;
    width: 61% !important;
    height: 54.2% !important;
  }

  #collection-list-container .collection-material {
    flex-basis: 24% !important;
    min-width: 92px !important;
    background-image: url("assets/resources/figma-v2/imgFrCollectionListItem1.png") !important;
  }

  #collection-list-container .collection-material-name {
    font-size: clamp(8px, 1.35cqw, 15px) !important;
  }

  #collection-list-container .collection-material-count {
    font-size: clamp(11px, 2.14cqw, 23px) !important;
  }

  #inventory-screen::before {
    top: 19.69% !important;
    width: 59.35% !important;
    height: 3.8% !important;
  }

  #reward-list.inventory-grid {
    top: 26.41% !important;
    left: 6.3% !important;
    width: 85.74% !important;
    height: 70.5% !important;
    grid-template-columns: 1fr !important;
    gap: clamp(8px, 1.2cqh, 20px) !important;
  }

  #inventory-screen .inventory-item .name {
    font-size: min(clamp(15px, calc(var(--figma-frame-width) * 0.037), 40px), 6.6cqw) !important;
  }

  #reward-modal .modal-card {
    width: min(76.57cqw, 49.32cqh) !important;
  }
}

@media screen and (orientation: landscape) {
  #collection-screen #collection-list-container .collection-card .collection-reward-icon {
    top: 9.6% !important;
    right: auto !important;
    left: 70.7% !important;
    width: 7.7% !important;
    height: 34.3% !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-materials {
    bottom: 4% !important;
    width: 92% !important;
    height: 50.5% !important;
    gap: 0.625cqw !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-material {
    flex-basis: 7.76cqw !important;
    width: 7.76cqw !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-reward-name {
    font-size: calc(var(--figma-frame-height) * 0.04233) !important;
    line-height: calc(var(--figma-frame-height) * 0.05507) !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-material-name {
    font-size: calc(var(--figma-frame-height) * 0.0208) !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-material-count {
    bottom: 6.5% !important;
    font-size: calc(var(--figma-frame-height) * 0.02315) !important;
  }

  #collection-screen #collection-list-container .collection-card .combine-btn {
    background-color: transparent !important;
    background-image: url("assets/resources/figma-v2/imgBtnCollectionExchange2.png") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  #collection-screen #collection-list-container .collection-card .combine-btn:disabled {
    background-color: transparent !important;
    background-image: url("assets/resources/figma-v2/imgBtnCollectionExchangeOff1.png") !important;
    box-shadow: none !important;
  }
}

/* Portrait gameplay aligned to ver.2 (1080x1920) reference. */
@media screen and (orientation: portrait) {
  #game-screen.screen .main-play-area {
    top: 9.27% !important;
    left: 6.3% !important;
    width: 87.4% !important;
    height: 54.27% !important;
  }

  #game-screen.screen .image-wrapper {
    gap: 2% !important;
  }

  #game-screen.screen .canvas-container {
    --canvas-fit-mode: contain !important;
    justify-self: center !important;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    aspect-ratio: var(--stage-frame-ratio, 970 / 540) !important;
    padding: 4.55% 3.4% !important;
  }

  #game-screen.screen .canvas-container::after {
    display: block !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    border-style: solid !important;
    border-width: calc(var(--figma-frame-width) * 0.02222) !important;
    border-image-source: url("assets/resources/figma-v2/imgFrIngameEdge1.png") !important;
    border-image-slice: 32 !important;
    border-image-width: 1 !important;
    border-image-repeat: stretch !important;
    background: none !important;
  }

  #game-screen.screen .canvas-container #base-canvas,
  #game-screen.screen .canvas-container #diff-canvas {
    width: auto !important;
    height: auto !important;
    border-radius: clamp(8px, 2.6cqw, 28px) !important;
    object-fit: contain !important;
  }

  #game-screen.screen .progress-section {
    top: 72% !important;
    left: 10.18% !important;
    width: 79.54% !important;
    height: 9.8% !important;
  }

  #game-screen.screen .progress-container {
    background-size: 100% 43.6% !important;
  }

  #game-screen.screen .progress-bar {
    top: 7.4% !important;
    left: 2.1% !important;
    width: 95.8% !important;
    height: 28.8% !important;
  }

  #game-screen.screen #star-thresholds {
    height: 43.6% !important;
  }

  #game-screen.screen #star-thresholds .star-marker {
    top: 50% !important;
    width: 8.2% !important;
    transform: translate(-50%, -50%) !important;
  }

  #game-screen.screen .timer-bubble {
    top: 42% !important;
    left: 48.37% !important;
    width: 27.6% !important;
    height: 56.32% !important;
    font-size: calc(var(--figma-frame-width) * 0.02963) !important;
  }

  #game-screen.screen .hud-right {
    right: 2.69% !important;
    bottom: 1.2% !important;
    width: 35.65% !important;
    height: 10.52% !important;
    gap: 3.38% !important;
  }

  #game-screen.screen .item-btn .item-count {
    top: 3% !important;
    right: auto !important;
    left: 50% !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: calc(var(--figma-frame-width) * 0.03056) !important;
    line-height: 1 !important;
  }

  #game-screen.screen .item-btn .item-icon img {
    transform: translateY(8%) scale(1.15) !important;
    transform-origin: center !important;
  }

  #game-screen.screen .find-indicators {
    left: 3.61% !important;
    bottom: 2.15% !important;
    width: 17.7% !important;
    height: 4.27% !important;
  }

  #game-screen.screen #find-indicators .indicator {
    max-width: 7.6cqw !important;
  }
}

/*
 * Compact landscape keeps the Figma frame proportions. Override the legacy
 * mobile header flex rules so the five menu buttons cannot grow beneath HUD.
 */
@media screen and (orientation: landscape) {
  /* Keep the play slots wide, but let each frame follow the 2:1 stage image. */
  #game-screen.screen .main-play-area {
    top: 2% !important;
    height: auto !important;
    aspect-ratio: 2.2816 / 1 !important;
  }

  #game-screen.screen .progress-section {
    top: 78% !important;
  }

  #game-screen.screen .canvas-container {
    align-self: center !important;
    height: auto !important;
    aspect-ratio: var(--stage-frame-ratio, 970 / 540) !important;
    padding: 4.55% 3.4% !important;
    background-image: url("assets/resources/figma-v2/imgFrIngameEdge1.png") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  #game-screen.screen .canvas-container::after {
    display: none !important;
  }

  #game-screen.screen .canvas-container #base-canvas,
  #game-screen.screen .canvas-container #diff-canvas {
    border-radius: clamp(8px, 1.45cqw, 28px) !important;
  }

  #game-screen.screen .timer-bubble {
    font-size: clamp(17px, 1.76cqw, 34px) !important;
  }

  #game-screen.screen #star-thresholds .star-marker {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  #game-screen.screen .item-btn .item-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: translateY(6%) scale(1.08) !important;
    transform-origin: center !important;
  }

  #game-screen.screen .item-btn .item-count {
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: 46% !important;
    height: 25% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: clamp(10px, 1.25cqw, 24px) !important;
    line-height: 1 !important;
  }

  #game-container > #global-top-bar {
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  #game-container > #global-top-bar > .top-menu {
    flex: 0 0 var(--land-top-menu-width, 57.62%) !important;
    width: var(--land-top-menu-width, 57.62%) !important;
    max-width: var(--land-top-menu-width, 57.62%) !important;
    height: 100% !important;
    padding: 0 !important;
    gap: 0.35% !important;
    overflow: visible !important;
  }

  #game-container > #global-top-bar > .top-status-right {
    position: absolute !important;
    top: 18.42% !important;
    right: 0 !important;
    left: auto !important;
    width: 36.4% !important;
    max-width: 36.4% !important;
    min-width: 0 !important;
    height: 74.98% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2.4% !important;
  }

  #game-container > #global-top-bar > .top-status-right > .hud-pill {
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
  }

  #game-container > #global-top-bar > .top-status-right > .hud-attempts {
    padding: 0 6% 0 27% !important;
  }
}

/* Query the rendered game frame so mobile browser chrome is included. */
@container game-viewport (max-height: 520px) {
  #global-top-bar .menu-btn,
  #global-top-bar .menu-btn.active,
  #global-top-bar .hud-pill,
  #global-top-bar .hud-points #point-count {
    font-size: clamp(11px, 2.6cqh, 18px) !important;
  }

  #stage-selection-screen .diff-tab {
    font-size: clamp(13px, 3.4cqh, 22px) !important;
  }

  #game-screen .item-label {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #splash-screen .splash-title,
  #roulette-wheel,
  .screen,
  button {
    animation: none !important;
    transition: none !important;
  }

  #splash-screen .splash-title {
    opacity: 1 !important;
    filter: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }
}

/* Final isolation for the stage-ready frame. The legacy sheet mounts this
   screen as a responsive grid; Figma uses one full-canvas coordinate space. */
#stage-ready-screen.screen {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  padding: 0 !important;
}

#stage-ready-screen.screen > .selection-header {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 15% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

#stage-ready-screen.screen #back-to-selection.slider-arrow {
  position: absolute !important;
  top: 19.1% !important;
  left: 1.88% !important;
  width: 7.66% !important;
  height: 73.5% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgBtnBack.png") center / contain no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

#stage-ready-screen.screen #ready-stage-title {
  position: absolute !important;
  top: 12.3% !important;
  left: 30.68% !important;
  width: 16.62% !important;
  height: 75.3% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 auto !important;   /* 위쪽 줄이 모자라면 제목이 줄어든다(한 줄 유지) */
}

#stage-ready-screen.screen .ready-header-status {
  position: absolute !important;
  top: 19.75% !important;
  right: 2.18% !important;
  width: 16.45% !important;
  height: 58.7% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 2.18fr 1fr !important;
  gap: 4.2% !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill,
#stage-ready-screen.screen .ready-header-status .hud-pill.primary,
#stage-ready-screen.screen .ready-header-status .hud-attempts {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

#stage-ready-screen.screen > .ready-content {
  position: absolute !important;
  top: 21.3% !important;
  left: 3.13% !important;
  width: 65.07% !important;
  height: 67.7% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

#stage-ready-screen.screen > .ready-content > .ready-main {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 7.9% 4.85% !important;
  grid-column: auto !important;
  grid-row: auto !important;
  background: url("assets/resources/figma-v2/imgFrMapInfo.png") center / 100% 100% no-repeat !important;
}

#stage-ready-screen.screen .ready-image-container {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
}

#stage-ready-screen.screen > .ready-content > .ready-side {
  position: absolute !important;
  z-index: 6 !important;
  top: auto !important;
  right: 6.9% !important;
  bottom: 11.9% !important;
  left: auto !important;
  width: 47.25% !important;
  height: 20.77% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

#stage-ready-screen.screen .ready-side .info-area {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 3.2% !important;
}

#stage-ready-screen.screen .ready-side .info-block:first-child,
#stage-ready-screen.screen .ready-side .info-block:nth-child(2) {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10% 7% 5% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrMapInfoGreen.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#stage-ready-screen.screen > .ready-footer {
  position: absolute !important;
  z-index: 8 !important;
  top: 46.3% !important;
  right: 3.75% !important;
  bottom: auto !important;
  left: auto !important;
  width: 26.15% !important;
  height: 40.3% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

#stage-ready-screen.screen > .ready-footer > .item-shop-row {
  position: absolute !important;
  top: 5.96% !important;
  left: 0 !important;
  width: 74.7% !important;
  height: 53.52% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  gap: 3.8% !important;
}

#stage-ready-screen.screen > .ready-footer > .item-shop-row > .buy-item-card {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  container-type: size;   /* 보유 개수·가격 글자가 카드 높이(cqh)를 따른다 */
}

@media screen and (orientation: portrait) {
  #stage-ready-screen.screen > .selection-header {
    height: 8.2% !important;
  }

  #stage-ready-screen.screen #back-to-selection.slider-arrow {
    top: 19.8% !important;
    left: 3.33% !important;
    width: 13.61% !important;
    height: 75.61% !important;
  }

  #stage-ready-screen.screen #ready-stage-title {
    top: 17.8% !important;
    left: 29.17% !important;
    width: 29.54% !important;
    height: 77.44% !important;
  }

  #stage-ready-screen.screen .ready-header-status {
    top: 26.8% !important;
    right: 3.7% !important;
    width: 29.26% !important;
    height: 60.4% !important;
  }

  #stage-ready-screen.screen > .ready-content {
    top: 17.97% !important;
    left: 5.18% !important;
    width: 89.72% !important;
    height: 43.03% !important;
  }

  #stage-ready-screen.screen > .ready-content > .ready-main {
    top: 0 !important;
    bottom: auto !important;
    height: 68.7% !important;
    padding: 4.85% 5.25% !important;
  }

  #stage-ready-screen.screen > .ready-content > .ready-side {
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: 2.58% !important;
    width: 94.67% !important;
    height: 28.6% !important;
  }

  #stage-ready-screen.screen > .ready-footer {
    top: auto !important;
    right: 3.7% !important;
    bottom: 2.45% !important;
    width: 92.97% !important;
    height: 13.13% !important;
  }

  #stage-ready-screen.screen > .ready-footer > .item-shop-row {
    top: 0 !important;
    width: 37.35% !important;
    height: 100% !important;
  }
}

/* Final isolation for the gameplay canvas and gauge. */
#stage-ready-screen.screen .ready-header-status .coin-icon {
  display: none !important;
}

#game-screen.screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  display: block !important;
}

#game-screen.screen .image-wrapper {
  max-width: none !important;
  max-height: none !important;
}

#game-screen.screen .canvas-container {
  --canvas-fit-mode: stretch;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#game-screen.screen #base-canvas,
#game-screen.screen #diff-canvas {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 3% !important;
  box-shadow: none !important;
  object-fit: fill !important;
}

#game-screen.screen .progress-container {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background-position: center top !important;
  background-size: 100% 40.6% !important;
}

#game-screen.screen .progress-bar {
  position: absolute !important;
  z-index: 1 !important;
  top: 6.9% !important;
  left: 1.85% !important;
  width: 96.3% !important;
  height: 26.8% !important;
}

#game-screen.screen .star-thresholds {
  z-index: 2 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  height: 40.6% !important;
}

#game-screen.screen .find-indicators .indicator {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: 4.8cqw !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgBtn1.png") center / contain no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
}

/*
 * Viewport frame integrity
 *
 * Figma supplies separate 1920x1080 and 1080x1920 layouts. Keep that
 * coordinate space intact inside arbitrary browser sizes so image assets,
 * controls, and panels never stretch independently.
 */
:root {
  --app-width: 100vw;
  --app-height: 100dvh;
  --safe-inline-size: calc(env(safe-area-inset-left) + env(safe-area-inset-right));
  --safe-block-size: calc(env(safe-area-inset-top) + env(safe-area-inset-bottom));
  --figma-frame-width: min(
    calc(var(--app-width, 100vw) - var(--safe-inline-size)),
    calc((var(--app-height, 100dvh) - var(--safe-block-size)) * 1.7777778)
  );
  --figma-frame-height: calc(var(--figma-frame-width) * 0.5625);
}

html,
body {
  width: 100% !important;
  height: var(--app-height, 100dvh) !important;
  min-height: 0 !important;
  background-color: #8ed4f4 !important;
  background-image: var(--figma-bg-landscape) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

body {
  background-color: #8ed4f4 !important;
}

#game-container {
  container-type: size;
  container-name: game-viewport;
  flex: 0 0 auto !important;
  width: var(--figma-frame-width) !important;
  height: var(--figma-frame-height) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: calc(var(--app-width, 100vw) - var(--safe-inline-size)) !important;
  max-height: calc(var(--app-height, 100dvh) - var(--safe-block-size)) !important;
  background: #8ed4f4 !important;
}

#splash-screen.screen,
#stage-selection-screen.screen,
#stage-ready-screen.screen,
#game-screen.screen,
#roulette-screen.screen,
#collection-screen.screen,
#inventory-screen.screen,
#settings-screen.screen {
  background-color: #8ed4f4 !important;
  background-image: var(--figma-bg-landscape) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

#game-screen.screen .main-play-area {
  background: transparent !important;
}

#game-screen.screen .canvas-container {
  --canvas-fit-mode: contain;
  background-image: none !important;
}

#game-screen.screen .canvas-container::after {
  display: block !important;
  z-index: 1 !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  border-style: solid !important;
  border-width: clamp(5px, 1.6vmin, 16px) !important;
  border-image-source: url("assets/resources/figma-v2/imgFrIngameEdge1.png") !important;
  border-image-slice: 32 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

#game-screen.screen #base-canvas,
#game-screen.screen #diff-canvas {
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

@media screen and (orientation: portrait) {
  :root {
    --figma-frame-width: min(
      calc(var(--app-width, 100vw) - var(--safe-inline-size)),
      calc((var(--app-height, 100dvh) - var(--safe-block-size)) * 0.5625)
    );
    --figma-frame-height: calc(var(--figma-frame-width) * 1.7777778);
  }

  html,
  body {
    background-image: var(--figma-bg-portrait) !important;
  }

  #reward-modal .modal-card {
    --reward-card-width: calc(var(--figma-frame-width) * 0.7657);
  }

  #game-screen.screen .find-indicators .indicator {
    max-width: 8.52cqw !important;
  }

  #splash-screen.screen,
  #stage-selection-screen.screen,
  #stage-ready-screen.screen,
  #game-screen.screen,
  #roulette-screen.screen,
  #collection-screen.screen,
  #inventory-screen.screen,
  #settings-screen.screen {
    background-image: var(--figma-bg-portrait) !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-reward-name {
    top: 14.6% !important;
    left: 5.3% !important;
    width: 48.5% !important;
    font-size: calc(var(--figma-frame-height) * 0.01984) !important;
    line-height: calc(var(--figma-frame-height) * 0.02582) !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-reward-icon {
    top: 8.5% !important;
    right: auto !important;
    left: 55% !important;
    width: 11.5% !important;
    height: 33% !important;
  }

  #collection-screen #collection-list-container .collection-card .combine-btn {
    top: 8.5% !important;
    right: 5.5% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-materials {
    left: 5.3% !important;
    bottom: 6.5% !important;
    width: 89.4% !important;
    height: 54.2% !important;
    gap: 0.925cqw !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-material {
    flex-basis: 13.8cqw !important;
    width: 13.8cqw !important;
    min-width: 0 !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-material-name {
    font-size: calc(var(--figma-frame-height) * 0.0105) !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-material-count {
    font-size: calc(var(--figma-frame-height) * 0.01202) !important;
  }
}

/* Tall phones use the physical viewport instead of floating a 9:16 artboard
   in the middle. Artwork with its own aspect ratio remains undistorted.
   주소창이 보이는 짧은 폰 세로(A34 384×657 등, 9/16 ~ 3/4 · 폭 600 미만)도 같은 규칙 — 9:16 판(349px)으로 줄면
   위쪽 줄이 두 줄로 나뉘고 카드가 작아졌다(10/17 승인 시안 ②) */
@media screen and (orientation: portrait) and (max-aspect-ratio: 9 / 16),
  screen and (orientation: portrait) and (min-aspect-ratio: 9 / 16) and (max-aspect-ratio: 3 / 4) and (max-width: 599px) {
  :root {
    --figma-frame-width: calc(var(--app-width, 100vw) - var(--safe-inline-size));
    --figma-frame-height: calc(var(--app-height, 100dvh) - var(--safe-block-size));
  }
}

/* 닉네임 변경 팝업 — 배송 정보 팝업(collection-shipping.css)과 같은 틀·버튼을 쓴다.
   서버 멈춤 안내창(#stall-modal, 계획서 2026-10-28 · 시안 https://claude.ai/artifact/Exgm5BkUcjBmHKTik8B5rc)도
   같은 틀·제목·버튼 규칙을 공유한다 — 새 디자인 요소를 만들지 않는다.
   회원탈퇴 창(#withdraw-modal, 계획서 2026-10-30 Task 7 · 시안 https://claude.ai/artifact/MS6o6y8aUndC7kZXFZRz9f)도 같다. */
#withdraw-modal,
#nickname-modal,
#stall-modal {
  background: rgba(16, 52, 74, 0.62) !important;
  backdrop-filter: blur(4px);
}

#withdraw-modal .nickname-card,
#nickname-modal .nickname-card,
#stall-modal .nickname-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  width: min(88vw, 360px) !important;
  max-width: 360px !important;
  padding: 26px 34px 36px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgPopupReward1.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  /* style.css 의 .modal-card 흐림이 틀 바깥 투명 여백에 네모 자국을 남긴다. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: drop-shadow(0 18px 30px rgba(16, 52, 74, 0.3)) !important;
  color: var(--figma-brown) !important;
  font-family: var(--figma-font) !important;
  text-align: left !important;
}

#nickname-modal .modal-title {
  margin: 0 40px 26px !important;
  color: var(--figma-brown) !important;
  font-family: var(--figma-font) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 44px !important;
  text-align: center !important;
}

#nickname-modal .nickname-modal-close {
  position: absolute !important;
  top: 24px !important;
  right: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 2px solid #c7ad9e !important;
  border-radius: 50% !important;
  background: #f5e7de !important;
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 #ad9282 !important;
  color: var(--figma-brown) !important;
  font-family: var(--figma-font) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#withdraw-modal .nickname-form,
#nickname-modal .nickname-form,
#stall-modal .nickname-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* 닉네임 창 제목의 좌우 40px 는 닫기(×) 자리다. 이 창엔 × 가 없어 그 여백을 빼야
   좁은 세로 폰(360)에서 «아이템 확인이 늦어요» 가 낱말 중간에서 끊기지 않는다(2026-10-28 실측). */
#withdraw-modal .modal-title,
#stall-modal .modal-title {
  margin: 0 0 26px;
  color: var(--figma-brown);
  font-family: var(--figma-font);
  font-size: var(--stall-title-size);
  font-weight: 900;
  line-height: 44px;
  text-align: center;
  word-break: keep-all;
}

#withdraw-modal .stall-message,
#stall-modal .stall-message {
  margin: 0 0 4px;
  color: var(--stall-message-ink);
  font-size: var(--stall-message-size);
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  word-break: keep-all;
}

#nickname-modal .nickname-label {
  color: #6c4d42 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

#nickname-modal .nickname-input-wrap {
  position: relative !important;
}

/* 16px 미만이면 아이폰이 입력할 때 화면을 확대한다. */
#nickname-modal #input-edit-nickname {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 56px 0 14px !important;
  border: 3px solid #c7ad9e !important;
  border-radius: 12px !important;
  background: #fffaf6 !important;
  box-shadow: none !important;
  color: var(--figma-brown) !important;
  font-family: var(--figma-font) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  outline: none !important;
}

#nickname-modal #input-edit-nickname:focus {
  border-color: #478d80 !important;
  box-shadow: 0 0 0 3px rgba(130, 213, 194, 0.35) !important;
}

#nickname-modal #input-edit-nickname[aria-invalid="true"] {
  border-color: #c2413a !important;
  background: #fff6f4 !important;
  box-shadow: none !important;
}

#nickname-modal .nickname-count {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  color: #9a7b6c !important;
  font-size: 13px !important;
  transform: translateY(-50%) !important;
}

#nickname-modal .nickname-help,
#nickname-modal .nickname-error {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

#nickname-modal .nickname-help {
  color: #7a5a4c !important;
}

#nickname-modal .nickname-error {
  color: #b0312a !important;
  font-weight: 800 !important;
}
/* 좁은 세로 폰에서 «주세/요.» 처럼 낱말 중간에서 끊기지 않게 하고 가운데로 둔다(2026-11-02 승인 시안 ②). */
#nickname-modal .nickname-error { word-break: keep-all; text-wrap: balance; text-align: center; }

#nickname-modal .nickname-error:empty {
  display: none !important;
}

#withdraw-modal .nickname-actions,
#nickname-modal .nickname-actions,
#stall-modal .nickname-actions {
  display: flex !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

#withdraw-modal .nickname-actions button,
#nickname-modal .nickname-actions button,
#stall-modal .nickname-actions button {
  /* 1 1 0 이면 저장 버튼 테두리(13px)만큼 폭이 갈려 취소보다 20px 넓어졌다. */
  flex: 1 1 50% !important;
  min-width: 0 !important;
  font-family: var(--figma-font) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

/* 저장 그림은 위아래·좌우에 1.5px 투명 여백이 있다. 취소에 같은 여백을 줘 보이는 위끝·폭을 맞춘다(2026-10-29). */
#withdraw-modal .nickname-cancel,
#nickname-modal .nickname-cancel,
#stall-modal .nickname-cancel {
  height: 54px !important;
  margin: 1.5px 1.5px 0;
  border: 3px solid #c7ad9e !important;
  border-radius: 14px !important;
  background: #f5e7de !important;
  box-shadow: inset 0 0 0 2px #fff, 0 4px 0 #ad9282 !important;
  color: var(--figma-brown) !important;
  font-size: 18px !important;
}

#withdraw-modal .nickname-save,
#nickname-modal .nickname-save,
#stall-modal .nickname-save {
  /* 보이는 높이를 취소(54 + 아래 그림자 4)와 같은 58px 로 */
  height: 61px !important;
  padding: 0 0 3px !important;
  border: 13px solid transparent !important;
  border-image: url("assets/resources/figma-v2/imgBtnBase.png") 40 fill / 13px / 0 stretch !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 19px !important;
  -webkit-text-stroke: 2px #478d80 !important;
  paint-order: stroke fill !important;
  text-shadow: 0 3px 0 #478d80 !important;
}

#nickname-modal .nickname-save:disabled {
  border-image-source: url("assets/resources/figma-v2/imgBtnBase_disable.png") !important;
  -webkit-text-stroke: 2px #7d8b88 !important;
  text-shadow: 0 3px 0 #7d8b88 !important;
  cursor: default !important;
}

/* 폰 가로(html[data-form="phone-land"]) 닉네임 창 — 가로 1단계 시안(https://claude.ai/artifact/EU1pfq8JKsBW9XD97oMWxH ①), 2026-10-07 승인.
   창 높이를 «지금 보이는 높이»(--vvh, game.js updateKeyboardViewportState)에 묶고,
   키보드가 떠 있으면(html[data-kb="1"]) 입력칸 오른쪽에 취소·저장을 둔 한 줄로 접는다. */
html[data-form="phone-land"] #withdraw-modal,
html[data-form="phone-land"] #nickname-modal,
html[data-form="phone-land"] #stall-modal {
  height: var(--vvh, 100dvh) !important;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
}
html[data-form="phone-land"] #withdraw-modal .nickname-card,
html[data-form="phone-land"] #nickname-modal .nickname-card,
html[data-form="phone-land"] #stall-modal .nickname-card {
  max-height: 100% !important;
  padding: 16px 30px 22px !important;
}
html[data-form="phone-land"] #nickname-modal .modal-title {
  margin: 0 40px 10px !important;
  line-height: 36px !important;
}
html[data-form="phone-land"] #withdraw-modal .modal-title,
html[data-form="phone-land"] #stall-modal .modal-title {
  margin: 0 0 10px;
  line-height: 36px;
}
html[data-form="phone-land"] #nickname-modal .nickname-modal-close { top: 16px !important; }
html[data-form="phone-land"] #withdraw-modal .nickname-actions,
html[data-form="phone-land"] #nickname-modal .nickname-actions,
html[data-form="phone-land"] #stall-modal .nickname-actions { margin-top: 12px !important; }

/* 틀 그림의 구분선은 높이의 191/935 지점이라 창이 낮으면 제목을 가로지른다.
   안내창 높이를 잡고 본문을 남은 칸의 가운데에 둔다(시안 https://claude.ai/artifact/J9Gj3CahRdFxjM16p9cY3D). */
#stall-modal .nickname-card { min-height: 310px; }
html[data-form="phone-land"] #stall-modal .nickname-card { min-height: min(217px, 100%); }
#stall-modal .nickname-form { flex: 1 1 auto; }
#stall-modal .stall-message {
  flex: 1 1 auto;
  min-height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 회원탈퇴 창 본문 — 승인 시안의 값 그대로(사라지는 것 / 남는 것 패널 · 연결 해제 안내 · 처리 중 자리).
   패널은 설정 카드와 같은 크림 바탕이며 새 그림을 만들지 않는다.
   display 를 주는 규칙은 :not([hidden]) 로 한정해 hidden 속성이 덮이지 않게 한다(!important 없이). */
/* 틀 그림의 장식선은 높이의 191/935 지점이라 창이 낮으면 제목과 겹친다(보호 계정 안내 277px 에서 -14px 실측).
   본문이 짧아도 최소 높이를 두고, 남는 자리는 본문 묶음이 채워 버튼 위 간격(22px)은 그대로 둔다. */
#withdraw-modal .nickname-card { min-height: 380px; }
html[data-form="phone-land"] #withdraw-modal .nickname-card { min-height: min(320px, 100%); }
#withdraw-modal .nickname-form { flex: 1 1 auto; }
#withdraw-modal .withdraw-message { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
#withdraw-modal .withdraw-lead { display: block; margin: 12px 0 14px; }
html[data-form="phone-land"] #withdraw-modal .withdraw-lead { margin-top: 26px; }
/* 폰 가로는 창 높이가 화면 높이에 묶여 내용(약 370px)이 다 안 들어가면 버튼이 화면 밖으로 밀렸다(568×320 에서 36px).
   제목·버튼은 고정하고 가운데 안내 칸만 스크롤한다. 낮은 화면은 제목 아래 빈칸을 줄이고,
   그래도 넘치는 340 이하는 안내 칸 아래 끝을 흐려 «아래에 더 있음» 을 보인다(2026-11-02 승인 시안 ①). */
html[data-form="phone-land"] #withdraw-modal .nickname-form { min-height: 0; }
html[data-form="phone-land"] #withdraw-modal .withdraw-message { min-height: 0; overflow-y: auto; justify-content: safe center; }
@media (max-height: 385px) {
  html[data-form="phone-land"] #withdraw-modal .withdraw-lead { margin-top: 8px; margin-bottom: 8px; }
  html[data-form="phone-land"] #withdraw-modal .withdraw-note:not([hidden]) { margin-top: 6px; }
}
@media (max-height: 340px) {
  html[data-form="phone-land"] #withdraw-modal .withdraw-message {
    padding-bottom: 14px;
    -webkit-mask-image: linear-gradient(to bottom, var(--withdraw-fade-solid) calc(100% - 22px), transparent);
    mask-image: linear-gradient(to bottom, var(--withdraw-fade-solid) calc(100% - 22px), transparent);
  }
}
/* 폰 가로가 아니어도(글자 크기 200% 등) 창이 화면보다 길어질 수 있다 — 같은 방식으로 제목·버튼 고정,
   가운데 안내만 스크롤 (2026-11-02 승인 시안 ⓒ-2, 위 ① 의 확장) */
#withdraw-modal .nickname-card { max-height: calc(100dvh - 24px); display: flex; flex-direction: column; min-height: min(380px, calc(100dvh - 24px)); }
#withdraw-modal .nickname-form { min-height: 0; display: flex; flex-direction: column; }
#withdraw-modal .withdraw-message { min-height: 0; overflow-y: auto; justify-content: safe center; }
#withdraw-modal .withdraw-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--withdraw-panel-line);
  border-radius: 14px;
  background: var(--withdraw-panel-bg);
  font-size: var(--withdraw-panel-size);
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}
#withdraw-modal .withdraw-row:not([hidden]) { display: flex; gap: 10px; align-items: flex-start; }
/* 좁은 폭(폴드 접힘 344)에서 «있어요» 한 낱말만 다음 줄로 떨어지지 않게 줄을 고르게 나눈다(3차 시안). */
#withdraw-modal .withdraw-row > span:last-child { color: var(--stall-message-ink); word-break: keep-all; text-wrap: balance; }
#withdraw-modal .withdraw-row b { display: block; font-weight: 900; color: var(--figma-brown); }
#withdraw-modal .withdraw-ico {
  flex: 0 0 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#withdraw-modal .withdraw-ico.is-lost { background: var(--withdraw-lost); }
#withdraw-modal .withdraw-ico.is-kept { background: var(--withdraw-kept); }
#withdraw-modal .withdraw-note:not([hidden]) {
  display: block;
  margin-top: 10px;
  color: var(--withdraw-note-ink);
  font-size: var(--withdraw-note-size);
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  word-break: keep-all;
  text-wrap: balance;
}
/* 크림 버튼(.nickname-cancel)의 글자색은 !important 로 묶여 있다 — 글자 칠 색으로 붉게 바꾼다. */
#withdraw-modal .withdraw-quit { -webkit-text-fill-color: var(--withdraw-quit-ink); }
#withdraw-modal .withdraw-running:not([hidden]) {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  margin: 1.5px 1.5px 0;
  border: 3px solid var(--withdraw-running-line);
  border-radius: 14px;
  background: var(--withdraw-running-bg);
  color: var(--withdraw-running-ink);
  font-family: var(--figma-font);
  font-size: var(--withdraw-running-size);
  font-weight: 900;
}
#withdraw-modal .withdraw-spin {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 3px solid var(--withdraw-running-line);
  border-top-color: var(--withdraw-running-ink);
  border-radius: 50%;
  animation: withdraw-spin 0.9s linear infinite;
}
@keyframes withdraw-spin { to { transform: rotate(360deg); } }

/* 설정 맨 아래 「회원탈퇴」 — 앱 버전 글자와 같은 색의 작은 밑줄 글자. 실수로 누르기 어렵게 버튼 모양을 주지 않는다. */
#settings-screen .settings-withdraw-link {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--settings-meta-ink);
  font: inherit;
  font-size: var(--settings-meta-size);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

html[data-form="phone-land"][data-kb="1"] #nickname-modal .nickname-card {
  width: min(94vw, 600px) !important;
  max-width: 600px !important;
  padding: 10px 18px 14px !important;
  background: #fffaf6 !important;
  border: 3px solid #c7ad9e !important;
  border-radius: 16px !important;
}
html[data-form="phone-land"][data-kb="1"] #nickname-modal .modal-title {
  margin: 0 0 6px !important;
  font-size: 15px !important;
  line-height: 28px !important;
  text-align: left !important;
}
html[data-form="phone-land"][data-kb="1"] #nickname-modal .nickname-modal-close { display: none !important; }
html[data-form="phone-land"][data-kb="1"] #nickname-modal .nickname-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 4px !important;
}
html[data-form="phone-land"][data-kb="1"] #nickname-modal .nickname-label,
html[data-form="phone-land"][data-kb="1"] #nickname-modal .nickname-help { display: none !important; }
html[data-form="phone-land"][data-kb="1"] #nickname-modal .nickname-input-wrap { grid-column: 1 !important; grid-row: 1 !important; }
html[data-form="phone-land"][data-kb="1"] #nickname-modal .nickname-actions {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  gap: 8px !important;
}
html[data-form="phone-land"][data-kb="1"] #nickname-modal .nickname-actions button {
  flex: 0 0 auto !important;
  width: 84px !important;
  height: 50px !important;
}
html[data-form="phone-land"][data-kb="1"] #nickname-modal .nickname-error { grid-column: 1 / -1 !important; }

/* 설정 화면 — 2026-10-06 시안 3차(https://claude.ai/artifact/DR8jtJj6xX7H2FeiyEN8sg).
   예전 판은 이미지 틀을 화면 비율 좌표에 박아 넣어 카드가 늘면 넘쳤다.
   이제 위에서 아래로 흐르는 한 열이고, 넘치면 화면 안에서 스크롤한다.
   글꼴은 티머니 둥근바람 하나 · 굵기 400/800 · 크기 18/28(단위 15)/16/14/13/12 여섯 단계만 쓴다.
   폰에서 「화면을 너무 꽉 채운다」는 확인(10/6)에 따라 시안 값에서 약 85% 로 줄였다. */
#settings-screen.screen {
  padding: 0 !important;
}

/* 스크롤 영역은 상단 메뉴 띠 바로 아래에서 시작한다 — 띠는 버튼 사이가 비어 있어서,
   영역을 화면 맨 위부터 잡으면 스크롤한 카드가 버튼 틈으로 비친다.
   띠 높이는 세로 화면에서 게임 영역 너비의 24.2%(360·390·430 폭 실측, 2026-10-06),
   가로 화면에서 높이의 15.6%(844×390·1280×720 실측)다. */
#settings-screen .settings-scroll {
  position: absolute;
  top: 24.2cqw;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media screen and (orientation: landscape) {
  #settings-screen .settings-scroll {
    top: 15.6cqh;
  }
}

#settings-screen .settings-column {
  box-sizing: border-box;
  width: min(100%, 440px);
  min-height: 100%;
  margin: 0 auto;
  padding: 10px 28px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #10344a;
  font-family: var(--figma-font);
  font-weight: 400;
  text-align: left;
}

#settings-screen .settings-title {
  margin: auto 0 12px;
  padding: 7px 26px;
  border: 3px solid #e7c29c;
  border-radius: 999px;
  background: #fff1de;
  box-shadow: 0 3px 0 #d9a877;
  color: #583011;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

#settings-screen .settings-summary,
#settings-screen .settings-panel {
  box-sizing: border-box;
  width: 100%;
  border: 3px solid #ebcba8;
  border-radius: 18px;
  background: #fff6ea;
  box-shadow: 0 3px 0 #ddb48a;
}

#settings-screen .settings-summary {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#settings-screen .settings-stat {
  min-width: 0;
  padding: 9px 12px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#settings-screen .settings-stat.is-attempts {
  background: #ffe9b8;
  color: #583011;
}

#settings-screen .settings-stat.is-spin {
  background: #ddf1ec;
  color: #2a5756;
}

#settings-screen .settings-stat-label {
  font-size: 13px;
  font-weight: 800;
  word-break: keep-all;
}

#settings-screen .settings-stat-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

#settings-screen .settings-stat-unit {
  margin-left: 2px;
  font-size: 15px;
}

/* 「매일 0시 15회 충전」 처럼 숫자가 붙으면 좁은 폰(폴드 커버 등)에서 칸을 넘는다 — 넘칠 때만 낱말 단위로 줄바꿈(2026-10-25). */
#settings-screen .settings-stat-note {
  font-size: 12px;
  white-space: normal;
  word-break: keep-all;
}

#settings-screen .settings-stat.is-attempts .settings-stat-note {
  color: #6b4a33;
}

/* 「보너스 N회 포함」 — 보너스가 남았을 때만 보인다(2026-10-25). 0시 충전 줄보다 한 단계 작게. */
#settings-screen .settings-stat-sub {
  font-size: 11px;
  font-weight: 800;
  white-space: normal;
  word-break: keep-all;
}

#settings-screen .settings-nowrap {
  white-space: nowrap;
}

#settings-screen .settings-stat-note[hidden],
#settings-screen .settings-stat-sub[hidden] {
  display: none;
}

#settings-screen .settings-panel {
  margin-top: 10px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#settings-screen .settings-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

#settings-screen .settings-panel-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#settings-screen .settings-panel-icon.is-account {
  background: #74c7ba;
}

#settings-screen .settings-panel-icon.is-nfc {
  background: #ff9b39;
}

#settings-screen .settings-panel h2 {
  margin: 0;
  color: #583011;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

#settings-screen .settings-divider {
  height: 0;
  border-top: 2px dashed #ebcba8;
}

#settings-screen .settings-account-grid {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

#settings-screen .settings-field-label {
  color: #6b4a33;
  font-size: 13px;
}

#settings-screen .settings-field-value {
  min-width: 0;
  overflow: hidden;
  color: #10344a;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settings-screen .settings-span-2 {
  grid-column: span 2;
}

/* 「로그인」 줄 — 로고 + 공급자 이름. 버튼이 없는 줄도 다른 줄(30px)과 같은 높이로 맞춘다. */
#settings-screen .settings-provider {
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#settings-screen .settings-provider-logo {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#settings-screen .settings-provider-logo[hidden] {
  display: none;
}

#settings-screen .settings-provider-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 구글·애플 그림은 배경이 없어 흰 바탕에 얇은 테두리를 두르고 안쪽에 여백을 둔다. */
#settings-screen .settings-provider-logo[data-provider="google"],
#settings-screen .settings-provider-logo[data-provider="apple"] {
  padding: 3px;
  border: 1px solid #ebcba8;
  background: #fff;
}

#settings-screen button.settings-chip-btn {
  box-sizing: border-box;
  height: 30px;
  min-height: 0;
  margin: 0;
  padding: 0 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: none;
}

/* 버튼은 30px 로 작게 보이되 손가락이 닿는 범위는 44px 이상으로 넓힌다. */
#settings-screen button.settings-chip-btn,
#settings-screen button.settings-id-toggle {
  position: relative;
}

#settings-screen button.settings-chip-btn::after,
#settings-screen button.settings-id-toggle::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}

#settings-screen button.settings-chip-btn.is-edit {
  border: 2px solid #e3a24e;
  background: #ffd48a;
  box-shadow: 0 3px 0 #c47f2c;
  color: #583011;
}

#settings-screen button.settings-chip-btn.is-copy {
  border: 2px solid #74c7ba;
  background: #bde8df;
  box-shadow: 0 3px 0 #4e9e91;
  color: #2a5756;
}

#settings-screen button.settings-chip-btn.is-copy.is-copied {
  border-color: #4e9e91;
  background: #74c7ba;
  box-shadow: 0 1px 0 #3b7d72;
  color: #10344a;
  transform: translateY(2px);
}

#settings-screen .settings-copied-icon,
#settings-screen .is-copied .settings-copy-icon {
  display: none;
}

#settings-screen .is-copied .settings-copied-icon {
  display: inline;
}

#settings-screen button.settings-id-toggle {
  justify-self: start;
  max-width: 100%;
  height: 30px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #10344a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  text-shadow: none;
}

#settings-screen .settings-id-toggle svg {
  flex: 0 0 auto;
  color: #6b4a33;
  transition: transform 0.15s ease;
}

#settings-screen .settings-id-short {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settings-screen .settings-id-fold {
  display: none;
}

#settings-screen .settings-id-toggle[aria-expanded="true"] {
  color: #6b4a33;
  font-size: 13px;
}

#settings-screen .settings-id-toggle[aria-expanded="true"] .settings-id-short {
  display: none;
}

#settings-screen .settings-id-toggle[aria-expanded="true"] .settings-id-fold {
  display: inline;
}

#settings-screen .settings-id-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

#settings-screen .settings-id-full {
  grid-column: 1 / -1;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 2px solid #f0dcc4;
  border-radius: 10px;
  background: #fff;
  color: #10344a;
  font-size: 13px;
  font-weight: 800;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

#settings-screen .settings-id-full[hidden] {
  display: none;
}

#settings-screen .settings-count-pill {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e2f4e8;
  color: #17673a;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

#settings-screen .settings-count-pill.is-empty {
  background: #f6e1c6;
  color: #583011;
}

#settings-screen #nfc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#settings-screen #nfc-list .settings-nfc-item {
  box-sizing: border-box;
  margin: 0;
  padding: 9px 12px;
  border: 2px solid #f0dcc4;
  border-radius: 13px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 접힌 카드 — 위 규칙의 display:flex 가 hidden 속성을 덮으므로 따로 뺀다. */
#settings-screen #nfc-list .settings-nfc-item[hidden] {
  display: none;
}

/* 카드 한 칸은 위에서부터 상품명 / 배지·연동일 / NFC 코드 세 줄이다(2026-10-06 시안 승인).
   상품명이 카드 전체 폭을 쓰도록 배지를 둘째 줄로 내렸다. */
#settings-screen .settings-nfc-meta,
#settings-screen .settings-nfc-secondary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #55626c;
  font-size: 12px;
  white-space: nowrap;
}

#settings-screen .settings-nfc-meta {
  justify-content: space-between;
}

/* NFC 코드는 문의 때 읽어 주는 값이라 말줄임하지 않는다 — 한 줄을 혼자 쓴다. */
#settings-screen .settings-nfc-secondary {
  flex-wrap: wrap;
}

/* 상품명은 자르지 않는다(입력 상한 60자). 폰에는 마우스를 올려 전체를 볼 방법이 없다.
   공백 없는 긴 영숫자 덩어리만 글자 단위로 끊어 가로 넘침을 막는다. */
#settings-screen .settings-nfc-product {
  display: block;
  min-width: 0;
  color: #10344a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#settings-screen .settings-nfc-product.is-unknown {
  color: #55626c;
}

#settings-screen .settings-nfc-attempts {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ffe9b8;
  color: #583011;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

#settings-screen button.settings-nfc-code {
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #55626c;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: underline dotted #a7b2ba;
  text-underline-offset: 3px;
  text-shadow: none;
  cursor: pointer;
}

#settings-screen .settings-nfc-code-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#settings-screen .settings-nfc-code svg {
  flex: 0 0 auto;
}

#settings-screen .settings-nfc-date {
  flex: 0 0 auto;
}

/* 「나머지 N장 보기 / 접기」 — 40px 로 보이되 손가락이 닿는 범위는 44px 이상으로 넓힌다. */
#settings-screen #nfc-list .settings-nfc-more {
  margin: 0;
}

#settings-screen button.settings-nfc-more-btn {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 2px solid #ebcba8;
  border-radius: 12px;
  background: #fff1de;
  box-shadow: 0 2px 0 #ddb48a;
  color: #583011;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: none;
}

#settings-screen button.settings-nfc-more-btn::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

#settings-screen button.settings-nfc-more-btn svg {
  flex: 0 0 auto;
}

#settings-screen #nfc-list .settings-nfc-empty {
  box-sizing: border-box;
  margin: 0;
  padding: 14px 12px;
  border: 2px dashed #e3c7a6;
  border-radius: 13px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #55626c;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

#settings-screen .settings-nfc-empty strong {
  color: #583011;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

#settings-screen button.settings-logout-btn {
  box-sizing: border-box;
  flex: 0 0 auto;
  position: relative;
  width: 160px;
  height: 52px;
  min-height: 0;
  margin: 16px 0 0;
  padding: 0 0 3px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 0 #478d80;
  cursor: pointer;
  container-type: size;
  isolation: isolate;
}

/* 로그아웃은 예전 이미지 버튼(imgBtnLogOut1.png)을 그대로 쓴다(10/6 Kay님 요청).
   양끝 열쇠는 그림의 일부라 끝 조각을 높이 전체로 잘라 늘어나지 않게 하고 가운데만 늘린다. */
#settings-screen button.settings-logout-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 0 solid transparent;
  border-image: url("assets/resources/figma-v2/imgBtnLogOut1.png") 0 110 fill / 0 calc(100cqh * 110 / 127) / 0 stretch;
}

#settings-screen button.settings-logout-btn svg {
  display: none;
}

/* 카드가 적으면 제목~NFC 카드 묶음이 상단 메뉴와 로그아웃 사이 세로 가운데에 오고
   (제목 위·NFC 카드 아래의 auto 여백이 남는 공간을 반씩 나눈다), 로그아웃은 맨 아래에 남는다.
   카드가 많아 공간이 없으면 auto 여백이 0 이 되어 위에서부터 쌓이고 스크롤한다(10/6 Kay님 요청). */
#settings-screen .settings-nfc-card {
  margin-bottom: auto;
}

/* 버전 줄과 약관 링크를 한 묶음으로 — 두 줄 배치 그리드에서도 행 간격이 사이에 끼지 않는다 */
#settings-screen .settings-footer {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #3e5a6e;
}

#settings-screen .settings-version {
  margin: 0;
  color: #3e5a6e;
  font-size: 12px;
  word-break: break-all;
  text-align: center;
}

#settings-screen .settings-toast {
  position: absolute;
  left: 50%;
  bottom: 120px;
  z-index: 5;
  margin: 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: #10344a;
  box-shadow: 0 6px 16px rgba(16, 52, 74, 0.25);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--figma-font);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

#settings-screen .settings-toast::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BE3C3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

#settings-screen .settings-toast.is-error::before {
  display: none;
}

#settings-screen .settings-toast.hidden {
  display: none;
}

/* Inventory reward detail: reuse the reward popup frame and keep all bitmap corners intact. */
#inventory-screen .inventory-item {
  cursor: pointer !important;
  font: inherit !important;
  -webkit-tap-highlight-color: transparent;
}

#inventory-screen .inventory-item:focus-visible {
  outline: max(3px, 0.2cqw) solid #fff !important;
  outline-offset: max(2px, 0.12cqw) !important;
  filter: drop-shadow(0 0 max(5px, 0.35cqw) rgba(25, 98, 91, 0.72));
}

#inventory-screen .inventory-item:active {
  transform: translateY(max(1px, 0.1cqw));
}

#inventory-reward-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10030 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(16, 52, 74, 0.62) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#inventory-reward-modal.hidden {
  display: none !important;
}

#inventory-reward-modal .inventory-reward-card {
  --inventory-card-width: calc(var(--figma-frame-width) * 0.4307);
  position: relative !important;
  width: calc(var(--figma-frame-width) * 0.4307) !important;
  height: auto !important;
  aspect-ratio: 827 / 947 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgPopupReward1.png") center / 100% 100% no-repeat !important;
  /* 틀 그림 바깥 투명 여백까지 네모 그림자가 져 창 뒤에 어두운 사각형이 보였다(2026-10-28). */
  box-shadow: none !important;
}

#inventory-reward-modal .inventory-reward-title {
  position: absolute !important;
  top: 7.2% !important;
  left: 12% !important;
  width: 76% !important;
  height: 8% !important;
  margin: 0 !important;
  color: var(--figma-brown) !important;
  font-family: var(--figma-font) !important;
  font-size: var(--inventory-title-fs, clamp(18px, 2.15cqw, 41px)) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#inventory-reward-modal .inventory-reward-content {
  position: absolute !important;
  /* 응모권·QR 칸을 없애고 보상 그림 한 칸만 가운데에 크게 둔다(시안 승인 2026-10-21). */
  top: 21% !important;
  left: 10% !important;
  width: 80% !important;
  height: 40.5% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
}

#inventory-reward-modal .inventory-reward-icon-frame {
  position: relative !important;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 390 / 386 !important;
  padding: 10% !important;
  background: url("assets/resources/figma-v2/imgFrRewardItem1.png") center / 100% 100% no-repeat !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#inventory-reward-modal .inventory-reward-icon-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#inventory-reward-modal .inventory-reward-name {
  position: absolute !important;
  top: 63% !important;
  left: 8% !important;
  width: 84% !important;
  min-height: 8% !important;
  margin: 0 !important;
  color: var(--figma-brown) !important;
  font-family: var(--figma-font) !important;
  font-size: var(--inventory-name-fs, clamp(15px, 1.6cqw, 31px)) !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-wrap: anywhere !important;
}

#inventory-reward-modal #inventory-reward-close {
  position: absolute !important;
  top: 76% !important;
  left: 29.85% !important;
  width: 40.3% !important;
  height: 14% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 0.4em !important;
  border: 15px solid transparent !important;
  border-image: url("assets/resources/figma-v2/imgBtnBase.png") 40 fill / 15px / 0 stretch !important;
  background: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: var(--figma-font) !important;
  font-size: clamp(16px, 1.75cqw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  -webkit-text-stroke: max(1px, 0.085em) #478d80 !important;
  paint-order: stroke fill !important;
  text-shadow: 0 0.16em 0 #478d80 !important;
  cursor: pointer !important;
}

#inventory-reward-modal #inventory-reward-close:focus-visible {
  outline: max(3px, 0.2cqw) solid #fff !important;
  outline-offset: max(2px, 0.12cqw) !important;
}

@media screen and (orientation: portrait) {
  #inventory-reward-modal .inventory-reward-card {
    --inventory-card-width: min(76.57cqw, 49.32cqh);
    width: min(76.57cqw, 49.32cqh) !important;
  }
}

/* Legacy button theme must not draw another frame around Figma exchange assets. */
#collection-screen #collection-list-container .collection-card .combine-btn {
  height: auto !important;
  aspect-ratio: 294 / 120 !important;
  background-size: contain !important;
}

#collection-screen #collection-list-container .collection-card .combine-btn:disabled {
  aspect-ratio: 239 / 100 !important;
}

@media screen and (orientation: portrait) {
  #collection-screen #collection-list-container .collection-card .combine-btn {
    aspect-ratio: 239 / 100 !important;
  }
}

#collection-screen #collection-list-container .collection-card .combine-btn,
#collection-screen #collection-list-container .collection-card .combine-btn:not(:disabled),
#collection-screen #collection-list-container .collection-card .combine-btn:disabled,
#collection-screen #collection-list-container .collection-card .combine-btn:hover,
#collection-screen #collection-list-container .collection-card .combine-btn:active {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  background-color: transparent !important;
}

#collection-screen #collection-list-container .collection-card .combine-btn:focus-visible {
  outline: max(2px, 0.12cqw) solid #fff !important;
  outline-offset: max(2px, 0.12cqw) !important;
}

/* Figma result layout: retain existing actions while using state-specific
   result logos and the success-only five-slot rating panel. */
#effect-overlay.is-success .effect-backdrop,
#effect-overlay.is-failure .effect-backdrop {
  background: rgba(0, 0, 0, 0.64) !important;
}

#effect-overlay #effect-clear-logo {
  display: none;
}

#effect-overlay.is-success .effect-container,
#effect-overlay.is-failure .effect-container {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: var(--figma-frame-width) !important;
  height: var(--figma-frame-height) !important;
}

#effect-overlay.is-success #effect-content,
#effect-overlay.is-failure #effect-content {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#effect-overlay.is-success #effect-content,
#effect-overlay.is-failure #effect-content {
  display: block !important;
  animation: resultPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#effect-overlay.is-success #effect-clear-logo,
#effect-overlay.is-failure #effect-clear-logo {
  position: absolute;
  z-index: 2;
  top: 23.28%;
  left: 7.04%;
  display: block;
  width: 84.82%;
  height: auto;
  max-height: 13.44%;
  object-fit: contain;
}

#effect-overlay.is-failure #effect-clear-logo {
  top: 45.5%;
}

#effect-overlay.is-success #effect-title,
#effect-overlay.is-success #effect-msg,
#effect-overlay.is-failure #effect-title,
#effect-overlay.is-failure #effect-msg {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#effect-overlay.is-success #effect-stars {
  position: absolute !important;
  z-index: 2;
  top: 62.29% !important;
  left: 17.13% !important;
  display: grid !important;
  grid-template-columns: repeat(5, 11.77%) !important;
  column-gap: 3.44% !important;
  place-content: center !important;
  width: 64.54% !important;
  height: auto !important;
  aspect-ratio: 697 / 151 !important;
  margin: 0 !important;
  background: url("assets/resources/figma-v2/imgFrResultStarEmpty1.png") center / 100% 100% no-repeat !important;
}

#effect-overlay.is-success #effect-stars .star {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 82 / 79 !important;
  background: none !important;
}

#effect-overlay.is-success #effect-stars .star::before {
  display: none !important;
}

#effect-overlay.is-success #effect-stars .star.filled {
  background: url("assets/resources/figma-v2/imgObResultStar1.png") center / contain no-repeat !important;
}

#effect-overlay.is-failure #effect-stars {
  display: none !important;
}

#effect-overlay .effect-actions[hidden] {
  display: none !important;
}

#effect-overlay.is-success .effect-actions,
#effect-overlay.is-failure .effect-actions {
  position: absolute !important;
  z-index: 2;
  top: 75% !important;
  left: 0 !important;
  width: 100% !important;
}

/* 클리어 화면만 「나가기」를 왼쪽, 「다음 스테이지」를 오른쪽에 둔다. 실패 화면 순서는 그대로. */
#effect-overlay.is-success #select-btn-overlay {
  order: -1;
}

#effect-overlay .effect-actions .res-btn {
  /* 큰 화면에서는 1366 화면 비율(틀 폭의 13.9%)로 같이 커진다. 1366 이하·폰은 190px 상한 그대로. */
  --result-button-width: max(clamp(132px, 22vw, 190px), calc(var(--figma-frame-width) * 0.139));
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--result-button-width) !important;
  width: var(--result-button-width) !important;
  min-width: var(--result-button-width) !important;
  height: calc(var(--result-button-width) * 133 / 333) !important;
  min-height: calc(var(--result-button-width) * 133 / 333) !important;
  aspect-ratio: 333 / 133;
  border: 15px solid transparent !important;
  /* Keep the painted gradient continuous: nine-slice scaling exposes seams. */
  border-image: none !important;
  background: url("assets/resources/figma-v2/imgBtnBase.png") center / 100% 100% no-repeat border-box !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: var(--figma-font) !important;
  font-size: max(clamp(17px, 2.6vmin, 24px), calc(var(--figma-frame-width) * 0.0146)) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  padding: 0 18px !important;
  -webkit-text-stroke: max(1px, 0.085em) #478d80 !important;
  paint-order: stroke fill !important;
  text-shadow: 0 0.16em 0 #478d80 !important;
}

@media screen and (max-width: 520px) {
  #effect-overlay .effect-actions .res-btn {
    --result-button-width: min(42vw, 158px);
  }
}

#effect-overlay .effect-actions .res-btn:disabled {
  background-image: url("assets/resources/figma-v2/imgBtnBase_disable.png") !important;
  filter: none !important;
  opacity: 1 !important;
}

@media screen and (orientation: landscape) {
  #effect-overlay.is-success #effect-clear-logo,
  #effect-overlay.is-failure #effect-clear-logo {
    top: 12%;
    left: 26%;
    width: 48%;
    max-height: 24%;
  }

  #effect-overlay.is-failure #effect-clear-logo {
    top: 34%;
  }

  #effect-overlay.is-success #effect-stars {
    top: 51% !important;
    left: 31.85% !important;
    width: 36.3% !important;
  }

  #effect-overlay.is-success .effect-actions,
  #effect-overlay.is-failure .effect-actions {
    top: 74% !important;
  }
}

/* Stage-ready usability refinements. */
#stage-ready-screen.screen > .ready-content > .ready-main {
  padding: 0 !important;
  display: block !important;
}

#stage-ready-screen.screen .ready-image-container {
  position: absolute !important;
  top: 7.92% !important;
  left: 4.86% !important;
  width: 90.58% !important;
  height: 84.34% !important;
}

#stage-ready-screen.screen #ready-stage-img {
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

#stage-ready-screen.screen .ready-image-container > .ready-side {
  right: 2.61% !important;
  bottom: 4.91% !important;
  width: 52.13% !important;
  height: 24.62% !important;
  max-width: none !important;
}

#stage-ready-screen.screen .ready-header-status {
  width: 16.45% !important;
  grid-template-columns: minmax(0, 2.18fr) minmax(0, 1fr) !important;
  gap: 4.2% !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill.primary {
  --ready-point-unit: var(--figma-frame-height);
  position: relative !important;
  padding: 0 7% 0 31% !important;
  justify-content: center !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: linear-gradient(#fffaf0 0 88%, #efd9c5 88% 100%) !important;
  box-shadow: none !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill.primary::before,
#stage-ready-screen.screen .ready-header-status .hud-pill.primary::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 0 !important;
  width: calc(var(--ready-point-unit) * 0.04445) !important;
  height: 100% !important;
  background-image: url("assets/resources/figma-v2/imgFrGold.png") !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  pointer-events: none !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill.primary::before {
  left: 0 !important;
  background-position: left center !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill.primary::after {
  right: 0 !important;
  background-position: right center !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill.primary .coin-icon {
  position: absolute !important;
  z-index: 1 !important;
  top: 19% !important;
  left: calc(var(--ready-point-unit) * 0.0176) !important;
  width: calc(var(--ready-point-unit) * 0.05278) !important;
  height: 62% !important;
  display: block !important;
  border: 0 !important;
  background: url("assets/resources/figma-v2/imgIconGold001.png") center / contain no-repeat !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill.primary .coin-icon::before {
  content: none !important;
}

#stage-ready-screen.screen #ready-point-count {
  position: relative !important;
  z-index: 1 !important;
}

#stage-ready-screen.screen #ready-point-count,
#stage-ready-screen.screen #ready-header-attempts-count {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(13px, 1.65cqw, 32px) !important;
  line-height: 1 !important;
}

#stage-ready-screen.screen #ready-point-count.compact {
  font-size: clamp(11px, 1.2cqw, 23px) !important;
}

#stage-ready-screen.screen .ready-side .info-block:first-child h3,
#stage-ready-screen.screen .ready-side .info-block:nth-child(2) h3 {
  top: 10% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2a5756 !important;
  font-size: clamp(9px, 0.82vw, 16px) !important;
  line-height: 1 !important;
}

#stage-ready-screen.screen .ready-side #ready-diff-display {
  position: absolute !important;
  top: 28.5% !important;
  left: 0 !important;
  width: 100% !important;
  color: #fff !important;
  font-size: clamp(20px, 2.6cqw, 50px) !important;
  line-height: 1.2 !important;
  /* Source UI uses a dark mint keyline around the white difficulty name. */
  -webkit-text-stroke: clamp(1px, 0.13cqw, 2px) #27645a !important;
  paint-order: stroke fill !important;
  text-shadow: none !important;
}

#stage-ready-screen.screen .ready-side #ready-diff-display .ready-diff-count {
  margin-top: 0.15em !important;
  color: #d2e7e3 !important;
  font-size: 0.4em !important;
  line-height: 1.2 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

#stage-ready-screen.screen .ready-side .stars-attain {
  position: absolute !important;
  top: 43.49% !important;
  left: 6.99% !important;
  width: 86% !important;
  height: 27.08% !important;
  margin: 0 !important;
  gap: 3% !important;
  transform: none !important;
}

#stage-ready-screen.screen .ready-side .stars-attain .star {
  flex: 0 0 17.6% !important;
  width: 17.6% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

#stage-ready-screen.screen > .ready-footer > .item-shop-row > .buy-item-card::before {
  top: -10.8% !important;
  left: 25.8% !important;
  width: 48.4% !important;
  height: 21.9% !important;
}

#stage-ready-screen.screen > .ready-footer > .item-shop-row > .buy-item-card .item-icon-box {
  position: absolute !important;
  top: 14% !important;
  left: 14% !important;
  width: 72% !important;
  height: 56% !important;
  margin: 0 !important;
}

#stage-ready-screen.screen > .ready-footer > .item-shop-row > .buy-item-card .item-icon-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: scale(0.8) !important;
  transform-origin: center !important;
}

/* 아이템 카드 글자(보유 개수·가격)는 카드 높이에, 시작 버튼 도전 횟수는 시작 묶음 폭에 묶는다(10/17 Kay님 승인 시안 — 글자 크기 검증 7단계).
   예전엔 화면 폭(vw) 기준이라 폴드 펼침·태블릿에서 카드보다 글자가 커지고, 폴드 1.25배 확대가 한 번 더 곱해졌다.
   비율은 폰 390×844 값: 카드 높이 112px 에 보유 13px · 가격 10px, 시작 묶음 폭 242px 에 횟수 12.88px
   (횟수는 알약 기준 — 알약 폭 = 시작 묶음 폭의 21.07%(세로 규칙 · 알약은 세로에서만 보임)라 묶음 폭 5.3%·6.2% = 알약 25.154cqw·29.426cqw) */
:root {
  --fit-owned-fs: min(28px, max(11.6cqh, min(13px, 13.5cqh)));
  --fit-buy-price-fs: clamp(10px, 8.95cqh, 28px);
  --fit-start-attempts-fs: max(25.154cqw, min(12.88px, 29.426cqw));
}

#stage-ready-screen.screen > .ready-footer > .item-shop-row > .buy-item-card .owned-count {
  position: absolute !important;
  z-index: 3 !important;
  top: -8.4% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;   /* top 이 배지 그림 가운데를 가리킨다 */
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: clamp(13px, 1.45vw, 28px) !important;
  line-height: 1 !important;
  text-shadow: 0 1px 1px rgba(89, 48, 15, 0.55) !important;
}

#stage-ready-screen.screen .buy-item-card .owned-count:has(#ready-hint-count),
#stage-ready-screen.screen .buy-item-card .owned-count:has(#ready-time-count) {
  top: calc(-10.8% + 10.95%) !important;   /* 배지 그림(::before) 위 -10.8% · 높이 21.9% 의 가운데 */
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: var(--fit-owned-fs) !important;
  line-height: 1 !important;
}

#stage-ready-screen.screen > .ready-footer > .item-shop-row > .buy-item-card .buy-btn {
  position: absolute !important;
  left: 3% !important;
  top: 71.5% !important;
  bottom: auto !important;
  transform: none !important;
  width: 94% !important;
  height: 22% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #d8c8ac !important;
  border-radius: 999px !important;
  background: #63b9ac !important;
  box-shadow: none !important;
  font-size: var(--fit-buy-price-fs) !important;
  line-height: 1 !important;
}

#stage-ready-screen.screen .ready-attempts-pill {
  display: none !important;
}

#stage-ready-screen.screen #start-game-btn .t1 {
  display: none !important;
}

/* The stage window keeps its source ratio; artwork fills and may crop inside it. */
#stage-ready-screen.screen #ready-stage-img {
  object-fit: cover !important;
  object-position: center !important;
}

@media screen and (orientation: landscape) {
  #stage-ready-screen.screen > .ready-content > .ready-main {
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: auto !important;
    height: 100% !important;
    aspect-ratio: 969 / 567 !important;
    transform: translateX(-50%) !important;
  }
}

@media screen and (orientation: portrait) {
  #stage-ready-screen.screen > .ready-content > .ready-main {
    right: auto !important;
    left: 50% !important;
    width: auto !important;
    aspect-ratio: 969 / 567 !important;
    transform: translateX(-50%) !important;
  }

  #stage-ready-screen.screen .ready-image-container {
    top: 8.29% !important;
    left: 5.26% !important;
    width: 89.78% !important;
    height: 83.6% !important;
  }

  #stage-ready-screen.screen .ready-header-status {
    width: 29.26% !important;
    grid-template-columns: minmax(0, 2.18fr) minmax(0, 1fr) !important;
  }

  #stage-ready-screen.screen .ready-header-status .hud-pill.primary {
    --ready-point-unit: var(--figma-frame-width);
  }

  #stage-ready-screen.screen .ready-side .info-block:first-child h3,
  #stage-ready-screen.screen .ready-side .info-block:nth-child(2) h3 {
    top: 11.44% !important;
    font-size: clamp(10px, 1.85vw, 20px) !important;
  }

  #stage-ready-screen.screen .ready-side #ready-diff-display {
    top: 33.47% !important;
    font-size: clamp(28px, 6.39cqw, 69px) !important;
  }

  #stage-ready-screen.screen .ready-side #ready-diff-display .ready-diff-count {
    font-size: 0.478em !important;
  }

  #stage-ready-screen.screen .ready-side .stars-attain {
    top: 45.34% !important;
    left: 11.26% !important;
    width: 77.48% !important;
    height: 24.58% !important;
    gap: 3.2% !important;
  }

  #stage-ready-screen.screen .ready-side #attain-stars.stars-attain {
    gap: 3.2% !important;
  }

  #stage-ready-screen.screen .ready-side .stars-attain .star {
    flex-basis: 17.44% !important;
    width: 17.44% !important;
  }

  #stage-ready-screen.screen > .ready-footer > .item-shop-row {
    top: auto !important;
    bottom: 0 !important;
    height: auto !important;
  }

  #stage-ready-screen.screen > .ready-footer > .item-shop-row > .buy-item-card {
    height: auto !important;
    aspect-ratio: 180 / 233 !important;
  }

  #stage-ready-screen.screen > .ready-footer > .start-action {
    height: auto !important;
    aspect-ratio: 502 / 163 !important;
  }

  #stage-ready-screen.screen > .ready-footer > .item-shop-row > .buy-item-card::before {
    top: -8.15% !important;
  }

  #stage-ready-screen.screen .buy-item-card .owned-count:has(#ready-hint-count),
  #stage-ready-screen.screen .buy-item-card .owned-count:has(#ready-time-count) {
    top: calc(-8.15% + 10.95%) !important;   /* 세로: 배지 그림 위 -8.15% 의 가운데 */
  }

  #stage-ready-screen.screen #ready-point-count,
  #stage-ready-screen.screen #ready-header-attempts-count {
    font-size: clamp(12px, 2.93cqw, 32px) !important;
  }

  #stage-ready-screen.screen > .ready-footer > .item-shop-row > .buy-item-card .owned-count {
    font-size: clamp(13px, 2.57vw, 28px) !important;
  }


  #stage-ready-screen.screen .ready-attempts-pill {
    display: flex !important;
    top: -17.22% !important;
    right: 10.17% !important;
    width: 21.07% !important;
    height: auto !important;
    aspect-ratio: 87 / 51 !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media screen and (orientation: landscape) {
  #stage-ready-screen.screen .ready-header-status {
    width: 21% !important;
    grid-template-columns: minmax(0, 1fr) 23.8% !important;
  }

  #stage-ready-screen.screen #ready-point-count.compact {
    font-size: clamp(12px, 1.4cqw, 26px) !important;
  }
}

/* Page background covers viewport once; contained Figma screens stay seamless. */
#game-container,
#game-container .screen {
  background-color: transparent !important;
  background-image: none !important;
}

/* Screens use the contained Figma frame, not the taller phone viewport. */
#game-container > .screen {
  height: 100% !important;
  min-height: 0 !important;
}

@media screen and (orientation: portrait) {
  #game-screen.screen .main-play-area {
    top: 0.75% !important;
    left: 0 !important;
    width: 100% !important;
    height: 70.25% !important;
  }

  #game-screen.screen .image-wrapper {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  #game-screen.screen .canvas-container {
    --canvas-fit-mode: contain !important;
    justify-self: center !important;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    aspect-ratio: var(--stage-frame-ratio, 970 / 540) !important;
    padding: 3.6% 3.4% !important;
  }
}

/* HUD counters: points keep a base width and grow left; attempts stay compact. */
#global-top-bar .top-status-right,
#stage-ready-screen.screen .ready-header-status {
  display: flex !important;
  justify-content: flex-end !important;
  overflow: visible !important;
}

#global-top-bar .hud-points,
#stage-ready-screen.screen .ready-header-status .hud-pill.primary {
  flex: 0 0 auto !important;
  width: max-content !important;
  overflow: visible !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill.primary {
  min-width: calc(var(--figma-frame-width) * 0.192) !important;
  padding-right: calc(var(--figma-frame-width) * 0.0134) !important;
  padding-left: calc(var(--figma-frame-width) * 0.0595) !important;
}

#stage-ready-screen.screen #ready-point-count,
#stage-ready-screen.screen #ready-point-count.compact,
#stage-ready-screen.screen #ready-header-attempts-count {
  overflow: visible !important;
  text-overflow: clip !important;
}

#stage-ready-screen.screen #ready-point-count.compact {
  font-size: clamp(13px, 1.65cqw, 32px) !important;
}

#stage-ready-screen.screen .ready-header-status .hud-attempts {
  position: relative !important;
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;
  aspect-ratio: 1 !important;
  justify-content: center !important;
  text-align: center !important;
}

@media screen and (orientation: portrait) {
  #global-top-bar .hud-points {
    min-width: calc(var(--figma-frame-width) * 0.3035) !important;
    padding-right: calc(var(--figma-frame-width) * 0.021) !important;
    padding-left: calc(var(--figma-frame-width) * 0.094) !important;
  }

  #global-top-bar .hud-attempts {
    flex: 0 0 calc(var(--figma-frame-width) * 0.3035) !important;
    width: calc(var(--figma-frame-width) * 0.3035) !important;
  }

  #global-top-bar .hud-attempts,
  #stage-ready-screen.screen .ready-header-status .hud-attempts {
    top: 6% !important;
  }
}

@media screen and (orientation: landscape) {
  #global-top-bar .hud-points {
    min-width: calc(var(--figma-frame-width) * 0.1785) !important;
    padding-right: calc(var(--figma-frame-width) * 0.0125) !important;
    padding-left: calc(var(--figma-frame-width) * 0.0555) !important;
  }

  #game-container > #global-top-bar > .top-status-right > .hud-attempts {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    aspect-ratio: 1 !important;
    justify-content: center !important;
    text-align: center !important;
    background-image: url("assets/resources/figma-v2/imgFrCircle.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    overflow: visible !important;
  }

  #global-top-bar .hud-attempts::before,
  #global-top-bar .hud-attempts-label {
    display: none !important;
  }

  #global-top-bar #daily-attempts-display,
  #stage-ready-screen.screen #ready-header-attempts-count {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
    font-size: clamp(13px, 1.65cqw, 32px) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
  }
}

/* The generic stage styles reset the source asset's star spacing to zero. */
#stage-ready-screen.screen .ready-side #attain-stars.stars-attain {
  gap: 3% !important;
}

/* Portrait phones prioritize the stage artwork over mockup whitespace. */
@media screen and (orientation: portrait) {
  #stage-ready-screen.screen {
    --ready-edge-padding: clamp(8px, 1.2dvh, 14px);
    --ready-top-padding: max(var(--ready-edge-padding), env(safe-area-inset-top, 0px));
    --ready-bottom-padding: max(var(--ready-edge-padding), env(safe-area-inset-bottom, 0px));
    --ready-header-control-height: clamp(44px, 5.25dvh, 48px);
  }

  #stage-ready-screen.screen > .selection-header {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    height: calc(var(--ready-top-padding) + var(--ready-header-control-height)) !important;
    padding: var(--ready-top-padding) 3.33% 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  #stage-ready-screen.screen #back-to-selection.slider-arrow {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: var(--ready-header-control-height) !important;
    aspect-ratio: 147 / 119 !important;
    flex: 0 0 auto !important;
  }

  #stage-ready-screen.screen #ready-stage-title {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: var(--ready-header-control-height) !important;
    aspect-ratio: 316 / 122 !important;
    flex: 0 1 auto !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
  }

  #stage-ready-screen.screen .ready-header-status {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: var(--ready-header-control-height) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: clamp(5px, 1.2vw, 8px) !important;
    flex: 0 0 auto !important;
  }

  #stage-ready-screen.screen .ready-header-status .hud-pill.primary,
  #stage-ready-screen.screen .ready-header-status .hud-attempts {
    top: 0 !important;
    height: 100% !important;
  }

  #game-screen.screen .main-play-area {
    top: 0.5% !important;
    height: 80% !important;
  }

  #game-screen.screen .progress-section {
    top: 80.8% !important;
    height: 7.2% !important;
  }

  #stage-ready-screen.screen > .ready-content {
    top: 20% !important;
    left: 3% !important;
    width: 94% !important;
    height: 50% !important;
  }

  #stage-ready-screen.screen > .ready-content > .ready-main {
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 969 / 567 !important;
    transform: translateX(-50%) !important;
  }

  #stage-ready-screen.screen > .ready-content > .ready-side {
    top: var(--ready-info-top) !important;
    bottom: auto !important;
    height: auto !important;
  }

  #stage-ready-screen.screen > .ready-content > .ready-side .info-area {
    height: auto !important;
  }

  #stage-ready-screen.screen > .ready-content > .ready-side .info-block:first-child,
  #stage-ready-screen.screen > .ready-content > .ready-side .info-block:nth-child(2) {
    height: auto !important;
    aspect-ratio: 444 / 236 !important;
  }

  #stage-ready-screen.screen > .ready-footer {
    bottom: var(--ready-bottom-padding) !important;
  }
}

/* Gameplay anchors: artwork owns remaining space; auxiliary HUD hugs edges. */
@media screen and (orientation: portrait) {
  #game-screen.screen .main-play-area {
    top: 0.4% !important;
    bottom: 14.6% !important;
    height: auto !important;
  }

  #game-screen.screen .progress-section {
    top: auto !important;
    bottom: 9.4% !important;
    height: 5.2% !important;
  }

  #game-screen.screen .hud-right {
    right: 2.65% !important;
    bottom: 0.8% !important;
    width: 30.5% !important;
    height: 8.6% !important;
  }

  #game-screen.screen .find-indicators {
    left: 3.43% !important;
    bottom: 1.5% !important;
  }
}

@media screen and (orientation: landscape) {
  #game-screen.screen .main-play-area {
    top: 2% !important;
    bottom: 23.5% !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }

  #game-screen.screen .progress-section {
    top: auto !important;
    bottom: 3.3% !important;
    height: 18.7% !important;
  }

  #game-screen.screen .hud-right {
    bottom: 3.25% !important;
    height: 18.7% !important;
  }

  #game-screen.screen .find-indicators {
    bottom: 3.3% !important;
  }
}

/* Visibility policy: gameplay artwork never crops; decorative screens may clip at edges. */
#game-screen.screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  transform: none !important;
}

#game-screen.screen,
#game-container > .screen:not(#game-screen) {
  overflow: hidden !important;
}

#game-screen.screen .canvas-container {
  overflow: hidden !important;
}

#game-screen.screen #base-canvas,
#game-screen.screen #diff-canvas {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

@media screen and (orientation: portrait) {
  #game-screen.screen .canvas-container {
    align-self: center !important;
    justify-self: center !important;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: var(--stage-frame-ratio, 970 / 540) !important;
  }
}

@media screen and (orientation: landscape) {
  #game-screen.screen .canvas-container {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* Portrait phase 1: stretch frame centers only; keep bitmap corners intact. */
@media screen and (orientation: portrait) {
  #splash-screen #start-btn {
    box-sizing: border-box !important;
    border: 12px solid transparent !important;
    border-image: url("assets/resources/figma-v2/imgObStartMessage001.png") 32 fill / 12px / 0 stretch !important;
    background: none !important;
  }

  /* Anchor lobby HUD to the physical phone viewport, not the centered 9:16 artboard. */
  #global-top-bar,
  #global-top-bar.selection-header,
  #global-top-bar.stage-sel-header,
  #global-top-bar.selection-header.stage-sel-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 24.1vw !important;
  }

  #global-top-bar .top-status-right {
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    transform: translateX(-50%) !important;
  }

  #global-top-bar .top-status-right > .hud-pill,
  #global-top-bar .top-status-right > .hud-points,
  #global-top-bar .top-status-right > .hud-attempts {
    top: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    border: 0 solid transparent !important;
    border-inline-width: 3vw !important;
    border-image-source: url("assets/resources/figma-v2/imgFrSource.png") !important;
    border-image-slice: 0 32 fill !important;
    border-image-width: 0 1 !important;
    border-image-repeat: stretch !important;
    background: none !important;
    align-items: center !important;
  }

  #game-container > #global-top-bar > .top-status-right > .hud-points {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 44vw !important;
    padding: 0 3vw 0 12vw !important;
    justify-content: center !important;
  }

  #game-container > #global-top-bar > .top-status-right > .hud-attempts {
    flex: 0 0 38vw !important;
    width: 38vw !important;
    padding: 0 0 0 12% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 0.15em !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  #global-top-bar .hud-attempts-label,
  #global-top-bar #daily-attempts-display,
  #global-top-bar .hud-points #point-count {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: clamp(9px, 2.95vw, 12px) !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  #global-top-bar #daily-attempts-display {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

}

/* Gameplay frame and timer assets keep their source geometry. */
#game-screen.screen .canvas-container {
  padding: 1.6% !important;
}

@media screen and (orientation: landscape) {
  #game-screen.screen .canvas-container {
    justify-self: center !important;
  }
}

#game-screen.screen .timer-bubble {
  height: auto !important;
  aspect-ratio: 237 / 106 !important;
  background-size: contain !important;
}

/* Stage-ready header: match visible control heights and preserve point-frame end caps. */
#stage-ready-screen.screen .ready-header-status {
  align-items: center !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill.primary,
#stage-ready-screen.screen .ready-header-status .hud-attempts {
  height: 93.9% !important;
  align-self: center !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill.primary {
  --ready-point-cap: calc(var(--figma-frame-height) * 0.0892);
  border-radius: 0 !important;
  background: none !important;
  overflow: visible !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill.primary::before {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  box-sizing: border-box !important;
  border: 0 solid transparent !important;
  border-inline-width: var(--ready-point-cap) !important;
  border-image-source: url("assets/resources/figma-v2/imgFrGold.png") !important;
  border-image-slice: 0 80 fill !important;
  border-image-width: 0 1 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

#stage-ready-screen.screen .ready-header-status .hud-pill.primary::after {
  display: none !important;
}

@media screen and (orientation: landscape) {
  #stage-ready-screen.screen .ready-header-status {
    top: 12.3% !important;
    height: 75.3% !important;
  }
}

@media screen and (orientation: portrait) {
  #stage-ready-screen.screen .ready-header-status .hud-pill.primary {
    --ready-point-cap: calc(var(--figma-frame-width) * 0.0902);
  }

  #collection-screen #collection-list-container .collection-card .collection-reward-name {
    font-size: calc(var(--figma-frame-height) * 0.0183) !important;
    line-height: calc(var(--figma-frame-height) * 0.0238) !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-material-count {
    bottom: 10.5% !important;
  }
}

/* Landscape lobby: use the full width for navigation and stage browsing. */
@media screen and (orientation: landscape) {
  :root {
    --figma-frame-width: calc(var(--app-width, 100vw) - var(--safe-inline-size));
    --figma-frame-height: calc(var(--app-height, 100dvh) - var(--safe-block-size));
  }

  #global-top-bar.selection-header.stage-sel-header {
    left: 1.5% !important;
    width: 97% !important;
  }

  #game-container > #global-top-bar > .top-menu {
    margin-left: 0 !important;
  }

  #global-top-bar .top-menu .menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0.4em !important;
    font-size: min(1.62cqw, 3.8cqh, 32px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #global-top-bar .top-menu .menu-btn.active {
    padding-top: 0 !important;
    font-size: min(1.68cqw, 3.94cqh, 33px) !important;
  }

  #game-container > #global-top-bar > .top-status-right {
    right: 0 !important;
    left: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
  }

  #stage-selection-screen .stage-slider-container {
    top: 39.5% !important;
    right: 1.5% !important;
    bottom: 1.5% !important;
    left: 1.5% !important;
    width: auto !important;
    height: auto !important;
  }

  #stage-selection-screen .stage-cards {
    padding-left: 0.75cqw !important;
    gap: 0.85cqw !important;
  }

  #stage-selection-screen .stage-card-item {
    flex-basis: min(46cqw, 98cqh) !important;
    width: min(46cqw, 98cqh) !important;
  }
}

/* Difficulty frame: keep both round end caps, stretch only the horizontal center. */
#stage-selection-screen .difficulty-tabs {
  background: none !important;
}

#stage-selection-screen .difficulty-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  box-sizing: border-box;
  border: 0 solid transparent;
  border-inline-width: 6.75cqh;
  border-image-source: url("assets/resources/figma-v2/imgFrDifficulty.png");
  border-image-slice: 0 91 fill;
  border-image-width: 0 1;
  border-image-repeat: stretch;
  pointer-events: none;
}

#stage-selection-screen .diff-tab.active {
  background-size: contain !important;
}

/* Legacy mobile tab selectors must not force a taller button or padding into
   the shallow landscape frame. Keep the selected artwork above that frame. */
#stage-selection-screen .difficulty-tabs .diff-tab {
  z-index: 1;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

#stage-selection-screen .difficulty-tabs .diff-tab.active {
  background: url("assets/resources/figma-v2/imgObDifficultySelected.png") center / contain no-repeat !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

@media screen and (orientation: portrait) {
  #stage-selection-screen .difficulty-tabs::before {
    border-inline-width: 4.74cqh;
  }
}

/* Stage title uses its native 316x122 frame without the legacy CSS shadow. */
#stage-ready-screen.screen #ready-stage-title {
  width: auto !important;
  aspect-ratio: 316 / 122 !important;
  background-size: contain !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
}

/* Landscape stage actions keep the original Figma asset geometry. */
@media screen and (orientation: landscape) {
  #stage-ready-screen.screen > .ready-footer {
    width: auto !important;
    aspect-ratio: 502 / 435 !important;
  }

  #stage-ready-screen.screen > .ready-footer > .item-shop-row {
    height: auto !important;
    aspect-ratio: 375 / 233 !important;
  }

  #stage-ready-screen.screen > .ready-footer > .item-shop-row > .buy-item-card {
    aspect-ratio: 180 / 233 !important;
  }

  #stage-ready-screen.screen > .ready-footer > .start-action {
    height: auto !important;
    aspect-ratio: 502 / 163 !important;
  }

  #stage-ready-screen.screen > .ready-footer > .item-shop-row > .buy-item-card .item-icon-box {
    top: 9% !important;
    left: 9% !important;
    width: 82% !important;
    height: 62% !important;
  }

  #stage-ready-screen.screen > .ready-content > .ready-side {
    width: auto !important;
    aspect-ratio: 917 / 236 !important;
  }

  #stage-ready-screen.screen .ready-side .info-block:first-child,
  #stage-ready-screen.screen .ready-side .info-block:nth-child(2) {
    aspect-ratio: 444 / 236 !important;
  }
}

/* Keep both timer assets intact; only proportional scaling changes their size. */
#game-screen.screen .progress-container {
  --gauge-left: 1.7324%;
  --gauge-width: 96.5351%;
  --gauge-top: 20.122%;
  --gauge-height: 59.7561%;
  height: auto !important;
  aspect-ratio: 1039 / 82 !important;
  background-size: contain !important;
}

#game-screen.screen .progress-bar {
  top: var(--gauge-top) !important;
  left: var(--gauge-left) !important;
  width: var(--gauge-width) !important;
  height: auto !important;
  aspect-ratio: 1003 / 49 !important;
  background-size: contain !important;
  clip-path: inset(0 var(--timer-empty, 0%) 0 0 round 999px) !important;
  transform: none !important;
  transition: clip-path 1s linear !important;
}

#game-screen.screen #star-thresholds {
  inset: auto !important;
  top: var(--gauge-top) !important;
  left: var(--gauge-left) !important;
  width: var(--gauge-width) !important;
  height: var(--gauge-height) !important;
}

#game-screen.screen #star-thresholds .star-marker {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

#game-screen.screen .timer-bubble {
  top: calc(100% + clamp(4px, 0.45dvh, 8px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@media screen and (orientation: portrait) {
  #game-screen.screen .progress-container {
    --gauge-left: 2.0955%;
    --gauge-width: 95.8091%;
    aspect-ratio: 859 / 82 !important;
  }

  #game-screen.screen .progress-bar {
    aspect-ratio: 823 / 49 !important;
  }
}

/* Gameplay item slots keep the native 186x202 silhouette in both orientations. */
#game-screen.screen .hud-right {
  width: auto !important;
  grid-template-columns: repeat(2, auto) !important;
  justify-content: end !important;
  overflow: visible !important;
}

#game-screen.screen .item-btn {
  width: auto !important;
  height: 100% !important;
  aspect-ratio: 186 / 202 !important;
  background-position: center !important;
  background-size: contain !important;
}

@media screen and (orientation: portrait) {
  #game-screen.screen .hud-right {
    gap: 1.1dvh !important;
  }
}

@media screen and (orientation: landscape) {
  #game-screen.screen .hud-right {
    gap: 1.6dvh !important;
  }
}

/* Portrait phones reserve the camera cutout area even when a browser reports
   a zero safe-area inset. Fixed HUD layers use the same final boundary. */
@media screen and (orientation: portrait) {
  :root {
    --portrait-safe-top: max(10px, env(safe-area-inset-top, 0px));
    --portrait-safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-block-size: calc(var(--portrait-safe-top) + var(--portrait-safe-bottom));
  }

  body {
    padding-top: var(--portrait-safe-top) !important;
    padding-bottom: var(--portrait-safe-bottom) !important;
  }

  #global-top-bar,
  #global-top-bar.selection-header,
  #global-top-bar.stage-sel-header,
  #global-top-bar.selection-header.stage-sel-header {
    top: var(--portrait-safe-top) !important;
  }

  #game-screen.screen {
    top: var(--portrait-safe-top) !important;
    bottom: var(--portrait-safe-bottom) !important;
    height: auto !important;
  }

  #effect-overlay {
    box-sizing: border-box !important;
    padding-top: var(--portrait-safe-top) !important;
    padding-bottom: var(--portrait-safe-bottom) !important;
  }
}

/* Fullscreen draws under the status bar and camera hole, yet Android browsers
   may still report a zero top inset. Reserve a status-bar height there. */
@media screen and (orientation: portrait) {
  :root:fullscreen {
    --portrait-safe-top: max(36px, env(safe-area-inset-top, 0px));
  }
}

@media screen and (orientation: portrait) and (display-mode: fullscreen) {
  :root {
    --portrait-safe-top: max(36px, env(safe-area-inset-top, 0px));
  }
}

/* Shorter settle keeps stage swipes responsive without adding free momentum. */
#stage-selection-screen .stage-cards {
  transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.25, 1) !important;
}

#stage-selection-screen .stage-cards.is-dragging {
  transition: none !important;
}

/* Remaining targets: one native question icon followed by × and live count. */
#game-screen.screen .find-indicators {
  box-sizing: border-box !important;
  width: max-content !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(5px, 1.2vmin, 10px) !important;
  white-space: nowrap !important;
}

#game-screen.screen #find-indicators .indicator {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 !important;
}

#game-screen.screen .find-count-multiply,
#game-screen.screen .find-count-value {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  color: var(--figma-deep-mint) !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  line-height: normal !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

@media screen and (orientation: portrait) {
  #game-screen.screen .find-indicators {
    min-width: clamp(108px, 27vw, 150px) !important;
    height: clamp(48px, 11vw, 68px) !important;
    min-height: 48px !important;
  }

  #game-screen.screen .find-count-multiply,
  #game-screen.screen .find-count-value {
    font-size: calc(var(--figma-frame-width) * 0.02963) !important;
  }
}

@media screen and (orientation: landscape) {
  #game-screen.screen .find-indicators {
    min-width: clamp(110px, 14vw, 160px) !important;
    height: clamp(46px, 10dvh, 64px) !important;
    min-height: 46px !important;
  }

  #game-screen.screen .find-count-multiply,
  #game-screen.screen .find-count-value {
    font-size: clamp(17px, 1.76cqw, 34px) !important;
  }
}

/* Landscape gameplay uses the visible viewport, including browser chrome.
   Reserve a complete HUD row so its gauge, timer and item buttons cannot spill
   outside the screen when the available height drops below 312px. */
@media screen and (orientation: landscape) {
  #game-screen.screen {
    --game-edge: clamp(6px, 2cqh, 20px);
    --game-hud-height: clamp(60px, 19cqh, 150px);
    --game-item-height: clamp(48px, 16cqh, 130px);
    --game-item-gap: clamp(6px, 1.6cqh, 18px);
    --game-items-width: calc(var(--game-item-height) * 186 / 202 * 2 + var(--game-item-gap));
    --game-timer-height: clamp(24px, 7cqh, 54px);
    inset: env(safe-area-inset-top) auto auto env(safe-area-inset-left) !important;
    width: calc(var(--app-width, 100vw) - var(--safe-inline-size)) !important;
    height: calc(var(--app-height, 100dvh) - var(--safe-block-size)) !important;
  }

  #game-screen.screen .main-play-area {
    inset: var(--game-edge) var(--game-edge) calc(var(--game-hud-height) + var(--game-edge) * 2) !important;
    width: auto !important;
  }

  #game-screen.screen .progress-section {
    left: 50% !important;
    right: auto !important;
    bottom: var(--game-edge) !important;
    width: min(54%, calc(100% - (var(--game-items-width) + var(--game-edge) * 2) * 2), calc((var(--game-hud-height) - var(--game-timer-height) - 4px) * 1039 / 82)) !important;
    height: var(--game-hud-height) !important;
    transform: translateX(-50%) !important;
  }

  #game-screen.screen .timer-bubble {
    right: auto !important;
    bottom: auto !important;
    top: calc(100% + 4px) !important;
    width: auto !important;
    height: var(--game-timer-height) !important;
    aspect-ratio: 237 / 106 !important;
    /* 틀은 통그림 배경(ui-shape-preservation.css 의 9조각은 세로 전용)이라 글자를 칸 높이에 맞춘다. */
    font-size: calc(var(--game-timer-height) * 0.42) !important;
  }

  #game-screen.screen .hud-right {
    left: auto !important;
    right: var(--game-edge) !important;
    bottom: var(--game-edge) !important;
    width: var(--game-items-width) !important;
    height: var(--game-item-height) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--game-item-gap) !important;
  }

  #game-screen.screen .item-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  #game-screen.screen .find-indicators {
    left: var(--game-edge) !important;
    bottom: var(--game-edge) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: clamp(32px, 12cqh, 64px) !important;
  }
}

/* Show the original READY and Game Start assets in separate, centered phases. */
#game-start-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(0, 0, 0, .69);
  pointer-events: auto;
}
#game-start-overlay.hidden { display: none; }
.game-start-frame {
  position: relative;
  width: var(--figma-frame-width, 100vw);
  height: var(--figma-frame-height, 100dvh);
}
.game-start-logo,
.game-start-ready {
  position: absolute;
  display: none;
  object-fit: contain;
  transform-origin: center;
}
.game-start-logo {
  left: 8.15%;
  top: 40.515%;
  width: 83.7%;
  height: 18.97%;
}
.game-start-ready {
  left: 35.74%;
  top: 47.185%;
  width: 28.33%;
  height: 5.63%;
}
#game-start-overlay.is-starting { animation: game-start-dismiss 700ms linear both; }
.is-starting .game-start-logo { display: block; animation: game-start-pop 420ms ease-out both; }
.is-ready .game-start-ready { display: block; animation: game-ready-pop 320ms ease-out both; }
@keyframes game-start-pop {
  0% { opacity: 0; transform: translateY(20px) scale(.72); }
  65% { opacity: 1; transform: translateY(-4px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes game-ready-pop {
  0% { opacity: 0; transform: translateY(10px) scale(.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes game-start-dismiss {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}
@media (orientation: landscape) {
  .game-start-logo { left: 26.46%; top: 33.14%; width: 47.08%; height: 33.72%; }
  .game-start-ready { left: 42.03%; top: 45%; width: 15.94%; height: 10%; }
}
@media (prefers-reduced-motion: reduce) {
  #game-start-overlay.is-starting,
  .is-starting .game-start-logo,
  .is-ready .game-start-ready { animation: none; }
}

/* Gameplay text effects must remain inside the phone during their 1.2x entrance. */
.effect-text-overlay {
  box-sizing: border-box !important;
  padding-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
  overflow: hidden !important;
}

.effect-text-overlay .ready-start-text {
  box-sizing: border-box !important;
  max-width: calc(100vw - 48px) !important;
  font-size: clamp(26px, 8vw, 96px) !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform-origin: center !important;
  -webkit-text-stroke-width: clamp(1.5px, 0.25vw, 3px) !important;
}

/* Collection frames stretch only through their center; their rounded corners stay intact. */
#collection-screen #collection-list-container .collection-card {
  flex-basis: 40cqh !important;
  box-sizing: border-box !important;
  border: clamp(12px, 2cqh, 24px) solid transparent !important;
  border-image-source: url("assets/resources/figma-v2/imgFrCollectionList2.png") !important;
  border-image-slice: 42 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

#collection-screen #collection-list-container .collection-card .collection-material {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 100% !important;
  aspect-ratio: 149 / 198 !important;
}

#collection-screen #collection-list-container .collection-card .combine-btn {
  width: 15% !important;
}

@media screen and (orientation: portrait) {
  #collection-screen #collection-list-container .collection-card {
    flex: 0 0 auto !important;
    height: auto !important;
    aspect-ratio: 993 / 365 !important;
    border-image-source: url("assets/resources/figma-v2/imgFrCollectionList1.png") !important;
  }

  #collection-screen #collection-list-container .collection-card .combine-btn {
    width: 21.2% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 239 / 100 !important;
    background: url("assets/resources/figma-v2/imgBtnCollectionExchange1.png") center / 100% 100% no-repeat !important;
    color: transparent !important;
  }

  #collection-screen #collection-list-container .collection-card .combine-btn:disabled {
    background-image: url("assets/resources/figma-v2/imgBtnCollectionExchangeOff1.png") !important;
  }
}

/* Portrait attempts share one line box instead of centering separate flex items. */
#global-top-bar .hud-attempts-text {
  display: contents;
}

@media screen and (orientation: portrait) {
  #global-top-bar .hud-attempts {
    align-items: center !important;
  }

  #global-top-bar .hud-attempts-text {
    display: block;
    font-size: clamp(9px, 2.95vw, 12px);
    line-height: 1 !important;
  }

  #global-top-bar .hud-attempts-text > .hud-attempts-label,
  #global-top-bar .hud-attempts-text > #daily-attempts-display {
    display: inline !important;
    font: inherit !important;
    vertical-align: baseline !important;
    transform: none !important;
  }
}

/* Fit reward popups as a whole. Flex height compression would stretch every
   painted label and frame even though the card declares an aspect ratio. */
#reward-modal .modal-card {
  flex: 0 0 auto !important;
  width: min(var(--reward-card-width), var(--reward-fit-width, calc((100dvh - 24px - var(--safe-block-size)) * 827 / var(--reward-card-height)))) !important;
  min-height: 0 !important;
}

#inventory-reward-modal .inventory-reward-card {
  flex: 0 0 auto !important;
  width: min(var(--inventory-card-width), var(--inventory-fit-width, calc((100dvh - 24px - var(--safe-block-size)) * 827 / 947))) !important;
}

/* ⑦⑩ PC 는 보상 창 폭을 1920×1080 시안 비율(높이 1080 당 폭 827)로 묶는다 — 2026-10-29 Kay님 승인. */
html[data-form="desktop"] #reward-modal,
html[data-form="desktop"] #inventory-reward-modal {
  --reward-fit-width: calc((100dvh - var(--safe-block-size)) * 827 / 1080);
  --inventory-fit-width: calc((100dvh - var(--safe-block-size)) * 827 / 1080);
}

#inventory-reward-modal #inventory-reward-close {
  height: auto !important;
  aspect-ratio: 333 / 133 !important;
  border: 0 !important;
  border-image: none !important;
  background: url("assets/resources/figma-v2/imgBtnBase.png") center / contain no-repeat !important;
  padding: 0 !important;
  /* 화면 폭(cqw)을 따르면 세로 360px 에서 6.3px 까지 작아졌다 — 위 카드 폭과 같은 식을 따른다(세로 17px · 가로 16px). */
  font-size: var(--inventory-close-fs, clamp(14px, calc(min(var(--inventory-card-width), var(--inventory-fit-width, calc((100dvh - 24px - var(--safe-block-size)) * 827 / 947))) * 0.062), 34px)) !important;
}

/* PC 보상 창 안 글자를 창 실폭 × 1920 시안 비율로 — 옛 상한(24·31·34px)에 걸려 큰 모니터에서 작았다.
   지금보다 작아지지 않게 기존 값과 큰 쪽을 쓰고, 두 창의 이름·버튼 글자를 같게 맞춘다 (2026-10-29 승인). */
html[data-form="desktop"] #reward-modal .modal-card {
  --reward-actual-width: min(var(--reward-card-width), var(--reward-fit-width));
  --reward-name-fs: max(clamp(16px, 1.3cqw, 24px), calc(var(--reward-actual-width) * 31 / 827));
  --reward-message-fs: max(clamp(15px, 1.6cqw, 31px), calc(var(--reward-actual-width) * 31 / 827));
}

html[data-form="desktop"] #reward-modal #reward-close-btn {
  --ui-native-label-size: max(clamp(12px, calc(var(--reward-actual-width) * 0.05), 34px), calc(var(--reward-actual-width) * 0.055));
}

html[data-form="desktop"] #inventory-reward-modal .inventory-reward-card {
  --inventory-actual-width: min(var(--inventory-card-width), var(--inventory-fit-width));
  --inventory-title-fs: max(clamp(18px, 2.15cqw, 41px), calc(var(--inventory-actual-width) * 41 / 827));
  --inventory-name-fs: max(clamp(15px, 1.6cqw, 31px), calc(var(--inventory-actual-width) * 31 / 827));
  --inventory-close-fs: max(clamp(14px, calc(var(--inventory-actual-width) * 0.062), 34px), calc(var(--inventory-actual-width) * 0.055));
}

/* Labels painted into button images must never stretch in either orientation. */
#stage-ready-screen #start-game-btn,
#collection-screen #collection-list-container .collection-card .combine-btn {
  background-size: contain !important;
}

/* Collection hero cards — 2026-10-06 시안 3차(Kay님 승인).
   보상 그림이 카드의 주인공이고, 재료는 아이콘·개수만 한 줄에 둔다.
   액자 그림과 교환하기 버튼 그림은 위 규칙을 그대로 쓰고, 여기서는 배치만 바꾼다.
   카드 높이를 그림 비율(993/365)로 묶던 고정을 풀어 내용만큼 자라게 한다. */
#collection-screen #collection-list-container .collection-card.collection-hero-card {
  /* 내용 시작점을 액자 그림과 같은 배율로(2026-10-08 Kay님 승인) — 예전엔 테두리 칸은 화면 높이(2cqh), 액자는 그림 배율로
     따로 계산돼 제목이 둥근 모서리 홈에 박히거나(태블릿) 액자 띠를 파고들었다(가로). 그림 기준 42 = 액자 두께, 60 = 모서리 홈 바깥 */
  --hero-frame: calc(var(--ui-art-pixel) * 42);
  --hero-inset: calc(var(--ui-art-pixel) * 60);
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-width: var(--hero-frame) !important;
  padding: calc(var(--hero-inset) - var(--hero-frame)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* 카드 높이가 어디서 묶여도 그림·재료 줄이 눌려 사라지지 않게 한다. */
#collection-screen #collection-list-container .collection-card.collection-hero-card > * {
  flex-shrink: 0 !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-head {
  display: flex !important;
  align-items: center !important;   /* 제목을 교환하기 버튼과 세로 가운데로 */
  gap: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-name {
  --hero-name-fs: clamp(16px, calc(var(--figma-frame-width) * 0.049), 28px);   /* 상한 22 → 28: 폰은 그대로, 세로 태블릿만 커짐 */
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  color: var(--figma-brown) !important;
  font-size: var(--hero-name-fs) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-action {
  flex: 0 0 21.2% !important;
  display: block !important;
}

/* relative 여야 한다 — 파란 버튼 판(::after, inset 0)이 버튼 밖 카드 전체로 번지지 않는다. */
#collection-screen #collection-list-container .collection-card .collection-hero-action .combine-btn {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  top: auto !important;
  right: auto !important;
}

/* disabled 버튼은 눌림을 못 받으므로 감싼 칸이 받아 「재료 N종 더」를 알려 준다. */
#collection-screen #collection-list-container .collection-card .collection-hero-action .combine-btn:disabled {
  pointer-events: none !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-art {
  position: relative !important;
  height: clamp(150px, calc(var(--figma-frame-width) * 0.45), 260px) !important;
  border-radius: 16px !important;
  background: radial-gradient(circle at 50% 55%, #ffffff 0%, #fff4e4 55%, #f8e6cf 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-art img {
  max-width: 92% !important;
  max-height: 92% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 8px rgba(91, 58, 41, 0.18)) !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: #2e8063 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-progress {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 4px !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-bar {
  flex: 1 1 auto !important;
  height: 8px !important;
  border-radius: 4px !important;
  background: #efe0cc !important;
  overflow: hidden !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-bar > span {
  display: block !important;
  height: 100% !important;
  border-radius: 4px !important;
  background: #6fbf9f !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-count {
  flex: 0 0 auto !important;
  color: #4a2f21 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-materials {
  display: grid !important;
  /* 재료 개수만큼 줄을 나눠 끝까지 채운다(2026-10-08 Kay님 승인) — 9칸 고정이면 7·8개일 때 오른쪽이 비고 4:3 태블릿에서 칸이 44px 아래로 줄었다.
     none 은 !important 여야 한다 — style.css 의 가로 규칙(.collection-card > div:last-child, 58px 칸)이 !important 로 덮는다. */
  grid-template-columns: none !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 0 2px !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  font: inherit !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms ease !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat:active {
  transform: scale(0.92) !important;
}

/* 재료 칸 3단계 — 2026-10-06 시안 4차(Kay님 승인). 0개 · 일부(아래부터 차오름) · 다 모음(체크). */
#collection-screen #collection-list-container .collection-card .collection-hero-mat {
  position: relative !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat.is-complete {
  background: #e3f4ec !important;
  border: 2px solid #4fa784 !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat.is-partial {
  background: #ffffff !important;
  border: 2px solid #e2b77e !important;
  overflow: hidden !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat.is-partial::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: var(--mat-fill, 0%) !important;
  background: #ffe2b0 !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat.is-partial > span {
  position: relative !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat.is-partial .collection-hero-mat-count {
  color: #a4560f !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat-check {
  position: absolute !important;
  top: -5px !important;
  right: -4px !important;
  width: 15px !important;
  height: 15px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  border: 1.5px solid #ffffff !important;
  background: #2e8063 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px 9px no-repeat !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat.is-missing {
  background: #f7efe5 !important;
  border: 2px dashed #d6bea4 !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat-icon {
  width: 80% !important;
  aspect-ratio: 1 !important;
  display: flex !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat.is-missing .collection-hero-mat-icon img {
  opacity: 0.45 !important;
  filter: grayscale(1) !important;
}

/* 재료 수량 글자는 칸 폭(cqw)을 넘지 않는다(10/17 Kay님 승인 시안 — 폴드 가로에서 «100/4» 가 칸 밖으로 나왔다).
   칸 안쪽 폭의 37% = 네 글자(«99/5»)가 좌우 1.5px 이상 남는 크기, 다섯 글자 이상(.is-long)은 30%.
   최소 8px — 작은 폰 가로(568×320 등, 칸 23px)에서 5.9px 까지 줄던 것을 막는다. 그 크기에서만 다섯 글자가 조금 넘칠 수 있다(10/17 Kay님 결정 A) */
#collection-screen #collection-list-container .collection-card .collection-hero-mat {
  container-type: inline-size;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat-count {
  --mat-count-fs: clamp(10px, calc(var(--figma-frame-width) * 0.026), 14px);
  font-size: max(8px, min(var(--mat-count-fs), var(--mat-count-max, 37cqw))) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat-count.is-long {
  --mat-count-max: 30cqw;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat.is-complete .collection-hero-mat-count {
  color: #1f6e52 !important;
}

#collection-screen #collection-list-container .collection-card .collection-hero-mat.is-missing .collection-hero-mat-count {
  color: #8a5a3c !important;
}

#collection-screen .collection-toast {
  position: absolute;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  width: max-content;
  max-width: 92%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.55em 1.3em 0.55em 0.6em;
  border-radius: 1em;
  background: #4a2f21;
  color: #ffffff;
  /* 폰은 14px 그대로, 큰 화면(PC 1920 ≈ 26px)은 화면에 비례해 키운다 — 2026-10-12 시안 승인 */
  font-size: clamp(14px, 2.4vmin, 28px);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
  transform: translateX(-50%);
  box-shadow: 0 4px 12px rgba(40, 24, 16, 0.3);
  pointer-events: none;
}

#collection-screen .collection-toast.hidden {
  display: none;
}

/* 누른 재료 그림 — 알림 글자 크기에 맞춰 함께 커진다 */
:root {
  --collection-toast-icon-bg: #fff7ec;
}

#collection-screen .collection-toast-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.8em;
  height: 2.8em;
  border-radius: 0.7em;
  background: var(--collection-toast-icon-bg);
}

/* 그림의 고정 크기(style 속성)는 game.js 가 지우고 넘긴다 */
#collection-screen .collection-toast-icon > * {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

#collection-screen .collection-toast-text {
  min-width: 0;
}

/* 가로 화면: 카드를 두 줄로 나란히 놓고, 교환 버튼은 예전과 같은 실제 크기를 지킨다. */
@media screen and (orientation: landscape) {
  #collection-screen #collection-list-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 2.4cqh 1.6cqw !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-hero-action {
    flex-basis: calc(var(--figma-frame-width) * 0.135) !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-hero-art {
    height: clamp(140px, calc(var(--figma-frame-height) * 0.32), 300px) !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-hero-name {
    font-size: clamp(16px, calc(var(--figma-frame-height) * 0.034), 26px) !important;
  }

  #collection-screen #collection-list-container .collection-card .collection-hero-mat-count {
    --mat-count-fs: clamp(10px, calc(var(--figma-frame-height) * 0.02), 15px);
  }
}

/* 설정 화면 세로: 첫 내용이 컬렉션 첫 카드와 같은 높이에서 시작한다(2026-10-06 Kay님 요청).
   예전에는 제목을 위아래 auto 여백으로 가운데 모아서, NFC 카드가 늘면 상단 바에 붙고 줄면 떠 있었다.
   19.22cqh = 세로 화면의 #collection-list-container top(19.22%)과 같은 기준. */
@media screen and (orientation: portrait) {
  #settings-screen .settings-scroll {
    top: 19.22cqh;
  }

  #settings-screen .settings-column {
    padding-top: 0;
  }

  #settings-screen .settings-title {
    margin-top: 0;
  }
}

/* 폰 세로(플립 360×880 등): 19.22cqh 는 긴 화면에서 알약 아래 76px 공백이 된다(2026-10-26 Kay님 승인 시안).
   24.1vw = 화면 위 ~ 알약 아래 끝. 알약 아래 24px 에서 제목이 시작한다(업적·책장 상자와 같은 값). */
@media screen and (orientation: portrait) and (max-width: 599px) {
  #settings-screen .settings-scroll {
    top: calc(24.1vw + 24px);
  }
}

/* Phone landscape: browser chrome reduces height independently of width.
   Keep labels inside their painted frames, including the difficulty caption. */
@media screen and (orientation: landscape) and (max-height: 450px) {
  #stage-ready-screen.screen #ready-stage-title {
    font-size: min(1.72cqw, 4cqh, 33px) !important;
  }

  #stage-ready-screen.screen .ready-side #ready-diff-display {
    font-size: min(2.6cqw, 5cqh, 50px) !important;
    line-height: 1.15 !important;
  }

  #stage-ready-screen.screen .ready-side #ready-diff-display .ready-diff-count {
    margin-top: 0.1em !important;
    font-size: max(8px, 0.4em) !important;
    line-height: 1.2 !important;
  }

  #roulette-screen #spin-roulette-btn > .roulette-price-value {
    font-size: min(2.4cqw, 6cqh, 24px) !important;
    line-height: 1.2 !important;
  }

  #global-top-bar .hud-attempts #daily-attempts-display,
  #stage-ready-screen.screen .ready-header-status #ready-header-attempts-count {
    font-size: min(1.65cqw, calc(11cqh / var(--attempt-digit-count, 2)), 32px) !important;
    line-height: 1.25 !important;
  }

  #global-top-bar .hud-points #point-count,
  #stage-ready-screen.screen #ready-point-count {
    line-height: 1.25 !important;
  }
}

/* ===== 반응형 2차 3'단계: 준비·선택 화면 배치 (2026-10-08 Kay님 승인 시안 3차) =====
   계획서 docs/superpowers/plans/2026-10-07-responsive-r2-plan.md §4 «시안 3차 결과».
   앞선 !important 규칙 위에 덮어쓰는 방식이라 !important 를 쓴다(린트 기록 개수는 Kay님 결정으로 이만큼 올림).
   크기 단위: cqw/cqh = 게임 화면(#game-container) 폭/높이의 1% */
:root {
  --ready-diff-stroke: #27645a;   /* 난이도 글자 테두리(원본 UI 의 진한 민트) */
  --ready-pill-fill: #cff0e6;     /* 카드 그림 알약 색(207,240,230) 실측 */
}

/* 길이 변수는 정의한 곳(화면)에서 값을 굳힌다 — 안 그러면 버튼처럼 크기 기준을 따로 가진 요소 안에서 cq 가 다른 기준으로 풀린다 */
@property --ph { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --pw { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --cw { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --card-w { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --left { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --top { syntax: '<length>'; inherits: true; initial-value: 0px; }

/* 가로(4:3 제외): 그림 | 오른쪽 열(카드·아이템·시작) 한 묶음을 화면 가운데. 카드 묶음은 game.js mountReadyInfoOverlay 가 열(.ready-footer) 맨 위로 옮긴다 */
@media screen and (orientation: landscape) {
  #stage-ready-screen.screen {
    /* 그림 높이: 위 메뉴 아래(18%)~바닥 5% 안, 그리고 «그림 + 간격 + 열» 이 폭 92% 안 */
    --ph: min(77cqh, 36.85cqw);
    --pw: calc(var(--ph) * 969 / 567);
    --cw: calc(var(--ph) * 0.72);          /* 오른쪽 열 폭 = 그림 높이의 72% */
    --gx: 2.5cqw;                          /* 그림↔열 간격 */
    --left: calc((100cqw - var(--pw) - var(--gx) - var(--cw)) / 2);
    --top: calc(18cqh + (77cqh - var(--ph)) / 2);
    --card-w: var(--cw);
  }
  #stage-ready-screen.screen > .ready-content {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }
  #stage-ready-screen.screen > .ready-content > .ready-main {
    position: absolute !important;
    inset: auto !important;
    left: var(--left) !important;
    top: var(--top) !important;
    transform: none !important;
    width: var(--pw) !important;
    height: var(--ph) !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  #stage-ready-screen.screen > .ready-footer {
    position: absolute !important;
    inset: auto !important;
    left: calc(var(--left) + var(--pw) + var(--gx)) !important;
    top: var(--top) !important;
    width: var(--cw) !important;
    height: var(--ph) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;   /* 카드↔아이템, 아이템↔시작 간격을 같게 */
    align-items: center !important;              /* 아이템 묶음을 열 가운데로 */
    gap: 0 !important;
  }
  #stage-ready-screen.screen > .ready-footer > .ready-side {
    position: relative !important;
    inset: auto !important;
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
}

/* 카드 칸 = 그림(imgFrMapInfoGreen 444×236) 원래 비율. --k = 칸 폭 ÷ 444 (그림 1px 이 화면에서 몇 px 인지)
   알약은 그림의 136~308 × 20~63(픽셀 실측). 9조각 위 경계를 64 로 내려 알약이 통째로 위 띠에 들어가게 한다
   → 칸 높이가 달라져도 알약은 늘어나지 않는다. (세로·가로 공통) */
@property --cr-gap { syntax: '<length>'; inherits: true; initial-value: 0px; }
#stage-ready-screen.screen .ready-side .info-area { --cr-gap: 3cqw; }
@media screen and (orientation: landscape) {
  #stage-ready-screen.screen > .ready-footer > .ready-side .info-area { --cr-gap: calc(var(--card-w) * 0.04); }
}
html body #stage-ready-screen.screen .ready-side .info-area {
  container: cardrow / inline-size;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--cr-gap) !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body #stage-ready-screen.screen .ready-side .info-area >.info-block:is(:first-child, :nth-child(2)) {
  --k: calc((100cqw - var(--cr-gap)) / 2 / 444);
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: calc(var(--k) * 236) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-image-slice: 64 48 48 48 fill !important;
  border-image-width: calc(var(--k) * 64) calc(var(--k) * 48) calc(var(--k) * 48) calc(var(--k) * 48) !important;
}
/* 라벨 = 그림 알약 자리에 그대로. 글자 = 알약 높이(44)의 62% */
html body #stage-ready-screen.screen .ready-side .info-area >.info-block:is(:first-child, :nth-child(2)) > h3 {
  --ready-label-fs: calc(var(--k) * 27.5);
  position: absolute !important;
  inset: auto !important;
  left: calc(var(--k) * 136) !important;
  top: calc(var(--k) * 20) !important;
  width: calc(var(--k) * 172) !important;
  height: calc(var(--k) * 44) !important;
  min-height: 0 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  font-size: var(--ready-label-fs) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* 알약 아래(63)~테두리 위(222) 띠의 가운데에 내용 */
html body #stage-ready-screen.screen .ready-side .info-area >.info-block #ready-diff-display {
  --ready-diff-fs: calc(var(--k) * 58);
  position: absolute !important;
  inset: calc(var(--k) * 63) 0 calc(var(--k) * 14) 0 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 !important;
  font-size: var(--ready-diff-fs) !important;
  line-height: 1.05 !important;
  -webkit-text-stroke: max(1px, calc(var(--k) * 2)) var(--ready-diff-stroke) !important;
}
html body #stage-ready-screen.screen .ready-side .info-area >.info-block #ready-diff-display .ready-diff-count {
  --ready-count-fs: calc(var(--k) * 33);
  font-size: var(--ready-count-fs) !important;
  line-height: 1.15 !important;
  margin-top: 0.15em !important;
}
html body #stage-ready-screen.screen .ready-side .info-area >.info-block #attain-stars.stars-attain {
  position: absolute !important;
  inset: auto !important;
  left: 10% !important;
  width: 80% !important;
  top: calc(var(--k) * (142.5 - 20)) !important;
  height: calc(var(--k) * 40) !important;
  min-height: 0 !important;
  transform: none !important;
  margin: 0 !important;
}

/* 폰(카드 줄 폭 < 330px): 그림 알약으로는 라벨이 10px 미만 → 코드 알약이 그림 알약을 덮는다(결정 L-나).
   칸 높이는 내용에 맞춰 늘고(그림은 알약 아래 몸통만 늘어난다), 두 칸은 같은 높이. */
@container cardrow (width < 330px) {
  html body #stage-ready-screen.screen .ready-side .info-area >.info-block:is(:first-child, :nth-child(2)) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
    min-height: calc(var(--k) * 236) !important;
    padding: calc(var(--k) * 20) 4px 5px !important;
    gap: 2px !important;
  }
  html body #stage-ready-screen.screen .ready-side .info-area >.info-block:is(:first-child, :nth-child(2)) > h3 {
    /* 칸 폭(=444k)의 10% · 10~12px — 568(칸 72px)은 10, 915(칸 115px)는 11.5 */
    --ready-label-fs-phone: clamp(10px, calc(var(--k) * 44.4), 12px);
    position: static !important;
    width: auto !important;
    min-width: calc(var(--k) * 172) !important;
    height: auto !important;
    min-height: calc(var(--k) * 44) !important;
    padding: 0.18em 0.75em !important;
    background: var(--ready-pill-fill) !important;
    border-radius: 999px !important;
    font-size: var(--ready-label-fs-phone) !important;
    line-height: 1.15 !important;
  }
  html body #stage-ready-screen.screen .ready-side .info-area >.info-block #ready-diff-display {
    --ready-diff-fs-phone: clamp(13px, calc(var(--k) * 75), 18px);     /* 칸 폭의 17% */
    position: static !important;
    flex: 1 !important;
    font-size: var(--ready-diff-fs-phone) !important;
  }
  html body #stage-ready-screen.screen .ready-side .info-area >.info-block #ready-diff-display .ready-diff-count {
    --ready-count-fs-phone: clamp(9px, calc(var(--k) * 56), 12px);     /* 「틀린 그림 n개」≈6.6em 이 칸 폭 84% 안에(M2) */
    font-size: var(--ready-count-fs-phone) !important;
  }
  html body #stage-ready-screen.screen .ready-side .info-area >.info-block #attain-stars.stars-attain {
    position: static !important;
    width: 70% !important;               /* 별 하나 = 줄 폭 17.6% 라 80% 면 별끼리 닿는다(568 확대 확인) */
    height: max(10px, calc(var(--k) * 40)) !important;   /* 568: 칸 72px 의 80% 에 별 5개가 닿지 않게 */
    margin: auto 0 !important;
  }
}

@media screen and (orientation: landscape) {
  #stage-ready-screen.screen > .ready-footer > .item-shop-row,
  #stage-ready-screen.screen > .ready-footer > .start-action {
    position: relative !important;
    inset: auto !important;
    flex: none !important;
    margin: 0 !important;
    transform: none !important;
  }
  #stage-ready-screen.screen > .ready-footer > .start-action { width: 100% !important; }
  /* 아이템 묶음 폭 = 카드 폭의 75%(아이템 카드는 묶음 폭에 맞춰 커진다) */
  #stage-ready-screen.screen > .ready-footer > .item-shop-row {
    width: calc(var(--card-w) * 0.75) !important;
    max-width: none !important;
    margin-top: calc(var(--card-w) * 0.04) !important;  /* 보유 개수 꼬리표가 위로 튀어나온 만큼 — 눈에 보이는 간격을 같게 */
  }
  /* 시작 버튼 글자: 버튼 크기에 맞게 — ui-shape-preservation 의 body :is(...) 보다 앞서야 한다 */
  body #stage-ready-screen.screen > .ready-footer > .start-action > #start-game-btn {
    --ready-start-fs: clamp(15px, calc(var(--card-w) * 0.1), 44px);
    font-size: var(--ready-start-fs) !important;
  }

  /* 상단 글자: 판 이름·포인트를 화면 높이 기준으로(폭 기준이면 4:3·작은 폰에서 작다) */
  #stage-ready-screen.screen #ready-stage-title {
    --ready-title-fs: clamp(12px, min(3.78cqh, 2.34cqw), 36px);   /* 바닥 12 — 568 에서 글자가 장식 점에 붙었다(M3) · 10/12 탭 30→27px 로 0.9배 */
    font-size: var(--ready-title-fs) !important;
  }
  #stage-ready-screen.screen #ready-point-count,
  #stage-ready-screen.screen #ready-point-count.compact,
  #stage-ready-screen.screen #ready-header-attempts-count {
    --ready-point-fs: clamp(14px, min(4cqh, 2.2cqw), 36px);
    font-size: var(--ready-point-fs) !important;
  }
}

/* 4:3 가로(iPad 가로): 그림을 크게 위에, 카드·아이템·시작은 그림 아래 한 줄 */
@media screen and (orientation: landscape) {
  html[data-ratio="land-square"] #stage-ready-screen.screen {
    /* 위 메뉴 아래 13.5% ~ 바닥 4% 안에 «그림 + 2.5% + 아래 줄 18%» */
    --pw: min(80cqw, calc((82.5cqh - 20.5cqh) * 969 / 567));
    --ph: calc(var(--pw) * 567 / 969);
    --left: calc((100cqw - var(--pw)) / 2);
    --top: calc(13.5cqh + (82.5cqh - var(--ph) - 20.5cqh) / 2);
    --card-w: calc(var(--pw) * 0.34);
  }
  html[data-ratio="land-square"] #stage-ready-screen.screen > .ready-footer {
    left: var(--left) !important;
    top: calc(var(--top) + var(--ph) + 2.5cqh) !important;
    width: var(--pw) !important;
    height: 18cqh !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  /* 아래 줄 세 덩어리는 세로 가운데로 */
  html[data-ratio="land-square"] #stage-ready-screen.screen > .ready-footer > * { align-self: center !important; }
  html[data-ratio="land-square"] #stage-ready-screen.screen > .ready-footer > .ready-side { width: 34% !important; }
  html[data-ratio="land-square"] #stage-ready-screen.screen > .ready-footer > .start-action {
    width: 34% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* 세로: 그림·카드 묶음을 위 메뉴와 아래 버튼 사이 가운데로 */
@media screen and (orientation: portrait) {
  #stage-ready-screen.screen > .ready-content {
    top: 10.5% !important;
    bottom: 14% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.6cqh !important;
  }
  #stage-ready-screen.screen > .ready-content > .ready-main {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 969 / 567 !important;
  }
  #stage-ready-screen.screen > .ready-content > .ready-side {
    position: relative !important;
    inset: auto !important;
    flex: none !important;
    width: 94.67% !important;
    height: auto !important;           /* 칸 높이는 카드 칸 규칙(원래 비율)이 정한다 */
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
  }
}

/* 제목 틀: 상자는 이미 그림 비율(316:122)인데, 9조각 테두리 두께(경계 50)를 상자와 무관한 --ui-art-pixel 로 계산해
   태블릿 세로는 27.2px×2 > 높이 48px → 점 있는 가운데 줄이 0 으로 사라지고, 1080×810·1280×800 은 테두리가 얇아 점이 세로로 늘어났다(실측)
   → 테두리 두께를 상자 비율로: 위·아래 50/122 = 40.98% (높이 기준) · 좌·우 50/316 = 15.82% (폭 기준) → 그림이 통째로 같은 배율 */
html body #stage-ready-screen.screen #ready-stage-title {
  border-image-width: 40.98% 15.82% !important;
}
/* 제목 틀이 글자 길이만큼 옆으로 늘어난다: 폭이 316:122 로 고정이라 두 자리부터 글자가 점에 붙고 「스테이지 100」은 점을 덮었다(10/12 탭 실측)
   → 좌·우 두께를 «높이 × 50/122» 길이로 고정해 점·모서리는 그대로, 가운데만 늘어남 · 글자와 점 사이 높이의 12%
   최소 폭은 글자 길이(min-content) — 위쪽 줄이 모자라 제목이 줄어들 때 글자가 틀 밖으로 넘치지 않게(10/17 승인 시안) */
html body #stage-ready-screen.screen #ready-stage-title {
  --ready-title-h: calc(15cqh * 0.753);   /* 가로: 머리줄(화면 15%) × 제목 높이 75.3% */
  aspect-ratio: auto !important;
  width: max-content !important;
  min-width: min-content !important;
  padding: 0 calc(var(--ready-title-h) * (50 / 122 + 0.12)) !important;
  border-image-width: 40.98% calc(var(--ready-title-h) * 50 / 122) !important;
}
@media screen and (orientation: portrait) {
  html body #stage-ready-screen.screen #ready-stage-title {
    --ready-title-h: var(--ready-header-control-height);
  }
}
/* 세로: 제목 상자 높이는 폰·태블릿 모두 48px(실측)인데 태블릿만 글자가 20.6px 라 점에 붙는다(M3) — 폰 비율(상자 높이의 약 31%)로 */
@media screen and (orientation: portrait) {
  html body #stage-ready-screen.screen #ready-stage-title {
    --ready-title-fs-port: 15px;
    font-size: var(--ready-title-fs-port) !important;
  }
}

/* 스테이지 선택: 화살표는 카드 세로 가운데 · 가로는 카드 2장에 딱 맞는 창 + 양옆 대칭 화살표
   슬라이더는 «카드 한 장 폭»씩 움직이고 끝 위치를 창 폭으로 계산한다(game.js getStageSliderMetrics) → 창 폭만 맞추면 동작 그대로 */
html body #stage-selection-screen.screen .stage-slider-container > .slider-arrow {
  top: 50% !important;
  bottom: auto !important;
  margin: 0 !important;
}
html body #stage-selection-screen.screen .stage-slider-container > #prev-stage { transform: translateY(-50%) !important; }
html body #stage-selection-screen.screen .stage-slider-container > #next-stage { transform: translateY(-50%) !important; }
@media screen and (orientation: landscape) {
  #stage-selection-screen.screen {
    /* 화면 폭 = 좌우 여백 1.53 ×2 + 화살표 6.8 ×2 + 화살표↔카드 0.9 ×2 + 카드 2장 + 카드 사이 1 */
    --sel-gap: 1cqw;
    --sel-ag: 0.9cqw;
    --sel-card: min(98cqh, calc((96.94cqw - 2 * (6.8cqw + var(--sel-ag)) - var(--sel-gap)) / 2));
  }
  html body #stage-selection-screen.screen .stage-card-item {
    flex: 0 0 var(--sel-card) !important;
    width: var(--sel-card) !important;
  }
  html body #stage-selection-screen.screen #stage-cards {
    gap: var(--sel-gap) !important;
    padding: 0 !important;
  }
  html body #stage-selection-screen.screen .stage-cards-wrapper {
    flex: none !important;
    width: calc(2 * var(--sel-card) + var(--sel-gap)) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
  html body #stage-selection-screen.screen .stage-slider-container > #prev-stage {
    left: calc(50% - var(--sel-card) - var(--sel-gap) / 2 - var(--sel-ag)) !important;
    right: auto !important;
    transform: translate(-100%, -50%) !important;
  }
  html body #stage-selection-screen.screen .stage-slider-container > #next-stage {
    left: calc(50% + var(--sel-card) + var(--sel-gap) / 2 + var(--sel-ag)) !important;
    right: auto !important;
    transform: translate(0, -50%) !important;
  }
}

/* 동전이 숫자를 덮지 않게: 숫자는 동전 오른쪽부터 */
#stage-ready-screen.screen .ready-header-status .hud-pill.primary {
  padding-left: calc(var(--ready-point-unit) * 0.0706 + 2px) !important;
}
/* 알약은 숫자 길이만큼 늘어나는데 오른쪽 안쪽 여백이 둥근 끝보다 작다 — 「1,234,567 P」가 끝에 닿음(M2) */
#stage-ready-screen.screen .ready-header-status .hud-pill.primary #ready-point-count {
  margin-right: 0.7em !important;
  margin-left: 0.3em !important;       /* 동전↔숫자: 확대 시트에서 붙어 보임 */
}

/* ===== 태블릿 글자·배치 (2026-10-08 Kay님 승인 시안 — 탭 S10 Lite 실측) =====
   폰(data-form=phone-*)에는 걸리지 않는다 — html[data-form="desktop"] = 짧은 변 500px 초과 또는 마우스 기기.
   !important 는 기존 !important 를 덮는 선언에만(탭에서 떼어 보고 계산값이 바뀌는 것만 남김). */
:root {
  --tablet-hud-fs: 24px;            /* 세로 태블릿 위쪽 알약 글자(알약 높이 비율을 가로 태블릿과 맞춤) */
  --tablet-badge-fs: 16px;          /* 스테이지 카드 꼬리표 */
  --fold-hud-fs: 20px;              /* 폴드 펼침 세로 위쪽 알약 글자(10/13 시안 ③) */
  --fold-menu-fs: 21px;             /* 폴드 펼침 세로 위쪽 메뉴 글자 */
  --fold-menu-active-fs: 22px;
}

/* 위쪽 알약: 도전 횟수 숫자를 «0 P» 숫자와 같은 갈색으로 — 모든 기기 */
#global-top-bar #daily-attempts-display { color: var(--figma-brown) !important; }

@media (min-width: 600px) and (orientation: portrait) {
  html[data-form="desktop"] #global-top-bar .hud-attempts-label,
  html[data-form="desktop"] #global-top-bar #daily-attempts-display,
  html[data-form="desktop"] #global-top-bar .hud-points #point-count { font-size: var(--tablet-hud-fs) !important; }
  html[data-form="desktop"] #global-top-bar .hud-points #point-count::after { font-size: inherit !important; }
  /* 세로 태블릿 뽑기 버튼 글자: 따로 두지 않는다 — 버튼 높이에 묶인 기본값(--fit-roulette-*)이 폴드(틀 375px)·태블릿 모두 맞는다 */

  /* 설정 칸: 칸과 글자를 같은 비율로 키움. 배율은 화면 높이 단계별 — 1.45 를 모든 태블릿에 주면 810×1080·744×1133 에서
     스크롤이 생기고 닉네임이 잘렸다(측정). 단계 값은 크기별로 «스크롤 0 · 잘림 0» 을 잰 최대값 */
  html[data-form="desktop"] #settings-screen .settings-column { --settings-zoom: 1.2; zoom: var(--settings-zoom); min-height: calc(100% / var(--settings-zoom)); }
  /* 위쪽 알약↔제목 간격: 배율과 상관없이 화면 14.5px — 컬렉션 +15px 와 시작 높이가 맞는다 */
  html[data-form="desktop"] #settings-screen .settings-column > .settings-title { margin-top: calc(14.5px / var(--settings-zoom)); }
}
@media (min-width: 600px) and (orientation: portrait) and (min-height: 1020px) {
  html[data-form="desktop"] #settings-screen .settings-column { --settings-zoom: 1.25; }   /* 1.3 은 1024 높이에서 2px 넘침 */
}
@media (min-width: 600px) and (orientation: portrait) and (min-height: 1060px) {
  html[data-form="desktop"] #settings-screen .settings-column { --settings-zoom: 1.35; }
}
@media (min-width: 600px) and (orientation: portrait) and (min-height: 1100px) {
  html[data-form="desktop"] #settings-screen .settings-column { --settings-zoom: 1.4; }
}
@media (min-width: 600px) and (orientation: portrait) and (min-height: 1200px) {
  html[data-form="desktop"] #settings-screen .settings-column { --settings-zoom: 1.45; }
}
@media (min-width: 600px) and (orientation: portrait) {
  /* 컬렉션도 같은 만큼 내려 두 화면 시작 높이를 맞춤(Kay님 결정 (가)) — 목록 아래 끝은 그대로 */
  html[data-form="desktop"] #collection-list-container { top: calc(19.22% + 15px) !important; height: calc(79.1% - 15px) !important; }
}

/* 뽑기 버튼: 가로에서 상자 그림 위에 얹지 않고 상자 아래 가운데로 */
@media (orientation: landscape) and (min-width: 900px) {
  html[data-form="desktop"] #roulette-screen #spin-roulette-btn {
    left: 50% !important;
    right: auto;
    top: auto !important;
    bottom: 4%;
    translate: -50% 0;   /* transform 은 숨쉬기 애니메이션(ctaBreath)이 덮어써서 따로 노는 translate 로 가운데 맞춤 */
  }
}

/* 가로 설정: 두 줄 배치 — 왼쪽 요약·계정, 오른쪽 NFC 목록(카드가 많으면 이 칸 안에서만 스크롤).
   간격·여백은 «다닥다닥» 보정값(10/8) · 칸 안 1.2배라 화면에선 1.2배로 보인다 · 높이 717(S10 Lite 가로)에 딱 맞춤 */
@media (min-width: 900px) and (orientation: landscape) {
  /* 남는 세로 공간이 있으면 설정 묶음을 가운데에(10/26 승인 시안) — 모자라면 margin:auto 가 0 이 돼 위에서부터 스크롤.
     min-height:calc(100%/배율) 은 배율 때문에 높이의 1/배율만 채워 위로 쏠렸다(3072×1560 에서 1306 중 871) */
  html[data-form="desktop"] #settings-screen .settings-scroll { display: flex; flex-direction: column; }
  html[data-form="desktop"] #settings-screen .settings-column {
    zoom: 1.2;
    width: min(100%, 860px);   /* 820 이면 닉네임이 «…» 로 잘림 */
    min-height: 0;
    margin: auto;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title title" "summary sound" "account nfc" "logout logout" "version version";   /* 소리 칸은 오른쪽 위(10/25 승인 시안) */
    grid-template-rows: auto auto auto auto auto;
    column-gap: 28px;
    row-gap: 16px;
    align-content: start;
    padding-top: 14px;          /* 20px 이면 4px 넘쳐 스크롤이 생김 */
  }
  html[data-form="desktop"] #settings-screen .settings-column > .settings-title { grid-area: title; justify-self: center; margin: 0; }
  html[data-form="desktop"] #settings-screen .settings-column > .settings-summary { grid-area: summary; margin: 0; padding: 14px; gap: 12px; }
  html[data-form="desktop"] #settings-screen .settings-column > #settings-sound { grid-area: sound; margin: 0; width: auto; padding: 14px; align-self: stretch; }
  html[data-form="desktop"] #settings-screen .settings-column > .settings-account-card { grid-area: account; margin: 0; padding: 16px 18px; gap: 12px; align-self: start; }
  /* 줄 높이는 왼쪽 칸이 정하고 NFC 는 그만큼만 */
  html[data-form="desktop"] #settings-screen .settings-column > .settings-nfc-card { grid-area: nfc; margin: 0; padding: 16px 18px; gap: 12px; align-self: stretch; height: 0; min-height: 100%; overflow: auto; }
  html[data-form="desktop"] #settings-screen .settings-column > .settings-logout-btn { grid-area: logout; justify-self: center; margin: 0; }
  html[data-form="desktop"] #settings-screen .settings-column > .settings-footer { grid-area: version; justify-self: center; margin: 0; }
}
/* 큰 PC 화면: 화면 높이에 맞춰 설정 전체를 키운다(10/25 승인 시안 A안) — 1280×800·1536×864 는 1.2 그대로 */
/* 제목↔칸·칸↔로그아웃은 칸끼리 간격보다 넓게(10/26 승인 시안) — 880~999 는 1.5배(2배면 1440×900 에서 11px 스크롤), 1000↑ 2배 */
@media (min-width: 1200px) and (min-height: 880px) and (orientation: landscape) {
  html[data-form="desktop"] #settings-screen .settings-column { zoom: 1.3; }
  html[data-form="desktop"] #settings-screen .settings-column > .settings-title { margin-bottom: 8px; }
  html[data-form="desktop"] #settings-screen .settings-column > .settings-logout-btn { margin-top: 8px; }
}
@media (min-width: 1400px) and (min-height: 1000px) and (orientation: landscape) {
  html[data-form="desktop"] #settings-screen .settings-column { zoom: 1.5; }
  html[data-form="desktop"] #settings-screen .settings-column > .settings-title { margin-bottom: 16px; }
  html[data-form="desktop"] #settings-screen .settings-column > .settings-logout-btn { margin-top: 16px; }
}

/* 스테이지 카드 꼬리표 */
@media (min-width: 600px) {
  html[data-form="desktop"] #stage-cards .match-badge { font-size: var(--tablet-badge-fs) !important; padding: 3px 10px !important; }
}

/* 폴드(10/13 Kay님 승인 시안) — 아래 칸 높이는 화면 높이 %, 「?」·시간 칸은 화면 폭을 따라 커져 겹치던 것 */
/* 펼침 세로(690×829 등 정사각에 가까운 세로): 그림을 조금 올려 막대·시간 칸 자리를 만든다 */
@media screen and (orientation: portrait) and (min-aspect-ratio: 4 / 5) {
  /* 막대는 화면 높이 % 대신 「?」 버튼 줄(높이 clamp(48px, 11vw, 68px)) 바로 위에 놓는다 — 실기기 690×702(주소창·앱 줄 제외)에서 % 로는 버튼과 겹쳤다.
     칸 높이 7.6vw = 칸 폭(79.6%) × 막대 그림 비율 82/859 — 칸이 막대 그림보다 낮으면 그림이 아래로 삐져나와 버튼을 덮는다. */
  #game-screen.screen .main-play-area { bottom: calc(1.5% + clamp(48px, 11vw, 68px) + 8px + 7.6vw + 10px) !important; }
  #game-screen.screen .progress-section { bottom: calc(1.5% + clamp(48px, 11vw, 68px) + 8px) !important; height: 7.6vw !important; }
  #game-screen.screen #timer-bubble { width: auto !important; height: 40px !important; }
  /* 10/27 Kay님 폴드 실기기 승인: 막대가 커 보여 80% 로 줄인다(폭 79.54%→63.63% · 높이 7.6vw→6.08vw).
     가운데 높이는 그대로 — 줄어든 높이의 절반(0.76vw)만큼 아래끝을 올린다. 그림 자리(main-play-area)는 건드리지 않는다.
     시간 칸은 막대 아래 4px 를 지킨 채 1.15배 — 기준점 0 0 = translate(-50%) 뒤의 가운데·위끝 */
  html #game-screen.screen .progress-section {
    width: 63.63% !important;
    left: 18.18% !important;
    height: 6.08vw !important;
    bottom: calc(1.5% + clamp(48px, 11vw, 68px) + 8px + 0.76vw) !important;
  }
  html #game-screen.screen #timer-bubble { scale: 1.15 !important; transform-origin: 0 0 !important; }
}
/* 접힘 세로(344×882 등 아주 길쭉한 세로): 시간 칸이 힌트 버튼과 겹치지 않게 칸 높이를 폭 기준으로 묶는다 */
@media screen and (orientation: portrait) and (max-aspect-ratio: 21 / 50) {
  #game-screen.screen .hud-right { height: min(8.6%, 16.5vw) !important; }
}
/* 펼침 가로(829×690 등 정사각에 가까운 가로): 위아래로 빈 공간을 막대 쪽으로 나눠 그림을 조금 내린다(절충안) */
@media screen and (orientation: landscape) and (max-aspect-ratio: 5 / 4) {
  #game-screen.screen .image-wrapper > .canvas-container { translate: 0 9cqh; }
  /* 결과창 — 폴드 펼침 크롬 690×654 등(10/27 Kay님 승인 시안): 「나가기 / 다음 스테이지」 밑으로 진행 막대가 비쳤다.
     높이 600px 이하 가로·정사각 세로 결과창과 같이 뒤의 진행 막대·시간·아이템·음악 버튼을 숨긴다 */
  body:has(#effect-overlay:not(.hidden)) #game-screen .progress-section,
  body:has(#effect-overlay:not(.hidden)) #game-screen .bottom-hud,
  body:has(#effect-overlay:not(.hidden)) #game-screen #find-indicators,
  body:has(#effect-overlay:not(.hidden)) #timer-bubble {
    visibility: hidden !important;
  }
}
/* 뽑기 — 정사각에 가까운 가로(폴드 펼침 크롬 690×654·829×690, 10/27 Kay님 승인 시안): 10/13 규칙(style.css, 높이 600px 이하)
   밖이라 상자가 화면 폭을 넘고 「무료뽑기」가 상자 위에 얹혔다. 상자·버튼을 세로로 쌓아 메뉴 아래 공간 가운데에 둔다.
   폭 900px 이상(5:4 모니터 등)은 「가로 PC」 규칙(상자 아래 가운데)이 맡는다 — 여기 걸면 버튼이 82px 로 작아진다.
   상자 = 남은 높이 − 사이(3vh) − 버튼(82px) − 아래 여백 48px · 버튼 높이 82px = 폰 390×844 버튼과 같은 크기 */
@media screen and (orientation: landscape) and (max-aspect-ratio: 5 / 4) and (min-height: 601px) and (max-width: 899px) {
  html #roulette-screen > div:has(> #spin-roulette-btn) {
    display: flex !important;
    flex-direction: column !important;
    gap: 3vh !important;
    padding-top: clamp(48px, 16vh, 100px) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100dvh !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html #roulette-screen div:has(> #roulette-wheel) {
    margin: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
  }
  html #roulette-screen #roulette-wheel {
    --rw: min(calc(100dvh - clamp(48px, 16vh, 100px) - 3vh - 82px - 48px), 70vw);
    width: var(--rw) !important;
    height: var(--rw) !important;
    max-width: none !important;
    max-height: none !important;
  }
  html #roulette-screen #box-lottie { width: 100% !important; height: 100% !important; }
  html #roulette-screen #spin-roulette-btn {
    position: static !important;
    flex: none !important;
    width: min(40vw, 202px) !important;
    margin: 0 !important;
    transform: none !important;
  }
  /* 게임 시간 막대 — 폴드 펼침 크롬 690×654(10/27 Kay님 승인 시안 「중간안」): 버튼 줄 사이에 끼어 두께 11px 로 작았다.
     막대를 그림과 버튼 줄 사이 한가운데로 올리고(위아래 간격 같게), 시간 칸은 버튼 줄 가운데 높이에 둔다.
     실측(690×654·829×690·700×602·899×720·720×690): 그림 아래끝 ≈ 48.5%H + 17.95vw − 3.3px · 버튼 줄 위끝 = 82%H
     → 막대 가운데 = 둘의 중간, 칸 높이 = 폭 × 막대 그림 비율 82/1039 · 뒤 반투명 타원(그림자)은 막대가 떠나 뺀다 */
  html #game-screen.screen .progress-section {
    top: auto !important;
    bottom: calc(34.75% - 11.1455vw + 1.65px) !important;
    width: 55vw !important;
    max-width: none !important;
    height: calc(55vw * 82 / 1039) !important;
    box-shadow: none !important;
  }
  html #game-screen.screen .progress-container { width: 100% !important; }
  html #game-screen.screen #timer-bubble {
    top: calc(24.75dvh - 6.8045vw + 1.65px) !important; /* 칸 위끝 기준 → 가운데가 버튼 줄 가운데(90%H) */
    transform: translate(-50%, -50%) scale(1.1) !important;
  }
}

/* 메인 화면 넓은 세로(폴드 펼침·태블릿, 10/13 Kay님 승인 시안 ①) — 9:16 틀(#game-container) 안에선 카드가 375px 폭에 갇혀 아래 1/3 이 빈다.
   화면을 틀 밖(position fixed)으로 빼고, 난이도 탭+카드를 한 묶음으로 남은 높이의 세로 가운데에 놓는다.
   --sel-cw = 카드 폭: 화면 폭·760px·(남은 높이 ÷ 묶음 높이 비율 0.791) 중 작은 값. 카드 안 글자는 cqw 로 같은 비율로 커진다.
   폰·폴드 접힘(폭 600px 미만)은 카드가 이미 폭 가득이라 지금 배치 그대로(시안 ② 결정). */
@media screen and (orientation: portrait) and (min-width: 600px) {
  html body #stage-selection-screen.screen {
    position: fixed !important;
    top: var(--portrait-safe-top, 10px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    --sel-gap: clamp(14px, 3.5vw, 32px);
    --sel-cw: min(calc(100vw - 2 * clamp(8px, 2.2vw, 24px)), 760px, calc((100dvh - var(--portrait-safe-top, 10px) - 24.1vw - 3 * var(--sel-gap)) / 0.791));
  }
  html body #stage-selection-screen.screen .stage-main-area {
    left: 50% !important;
    right: auto !important;
    width: calc(var(--sel-cw) / 0.9565) !important;
    translate: -50% 0;
    container-type: inline-size;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sel-gap) !important;
    box-sizing: border-box !important;
    padding: calc(24.1vw + var(--sel-gap)) 0 var(--sel-gap) !important;
  }
  html body #stage-selection-screen.screen .difficulty-tabs {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: none !important;
    /* 탭 묶음 폭 = 카드 폭(2026-11-02 시안 ④ 승인 — 10/13 의 0.965 배는 카드보다 양쪽 13px 좁아 끝선이 어긋났다) */
    width: var(--sel-cw) !important;
    height: calc(var(--sel-cw) / 4.68) !important;
  }
  html body #stage-selection-screen.screen .stage-slider-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: none !important;
    width: var(--sel-cw) !important;
    height: calc(var(--sel-cw) * 604 / 1033) !important;
  }
  html body #stage-selection-screen.screen .stage-card-item { flex: 0 0 var(--sel-cw) !important; width: var(--sel-cw) !important; }
  /* 꼬리표·별·번호: 폰 크기(px) 밑으로는 안 줄고, 카드가 크면 같이 커진다 */
  html body #stage-selection-screen.screen .stage-main-area { --sel-badge-fs: max(11px, 2.82cqw); --sel-num-fs: max(14.82px, 3.8cqw); }
  html body #stage-selection-screen.screen #stage-cards .match-badge { font-size: var(--sel-badge-fs) !important; padding: 0.27em 0.9em !important; }
  html body #stage-selection-screen.screen #stage-cards .stars-overlay { font-size: var(--sel-badge-fs) !important; }
  html body #stage-selection-screen.screen #stage-cards .stars-overlay .star { font-size: var(--sel-badge-fs) !important; width: 1em !important; height: 1em !important; }
  html body #stage-selection-screen.screen #stage-cards .stage-number-badge { width: max(31px, 7.95cqw) !important; height: max(31px, 7.95cqw) !important; font-size: var(--sel-num-fs) !important; }
}

/* 위쪽 줄 글자 — 폴드 펼침 세로(10/13 Kay님 승인 시안 ③). 메뉴 12px · 0P·도전 횟수 24px 로 크기가 어긋나고
   「도전 횟수: 24」가 알약 안쪽 폭을 넘쳤다. 태블릿(744px 이상, 10/8 승인값)은 건드리지 않는다. */
@media (min-width: 600px) and (max-width: 743px) and (orientation: portrait) {
  html[data-form="desktop"] #global-top-bar .hud-attempts-label,
  html[data-form="desktop"] #global-top-bar #daily-attempts-display,
  html[data-form="desktop"] #global-top-bar .hud-points #point-count { font-size: var(--fold-hud-fs) !important; }
  html[data-form="desktop"] #global-top-bar .top-menu .menu-btn { font-size: var(--fold-menu-fs) !important; }
  html[data-form="desktop"] #global-top-bar .top-menu .menu-btn.active { font-size: var(--fold-menu-active-fs) !important; }
}

/* 준비 화면 넓은 세로(폴드 펼침, 10/13 Kay님 승인 시안) — 9:16 틀 안에서 내용이 화면 폭 60%(416/690px)에 갇혀
   시작하기 버튼·위쪽 알약이 메인 화면보다 작아 보였다. 배치는 그대로 두고 화면 전체를 1.25배로 키운다
   (높이는 1/1.25 로 줄여 키운 뒤 틀 높이와 같게). 구름은 틀 밖까지 보이게 자르지 않는다.
   정사각에 가까운 세로(4/5 이상)만 — 태블릿 세로는 내용이 이미 화면 폭의 약 78% 라 그대로. */
@media screen and (orientation: portrait) and (min-width: 600px) and (min-aspect-ratio: 4 / 5) {
  html body #game-container > #stage-ready-screen.screen.screen.screen {
    height: calc(100% / 1.25) !important;
    transform: scale(1.25) !important;
    transform-origin: top center !important;
    overflow: visible !important;
  }
  html body #game-container > #stage-ready-screen.screen.screen.screen > .lottie-clouds { overflow: visible !important; }
  html body #game-container:has(> #stage-ready-screen.screen:not(.hidden)) { overflow: visible !important; }
}

/* 컬렉션·설정 시작 간격 — 폴드 펼침 세로(10/13 Kay님 승인 시안 2차). 둘 다 위쪽 알약 밑으로 18px 들어가 가려졌다.
   알약 아래 38px(태블릿 820×1180 과 같은 값)에서 시작하고, 설정 제목 = 컬렉션 첫 카드 높이(10/6 규칙) 유지.
   24.1vw = 화면 위 ~ 알약 아래 끝(메인 화면과 같은 기준). 설정은 9:16 틀 밖으로 빼 화면 전체 폭을 쓴다. */
@media screen and (orientation: portrait) and (min-width: 600px) and (max-width: 743px) {
  html[data-form] body #collection-screen #collection-list-container {
    top: calc(24.1vw + 38px) !important;
    height: calc(98.32% - 24.1vw - 38px) !important;   /* 목록 아래 끝은 그대로 */
  }
  html body #settings-screen.screen {
    position: fixed !important;
    top: var(--portrait-safe-top, 10px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  /* 스크롤 영역 top + 제목 위 여백 14.5px = 컬렉션 top */
  html body #settings-screen .settings-scroll { top: calc(24.1vw + 23.5px) !important; }
  /* 폭이 넓어지면 안내문이 낱말 중간(「터/치하면」)에서 끊겨 낱말 단위로 줄바꿈 */
  html body #settings-screen #settings-sound-help { word-break: keep-all !important; }
}

/* 결과창 — 정사각에 가까운 세로(폴드 펼침, 10/13 승인 시안): 「다시하기 / 나가기」가 진행 막대 위에 겹쳐
   결과창이 뜨면 뒤의 진행 막대·시간·아이템·음악 버튼을 숨긴다(가로 결과창과 같은 방식). */
@media screen and (orientation: portrait) and (min-aspect-ratio: 4 / 5) {
  body:has(#effect-overlay:not(.hidden)) #game-screen .progress-section,
  body:has(#effect-overlay:not(.hidden)) #game-screen .bottom-hud,
  body:has(#effect-overlay:not(.hidden)) #game-screen #find-indicators,
  body:has(#effect-overlay:not(.hidden)) #timer-bubble {
    visibility: hidden !important;
  }
}

/* 준비 화면 긴 세로(폭/높이 ≤ 9/17 — 일반 폰·폴드 접힘·플립, 10/14 Kay님 승인 시안 ①) — 위쪽 줄 아래와 카드 아래에
   큰 빈칸(접힘 344×706 기준 148/124px)이 남았다. 아이템 2장·시작하기를 아래 가운데 두 줄로 쌓고,
   그림·카드 묶음은 기존 «가운데» 규칙이 그 위 남은 높이 가운데에 놓는다(.ready-content 아래 끝 = 아래 묶음 위 끝 + 14px).
   아래 묶음 높이 = 아이템 줄(46vw, 카드 2장 180:233 · 사이 3.8%) 28.64vw + 사이 5vw + 시작하기(62vw, 502:163) 20.13vw
   짧은 폰 세로(9/16 ~ 3/5 · 폭 600 미만, 10/17 승인 시안 ②)도 같은 배치 — 3/4 까지 넓히면 375×560 에서 그림·카드가 겹친다 */
@media screen and (orientation: portrait) and (max-aspect-ratio: 9 / 17),
  screen and (orientation: portrait) and (min-aspect-ratio: 9 / 16) and (max-aspect-ratio: 3 / 5) and (max-width: 599px) {
  html body #stage-ready-screen.screen > .ready-content {
    top: calc(var(--ready-top-padding) + var(--ready-header-control-height)) !important;   /* 위쪽 줄 아래 끝 */
    bottom: calc(2.6% + 53.8vw + 14px) !important;
  }
  html body #stage-ready-screen.screen > .ready-footer {
    top: auto !important;
    right: auto !important;
    left: 50% !important;
    bottom: 2.6% !important;
    transform: translateX(-50%) !important;
    width: 86vw !important;
    height: auto !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5vw !important;
  }
  html body #stage-ready-screen.screen > .ready-footer > .item-shop-row,
  html body #stage-ready-screen.screen > .ready-footer > .start-action {
    position: relative !important;
    inset: auto !important;
    flex: none !important;
    margin: 0 !important;
    transform: none !important;
    align-self: center !important;
  }
  html body #stage-ready-screen.screen > .ready-footer > .item-shop-row { width: 46vw !important; height: auto !important; aspect-ratio: auto !important; }
  html body #stage-ready-screen.screen > .ready-footer > .start-action { width: 62vw !important; height: auto !important; aspect-ratio: 502 / 163 !important; }
  html body #stage-ready-screen.screen > .ready-footer > .start-action > #start-game-btn { font-size: clamp(16px, 5.4vw, 26px) !important; }
}

/* 설정 낮은 가로(높이 ≤ 420 · 폭 ≥ 700 — 폴드 접힘 가로 803×296 등, 10/14 Kay님 승인 시안 ②) — 한 줄로 쌓여 스크롤 800px.
   두 칸(소리|계정 · 요약|NFC)으로 나누고 같은 줄 두 칸 높이를 맞춘다. 높이 ≤ 420 이라 태블릿 가로 두 칸 규칙(위)과 겹치지 않는다 */
@media (orientation: landscape) and (max-height: 420px) and (min-width: 700px) {
  html body #settings-screen .settings-column {
    width: min(100%, 820px);
    padding-left: 16px;
    padding-right: 16px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas: "title title" "sound account" "summary nfc" "logout logout" "version version";
    column-gap: 18px;
    row-gap: 14px;
    align-content: start;
    align-items: stretch;
  }
  html body #settings-screen .settings-column > .settings-title { grid-area: title; justify-self: center; }
  html body #settings-screen .settings-column > #settings-sound { grid-area: sound; margin: 0; width: auto; }
  html body #settings-screen .settings-column > .settings-summary { grid-area: summary; margin: 0; width: auto; }
  html body #settings-screen .settings-column > .settings-summary > .settings-stat { justify-content: center; }
  html body #settings-screen .settings-column > .settings-account-card { grid-area: account; margin: 0; width: auto; }
  html body #settings-screen .settings-column > .settings-nfc-card { grid-area: nfc; margin: 0; width: auto; }
  html body #settings-screen .settings-column > .settings-logout-btn { grid-area: logout; justify-self: center; margin: 0; }
  html body #settings-screen .settings-column > .settings-footer { grid-area: version; justify-self: center; margin: 0; }
}

/* 내가방 안내 문구 — 폴드 펼침 세로(10/14 Kay님 승인 시안 ①). 9:16 틀 안 19.69% 자리가 전체 폭 알약(아래 끝 = 24.1vw) 뒤에 깔렸다.
   알약 아래 14px 로 내리고 보상 목록은 그 아래 14px 에서 시작한다(목록 아래 끝 96.91% 는 그대로). */
@media screen and (orientation: portrait) and (min-width: 600px) and (max-width: 743px) {
  html body #inventory-screen::before { top: calc(24.1vw + 14px) !important; }
  html body #inventory-screen #reward-list.inventory-grid {
    top: calc(24.1vw + 28px + 3.8%) !important;
    height: calc(96.91% - 24.1vw - 28px - 3.8%) !important;
  }
}

/* 폰 세로(폭 600px 미만, 10/26 Kay님 승인) — 내가방은 알약 → 안내 문구 80px · 문구 → 첫 카드 25px 로 위가 비었다(플립 실측).
   보상이 있을 때만 둘 다 24px 로 맞춘다(목록 아래 끝 96.91% 는 그대로, 빈 화면은 위의 가운데 묶음 규칙).
   설정은 「오늘 남은 도전」 상자가 소리 상자에 붙어(0px) 위에 10px 를 둔다. */
@media screen and (orientation: portrait) and (max-width: 599px) {
  html body #inventory-screen:not(:has(#reward-list > .empty-msg))::before { top: calc(24.1vw + 24px) !important; }
  html body #inventory-screen #reward-list.inventory-grid:not(:has(> .empty-msg)) {
    top: calc(24.1vw + 48px + 3.8%) !important;
    height: calc(96.91% - 24.1vw - 48px - 3.8%) !important;
  }
  html body #settings-screen .settings-summary { margin-top: 10px; }
}

/* 탭 세로(폭 744px 이상, 10/26 Kay님 승인 시안 B안) — 내가방은 알약 → 안내 문구 63px · 문구 → 첫 카드 41px(갤럭시 탭 880×1408),
   아이패드 768×1024 는 10/29px 로 들쭉날쭉했다. 폰 비율(간격 24 ÷ 문구 높이 32)대로 문구 높이 3.8% × 0.75 = 2.85% 를 위아래에 둔다.
   설정은 폰과 같은 10px(탭 설정 배율로 14px, 아래 상자 사이와 같음). 폴드 펼침(600~743)은 위 14px 규칙 그대로. */
@media screen and (orientation: portrait) and (min-width: 744px) {
  html body #inventory-screen:not(:has(#reward-list > .empty-msg))::before { top: calc(24.1vw + 2.85%) !important; }
  html body #inventory-screen #reward-list.inventory-grid:not(:has(> .empty-msg)) {
    top: calc(24.1vw + 9.5%) !important;
    height: calc(96.91% - 24.1vw - 9.5%) !important;
  }
  html body #settings-screen .settings-summary { margin-top: 10px; }
}

/* 내가방 빈 화면(전 기기, 10/14 Kay님 승인 — 두 문구 함께 가운데). 안내 문구 + 「보상이 비어 있습니다.」를 한 묶음(사이 14px)으로
   화면 세로 가운데에 둔다. 안내 그림은 화면 ::before 대신 목록 ::before 로 옮기고, 크기는 원래 규칙과 같은 값
   (폭 = 화면 폭 기준 cqw · 높이 = 화면 높이 %, 목록이 화면 높이 전체라 같다)으로 9개 크기에서 px 까지 일치 확인. */
html body #inventory-screen:has(#reward-list > .empty-msg)::before { content: none !important; }
html body #inventory-screen #reward-list.inventory-grid:has(> .empty-msg) {
  top: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
}
html body #inventory-screen #reward-list.inventory-grid:has(> .empty-msg)::before {
  content: "";
  display: block;
  flex: none;
  width: 40.7cqw;
  height: 8.25%;
  background: url("assets/resources/figma-v2/imgLogoMyBag1.png") center / contain no-repeat;
}
html body #inventory-screen #reward-list.inventory-grid > .empty-msg { flex: none; width: 100%; }
/* 아주 넓은 PC 창(3072×1503, 10/16 Kay님 승인)에서 안내 그림(약 1,050px)이 목록(893px)·감싼 상자(max-width 1000px,
   인라인 overflow-y:auto)에 양끝이 잘렸다. 빈 화면일 때만 둘 다 자르지 않게 한다 — 그림 크기는 그대로.
   (목록의 원래 overflow:hidden 은 이 규칙으로 대신했다. 감싼 상자는 인라인 스타일이라 !important 가 있어야 이긴다.) */
html body #inventory-screen div:has(> #reward-list > .empty-msg),
html body #inventory-screen #reward-list.inventory-grid:has(> .empty-msg) { overflow: visible !important; }
@media screen and (orientation: portrait) {
  html body #inventory-screen #reward-list.inventory-grid:has(> .empty-msg)::before { width: 59.35cqw; height: 3.8%; }
}

/* 메인 화면 좁은 세로(폭 600px 미만 — 폰·폴드 접힘, 10/14 Kay님 승인 시안 ②) — 난이도 탭+카드가 알약 바로 아래에 붙어
   아래 절반이 비었다(접힘 344×706: 위 81px · 아래 244px). 묶음을 알약 아래 남은 높이의 세로 가운데로 내린다(위 162 · 아래 163px).
   알약 아래 끝 = 안전 여백 + 24.1vw(위쪽 줄은 화면 폭 기준), 묶음 = 화면 높이 H(100dvh − 안전 여백)의 23.6% ~ 64.95%.
   이동 = (알약 아래 끝 + 화면 아래 끝)/2 − 묶음 가운데 = 12.05vw + (0.5 − 0.44275)·H. */
@media screen and (orientation: portrait) and (max-width: 599px) {
  html body #stage-selection-screen.screen .difficulty-tabs,
  html body #stage-selection-screen.screen .stage-slider-container {
    translate: 0 calc(12.05vw + 0.05725 * (100dvh - var(--portrait-safe-top, 10px)));
  }
}

/* 컬렉션 「교환하기」 — 낮은 가로(높이 ≤ 420, 폴드 접힘 802×296 등, 10/14 Kay님 승인 시안 ③). clamp 바닥 10px 이라 작았다.
   카드 제목(「20% 할인권」 16px)과 같은 크기로. 버튼 크기·위치는 그대로. */
@media (orientation: landscape) and (max-height: 420px) {
  html body #collection-screen #collection-list-container .collection-card .combine-btn { font-size: 16px !important; }
}

/* PC 반응형 (10/28 Kay님 승인 시안 ②~⑥ · ①은 player-collections.css) */
/* ② 스테이지 카드 위 표시(찾기 개수·별·번호) — 큰 화면에서 카드 크기에 맞춰 키운다 */
@media screen and (orientation: landscape) and (min-width: 1900px) {
  .stage-card .match-badge,
  .stage-card .stars-overlay,
  .stage-card .stage-number-badge { zoom: 1.25; }
}

@media screen and (orientation: landscape) and (min-width: 2300px) {
  .stage-card .match-badge,
  .stage-card .stars-overlay,
  .stage-card .stage-number-badge { zoom: 1.6; }
}

/* ③ 첫 화면 약관 링크 — 12px 고정 대신 아래 버전·저작권 줄처럼 화면 폭을 따라 12~17px */
#splash-screen #splash-legal {
  --splash-legal-fs: clamp(12px, 0.9cqw, 17px);

  font-size: var(--splash-legal-fs);
}

/* ④ 반 분할 창(960×947 등) — 메뉴 줄 끝(「내가방」)이 포인트 칸 밑으로 파고들지 않게, 포인트 칸 왼쪽 끝에서 24px 떼어 끝낸다.
   포인트 칸 왼쪽 끝 = 줄 폭의 63.6%(100% − 칸 폭 36.4%) − 톱니 칸 − 12px (player-collections.css 가로 규칙) */
@media screen and (orientation: landscape) and (max-width: 1100px) and (min-height: 601px) {
  #global-top-bar {
    --land-top-menu-width: calc(63.6% - var(--navigation-control-size) - 12px - 24px);
  }
}

/* ⑤ 반 분할 창 아이템 구매 버튼 가격 — 카드 높이 비율로 10px 까지 작아지던 것을 13px 아래로는 안 줄인다 */
@media screen and (orientation: landscape) and (max-width: 1100px) and (min-height: 601px) {
  #stage-ready-screen.screen {
    --fit-buy-price-fs: clamp(13px, 8.95cqh, 28px);
  }
}

/* ⑥ 낮은 창 설정 — 아래 끝을 흐리게 해 «더 내리면 있다»를 보여 준다.
   같은 높이만큼 아래 여백을 둬 끝까지 내리면 마지막 링크가 흐림 위로 올라온다 */
@media screen and (orientation: landscape) and (max-height: 760px) {
  #settings-screen .settings-scroll {
    --settings-scroll-fade-space: 48px;
    --settings-scroll-fade: linear-gradient(#000 calc(100% - var(--settings-scroll-fade-space)), transparent);

    padding-bottom: var(--settings-scroll-fade-space);
    -webkit-mask-image: var(--settings-scroll-fade);
    mask-image: var(--settings-scroll-fade);
  }
}

/* ② 큰 PC 화면 닉네임·멈춤 안내창 — 360px 고정이라 2560 에서 화면 14% 였다. 업적·책장 확대와 같은 단계로 키운다 (10/29 승인) */
@media screen and (orientation: landscape) and (min-width: 1600px) {
  #withdraw-modal .nickname-card,
  #nickname-modal .nickname-card,
  #stall-modal .nickname-card {
    zoom: 1.25;
  }
}

@media screen and (orientation: landscape) and (min-width: 1900px) {
  #withdraw-modal .nickname-card,
  #nickname-modal .nickname-card,
  #stall-modal .nickname-card {
    zoom: 1.4;
  }
}

/* 1.4 에서 멈춰 2560·3072 에서 화면 폭 16~20% 로 작았다 — 단계를 이어 22% 대로 (2026-10-29 승인) */
@media screen and (orientation: landscape) and (min-width: 2300px) {
  #withdraw-modal .nickname-card,
  #nickname-modal .nickname-card,
  #stall-modal .nickname-card {
    zoom: 1.6;
  }
}

@media screen and (orientation: landscape) and (min-width: 2800px) {
  #withdraw-modal .nickname-card,
  #nickname-modal .nickname-card,
  #stall-modal .nickname-card {
    zoom: 1.9;
  }
}

/* 넓은 가로 화면: 선택 안 된 메뉴 버튼의 아래 끝을 선택된 버튼 아래 끝에 맞춘다 (2026-11-02 승인 시안 ②) */
/* stylelint-disable declaration-no-important -- 위쪽 margin-top: 2.95% !important 를 덮어야 한다 */
@media (orientation: landscape) and (min-aspect-ratio: 17 / 10) {
  #global-top-bar .top-menu .menu-btn:not(.active) { align-self: flex-end !important; margin-top: 0 !important; }
}
/* stylelint-enable declaration-no-important */

/* 높이 312 이하 가로(폴드 접힘 가로 802×296 등): style.css 의 카드 칸 145px 상한이 카드 아래를 잘랐다.
   상한만 풀고 카드 크기는 그대로 (2026-11-02 승인 시안 ⓑ) */
/* stylelint-disable declaration-no-important -- style.css 의 max-height: 145px !important 를 덮어야 한다 */
@media screen and (orientation: landscape) and (max-height: 312px) {
  #stage-selection-screen .stage-slider-container { max-height: none !important; }
}
/* stylelint-enable declaration-no-important */