:root {
  --bg: #080d1f;
  --panel: rgba(13, 22, 48, 0.86);
  --panel-strong: rgba(8, 13, 31, 0.94);
  --line: rgba(255, 255, 255, 0.18);
  --gold: #ffd84a;
  --gold-deep: #f0a900;
  --faith: #4fe3ff;
  --grace: #60f26e;
  --danger: #ff647c;
  --ink: #f8fbff;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(79, 227, 255, 0.18), transparent 32%),
    linear-gradient(180deg, #080d1f 0%, #121735 52%, #071221 100%);
  color: var(--ink);
  font-family:
    "Pretendard",
    "Noto Sans KR",
    "Apple SD Gothic Neo",
    system-ui,
    sans-serif;
  touch-action: manipulation;
  user-select: none;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.game-shell {
  position: relative;
  width: min(100vw, calc(100dvh * 9 / 16));
  height: 100dvh;
  max-width: 540px;
  margin: 0 auto;
  overflow: hidden;
  background: #101832;
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.5);
}

.game-shell[data-state="playing"],
.game-shell[data-state="stageIntro"] {
  touch-action: none;
}

.game-shell[data-state="heavenShop"] {
  touch-action: pan-y;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #101832;
  touch-action: none;
}

.hud {
  position: absolute;
  z-index: 10;
  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 8px;
  pointer-events: none;
}

.hud-row {
  display: contents;
}

.hud-row .hud-pill:first-child {
  grid-column: 1;
}

.hud-row .level-pill {
  grid-column: 2;
}

.hud-row .score-frame-group {
  grid-column: 3 / 5;
}

.score-frame-group {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 6px;
  min-width: 0;
}

.score-penalty-float {
  position: absolute;
  top: 33px;
  right: 66px;
  z-index: 8;
  color: #ff5368;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: 0;
  pointer-events: none;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.68),
    0 0 14px rgba(255, 52, 82, 0.78);
  white-space: nowrap;
  animation: scorePenaltyFloat 3s ease-out forwards;
}

@keyframes scorePenaltyFloat {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }

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

  62% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-46px) scale(1.08);
  }
}

