@font-face {
  font-family: "Tmoney RoundWind";
  src: 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.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;
  --figma-bg-landscape: url("assets/resources/figma-v2/imgBgMorningHorizontal1.png");
  --figma-bg-portrait: url("assets/resources/figma-v2/imgBgMorning.png");
}

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);
}

button:focus-visible {
  outline: 4px solid rgba(255, 155, 57, 0.9) !important;
  outline-offset: 3px;
}

#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;
  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;
  top: 48.52% !important;
  left: 50% !important;
  width: 29.2% !important;
  height: 10.47% !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;
}

#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;
}

#splash-screen #btn-login-test {
  position: absolute !important;
  z-index: 3;
  top: 62.87% !important;
  left: 50% !important;
  width: 19.53% !important;
  height: auto !important;
  aspect-ratio: 375 / 119 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  background: url("assets/resources/figma-v2/imgBtnTestLogin001.png") center / contain no-repeat !important;
  color: var(--figma-brown) !important;
  font-size: clamp(14px, 1.75cqw, 34px) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#splash-screen #guest-login-container {
  position: absolute !important;
  z-index: 3;
  top: 75.5% !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;
  top: 76.76% !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;
}

/* 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 {
  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 > div:first-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

#roulette-screen > div:first-child > div:first-child {
  position: absolute !important;
  top: 33.9% !important;
  left: 14.01% !important;
  width: 39.69% !important;
  height: 48.15% !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;
}

#roulette-screen #spin-roulette-btn {
  position: absolute !important;
  top: 46.49% !important;
  left: 55.83% !important;
  width: 22.4% !important;
  height: 16.2% !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;
}

#roulette-screen #spin-roulette-btn > .roulette-price-icon,
#roulette-screen #spin-roulette-btn > .roulette-price-unit {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: fill !important;
  pointer-events: none !important;
}

#roulette-screen #spin-roulette-btn > .roulette-price-icon {
  top: 30.66% !important;
  left: 22.03% !important;
  width: 15.21% !important;
  height: 38.69% !important;
}

#roulette-screen #spin-roulette-btn > .roulette-price-value {
  position: absolute !important;
  top: 28% !important;
  left: 39.95% !important;
  width: 24.88% !important;
  height: 40.02% !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: clamp(18px, 2.8cqw, 54px) !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 {
  top: 34.82% !important;
  left: 67.55% !important;
  width: 10.41% !important;
  height: 30.36% !important;
}

#roulette-screen #spin-roulette-btn.is-free {
  padding: 0 8% !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-remaining {
  font-size: 0.68em !important;
  white-space: nowrap !important;
}

/* 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: 22% !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;
}

#inventory-screen > div:first-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#inventory-screen > div:first-child > p {
  display: none !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: 43.3% !important;
  gap: 4.5% 2.45% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#inventory-screen .inventory-item {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 7% 6% 7% 25% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("assets/resources/figma-v2/imgFrReward1.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--figma-brown) !important;
}

#inventory-screen .inventory-item .icon {
  position: absolute !important;
  left: 5% !important;
  top: 15% !important;
  width: 17% !important;
  height: 70% !important;
  margin: 0 !important;
}

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

#inventory-screen .inventory-item .name {
  color: var(--figma-brown) !important;
  font-size: clamp(16px, 2.08cqw, 40px) !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;
}

/* Settings */
#settings-screen {
  padding: 0 !important;
}

#settings-screen .settings-title {
  position: absolute !important;
  z-index: 4;
  top: 20.1% !important;
  left: 22.18% !important;
  width: 32.24% !important;
  height: 11.94% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: url("assets/resources/figma-v2/imgFrSettingNfc2.png") center / 100% 100% no-repeat !important;
  color: var(--figma-brown) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(18px, 1.8cqw, 35px) !important;
  font-weight: 800 !important;
}

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

#settings-screen .settings-account-card {
  position: absolute !important;
  top: 32.59% !important;
  left: 13.23% !important;
  width: 50.21% !important;
  height: 25.56% !important;
  margin: 0 !important;
  padding: 8.2% 5.7% 4% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrAccountInfo2.png") center / 100% 100% no-repeat !important;
  color: #10344a !important;
}

