:root {
  --combo-color-1: #FFFFFF;
  --combo-color-2: #87CEEB;
  --combo-color-3: #90EE90;
  --combo-color-4: #FFA500;
  --combo-color-5: #FF4500;
  /* 전역 UI 폰트는 이 CSS 변수 한 곳에서 교체한다. */
  --global-font-family: 'Nerko One', sans-serif;
  /* 도감의 한국어·영어 UI는 이 전용 전역 변수만 사용한다. */
  --codex-font-family: 'Yeon Sung', sans-serif;
  --noto-sans-kr-font-family: 'Noto Sans KR', sans-serif;
  /*
   * All primary scenes share one height-driven mobile stage. The stage may
   * extend past a very narrow viewport, while its safe content lane remains
   * centered and visible. This is the same coordinate system used by the
   * maintenance/gameplay flow, not a breakpoint-based responsive layout.
   */
  --mobile-stage-width: 60vh;
  --mobile-stage-height: 100vh;
  --mobile-stage-gutter: 8vh;
  --mobile-content-width: calc(var(--mobile-stage-width) - var(--mobile-stage-gutter) - var(--mobile-stage-gutter));
  --mobile-panel-inset: 1vh;
  --mobile-status-inset: calc(var(--mobile-stage-gutter) + var(--mobile-panel-inset));
  --mobile-status-width: calc(var(--mobile-content-width) - var(--mobile-panel-inset) - var(--mobile-panel-inset));
  --scene-status-height: 4vh;
  --scene-status-offset-block: 1.2vh;
}

*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

@font-face {
  font-family: 'Nerko One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/NerkoOne-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Yeon Sung';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/YeonSung-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/NotoSansKR-VariableFont_wght.ttf') format('truetype');
}

body,
html {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 100vh;
  max-width: 100vw;
  margin: 0;
  overflow: hidden;
  background-color: transparent;
  font-family: var(--global-font-family);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

.close-button-icon {
  display: block;
  width: 3vh;
  height: 3vh;
  object-fit: contain;
  pointer-events: none;
}

button.close-icon-button {
  padding: 0;
  place-items: center;
}

/**********************************
    *          WallPaper CSS          *
    **********************************/

#wallpaper {
  position: absolute;
  display: flex;
  top: 0;
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  z-index: -999;
  background-image: url('../assets/background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/**********************************
    *        Landing Scene CSS        *
    **********************************/

#landingSplash {
  position: absolute;
  display: flex;
  top: 0;
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  background-image: url('../assets/background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#touchToStartBtn {
  font-size: 4.8vh;
  color: white;
  width: 100%;
  height: 24vh;
  align-content: center;
  text-align: center;
  animation: shake 3s ease-in-out infinite;
  text-shadow: 0.3vh 0.3vh 0vh black, -0.3vh -0.3vh 0vh black, -0.3vh 0.3vh 0vh black, 0.3vh -0.3vh 0vh black, 0vh 0.3vh 0vh black, 0vh -0.3vh 0vh black, 0.3vh 0vh 0vh black, -0.3vh 0vh 0vh black;
}

#lobby-scene {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
}

#lobby-panel {
  position: relative;
  flex: 0 0 var(--mobile-stage-width);
  width: var(--mobile-stage-width);
  height: var(--mobile-stage-height);
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

#lobby-title {
  display: none;
}

#lobby-currencies {
  position: absolute;
  z-index: 2;
  top: 2.1vh;
  right: var(--mobile-stage-gutter);
  color: #777;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.05vh;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: right;
}

.lobby-settings-button,
.lobby-play-button,
.lobby-reset-button,
.lobby-menu-button,
.lobby-mode-nav-button,
.lobby-mode-preview-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.lobby-settings-button:focus-visible,
.lobby-play-button:focus-visible,
.lobby-reset-button:focus-visible,
.lobby-menu-button:focus-visible,
.lobby-mode-nav-button:focus-visible {
  outline: 0.35vh solid #6d8fff;
  outline-offset: 0.3vh;
}

.lobby-settings-button {
  position: absolute;
  z-index: 3;
  top: 1.6vh;
  left: var(--mobile-stage-gutter);
  display: grid;
  width: 4.1vh;
  height: 4.1vh;
  place-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lobby-settings-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.lobby-settings-button:active {
  scale: 0.94;
  box-shadow: none;
}

#lobby-mode-viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

#lobby-mode-viewport.dragging {
  cursor: grabbing;
}

#lobby-mode-track {
  display: flex;
  width: 500%;
  height: 100%;
  transform: translate3d(-20%, 0, 0);
  will-change: transform;
}

#lobby-mode-track.moving {
  transition: transform 420ms cubic-bezier(0.22, 0.78, 0.26, 1);
}

.lobby-mode-panel {
  position: relative;
  width: 20%;
  height: 100%;
  flex: 0 0 20%;
  box-sizing: border-box;
  padding: 0 var(--mobile-stage-gutter);
  overflow: hidden;
  background: #fff;
}

.lobby-mode-panel::before {
  position: absolute;
  top: 22vh;
  left: 50%;
  width: 36vh;
  height: 36vh;
  border-radius: 46% 54% 50% 44% / 50% 43% 57% 50%;
  background: var(--lobby-mode-glow);
  content: '';
  filter: blur(0.2vh);
  opacity: 0.48;
  pointer-events: none;
  transform: translateX(-50%) rotate(-8deg);
}

.lobby-mode-panel-normal {
  --lobby-mode-glow: radial-gradient(circle, rgba(247, 69, 146, 0.13), rgba(247, 69, 146, 0) 68%);
}

.lobby-mode-panel-endless {
  --lobby-mode-glow: radial-gradient(circle, rgba(89, 182, 145, 0.16), rgba(89, 182, 145, 0) 68%);
}

.lobby-mode-panel-versus {
  --lobby-mode-glow: radial-gradient(circle, rgba(126, 100, 190, 0.15), rgba(126, 100, 190, 0) 68%);
}

.lobby-mode-heading {
  position: absolute;
  z-index: 2;
  top: 36vh;
  right: var(--mobile-stage-gutter);
  left: var(--mobile-stage-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lobby-mode-kicker {
  color: #9d93a5;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.1vh;
  font-weight: 900;
  letter-spacing: 0.22em;
  line-height: 1;
}

.lobby-mode-heading h2 {
  margin: 0.8vh 0 0;
  color: #3f3a43;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 3.4vh;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
}

.lobby-mode-heading p {
  margin: 1vh 0 0;
  color: #98919c;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.15vh;
  font-weight: 600;
  line-height: 1.45;
}

#lobby-play-area,
.lobby-mode-play-area {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 24vh;
  width: 16vh;
  height: 16vh;
  transform: translateX(-50%);
}

.lobby-play-button {
  position: absolute;
  inset: 1vh;
  display: grid;
  place-items: center;
  transition: scale 120ms ease, filter 120ms ease;
}

.lobby-play-button img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lobby-play-button:hover {
  filter: brightness(1.05) saturate(1.05);
}

.lobby-play-button:active {
  scale: 0.94;
}

.lobby-reset-button {
  position: absolute;
  z-index: 2;
  bottom: -1vh;
  left: 6vh;
  width: 4vh;
  height: 4vh;
  transition: rotate 180ms ease, scale 120ms ease;
}

.lobby-reset-button img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lobby-reset-button:hover {
  rotate: -12deg;
}

.lobby-reset-button:active {
  scale: 0.9;
}

.lobby-reset-button[hidden] {
  display: none;
}

.lobby-mode-clone-reset {
  display: none;
}

#lobby-panel.has-active-run .lobby-mode-clone-reset {
  display: block;
}

.lobby-mode-dummy-control:disabled {
  cursor: default;
}

.lobby-play-button.lobby-mode-dummy-control:hover {
  filter: none;
}

.lobby-reset-button.lobby-mode-dummy-control:hover {
  rotate: 0deg;
}

#lobby-play-status,
#lobby-endless-play-status {
  display: none;
}

#lobby-menu {
  position: absolute;
  z-index: 2;
  right: var(--mobile-stage-gutter);
  bottom: 3.2vh;
  left: var(--mobile-stage-gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  justify-items: center;
  gap: 1.1vh;
}

.lobby-menu-button {
  display: grid;
  width: 8.4vh;
  height: 8.4vh;
  place-items: center;
  border-radius: 2vh;
  transition: translate 120ms ease, scale 120ms ease, background-color 120ms ease;
}

.lobby-menu-button img {
  display: block;
  width: 7.6vh;
  height: 7.6vh;
  object-fit: contain;
  pointer-events: none;
}

.lobby-menu-button:active {
  transform: translateY(0.2vh) scale(0.94);
}

.lobby-mode-preview-button {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 13vh;
  display: flex;
  width: 17vh;
  min-height: 14vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2vh;
  color: #aaa3ad;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.1vh;
  font-weight: 900;
  letter-spacing: 0.14em;
  opacity: 0.68;
  transform: translateX(-50%);
}

.lobby-mode-preview-button img {
  display: block;
  width: 9vh;
  height: 9vh;
  filter: grayscale(1) opacity(0.48);
  object-fit: contain;
}

.lobby-mode-preview-button:disabled {
  cursor: default;
}

.lobby-mode-nav-button {
  position: absolute;
  z-index: 6;
  top: 56%;
  display: grid;
  width: 5.2vh;
  height: 7vh;
  place-items: center;
  border-radius: 2.2vh;
  opacity: 0.72;
  transform: translateY(-50%);
  transition: opacity 120ms ease, scale 120ms ease;
}

.lobby-mode-nav-button.previous {
  left: max(1vh, calc(50% - 50vw + 1vh));
}

.lobby-mode-nav-button.next {
  right: max(1vh, calc(50% - 50vw + 1vh));
}

.lobby-mode-nav-button img {
  display: block;
  width: 4.2vh;
  height: 4.2vh;
  object-fit: contain;
  pointer-events: none;
}

.lobby-mode-nav-button:hover {
  opacity: 1;
}

.lobby-mode-nav-button:active {
  opacity: 1;
  scale: 0.92;
}

#lobby-mode-indicators {
  position: absolute;
  z-index: 7;
  bottom: 1.2vh;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.55vh;
  transform: translateX(-50%);
}

#lobby-mode-indicators span {
  display: block;
  width: 0.65vh;
  height: 0.65vh;
  border-radius: 50%;
  background: #d4cfd7;
  transition: width 180ms ease, border-radius 180ms ease, background-color 180ms ease;
}

#lobby-mode-indicators span.active {
  width: 2.1vh;
  border-radius: 0.5vh;
  background: #77717a;
}

#meta-upgrade-scene {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}

#meta-upgrade-scene.visible {
  display: flex;
}

#meta-upgrade-panel {
  position: relative;
  flex: 0 0 var(--mobile-stage-width);
  width: var(--mobile-stage-width);
  height: var(--mobile-stage-height);
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(95, 105, 125, 0.11) 0 1px, transparent 1.4px) 0 0 / 24px 24px,
    #fff;
  box-shadow: none;
  color: #222;
  font-family: var(--noto-sans-kr-font-family);
}

#meta-upgrade-header {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 0;
  right: 0;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--scene-status-offset-block) var(--mobile-status-inset) 0;
  background: linear-gradient(180deg, #fff 0 76%, rgba(255, 255, 255, 0.86) 88%, transparent 100%);
  pointer-events: none;
}

#meta-upgrade-dust {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35vh;
  color: #5e5868;
  font-size: 1.8vh;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0.1vh 0.12vh 0 rgba(255, 255, 255, 0.9);
}

#meta-upgrade-dust-icon {
  display: block;
  width: 2.7vh;
  height: 2.7vh;
  object-fit: contain;
}

#meta-upgrade-navigation {
  position: absolute;
  z-index: 14;
  top: var(--scene-status-offset-block);
  left: 50%;
  margin: 0;
  color: #222;
  transform: translateX(-50%);
}

#meta-upgrade-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

#meta-upgrade-viewport.dragging {
  cursor: grabbing;
}

#meta-upgrade-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--meta-upgrade-canvas-width, 3680px);
  height: var(--meta-upgrade-canvas-height, 3680px);
  transform-origin: 0 0;
  will-change: transform;
}

#meta-upgrade-connections,
#meta-upgrade-nodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#meta-upgrade-connections {
  pointer-events: none;
}

.meta-upgrade-line {
  fill: none;
  stroke: #d7dae1;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 180ms ease, filter 180ms ease;
}

.meta-upgrade-line.branch {
  stroke-width: 9;
}

.meta-upgrade-line.available {
  stroke: color-mix(in srgb, var(--category-color) 58%, #c8ccd5 42%);
}

.meta-upgrade-line.unlocked {
  stroke: color-mix(in srgb, var(--category-color) 82%, #555 18%);
  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--category-color) 24%, transparent));
}

#meta-upgrade-core,
.meta-upgrade-node {
  position: absolute;
  transform: translate(-50%, -50%);
}

#meta-upgrade-core {
  z-index: 3;
  left: var(--meta-upgrade-core-x, 1480px);
  top: var(--meta-upgrade-core-y, 1840px);
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  border: 5px solid #4d452d;
  border-radius: 38% 48% 42% 46%;
  background: #fff;
}