.hud-pill {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.level-pill {
  border-color: rgba(255, 216, 74, 0.72);
  color: #fff4b8;
}

.hud-icon {
  font-size: 17px;
}

.score-pill {
  min-width: 0;
  padding: 0 7px;
}

.score-pill strong {
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-pill {
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  padding: 3px 4px;
  border-color: rgba(79, 227, 255, 0.42);
  color: #dff9ff;
}

.frame-pill span {
  color: rgba(248, 251, 255, 0.68);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}

.frame-pill strong {
  color: #fff7c4;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1;
}

.stage-line {
  grid-column: 1 / 3;
  grid-row: span 2;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 3px;
  padding: 0 2px;
  border: 2px solid rgba(255, 216, 74, 0.22);
  border-radius: 8px;
  background: rgba(8, 13, 31, 0.68);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.stage-line strong {
  color: #fff7c4;
  overflow: hidden;
  font-size: 20px;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-line span {
  color: rgba(248, 251, 255, 0.82);
  overflow: hidden;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-group {
  grid-column: 3 / 5;
  margin-top: 0;
}

.bar-group.compact {
  margin-top: 0;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  margin: 0 4px 2px;
  color: rgba(248, 251, 255, 0.9);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.bar-label span,
.bar-label strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-label span {
  min-width: 0;
}

.bar-label strong {
  flex-shrink: 0;
  margin-left: 5px;
  font-size: 16px;
  font-weight: 1000;
}

.bar-frame {
  position: relative;
  height: 14px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.35);
}

.bar-fill {
  width: 0;
  height: 100%;
  transform-origin: left center;
  transition: width 120ms linear;
}

.faith-fill {
  background: linear-gradient(90deg, #33c7ff 0%, #62f7d6 55%, #fff47b 100%);
}

.xp-frame {
  height: 10px;
}

.xp-fill {
  background: linear-gradient(90deg, #29d75d 0%, #c8ff56 100%);
}

.blood-stone-hud {
  grid-column: 1 / 3;
}

.blood-stone-frame {
  height: 10px;
  border-color: rgba(255, 216, 138, 0.36);
  background: rgba(58, 0, 13, 0.38);
}

.blood-stone-fill {
  background: linear-gradient(90deg, #8d0615 0%, #ff4054 55%, #ffd88a 100%);
  box-shadow: 0 0 12px rgba(255, 64, 84, 0.62);
}

.equipped-skills {
  grid-column: 3 / 5;
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.skill-badge {
  display: inline-flex;
  min-width: 27px;
  height: 22px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 5px;
  border: 1px solid rgba(255, 216, 74, 0.42);
  border-radius: 7px;
  background: rgba(8, 13, 31, 0.7);
  color: #fff7c4;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.skill-badge-level {
  color: #fff06a;
  font-size: 10px;
}

.skill-badge.skill-id-truthLight .skill-badge-icon {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff7c4 0 2px, #ffcf45 3px 4px, #07162e 5px 100%);
  font-size: 0;
  box-shadow: 0 0 7px rgba(255, 216, 74, 0.58);
}

.skill-badge.skill-id-truthLight .skill-badge-icon::before,
.skill-badge.skill-id-truthLight .skill-badge-icon::after {
  position: absolute;
  content: "";
}

.skill-badge.skill-id-truthLight .skill-badge-icon::before {
  inset: -3px;
  background:
    conic-gradient(
      from -8deg,
      rgba(255, 251, 208, 0.98) 0deg 8deg,
      transparent 9deg 24deg,
      rgba(255, 179, 57, 0.92) 25deg 31deg,
      transparent 32deg 52deg,
      rgba(144, 244, 255, 0.9) 53deg 58deg,
      transparent 59deg 83deg,
      rgba(255, 247, 196, 0.98) 84deg 91deg,
      transparent 92deg 116deg,
      rgba(255, 196, 74, 0.92) 117deg 124deg,
      transparent 125deg 148deg,
      rgba(191, 249, 255, 0.88) 149deg 155deg,
      transparent 156deg 181deg,
      rgba(255, 251, 208, 0.96) 182deg 190deg,
      transparent 191deg 214deg,
      rgba(255, 161, 71, 0.82) 215deg 222deg,
      transparent 223deg 250deg,
      rgba(167, 239, 255, 0.86) 251deg 258deg,
      transparent 259deg 287deg,
      rgba(255, 247, 196, 0.98) 288deg 296deg,
      transparent 297deg 327deg,
      rgba(255, 210, 96, 0.9) 328deg 335deg,
      transparent 336deg 360deg
    );
  filter: blur(0.2px);
}

.skill-badge.skill-id-truthLight .skill-badge-icon::after {
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 34%, #fff06a 35% 70%, rgba(255, 216, 74, 0) 72%);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%);
}

.skill-badge.skill-id-faithShield .skill-badge-icon {
  position: relative;
  width: 15px;
  height: 16px;
  font-size: 0;
}

.skill-badge.skill-id-faithShield .skill-badge-icon::before,
.skill-badge.skill-id-faithShield .skill-badge-icon::after {
  position: absolute;
  content: "";
}

.skill-badge.skill-id-faithShield .skill-badge-icon::before {
  inset: 0;
  border: 1px solid rgba(205, 242, 255, 0.95);
  border-radius: 4px 4px 7px 7px;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.42), transparent 26%),
    linear-gradient(135deg, #52d8ff 0%, #1687c3 52%, #075080 100%);
  clip-path: polygon(50% 0, 88% 13%, 82% 68%, 50% 100%, 18% 68%, 12% 13%);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.34));
}

.skill-badge.skill-id-faithShield .skill-badge-icon::after {
  left: 50%;
  top: 50%;
  width: 10px;
  height: 11px;
  background:
    linear-gradient(90deg, transparent 0 34%, #ffffff 35% 65%, transparent 66%),
    linear-gradient(180deg, transparent 0 38%, #ffffff 39% 63%, transparent 64%);
  filter: drop-shadow(0 1px 0 rgba(9, 76, 118, 0.5));
  transform: translate(-50%, -50%);
}

.skill-badge.skill-id-surgingGrace .skill-badge-icon {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fffbd0 0 2px, #fff06a 3px 4px, #38dd73 5px 6px, transparent 7px),
    conic-gradient(from 205deg, transparent 0 32deg, rgba(111, 255, 153, 0.94) 33deg 68deg, transparent 69deg 122deg, rgba(255, 240, 106, 0.92) 123deg 153deg, transparent 154deg 221deg, rgba(111, 255, 153, 0.86) 222deg 256deg, transparent 257deg 360deg);
  font-size: 0;
  box-shadow: 0 0 7px rgba(96, 242, 110, 0.58);
}

.skill-badge.skill-id-surgingGrace .skill-badge-icon::before,
.skill-badge.skill-id-surgingGrace .skill-badge-icon::after {
  position: absolute;
  content: "";
}

.skill-badge.skill-id-surgingGrace .skill-badge-icon::before {
  inset: 2px;
  border: 1px solid rgba(255, 240, 106, 0.75);
  border-left-color: transparent;
  border-bottom-color: rgba(96, 242, 110, 0.86);
  border-radius: 50%;
  transform: rotate(-28deg);
}

.skill-badge.skill-id-surgingGrace .skill-badge-icon::after {
  inset: 0;
  background:
    radial-gradient(circle at 22% 36%, #87ff9f 0 2px, transparent 3px),
    radial-gradient(circle at 78% 28%, #fff06a 0 2px, transparent 3px),
    radial-gradient(circle at 72% 78%, #60f26e 0 2px, transparent 3px);
}

.skill-badge.skill-id-fullArmor .skill-badge-icon {
  position: relative;
  width: 15px;
  height: 16px;
  font-size: 0;
}

.skill-badge.skill-id-fullArmor .skill-badge-icon::before,
.skill-badge.skill-id-fullArmor .skill-badge-icon::after {
  position: absolute;
  inset: 0;
  content: "";
}

.skill-badge.skill-id-fullArmor .skill-badge-icon::before {
  background:
    linear-gradient(90deg, transparent 0 14%, #bfcbd4 15% 38%, #71808b 39% 61%, #b4c0ca 62% 85%, transparent 86%) 50% 5px / 15px 10px no-repeat,
    radial-gradient(ellipse at 18% 48%, #a9b6c0 0 5px, transparent 6px),
    radial-gradient(ellipse at 82% 48%, #a9b6c0 0 5px, transparent 6px),
    linear-gradient(180deg, #d9e1e7 0%, #8b99a4 58%, #586572 100%);
  clip-path: polygon(50% 0, 70% 16%, 88% 24%, 78% 100%, 22% 100%, 12% 24%, 30% 16%);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.skill-badge.skill-id-fullArmor .skill-badge-icon::after {
  background:
    linear-gradient(90deg, #edf4f8 0 100%) 50% 36% / 2px 8px no-repeat,
    linear-gradient(90deg, #26303b 0 100%) 50% 78% / 9px 2px no-repeat,
    linear-gradient(90deg, #caa36f 0 48%, #987852 49% 100%) 50% 94% / 11px 4px no-repeat;
}

.skill-badge.is-awakened {
  border-color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(255, 240, 106, 0.96), rgba(255, 156, 32, 0.9));
  color: #18213d;
  box-shadow: 0 0 14px rgba(255, 216, 74, 0.62);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

.skill-badge.is-awakened .skill-badge-level {
  color: #18213d;
}

.boss-banner {
  grid-column: 1 / -1;
  grid-row: 5;
  justify-self: center;
  width: min(92%, 390px);
  margin-top: 0;
  padding: 6px 9px;
  border: 2px solid rgba(255, 216, 74, 0.72);
  border-radius: 8px;
  background: rgba(66, 12, 42, 0.88);
  color: #fff3a2;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.boss-hud {
  grid-column: 1 / 3;
  grid-row: 4;
  justify-self: stretch;
  width: 100%;
  margin-top: 0;
  padding: 4px 6px 5px;
  border: 2px solid rgba(255, 100, 124, 0.7);
  border-radius: 8px;
  background: rgba(49, 8, 26, 0.88);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}

.boss-hud-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
  color: #fff3a2;
  font-size: 10px;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.boss-frame {
  height: 7px;
  border-color: rgba(255, 255, 255, 0.4);
}

.boss-fill {
  background: linear-gradient(90deg, #ff4664 0%, #ff9b40 55%, #fff06a 100%);
}

.screen {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 216, 74, 0.16), transparent 30%),
    rgba(5, 8, 20, 0.78);
  text-align: center;
}

.start-screen {
  padding-bottom: max(138px, calc(env(safe-area-inset-bottom) + 130px));
}

.start-title-lockup {
  position: relative;
  display: grid;
  width: min(100%, 500px);
  justify-items: center;
  padding-top: 104px;
}

.start-title-lockup h1 {
  position: relative;
  z-index: 2;
}

.start-screen h1,
.result-screen h2,
.choice-header h2 {
  margin: 0;
  color: #fff7c4;
  font-size: clamp(36px, 12vw, 62px);
  font-weight: 1000;
  line-height: 1.02;
  letter-spacing: 0;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.42),
    0 0 24px rgba(255, 216, 74, 0.42);
}

.title-episode {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 9px 5px;
  vertical-align: middle;
  border: 2px solid rgba(255, 216, 74, 0.9);
  border-radius: 8px;
  background: rgba(8, 13, 31, 0.78);
  color: #fff06a;
  font-size: clamp(15px, 4vw, 21px);
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.52);
}

.start-screen p,
.result-screen p,
.choice-header p {
  width: min(100%, 390px);
  margin: 14px 0 0;
  color: rgba(248, 251, 255, 0.88);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.title-mark {
  position: absolute;
  z-index: 1;
  top: -14px;
  left: clamp(12px, 7%, 34px);
  width: 82px;
  height: 108px;
  margin: 0;
  animation: titleCrossFlash 1.9s ease-in-out infinite;
  cursor: pointer;
  filter:
    drop-shadow(0 0 16px rgba(255, 216, 74, 0.72))
    drop-shadow(0 0 38px rgba(255, 170, 24, 0.5));
  touch-action: manipulation;
  user-select: none;
}

.title-mark::before,
.title-mark::after {
  position: absolute;
  inset: 0;
  display: block;
  content: "";
  clip-path: polygon(39% 0, 61% 0, 65% 24%, 92% 30%, 92% 43%, 65% 47%, 61% 100%, 39% 100%, 35% 47%, 8% 43%, 8% 30%, 35% 24%);
}

.title-mark::before {
  z-index: 1;
  background: linear-gradient(180deg, #fff8a8 0%, #ffe04f 48%, #f7c600 100%);
  filter:
    drop-shadow(0 0 16px rgba(255, 216, 74, 0.82))
    drop-shadow(0 8px 0 rgba(0, 0, 0, 0.22));
}

.title-mark::after {
  z-index: 0;
  inset: -4px;
  background: rgba(255, 255, 255, 0.78);
  filter: drop-shadow(0 0 24px rgba(255, 216, 74, 0.58));
}

@keyframes titleCrossFlash {
  0%,
  100% {
    filter:
      drop-shadow(0 0 16px rgba(255, 216, 74, 0.72))
      drop-shadow(0 0 38px rgba(255, 170, 24, 0.5));
  }
  50% {
    filter:
      drop-shadow(0 0 24px rgba(255, 247, 181, 0.98))
      drop-shadow(0 0 54px rgba(255, 216, 74, 0.72));
  }
}

.result-icon {
  display: grid;
  width: 82px;
  height: 82px;
  margin-bottom: 18px;
  place-items: center;
  border: 4px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: radial-gradient(circle, #fff8b2 0%, #ffd84a 44%, #26d6ff 100%);
  color: #14213f;
  font-size: 42px;
  font-weight: 1000;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.24);
}

.primary-button {
  min-width: 190px;
  min-height: 58px;
  margin-top: 28px;
  padding: 0 28px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff06a 0%, #ffc529 55%, #f09800 100%);
  color: #25304e;
  font-size: 22px;
  font-weight: 1000;
  box-shadow:
    0 7px 0 #995f00,
    0 16px 28px rgba(0, 0, 0, 0.32);
}

.primary-button:active {
  transform: translateY(4px);
  box-shadow:
    0 3px 0 #995f00,
    0 10px 20px rgba(0, 0, 0, 0.28);
}

.start-actions,
.ranking-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.start-actions .primary-button,
.ranking-actions .primary-button {
  margin-top: 0;
}

.start-actions .secondary-button,
.ranking-actions .secondary-button {
  min-height: 58px;
  padding: 0 22px;
  font-size: 18px;
}

.event-notice {
  display: grid;
  width: min(100%, 390px);
  gap: 5px;
  margin-top: 52px;
  padding: 12px 14px;
  border: 3px solid rgba(255, 216, 74, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 216, 74, 0.15), rgba(255, 140, 32, 0.08)),
    rgba(8, 13, 31, 0.9);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.34),
    0 0 24px rgba(255, 216, 74, 0.22);
  color: #fff8bd;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.event-notice strong {
  color: #fff06a;
  font-size: 17px;
  font-weight: 1000;
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.6);
}

.event-notice span {
  display: block;
  white-space: pre-line;
}

.start-legacy-ranking {
  position: absolute;
  z-index: 2;
  top: max(14px, calc(env(safe-area-inset-top) + 10px));
  right: 14px;
  display: grid;
  width: min(252px, calc(100% - 28px));
  gap: 7px;
  padding: 11px 12px;
  border: 2px solid rgba(255, 216, 74, 0.7);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 216, 74, 0.14), rgba(84, 180, 255, 0.08)),
    rgba(8, 13, 31, 0.86);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.28),
    0 0 24px rgba(255, 216, 74, 0.18);
  color: #fff7c4;
  pointer-events: none;
  text-align: left;
}

.start-legacy-ranking strong {
  color: #fff06a;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 216, 74, 0.55);
}

.start-legacy-ranking ol {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.start-legacy-ranking li {
  display: grid;
  grid-template-columns: 1.45em minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 3px;
  color: rgba(248, 251, 255, 0.86);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.18;
}

.start-legacy-ranking .ranking-score {
  grid-column: 2 / 4;
  color: rgba(248, 251, 255, 0.72);
  font-size: 11px;
  justify-self: start;
}

.start-legacy-ranking li.ranking-top {
  margin: 1px -2px;
  padding: 5px 6px;
  border-radius: 7px;
}

.start-legacy-ranking li.ranking-locked {
  opacity: 0.74;
  padding: 4px 5px;
  border: 1px dashed rgba(255, 216, 74, 0.28);
  border-radius: 7px;
}

.event-notice ~ .secret-stats-panel {
  margin-top: 34px;
}

.event-notice ~ .creator-credit {
  margin-top: 44px;
}

.secret-stats-panel {
  display: grid;
  width: min(100%, 390px);
  gap: 6px;
  margin-top: 12px;
  padding: 11px 14px;
  border: 2px solid rgba(105, 232, 255, 0.7);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(105, 232, 255, 0.18), rgba(255, 216, 74, 0.1)),
    rgba(8, 13, 31, 0.92);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.3),
    0 0 22px rgba(105, 232, 255, 0.2);
  color: #e8fbff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.secret-stats-panel strong {
  color: #fff06a;
  font-size: 16px;
  font-weight: 1000;
}

.secret-stats-panel div {
  display: grid;
  gap: 4px;
}

.secret-stats-panel span {
  display: block;
}

.ranking-screen {
  justify-content: center;
  background:
    radial-gradient(circle at 50% 24%, rgba(79, 227, 255, 0.16), transparent 28%),
    rgba(5, 8, 20, 0.86);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.quality-screen {
  justify-content: center;
  padding-bottom: max(132px, calc(env(safe-area-inset-bottom) + 124px));
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 216, 74, 0.18), transparent 30%),
    rgba(5, 8, 20, 0.88);
  overflow-y: auto;
}

.heaven-shop-screen {
  justify-content: flex-start;
  padding: max(20px, calc(env(safe-area-inset-top) + 14px)) 10px max(88px, calc(env(safe-area-inset-bottom) + 84px));
  background:
    radial-gradient(circle at 76% 10%, rgba(255, 246, 177, 0.96) 0 18px, rgba(184, 124, 34, 0.92) 19px 48px, rgba(120, 77, 20, 0.34) 49px 112px, transparent 114px),
    radial-gradient(circle at 18% 82%, rgba(62, 123, 82, 0.48), transparent 38%),
    linear-gradient(180deg, #16364f 0%, #245b67 33%, #8d6a25 66%, #1f684d 100%);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.heaven-shop-screen::-webkit-scrollbar {
  display: none;
}

.heaven-shop-screen::before,
.heaven-shop-screen::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.heaven-shop-screen::before {
  background:
    radial-gradient(ellipse at 11% 16%, rgba(255, 255, 244, 0.58) 0 38px, transparent 41px),
    radial-gradient(ellipse at 22% 13%, rgba(244, 252, 240, 0.46) 0 48px, transparent 52px),
    radial-gradient(ellipse at 38% 17%, rgba(255, 244, 204, 0.35) 0 34px, transparent 38px),
    radial-gradient(ellipse at 64% 21%, rgba(255, 250, 224, 0.44) 0 50px, transparent 54px),
    radial-gradient(ellipse at 78% 19%, rgba(236, 246, 231, 0.32) 0 37px, transparent 41px),
    linear-gradient(100deg, transparent 0 11%, rgba(255, 225, 118, 0.25) 12% 13%, transparent 14% 32%, rgba(255, 245, 180, 0.2) 33% 34%, transparent 35% 100%),
    linear-gradient(180deg, rgba(8, 28, 46, 0.36), transparent 45%);
}

.heaven-shop-screen::after {
  background:
    radial-gradient(circle at 7% 92%, #d9b64a 0 5px, transparent 6px),
    radial-gradient(circle at 12% 88%, #c78696 0 5px, transparent 6px),
    radial-gradient(circle at 18% 94%, #79c579 0 5px, transparent 6px),
    radial-gradient(circle at 88% 92%, #d9b64a 0 5px, transparent 6px),
    radial-gradient(circle at 82% 87%, #c78696 0 5px, transparent 6px),
    linear-gradient(180deg, transparent 0 70%, rgba(49, 112, 66, 0.46) 72%, rgba(15, 88, 59, 0.82) 100%),
    repeating-linear-gradient(104deg, transparent 0 18px, rgba(10, 83, 60, 0.46) 19px 21px, transparent 22px 42px);
  opacity: 0.95;
}

.heaven-shop-screen > * {
  position: relative;
  z-index: 1;
}

.heaven-shop-screen .choice-header {
  position: relative;
  width: min(100%, 520px);
  padding: 10px 18px 13px;
  border: 4px solid rgba(226, 190, 96, 0.96);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 248, 214, 0.94), rgba(185, 154, 75, 0.9)),
    linear-gradient(90deg, #124454, #2c725c);
  box-shadow:
    0 6px 0 rgba(82, 64, 24, 0.74),
    0 14px 28px rgba(3, 35, 45, 0.42),
    0 0 28px rgba(198, 139, 38, 0.34);
}

.heaven-shop-screen .choice-header::before,
.heaven-shop-screen .choice-header::after {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 32px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 58%, rgba(255, 255, 255, 0.98) 0 14px, transparent 15px),
    radial-gradient(circle at 62% 42%, rgba(255, 255, 255, 0.95) 0 18px, transparent 19px),
    radial-gradient(circle at 78% 62%, rgba(255, 255, 255, 0.92) 0 13px, transparent 14px);
  content: "";
  transform: translateY(-50%);
}

.heaven-shop-screen .choice-header::before {
  left: -20px;
}

.heaven-shop-screen .choice-header::after {
  right: -20px;
}

.heaven-shop-screen .choice-header span {
  margin-bottom: 5px;
  border: 2px solid rgba(255, 224, 136, 0.74);
  background: linear-gradient(180deg, #d1a23b, #725116);
  color: #fff2b8;
  text-shadow: 0 1px 0 rgba(31, 21, 2, 0.72);
}

.heaven-shop-screen .choice-header h2 {
  color: #16362f;
  font-size: clamp(34px, 9vw, 50px);
  text-shadow:
    0 1px 0 rgba(255, 247, 203, 0.9),
    0 2px 0 rgba(95, 66, 14, 0.34),
    0 0 14px rgba(255, 231, 120, 0.46);
}

.heaven-shop-screen .choice-header p {
  width: min(100%, 440px);
  margin: 8px auto 0;
  color: #214b3f;
  font-weight: 1000;
  line-height: 1.38;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 247, 203, 0.65);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.heaven-shop-status {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.heaven-shop-status div {
  display: grid;
  gap: 3px;
  min-height: 48px;
  align-content: center;
  padding: 6px 7px;
  border: 2px solid rgba(222, 188, 96, 0.84);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 246, 211, 0.9), rgba(69, 101, 74, 0.84));
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 128, 0.42),
    0 4px 0 rgba(62, 53, 20, 0.52),
    0 10px 16px rgba(4, 35, 41, 0.28);
}

.heaven-shop-status span {
  color: #203c34;
  font-size: 11px;
  font-weight: 900;
}

.heaven-shop-status strong {
  color: #f7d574;
  font-size: 16px;
  font-weight: 1000;
  text-shadow:
    0 2px 0 rgba(39, 27, 6, 0.62),
    0 0 8px rgba(255, 230, 128, 0.34);
}

.heaven-shop-cards {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
  padding: 13px;
  border: 4px solid rgba(219, 181, 86, 0.88);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(26, 90, 89, 0.78), rgba(31, 95, 64, 0.76)),
    repeating-linear-gradient(90deg, rgba(255, 226, 128, 0.11) 0 2px, transparent 3px 38px);
  box-shadow:
    inset 0 0 0 2px rgba(171, 123, 39, 0.46),
    0 8px 0 rgba(62, 51, 22, 0.66),
    0 18px 32px rgba(1, 28, 38, 0.42);
}

.heaven-shop-card {
  position: relative;
  display: grid;
  min-height: 104px;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 11px 6px 9px;
  border: 3px solid rgba(246, 218, 141, 0.96);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0 58%, rgba(13, 60, 58, 0.76) 100%),
    radial-gradient(circle at 50% 15%, rgba(255, 240, 177, 0.68), transparent 36%),
    linear-gradient(180deg, #f2d978 0%, #b77c25 50%, #6f4515 100%);
  color: #31422b;
  text-align: center;
  box-shadow:
    inset 0 0 0 2px rgba(255, 244, 190, 0.22),
    0 5px 0 rgba(74, 45, 12, 0.68),
    0 10px 16px rgba(4, 40, 44, 0.3);
}

.heaven-shop-card.is-equipped {
  border-color: #ffe8a2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0 58%, rgba(8, 81, 61, 0.68) 100%),
    radial-gradient(circle at 50% 18%, rgba(255, 242, 166, 0.82), transparent 40%),
    linear-gradient(180deg, #e2c95c, #57bb7a 54%, #198357);
  box-shadow:
    0 5px 0 rgba(40, 83, 38, 0.68),
    0 0 24px rgba(218, 171, 57, 0.56);
}

.heaven-shop-card.is-locked {
  opacity: 0.64;
}

.heaven-shop-card.is-equipped.is-locked {
  opacity: 0.95;
}

.heaven-shop-card:focus-visible,
.heaven-shop-card.is-keyboard-selected,
.heaven-shop-actions button:focus-visible,
.heaven-shop-actions button.is-keyboard-selected {
  outline: 4px solid #ffffff;
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgba(210, 148, 36, 0.46),
    0 12px 22px rgba(0, 0, 0, 0.42);
}

.heaven-card-cost {
  position: absolute;
  top: 4px;
  left: 5px;
  display: grid;
  min-width: 31px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 221, 130, 0.76);
  background: linear-gradient(180deg, rgba(107, 75, 26, 0.94), rgba(35, 55, 47, 0.96));
  color: #ffe9a3;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 106, 0.14),
    0 2px 5px rgba(5, 35, 40, 0.25);
}

.heaven-card-icon {
  width: 52px;
  height: 52px;
}

.heaven-item-icon {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(255, 226, 148, 0.9);
  border-radius: 12px;
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 242, 185, 0.72), transparent 28%),
    linear-gradient(135deg, #d4a938, #2c8793 48%, #123f58);
  color: #173b35;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 30px;
  font-weight: 1000;
  line-height: 1;
  box-shadow:
    inset 0 -9px 13px rgba(5, 34, 48, 0.48),
    0 0 14px rgba(206, 166, 64, 0.48),
    0 4px 10px rgba(4, 39, 44, 0.36);
}

.heaven-item-icon::before {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 18deg, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.0) 24% 100%);
  content: "";
  opacity: 0.54;
}

.heaven-item-icon::after {
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: radial-gradient(circle at 45% 30%, rgba(255, 255, 255, 0.52), transparent 42%);
  content: "";
}

.heaven-icon-glyph {
  position: relative;
  z-index: 1;
  display: block;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.82));
  transform: translateY(1px);
}

.heaven-icon-graceLonging {
  background:
    radial-gradient(circle at 50% 46%, #ffffff 0 9px, #fff06a 10px 18px, transparent 19px),
    linear-gradient(135deg, #fff9a8, #45dbff 54%, #42e88b);
}

.heaven-icon-wordMeditation {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 237, 176, 0.72), transparent 28%),
    linear-gradient(135deg, #9d7a2b, #1f5d86 52%, #32295f);
}

.heaven-icon-wordMeditation .heaven-icon-glyph {
  transform: rotate(-10deg) scale(1.04);
}

.heaven-icon-firmFaith {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 236, 166, 0.82) 0 12px, transparent 13px),
    linear-gradient(135deg, #bc8c2e, #98475f 54%, #236b60);
}

.heaven-icon-healingBottle {
  background:
    radial-gradient(circle at 42% 34%, rgba(255, 242, 185, 0.74), transparent 26%),
    linear-gradient(135deg, #a89238, #268950 46%, #1b6873);
}

.heaven-icon-shieldScroll {
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 251, 208, 0.8) 0 14px, transparent 15px),
    linear-gradient(135deg, #d5a437, #8a5c1e 48%, #285f76);
}

.heaven-icon-shieldScroll .heaven-icon-glyph {
  opacity: 0;
}

.heaven-icon-shieldScroll::before {
  inset: auto;
  top: 17px;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 34px;
  border-radius: 5px 5px 12px 12px;
  background:
    radial-gradient(circle at 18% 15%, #fffbd0 0 4px, #ffcf45 5px 8px, transparent 9px),
    radial-gradient(circle at 50% 4%, #fffbd0 0 5px, #ffcf45 6px 10px, transparent 11px),
    radial-gradient(circle at 82% 15%, #fffbd0 0 4px, #ffcf45 5px 8px, transparent 9px),
    linear-gradient(180deg, #fff4a3 0%, #ffd447 44%, #c47b1e 100%);
  clip-path: polygon(0 78%, 8% 28%, 29% 58%, 50% 0, 71% 58%, 92% 28%, 100% 78%, 100% 100%, 0 100%);
  filter: drop-shadow(0 4px 0 rgba(48, 29, 7, 0.36)) drop-shadow(0 0 12px rgba(255, 240, 106, 0.62));
  opacity: 1;
  transform: translateX(-50%);
}

.heaven-icon-shieldScroll::after {
  inset: auto;
  top: 43px;
  left: 50%;
  z-index: 3;
  width: 42px;
  height: 11px;
  border: 2px solid rgba(255, 251, 208, 0.9);
  border-radius: 10px;
  background:
    radial-gradient(circle at 23% 50%, #9ef3ff 0 3px, transparent 4px),
    radial-gradient(circle at 50% 50%, #fffbd0 0 3px, transparent 4px),
    radial-gradient(circle at 77% 50%, #ff8c9a 0 3px, transparent 4px),
    linear-gradient(180deg, #ffd447, #b86a18);
  box-shadow: 0 0 12px rgba(255, 240, 106, 0.54);
  opacity: 1;
  transform: translateX(-50%);
}

.heaven-icon-discernmentLight {
  background:
    linear-gradient(115deg, rgba(255, 232, 153, 0.82) 0 18%, transparent 19% 31%, rgba(255, 244, 192, 0.58) 32% 42%, transparent 43%),
    linear-gradient(135deg, #c69b31, #276d80 52%, #266a4d);
}

.heaven-icon-intercessionPower {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 236, 166, 0.84) 0 9px, transparent 10px),
    linear-gradient(135deg, #bf8a2f, #924e81 50%, #343c85);
}

.heaven-icon-regenerationGrace {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 238, 178, 0.7), transparent 28%),
    conic-gradient(from 10deg, #c49b33, #329a68, #2c7e93, #684c9b, #c49b33);
}

.heaven-icon-holyOfHolies {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 243, 196, 0.82) 0 12px, transparent 13px),
    linear-gradient(135deg, #d3b964, #43839a 50%, #3a8a5b);
}

.heaven-icon-multiplicationBlessing {
  background:
    radial-gradient(circle at 38% 26%, rgba(255, 236, 174, 0.68), transparent 26%),
    linear-gradient(135deg, #c4a343, #8da334 48%, #367d4b);
}

.heaven-icon-fireArrowGuard {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 229, 160, 0.72), transparent 25%),
    linear-gradient(135deg, #c49131, #9d4d22 44%, #1e7488);
}

.heaven-icon-fireArrowGuard .heaven-icon-glyph {
  transform: rotate(-16deg) scale(1.08);
}

.heaven-icon-holyMark {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 245, 203, 0.9) 0 8px, #d7b24c 9px 17px, transparent 18px),
    linear-gradient(135deg, #c2a14a, #347f92 52%, #5b478c);
}

.heaven-icon-judgmentTrumpet {
  background:
    radial-gradient(circle at 70% 28%, rgba(255, 232, 164, 0.75), transparent 24%),
    linear-gradient(135deg, #cf9f34, #9c5d26 50%, #2c7a89);
}

.heaven-icon-judgmentTrumpet .heaven-icon-glyph {
  transform: rotate(-14deg) scale(1.08);
}

.heaven-icon-heavenGlory {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 247, 211, 0.94) 0 8px, #d6ae3c 9px 22px, rgba(120, 72, 16, 0.32) 23px 30px, transparent 31px),
    conic-gradient(from 0deg, #c69b31, #ead58b, #367d91, #548d46, #c69b31);
}

.heaven-icon-heavenlyHosts {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 242, 188, 0.72), transparent 30%),
    linear-gradient(135deg, #b98f32, #784f7b 50%, #2d7586);
}

.heaven-icon-redemptionCross {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 235, 164, 0.84) 0 8px, transparent 9px),
    linear-gradient(135deg, #bd8e2d, #e3dba7 44%, #2b7789);
}

.heaven-icon-graceLonging .heaven-icon-glyph,
.heaven-icon-firmFaith .heaven-icon-glyph,
.heaven-icon-healingBottle .heaven-icon-glyph,
.heaven-icon-discernmentLight .heaven-icon-glyph,
.heaven-icon-holyOfHolies .heaven-icon-glyph,
.heaven-icon-heavenlyHosts .heaven-icon-glyph,
.heaven-icon-redemptionCross .heaven-icon-glyph {
  opacity: 0;
}

.heaven-icon-graceLonging::before {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(#fffbd0, #fffbd0) 13px 16px / 18px 5px no-repeat,
    linear-gradient(#fffbd0, #fffbd0) 19px 10px / 5px 18px no-repeat,
    linear-gradient(#ffe15b, #ffe15b) 31px 27px / 21px 5px no-repeat,
    linear-gradient(#ffe15b, #ffe15b) 39px 19px / 5px 21px no-repeat,
    linear-gradient(#fff4a3, #fff4a3) 15px 40px / 18px 5px no-repeat,
    linear-gradient(#fff4a3, #fff4a3) 21px 34px / 5px 18px no-repeat,
    linear-gradient(#c99325, #c99325) 42px 43px / 14px 4px no-repeat,
    linear-gradient(#c99325, #c99325) 47px 38px / 4px 14px no-repeat,
    radial-gradient(circle at 52% 52%, rgba(255, 240, 106, 0.42), transparent 45%);
  opacity: 1;
}

.heaven-icon-graceLonging::after {
  inset: 5px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 240, 106, 0.82), transparent 42%),
    linear-gradient(160deg, rgba(10, 75, 72, 0.18), rgba(5, 42, 62, 0.38));
}

.heaven-icon-firmFaith::before {
  inset: auto;
  top: 49%;
  left: 50%;
  z-index: 1;
  width: 25px;
  height: 25px;
  border-radius: 6px 6px 4px 6px;
  background: linear-gradient(135deg, #fff6a6, #ffb13e 55%, #d86a21);
  box-shadow:
    inset -4px -5px 8px rgba(114, 54, 17, 0.24),
    0 0 12px rgba(255, 240, 106, 0.58);
  opacity: 1;
  transform: translate(-50%, -38%) rotate(45deg);
}

.heaven-icon-firmFaith::after {
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 40% 38%, #fff6a6 0 10px, #ffb13e 11px 13px, transparent 14px),
    radial-gradient(circle at 60% 38%, #fff6a6 0 10px, #ffb13e 11px 13px, transparent 14px);
}

.heaven-icon-healingBottle::before {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, #7b4c20 0 7px, #d4a05e 8px 10px, transparent 11px) 50% 7px / 16px 13px no-repeat,
    linear-gradient(180deg, transparent 0 34%, rgba(107, 255, 166, 0.9) 35% 78%, transparent 79%) 50% 48% / 28px 42px no-repeat,
    radial-gradient(ellipse at 50% 64%, rgba(31, 184, 92, 0.94) 0 18px, transparent 19px),
    radial-gradient(circle at 43% 40%, rgba(255, 255, 255, 0.86) 0 4px, transparent 5px),
    linear-gradient(180deg, rgba(233, 255, 255, 0.18), rgba(14, 115, 87, 0.32));
  opacity: 1;
}

.heaven-icon-healingBottle::after {
  inset: auto;
  top: 51%;
  left: 50%;
  z-index: 2;
  width: 31px;
  height: 42px;
  border: 3px solid rgba(239, 255, 239, 0.96);
  border-radius: 8px 8px 15px 15px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 26%),
    linear-gradient(180deg, transparent 0 36%, rgba(74, 236, 125, 0.22) 37% 100%);
  clip-path: polygon(35% 0, 65% 0, 65% 25%, 82% 39%, 82% 88%, 69% 100%, 31% 100%, 18% 88%, 18% 39%, 35% 25%);
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.5),
    0 0 9px rgba(115, 255, 171, 0.5);
  transform: translate(-50%, -39%);
}

.heaven-icon-discernmentLight::before {
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, #fffbd0 0 6px, #ffcf45 7px 11px, transparent 12px),
    linear-gradient(90deg, transparent 0 10%, #fffbd0 11% 89%, transparent 90%) 50% 50% / 42px 4px no-repeat,
    linear-gradient(0deg, transparent 0 10%, #fffbd0 11% 89%, transparent 90%) 50% 50% / 4px 42px no-repeat,
    linear-gradient(45deg, transparent 0 12%, #ffe063 13% 87%, transparent 88%) 50% 50% / 39px 4px no-repeat,
    linear-gradient(135deg, transparent 0 12%, #ffe063 13% 87%, transparent 88%) 50% 50% / 39px 4px no-repeat,
    linear-gradient(18deg, transparent 0 18%, rgba(255, 251, 208, 0.82) 19% 81%, transparent 82%) 50% 50% / 44px 3px no-repeat,
    linear-gradient(108deg, transparent 0 18%, rgba(255, 251, 208, 0.82) 19% 81%, transparent 82%) 50% 50% / 44px 3px no-repeat;
  opacity: 1;
}

.heaven-icon-discernmentLight::after {
  inset: 7px;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 50%);
  opacity: 0.72;
}

.heaven-icon-holyOfHolies::before {
  inset: -2px;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 52%, #ffffff 0 8px, #fff06a 9px 17px, rgba(255, 197, 47, 0.44) 18px 25px, transparent 26px),
    conic-gradient(from 6deg, rgba(255, 255, 255, 0), rgba(255, 247, 158, 0.95), rgba(255, 255, 255, 0) 12% 18%, rgba(255, 218, 67, 0.82) 19% 26%, rgba(255, 255, 255, 0) 27% 100%);
  opacity: 1;
}

.heaven-icon-holyOfHolies::after {
  inset: auto;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 22px;
  height: 31px;
  border-radius: 14px 14px 5px 5px;
  background:
    radial-gradient(circle at 50% 35%, #ffffff 0 7px, #fff8b2 8px 15px, rgba(255, 210, 56, 0.9) 16px 100%);
  box-shadow:
    0 0 13px rgba(255, 240, 106, 0.9),
    0 0 28px rgba(255, 255, 255, 0.68);
  transform: translate(-50%, -48%);
}

.heaven-icon-heavenlyHosts::before {
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 31% 48%, #ffffff 0 13px, rgba(209, 244, 255, 0.94) 14px 18px, transparent 19px),
    radial-gradient(ellipse at 69% 48%, #ffffff 0 13px, rgba(209, 244, 255, 0.94) 14px 18px, transparent 19px),
    radial-gradient(ellipse at 22% 58%, rgba(236, 253, 255, 0.96) 0 12px, transparent 13px),
    radial-gradient(ellipse at 78% 58%, rgba(236, 253, 255, 0.96) 0 12px, transparent 13px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(107, 200, 255, 0.18));
  opacity: 1;
}

.heaven-icon-heavenlyHosts::after {
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(28deg, transparent 0 36%, rgba(168, 220, 255, 0.55) 37% 41%, transparent 42%),
    linear-gradient(152deg, transparent 0 36%, rgba(168, 220, 255, 0.55) 37% 41%, transparent 42%),
    radial-gradient(ellipse at 50% 58%, rgba(255, 255, 255, 0.82) 0 4px, transparent 5px);
}

.heaven-icon-redemptionCross::before {
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 240, 106, 0.62) 0 14px, transparent 25px),
    linear-gradient(180deg, rgba(60, 125, 154, 0.14), rgba(20, 61, 82, 0.36));
  opacity: 1;
}

.heaven-icon-redemptionCross::after {
  inset: 7px;
  z-index: 2;
  background:
    linear-gradient(90deg, transparent 0 37%, #fff5a8 38% 62%, transparent 63%),
    linear-gradient(180deg, transparent 0 14%, #fff5a8 15% 88%, transparent 89%);
  filter:
    drop-shadow(0 2px 0 rgba(90, 58, 12, 0.38))
    drop-shadow(0 0 5px rgba(255, 216, 74, 0.46));
}

.heaven-shop-card > strong {
  display: block;
  width: calc(100% - 6px);
  min-height: 25px;
  padding: 4px 5px;
  border: 1px solid rgba(255, 239, 167, 0.36);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(24, 82, 68, 0.98), rgba(5, 30, 38, 0.98));
  color: #fff4b8;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.15;
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 106, 0.22),
    0 2px 7px rgba(3, 28, 34, 0.42);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.76),
    0 0 7px rgba(255, 240, 106, 0.28);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.heaven-card-state {
  position: absolute;
  right: 5px;
  top: 5px;
  display: inline-grid;
  min-height: 17px;
  align-items: center;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: linear-gradient(180deg, #65f0a2, #19c976);
  color: #052313;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
}

.heaven-shop-card.is-locked .heaven-card-state {
  background: linear-gradient(180deg, #d5dec5, #8a9875);
  color: #2d352b;
}

.heaven-shop-message {
  width: min(100%, 560px);
  margin: 9px 0 0;
  padding: 5px 8px;
  border: 2px solid rgba(220, 177, 77, 0.72);
  border-radius: 8px;
  background: rgba(24, 60, 56, 0.66);
  color: #ffe9a4;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.heaven-shop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  width: min(100%, 560px);
  margin-top: 9px;
}

.heaven-shop-actions .primary-button,
.heaven-shop-actions .secondary-button {
  min-height: 50px;
  margin-top: 0;
  padding: 0 18px;
  font-size: 17px;
}

.heaven-shop-screen.is-detail .heaven-shop-actions {
  display: none;
}

.heaven-shop-screen.is-detail .heaven-shop-cards {
  width: min(100%, 460px);
  grid-template-columns: 1fr;
}

.heaven-shop-detail {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 4px solid rgba(224, 184, 86, 0.94);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 231, 144, 0.54), transparent 40%),
    linear-gradient(180deg, rgba(255, 243, 197, 0.94), rgba(63, 105, 73, 0.92)),
    rgba(16, 55, 57, 0.88);
  box-shadow:
    0 6px 0 rgba(75, 55, 18, 0.56),
    0 0 26px rgba(167, 112, 26, 0.32);
  color: #183d35;
  text-align: center;
}

.heaven-detail-icon {
  width: 78px;
  height: 78px;
  justify-self: center;
  font-size: 46px;
}

.heaven-detail-copy {
  display: grid;
  gap: 5px;
}

.heaven-detail-copy span {
  color: #214c40;
  font-size: 12px;
  font-weight: 1000;
}

.heaven-detail-copy h3 {
  margin: 0;
  color: #6a3f08;
  font-size: 24px;
  font-weight: 1000;
  line-height: 1.12;
}

.heaven-detail-copy p {
  margin: 0;
  color: #1f4339;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  word-break: keep-all;
}

.heaven-detail-cost {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.heaven-detail-cost div {
  display: grid;
  gap: 3px;
  min-height: 58px;
  align-content: center;
  border: 2px solid rgba(173, 119, 32, 0.52);
  border-radius: 8px;
  background: rgba(255, 240, 190, 0.62);
}

.heaven-detail-cost span {
  color: #26483c;
  font-size: 11px;
  font-weight: 900;
}

.heaven-detail-cost strong {
  color: #754806;
  font-size: 17px;
  font-weight: 1000;
}

.heaven-detail-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.heaven-detail-actions .primary-button,
.heaven-detail-actions .secondary-button {
  min-height: 52px;
  margin-top: 0;
  padding: 0 24px;
  font-size: 18px;
}

.heaven-score-note {
  margin: 8px auto 0;
  padding: 8px 10px;
  border: 2px solid rgba(255, 216, 74, 0.62);
  border-radius: 8px;
  background: rgba(8, 13, 31, 0.58);
  color: #fff7c4;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.quality-options {
  display: grid;
  width: min(100%, 460px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.quality-card {
  display: grid;
  min-height: 158px;
  gap: 8px;
  align-content: center;
  justify-items: center;
  padding: 16px 10px;
  border: 3px solid rgba(255, 247, 196, 0.92);
  border-radius: 8px;
  background: rgba(8, 13, 31, 0.92);
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.42),
    0 16px 28px rgba(0, 0, 0, 0.32);
  color: #fff7c4;
  text-align: center;
}

.quality-card:active {
  transform: translateY(4px);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.45),
    0 10px 20px rgba(0, 0, 0, 0.28);
}

.ultra-quality-card {
  grid-column: 1 / -1;
  min-height: 132px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(255, 216, 74, 0.24), rgba(123, 60, 255, 0.2) 54%, rgba(79, 227, 255, 0.16)),
    rgba(8, 13, 31, 0.94);
}

.high-quality-card {
  background:
    linear-gradient(180deg, rgba(255, 216, 74, 0.2), rgba(255, 142, 32, 0.12)),
    rgba(8, 13, 31, 0.94);
}

.low-quality-card {
  background:
    linear-gradient(180deg, rgba(79, 227, 255, 0.18), rgba(31, 209, 115, 0.12)),
    rgba(8, 13, 31, 0.94);
}

.quality-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff06a;
  font-size: 25px;
  font-weight: 1000;
  line-height: 1;
}

.quality-card strong {
  color: #fff06a;
  font-size: 21px;
  font-weight: 1000;
  line-height: 1.1;
}

.quality-card small {
  color: rgba(248, 251, 255, 0.84);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.quality-back-button {
  min-height: 50px;
  margin-top: 20px;
  padding: 0 22px;
}

.leaderboard-panel {
  width: min(100%, 460px);
  margin-top: 18px;
  padding: 14px;
}

.ranking-actions {
  margin-top: 14px;
}

.control-hint {
  width: min(100%, 360px);
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 251, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
}

.creator-credit {
  margin-top: 12px;
  color: rgba(255, 247, 196, 0.94);
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.version-badge {
  margin-top: 7px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 216, 74, 0.46);
  border-radius: 999px;
  background: rgba(8, 13, 31, 0.66);
  color: #fff06a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.38);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 106, 0.08),
    0 0 12px rgba(255, 216, 74, 0.16);
}

.kakao-browser-guide {
  position: absolute;
  right: 14px;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  left: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 14px 15px;
  border: 3px solid rgba(255, 216, 74, 0.78);
  border-radius: 8px;
  background: rgba(8, 13, 31, 0.82);
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.3),
    0 0 28px rgba(255, 216, 74, 0.24);
  color: #fff7c4;
  pointer-events: none;
  text-align: left;
}

.kakao-browser-guide strong,
.kakao-browser-guide span {
  display: block;
}

.kakao-browser-guide strong {
  margin-bottom: 5px;
  color: #fff06a;
  font-size: 18px;
  font-weight: 1000;
  text-shadow: 0 0 10px rgba(255, 216, 74, 0.68);
}

.kakao-browser-guide span {
  color: rgba(248, 251, 255, 0.94);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.28;
}

.kakao-browser-guide b {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #fff06a;
  font-size: 44px;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 0 14px rgba(255, 216, 74, 0.62);
  transform: translate(4px, 5px);
}

.choice-screen {
  justify-content: flex-start;
  padding: max(78px, calc(env(safe-area-inset-top) + 62px)) 12px 18px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 216, 74, 0.18), transparent 28%),
    rgba(5, 8, 20, 0.86);
}

.choice-header span {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #1fd173;
  color: #062315;
  font-size: 12px;
  font-weight: 1000;
}

.choice-header h2 {
  font-size: clamp(28px, 8vw, 42px);
}

.choice-header p {
  margin-top: 8px;
  font-size: 13px;
}

.choice-cards {
  display: grid;
  width: min(100%, 486px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  margin-top: 20px;
}

.skill-reroll-button {
  min-height: 54px;
  margin-top: 14px;
  padding: 0 22px;
  border-color: rgba(174, 246, 255, 0.9);
  color: #fff7c4;
  font-size: 18px;
}

.skill-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 350px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 8px 10px;
  overflow: hidden;
  border: 3px solid #fff4aa;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 250, 199, 0.98) 0%, rgba(255, 222, 74, 0.98) 26%, rgba(255, 164, 20, 0.98) 100%);
  color: #27314b;
  text-align: center;
  box-shadow:
    0 7px 0 #8e5600,
    0 14px 26px rgba(0, 0, 0, 0.34);
}

.skill-card::before {
  position: absolute;
  inset: 42px 8px auto;
  height: 90px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.22);
  content: "";
}

.skill-card:focus-visible,
.skill-card.is-keyboard-selected {
  outline: 4px solid #ffffff;
  outline-offset: 3px;
  box-shadow:
    0 7px 0 #8e5600,
    0 0 0 6px rgba(79, 227, 255, 0.52),
    0 18px 30px rgba(0, 0, 0, 0.42);
}

.skill-card:active {
  transform: translateY(3px);
  box-shadow:
    0 3px 0 #9c6200,
    0 9px 16px rgba(0, 0, 0, 0.24);
}

.skill-card.is-selected {
  border-color: #aef6ff;
  background:
    linear-gradient(180deg, rgba(205, 248, 255, 0.98) 0%, rgba(122, 226, 255, 0.96) 35%, rgba(34, 141, 211, 0.96) 100%);
  color: #10213d;
  cursor: default;
  box-shadow:
    0 7px 0 #0a5a86,
    0 0 0 4px rgba(174, 246, 255, 0.24),
    0 14px 26px rgba(0, 0, 0, 0.34);
}

.awakening-card {
  border-color: #ffffff;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.72), transparent 36%),
    linear-gradient(180deg, rgba(255, 252, 204, 0.98) 0%, rgba(255, 210, 57, 0.98) 34%, rgba(255, 106, 54, 0.98) 100%);
  box-shadow:
    0 7px 0 #8e3100,
    0 0 26px rgba(255, 216, 74, 0.56),
    0 14px 26px rgba(0, 0, 0, 0.34);
}

.awakening-card .card-ribbon {
  background: linear-gradient(180deg, #ffffff 0%, #fff06a 54%, #ffb12b 100%);
}

.awakening-card .card-icon-frame {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 240, 106, 0.94) 48%, rgba(255, 107, 124, 0.9) 100%);
}

.blood-awakening-card {
  border-color: #ffd88a;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 241, 188, 0.68), transparent 34%),
    linear-gradient(180deg, rgba(255, 231, 183, 0.98) 0%, rgba(255, 67, 82, 0.98) 32%, rgba(98, 5, 20, 0.98) 100%);
  color: #fff8dd;
  text-shadow: 0 2px 0 rgba(43, 0, 8, 0.42);
  box-shadow:
    0 7px 0 #5f0614,
    0 0 28px rgba(255, 64, 84, 0.42),
    0 14px 26px rgba(0, 0, 0, 0.36);
}

.blood-awakening-card .card-ribbon {
  background: linear-gradient(180deg, #fff5c9 0%, #ffb95c 48%, #d2142b 100%);
  color: #310007;
}

.blood-awakening-card .card-icon-frame {
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 248, 218, 0.98) 0%, rgba(255, 82, 94, 0.92) 48%, rgba(86, 0, 17, 0.94) 100%);
}

.blood-awakening-card .card-copy p,
.blood-awakening-card .card-level {
  color: #fff2c5;
}

.overflow-card {
  border-color: rgba(255, 247, 196, 0.92);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.48), transparent 34%),
    linear-gradient(180deg, rgba(255, 252, 204, 0.98) 0%, rgba(255, 216, 74, 0.98) 36%, rgba(79, 227, 255, 0.92) 100%);
  box-shadow:
    0 7px 0 #276b89,
    0 0 22px rgba(255, 216, 74, 0.4),
    0 14px 26px rgba(0, 0, 0, 0.34);
}

.overflow-card .card-ribbon {
  background: linear-gradient(180deg, #fffbd0 0%, #fff06a 100%);
}

.overflow-card .card-icon-frame {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 196, 0.95) 50%, rgba(79, 227, 255, 0.9) 100%);
}

.card-ribbon {
  position: relative;
  z-index: 1;
  display: grid;
  width: calc(100% + 16px);
  min-height: 38px;
  place-items: center;
  padding: 4px 6px;
  background: linear-gradient(180deg, #fff36b 0%, #ffc400 100%);
  color: #27314b;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.card-icon-frame {
  position: relative;
  z-index: 1;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  margin-top: 8px;
  border: 4px solid rgba(39, 49, 75, 0.32);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.98) 0%, rgba(204, 248, 255, 0.92) 55%, rgba(86, 213, 255, 0.92) 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.42),
    0 5px 0 rgba(39, 49, 75, 0.2);
}

.card-icon {
  display: block;
  font-size: 35px;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.18));
}

.skill-card.skill-id-truthLight .card-icon-frame {
  overflow: hidden;
  border-color: rgba(255, 240, 166, 0.76);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0 5%, rgba(255, 221, 105, 0.94) 6% 11%, rgba(6, 23, 43, 0.98) 12% 100%),
    linear-gradient(135deg, #081329, #0f2b48 58%, #040914);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.28),
    0 0 17px rgba(255, 216, 74, 0.44),
    0 5px 0 rgba(39, 49, 75, 0.2);
}

.skill-card.skill-id-truthLight .card-icon {
  position: relative;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 4px, #fff8b2 5px 8px, rgba(255, 216, 74, 0.5) 9px 12px, transparent 13px),
    radial-gradient(circle at 50% 50%, rgba(255, 216, 74, 0.34), transparent 42%),
    #071327;
  font-size: 0;
}

.skill-card.skill-id-truthLight .card-icon::before,
.skill-card.skill-id-truthLight .card-icon::after {
  position: absolute;
  content: "";
}

.skill-card.skill-id-truthLight .card-icon::before {
  inset: -14px;
  background:
    conic-gradient(
      from -6deg,
      rgba(255, 255, 255, 0.98) 0deg 6deg,
      rgba(255, 214, 101, 0.88) 7deg 12deg,
      transparent 13deg 27deg,
      rgba(255, 145, 54, 0.82) 28deg 34deg,
      transparent 35deg 48deg,
      rgba(176, 247, 255, 0.9) 49deg 55deg,
      transparent 56deg 73deg,
      rgba(255, 247, 196, 0.98) 74deg 82deg,
      transparent 83deg 101deg,
      rgba(255, 188, 59, 0.92) 102deg 109deg,
      transparent 110deg 130deg,
      rgba(158, 236, 255, 0.86) 131deg 138deg,
      transparent 139deg 160deg,
      rgba(255, 255, 255, 0.95) 161deg 170deg,
      transparent 171deg 193deg,
      rgba(255, 175, 77, 0.82) 194deg 202deg,
      transparent 203deg 225deg,
      rgba(202, 252, 255, 0.9) 226deg 234deg,
      transparent 235deg 256deg,
      rgba(255, 242, 167, 0.96) 257deg 266deg,
      transparent 267deg 289deg,
      rgba(255, 126, 74, 0.74) 290deg 297deg,
      transparent 298deg 318deg,
      rgba(172, 244, 255, 0.86) 319deg 326deg,
      transparent 327deg 344deg,
      rgba(255, 255, 255, 0.98) 345deg 352deg,
      transparent 353deg 360deg
    );
  opacity: 0.96;
  transform: scaleX(1.18);
}

.skill-card.skill-id-truthLight .card-icon::after {
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 31%, #fff7c4 32% 56%, rgba(255, 216, 74, 0.78) 57% 76%, transparent 77%);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.95),
    0 0 22px rgba(255, 216, 74, 0.86),
    0 0 34px rgba(140, 238, 255, 0.42);
  transform: translate(-50%, -50%);
}

.skill-card.skill-id-faithShield .card-icon {
  position: relative;
  width: 58px;
  height: 58px;
  font-size: 0;
}

.skill-card.skill-id-faithShield .card-icon::before,
.skill-card.skill-id-faithShield .card-icon::after {
  position: absolute;
  content: "";
}

.skill-card.skill-id-faithShield .card-icon::before {
  inset: 1px 5px 0;
  border: 3px solid rgba(198, 238, 255, 0.98);
  border-radius: 8px 8px 16px 16px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.48), transparent 22%),
    radial-gradient(circle at 68% 18%, rgba(255, 255, 255, 0.22), transparent 20%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0 28%, transparent 29%),
    linear-gradient(180deg, #5fdcff 0%, #1b95d1 48%, #075a8f 100%);
  box-shadow:
    inset 0 0 0 2px rgba(11, 94, 145, 0.42),
    inset 0 -8px 12px rgba(2, 51, 92, 0.38),
    0 3px 0 rgba(16, 69, 103, 0.58);
  clip-path: polygon(50% 0, 92% 12%, 85% 67%, 50% 100%, 15% 67%, 8% 12%);
  filter:
    drop-shadow(0 2px 0 rgba(25, 31, 42, 0.28))
    drop-shadow(0 0 7px rgba(119, 222, 255, 0.46));
}

.skill-card.skill-id-faithShield .card-icon::after {
  left: 50%;
  top: 48%;
  width: 35px;
  height: 39px;
  background:
    linear-gradient(90deg, transparent 0 35%, #ffffff 36% 64%, transparent 65%),
    linear-gradient(180deg, transparent 0 39%, #ffffff 40% 62%, transparent 63%);
  clip-path: polygon(50% 0, 66% 12%, 62% 38%, 90% 38%, 100% 50%, 90% 62%, 62% 62%, 66% 88%, 50% 100%, 34% 88%, 38% 62%, 10% 62%, 0 50%, 10% 38%, 38% 38%, 34% 12%);
  filter:
    drop-shadow(0 2px 0 rgba(5, 82, 126, 0.52))
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.62));
  transform: translate(-50%, -50%);
}

.skill-card.skill-id-surgingGrace .card-icon-frame {
  overflow: hidden;
  border-color: rgba(96, 242, 110, 0.72);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 251, 208, 0.96) 0 7%, rgba(255, 240, 106, 0.88) 8% 14%, rgba(44, 201, 101, 0.84) 15% 31%, rgba(5, 34, 34, 0.98) 32% 100%),
    linear-gradient(135deg, #08231f, #104d35 58%, #071322);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.28),
    0 0 17px rgba(96, 242, 110, 0.46),
    0 5px 0 rgba(39, 49, 75, 0.2);
}

.skill-card.skill-id-surgingGrace .card-icon {
  position: relative;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, #fffbd0 0 5px, #fff06a 6px 10px, #4bea82 11px 15px, transparent 16px),
    radial-gradient(circle at 50% 50%, rgba(96, 242, 110, 0.38), transparent 44%),
    #062018;
  font-size: 0;
}

.skill-card.skill-id-surgingGrace .card-icon::before,
.skill-card.skill-id-surgingGrace .card-icon::after {
  position: absolute;
  content: "";
}

.skill-card.skill-id-surgingGrace .card-icon::before {
  inset: 3px;
  border: 5px solid rgba(96, 242, 110, 0.9);
  border-right-color: rgba(255, 240, 106, 0.92);
  border-bottom-color: transparent;
  border-left-color: rgba(96, 242, 110, 0.42);
  border-radius: 50%;
  box-shadow:
    inset 0 0 14px rgba(255, 240, 106, 0.26),
    0 0 12px rgba(96, 242, 110, 0.48);
  transform: rotate(-34deg);
}

.skill-card.skill-id-surgingGrace .card-icon::after {
  inset: 0;
  background:
    radial-gradient(circle at 18% 37%, #7cff99 0 5px, rgba(124, 255, 153, 0.35) 6px 8px, transparent 9px),
    radial-gradient(circle at 35% 16%, #fff06a 0 4px, rgba(255, 240, 106, 0.35) 5px 7px, transparent 8px),
    radial-gradient(circle at 79% 28%, #6fffa1 0 5px, rgba(111, 255, 161, 0.35) 6px 8px, transparent 9px),
    radial-gradient(circle at 80% 74%, #fff8b8 0 4px, rgba(255, 248, 184, 0.34) 5px 7px, transparent 8px),
    radial-gradient(circle at 29% 78%, #60f26e 0 5px, rgba(96, 242, 110, 0.34) 6px 8px, transparent 9px),
    conic-gradient(from 215deg, transparent 0 24deg, rgba(255, 240, 106, 0.76) 25deg 37deg, transparent 38deg 90deg, rgba(96, 242, 110, 0.72) 91deg 105deg, transparent 106deg 174deg, rgba(255, 240, 106, 0.62) 175deg 188deg, transparent 189deg 360deg);
  filter:
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.2))
    drop-shadow(0 0 5px rgba(96, 242, 110, 0.46));
}

.skill-card.skill-id-fullArmor .card-icon {
  position: relative;
  width: 58px;
  height: 58px;
  font-size: 0;
}

.skill-card.skill-id-fullArmor .card-icon::before,
.skill-card.skill-id-fullArmor .card-icon::after {
  position: absolute;
  content: "";
}

.skill-card.skill-id-fullArmor .card-icon::before {
  inset: 1px 3px 0;
  background:
    linear-gradient(90deg, transparent 0 12%, #b5c1ca 13% 38%, #65727d 39% 61%, #aebac4 62% 87%, transparent 88%) 50% 17px / 34px 35px no-repeat,
    linear-gradient(180deg, #edf4f8 0 100%) 50% 21px / 4px 29px no-repeat,
    radial-gradient(circle at 39% 34px, #2d3741 0 2px, transparent 3px),
    radial-gradient(circle at 50% 34px, #2d3741 0 2px, transparent 3px),
    radial-gradient(circle at 61% 34px, #2d3741 0 2px, transparent 3px),
    radial-gradient(circle at 40% 43px, #2d3741 0 2px, transparent 3px),
    radial-gradient(circle at 50% 43px, #2d3741 0 2px, transparent 3px),
    radial-gradient(circle at 60% 43px, #2d3741 0 2px, transparent 3px),
    radial-gradient(ellipse at 18% 26px, #c2ccd4 0 13px, transparent 14px),
    radial-gradient(ellipse at 82% 26px, #c2ccd4 0 13px, transparent 14px),
    linear-gradient(90deg, #c89d68 0 48%, #9b7851 49% 100%) 50% 54px / 28px 10px no-repeat,
    linear-gradient(180deg, #dce5ec 0%, #8d9ba6 58%, #56636f 100%);
  clip-path: polygon(50% 0, 70% 14%, 94% 24%, 80% 100%, 20% 100%, 6% 24%, 30% 14%);
  filter:
    drop-shadow(0 2px 0 rgba(25, 31, 42, 0.32))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.44));
}

.skill-card.skill-id-fullArmor .card-icon::after {
  left: 50%;
  top: 29px;
  width: 32px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c1ccd4, #717e89);
  box-shadow: 0 6px 0 rgba(38, 48, 59, 0.72);
  transform: translateX(-50%);
}

.card-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 146px;
  flex-direction: column;
  align-items: center;
}

.card-copy h3 {
  width: 100%;
  margin: 2px 0 7px;
  font-size: 21px;
  font-weight: 1000;
  line-height: 1.15;
  letter-spacing: 0;
  word-break: keep-all;
}

.card-copy p {
  margin: 0;
  color: rgba(39, 49, 75, 0.78);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.24;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.star-row {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 1px;
  margin-top: auto;
  padding-top: 6px;
  font-size: clamp(16px, 4vw, 19px);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

.star-on,
.star-next {
  color: #fff2a2;
}

.star-next {
  transform: scale(1.18);
  color: #ffffff;
}

.star-off {
  color: rgba(39, 49, 75, 0.28);
}

.card-level {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(39, 49, 75, 0.18);
  color: #222b45;
  font-size: 13px;
  font-weight: 1000;
}

.reward-card .card-icon-frame {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 242, 166, 0.94) 52%, rgba(255, 186, 65, 0.92) 100%);
}

.result-screen {
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 216, 74, 0.18), transparent 28%),
    rgba(5, 8, 20, 0.9);
  justify-content: flex-start;
  overflow-y: auto;
}

.ending-screen {
  justify-content: center;
  overflow: hidden;
  padding: 34px 24px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 246, 168, 0.36), transparent 30%),
    radial-gradient(circle at 50% 62%, rgba(111, 232, 255, 0.16), transparent 42%),
    rgba(5, 8, 20, 0.92);
}

.ending-light {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 246, 168, 0.22), transparent 34%),
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.22), transparent 20%);
  pointer-events: none;
}

.ending-mark {
  position: relative;
  z-index: 1;
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  margin-bottom: 18px;
  border: 3px solid rgba(255, 247, 196, 0.88);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 20%, rgba(255, 240, 106, 0.88) 42%, rgba(105, 244, 255, 0.55) 100%);
  color: #162044;
  font-size: 48px;
  font-weight: 1000;
  box-shadow:
    0 0 26px rgba(255, 216, 74, 0.62),
    0 10px 0 rgba(0, 0, 0, 0.26);
}

.ending-screen h2 {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  margin: 0;
  color: #fff7c4;
  font-size: 35px;
  font-weight: 1000;
  line-height: 1.08;
  text-align: center;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.42),
    0 0 18px rgba(255, 216, 74, 0.58);
}

.ending-screen blockquote {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  margin: 26px 0 0;
  padding: 20px 18px;
  border: 2px solid rgba(255, 216, 74, 0.44);
  border-radius: 8px;
  background: rgba(8, 13, 31, 0.76);
  color: rgba(248, 251, 255, 0.92);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.28);
}

.ending-screen cite {
  display: block;
  margin-top: 12px;
  color: #fff06a;
  font-style: normal;
  font-size: 16px;
  font-weight: 1000;
}

.ending-credit {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  color: rgba(248, 251, 255, 0.86);
  font-size: 17px;
  font-weight: 1000;
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.36);
}

.ending-screen .primary-button {
  position: relative;
  z-index: 1;
  width: min(100%, 250px);
  margin-top: 28px;
}

.result-grid {
  display: grid;
  width: min(100%, 360px);
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 24px 0 0;
}

.result-grid div {
  min-width: 0;
  padding: 12px 6px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: var(--panel);
}

.result-grid dt {
  color: rgba(248, 251, 255, 0.7);
  font-size: 12px;
  font-weight: 800;
}

.result-grid dd {
  margin: 7px 0 0;
  color: #fff7c4;
  font-size: 18px;
  font-weight: 1000;
}

.victory-skills {
  width: min(100%, 360px);
  margin-top: 14px;
  padding: 12px 14px;
  border: 2px solid rgba(255, 216, 74, 0.24);
  border-radius: 8px;
  background: var(--panel);
  color: rgba(248, 251, 255, 0.86);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.victory-skills strong {
  display: block;
  margin-bottom: 5px;
  color: #fff7c4;
  font-size: 15px;
  font-weight: 1000;
}

.score-panel {
  width: min(100%, 380px);
  margin-top: 14px;
  padding: 12px;
  border: 2px solid rgba(255, 216, 74, 0.24);
  border-radius: 8px;
  background: rgba(8, 13, 31, 0.82);
}

.result-screen .score-panel {
  width: min(100%, 430px);
  padding: 9px;
}

.score-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(248, 251, 255, 0.82);
  font-size: 13px;
  font-weight: 900;
}

.score-total strong {
  color: #fff06a;
  font-size: 24px;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.score-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  margin-top: 9px;
}

.score-form input {
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  outline: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fbff;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
}

.score-form input::placeholder {
  color: rgba(248, 251, 255, 0.52);
}

.secondary-button {
  min-height: 40px;
  padding: 0 12px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 8px;
  background: linear-gradient(180deg, #8cffc1 0%, #1fd173 100%);
  color: #062315;
  font-size: 14px;
  font-weight: 1000;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.26);
}

.secondary-button:disabled {
  opacity: 0.55;
}

.primary-button:focus-visible,
.primary-button.is-keyboard-selected,
.secondary-button:focus-visible,
.secondary-button.is-keyboard-selected,
.quality-card:focus-visible,
.quality-card.is-keyboard-selected {
  outline: 4px solid #ffffff;
  outline-offset: 4px;
  box-shadow:
    0 0 0 6px rgba(79, 227, 255, 0.5),
    0 14px 26px rgba(0, 0, 0, 0.34);
}

.score-message {
  min-height: 18px;
  margin: 7px 0 0;
  color: #fff7c4;
  font-size: 12px;
  font-weight: 800;
}

.result-screen .score-message {
  min-height: 14px;
  margin-top: 4px;
  font-size: 11px;
}

.ranking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  text-align: left;
}

.ranking-grid div,
.monthly-ranking-details > div {
  min-width: 0;
  padding: 9px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.ranking-grid h3,
.monthly-ranking-details h3 {
  margin: 0 0 7px;
  color: #fff7c4;
  font-size: 13px;
  font-weight: 1000;
  text-align: center;
}

.ranking-grid ol,
.monthly-ranking-details ol {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-grid li,
.monthly-ranking-details li {
  display: grid;
  grid-template-columns: 1.45em minmax(0, 1fr) auto;
  gap: 4px 3px;
  color: rgba(248, 251, 255, 0.84);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.ranking-rank {
  color: #fff06a;
  justify-self: start;
}

.ranking-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-self: start;
  max-width: 100%;
}

.ranking-stage {
  color: #fff7c4;
  font-size: 11px;
  font-weight: 1000;
  justify-self: end;
  white-space: nowrap;
}

.ranking-score {
  grid-column: 2 / 4;
  color: rgba(248, 251, 255, 0.66);
}

.ranking-grid li.ranking-top,
.monthly-ranking-details li.ranking-top {
  position: relative;
  margin: 1px -2px;
  padding: 5px 6px;
  border-radius: 7px;
}

.ranking-grid li.ranking-locked,
.monthly-ranking-details li.ranking-locked {
  opacity: 0.72;
  border: 1px dashed rgba(255, 216, 74, 0.28);
  border-radius: 7px;
  padding: 4px 5px;
}

.monthly-ranking-details {
  margin-top: 10px;
  text-align: left;
}

.monthly-ranking-details summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 216, 74, 0.52);
  border-radius: 8px;
  background: rgba(8, 13, 31, 0.74);
  color: #fff7c4;
  cursor: pointer;
  font-size: 14px;
  font-weight: 1000;
  list-style: none;
  text-align: center;
}

.monthly-ranking-details summary::-webkit-details-marker {
  display: none;
}

.monthly-ranking-details summary::after {
  content: "▼";
  margin-left: 8px;
  color: #fff06a;
  font-size: 11px;
}

.monthly-ranking-details[open] summary {
  margin-bottom: 8px;
}

.monthly-ranking-details[open] summary::after {
  content: "▲";
}

.leaderboard-panel .ranking-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}

.leaderboard-panel .ranking-grid div,
.leaderboard-panel .monthly-ranking-details > div {
  padding: 12px 13px;
  border-width: 2px;
}

.leaderboard-panel .ranking-grid h3,
.leaderboard-panel .monthly-ranking-details h3 {
  margin-bottom: 8px;
  font-size: 17px;
}

.leaderboard-panel .ranking-grid ol,
.leaderboard-panel .monthly-ranking-details ol {
  gap: 6px;
}

.leaderboard-panel .ranking-grid li,
.leaderboard-panel .monthly-ranking-details li {
  grid-template-columns: 1.45em minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 3px;
  font-size: 15px;
}

.leaderboard-panel .ranking-score {
  grid-column: 2 / 4;
  color: rgba(248, 251, 255, 0.78);
  font-size: 14px;
  justify-self: start;
  white-space: nowrap;
}

.leaderboard-panel .ranking-grid li.ranking-top,
.leaderboard-panel .monthly-ranking-details li.ranking-top {
  margin: 2px -3px;
  padding: 7px 8px;
}

.leaderboard-panel .monthly-ranking-details summary {
  min-height: 48px;
  font-size: 16px;
}

.ranking-top-1 {
  background: linear-gradient(90deg, rgba(255, 216, 74, 0.34), rgba(255, 244, 166, 0.12));
  box-shadow:
    0 0 0 1px rgba(255, 240, 106, 0.36),
    0 0 14px rgba(255, 216, 74, 0.42);
}

.ranking-top-2 {
  background: linear-gradient(90deg, rgba(204, 230, 255, 0.28), rgba(255, 255, 255, 0.09));
  box-shadow:
    0 0 0 1px rgba(220, 238, 255, 0.32),
    0 0 12px rgba(192, 224, 255, 0.34);
}

.ranking-top-3 {
  background: linear-gradient(90deg, rgba(255, 173, 94, 0.28), rgba(255, 216, 142, 0.09));
  box-shadow:
    0 0 0 1px rgba(255, 184, 104, 0.3),
    0 0 12px rgba(255, 153, 68, 0.3);
}

.ranking-top-1 .ranking-rank,
.ranking-top-1 .ranking-name,
.ranking-top-1 .ranking-stage,
.ranking-top-1 .ranking-score {
  color: #fff6a8;
  text-shadow: 0 0 8px rgba(255, 216, 74, 0.75);
}

.ranking-top-2 .ranking-rank,
.ranking-top-2 .ranking-name,
.ranking-top-2 .ranking-stage,
.ranking-top-2 .ranking-score {
  color: #e9f6ff;
  text-shadow: 0 0 7px rgba(205, 232, 255, 0.62);
}

.ranking-top-3 .ranking-rank,
.ranking-top-3 .ranking-name,
.ranking-top-3 .ranking-stage,
.ranking-top-3 .ranking-score {
  color: #ffd5a0;
  text-shadow: 0 0 7px rgba(255, 164, 74, 0.58);
}

.ranking-heaven-entry .ranking-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  color: #fff7c4;
  text-shadow:
    0 0 8px rgba(255, 240, 106, 0.86),
    0 0 16px rgba(111, 232, 255, 0.34);
}

.ranking-heaven-entry .ranking-stage,
.ranking-heaven-entry .ranking-score {
  color: #fff7c4;
  text-shadow: 0 0 8px rgba(255, 240, 106, 0.62);
}

.ranking-heaven-title {
  flex: 0 0 auto;
  padding: 1px 4px;
  border: 1px solid rgba(255, 240, 106, 0.68);
  border-radius: 999px;
  background: rgba(255, 216, 74, 0.16);
  color: #fff06a;
  font-size: 0.78em;
  font-weight: 1000;
  line-height: 1.2;
  box-shadow: 0 0 10px rgba(255, 216, 74, 0.22);
}

.ranking-player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-screen .ranking-grid {
  gap: 7px;
  margin-top: 8px;
}

.result-screen .ranking-grid div,
.result-screen .monthly-ranking-details > div {
  padding: 7px 6px;
}

.result-screen .ranking-grid h3,
.result-screen .monthly-ranking-details h3 {
  margin-bottom: 5px;
  font-size: 12px;
}

.result-screen .ranking-grid ol,
.result-screen .monthly-ranking-details ol {
  gap: 3px;
}

.result-screen .ranking-grid li,
.result-screen .monthly-ranking-details li {
  grid-template-columns: 1.35em minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  line-height: 1.08;
}

.result-screen .ranking-stage {
  font-size: 10px;
}

.result-screen .ranking-score {
  grid-column: auto;
  justify-self: end;
  color: rgba(248, 251, 255, 0.76);
  font-size: 10.5px;
  font-weight: 950;
  white-space: nowrap;
}

.result-screen .ranking-grid li.ranking-top,
.result-screen .monthly-ranking-details li.ranking-top {
  margin: 0 -1px;
  padding: 3px 4px;
}

.result-screen .ranking-grid li.ranking-locked,
.result-screen .monthly-ranking-details li.ranking-locked {
  padding: 3px 4px;
}

.result-screen .monthly-ranking-details {
  margin-top: 7px;
}

.result-screen .monthly-ranking-details summary {
  min-height: 36px;
  font-size: 13px;
}

.result-screen > .primary-button {
  min-height: 50px;
  margin-top: 10px;
}

.sound-controls {
  position: absolute;
  z-index: 18;
  right: 12px;
  bottom: max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: auto;
}

.sound-button {
  display: grid;
  min-width: 54px;
  min-height: 38px;
  place-items: center;
  padding: 0 9px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  background: rgba(13, 22, 48, 0.86);
  color: #fff7c4;
  font-size: 12px;
  font-weight: 1000;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.sound-button.is-off {
  border-color: rgba(255, 100, 124, 0.58);
  background: rgba(49, 8, 26, 0.86);
  color: rgba(248, 251, 255, 0.7);
}

.sound-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
}

.dev-toggle {
  position: absolute;
  z-index: 45;
  left: 10px;
  bottom: max(18px, env(safe-area-inset-bottom));
  min-width: 54px;
  min-height: 38px;
  padding: 0 10px;
  border: 2px solid rgba(255, 216, 74, 0.88);
  border-radius: 8px;
  background: rgba(8, 13, 31, 0.92);
  color: #fff06a;
  font-size: 13px;
  font-weight: 1000;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.36),
    0 0 14px rgba(255, 216, 74, 0.22);
}

.dev-panel {
  position: absolute;
  z-index: 46;
  left: 10px;
  right: 10px;
  top: max(12px, env(safe-area-inset-top));
  bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px));
  max-height: none;
  overflow-y: auto;
  padding: 12px;
  overscroll-behavior: contain;
  border: 2px solid rgba(255, 216, 74, 0.88);
  border-radius: 8px;
  background: rgba(5, 8, 20, 0.94);
  color: #f8fbff;
  text-align: left;
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.38),
    0 18px 32px rgba(0, 0, 0, 0.42);
}

