:root {
  color-scheme: dark;
  --ink: #f7e7b8;
  --muted: #b9a877;
  --gold: #f2bd4f;
  --gold-deep: #7a4b18;
  --sapphire: #13b7ff;
  --violet: #b761ff;
  --ruby: #ff4569;
  --emerald: #4aff8b;
  --panel: rgba(13, 12, 20, 0.9);
  --stone: #272a39;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 20% 30%, rgba(78, 46, 145, 0.45), transparent 26rem),
    radial-gradient(circle at 75% 62%, rgba(20, 133, 190, 0.38), transparent 24rem),
    linear-gradient(135deg, #080711 0%, #111120 40%, #071327 100%);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  padding: clamp(10px, 2vw, 24px);
}

button {
  font: inherit;
}

.app {
  width: min(100%, 1680px);
}

.game-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  overflow: hidden;
  border-radius: 8px;
  background: #050713;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.62),
    0 0 42px rgba(33, 175, 255, 0.32),
    inset 0 0 0 2px rgba(255, 224, 137, 0.3);
  isolation: isolate;
}

.game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: clamp(10px, 1.25vw, 20px) solid transparent;
  border-image: linear-gradient(
      135deg,
      #352312,
      #e5bc67 12%,
      #232432 24%,
      #116dad 34%,
      #d39b45 50%,
      #1e1f2c 70%,
      #f3d083
    )
    1;
  box-shadow:
    inset 0 0 0 3px rgba(9, 10, 16, 0.92),
    inset 0 0 42px rgba(20, 183, 255, 0.38);
}

.game-shell::after {
  content: "";
  position: absolute;
  inset: clamp(12px, 1.45vw, 24px);
  z-index: 2;
  pointer-events: none;
  border: 2px solid rgba(245, 207, 126, 0.22);
  border-radius: 5px;
  box-shadow: inset 0 0 24px rgba(21, 181, 255, 0.34);
}

#gameCanvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  cursor: none;
  touch-action: none;
}

.hud {
  position: absolute;
  top: clamp(8px, 1vw, 16px);
  left: 50%;
  z-index: 3;
  width: min(75rem, calc(100% - clamp(44px, 7vw, 112px)));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(82px, 0.7fr) minmax(128px, 1fr) minmax(190px, 1.9fr) minmax(92px, 0.7fr) minmax(170px, 1.25fr);
  gap: clamp(4px, 0.65vw, 10px);
  align-items: stretch;
  pointer-events: none;
}

.hud-panel {
  position: relative;
  min-width: 0;
  min-height: clamp(44px, 5.1vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 0.7vw, 12px);
  padding: clamp(6px, 0.9vw, 12px);
  background:
    linear-gradient(180deg, rgba(35, 32, 34, 0.96), rgba(10, 10, 16, 0.94)),
    radial-gradient(circle at 30% 0%, rgba(255, 211, 115, 0.22), transparent 55%);
  border: 1px solid rgba(251, 211, 132, 0.58);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.46),
    inset 0 9px 16px rgba(255, 223, 151, 0.08),
    0 5px 16px rgba(0, 0, 0, 0.34);
}

.hud-panel::before,
.hud-panel::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, #f0cf86, #5b3613);
  border: 1px solid rgba(0, 0, 0, 0.42);
  transform: rotate(45deg);
}

.hud-panel::before {
  top: -5px;
  left: -5px;
}

.hud-panel::after {
  right: -5px;
  bottom: -5px;
}

.hud-label {
  display: block;
  font-size: clamp(0.55rem, 1vw, 0.95rem);
  line-height: 1;
  color: #efd68f;
  text-shadow: 0 1px 2px #000;
}

.score-panel,
.level-panel {
  flex-direction: column;
  gap: 2px;
}

#score,
#level,
#lives,
#gems,
#potions {
  min-width: 0;
  font-size: clamp(1rem, 2.3vw, 2.1rem);
  font-weight: 700;
  line-height: 0.9;
  color: #fff1c8;
  text-shadow: 0 2px 0 #221307, 0 0 10px rgba(255, 219, 121, 0.28);
  white-space: nowrap;
}

#gems,
#potions {
  font-size: clamp(0.8rem, 1.45vw, 1.55rem);
}

.heart-icon {
  width: clamp(22px, 3vw, 38px);
  height: clamp(20px, 2.7vw, 34px);
  position: relative;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, #ff275c, #a60e27 70%);
  box-shadow: 0 0 18px rgba(255, 53, 92, 0.5);
}

.heart-icon::before,
.heart-icon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
}

.heart-icon::before {
  top: -50%;
  left: 0;
}

.heart-icon::after {
  top: 0;
  left: 50%;
}

.star-panel {
  justify-content: flex-start;
  padding-left: clamp(42px, 5vw, 72px);
}