.meta-upgrade-core-icon {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.meta-upgrade-node {
  z-index: 4;
  display: grid;
  width: 112px;
  height: 112px;
  min-height: 0;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 44%;
  outline: 0 solid transparent;
  outline-offset: 3px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  filter: none;
  transition: scale 160ms ease, outline-color 180ms ease;
}

.meta-upgrade-node:active {
  scale: 0.94;
}

.meta-upgrade-node.active {
  filter: none;
  box-shadow: none;
}

.meta-upgrade-node.inactive {
  filter: none;
  box-shadow: none;
}

.meta-upgrade-node.selected {
  z-index: 6;
  scale: 1.08;
  outline-width: 9px;
  outline-color: color-mix(in srgb, var(--category-color) 76%, #333 24%);
  box-shadow: none;
}

.meta-upgrade-node-icon {
  display: block;
  width: 108px;
  height: 108px;
  object-fit: contain;
  pointer-events: none;
  transition: filter 180ms ease;
}

.meta-upgrade-node.active .meta-upgrade-node-icon {
  filter: var(--meta-upgrade-icon-key-color-filter, opacity(1)) saturate(1.05) drop-shadow(0 5px 0 color-mix(in srgb, var(--category-color) 52%, #666 48%)) drop-shadow(0 9px 8px rgba(50, 55, 65, 0.15));
}

.meta-upgrade-node.inactive .meta-upgrade-node-icon {
  filter: brightness(0.5) contrast(0.5);
}

#meta-upgrade-controls {
  position: absolute;
  z-index: 11;
  top: 13.4vh;
  right: var(--mobile-status-inset);
  display: flex;
  flex-direction: column;
  gap: 0.7vh;
}

#meta-upgrade-controls button {
  width: 4.2vh;
  height: 4.2vh;
  border: 0.22vh solid #777;
  border-radius: 1.5vh 0.35vh 1.3vh 0.38vh / 0.38vh 1.35vh 0.4vh 1.55vh;
  background: linear-gradient(145deg, #fff, #e7ebf4);
  box-shadow: 0.18vh 0.24vh 0 rgba(60, 60, 60, 0.24);
  color: #333;
  cursor: pointer;
  font-family: var(--global-font-family);
  font-size: 2.1vh;
}

#meta-upgrade-controls button:active {
  transform: scale(0.94);
}

#meta-upgrade-controls button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.24vh #fff, 0 0 0 0.46vh #555;
}

#meta-upgrade-detail {
  position: fixed;
  z-index: 15;
  top: 0;
  left: 0;
  display: flex;
  width: 31vh;
  max-width: calc(100vw - 2.8vh);
  height: 20.5vh;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1.35vh 1.5vh;
  border: 0.28vh solid color-mix(in srgb, var(--detail-color, #9b7ad7) 58%, #555 42%);
  border-radius: 2.4vh 0.65vh 1.5vh 0.6vh / 0.6vh 1.9vh 0.65vh 2.2vh;
  background: linear-gradient(145deg, #fff 58%, color-mix(in srgb, var(--detail-color, #9b7ad7) 12%, #fff 88%));
  box-shadow: 0.4vh 0.55vh 0 rgba(60, 60, 60, 0.24), 0 1.2vh 2.4vh rgba(50, 55, 65, 0.12);
  color: #222;
  --meta-upgrade-tail-x: 50%;
}

#meta-upgrade-detail-pointer {
  position: absolute;
  left: var(--meta-upgrade-tail-x);
  width: 1.7vh;
  height: 1.7vh;
  box-sizing: border-box;
  background: #fff;
  pointer-events: none;
  transform: translateX(-50%) rotate(45deg);
}

#meta-upgrade-detail.above #meta-upgrade-detail-pointer {
  bottom: -1.02vh;
  border-right: 0.28vh solid color-mix(in srgb, var(--detail-color, #9b7ad7) 58%, #555 42%);
  border-bottom: 0.28vh solid color-mix(in srgb, var(--detail-color, #9b7ad7) 58%, #555 42%);
}

#meta-upgrade-detail.below #meta-upgrade-detail-pointer {
  top: -1.02vh;
  border-top: 0.28vh solid color-mix(in srgb, var(--detail-color, #9b7ad7) 58%, #555 42%);
  border-left: 0.28vh solid color-mix(in srgb, var(--detail-color, #9b7ad7) 58%, #555 42%);
}

#meta-upgrade-detail.out-of-view {
  visibility: hidden;
}

#meta-upgrade-detail[hidden] {
  display: none;
}

#meta-upgrade-detail-close {
  position: absolute;
  z-index: 2;
  top: 0.8vh;
  right: 1vh;
  border: 0;
  background: none;
  color: #777;
  cursor: pointer;
  font-size: 2.4vh;
}

#meta-upgrade-detail-header {
  display: flex;
  min-height: 4.6vh;
  align-items: center;
  gap: 0.9vh;
  padding-right: 2.6vh;
}

#meta-upgrade-detail-icon {
  display: block;
  width: 4.6vh;
  height: 4.6vh;
  flex: 0 0 auto;
  object-fit: contain;
}

#meta-upgrade-detail-category {
  color: color-mix(in srgb, var(--detail-color, #9b7ad7) 64%, #333 36%);
  font-size: 1.15vh;
  font-weight: 900;
}

#meta-upgrade-detail-name {
  margin-top: 0.18vh;
  color: #222;
  font-size: 1.7vh;
  font-weight: 900;
}

#meta-upgrade-detail-description {
  margin-top: 0.8vh;
  padding: 0.8vh 1vh;
  background: rgba(255, 255, 255, 0.7);
  color: #656b78;
  font-size: 1.2vh;
  line-height: 1.45;
}

#meta-upgrade-detail-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 0.7vh;
}

#meta-upgrade-purchase {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.35vh;
  padding: 1.2vh 0.72vh;
  border: 0.22vh solid color-mix(in srgb, var(--detail-color, #9b7ad7) 54%, #333 46%);
  border-radius: 1.5vh 0.35vh 1.3vh 0.38vh / 0.38vh 1.35vh 0.4vh 1.55vh;
  background: color-mix(in srgb, var(--detail-color, #9b7ad7) 58%, #fff 42%);
  box-shadow: 0.18vh 0.24vh 0 color-mix(in srgb, var(--detail-color, #9b7ad7) 36%, #777 64%);
  color: #222;
  cursor: pointer;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.6vh;
  font-weight: 900;
  line-height: 1;
}

.meta-upgrade-purchase-icon {
  display: block;
  width: 1.65vh;
  height: 1.65vh;
  flex: 0 0 auto;
}

#meta-upgrade-purchase:disabled {
  border-color: #b5b8c0;
  background: #e4e6eb;
  box-shadow: 0.18vh 0.24vh 0 #a7abb4;
  color: #9296a0;
  cursor: not-allowed;
}

#meta-upgrade-purchase:not(:disabled):active {
  transform: scale(0.96) translateY(0.12vh);
}

#meta-upgrade-purchase:focus-visible,
.meta-upgrade-node:focus-visible {
  outline: 0.4vh solid #444;
  outline-offset: 0.28vh;
}

/**********************************
    *          Gacha Scene           *
    **********************************/

#gacha-scene {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
}

#gacha-scene.visible {
  display: flex;
}

#gacha-panel {
  display: flex;
  flex: 0 0 var(--mobile-stage-width);
  width: var(--mobile-stage-width);
  height: var(--mobile-stage-height);
  flex-direction: column;
  align-items: center;
  gap: 1.8vh;
  box-sizing: border-box;
  padding: 0 var(--mobile-stage-gutter);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

#gacha-status {
  color: #555;
  font-size: 1.5vh;
}

#gacha-cookie {
  display: inline-flex;
  align-items: center;
  gap: 0.45vh;
  color: #222;
  font-size: 3vh;
}

.gacha-cookie-icon {
  display: block;
  width: 3.6vh;
  height: 3.6vh;
  object-fit: contain;
}

#gacha-preview {
  display: flex;
  width: 100%;
  height: 30vh;
  margin-top: 20vh;
  align-items: flex-end;
  justify-content: center;
  gap: 1vh;
  overflow: hidden;
  border-radius: 3vh 1vh 3vh 1vh;
}

.gacha-preview-lumi {
  width: 16vh;
  height: 27vh;
  object-fit: contain;
  filter: drop-shadow(0 0.8vh 0.5vh rgba(30, 90, 130, 0.25));
  animation: gachaPreviewFloat 2.8s ease-in-out infinite alternate;
}

.gacha-preview-lumi:nth-child(2) {
  width: 19vh;
  height: 30vh;
  animation-delay: -1.2s;
}

.gacha-preview-placeholder {
  align-self: center;
  color: #45a6d1;
  font-size: 2.2vh;
}

@keyframes gachaPreviewFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-1.2vh);
  }
}

#gacha-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 1.2vh;
}

.gacha-action-button {
  display: flex;
  width: 16vh;
  height: 6vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0.25vh solid #222;
  border-radius: 3vh 1vh 3vh 1vh / 1vh 3vh 1vh 3vh;
  background: linear-gradient(345deg, #ade7ff, #fff);
  box-shadow: 0.35vh 0.35vh 0 rgba(34, 34, 34, 0.35);
  color: #1679a5;
  cursor: pointer;
  font-family: var(--global-font-family);
}

.gacha-action-button:active {
  transform: scale(0.96) translateY(0.2vh);
}

.gacha-action-button.featured {
  background: linear-gradient(345deg, #ffe28b, #fff);
  color: #a66b00;
}

.gacha-action-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35vh;
}

.gacha-action-cookie-icon {
  display: block;
  width: 2.6vh;
  height: 2.6vh;
  object-fit: contain;
}

.gacha-action-cost-value {
  font-size: 2.4vh;
  line-height: 1;
}

.gacha-action-label {
  margin-top: 0.2vh;
  font-size: 1.1vh;
  line-height: 1;
}

.gacha-action-button:disabled {
  filter: grayscale(0.8);
  opacity: 0.5;
  cursor: not-allowed;
}

#gacha-status {
  min-height: 2vh;
  color: #bb5a27;
  text-align: center;
}

#gacha-animation {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

#gacha-animation.visible {
  display: flex;
}

.gacha-animation-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.gacha-animation-stage[hidden] {
  display: none;
}

#gacha-pull-stage {
  flex-direction: column;
  gap: 4vh;
  background:
    radial-gradient(circle, rgba(72, 190, 240, 0.16) 0 0.28vh, transparent 0.35vh) 0 0 / 3vh 3vh,
    #fff;
}

.gacha-pull-arrow {
  display: block;
  width: 7vh;
  height: 7vh;
  object-fit: contain;
}

#gacha-pull-rail {
  position: relative;
  width: 3.8vh;
  height: 32vh;
  border: 0.4vh solid #222;
  border-radius: 4vh 1.5vh 4vh 1.5vh / 1.5vh 4vh 1.5vh 4vh;
  background: #666;
}

#gacha-pull-fill {
  --gacha-pull-mask-bottom: 100%;
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(#fff, #90c7ff);
  clip-path: inset(0 0 var(--gacha-pull-mask-bottom) 0);
  pointer-events: none;
  will-change: clip-path;
}

#gacha-pull-fill.gacha-tier-epic {
  background: linear-gradient(#fff, #ffe990);
}

#gacha-pull-handle {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 6.2vh;
  height: 6.2vh;
  border: 0.35vh solid #222;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff 55%, #aee9ff);
  box-shadow: 0 0.4vh 0 rgba(34, 34, 34, 0.4);
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
}

#gacha-pull-handle:active {
  cursor: grabbing;
}

#gacha-splash-stage {
  background: #fff;
}

#gacha-splash-image {
  width: min(80vw, 70vh);
  height: min(80vh, 70vh);
  object-fit: contain;
}

#gacha-splash-fade {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

#gacha-splash-fade.fading {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.gacha-skip-button {
  position: absolute;
  top: 3vh;
  z-index: 2;
  padding: 0.7vh 1.8vh;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: #555;
  cursor: pointer;
  font-family: var(--global-font-family);
  font-size: 1.5vh;
}

#gacha-results-stage {
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 45%, #d8f5ff, transparent 36%),
    #fff;
}

#gacha-results-stage.gacha-tier-epic {
  background:
    radial-gradient(circle at 50% 45%, #ffe990, transparent 36%),
    #fff;
}

#gacha-result-cards {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2.4vh;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 1.5vh 1vh 8vh;
}

#gacha-result-cards.single {
  justify-content: center;
}

.gacha-result-column {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 4.2vh;
}

.gacha-result-card {
  flex: 0 0 auto;
  width: 10vh;
  height: 14vh;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  perspective: 80vh;
  opacity: 0;
  animation: gachaCardDrop 0.28s ease-out forwards;
}

@keyframes gachaCardDrop {
  from {
    opacity: 0;
    transform: translateY(-2vh) scale(0.85);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.gacha-result-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.4, 1.6, .6, 1);
}

.gacha-result-card.flipped .gacha-result-card-inner {
  transform: rotateY(180deg);
}

.gacha-result-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0.3vh solid #222;
  border-radius: 8vh 2vh 12vh 2vh / 2vh 12vh 2vh 8vh;
  box-shadow: 0.4vh 0.4vh 0 rgba(34, 34, 34, 0.35);
  backface-visibility: hidden;
}