.dev-panel header {
  position: sticky;
  top: -12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -12px -12px 0;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 216, 74, 0.22);
  background: rgba(5, 8, 20, 0.98);
  color: #fff06a;
  font-size: 18px;
  font-weight: 1000;
  z-index: 1;
}

.dev-panel header button {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff7c4;
  font-size: 20px;
  font-weight: 1000;
}

.dev-warning {
  margin: 8px 0 10px;
  color: #ffb3bd;
  font-size: 13px;
  font-weight: 900;
}

.dev-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.dev-stats span {
  min-height: 32px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 216, 74, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 251, 255, 0.9);
  font-size: 12px;
  font-weight: 850;
}

.dev-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dev-controls label {
  display: grid;
  gap: 4px;
  color: rgba(248, 251, 255, 0.78);
  font-size: 11px;
  font-weight: 900;
}

.dev-controls button,
.dev-controls input,
.dev-controls select,
.dev-controls textarea {
  min-height: 38px;
  min-width: 0;
  padding: 0 9px;
  border: 2px solid rgba(255, 247, 196, 0.58);
  border-radius: 8px;
  background: rgba(13, 22, 48, 0.95);
  color: #fff7c4;
  font-size: 13px;
  font-weight: 900;
}

.dev-controls textarea {
  min-height: 76px;
  padding: 9px;
  line-height: 1.35;
  resize: vertical;
}