#settings-screen .settings-account-card h3 {
  position: absolute !important;
  top: 15.9% !important;
  left: 14.5% !important;
  margin: 0 !important;
  color: var(--figma-brown) !important;
  font-size: clamp(17px, 1.67cqw, 32px) !important;
}

#settings-screen .settings-account-card h3::before {
  content: "";
  position: absolute;
  right: calc(100% + 10%);
  top: 50%;
  width: 2em;
  height: 2em;
  transform: translateY(-50%);
  background: url("assets/resources/figma-v2/imgIconAccount1.png") center / contain no-repeat;
}

#settings-screen .settings-account-card p {
  margin: 0.45em 0 !important;
  color: #10344a !important;
  font-size: clamp(13px, 1.35cqw, 26px) !important;
  font-weight: 800 !important;
}

#settings-screen .settings-account-card p::before {
  content: "";
  display: inline-block;
  width: 0.58em;
  height: 0.58em;
  margin-right: 0.45em;
  background: url("assets/resources/figma-v2/imgIconDot1.png") center / contain no-repeat;
}

#settings-screen .settings-nfc-card {
  position: absolute !important;
  top: 58.89% !important;
  left: 9.48% !important;
  width: 57.76% !important;
  height: 37.87% !important;
  margin: 0 !important;
  padding: 13.5% 5.5% 4% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrNfc2.png") center / 100% 100% no-repeat !important;
  color: #10344a !important;
  overflow: hidden !important;
}

#settings-screen .settings-nfc-card > div:first-child {
  position: absolute !important;
  top: 14.8% !important;
  left: 15.3% !important;
  margin: 0 !important;
}

#settings-screen .settings-nfc-card h3 {
  color: var(--figma-brown) !important;
  font-size: clamp(20px, 2.02cqw, 39px) !important;
  font-weight: 800 !important;
}

#settings-screen .settings-nfc-card h3::before {
  content: "";
  position: absolute;
  right: calc(100% + 8%);
  top: 50%;
  width: 1.7em;
  height: 1.35em;
  transform: translateY(-50%);
  background: url("assets/resources/figma-v2/imgIconNfc1.png") center / contain no-repeat;
}

#settings-screen #nfc-list {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 3.2% 4.3% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrNfcWhite2.png") center / 100% 100% no-repeat !important;
  overflow-y: auto !important;
}

#settings-screen #nfc-list li {
  border: 0 !important;
  color: #10344a !important;
  font-size: clamp(12px, 1.28cqw, 25px) !important;
  font-weight: 800 !important;
}

#settings-screen #btn-logout {
  position: absolute !important;
  right: 2.45% !important;
  bottom: 5% !important;
  width: 20.68% !important;
  height: 11.76% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgBtnLogOut1.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: clamp(19px, 2.22cqw, 43px) !important;
  font-weight: 800 !important;
}