.gacha-result-card-front {
  background: linear-gradient(345deg, #ade7ff, #fff);
  color: #48aeda;
  font-size: 4vh;
}

.gacha-result-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(345deg, #d8f5ff, #fff);
}

.gacha-result-card.lumi-result .gacha-result-card-back,
.gacha-result-card.lumi-duplicate-result .gacha-result-card-back,
.gacha-result-card.feather-result .gacha-result-card-back {
  background: linear-gradient(345deg, #ffe990, #fff);
}

.gacha-result-reward-image {
  width: 90%;
  height: 70%;
  object-fit: contain;
}

.gacha-result-card.dust-result .gacha-result-reward-image {
  width: 68%;
  height: 58%;
}

.gacha-result-new-mark {
  position: absolute;
  top: -0.5vh;
  left: -0.5vh;
  z-index: 1;
  color: #ffe200;
  font-family: var(--global-font-family);
  font-size: 2.25vh;
  line-height: 1;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 0.5vh #222;
  paint-order: stroke fill;
}

.gacha-result-duplicate-lumi {
  filter: grayscale(1);
  opacity: 0.72;
}

.gacha-result-duplicate-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25vh;
}

.gacha-result-duplicate-dust {
  width: 2vh;
  height: 2vh;
  object-fit: contain;
}

.gacha-result-label {
  max-width: 92%;
  color: #222;
  font-size: 1.5vh;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  font-family: var(--codex-font-family);
}

#btn-close-gacha-results {
  position: absolute;
  bottom: 4vh;
  min-width: 14vh;
  padding: 1vh 3vh;
  border: 0.3vh solid #168bc0;
  border-radius: 1.8vh 0.38vh 1.55vh 0.34vh / 0.34vh 1.5vh 0.4vh 1.75vh;
  background: linear-gradient(345deg, #ade7ff, #fff);
  color: #168bc0;
  cursor: pointer;
  font-family: var(--global-font-family);
  font-size: 2vh;
  box-shadow: 0.35vh 0.35vh 0 rgb(34 34 34 / 20%);
}

#btn-close-gacha-results:active {
  transform: scale(0.96) translateY(0.2vh);
}

#lumi-codex-scene {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  font-family: var(--codex-font-family);
}

#lumi-codex-scene button {
  font-family: var(--codex-font-family);
}

#lumi-codex-scene.visible {
  display: flex;
}

#lumi-codex-panel {
  display: flex;
  flex: 0 0 var(--mobile-stage-width);
  width: var(--mobile-stage-width);
  height: var(--mobile-stage-height);
  box-sizing: border-box;
  padding: 0 var(--mobile-stage-gutter);
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

#lumi-codex-locale-switch {
  display: flex;
  gap: 0.3vh;
  padding: 0.3vh;
}

.lumi-codex-locale-button {
  min-width: 4.6vh;
  height: 2.8vh;
  padding: 0 0.8vh;
  box-sizing: border-box;
  border: 0.2vh solid #888;
  border-radius: 1.6vh 0.28vh 1.4vh 0.3vh / 0.3vh 1.45vh 0.32vh 1.65vh;
  background: #ccc;
  color: #999;
  cursor: pointer;
  font-family: var(--codex-font-family);
  font-size: 1.55vh;
}

.lumi-codex-locale-button.selected {
  border-color: #555;
  background: #555;
  box-shadow: 0.12vh 0.16vh 0 rgba(40, 40, 40, 0.32);
  color: #fff;
}

.lumi-codex-locale-button:active {
  transform: scale(0.96);
}

#lumi-codex-mode-navigation {
  display: grid;
  width: var(--mobile-status-width);
  margin: 0.8vh auto 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65vh;
}

.lumi-codex-mode-button {
  height: 3.8vh;
  border: 0;
  border-bottom: 0.28vh solid #d2d5dc;
  background: transparent;
  color: #999;
  cursor: pointer;
  font-size: 1.65vh;
  font-weight: 700;
}

.lumi-codex-mode-button.selected {
  border-bottom-color: #444;
  color: #222;
}

#lumi-codex-content {
  display: block;
  min-height: 0;
  overflow-y: scroll;
  flex: 1;
}

#lumi-codex-content[hidden],
#lumi-deck-content[hidden] {
  display: none;
}

#lumi-codex-content,
#lumi-codex-content *,
#lumi-deck-content,
#lumi-deck-content * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#lumi-codex-content::-webkit-scrollbar,
#lumi-codex-content *::-webkit-scrollbar,
#lumi-deck-content::-webkit-scrollbar,
#lumi-deck-content *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#lumi-codex-grid {
  display: grid;
  min-height: 0;
  padding: 1.8vh;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1vh;
  align-content: start;
  overflow-y: auto;
  height: auto;
  margin-top: 1vh;
  margin-bottom: 6vh;
}

#lumi-deck-content {
  display: flex;
  min-height: 0;
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
}

#lumi-deck-mode-viewport {
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

#lumi-deck-mode-viewport.dragging {
  cursor: grabbing;
}

#lumi-deck-mode-track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

#lumi-deck-mode-track.moving {
  transition: transform 420ms cubic-bezier(0.22, 0.78, 0.26, 1);
}

.lumi-deck-mode-panel {
  display: flex;
  width: 50%;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  flex: 0 0 50%;
  flex-direction: column;
  padding: 1.4vh 5.2vh 5vh;
  overflow-y: auto;
}

.lumi-deck-mode-title {
  margin: 0 0 1vh;
  color: #333;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 2vh;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.lumi-deck-mode-arrow {
  position: absolute;
  top: 44%;
  z-index: 3;
  width: 4.2vh;
  height: 4.2vh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
}

.lumi-deck-mode-arrow.previous {
  left: max(1vh, calc(50% - 50vw + 1vh));
}

.lumi-deck-mode-arrow.next {
  right: max(1vh, calc(50% - 50vw + 1vh));
}

.lumi-deck-mode-arrow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.lumi-deck-mode-arrow:disabled {
  opacity: 0.18;
  cursor: default;
}

.lumi-deck-mode-arrow:not(:disabled):active {
  transform: translateY(-50%) scale(0.92);
}

.lumi-deck-mode-arrow:focus-visible,
.lumi-endless-deck-use-button:focus-visible,
.lumi-endless-deck-record-row:focus-visible {
  outline: 0.28vh solid #6d8fff;
  outline-offset: 0.18vh;
}

#lumi-deck-mode-indicators {
  position: absolute;
  bottom: 1.7vh;
  left: 50%;
  z-index: 3;
  display: flex;
  gap: 0.65vh;
  pointer-events: none;
  transform: translateX(-50%);
}

#lumi-deck-mode-indicators span {
  display: block;
  width: 0.7vh;
  height: 0.7vh;
  border-radius: 50%;
  background: #d2d5dc;
}

#lumi-deck-mode-indicators span.active {
  background: #444;
}

#lumi-deck-slots {
  display: grid;
  margin-top: 1.8vh;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1vh;
}

.lumi-deck-slot {
  position: relative;
  display: flex;
  min-width: 0;
  aspect-ratio: 0.82 / 1;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0.7vh 0.35vh;
  overflow: hidden;
  border: 0.24vh solid #777;
  border-radius: 2.4vh 0.35vh 2.1vh 0.4vh / 0.4vh 2.2vh 0.42vh 2.5vh;
  background: linear-gradient(155deg, #fff, #e7ebf4);
  box-shadow: 0.22vh 0.28vh 0 rgba(60, 60, 60, 0.2);
  color: #222;
  cursor: pointer;
}

.lumi-deck-slot.empty {
  border-style: dashed;
  background: #f2f3f6;
  color: #999;
}

.lumi-deck-slot-number {
  position: absolute;
  top: 0.45vh;
  left: 0.65vh;
  color: #777;
  font-size: 1.15vh;
  font-weight: 700;
}

.lumi-deck-slot-image {
  width: 78%;
  height: 68%;
  object-fit: contain;
}

.lumi-deck-slot-empty-mark {
  display: grid;
  width: 100%;
  height: 68%;
  place-items: center;
  font-size: 4vh;
  font-weight: 300;
}

.lumi-deck-slot-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 1.35vh;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lumi-endless-deck-panel {
  overflow: hidden;
}

#lumi-endless-deck-current {
  box-sizing: border-box;
  padding: 1vh 0.8vh 1.2vh;
  background: rgba(255, 255, 255, 0.66);
  border: 0.24vh solid #777;
  border-radius: 2.4vh 0.35vh 2.1vh 0.4vh / 0.4vh 2.2vh 0.42vh 2.5vh;
  box-shadow: 0.22vh 0.28vh 0 rgba(60, 60, 60, 0.2);
  margin-top: 1.8vh;
  margin-bottom: 4vh;
}

#lumi-endless-deck-records-title {
  margin: 0;
  color: #555;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.25vh;
  font-weight: 800;
  line-height: 1.2;
}

#lumi-endless-deck-selected {
  display: flex;
  min-height: 8.4vh;
  align-items: center;
  justify-content: center;
}

#lumi-endless-deck-selected .ranking-deck-row {
  gap: 1.4vh;
}

#lumi-endless-deck-selected .ranking-deck-card {
  width: 8vh;
}

.lumi-endless-deck-empty,
.lumi-endless-deck-record-empty {
  margin: 0;
  color: #888;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.15vh;
  line-height: 1.45;
  text-align: center;
}

#lumi-endless-deck-records {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  margin-top: 1.3vh;
}

#lumi-endless-deck-records-title {
  margin-bottom: 0.7vh;
  text-align: left;
}

#lumi-endless-deck-record-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.65vh;
  overflow-y: auto;
}

.lumi-endless-deck-record-row {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 2.6vh minmax(0, 1fr) 7.8vh;
  gap: 0.7vh;
  justify-content: start;
  cursor: pointer;
  touch-action: manipulation;
}

.ranking-entry.ranking-expandable-entry {
  gap: 0;
  overflow: hidden;
  border: 0.2vh solid #888;
  border-radius: 1.6vh 0.28vh 1.4vh 0.3vh / 0.3vh 1.45vh 0.32vh 1.65vh;
  background: rgba(255, 255, 255, 0.66);
}

.ranking-expandable-entry .ranking-expandable-row {
  border: 0;
  border-radius: 0;
}

.ranking-expandable-entry > .ranking-deck-detail {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lumi-endless-deck-record-rank {
  text-align: left;
}

.lumi-endless-deck-record-score {
  min-width: 0;
  justify-self: stretch;
  overflow: hidden;
  font-family: var(--global-font-family);
  font-variant-numeric: tabular-nums;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lumi-endless-deck-use-button {
  margin-left: auto;
  justify-self: end;
  display: grid;
  width: 2.7vh;
  height: 2.7vh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  place-items: center;
}

.lumi-endless-deck-use-button:disabled {
  cursor: default;
}

.lumi-endless-deck-use-button img {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
  opacity: 0.5;
}

.lumi-endless-deck-use-button.selected img {
  filter: none;
  opacity: 1;
}

#lumi-deck-picker-dim {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 3vh;
  background: rgba(18, 22, 35, 0.68);
  backdrop-filter: blur(0.45vh);
}

#lumi-deck-picker-dim.open {
  display: flex;
}

#lumi-deck-picker {
  position: relative;
  display: flex;
  width: min(86vw, 42vh);
  max-height: 82vh;
  box-sizing: border-box;
  flex-direction: column;
  padding: 2.4vh;
  overflow: hidden;
  border: 0.34vh solid #555;
  border-radius: 5.2vh 0.5vh 4.5vh 0.55vh / 0.55vh 4.6vh 0.6vh 5.1vh;
  background: #ededed;
  box-shadow: 0.45vh 0.6vh 0 rgba(40, 40, 40, 0.32);
}

#lumi-deck-picker-title {
  margin: 0 4.5vh 0.6vh;
  color: #222;
  font-size: 2.4vh;
  text-align: center;
}

#lumi-deck-picker-help {
  margin: 0 3.8vh 1.4vh;
  color: #777;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.1vh;
  line-height: 1.4;
  text-align: center;
}

#lumi-deck-picker-grid {
  display: grid;
  min-height: 0;
  padding: 0.4vh;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#lumi-deck-picker-grid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.lumi-deck-picker-card {
  position: relative;
  display: flex;
  min-width: 0;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0.55vh 0.25vh;
  overflow: hidden;
  border: 0.2vh solid #888;
  border-radius: 1.8vh 0.3vh 1.55vh 0.32vh / 0.32vh 1.6vh 0.34vh 1.9vh;
  background: #fff;
  color: #222;
  cursor: pointer;
}

.lumi-deck-picker-card.assigned {
  border-color: #38985f;
  background: #efffec;
}

.lumi-deck-picker-card.current {
  box-shadow: 0 0 0 0.28vh rgba(56, 152, 95, 0.28);
}

.lumi-deck-picker-card:disabled {
  opacity: 0.48;
  cursor: default;
}

.lumi-deck-picker-image {
  width: 78%;
  height: 68%;
  object-fit: contain;
}

