/* Stretch only the middle cells of painted UI frames (3 x 3).
   Border-image widths are lengths independent of the layout border: content
   positions, scroll areas and hit targets therefore remain unchanged.
   Art containing icons or labels stays proportional instead of being sliced. */
:root {
  --ui-art-pixel: min(calc(var(--figma-frame-width) / 1920), calc(var(--figma-frame-height) / 1080));
}
@media (orientation: portrait) {
  :root { --ui-art-pixel: min(calc(var(--figma-frame-width) / 1080), calc(var(--figma-frame-height) / 1920)); }
}

body :is(#splash-screen #start-btn) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgObStartMessage001.png") !important;
  border-image-slice: 32 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 32) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#global-top-bar .menu-btn:not(.active)) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgObMainMenuUnselected.png") !important;
  border-image-slice: 40 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 40) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#global-top-bar .hud-pill) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgFrSource.png") !important;
  border-image-slice: 40 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 40) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#stage-selection-screen .diff-tab.active) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgObDifficultySelected.png") !important;
  border-image-slice: 45 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 45) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#stage-selection-screen .stage-card) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgFrMapSelect.png") !important;
  border-image-slice: 40 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 40) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#stage-ready-screen #ready-stage-title) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgFrStageNumber1.png") !important;
  border-image-slice: 50 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 50) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#stage-ready-screen.screen > .ready-content > .ready-main) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgFrMapInfo.png") !important;
  border-image-slice: 40 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 40) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#stage-ready-screen.screen .ready-side .info-block:first-child, #stage-ready-screen.screen .ready-side .info-block:nth-child(2)) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgFrMapInfoGreen.png") !important;
  border-image-slice: 48 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 48) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#stage-ready-screen .ready-attempts-pill) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgFrPrice.png") !important;
  border-image-slice: 25 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 25) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#game-screen .progress-container) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgFrTimeGaugeBack2.png") !important;
  border-image-slice: 35 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 35) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

/* 가로 화면은 시간 칸이 모서리 조각보다 낮아 틀이 절반 높이로 접힌다.
   가로는 figma-ui-v2.css 의 통그림 배경(칸과 그림 비율 237:106 이 같다)을 그대로 쓴다. */
@media screen and (orientation: portrait) {
  body :is(#game-screen .timer-bubble) {
    border: 0 solid transparent !important;
    border-radius: 0 !important;
    border-image-source: url("assets/resources/figma-v2/imgFrRemainingTime1.png") !important;
    border-image-slice: 40 fill !important;
    border-image-width: calc(var(--ui-art-pixel) * 40) !important;
    border-image-outset: 0 !important;
    border-image-repeat: stretch !important;
    background: none !important;
  }
}

body :is(#collection-screen #collection-list-container .collection-card) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgFrCollectionList2.png") !important;
  border-image-slice: 42 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 42) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#reward-modal .modal-card, #inventory-reward-modal .inventory-reward-card, #collection-shipping-modal .collection-shipping-card, #collection-privacy-modal .collection-privacy-card) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgPopupReward1.png") !important;
  border-image-slice: 40 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 40) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#reward-modal.collection-result .modal-card) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgPopupExchange1.png") !important;
  border-image-slice: 40 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 40) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#reward-modal .modal-icon-container, #inventory-reward-modal .inventory-reward-icon-frame) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgFrRewardItem1.png") !important;
  border-image-slice: 35 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 35) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#reward-modal.collection-result .modal-icon-container) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: url("assets/resources/figma-v2/imgFrExchangeItem1.png") !important;
  border-image-slice: 35 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 35) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body :is(#stage-ready-screen #start-game-btn, #reward-modal #reward-close-btn, #inventory-reward-modal #inventory-reward-close, #effect-overlay .effect-actions .res-btn, #collection-shipping-modal .collection-shipping-actions .res-btn, #collection-privacy-modal #collection-privacy-close, #collection-screen #collection-list-container .collection-card .combine-btn, #collection-screen #collection-list-container .collection-card .combine-btn:disabled) {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: var(--ui-button-plate, url("assets/resources/figma-v2/imgBtnBase.png")) !important;
  border-image-slice: 48 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 48) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: none !important;
}

body #stage-ready-screen #start-game-btn {
  --ui-button-plate: url("assets/resources/figma-v2/imgBtnStartPlate.png");
  --ui-button-stroke: #277eb7;
}
body #collection-screen #collection-list-container .collection-card .combine-btn {
  --ui-button-plate: url("assets/resources/figma-v2/imgBtnCollectionExchangePlate.png");
  --ui-button-stroke: #277eb7;
}
body #collection-screen #collection-list-container .collection-card .combine-btn:disabled {
  --ui-button-stroke: #6f8b82;
}

/* Full-height blue end caps also protect the start plate's painted rivets. */
body #stage-ready-screen #start-game-btn:enabled,
body #collection-screen #collection-list-container .collection-card .combine-btn:not(:disabled) {
  container-type: size;
  isolation: isolate;
  border-image: none !important;
}
body #stage-ready-screen #start-game-btn:enabled {
  position: relative !important;
}
body #stage-ready-screen #start-game-btn:enabled::after,
body #collection-screen #collection-list-container .collection-card .combine-btn:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 0 solid transparent;
  border-image-source: var(--ui-button-plate);
  border-image-slice: 0 54 fill;
  border-image-width: 0 calc(100cqh * 54 / 120);
  border-image-repeat: stretch;
}
body #stage-ready-screen #start-game-btn:enabled::after {
  border-image-slice: 0 95 fill;
  border-image-width: 0 calc(100cqh * 95 / 163);
}