/* 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);
  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: 0 22px 55px rgba(16, 52, 74, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#reward-modal.collection-result .modal-card {
  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: 40.8% !important;
  margin: 0 !important;
  padding: 8% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrRewardItem1.png") center / 100% 100% 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: 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 #reward-close-btn {
  position: absolute !important;
  top: 73.3% !important;
  left: 29.9% !important;
  width: 40.3% !important;
  height: 14% !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 / 100% 100% 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;
  height: 14.68% !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;
  height: 42.6% !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;
    height: 5.89% !important;
  }

  #splash-screen #btn-login-test {
    top: 59.17% !important;
    width: 34.72% !important;
    height: auto !important;
    font-size: clamp(14px, 3cqw, 32px) !important;
  }

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

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

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

  #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 > div:first-child > div:first-child {
    top: 31.04% !important;
    left: 10.56% !important;
    width: 70.56% !important;
    height: 27.08% !important;
  }

  #roulette-screen #spin-roulette-btn {
    top: 68.49% !important;
    left: 30.83% !important;
    width: 38.24% !important;
    height: 8.75% !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;
    grid-auto-rows: calc(var(--figma-frame-height) * 0.1354) !important;
    gap: 2.35% !important;
  }

  #inventory-screen .inventory-item .name {
    font-size: clamp(15px, 3.7cqw, 40px) !important;
  }

  #settings-screen .settings-title {
    top: 28.33% !important;
    left: 21.3% !important;
    width: 57.31% !important;
    height: 6.72% !important;
    font-size: clamp(17px, 3.2cqw, 35px) !important;
  }

  #settings-screen .settings-account-card {
    top: 36.35% !important;
    left: 8.15% !important;
    width: 83.7% !important;
    height: 14.38% !important;
    padding: 7.2% 10.8% 3% !important;
  }

  #settings-screen .settings-account-card h3 {
    font-size: clamp(16px, 2.95cqw, 32px) !important;
  }

  #settings-screen .settings-account-card p {
    font-size: clamp(12px, 2.4cqw, 26px) !important;
  }

  #settings-screen .settings-nfc-card {
    top: 52.55% !important;
    left: 5.1% !important;
    width: 89.72% !important;
    height: 21.3% !important;
    padding: 13.5% 6% 4% !important;
  }

  #settings-screen .settings-nfc-card h3 {
    font-size: clamp(18px, 3.6cqw, 39px) !important;
  }

  #settings-screen #nfc-list li {
    font-size: clamp(11px, 2.3cqw, 25px) !important;
  }

  #settings-screen #btn-logout {
    right: auto !important;
    left: 31.57% !important;
    bottom: 17.71% !important;
    width: 36.76% !important;
    height: 6.61% !important;
    font-size: clamp(18px, 4cqw, 43px) !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: scale(2) !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: scale(1.45) !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 57.62% !important;
    width: 57.62% !important;
    max-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;
  }
}

@media screen and (max-height: 520px) and (orientation: landscape) {
  #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: none !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;
}

@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;
  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. */
@media screen and (orientation: portrait) and (max-aspect-ratio: 9 / 16) {
  :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));
  }
}

/* Settings card internals follow Figma coordinates instead of percentage padding. */
#settings-screen .settings-account-card {
  padding: 0 !important;
  overflow: hidden !important;
}

#settings-screen .settings-account-card h3 {
  line-height: calc(var(--settings-scale-base) * 0.03855) !important;
}

#settings-screen .settings-account-card h3::before {
  right: calc(100% + var(--settings-account-icon-gap)) !important;
  width: calc(var(--settings-scale-base) * 0.05926) !important;
  height: calc(var(--settings-scale-base) * 0.05926) !important;
}

#settings-screen .settings-account-card p {
  position: absolute !important;
  width: 86% !important;
  margin: 0 !important;
  font-size: calc(var(--settings-scale-base) * 0.02399) !important;
  line-height: calc(var(--settings-scale-base) * 0.03121) !important;
  white-space: nowrap !important;
}

#settings-screen .settings-account-card p::before {
  width: calc(var(--settings-scale-base) * 0.01389) !important;
  height: calc(var(--settings-scale-base) * 0.01389) !important;
  margin-right: calc(var(--settings-scale-base) * 0.00926) !important;
}

#settings-screen #setting-acc-id {
  color: inherit !important;
  font-size: inherit !important;
}

#settings-screen .settings-nfc-card {
  padding: 0 !important;
}

#settings-screen .settings-nfc-card > div:first-child {
  width: auto !important;
  margin: 0 !important;
}

#settings-screen .settings-nfc-card h3 {
  margin: 0 !important;
  font-size: calc(var(--settings-scale-base) * 0.03598) !important;
  line-height: calc(var(--settings-scale-base) * 0.04681) !important;
}

#settings-screen .settings-nfc-card h3::before {
  right: calc(100% + var(--settings-nfc-icon-gap)) !important;
  width: calc(var(--settings-scale-base) * 0.05926) !important;
  height: calc(var(--settings-scale-base) * 0.04722) !important;
}

#settings-screen #nfc-list {
  position: absolute !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/resources/figma-v2/imgFrNfcWhite2.png") center / 100% 100% no-repeat !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

#settings-screen #nfc-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#settings-screen #nfc-list li {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-family: "Tmoney RoundWind", "Pretendard Variable", Pretendard, sans-serif !important;
}

#settings-screen #nfc-list .settings-nfc-empty {
  width: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #9babb6 !important;
  font-size: calc(var(--settings-scale-base) * 0.02222) !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

#settings-screen #nfc-list .settings-nfc-item {
  width: 100% !important;
  min-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  gap: calc(var(--settings-scale-base) * 0.005) !important;
  color: #10344a !important;
}