.lumi-deck-picker-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 1.15vh;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lumi-deck-picker-checked {
  position: absolute;
  top: 0.35vh;
  right: 0.35vh;
  width: 2.3vh;
  height: 2.3vh;
  object-fit: contain;
  pointer-events: none;
}

.lumi-deck-picker-slot-number {
  position: absolute;
  top: 0.38vh;
  left: 0.48vh;
  z-index: 2;
  color: #333;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.2vh;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.lumi-codex-card {
  position: relative;
  display: flex;
  min-width: 0;
  aspect-ratio: 0.82 / 1;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0.7vh 0.35vh;
  overflow: hidden;
  border: 0.24vh solid #777;
  border-radius: 2.4vh 0.35vh 2.1vh 0.4vh / 0.4vh 2.2vh 0.42vh 2.5vh;
  background: linear-gradient(155deg, #fff, #e7ebf4);
  box-shadow: 0.22vh 0.28vh 0 rgba(60, 60, 60, 0.2);
  color: #222;
  cursor: pointer;
  font-family: var(--codex-font-family);
}

.lumi-codex-card.selected {
  z-index: 1;
  border-color: #555;
  background: linear-gradient(155deg, #fff9cb, #ffd54a);
  box-shadow:
    0.22vh 0.28vh 0 rgba(40, 40, 40, 0.32),
    0 0 0 0.25vh rgba(255, 213, 74, 0.45);
  transform: translateY(-0.2vh);
}

.lumi-codex-card-image {
  width: 78%;
  height: 68%;
  object-fit: contain;
  transition: transform 150ms ease;
}

.lumi-codex-card:hover .lumi-codex-card-image {
  transform: scale(1.06);
}

.lumi-codex-card.locked .lumi-codex-card-image,
.lumi-codex-portrait.locked {
  filter: grayscale(1) brightness(0.22);
  opacity: 0.7;
}

.lumi-codex-card-number {
  max-width: 100%;
  font-size: 1.5vh;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lumi-codex-card-type {
  display: none;
}

#lumi-codex-detail-dim {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 3vh;
  background: rgba(18, 22, 35, 0.68);
  backdrop-filter: blur(0.45vh);
  font-family: var(--codex-font-family);
}

#lumi-codex-detail-dim button {
  font-family: var(--codex-font-family);
}

#lumi-codex-detail-dim.open {
  display: flex;
}

#lumi-codex-detail {
  position: relative;
  display: flex;
  width: min(86vw, 42vh);
  max-height: 82vh;
  box-sizing: border-box;
  flex-direction: column;
  padding: 2.4vh;
  overflow: hidden;
  border: 0.34vh solid #555;
  border-radius: 5.2vh 0.5vh 4.5vh 0.55vh / 0.55vh 4.6vh 0.6vh 5.1vh;
  background: #ededed;
  box-shadow: 0.45vh 0.6vh 0 rgba(40, 40, 40, 0.32);
}

#lumi-codex-detail-body {
  min-height: 0;
  overflow-y: auto;
}

#btn-close-lumi-codex-detail {
  position: absolute;
  top: 1.2vh;
  right: 1.2vh;
  z-index: 2;
  display: grid;
  width: 4.2vh;
  height: 4.2vh;
  place-items: center;
  border: 0.3vh solid #555;
  border-radius: 1.8vh 0.38vh 1.55vh 0.34vh / 0.34vh 1.5vh 0.4vh 1.75vh;
  background: #d9d9d9;
  box-shadow: 0.1vh 0.1vh 0 0.3vh rgba(60, 60, 60, 0.2);
  cursor: pointer;
}

#btn-close-lumi-codex-detail:active {
  transform: scale(0.96);
}

#btn-close-lumi-codex:focus-visible,
#btn-close-lumi-codex-detail:focus-visible,
.lumi-codex-locale-button:focus-visible,
.lumi-codex-card:focus-visible,
.lumi-codex-mode-button:focus-visible,
.ranking-mode-button:focus-visible,
.lumi-deck-slot:focus-visible,
.lumi-deck-picker-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.28vh #fff, 0 0 0 0.5vh #555;
}

.lumi-codex-hero {
  display: flex;
  align-items: center;
  gap: 1.5vh;
}

.lumi-codex-portrait {
  width: 9.5vh;
  height: 9.5vh;
  flex: 0 0 auto;
  object-fit: contain;
}

.lumi-codex-identity {
  min-width: 0;
  padding-right: 4.6vh;
}

.lumi-codex-identity h2 {
  margin: 0 0 0.8vh;
  color: #222;
  font-size: 3.25vh;
  line-height: 1;
}

.lumi-codex-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vh;
  font-family: var(--noto-sans-kr-font-family);
}

.lumi-codex-type-badge,
.lumi-codex-lock-badge {
  padding: 0.35vh 0.75vh;
  border-radius: 2vh;
  color: #fff;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.2vh;
}

.lumi-codex-type-badge.type-balanced {
  background: #4cae8a;
}

.lumi-codex-type-badge.type-combo {
  background: #5b80d5;
}

.lumi-codex-type-badge.type-power {
  background: #e06a56;
}

.lumi-codex-lock-badge {
  background: #333;
}

.lumi-codex-section {
  margin-top: 2vh;
  padding: 1.4vh;
  font-family: var(--noto-sans-kr-font-family);
}

.lumi-codex-section h3 {
  margin: 0 0 1vh;
  color: #222;
  font-size: 1.8vh;
  line-height: 1.15;
}

.lumi-codex-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 1vh;
  padding: 0.55vh 0;
  border-bottom: 0.1vh solid rgba(34, 34, 34, 0.09);
  color: #6b7180;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.4vh;
}

.lumi-codex-stat-row:last-child {
  border-bottom: none;
}

.lumi-codex-stat-row span:last-child {
  color: #222;
  text-align: right;
}

.lumi-codex-skill {
  border: 0.18vh solid rgba(34, 34, 34, 0.13);
  background: linear-gradient(145deg, #fff, #fff6db);
}

.lumi-codex-skill-eyebrow {
  display: block;
  margin-bottom: 0.6vh;
  color: #d78b00;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.2vh;
  font-weight: 600;
}

.lumi-codex-skill p {
  margin: 0;
  color: #575c69;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.4vh;
  line-height: 1.45;
}

@keyframes shake {

  0%,
  100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-2px);
  }

  50% {
    transform: translateY(2px);
  }

  75% {
    transform: translateY(-2px);
  }
}

/**********************************
    *          Core Game CSS          *
    **********************************/

#game-container {
  position: relative;
  flex: 0 0 var(--mobile-stage-width);
  background-color: transparent;
  display: none;
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: var(--mobile-stage-width);
  height: var(--mobile-stage-height);
  box-sizing: border-box;
}

.scene-menu-button {
  display: grid;
  width: 4vh;
  height: 4vh;
  padding: 0;
  place-items: center;
  justify-self: start;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.scene-menu-button-icon {
  display: block;
  width: 4vh;
  height: 4vh;
  object-fit: contain;
  pointer-events: none;
}

.scene-menu-button:active {
  transform: scale(0.95);
}

.scene-menu-button:focus-visible {
  border-radius: 50%;
  box-shadow: 0 0 0 0.28vh #fff, 0 0 0 0.5vh #222;
}

#game-board {
  position: relative;
  margin-top: 2vh;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 0%;
  width: var(--mobile-content-width);
  border-radius: 2vh;
  overflow: visible;
}

#game-board::after {
  position: absolute;
  inset: 12.5%;
  z-index: 1;
  box-shadow: 0 0 0 0.3vh rgba(0, 0, 0, 0.1);
  border-radius: 1.2vh;
  content: '';
  pointer-events: none;
}

#skill-result-toast {
  position: absolute;
  top: 7.5vh;
  left: 50%;
  z-index: 30;
  max-width: 38vh;
  padding: 0.75vh 1.4vh;
  border: 0.2vh solid #222;
  border-radius: 2vh;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.35vh 0 #222;
  color: #ffd343;
  font-size: 1.25vh;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -1vh) scale(0.92);
  transition: opacity 140ms ease, transform 140ms ease;
  -webkit-text-stroke: 0.12vh #222;
  paint-order: stroke fill;
}

#skill-result-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.teleport-target {
  position: relative;
  z-index: 8;
  display: grid;
  margin: 12%;
  padding: 0;
  place-items: center;
  border: 0.24vh solid #fff;
  border-radius: 50%;
  background: rgb(225 225 225 / 50%);
  box-shadow: 0 0 0 0.2vh #ffffff, 0 0 1.3vh rgb(255 255 255 / 90%);
  cursor: pointer;
  pointer-events: auto;
  animation: teleport-target-pulse 900ms ease-in-out infinite alternate;
}

.teleport-target::after {
  width: 34%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  content: '';
}

#skill-targeting-label {
  position: absolute;
  bottom: calc(100% + 0.7vh);
  left: 50%;
  z-index: 10;
  padding: 0.6vh 1.1vh;
  border: 0.18vh solid #222;
  border-radius: 1.4vh;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.25vh 0 #222;
  color: #4ebde8;
  font-size: 1.05vh;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-text-stroke: 0.1vh #222;
  paint-order: stroke fill;
}

#game-board.skill-targeting .character-object,
#game-board.skill-targeting .treasure-object,
#game-board.skill-targeting .coin-object,
#game-board.skill-targeting .dummy-object {
  filter: saturate(0.55) brightness(0.8);
}

@keyframes teleport-target-pulse {
  from {
    transform: scale(0.82);
    opacity: 0.65;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0px;
  aspect-ratio: 1 / 1;
}

#object-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  pointer-events: none;
}

.game-object {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.star-object {
  z-index: 2;
  transform-origin: center;
  will-change: transform, opacity;
}

.star-sprite {
  width: 100%;
  height: 100%;
  background-image: url('../assets/star.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: rotate-star 1.2s linear infinite;
  will-change: transform;
}

.star-fall-ghost {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
}

.star-fall-ghost-sprite {
  width: 100%;
  height: 100%;
  background-image: url('../assets/star.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@keyframes rotate-star {
  to {
    transform: rotate(360deg);
  }
}

.character-object {
  z-index: 1;
}

.dummy-object {
  z-index: 1;
}

.character-sprite,
.dummy-sprite {
  width: 100%;
  height: 100%;
  background-image: url('../assets/lumi_1.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  backface-visibility: hidden;
}

.character-object.spawning .character-sprite,
.dummy-object.spawning .dummy-sprite,
.treasure-object.spawning,
.coin-object.spawning,
.star-object.spawning .star-sprite {
  animation: lumi-spawn 420ms cubic-bezier(0.2, 1.3, 0.32, 1) backwards;
  will-change: transform, opacity, filter;
}

@keyframes lumi-spawn {
  from {
    opacity: 0;
    filter: blur(0.36vh);
    transform: translate3d(0, 0, 0) scale(0.35);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.pop-effect {
  position: relative;
  z-index: 4;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.pop-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: var(--particle-size);
  aspect-ratio: 1 / 1;
  background-image: url('../assets/star.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.2) rotate(0deg);
  animation: pop-particle var(--particle-duration) cubic-bezier(0.16, 0.72, 0.34, 1) var(--particle-delay) forwards;
  will-change: transform, opacity;
}

.pop-score-stack {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate3d(-50%, -45%, 0);
  animation:
    pop-score-rise var(--score-duration) linear forwards,
    pop-score-fade var(--score-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.pop-score {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  color: #fff;
  font-size: 2vh;
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: 0.5vh #222;
  paint-order: stroke fill;
}

.pop-score.max-combo {
  color: #FFD343;
  font-size: 2.4vh;
}

.pop-score.combo-enlarged {
  font-size: 2.8vh;
}

.pop-score.skill-triggered {
  text-shadow: 0 0 1vh currentColor, 0 0 2vh currentColor;
  animation: skill-flash 0.3s ease-out;
}

@keyframes skill-flash {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

.pop-combo-power {
  position: relative;
  z-index: 1;
  display: block;
  width: 5.5vh;
  height: 5.5vh;
  grid-area: 1 / 1;
  object-fit: contain;
}

@keyframes pop-score-rise {
  from {
    transform: translate3d(-50%, -45%, 0);
  }

  to {
    transform: translate3d(-50%, -110%, 0);
  }
}

@keyframes pop-score-fade {
  0% {
    opacity: 0;
  }

  24% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes pop-particle {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.2) rotate(0deg);
  }

  12% {
    opacity: 1;
  }

  62% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y)), 0) scale(var(--particle-scale)) rotate(var(--particle-rotation));
  }
}

.forbidden {
  background-color: transparent;
}

.deadzone {
  width: 100%;
  height: 100%;
  background: transparent;
}

.character-object.blink .character-sprite,
.dummy-object.blink .dummy-sprite,
.treasure-object.blink,
.coin-object.blink {
  animation: blink-animation 1s steps(1, start) 2;
}

.character-object.skill-gauge-full:not(.spawning):not(.blink) .character-sprite,
.active-lumi-slot.skill-gauge-full:not(.dragging-original):not(.drop-target) .active-lumi-slot-character {
  animation: lumi-skill-ready-sway 2.2s ease-in-out infinite;
  transform-origin: 50% 78%;
  will-change: transform;
}

@keyframes lumi-skill-ready-sway {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  75% {
    transform: rotate(5deg);
  }
}

.treasure-object {
  position: relative;
  z-index: 3;
  animation: treasure-float 1.2s ease-in-out infinite;
  transform-origin: center;
}

.treasure-sprite,
.coin-sprite {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.coin-object {
  position: relative;
  z-index: 3;
  animation: treasure-float 1.2s ease-in-out infinite;
  transform-origin: center;
}

.coin-sprite {
  background-image: url('../assets/coin.svg');
}

.special-object-turn-badge {
  position: absolute;
  top: 0.1vh;
  right: 0.1vh;
  z-index: 4;
  display: grid;
  place-items: center;
  --outlined-text-width: 0.35vh;
  color: white;
  font-family: var(--global-font-family);
  font-size: 1.6vh;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.special-object-expiring .special-object-turn-badge {
  color: #ff8b77;
}

@keyframes treasure-float {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-0.35vh) scale(0.98);
  }
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

#dPadBox {
  display: flex;
  margin-top: 4vh;
  width: 46vh;
  height: 18vh;
  align-items: center;
  justify-content: center;
}

#dPad {
  display: flex;
  position: relative;
  width: 34vh;
  height: 22vh;
  align-items: center;
  justify-content: center;
}

.arrow-button {
  position: absolute;
  width: 8vh;
  height: 8vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--global-font-family);
  background: linear-gradient(345deg, #222, #666);
  border-radius: 7vh 6vh 10vh 6vh/5vh 10vh 5vh 7vh;
  border: 0.24vh solid #222;
  box-shadow: inset 0 0 0 0.4vh #aaa, inset 0 0 0 0.6vh #222, inset -0.9vh -0.9vh 0vh 0vh rgba(0, 0, 1, 0.2), 0 0.4vh 0 0.2vh #222;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-size: 3vh;
  color: #333;
}

.arrow-button:active {
  transform: scale(0.95);
}

.arrow-icon {
  width: 7vh;
  height: 7vh;
  pointer-events: none;
  display: block;
}

/*
  제공된 SVG를 위 방향 기준으로 사용.
  방향이 반대로 보이면 각 rotate 값을 180도씩 더하거나 빼면 됩니다.
*/

#up-button {
  top: 0;
}

#up-button .arrow-icon {
  transform: rotate(-90deg);
}

#right-button {
  right: 0;
}

#right-button .arrow-icon {
  transform: rotate(0deg);
}