.dev-controls button {
  background: linear-gradient(180deg, rgba(255, 216, 74, 0.22), rgba(255, 142, 32, 0.12)), rgba(13, 22, 48, 0.95);
}

.dev-event-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(105, 232, 255, 0.35);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(105, 232, 255, 0.1), rgba(255, 216, 74, 0.08)),
    rgba(255, 255, 255, 0.04);
}

.dev-event-editor > strong {
  color: #fff06a;
  font-size: 13px;
  font-weight: 1000;
}

.dev-event-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dev-event-message {
  margin: 0;
  color: rgba(232, 251, 255, 0.86);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.dev-stage-buttons {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.dev-stage-buttons button {
  min-height: 34px;
  padding: 0 4px;
}

.dev-stage-buttons button.is-active {
  border-color: rgba(255, 216, 74, 0.96);
  background: linear-gradient(180deg, rgba(255, 234, 110, 0.42), rgba(255, 142, 32, 0.22)), rgba(13, 22, 48, 0.95);
  color: #fff06a;
}

.game-shell[data-dev-mode="true"] .dev-toggle {
  display: grid;
  place-items: center;
}

.dev-frame-badge {
  position: absolute;
  z-index: 44;
  left: 10px;
  bottom: max(64px, calc(env(safe-area-inset-bottom) + 64px));
  min-width: 72px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 216, 74, 0.68);
  border-radius: 8px;
  background: rgba(5, 8, 20, 0.82);
  color: #fff06a;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  text-align: center;
  box-shadow: 0 0 12px rgba(255, 216, 74, 0.16);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.pause-button {
  position: absolute;
  z-index: 19;
  right: 12px;
  bottom: max(117px, calc(env(safe-area-inset-bottom) + 117px));
  display: grid;
  width: 54px;
  height: 42px;
  place-items: center;
  border: 2px solid rgba(255, 216, 74, 0.72);
  border-radius: 8px;
  background: rgba(13, 22, 48, 0.9);
  color: #fff7c4;
  font-size: 18px;
  font-weight: 1000;
  pointer-events: auto;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.pause-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
}

.pause-screen {
  justify-content: center;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 216, 74, 0.18), transparent 28%),
    rgba(5, 8, 20, 0.72);
}