/* Keep embedded symbols and multi-part artwork proportional. Slicing through
   a handle, icon, label or inner slot would stretch that artwork itself. */
body :is(#global-top-bar .menu-btn.active,
  #splash-screen .sns-btn,
  #stage-ready-screen .buy-item-card,
  #game-screen .item-btn,
  #collection-screen .collection-material,
  #inventory-screen .inventory-item,
  #roulette-screen #spin-roulette-btn,
  #stage-ready-screen .ready-header-status .hud-attempts,
  #effect-overlay #effect-stars) {
  background-size: contain !important;
}

/* Native labels are separate from the resizable button plate. */
body :is(#stage-ready-screen #start-game-btn,
  #reward-modal #reward-close-btn,
  #collection-screen #collection-list-container .collection-card .combine-btn) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: var(--ui-native-label-size, clamp(10px, 3.2cqmin, 34px)) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 0.12em 0 var(--ui-button-stroke, #478d80) !important;
  -webkit-text-stroke: 0.04em var(--ui-button-stroke, #478d80) !important;
  paint-order: stroke fill !important;
}
/* 보상 창 «확인»은 화면 짧은 변(cqmin)을 따르면 세로 360px 에서 11.5px 까지 작아졌다 — 카드 실폭의 5%(세로 14px · 가로 15px · PC 31px).
   위 규칙의 글자 크기가 이 변수를 읽는다. */
#reward-modal #reward-close-btn {
  --ui-native-label-size: clamp(12px, calc(min(var(--reward-card-width), calc((100dvh - 24px - var(--safe-block-size)) * 827 / var(--reward-card-height))) * 0.05), 34px);
}
/* 결과 창은 위 :is() 규칙(가장 센 선택자 기준 id 2 + 클래스 3)에 지지 않도록 id 2 + 클래스 3 으로 맞춘다.
   예전 `#effect-overlay .effect-actions` 는 id 1 이라 잠겨도 초록 판 그림이 그대로 보였다. */
body #collection-screen #collection-list-container .collection-card .combine-btn:disabled,
body #effect-overlay #effect-actions.effect-actions .res-btn:disabled,
body #collection-shipping-modal .collection-shipping-actions .res-btn:disabled {
  border-image-source: url("assets/resources/figma-v2/imgBtnBase_disable.png") !important;
}

/* A scrollable card keeps its existing padding; only its frame is repainted. */
body #inventory-screen #reward-list > .empty-msg {
  box-sizing: border-box;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  padding: clamp(6px, 1.5cqh, 20px) 16px;
  line-height: 1.3;
  align-self: center;
}

body #collection-screen #collection-list-container .collection-card {
  border-width: clamp(12px, 2cqh, 24px) !important;
}
@media (orientation: portrait) {
  body #collection-screen #collection-list-container .collection-card {
    border-image-source: url("assets/resources/figma-v2/imgFrCollectionList1.png") !important;
  }
  body #game-screen .progress-container {
    border-image-source: url("assets/resources/figma-v2/imgFrTimeGaugeBack1.png") !important;
  }
}

/* Keep keyboard focus visible without the global thick orange halo. */
body #global-top-bar .menu-btn:focus {
  outline: none !important;
}
body #global-top-bar .menu-btn:focus-visible {
  outline: 2px solid var(--figma-deep-mint) !important;
  outline-offset: 1px !important;
}

body #stage-ready-screen .buy-item-card::before {
  border: 0 solid transparent !important;
  border-image: url("assets/resources/figma-v2/imgFrPrice.png") 25 fill / calc(var(--ui-art-pixel) * 25) / 0 stretch !important;
  background: none !important;
}
body #stage-ready-screen.screen .ready-header-status .hud-pill.primary {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image: url("assets/resources/figma-v2/imgFrGold.png") 40 fill / calc(var(--ui-art-pixel) * 40) / 0 stretch !important;
  background: none !important;
}
body #stage-ready-screen.screen .ready-header-status .hud-pill.primary::before,
body #stage-ready-screen.screen .ready-header-status .hud-pill.primary::after {
  content: none !important;
  border-image: none !important;
  background: none !important;
}
body #game-container > #global-top-bar > .top-status-right > .hud-pill,
body #game-container > #global-top-bar > .top-status-right > .hud-points,
body #game-container > #global-top-bar > .top-status-right > .hud-attempts {
  border-image-source: url("assets/resources/figma-v2/imgFrSource.png") !important;
  border-image-slice: 40 fill !important;
  border-image-width: calc(var(--ui-art-pixel) * 40) !important;
  border-image-repeat: stretch !important;
}
body #stage-selection-screen .difficulty-tabs::before {
  border: 0 solid transparent !important;
  border-image: url("assets/resources/figma-v2/imgFrDifficulty.png") 70 fill / calc(var(--ui-art-pixel) * 70) / 0 stretch !important;
}
body #stage-selection-screen .stage-card::after,
body #stage-ready-screen .ready-image-container::after {
  background-size: contain !important;
}