#down-button {
  bottom: 0;
}

#down-button .arrow-icon {
  transform: rotate(90deg);
}

#left-button {
  left: 0;
}

#left-button .arrow-icon {
  transform: rotate(-180deg);
}

#stage-hp-gauge {
  --hp-empty-percent: 0%;
  position: relative;
  width: 40vh;
  aspect-ratio: 860 / 128;
  flex: 0 0 auto;
  isolation: isolate;
  margin-bottom: -5vh;
}

.stage-hp-gauge-layer,
#stage-hp-fill-clip {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.stage-hp-gauge-layer {
  object-fit: contain;
  pointer-events: none;
}

.stage-hp-gauge-shadow {
  z-index: 0;
}

.stage-hp-gauge-fill-bg {
  z-index: 1;
}

#stage-hp-fill-clip {
  z-index: 2;
  clip-path: inset(0 var(--hp-empty-percent) 0 0);
  transition: clip-path 240ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: clip-path;
}

.stage-hp-gauge-border {
  z-index: 3;
}

/*
  외곽선 텍스트 이중 구조:
  뒷 레이어는 현재 규격과 동일한 all black 텍스트(채움+외곽선)로
  외곽선 실루엣을 만들고, 앞 레이어는 테두리 없는 일반 텍스트를 얹어
  글자 가장자리를 깔끔하게 표현한다.
*/
.outlined-text-back,
.outlined-text-front {
  grid-area: 1 / 1;
  line-height: 1;
  white-space: nowrap;
}

.outlined-text-back {
  color: black;
  -webkit-text-stroke: var(--outlined-text-width, 0.5vh) black;
}

#stage-hp-value {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  color: white;
  font-size: 2vh;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

#stage-hp-value .outlined-text-front {
  color: black;
}

#stage-hp-value .outlined-text-back {
  color: white;
  -webkit-text-stroke-color: white;
}

#stage-energy {
  display: flex;
  width: auto;
  min-height: 4vh;
  margin: 1.2vh;
  margin-top: -3vh;
  align-items: center;
  justify-content: center;
  gap: 0.25vh;
}

#stage-energy-icon {
  display: block;
  width: 4vh;
  height: 4vh;
  object-fit: contain;
}

#stage-energy-value {
  display: grid;
  place-items: center;
  color: white;
  font-size: 2.6vh;
  line-height: 1;
  white-space: nowrap;
}

.scene-run-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: var(--mobile-status-width);
  height: var(--scene-status-height);
  box-sizing: border-box;
  align-items: center;
  gap: 0.8vh;
  flex: 0 0 var(--scene-status-height);
  margin: var(--scene-status-offset-block) auto 0;
  color: #222;
  font-size: 2.2vh;
}

.scene-navigation-bar {
  flex: 0 0 var(--scene-status-height);
}

#stage-label,
#maintenance-stage-label {
  justify-self: center;
  white-space: nowrap;
}

#heart-label,
#maintenance-heart-label {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.2vh;
}

.game-heart-icon {
  display: block;
  width: 2.8vh;
  height: 2.8vh;
  object-fit: contain;
}

.game-heart-icon.lost {
  opacity: 0.16;
  filter: grayscale(1);
}

#run-inventory,
#maintenance-inventory {
  display: inline-flex;
  width: 5.2vh;
  height: 5.2vh;
  padding: 0.45vh;
  align-items: center;
  justify-content: center;
  align-self: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#run-inventory {
  margin-top: 3vh;
}

#heart-label.endless-mode-placeholder,
#run-inventory.endless-mode-placeholder {
  visibility: hidden;
  pointer-events: none;
}

#run-inventory:active,
#maintenance-inventory:active {
  transform: scale(0.94) rotate(-3deg);
}

#run-inventory:focus-visible,
#maintenance-inventory:focus-visible {
  filter: drop-shadow(0 0 0.35vh #fff) drop-shadow(0 0 0.3vh #222);
}

#run-inventory-bag-icon,
#maintenance-inventory-bag-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.run-inventory-item {
  display: flex;
  align-items: center;
  gap: 0.4vh;
}

.run-inventory-icon {
  display: block;
  width: 3.2vh;
  height: 3.2vh;
  object-fit: contain;
}

.run-inventory-count {
  color: white;
  font-size: 1.6vh;
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: 0.5vh black;
  paint-order: stroke fill;
}

#inventory-popup {
  position: fixed;
  inset: 0;
  z-index: 11500;
  display: none;
  place-items: center;
  padding: 3vh;
  background: rgba(20, 20, 20, 0.58);
}

#inventory-popup.visible {
  display: grid;
}

#inventory-popup-panel {
  position: relative;
  width: 32vh;
  height: 38vh;
  padding: 2.4vh 2.2vh 4.8vh;
  box-sizing: border-box;
  border: 0.34vh solid #555;
  border-radius: 5.2vh 0.5vh 4.5vh 0.55vh / 0.55vh 4.6vh 0.6vh 5.1vh;
  background: #ededed;
  box-shadow: 0.45vh 0.6vh 0 rgba(40, 40, 40, 0.32);
}

#inventory-popup-panel.maintenance-mode {
  width: 42vh;
  height: 52vh;
}

#inventory-popup-content {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  gap: 1.5vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#inventory-popup-content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#inventory-popup-items {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 10.5vh;
  align-content: start;
  gap: 1.2vh;
}

.inventory-popup-item {
  display: flex;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 0.7vh;
  padding: 1vh 0.8vh;
  border: 0.24vh solid #777;
  border-radius: 2.4vh 0.35vh 2.1vh 0.4vh / 0.4vh 2.2vh 0.42vh 2.5vh;
  background: #d9d9d9;
  box-shadow: 0.22vh 0.28vh 0 rgba(60, 60, 60, 0.2);
}

.inventory-popup-item-icon {
  display: block;
  width: 5.8vh;
  height: 5.8vh;
  flex: 0 0 auto;
  object-fit: contain;
}

.inventory-popup-item-count {
  min-width: 1.4ch;
  color: #333;
  font-size: 2.2vh;
  line-height: 1;
  text-align: center;
}

#inventory-popup-perks-section {
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding-top: 1.2vh;
  border-top: 0.22vh dashed rgba(85, 85, 85, 0.42);
}

#inventory-popup-perks-section.visible {
  display: block;
}

#inventory-popup-perks {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 1.5vh 0.75vh;
}

.inventory-perk-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  aspect-ratio: 423 / 502;
  cursor: pointer;
  outline: none;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.inventory-perk-card-slot {
  min-width: 0;
}

.inventory-perk-card-slot:nth-child(4n + 1) .inventory-perk-card {
  rotate: -1.2deg;
}

.inventory-perk-card-slot:nth-child(4n + 3) .inventory-perk-card {
  rotate: 1deg;
}

.inventory-perk-card:active {
  transform: scale(0.94);
}

.inventory-perk-card:focus-visible {
  filter: drop-shadow(0 0 0.28vh #fff) drop-shadow(0 0 0.24vh #444);
}

.inventory-perk-card-background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.inventory-perk-card-image {
  position: absolute;
  top: 24%;
  left: 50%;
  width: 62%;
  height: 40%;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
}

.inventory-perk-card-title {
  position: absolute;
  top: 8%;
  left: 9%;
  right: 9%;
  overflow: hidden;
  color: #3d2f16;
  font-family: var(--global-font-family);
  font-size: 0.72vh;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

#btn-close-inventory {
  position: absolute;
  display: grid;
  left: 50%;
  bottom: 0;
  width: 12vh;
  min-width: 0;
  height: 4.8vh;
  padding: 0;
  place-items: center;
  border: 0.3vh solid #555;
  border-radius: 1.8vh 0.38vh 1.55vh 0.34vh / 0.34vh 1.5vh 0.4vh 1.75vh;
  background: #d9d9d9;
  cursor: pointer;
  outline: none;
  transform: translate(-50%, 52%);
  box-shadow: 0.1vh 0.1vh 0px 0.3vh rgb(60 60 60 / 20%);
}

#btn-close-inventory:active {
  transform: translate(-50%, 52%) scale(0.96);
}

#btn-close-inventory:focus-visible {
  box-shadow: 0 0 0 0.28vh #fff, 0 0 0 0.5vh #555;
}

#maintenance-scene {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 1250;
  display: none;
  width: var(--mobile-stage-width);
  height: var(--mobile-stage-height);
  padding: 0 var(--mobile-stage-gutter);
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgb(255 255 255);
  transform: translateX(-50%);
}

#maintenance-panel {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding: 0 var(--mobile-panel-inset);
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  text-align: center;
  color: #222;
}

#maintenance-panel>* {
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#maintenance-panel>.scene-run-status {
  width: var(--mobile-status-width);
}

#maintenance-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.2vh;
}

#maintenance-upgrade-area {
  min-height: 14vh;
  margin-top: 1.6vh;
  padding: 1.2vh;
  border: none;
}

#maintenance-chest-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11vh;
  padding: 1vh;
}

#chest-list {
  display: flex;
  gap: 1.5vh;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.chest-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.chest-item:hover {
  transform: scale(1.1);
}

.chest-item.disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.42;
  pointer-events: none;
}

.chest-item.disabled:hover {
  transform: none;
}

.chest-item img {
  width: 7vh;
  height: 7vh;
  object-fit: contain;
}

.chest-item span {
  font-size: 2.4vh;
  color: #666;
}

/* 상자 오픈 애니메이션 */
#chest-open-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

#chest-open-animation.active {
  display: flex;
}

#chest-open-animation img {
  width: 20vh;
  height: 20vh;
  object-fit: contain;
  animation: chest-open-anim 0.8s ease-out forwards;
}

@keyframes chest-open-anim {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.game-card {
  position: relative;
  width: 8vh;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: transparent;
  aspect-ratio: 423 / 502;
  cursor: pointer;
  font-family: var(--global-font-family);
}

.game-card+.game-card {
  margin-left: -1.6vh;
}

.game-card:active,
.game-card:focus-visible {
  z-index: 2;
  transform: translateY(-0.5vh);
}

.game-card.selected {
  z-index: 2;
  transform: translateY(-0.5vh);
}

.game-card-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.game-card-image {
  position: absolute;
  top: 24%;
  left: 50%;
  width: 62%;
  height: 50%;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
}

.game-card-type-icon {
  position: absolute;
  top: 0.2vh;
  left: 0.2vh;
  width: 3vh;
  height: 3vh;
  object-fit: contain;
  pointer-events: none;
}

.game-card.has-type-icon .game-card-title {
  padding-left: 2.4vh;
  text-align: left;
}

.game-card-title {
  position: absolute;
  top: 7%;
  left: 8%;
  right: 8%;
  overflow: hidden;
  font-size: 1.6vh;
  line-height: 1.15;
  color: #3d2f16;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.game-card.entering {
  animation: card-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  will-change: transform, opacity;
}

.game-card.exiting {
  animation: card-exit 0.3s ease-in both;
  will-change: transform, opacity;
}

#card-detail-dim {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  background: transparent;
}