.pause-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.pause-actions .primary-button {
  margin-top: 0;
}

.pause-actions .secondary-button {
  min-height: 58px;
  padding: 0 22px;
  font-size: 18px;
}

.pause-actions button:focus-visible,
.pause-actions button.is-keyboard-selected {
  outline: 4px solid #ffffff;
  outline-offset: 4px;
  box-shadow:
    0 0 0 6px rgba(79, 227, 255, 0.5),
    0 14px 26px rgba(0, 0, 0, 0.34);
}

.joystick {
  position: absolute;
  z-index: 14;
  left: 0;
  top: 0;
  width: 154px;
  height: 154px;
  display: grid;
  opacity: 0;
  place-items: center;
  pointer-events: none;
  touch-action: none;
  transform: translate(-999px, -999px);
  transition: opacity 90ms ease;
}

.joystick.is-active {
  opacity: 1;
}

.joystick-ring {
  position: relative;
  width: 138px;
  height: 138px;
  border: 4px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 26px rgba(255, 255, 255, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.24);
}

.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: #233052;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
}

.hidden {
  display: none !important;
}

.game-shell[data-state="start"] .battle-ui,
.game-shell[data-state="heavenShop"] .battle-ui,
.game-shell[data-state="quality"] .battle-ui,
.game-shell[data-state="ranking"] .battle-ui,
.game-shell[data-state="ending"] .battle-ui,
.game-shell[data-state="gameover"] .battle-ui,
.game-shell[data-state="victory"] .battle-ui {
  display: none;
}