#settings-screen #nfc-list .settings-nfc-item + .settings-nfc-item {
  margin-top: calc(var(--settings-scale-base) * 0.018) !important;
  padding-top: calc(var(--settings-scale-base) * 0.018) !important;
  border-top: 1px solid rgba(155, 171, 182, 0.35) !important;
}

#settings-screen .settings-nfc-primary,
#settings-screen .settings-nfc-secondary,
#settings-screen .settings-nfc-benefits {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: calc(var(--settings-scale-base) * 0.018) !important;
  white-space: nowrap !important;
}

#settings-screen .settings-nfc-product,
#settings-screen .settings-nfc-code {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#settings-screen .settings-nfc-product,
#settings-screen .settings-nfc-status {
  font-size: calc(var(--settings-scale-base) * 0.02951) !important;
  font-weight: 800 !important;
  line-height: calc(var(--settings-scale-base) * 0.03839) !important;
}

#settings-screen .settings-nfc-status {
  flex: 0 0 auto !important;
  color: #0a8f19 !important;
}

#settings-screen .settings-nfc-secondary {
  color: #9babb6 !important;
  font-size: calc(var(--settings-scale-base) * 0.02222) !important;
  line-height: calc(var(--settings-scale-base) * 0.02891) !important;
}

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

#settings-screen .settings-nfc-benefits {
  justify-content: flex-start !important;
  color: #586b78 !important;
  font-size: calc(var(--settings-scale-base) * 0.0185) !important;
  line-height: 1.2 !important;
}

#settings-screen .settings-nfc-benefits strong {
  color: var(--figma-brown) !important;
}

@media screen and (orientation: landscape) {
  #settings-screen {
    --settings-scale-base: var(--figma-frame-height);
    --settings-account-icon-gap: calc(var(--figma-frame-height) * 0.01389);
    --settings-nfc-icon-gap: calc(var(--figma-frame-height) * 0.01389);
  }

  #settings-screen .settings-title {
    font-size: calc(var(--settings-scale-base) * 0.03198) !important;
    line-height: calc(var(--settings-scale-base) * 0.04161) !important;
  }

  #settings-screen .settings-account-card h3 {
    top: 19.93% !important;
    left: 14.52% !important;
    font-size: calc(var(--settings-scale-base) * 0.02963) !important;
  }

  #settings-screen .settings-account-card p {
    left: 8.92% !important;
  }

  #settings-screen .settings-account-card p:first-of-type {
    top: 52.54% !important;
  }

  #settings-screen .settings-account-card p:nth-of-type(2) {
    top: 71.38% !important;
  }

  #settings-screen .settings-nfc-card > div:first-child {
    top: 15.4% !important;
    left: 15.33% !important;
  }

  #settings-screen #nfc-list {
    top: 35.45% !important;
    left: 5.68% !important;
    width: 88.73% !important;
    height: 52.57% !important;
    padding: calc(var(--settings-scale-base) * 0.025) calc(var(--settings-scale-base) * 0.03889) !important;
  }

  #settings-screen #btn-logout {
    font-size: calc(var(--settings-scale-base) * 0.03957) !important;
    line-height: calc(var(--settings-scale-base) * 0.05148) !important;
  }
}

@media screen and (orientation: portrait) {
  #settings-screen {
    --settings-scale-base: var(--figma-frame-width);
    --settings-account-icon-gap: calc(var(--figma-frame-width) * 0.01389);
    --settings-nfc-icon-gap: calc(var(--figma-frame-width) * 0.01296);
  }

  #settings-screen .settings-title {
    font-size: calc(var(--settings-scale-base) * 0.03198) !important;
    line-height: calc(var(--settings-scale-base) * 0.04161) !important;
  }

  #settings-screen .settings-account-card h3 {
    top: 20.29% !important;
    left: 16.26% !important;
    font-size: calc(var(--settings-scale-base) * 0.02963) !important;
  }

  #settings-screen .settings-account-card p {
    left: 10.18% !important;
  }

  #settings-screen .settings-account-card p:first-of-type {
    top: 52.9% !important;
  }

  #settings-screen .settings-account-card p:nth-of-type(2) {
    top: 71.74% !important;
  }

  #settings-screen .settings-nfc-card > div:first-child {
    top: 15.4% !important;
    left: 17.03% !important;
  }

  #settings-screen #nfc-list {
    top: 35.7% !important;
    left: 6.5% !important;
    width: 87.1% !important;
    height: 52.57% !important;
    padding: calc(var(--settings-scale-base) * 0.025) calc(var(--settings-scale-base) * 0.03426) !important;
  }

  #settings-screen #btn-logout {
    font-size: calc(var(--settings-scale-base) * 0.03957) !important;
    line-height: calc(var(--settings-scale-base) * 0.05148) !important;
  }
}