#card-detail-dim.open {
  display: block;
}

#card-detail-dim.screen-centered {
  background: rgba(0, 0, 0, 0.42);
}

#card-detail-popup {
  position: fixed;
  display: flex;
  width: 24vh;
  height: auto;
  padding: 1.2vh 1.5vh 2.4vh;
  box-sizing: border-box;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7vh;
  border: 0.3vh solid #777;
  border-radius: 4.8vh 0.4vh 4.2vh 0.45vh / 0.45vh 4.2vh 0.5vh 4.8vh;
  background: #f1f1f1;
  box-shadow: 0.35vh 0.45vh 0 rgba(60, 60, 60, 0.24);
  color: #555;
  transform: translate(-50%, -50%);
}

#card-detail-cost {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: 0.25vh;
  font-size: 1.45vh;
  line-height: 1;
  color: #555;
}

#card-detail-cost .coin-inline-icon {
  width: 2.1vh;
  height: 2.1vh;
}

#card-detail-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45vh;
  margin-top: -2.6vh;
  margin-bottom: 2vh;
  font-family: var(--global-font-family);
  font-size: 1.2vh;
  line-height: 1.35;
  color: #555;
  text-align: center;
  overflow-wrap: anywhere;
}

#card-detail-body-title {
  font-family: var(--global-font-family);
  font-size: 1.5vh;
  color: #444;
  width: 100%;
  text-align: start;
}

#card-detail-popup span:not(#card-detail-body-title) {
  font-family: var(--noto-sans-kr-font-family);
}

#card-detail-buy {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 3.6vh;
  width: 14vh;
  transform: translate(-50%, -15%);
  padding: 0;
  border: 0.3vh solid #555;
  border-radius: 1.6vh 0.35vh 1.4vh 0.3vh / 0.3vh 1.35vh 0.35vh 1.55vh;
  background: #ff966c;
  color: #333;
  font-family: var(--global-font-family);
  font-size: 1.7vh;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0.2vh 0.2vh 0 0 #290c0033;
}

#card-detail-buy:active {
  background: #ffb38c;
  scale: 0.96;
}

#card-detail-buy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#card-detail-buy.close-icon-button {
  display: grid;
  width: 10vh;
  height: 3.4vh;
}

#maintenance-economy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vh;
  margin-top: 1.5vh;
}

#lumi-grave {
  display: flex;
  width: 20vh;
  height: 8vh;
  margin-bottom: 2vh;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: transform 140ms ease, opacity 140ms ease;
}

#lumi-grave.drop-target {
  opacity: 1;
  transform: scale(1.06);
}

.lumi-grave-icon {
  display: block;
  width: 20vh;
  height: 8vh;
  flex: 0 0 auto;
  object-fit: contain;
}

#maintenance-coins {
  font-size: 1.7vh;
}

#maintenance-coins .coin-inline-icon {
  width: 4vh;
  height: 4vh;
}

.coin-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35vh;
}

.coin-inline-icon {
  width: 2.2vh;
  height: 2.2vh;
  flex: 0 0 auto;
  object-fit: contain;
}

#card-area {
  display: flex;
  width: 40vh;
  min-height: 12vh;
  padding: 1.2vh;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#card-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 10vh;
  padding: 0 1.6vh;
  box-sizing: border-box;
}

@keyframes card-enter {
  from {
    opacity: 0;
    transform: scale(0.3) translateY(2vh);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes card-exit {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.5) translateY(-2vh);
  }
}

.active-lumi-slot.dragging-original .active-lumi-slot-character {
  opacity: 0.2;
}

.lumi-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: block;
  width: 9vh;
  height: 9vh;
  opacity: 1;
  pointer-events: none;
  will-change: left, top;
}

.lumi-drag-ghost img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lumi-drag-ghost.returning {
  transition:
    left 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
    top 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#active-lumi-slots {
  display: grid;
  grid-template-columns: repeat(3, 8.4vh);
  gap: 0.5vh;
  justify-content: center;
}

#reserve-lumi-slots {
  display: grid;
  grid-template-columns: repeat(2, 8.4vh);
  gap: 0.5vh;
  justify-content: center;
}

/* 정비 화면 루미 정보 팝업 */
#lumi-info-popover {
  position: fixed;
  z-index: 3500;
  display: none;
  min-width: 15vh;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  gap: 0.5vh;
  padding: 1.1vh 1.4vh;
  border: 0.28vh solid #222;
  border-radius: 1.2vh;
  background: white;
  color: #222;
  box-shadow: 0 0.6vh 0 rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

#lumi-info-popover.visible {
  display: flex;
}

#lumi-info-combo-cap {
  font-size: 1.4vh;
}

#lumi-info-max-multiplier {
  color: #666;
  font-family: var(--global-font-family);
  font-size: 1.15vh;
}

#btn-lumi-info-detail {
  width: 100%;
  margin-top: 0.25vh;
  padding: 0.5vh 0.8vh;
  border: 0.2vh solid #555;
  border-radius: 0.8vh 0.22vh 0.7vh 0.2vh / 0.2vh 0.72vh 0.22vh 0.78vh;
  background: #e1e1e1;
  color: #333;
  cursor: pointer;
  font-family: var(--global-font-family);
  font-size: 1.05vh;
  line-height: 1.2;
  pointer-events: auto;
  touch-action: manipulation;
}

#btn-lumi-info-detail:active {
  transform: scale(0.97);
}

#btn-lumi-info-detail:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2vh #fff, 0 0 0 0.4vh #555;
}

/* 게임플레이용 스킬 버블 */
#skill-bubble-popover {
  position: fixed;
  z-index: 3500;
  display: none;
  width: 6vh;
  height: 6vh;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform, opacity;
}

#skill-bubble-popover.visible {
  display: flex;
  animation: skill-bubble-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#skill-bubble-popover.hiding {
  display: flex;
  animation: skill-bubble-out 200ms ease-in forwards;
}

@keyframes skill-bubble-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes skill-bubble-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

#lumi-skill-btn {
  position: relative;
  z-index: 3600;
  margin-top: 5vh;
  width: 6vh;
  height: 6vh;
  border: none;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  padding: 0;
  pointer-events: auto;
}

#lumi-skill-btn:disabled {
  cursor: not-allowed;
}

#lumi-skill-btn:not(:disabled):active {
  transform: scale(0.9);
}

#lumi-skill-gauge-text {
  position: absolute;
  left: 50%;
  bottom: -0.6vh;
  transform: translateX(-50%);
  font-family: var(--global-font-family);
  font-size: 1.5vh;
  line-height: 1;
  color: white;
  white-space: nowrap;
  -webkit-text-stroke: 0.35vh black;
  paint-order: stroke fill;
  pointer-events: none;
}

.skill-icon-bg,
.skill-icon-fill,
.skill-icon-border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  object-fit: contain;
  pointer-events: none;
}

.skill-icon-bg {
  z-index: 1;
}

.skill-icon-fill {
  z-index: 2;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 200ms ease;
}

.skill-icon-border {
  z-index: 3;
}

.active-lumi-slot {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 0;
  border: 0.25vh solid transparent;
  border-radius: 1.2vh;
  background: transparent;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.active-lumi-slot.occupied {
  cursor: grab;
  touch-action: none;
}

.active-lumi-slot.occupied:active {
  cursor: grabbing;
}

.active-lumi-slot.battle-inactive {
  transform: scale(0.75);
  transform-origin: center;
}

.active-lumi-slot.drop-target .active-lumi-slot-character {
  animation: lumi-target-breathe 800ms ease-in-out infinite;
  transform-origin: 50% 82%;
  will-change: transform;
}

@keyframes lumi-target-breathe {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.055);
  }
}

.active-lumi-slot-shadow,
.active-lumi-slot-character {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.active-lumi-slot-status-area {
  position: relative;
  z-index: 2;
  display: block;
  width: 92%;
  flex: 0 0 auto;
  aspect-ratio: 92 / 34;
}

.active-lumi-slot-visual {
  position: relative;
  display: block;
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
}

.active-lumi-slot-shadow {
  z-index: 0;
}

.active-lumi-slot-character {
  z-index: 1;
}

.lumi-card-status {
  display: flex;
  width: 92%;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.active-lumi-slot-status {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
}

.lumi-power-badge {
  position: relative;
  display: block;
  width: 34%;
  flex: 0 0 34%;
  aspect-ratio: 1 / 1;
}

.lumi-power-icon {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.lumi-power-value {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  --outlined-text-width: 0.5vmin;
  color: white;
  font-family: var(--global-font-family);
  font-size: 2vmin;
  line-height: 1;
  pointer-events: none;
}

.merge-progress {
  display: flex;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 0;
  margin: 0;
}

.merge-progress-cell {
  display: block;
  width: 0;
  height: auto;
  min-width: 0;
  flex: 1 1 0;
}

#btn-start-stage {
  width: 20vh;
  height: 5.8vh;
  margin-top: 2.5vh;
  border: 0.3vh solid #631c00;
  border-radius: 1.8vh 0.38vh 1.55vh 0.34vh / 0.34vh 1.5vh 0.4vh 1.75vh;
  background: #f77845;
  color: white;
  cursor: pointer;
  font-family: var(--global-font-family);
  font-size: 1.7vh;
  box-shadow: 0.4vh 0.4vh 0 0 #631c0066;
}

#btn-start-stage img {
  display: block;
  width: 4vh;
  height: 4vh;
  margin: 0 auto;
}

#btn-start-stage:disabled {
  background: #aaa;
  cursor: default;
}

#btn-start-stage:active {
  transform: scale(0.96);
}

#game-over-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  font-size: 2vh;
  text-align: center;
  color: black;
  background: rgba(14, 18, 28, 0.76);
}

#run-result-panel {
  position: relative;
  display: flex;
  width: var(--mobile-stage-width);
  height: var(--mobile-stage-height);
  box-sizing: border-box;
  flex: 0 0 var(--mobile-stage-width);
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 7.2vh var(--mobile-stage-gutter) 5.2vh;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 31%, rgba(255, 218, 97, 0.48) 0 8vh, transparent 19vh),
    linear-gradient(180deg, #fffdf4 0%, #f9f4e3 58%, #efe7cf 100%);
  box-shadow: 0 0 5vh rgba(0, 0, 0, 0.28);
  color: #343434;
  isolation: isolate;
  animation: result-scene-in 360ms ease-out both;
}

#run-result-panel::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

#run-result-panel::after {
  right: -12vh;
  bottom: -17vh;
  width: 41vh;
  height: 41vh;
  box-shadow: 0 0 0 6vh rgba(255, 255, 255, 0.2);
}

#run-result-panel[data-result-state="failed"] {
  background:
    radial-gradient(circle at 50% 31%, rgba(139, 151, 175, 0.32) 0 8vh, transparent 19vh),
    linear-gradient(180deg, #f5f6f8 0%, #e9ebef 58%, #d9dde4 100%);
  color: #343943;
}

#run-result-panel[data-result-state="failed"]::after {
  box-shadow:
    0 0 0 5vh rgba(255, 255, 255, 0.18),
    0 0 0 9vh rgba(83, 94, 117, 0.06);
}

#stage-result-heading {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

#stage-result-kicker {
  min-height: 1.8vh;
  color: #987321;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.15vh;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.4;
}

#stage-result-title {
  margin: 0.8vh 0 0;
  color: #efad1d;
  font-size: 6.4vh;
  line-height: 0.9;
  letter-spacing: 0.025em;
  -webkit-text-stroke: 0.18vh #4a3b22;
  paint-order: stroke fill;
  text-shadow: 0 0.45vh 0 rgba(116, 76, 14, 0.14);
}

#run-result-panel[data-result-state="failed"] #stage-result-kicker {
  color: #687080;
}

#run-result-panel[data-result-state="failed"] #stage-result-title {
  color: #7c8596;
  -webkit-text-stroke-color: #333944;
  text-shadow: 0 0.45vh 0 rgba(30, 35, 45, 0.13);
}

#stage-result-emblem {
  position: relative;
  display: grid;
  width: 22vh;
  height: 20vh;
  flex: 0 0 20vh;
  margin-top: 1.4vh;
  place-items: center;
}

.stage-result-emblem-halo {
  position: absolute;
  width: 13.5vh;
  height: 13.5vh;
  border: 0.25vh solid rgba(222, 166, 32, 0.3);
  border-radius: 50%;
  box-shadow:
    0 0 0 1.5vh rgba(255, 255, 255, 0.38),
    0 0 0 3.3vh rgba(242, 190, 55, 0.08);
  animation: result-emblem-halo-in 620ms 160ms cubic-bezier(0.16, 0.8, 0.25, 1) both;
}

.stage-result-emblem-icon {
  position: absolute;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0.65vh 0.35vh rgba(74, 54, 15, 0.2));
  animation: result-emblem-in 560ms 100ms cubic-bezier(0.18, 1.25, 0.35, 1) both;
}

.stage-result-emblem-success {
  width: 10.5vh;
  height: 10.5vh;
}

.stage-result-emblem-failed {
  display: none;
  width: 10.5vh;
  height: 10.5vh;
  filter: drop-shadow(0 0.65vh 0.35vh rgba(23, 27, 35, 0.22));
}