.game-shell[data-state="levelup"] .pause-button,
.game-shell[data-state="stageIntro"] .pause-button,
.game-shell[data-state="bloodAwakening"] .pause-button,
.game-shell[data-state="bossReward"] .pause-button {
  display: none;
}

.game-shell[data-state="start"] .sound-controls,
.game-shell[data-state="heavenShop"] .sound-controls,
.game-shell[data-state="quality"] .sound-controls,
.game-shell[data-state="ranking"] .sound-controls,
.game-shell[data-state="levelup"] .sound-controls,
.game-shell[data-state="bloodAwakening"] .sound-controls,
.game-shell[data-state="bossReward"] .sound-controls,
.game-shell[data-state="ending"] .sound-controls,
.game-shell[data-state="gameover"] .sound-controls,
.game-shell[data-state="victory"] .sound-controls {
  display: none;
}

.game-shell[data-state="levelup"] .joystick,
.game-shell[data-state="bloodAwakening"] .joystick,
.game-shell[data-state="bossReward"] .joystick,
.game-shell[data-state="paused"] .joystick {
  opacity: 0.25;
}

@media (min-width: 720px) {
  .game-shell {
    height: min(100dvh, 900px);
    margin-top: max(0px, calc((100dvh - 900px) / 2));
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 380px) {
  .quality-options {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .heaven-shop-cards {
    gap: 5px;
  }

  .heaven-shop-card {
    min-height: 72px;
    padding-inline: 4px;
  }

  .heaven-shop-card > strong {
    font-size: 11px;
  }

  .heaven-card-icon {
    width: 36px;
    height: 36px;
    font-size: 21px;
  }

  .quality-card {
    min-height: 118px;
  }
}

@media (max-width: 520px) {
  .start-screen {
    justify-content: flex-start;
    padding: max(8px, calc(env(safe-area-inset-top) + 6px)) 18px max(42px, calc(env(safe-area-inset-bottom) + 34px));
    overflow-y: auto;
  }

  .start-title-lockup {
    width: min(100%, 390px);
    padding-top: 58px;
  }

  .start-title-lockup h1 {
    max-width: 100%;
    font-size: clamp(38px, 11vw, 50px);
  }

  .title-episode {
    margin-left: 5px;
    font-size: clamp(13px, 3.5vw, 17px);
  }

  .title-mark {
    top: -44px;
    left: 10px;
    width: 74px;
    height: 98px;
  }

  .ranking-screen {
    justify-content: flex-start;
    padding: max(28px, calc(env(safe-area-inset-top) + 22px)) 12px max(128px, calc(env(safe-area-inset-bottom) + 118px));
  }

  .ranking-screen .choice-header {
    flex: 0 0 auto;
    width: min(100%, 430px);
  }

  .ranking-screen .choice-header h2 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .ranking-screen .choice-header p {
    margin-top: 8px;
    font-size: 15px;
  }

  .ranking-screen .leaderboard-panel {
    flex: 0 0 auto;
    width: min(100%, 430px);
    margin-top: 16px;
    padding: 10px;
  }

  .ranking-screen .ranking-actions {
    flex: 0 0 auto;
    margin-top: 18px;
  }

  .ranking-screen .ranking-actions .primary-button,
  .ranking-screen .ranking-actions .secondary-button {
    min-height: 54px;
  }

  .start-legacy-ranking {
    position: relative;
    top: auto;
    right: auto;
    align-self: flex-end;
    width: min(190px, 54vw);
    margin: 0 0 8px;
    gap: 5px;
    padding: 8px 9px;
  }

  .start-legacy-ranking strong {
    font-size: 11px;
  }

  .start-legacy-ranking li {
    grid-template-columns: 1.35em minmax(0, 1fr);
    gap: 3px;
    font-size: 10px;
  }

  .start-legacy-ranking .ranking-stage {
    display: none;
  }

  .start-legacy-ranking .ranking-score {
    grid-column: 2;
    font-size: 9px;
  }

  .start-screen p {
    margin-top: 12px;
    font-size: 15px;
  }

  .start-actions {
    margin-top: 20px;
  }

  .event-notice {
    margin-top: 36px;
  }

  .event-notice ~ .secret-stats-panel {
    margin-top: 24px;
  }

  .event-notice ~ .creator-credit {
    margin-top: 28px;
  }

  .quality-screen {
    justify-content: flex-start;
    padding: max(18px, calc(env(safe-area-inset-top) + 14px)) 18px max(132px, calc(env(safe-area-inset-bottom) + 124px));
  }

  .quality-screen .choice-header {
    margin-top: 10px;
  }

  .quality-screen .kakao-browser-guide {
    right: 18px;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
    left: 18px;
    padding: 12px 14px;
  }

  .quality-screen .kakao-browser-guide strong {
    font-size: 16px;
  }

  .quality-screen .kakao-browser-guide span {
    font-size: 14px;
  }

  .quality-screen .kakao-browser-guide b {
    width: 40px;
    height: 40px;
    font-size: 38px;
  }

  .heaven-shop-screen {
    padding: max(12px, calc(env(safe-area-inset-top) + 8px)) 7px max(110px, calc(env(safe-area-inset-bottom) + 104px));
  }

  .heaven-shop-screen .choice-header {
    width: min(98%, 460px);
    padding: 7px 10px 8px;
    border-width: 3px;
  }

  .heaven-shop-screen .choice-header::before,
  .heaven-shop-screen .choice-header::after {
    width: 32px;
    height: 24px;
  }

  .heaven-shop-screen .choice-header h2 {
    font-size: clamp(29px, 8.4vw, 38px);
  }

  .heaven-shop-screen .choice-header p {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.28;
  }

  .heaven-shop-status {
    gap: 5px;
    margin-top: 8px;
  }

  .heaven-shop-status div {
    min-height: 42px;
    padding: 5px 6px;
  }

  .heaven-shop-status span {
    font-size: 10px;
  }

  .heaven-shop-status strong {
    font-size: 15px;
  }

  .heaven-shop-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
    padding: 8px;
    border-width: 3px;
  }

  .heaven-shop-card {
    min-height: 84px;
    gap: 5px;
    padding: 9px 4px 7px;
  }

  .heaven-shop-card > strong {
    width: calc(100% - 4px);
    min-height: 24px;
    padding: 3px 4px;
    font-size: 11px;
    line-height: 1.1;
  }

  .heaven-card-cost {
    top: 3px;
    left: 4px;
    min-width: 34px;
    height: 18px;
    font-size: 10px;
  }

  .heaven-card-state {
    right: 4px;
    top: 4px;
    min-height: 18px;
    padding: 0 6px;
    font-size: 10px;
  }

  .heaven-shop-actions {
    position: sticky;
    z-index: 4;
    bottom: max(8px, env(safe-area-inset-bottom));
    gap: 7px;
    margin-top: 8px;
    padding: 7px;
    border: 2px solid rgba(226, 190, 96, 0.72);
    border-radius: 12px;
    background: rgba(10, 48, 48, 0.84);
    box-shadow:
      inset 0 0 0 1px rgba(255, 240, 106, 0.16),
      0 8px 18px rgba(3, 28, 34, 0.44);
    backdrop-filter: blur(4px);
  }

  .heaven-shop-actions .primary-button,
  .heaven-shop-actions .secondary-button {
    min-height: 44px;
    padding: 0 12px;
    font-size: 15px;
  }

  .heaven-shop-message {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.2;
  }
}

@media (max-width: 380px) {
  .heaven-shop-cards {
    gap: 5px;
    padding: 7px;
  }

  .heaven-shop-card {
    min-height: 76px;
    padding: 8px 3px 6px;
  }

  .heaven-shop-card > strong {
    min-height: 22px;
    font-size: 10px;
  }

  .heaven-card-icon {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }
}

@media (max-height: 720px) {
  .start-title-lockup {
    padding-top: 90px;
  }

  .title-mark {
    width: 74px;
    height: 98px;
    margin: 0;
  }

  .event-notice {
    margin-top: 38px;
  }

  .event-notice ~ .secret-stats-panel {
    margin-top: 28px;
  }

  .event-notice ~ .creator-credit {
    margin-top: 36px;
  }

  .heaven-shop-screen {
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .heaven-shop-card {
    min-height: 68px;
  }

  .heaven-card-icon {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .heaven-shop-message {
    font-size: 11px;
  }

  .choice-screen {
    padding-top: 58px;
  }

  .result-screen {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .result-screen h2 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .result-screen p {
    margin-top: 8px;
    font-size: 13px;
  }

  .result-grid {
    margin-top: 14px;
  }

  .score-panel {
    margin-top: 10px;
    padding: 9px;
  }

  .ranking-screen h2 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .ranking-screen .choice-header p {
    margin-top: 8px;
    font-size: 14px;
  }

  .start-actions,
  .ranking-actions {
    margin-top: 14px;
  }

  .ranking-grid {
    gap: 6px;
  }

  .leaderboard-panel {
    padding: 11px;
  }

  .leaderboard-panel .ranking-grid {
    gap: 8px;
  }

  .leaderboard-panel .ranking-grid h3 {
    font-size: 15px;
  }

  .leaderboard-panel .ranking-grid li {
    font-size: 13px;
  }

  .choice-cards {
    gap: 6px;
    margin-top: 12px;
  }

  .skill-card {
    min-height: 310px;
    padding: 0 6px 8px;
  }

  .card-ribbon {
    min-height: 34px;
    font-size: 12px;
  }

  .card-icon-frame {
    width: 56px;
    height: 56px;
    margin-top: 6px;
  }

  .card-icon {
    font-size: 28px;
  }

  .card-copy {
    min-height: 138px;
  }

  .card-copy h3 {
    font-size: 18px;
  }

  .card-copy p {
    font-size: 14px;
    line-height: 1.18;
  }

  .card-level {
    font-size: 12px;
  }
}

@media (max-width: 520px) and (max-height: 720px) {
  .start-title-lockup {
    padding-top: 52px;
  }

  .event-notice {
    margin-top: 30px;
  }

  .event-notice ~ .secret-stats-panel {
    margin-top: 22px;
  }

  .event-notice ~ .creator-credit {
    margin-top: 24px;
  }
}