/* Lottie cloud proof-of-concept. Screen art remains the load/error fallback. */
#lottie-cloud-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  contain: strict;
}

#game-container.lottie-cloud-ready {
  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-container.lottie-cloud-ready #lottie-cloud-layer {
  opacity: 0.82;
}

#game-container.lottie-cloud-ready .screen {
  background-color: transparent !important;
  background-image: none !important;
}

/* 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 {
  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;
  box-shadow: 0 22px 55px rgba(16, 52, 74, 0.35) !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: 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;
  top: 20% !important;
  left: 10% !important;
  width: 80% !important;
  height: 39% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 6% !important;
}

#inventory-reward-modal .inventory-reward-icon-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 !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-code-panel {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
  padding: 15% 9% 10% !important;
  border: max(3px, 0.2cqw) solid #c7ad9e !important;
  border-radius: 9% !important;
  background: #f5e7de !important;
  box-shadow: inset 0 0 0 max(2px, 0.1cqw) #fff, 0 max(3px, 0.25cqw) 0 #ad9282 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

#inventory-reward-modal .inventory-reward-code-kind {
  position: absolute !important;
  top: 5% !important;
  left: 8% !important;
  width: 84% !important;
  color: #6c4d42 !important;
  font-family: var(--figma-font) !important;
  font-size: clamp(8px, 0.72cqw, 14px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-align: center !important;
}

#inventory-reward-modal #inventory-reward-code {
  width: min(86%, 18cqh) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  image-rendering: pixelated;
}

#inventory-reward-modal .inventory-reward-code-panel.is-barcode #inventory-reward-code {
  width: 94% !important;
  aspect-ratio: 2.5 / 1 !important;
}

#inventory-reward-modal .inventory-reward-code-label {
  position: absolute !important;
  bottom: 5% !important;
  left: 5% !important;
  width: 90% !important;
  overflow: hidden !important;
  color: #6c4d42 !important;
  font-family: var(--figma-font) !important;
  font-size: clamp(7px, 0.62cqw, 12px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#inventory-reward-modal .inventory-reward-name {
  position: absolute !important;
  top: 61.5% !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: 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;
  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 {
    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,
#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.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 .effect-actions .res-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !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(17px, 2.6vmin, 24px) !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;
}

#effect-overlay .effect-actions .res-btn:disabled {
  border-image-source: 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;
  }
}

#game-container.lottie-cloud-ready .screen:not(#splash-screen) {
  z-index: 2;
}

#lottie-cloud-1 {
  position: absolute;
  top: -8%;
  left: -2%;
  width: 34%;
  aspect-ratio: 1;
}

#lottie-cloud-1 svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

@media screen and (orientation: portrait) {
  #game-container.lottie-cloud-ready {
    background-image: var(--figma-bg-portrait) !important;
  }

  #lottie-cloud-1 {
    top: 0;
    left: -5%;
    width: 82%;
  }
}

/* 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;
  background: url("assets/resources/figma-v2/imgIconGold001.png") center / contain no-repeat !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;
  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;
  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;
}

#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: translateX(-50%) !important;
  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: -8.4% !important;
  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;
}

#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: clamp(11px, 1.45vw, 28px) !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 .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: -5.58% !important;
    font-size: clamp(13px, 2.57vw, 28px) !important;
  }

  #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-footer > .item-shop-row > .buy-item-card .buy-btn {
    font-size: clamp(10px, 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.lottie-cloud-ready,
#game-container .screen,
#game-container.lottie-cloud-ready .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;
  }

  #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 {
    font-size: clamp(9px, 1.3cqw, 18px) !important;
    text-align: center !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 0 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;
  }

  #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;
  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;
}

@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;
  }
}

/* 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;
  }
}

/* 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;
}