:root {
  color-scheme: only light;
  font-family: ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

button { font: inherit; }

[hidden] { display: none !important; }

.game {
  --ink: #102250;
  --safe-top-shift: max(0px, calc(env(safe-area-inset-top, 0px) - 18px));
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(150deg, #79d9f1 0%, #418fc4 54%, #183a73 100%);
  user-select: none;
}

.game::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 130px rgba(7, 20, 65, .2);
}

.game__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.topbar {
  position: absolute;
  z-index: 4;
  top: max(18px, env(safe-area-inset-top, 0px));
  left: max(clamp(16px, 3vw, 46px), env(safe-area-inset-left, 0px));
  right: max(clamp(16px, 3vw, 46px), env(safe-area-inset-right, 0px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 18px;
  pointer-events: none;
}

.brand, .hud, .tools, .journey { pointer-events: auto; }

.brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 13px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(11,27,69,.54);
  box-shadow: 0 14px 36px rgba(8,25,69,.18);
  backdrop-filter: blur(16px);
}

.brand span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #6e4312;
  background: #ffd867;
  box-shadow: 0 0 18px rgba(255,216,103,.55);
}

.brand strong { font-size: .94rem; letter-spacing: .015em; }

.hud {
  display: flex;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 19px;
  color: var(--ink);
  background: rgba(255,255,255,.91);
  box-shadow: 0 16px 44px rgba(11,31,75,.2);
  backdrop-filter: blur(18px);
}

.stat {
  min-width: 94px;
  padding: 5px 15px 4px;
  text-align: center;
}

.stat + .stat { border-left: 1px solid rgba(16,34,80,.12); }
.stat span, .stat strong { display: block; }

.stat span {
  margin-bottom: 1px;
  color: #6c7899;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stat strong { font-size: 1.15rem; line-height: 1.25; }
.hearts strong { min-width: 68px; color: #ef5774; letter-spacing: .08em; }

.tools { display: flex; justify-content: flex-end; gap: 9px; }

.icon-button {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 16px;
  color: #fff;
  background: rgba(11,27,69,.54);
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(7,24,63,.16);
  backdrop-filter: blur(15px);
}

.icon-button:hover, .icon-button:focus-visible {
  background: rgba(11,27,69,.76);
  outline: 3px solid rgba(255,232,144,.78);
  outline-offset: 2px;
}

.icon-button:disabled { opacity: .4; cursor: default; }

.journey {
  position: absolute;
  z-index: 4;
  top: calc(92px + var(--safe-top-shift));
  left: 50%;
  width: min(560px, calc(100% - 48px));
  transform: translateX(-50%);
  padding: 10px 14px 12px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 16px;
  background: rgba(9,29,70,.48);
  box-shadow: 0 12px 32px rgba(8,25,69,.16);
  backdrop-filter: blur(14px);
}

.journey__labels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
  color: rgba(255,255,255,.82);
  font-size: .76rem;
  font-weight: 750;
}

.journey__labels strong { color: #fff; font-size: .8rem; }
.journey__labels span:last-child { text-align: right; }

.progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #65ecdf, #ffe06d 68%, #ff8a9a);
  box-shadow: 0 0 15px rgba(255,224,109,.72);
  transition: width 220ms linear;
}

.overlay {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  background: linear-gradient(90deg, rgba(6,22,61,.58), rgba(6,22,61,.08) 58%, rgba(6,22,61,.2));
}

.overlay.compact {
  background: rgba(5,20,53,.36);
  backdrop-filter: blur(3px);
}

.card {
  width: min(540px, 100%);
  max-height: calc(100svh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  padding: clamp(28px, 4.2vw, 52px);
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 32px;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 9%, rgba(114,225,247,.3), transparent 31%),
    rgba(255,255,255,.93);
  box-shadow: 0 28px 90px rgba(3,19,61,.34);
  backdrop-filter: blur(22px);
}

.card.result { width: min(470px, 100%); text-align: center; }

.eyebrow {
  margin: 0 0 15px;
  color: #2877c7;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.card h1 {
  margin: 0;
  color: #0b1b45;
  font-size: clamp(2.6rem, 6.3vw, 5.2rem);
  line-height: .93;
  letter-spacing: -.065em;
}

.card.result h1 { font-size: clamp(2.15rem, 5vw, 3.8rem); }

.intro {
  margin: 22px 0 0;
  color: #526183;
  font-size: 1rem;
  line-height: 1.65;
}

.intro strong { color: #2877c7; }

.howto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 25px 0;
}

.howto span {
  padding: 13px 14px;
  border: 1px solid rgba(34,93,156,.13);
  border-radius: 14px;
  color: #50607f;
  background: rgba(224,246,255,.65);
  font-size: .8rem;
  line-height: 1.4;
}

.howto b { display: block; color: var(--ink); font-size: .86rem; }

.start {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding: 0 21px 0 24px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #316be0, #4252c6);
  font-size: 1rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 15px 34px rgba(55,83,204,.32);
}

.start span:last-child {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
}

.start:hover, .start:focus-visible {
  transform: translateY(-2px);
  outline: 3px solid rgba(255,207,86,.72);
  outline-offset: 3px;
}

.card small {
  display: block;
  margin-top: 13px;
  color: #75829d;
  font-size: .76rem;
  text-align: center;
}

.result-symbol {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  margin: -6px auto 22px;
  border-radius: 24px;
  color: #8b5015;
  background: linear-gradient(145deg, #fff2a5, #ffbf53);
  font-size: 2rem;
  box-shadow: 0 12px 28px rgba(255,191,83,.34);
  transform: rotate(6deg);
}

.result-symbol.moon {
  color: #3c367e;
  background: linear-gradient(145deg, #d8ceff, #8d86e8);
}

.controls {
  position: absolute;
  z-index: 4;
  right: max(clamp(18px, 3vw, 48px), env(safe-area-inset-right, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  left: max(clamp(18px, 3vw, 48px), env(safe-area-inset-left, 0px));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}

.controls[hidden] { display: none; }

.tip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 17px;
  background: rgba(7,24,64,.5);
  backdrop-filter: blur(13px);
}

.tip > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: #315ab7;
  background: rgba(255,255,255,.93);
  font-size: 1.25rem;
  font-weight: 900;
}

.tip p { margin: 0; color: rgba(255,255,255,.82); font-size: .74rem; line-height: 1.45; }
.tip b { color: #fff; }

.lift {
  display: inline-flex;
  min-width: 146px;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid rgba(255,255,255,.64);
  border-radius: 999px;
  color: #623915;
  background: linear-gradient(145deg, rgba(255,229,112,.98), rgba(255,174,77,.98));
  font-size: .95rem;
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  box-shadow: 0 14px 36px rgba(82,47,9,.27), 0 0 0 6px rgba(255,255,255,.12);
}

.lift span { font-size: 1.35rem; }
.lift:active { transform: scale(.96); }
.lift:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
  .brand { padding: 8px 11px 8px 8px; }
  .brand span { width: 25px; height: 25px; }
  .brand strong { font-size: .82rem; }
  .hud { position: absolute; top: 56px; left: 0; padding: 6px; }
  .stat { min-width: 82px; padding: 4px 9px; }
  .stat span { font-size: .64rem; }
  .stat strong { font-size: 1rem; }
  .tools { grid-column: 2; }
  .icon-button { width: 43px; height: 43px; border-radius: 14px; }
  .journey {
    top: calc(127px + var(--safe-top-shift));
    right: max(16px, env(safe-area-inset-right, 0px));
    left: max(16px, env(safe-area-inset-left, 0px));
    width: auto;
    transform: none;
  }
  .journey__labels { font-size: .67rem; }
  .overlay { align-items: end; padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
  .card {
    max-height: calc(100svh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    padding: 25px 22px 22px;
    border-radius: 25px;
  }
  .card h1 { font-size: clamp(2.55rem, 12vw, 3.65rem); }
  .intro { margin-top: 15px; font-size: .92rem; }
  .howto { margin: 17px 0; }
  .start { min-height: 54px; margin-top: 18px; }
  .tip { display: none; }
  .controls { justify-content: flex-end; }
  .lift { min-width: 132px; min-height: 60px; }
}

@media (max-width: 420px), (max-height: 700px) {
  .journey { top: calc(117px + var(--safe-top-shift)); padding-top: 8px; }
  .overlay { padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .card { max-height: calc(100svh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 22px 19px 18px; }
  .eyebrow { margin-bottom: 10px; font-size: .67rem; }
  .card h1 { font-size: 2.65rem; }
  .howto span { padding: 9px 10px; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}

/* Level 2 UI */
.equipment {
  position: absolute;
  z-index: 4;
  top: calc(158px + var(--safe-top-shift));
  left: max(clamp(16px, 3vw, 46px), env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 14px 8px 9px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  color: #552c75;
  background: rgba(255,243,203,.94);
  box-shadow: 0 12px 30px rgba(84,36,118,.2);
  backdrop-filter: blur(12px);
  font-size: .82rem;
  pointer-events: none;
}
.equipment__icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #a184f2, #6546bc);
  font-size: 1rem;
}
.equipment.is-unlocked,
.equipment[data-unlocked="true"] {
  color: #224f45;
  background: rgba(211,255,229,.95);
}
.equipment.is-unlocked .equipment__icon,
.equipment[data-unlocked="true"] .equipment__icon {
  background: linear-gradient(145deg, #58dbaa, #258f79);
  box-shadow: 0 0 14px rgba(74,221,172,.48);
}
.game-notice {
  position: absolute;
  z-index: 5;
  top: 38%;
  left: 50%;
  max-width: calc(100% - 32px);
  transform: translate(-50%, -50%);
  padding: 11px 20px;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 999px;
  color: #572c75;
  background: rgba(255,244,174,.96);
  box-shadow: 0 15px 36px rgba(74,35,102,.28);
  font-size: clamp(.92rem, 2.5vw, 1.15rem);
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  animation: game-notice-pop .32s ease-out both;
}
@keyframes game-notice-pop {
  from { opacity: 0; transform: translate(-50%, -40%) scale(.84); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.boss-hud {
  position: absolute;
  z-index: 4;
  top: calc(158px + var(--safe-top-shift));
  left: 50%;
  width: min(420px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 10px 14px 12px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 16px;
  color: #fff;
  background: rgba(73,39,120,.88);
  box-shadow: 0 13px 34px rgba(35,20,72,.34);
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.boss-hud__labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: .78rem;
}
.boss-hud__labels span { color: rgba(255,255,255,.83); }
.boss-health {
  height: 9px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.boss-health span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #43d8ef, #a5f7ff);
  box-shadow: 0 0 13px rgba(117,237,255,.64);
  transition: width .2s ease;
}
.platform-controls {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}
.touch-cluster {
  display: flex;
  gap: 12px;
  pointer-events: auto;
}
.touch-button {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 22px;
  color: #542662;
  background: linear-gradient(145deg, rgba(255,249,187,.98), rgba(255,158,208,.98));
  box-shadow: 0 11px 27px rgba(68,38,92,.28), 0 0 0 5px rgba(255,255,255,.11);
  font-size: 1.55rem;
  font-weight: 900;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.touch-button--jump {
  color: #164b43;
  background: linear-gradient(145deg, #c6ffe4, #61dfb4);
}
.touch-button--attack {
  color: #3f2d76;
  background: linear-gradient(145deg, #e9dfff, #a28bf3);
}
.touch-button:active { transform: scale(.94); }
.touch-button:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
}
.touch-button:disabled {
  filter: grayscale(.75);
  opacity: .48;
  cursor: not-allowed;
}
.game[data-level="2"] {
  --ink: #48245f;
  background: linear-gradient(150deg, #ffb9e7, #91dcff 52%, #8f73e8);
}
.game[data-level="2"] .brand {
  color: #54245f;
  background: rgba(255,242,251,.91);
  border-color: rgba(255,255,255,.75);
}
.game[data-level="2"] .brand > span {
  color: #713a6f;
  background: linear-gradient(145deg, #fff19b, #ff9dcc);
}
.game[data-level="2"] .hud {
  background: rgba(255,248,252,.94);
  border-color: rgba(255,255,255,.8);
}
.game[data-level="2"] .journey {
  background: rgba(86,39,119,.67);
  border-color: rgba(255,255,255,.5);
}
.game[data-level="2"] .progress span {
  background: linear-gradient(90deg, #ff5f89, #ffb54b, #ffe45e, #55df9d, #53b9ff, #a474f4);
  box-shadow: 0 0 16px rgba(255,184,221,.75);
}
.game[data-level="2"] .controls { justify-content: stretch; }
.game[data-level="2"] .tip,
.game[data-level="2"] #liftButton { display: none; }
@media (max-width: 760px) {
  .hud .stat { min-width: 72px; }
  .equipment,
  .boss-hud { top: calc(188px + var(--safe-top-shift)); }
  .platform-controls { gap: 10px; }
  .touch-button {
    width: 61px;
    height: 61px;
    border-radius: 19px;
  }
}
@media (max-width: 420px), (max-height: 700px) {
  .equipment,
  .boss-hud { top: calc(172px + var(--safe-top-shift)); }
  .controls {
    right: max(12px, env(safe-area-inset-right, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
  }
  .touch-cluster { gap: 8px; }
  .touch-button {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    font-size: 1.35rem;
  }
}
@media (max-height: 560px) and (orientation: landscape) {
  .equipment,
  .boss-hud { top: calc(172px + var(--safe-top-shift)); }
  .touch-button {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-notice { animation: none; }
}