#run-result-panel[data-result-state="failed"] .stage-result-emblem-success {
  display: none;
}

#run-result-panel[data-result-state="failed"] .stage-result-emblem-failed {
  display: block;
}

#run-result-panel[data-result-state="failed"] .stage-result-emblem-halo {
  border-color: rgba(86, 97, 120, 0.28);
  box-shadow:
    0 0 0 1.5vh rgba(255, 255, 255, 0.28),
    0 0 0 3.3vh rgba(83, 94, 117, 0.07);
}

#stage-result-summary {
  display: flex;
  width: 100%;
  min-height: 17vh;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  padding: 2.3vh 1.8vh 2vh;
}

#stage-result-items-section {
  display: none;
  width: 100%;
  min-height: 6.6vh;
  flex-direction: column;
  align-items: center;
  gap: 0.9vh;
  margin-top: 1.1vh;
}

#stage-result-items-section.has-items {
  display: flex;
}

#run-result-score {
  position: relative;
  display: flex;
  min-height: 6vh;
  margin-top: 0.3vh;
  align-items: center;
  justify-content: center;
}

#score2,
#score2-zero {
  display: flex;
  min-width: 8ch;
  height: 6vh;
  align-items: center;
  justify-content: center;
  color: #444;
  font-size: 4.4vh;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  text-align: center;
  transform-origin: center;
}

#score2-zero {
  position: absolute;
  inset: 0;
  visibility: hidden;
  font-size: var(--result-digit-size, 4.4vh);
  opacity: 0;
  pointer-events: none;
  transform-origin: center 72%;
}

.result-score-content {
  display: flex;
  width: var(--result-score-width);
  height: 6vh;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  transform-origin: center;
}

.result-digit-slot {
  position: relative;
  width: var(--result-digit-width, 3.2vh);
  height: 6vh;
  flex: 0 0 auto;
  opacity: 0;
  overflow: hidden;
  transform: translateY(1vh) scale(0.96);
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 9%,
      black 20%,
      black 80%,
      rgba(0, 0, 0, 0.45) 91%,
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 9%,
      black 20%,
      black 80%,
      rgba(0, 0, 0, 0.45) 91%,
      transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.result-digit-slot.rising {
  animation: result-digit-rise-in 220ms cubic-bezier(0.16, 0.82, 0.3, 1) both;
}

.result-digit-slot.visible,
.result-digit-slot.hit {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.result-digit-slot.hit {
  animation: result-digit-hit 120ms cubic-bezier(0.2, 1.3, 0.35, 1) both;
}

.result-digit-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform, filter;
}

.result-digit {
  display: flex;
  width: 100%;
  height: 6vh;
  align-items: center;
  justify-content: center;
  font-family: var(--global-font-family);
  font-size: var(--result-digit-size, 4.4vh);
  line-height: 1;
  color: #444;
  user-select: none;
}

#score2.score-break {
  transform-origin: top left;
  animation: result-score-break 1800ms linear both;
}

#score2-zero.score-zero-slam {
  visibility: visible;
  animation: result-score-zero-slam 560ms linear both;
}

@keyframes result-score-break {
  0% {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }

  8% {
    filter: grayscale(0.08);
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }

  18% {
    filter: grayscale(0.35);
    opacity: 1;
    transform: translateY(0) rotate(6deg);
  }

  58% {
    filter: grayscale(0.55);
    opacity: 1;
    transform: translateY(0) rotate(6deg);
  }

  72% {
    filter: grayscale(0.78);
    opacity: 1;
    transform: translateY(0.5vh) rotate(8deg);
  }

  76% {
    filter: grayscale(0.82);
    opacity: 1;
    transform: translateY(0vh) rotate(7.5deg);
  }

  87% {
    filter: grayscale(0.85);
    opacity: 1;
    transform: translateY(0.3vh) rotate(8deg);
  }

  100% {
    filter: grayscale(0.85);
    opacity: 0;
    transform: translateY(0.3vh) rotate(8deg);
  }
}

@keyframes result-digit-rise-in {
  0% {
    opacity: 0;
    transform: translateY(1vh) scale(0.96);
  }

  14% {
    opacity: 0;
    transform: translateY(0.82vh) scale(0.967);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes result-digit-hit {
  0% {
    transform: translateY(-0.45vh) scale(1.1);
  }

  55% {
    transform: translateY(0.12vh) scale(0.96);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes result-score-zero-slam {
  0% {
    opacity: 0;
    transform: translateY(-1.8vh) scale(1.65) rotate(0deg);
    animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }

  24% {
    opacity: 0.62;
    transform: translateY(-0.9vh) scale(1.28) rotate(0deg);
  }

  38% {
    opacity: 1;
    transform: translateY(0.55vh) scaleX(1.12) scaleY(0.86) rotate(0deg);
    animation-timing-function: cubic-bezier(0.18, 0.82, 0.24, 1);
  }

  54% {
    opacity: 1;
    transform: translateY(-0.18vh) scaleX(0.96) scaleY(1.09) rotate(0deg);
  }

  70% {
    opacity: 1;
    transform: translateY(0.16vh) scaleX(1.035) scaleY(0.97) rotate(0deg);
  }

  85% {
    opacity: 1;
    transform: translateY(-0.04vh) scaleX(0.99) scaleY(1.02) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

#btn-return-lobby {
  width: 100%;
  height: 5.8vh;
  flex: 0 0 5.8vh;
  margin-top: auto;
  border: 0.26vh solid #6d5017;
  border-radius: 1.8vh 0.38vh 1.55vh 0.34vh / 0.34vh 1.5vh 0.4vh 1.75vh;
  background: #f4bd3f;
  color: #4a3815;
  font-family: var(--global-font-family);
  font-size: 1.75vh;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
  box-shadow: 0 0.45vh 0 #b47c18;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#run-result-panel[data-result-state="failed"] #btn-return-lobby {
  border-color: #4b5260;
  background: #8d96a7;
  box-shadow: 0 0.45vh 0 #5e6675;
  color: #fff;
}

#btn-return-lobby:focus-visible {
  outline: none;
  box-shadow:
    0 0.45vh 0 #b47c18,
    0 0 0 0.28vh #fff,
    0 0 0 0.5vh #6d5017;
}

#run-result-panel[data-result-state="failed"] #btn-return-lobby:focus-visible {
  box-shadow:
    0 0.45vh 0 #5e6675,
    0 0 0 0.28vh #fff,
    0 0 0 0.5vh #4b5260;
}

#btn-return-lobby[disabled] {
  opacity: 0;
  pointer-events: none;
}

#btn-return-lobby:active {
  opacity: 0.82;
  transform: translateY(0.18vh);
}

#run-end-scene {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: none;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  background: rgba(14, 18, 28, 0.76);
}

#run-end-scene.visible {
  display: flex;
}

#run-end-panel {
  position: relative;
  display: flex;
  width: var(--mobile-stage-width);
  height: var(--mobile-stage-height);
  box-sizing: border-box;
  flex: 0 0 var(--mobile-stage-width);
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 6.2vh var(--mobile-stage-gutter) 5.2vh;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 24%, rgba(200, 151, 231, 0.32) 0 8vh, transparent 19vh),
    linear-gradient(180deg, #fcf9ff 0%, #f2eaf7 60%, #e6daee 100%);
  box-shadow: 0 0 5vh rgba(0, 0, 0, 0.28);
  isolation: isolate;
  animation: run-end-scene-in 360ms ease-out both;
}

#run-end-panel::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

#run-end-panel::after {
  right: -12vh;
  bottom: -17vh;
  width: 41vh;
  height: 41vh;
  box-shadow: 0 0 0 6vh rgba(255, 255, 255, 0.18);
}

#run-end-scene[data-outcome="failed"] #run-end-panel {
  background:
    radial-gradient(circle at 50% 24%, rgba(203, 111, 111, 0.22) 0 8vh, transparent 19vh),
    linear-gradient(180deg, #fbf8f8 0%, #f2e7e7 60%, #e7d8da 100%);
}

#run-end-scene[data-outcome="failed"] #run-end-panel::after {
  box-shadow:
    0 0 0 5vh rgba(255, 255, 255, 0.16),
    0 0 0 9vh rgba(174, 75, 75, 0.05);
}

#run-end-heading {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

#run-end-kicker {
  min-height: 1.8vh;
  color: #77528b;
  font-family: var(--noto-sans-kr-font-family);
  font-size: 1.15vh;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.4;
}

#run-end-title {
  margin-top: 0.8vh;
  color: #9b59b6;
  font-size: 6.2vh;
  line-height: 0.9;
  text-align: center;
  -webkit-text-stroke: 0.18vh #333;
  paint-order: stroke fill;
  text-shadow: 0 0.45vh 0 rgba(62, 35, 77, 0.13);
}

#run-end-scene[data-outcome="failed"] #run-end-title {
  color: #d9534f;
}

#run-end-scene[data-outcome="failed"] #run-end-kicker {
  color: #8c5f60;
}

#run-end-emblem {
  position: relative;
  display: grid;
  width: 22vh;
  height: 13vh;
  flex: 0 0 13vh;
  margin-top: 0.8vh;
  place-items: center;
}

.run-end-emblem-halo {
  position: absolute;
  width: 9.2vh;
  height: 9.2vh;
  border: 0.22vh solid rgba(143, 89, 176, 0.24);
  border-radius: 50%;
  box-shadow:
    0 0 0 1.25vh rgba(255, 255, 255, 0.34),
    0 0 0 2.8vh rgba(155, 89, 182, 0.06);
  animation: result-emblem-halo-in 620ms 160ms cubic-bezier(0.16, 0.8, 0.25, 1) both;
}

.run-end-emblem-icon {
  position: absolute;
  display: block;
  object-fit: contain;
  animation: result-emblem-in 560ms 100ms cubic-bezier(0.18, 1.25, 0.35, 1) both;
}

.run-end-emblem-cleared {
  width: 7.2vh;
  height: 7.2vh;
  filter: drop-shadow(0 0.55vh 0.3vh rgba(62, 35, 77, 0.2));
}

.run-end-emblem-failed {
  display: none;
  width: 7.2vh;
  height: 7.2vh;
  filter: drop-shadow(0 0.55vh 0.3vh rgba(63, 30, 32, 0.18));
}

#run-end-scene[data-outcome="failed"] .run-end-emblem-cleared {
  display: none;
}

#run-end-scene[data-outcome="failed"] .run-end-emblem-failed {
  display: block;
}

#run-end-scene[data-outcome="failed"] .run-end-emblem-halo {
  border-color: rgba(160, 75, 75, 0.2);
  box-shadow:
    0 0 0 1.25vh rgba(255, 255, 255, 0.28),
    0 0 0 2.8vh rgba(174, 75, 75, 0.05);
}

#run-end-score-section {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.6vh;
  margin-top: 0.8vh;
}

#run-end-score {
  color: #444;
  font-family: var(--global-font-family);
  font-size: 4.4vh;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}

#run-end-score-section[hidden],
#run-end-score[hidden],
#run-end-lumi-lineup[hidden] {
  display: none;
}

#run-end-lumi-lineup {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.7vh;
  margin-top: 1.4vh;
}

.run-end-lumi-row {
  display: grid;
  grid-template-columns: repeat(3, 7.2vh);
  justify-content: center;
  gap: 0.8vh;
}

#run-end-reserve-lumis {
  grid-template-columns: repeat(2, 7.2vh);
}

.run-end-lumi-card {
  display: flex;
  width: 7.2vh;
  min-height: 8.5vh;
  flex-direction: column;
  align-items: center;
  gap: 0.2vh;
}

.run-end-lumi-card.empty {
  min-height: 0;
}

.run-end-lumi-visual {
  position: relative;
  width: 6.72vh;
  height: 6.72vh;
}

.run-end-lumi-shadow,
.run-end-lumi-character {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.run-end-lumi-shadow {
  z-index: 0;
}

.run-end-lumi-character {
  z-index: 1;
}

.run-end-lumi-level {
  position: absolute;
  top: 0.15vh;
  left: 0.1vh;
  z-index: 2;
  padding: 0.18vh 0.38vh;
  border-radius: 0.45vh;
  background: rgba(45, 45, 50, 0.78);
  color: white;
  font-family: var(--global-font-family);
  font-size: 1.4vh;
  line-height: 1;
}

.run-end-lumi-stats {
  display: flex;
  min-height: 1.35vh;
  align-items: center;
  justify-content: center;
  gap: 0.5vh;
  color: #444;
  font-family: var(--global-font-family);
  font-size: 1.4vh;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.run-end-lumi-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.08vh;
}

.run-end-lumi-stat img {
  display: block;
  width: 1.5vh;
  height: 1.5vh;
  object-fit: contain;
}

#run-end-reward {
  display: inline-flex;
  min-height: 2.8vh;
  align-items: center;
  justify-content: center;
  gap: 0.45vh;
  color: #444;
  font-family: var(--global-font-family);
  font-size: 1.9vh;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#run-end-reward-section {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.7vh;
  margin-top: auto;
  padding-top: 1.6vh;
}

#run-end-reward img {
  display: block;
  width: 2.6vh;
  height: 2.6vh;
  object-fit: contain;
}