.orb {
  position: absolute;
  left: clamp(8px, 0.9vw, 12px);
  width: clamp(34px, 4.5vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, #ffffff 0 6%, transparent 8%),
    radial-gradient(circle at 35% 35%, #33dcff 0 22%, #126dff 48%, #08225c 72%);
  border: 3px solid rgba(242, 196, 100, 0.92);
  box-shadow: 0 0 19px rgba(33, 190, 255, 0.7);
}

.star-track {
  position: relative;
  width: 100%;
  height: clamp(18px, 2.4vw, 30px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, #151216, #050508),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15));
  border: 1px solid rgba(231, 184, 90, 0.62);
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.78);
}

.star-fill {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 16%;
  max-width: calc(100% - 6px);
  border-radius: 999px;
  background: linear-gradient(90deg, #2be7ff, #278dff, #ffd75e);
  box-shadow: 0 0 18px rgba(42, 209, 255, 0.82);
  transition: width 180ms ease;
}

.star-mark {
  position: absolute;
  top: 50%;
  width: clamp(14px, 1.8vw, 24px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  background: #07070a;
  border: 1px solid rgba(255, 210, 91, 0.7);
  box-shadow: inset 0 0 0 2px rgba(255, 210, 91, 0.24);
}

.star-mark:nth-of-type(1) {
  left: 33%;
}

.star-mark:nth-of-type(2) {
  left: 66%;
}

.star-mark:nth-of-type(3) {
  left: 91%;
}

.star-mark.active {
  background: linear-gradient(135deg, #fff5aa, #ffb21e 70%);
  box-shadow: 0 0 16px rgba(255, 207, 53, 0.75);
}

.inventory-panel {
  pointer-events: auto;
}

.small-orb,
.small-potion {
  flex: 0 0 auto;
  width: clamp(20px, 2.7vw, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(243, 200, 108, 0.9);
  background:
    radial-gradient(circle at 35% 25%, #ffffff 0 8%, transparent 11%),
    radial-gradient(circle at 45% 45%, #20dbff, #123eff 68%, #061338);
  box-shadow: 0 0 12px rgba(32, 201, 255, 0.55);
}

.small-potion {
  width: clamp(18px, 2.4vw, 30px);
  border-radius: 42% 42% 48% 48%;
  background:
    linear-gradient(180deg, #d9a766 0 13%, transparent 14%),
    radial-gradient(circle at 36% 30%, #ffffff 0 8%, transparent 10%),
    linear-gradient(180deg, transparent 0 24%, #51ff82 25%, #14772a 100%);
}

.icon-button {
  display: grid;
  place-items: center;
  width: clamp(30px, 3.5vw, 48px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(241, 199, 110, 0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 239, 169, 0.35), transparent 26%),
    linear-gradient(180deg, #39343b, #111116);
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45);
}

.icon-button:hover,
.icon-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(42, 202, 255, 0.48),
    0 0 18px rgba(42, 202, 255, 0.35),
    inset 0 0 0 2px rgba(0, 0, 0, 0.45);
}

.icon-button svg {
  width: 55%;
  height: 55%;
  fill: currentColor;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 58%, rgba(33, 183, 255, 0.18), transparent 28%),
    rgba(3, 4, 10, 0.42);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.overlay.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.overlay-panel {
  width: min(34rem, 84%);
  padding: clamp(22px, 3vw, 44px);
  text-align: center;
  border: 1px solid rgba(239, 200, 116, 0.72);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(63, 187, 255, 0.18), transparent 46%),
    linear-gradient(180deg, rgba(19, 17, 26, 0.93), rgba(6, 7, 13, 0.91));
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.56),
    inset 0 0 28px rgba(255, 207, 108, 0.08);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: clamp(0.72rem, 1.15vw, 0.95rem);
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: #fff3c7;
  font-size: clamp(2.3rem, 6vw, 5.8rem);
  line-height: 0.92;
  text-shadow: 0 4px 0 #2d1705, 0 0 28px rgba(255, 203, 88, 0.45);
}

.overlay-panel p:not(.eyebrow) {
  margin: clamp(12px, 2vw, 20px) auto clamp(18px, 2.4vw, 28px);
  max-width: 28rem;
  color: #d8cfb2;
  font: 500 clamp(0.95rem, 1.5vw, 1.2rem) / 1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.primary-button {
  min-width: 11rem;
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(255, 229, 149, 0.92);
  border-radius: 6px;
  background:
    linear-gradient(180deg, #ffdc7b, #cb7625 54%, #6f3714);
  color: #231003;
  cursor: pointer;
  font: 800 1rem / 1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: uppercase;
  box-shadow:
    0 0 24px rgba(255, 174, 47, 0.36),
    inset 0 2px rgba(255, 255, 255, 0.32);
}

.primary-button:hover,
.primary-button:focus-visible {
  outline: none;
  filter: brightness(1.08);
  box-shadow:
    0 0 0 3px rgba(39, 201, 255, 0.36),
    0 0 28px rgba(255, 188, 56, 0.48),
    inset 0 2px rgba(255, 255, 255, 0.32);
}

@media (max-width: 800px) {
  body {
    padding: 0;
  }

  .app,
  .game-shell {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .hud {
    width: calc(100% - 28px);
    grid-template-columns: 0.75fr 1fr 1.4fr 0.75fr;
  }

  .inventory-panel {
    grid-column: 1 / -1;
    min-height: 42px;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .hud {
    gap: 4px;
    width: calc(100% - 18px);
  }

  .hud-panel {
    padding: 5px;
  }

  .star-panel {
    padding-left: 39px;
  }

  .overlay-panel {
    width: 92%;
  }
}

@media (max-height: 520px) {
  body {
    padding: clamp(6px, 2vh, 12px);
  }

  .app,
  .game-shell {
    width: min(calc(100vw - 16px), calc(177.777vh - 28px), 1680px);
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .hud {
    width: calc(100% - 38px);
    grid-template-columns: 0.68fr 1fr 1.5fr 0.68fr 1.1fr;
    gap: 4px;
  }

  .hud-panel {
    min-height: 40px;
    padding: 4px;
  }

  .inventory-panel {
    grid-column: auto;
    gap: 4px;
  }

  .icon-button {
    width: 28px;
  }

  .small-orb,
  .small-potion {
    width: 21px;
  }

  #gems,
  #potions {
    font-size: 0.9rem;
  }

  .overlay-panel {
    padding: clamp(16px, 4vh, 28px);
  }
}