#btn-run-end-lobby {
  width: 100%;
  height: 5.8vh;
  flex: 0 0 5.8vh;
  margin-top: 2.2vh;
  border: 0.26vh solid #50355e;
  border-radius: 1.8vh 0.38vh 1.55vh 0.34vh / 0.34vh 1.5vh 0.4vh 1.75vh;
  background: #b97ad4;
  color: #fff;
  font-family: var(--global-font-family);
  font-size: 1.75vh;
  letter-spacing: 0.08em;
  cursor: pointer;
  outline: none;
  box-shadow: 0 0.45vh 0 #774590;
  transition: opacity 120ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

#run-end-scene[data-outcome="failed"] #btn-run-end-lobby {
  border-color: #6f383b;
  background: #d56f70;
  box-shadow: 0 0.45vh 0 #98494d;
}

#btn-run-end-lobby:focus-visible {
  box-shadow:
    0 0.45vh 0 #774590,
    0 0 0 0.28vh #fff,
    0 0 0 0.5vh #50355e;
}

#run-end-scene[data-outcome="failed"] #btn-run-end-lobby:focus-visible {
  box-shadow:
    0 0.45vh 0 #98494d,
    0 0 0 0.28vh #fff,
    0 0 0 0.5vh #6f383b;
}

#btn-run-end-lobby:active {
  opacity: 0.82;
  transform: translateY(0.18vh);
}

@keyframes run-end-scene-in {
  from {
    opacity: 0;
    transform: translateY(1.6vh) scale(1.015);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#stage-end-banner {
  position: fixed;
  inset: 0;
  z-index: 4500;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  background: rgba(10, 10, 14, 0.55);
  pointer-events: none;
}

#stage-end-banner.visible {
  display: flex;
}

#stage-end-title {
  width: 36vh;
  max-width: calc(100vw - 4vh);
  box-sizing: border-box;
  font-family: var(--global-font-family);
  font-size: 8vh;
  line-height: 0.94;
  color: #FFD343;
  text-align: center;
  white-space: normal;
  -webkit-text-stroke: 0.48vh black;
  paint-order: stroke fill;
  animation: stage-end-title-slam 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#stage-end-banner.fail #stage-end-title {
  color: #ff5a5a;
}

#stage-end-banner.final-bonus-stage #stage-end-title {
  color: #59a1f3;
}

@keyframes stage-end-title-slam {
  0% {
    opacity: 0;
    transform: scale(2.4);
  }

  60% {
    opacity: 1;
    transform: scale(0.92);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#stage-end-turn-bonus {
  display: flex;
  height: 3.4vh;
  flex: 0 0 3.4vh;
  align-items: center;
  justify-content: center;
  gap: 1.4vh;
  font-family: var(--global-font-family);
  font-size: 2.6vh;
  color: white;
  visibility: hidden;
  opacity: 0;
  -webkit-text-stroke: 0.4vh black;
  paint-order: stroke fill;
}

#stage-end-turn-bonus.visible {
  visibility: visible;
  animation: stage-end-bonus-in 0.4s ease-out both;
}

@keyframes stage-end-bonus-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#stage-end-bonus-value {
  color: #90EE90;
}

@keyframes result-scene-in {
  from {
    opacity: 0;
    transform: translateY(1.6vh) scale(1.015);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes result-emblem-in {
  from {
    opacity: 0;
    transform: translateY(1.4vh) scale(0.72) rotate(-8deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes result-emblem-halo-in {
  from {
    opacity: 0;
    transform: scale(0.68);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

#run-result-items {
  display: flex;
  width: 100%;
  min-height: 4.4vh;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 1.2vh;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5vh) scale(0.92);
}

#run-result-items.visible {
  visibility: visible;
  animation: result-items-rise 360ms cubic-bezier(0.18, 0.9, 0.3, 1.28) both;
}

@keyframes result-items-rise {
  from {
    opacity: 0;
    transform: translateY(1.5vh) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#run-result-items .result-item-entry {
  display: flex;
  align-items: center;
  gap: 0.4vh;
}

#run-result-items .result-item-icon {
  display: block;
  width: 4.4vh;
  height: 4.4vh;
  object-fit: contain;
}

#run-result-items .result-item-count {
  color: #444;
  font-size: 1.6vh;
  line-height: 1;
  white-space: nowrap;
}

#revive-confirm-dimmed {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  background: rgba(20, 20, 20, 0.42);
  pointer-events: auto;
}

#revive-confirm-dimmed.visible {
  display: block;
  animation: revive-confirm-dimmed-in 220ms ease-out both;
}

#revive-confirm-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1200;
  display: none;
  width: 28vh;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  padding: 3vh 2vh;
  border: 0.25vh solid #222;
  border-radius: 2vh;
  background: white;
  box-shadow: 0 1.2vh 3vh rgba(34, 34, 34, 0.22);
  color: #222;
  text-align: center;
  transform: translate(-50%, -50%);
}

#revive-confirm-popup.visible {
  display: flex;
  animation: revive-confirm-popup-in 260ms cubic-bezier(0.2, 1.2, 0.32, 1) both;
}

#revive-confirm-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5vh;
}

#revive-confirm-icon {
  width: 7vh;
  height: 7vh;
  object-fit: contain;
}

#revive-confirm-title {
  font-size: 2.8vh;
  color: #9b59b6;
}

#revive-confirm-desc {
  font-size: 1.3vh;
  color: #666;
  font-family: var(--global-font-family);
}

#revive-confirm-buttons {
  display: flex;
  gap: 1.5vh;
}

#btn-revive-yes,
#btn-revive-no {
  padding: 1vh 2vh;
  border: 0.2vh solid #222;
  border-radius: 1vh;
  font-family: var(--global-font-family);
  font-size: 1.3vh;
  cursor: pointer;
}

#btn-revive-yes {
  background: #9b59b6;
  color: white;
}

#btn-revive-no {
  background: #ccc;
  color: #333;
}

@keyframes revive-confirm-popup-in {
  from {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.85);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes revive-confirm-dimmed-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.card-popup-dim {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 3vh;
  background: rgba(18, 22, 35, 0.68);
  backdrop-filter: blur(0.45vh);
}

.card-popup-dim.visible {
  display: flex;
}

.card-popup-panel {
  position: relative;
  display: flex;
  width: min(86vw, 42vh);
  max-height: 82vh;
  flex-direction: column;
  box-sizing: border-box;
  padding: 2.4vh;
  overflow: hidden;
  border: 0.34vh solid #555;
  border-radius: 5.2vh 0.5vh 4.5vh 0.55vh / 0.55vh 4.6vh 0.6vh 5.1vh;
  background: #ededed;
  box-shadow: 0.45vh 0.6vh 0 rgba(40, 40, 40, 0.32);
  color: #222;
  font-family: var(--codex-font-family);
}

.card-popup-close-button {
  position: absolute;
  top: 1.2vh;
  right: 1.2vh;
  z-index: 2;
  display: grid;
  width: 4.2vh;
  height: 4.2vh;
  border: 0.3vh solid #555;
  border-radius: 1.8vh 0.38vh 1.55vh 0.34vh / 0.34vh 1.5vh 0.4vh 1.75vh;
  background: #d9d9d9;
  box-shadow: 0.1vh 0.1vh 0 0.3vh rgba(60, 60, 60, 0.2);
  cursor: pointer;
}

.card-popup-close-button:active {
  transform: scale(0.96);
}

.card-popup-close-button:focus-visible,
.ranking-popup-record-row:focus-visible,
.settings-toggle-button:focus-visible,
.settings-reset-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.28vh #fff, 0 0 0 0.5vh #555;
}

#ranking-popup {
  min-height: 40vh;
  font-size: 1.8vh;
  text-align: center;
}

#ranking-popup-title {
  margin: 0 5vh 1vh;
  color: #222;
  font-size: 2.8vh;
  line-height: 1;
}

#ranking-mode-navigation {
  display: grid;
  width: 100%;
  margin: 0 0 1.2vh;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65vh;
}

.ranking-mode-button {
  height: 3.8vh;
  border: 0;
  border-bottom: 0.28vh solid #d2d5dc;
  background: transparent;
  color: #999;
  cursor: pointer;
  font-family: var(--codex-font-family);
  font-size: 1.65vh;
  font-weight: 700;
}

.ranking-mode-button.selected {
  border-bottom-color: #444;
  color: #222;
}

#ranking-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  flex: 1;
  gap: 0.7vh;
  overflow-y: auto;
}

.ranking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.6vh;
  padding: 0.35vh 1.2vh;
  box-sizing: border-box;
  border: 0.2vh solid #888;
  border-radius: 1.6vh 0.28vh 1.4vh 0.3vh / 0.3vh 1.45vh 0.32vh 1.65vh;
  color: #222;
}

.ranking-entry {
  display: flex;
  flex-direction: column;
  gap: 0.45vh;
}

.ranking-popup-record-row {
  display: grid;
  grid-template-columns: 2.6vh minmax(0, 1fr);
  gap: 0.7vh;
  justify-content: start;
  cursor: pointer;
  touch-action: manipulation;
}

.ranking-popup-record-rank {
  text-align: left;
}

.ranking-popup-record-score {
  min-width: 0;
  overflow: hidden;
  font-family: var(--global-font-family);
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-deck-detail[hidden] {
  display: none;
}

.ranking-deck-detail {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  padding: 0.9vh 0.7vh 1vh;
  border: 0.18vh solid #aaa;
  border-radius: 0.35vh 1.7vh 0.38vh 1.5vh / 1.55vh 0.36vh 1.65vh 0.4vh;
  background: rgba(255, 255, 255, 0.66);
}

.ranking-deck-group {
  display: flex;
  flex-direction: column;
}

.ranking-deck-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.7vh;
}

.ranking-deck-card {
  display: flex;
  width: 7.2vh;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.16vh;
}

.ranking-deck-visual {
  position: relative;
  width: 5.6vh;
  height: 5.6vh;
}

.ranking-deck-shadow,
.ranking-deck-character {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ranking-deck-shadow {
  z-index: 0;
}

.ranking-deck-character {
  z-index: 1;
  overflow: hidden;
  color: #666;
  font-size: 0.8vh;
  line-height: 5.6vh;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-deck-level {
  position: absolute;
  top: 0.1vh;
  left: 0;
  z-index: 2;
  padding: 0.12vh 0.28vh;
  border-radius: 0.38vh;
  background: rgba(45, 45, 50, 0.78);
  color: #fff;
  font-family: var(--global-font-family);
  font-size: 0.95vh;
  line-height: 1;
}

.ranking-deck-stats {
  display: flex;
  min-height: 1.25vh;
  align-items: center;
  justify-content: center;
  gap: 0.4vh;
}

.ranking-deck-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.08vh;
  color: #444;
  font-family: var(--global-font-family);
  font-size: 1.15vh;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ranking-deck-stat img {
  width: 1.25vh;
  height: 1.25vh;
  object-fit: contain;
}

.ranking-deck-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #999;
  font-size: 0.75vh;
  letter-spacing: 0.04em;
}

.ranking-deck-unavailable {
  margin: 1vh 0;
  color: #777;
  font-size: 1.2vh;
  line-height: 1.4;
}

.ranking-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24vh;
  color: #777;
  font-size: 1.6vh;
}

#settings-popup {
  min-height: 26vh;
  font-size: 1.8vh;
  text-align: center;
}

#settings-popup-title {
  margin: 0 5vh 1.8vh;
  color: #222;
  font-size: 2.8vh;
  line-height: 1;
}

#settings-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5vh;
  padding: 0.7vh 1vh 0.7vh 1.3vh;
  box-sizing: border-box;
  color: #222;
}

.settings-label {
  font-size: 1.6vh;
  letter-spacing: 0.02em;
}

.settings-toggle-button {
  min-width: 6.2vh;
  height: 3.4vh;
  padding: 0 1vh;
  box-sizing: border-box;
  border: 0.2vh solid #555;
  border-radius: 1.6vh 0.28vh 1.4vh 0.3vh / 0.3vh 1.45vh 0.32vh 1.65vh;
  background: #555;
  box-shadow: 0.12vh 0.16vh 0 rgba(40, 40, 40, 0.32);
  color: #fff;
  font-family: var(--codex-font-family);
  font-size: 1.4vh;
  cursor: pointer;
}

.settings-toggle-button.off {
  border-color: #888;
  background: #ededed;
  color: #66520d;
}

.settings-toggle-button:active {
  transform: scale(0.96);
}

.settings-toggle-button:disabled {
  border-color: #aaa;
  background: #e5e5e5;
  box-shadow: none;
  color: #999;
  cursor: not-allowed;
  transform: none;
}

.settings-reset-button {
  min-width: 6.2vh;
  height: 3.4vh;
  padding: 0 1vh;
  border: 0.2vh solid #7b2222;
  border-radius: 1.6vh 0.28vh 1.4vh 0.3vh / 0.3vh 1.45vh 0.32vh 1.65vh;
  background: #d9534f;
  box-shadow: 0.12vh 0.16vh 0 rgba(90, 30, 30, 0.26);
  color: #fff;
  font-family: var(--codex-font-family);
  font-size: 1.25vh;
  cursor: pointer;
}

.settings-reset-button:active {
  transform: scale(0.96);
}