:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #f7fbff;
  background: #0a1424;
  --ink: #0d1d33;
  --gold: #ffd166;
  --mint: #7ff0d0;
  --coral: #ff7a7a;
  --sky: #3d6ea8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 78% 8%, #284b7a 0, transparent 34%),
    radial-gradient(circle at 12% 88%, #1d3a54 0, transparent 40%),
    linear-gradient(180deg, #0b1728, #101d31 55%, #0a1424);
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.page {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.game-shell {
  position: relative;
  width: min(1080px, 100%, calc((100dvh - 20px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #0e1c30;
  box-shadow: 0 24px 70px #0009, 0 0 0 1px #ffffff12;
  isolation: isolate;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.hud {
  position: absolute;
  inset:
    calc(8px + env(safe-area-inset-top))
    calc(58px + env(safe-area-inset-right))
    auto
    calc(10px + env(safe-area-inset-left));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
  font-size: clamp(9px, 1.25vw, 13px);
  letter-spacing: .03em;
}

.hud-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.hud-group:last-child { justify-content: flex-end; }

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0a1728cc;
  border: 1px solid #ffffff22;
  box-shadow: 0 3px 12px #0005;
  backdrop-filter: blur(6px);
  font-weight: 750;
  white-space: nowrap;
}

.hearts { color: #ff7b8d; font-size: 1.35em; letter-spacing: .06em; line-height: 1; }
.hearts.low { animation: heart-throb .7s ease-in-out infinite alternate; }
.potions { color: #f7b9ff; }
.score { color: var(--gold); }
.chapter { color: var(--mint); font-size: .88em; letter-spacing: .1em; }

.icon-button {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #ffffff2a;
  border-radius: 999px;
  background: #0a1728d9;
  color: #fff;
  font: 700 17px/1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 12px #0005;
}

.icon-button:active { transform: translateY(1px); }

.toast {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translate(-50%, -6px);
  margin: 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: #071322e8;
  border: 1px solid #ffd16655;
  color: #fff5d6;
  font-size: clamp(11px, 1.5vw, 15px);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 30;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

.overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(14px, 4vw, 44px);
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 30%, #183a5ce6, #081324f2 70%),
    #081324f2;
  backdrop-filter: blur(4px);
}

.overlay[hidden] { display: none; }

.overlay > * { max-width: 660px; }

.overlay h1,
.overlay h2 {
  margin: 0 0 .25em;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 4px 24px #0008;
}

.overlay h1 { font-size: clamp(34px, 7vw, 68px); }
.overlay h2 { font-size: clamp(26px, 5vw, 46px); }

.overlay p {
  margin: .36em 0;
  font-size: clamp(12px, 1.75vw, 16px);
  line-height: 1.45;
  color: #dce9f7;
}

.eyebrow {
  margin: 0 0 .5em !important;
  color: var(--gold) !important;
  font-size: clamp(10px, 1.35vw, 12px) !important;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.overlay strong { color: #fff; }

.overlay-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 8px;
}

.primary,
.ghost-button {
  font: 800 clamp(13px, 1.8vw, 16px)/1 system-ui, sans-serif;
  padding: 14px 24px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  min-height: 48px;
  letter-spacing: .02em;
}

.primary {
  background: linear-gradient(180deg, #ffd97a, #f5b53d);
  color: #2a1a03;
  box-shadow: 0 6px 0 #a9701b, 0 12px 30px #0007;
}

.primary:active { transform: translateY(3px); box-shadow: 0 3px 0 #a9701b; }

.ghost-button {
  background: #ffffff12;
  border: 1px solid #ffffff40;
  color: #eaf4ff;
}

.ghost-button:hover { background: #ffffff20; }

.small {
  font-size: clamp(10px, 1.4vw, 13px) !important;
  color: #a9c0d8 !important;
}

.controls-help { margin-top: 12px !important; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: .12em .38em;
  border-radius: 5px;
  background: #ffffff18;
  border: 1px solid #ffffff30;
  box-shadow: 0 2px 0 #00000040;
  font: inherit;
  font-weight: 700;
  text-align: center;
}

.end-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 !important;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9fb8d0 !important;
}

.end-score output {
  color: var(--gold);
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: 0;
  text-transform: none;
}

.byline { color: #8ba4be !important; margin-top: 14px !important; }

.touch-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding:
    0
    calc(12px + env(safe-area-inset-right))
    calc(10px + env(safe-area-inset-bottom))
    calc(12px + env(safe-area-inset-left));
  pointer-events: none;
}

.touch-cluster {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.touch-button {
  pointer-events: auto;
  display: grid;
  place-items: center;
  min-width: 58px;
  min-height: 58px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid #ffffff3d;
  background: #0b1a2ddb;
  color: #f5fbff;
  font: 800 clamp(10px, 1.5vw, 13px)/1 system-ui, sans-serif;
  letter-spacing: .04em;
  box-shadow: 0 5px 0 #00000045, 0 8px 24px #0006;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.touch-button:active,
.touch-button.held {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #00000045;
  background: #173a5de8;
}

.touch-button.move {
  width: 62px;
  height: 62px;
  font-size: 24px;
  border-radius: 999px;
}

.touch-button.swing {
  width: clamp(76px, 11vw, 98px);
  height: clamp(76px, 11vw, 98px);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 25%, #ffe29a, #e6a426);
  color: #352208;
  border-color: #ffe9b0;
  box-shadow: 0 6px 0 #8e5d12, 0 10px 28px #0007;
}

.touch-button.climb {
  width: clamp(68px, 9vw, 86px);
  height: clamp(68px, 9vw, 86px);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 25%, #b8fff0, #3dbfa4);
  color: #04251d;
  border-color: #d8fff7;
  box-shadow: 0 6px 0 #1d7662, 0 10px 28px #0007;
}

.touch-button.throw {
  background: #3a1b4fdb;
  border-color: #eab6ff88;
  color: #f4d6ff;
}

body[data-mode="climb"] .swing,
body[data-mode="climb"] .throw,
body[data-mode="swing"] .climb,
body[data-mode="rest"] .touch-controls,
body[data-mode="won"] .touch-controls,
body[data-mode="gameover"] .touch-controls {
  display: none;
}

.key-hint {
  display: none;
  margin: 0;
  color: #8ea6bd;
  font-size: 12px;
  text-align: center;
}

@keyframes heart-throb {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

@media (hover: hover) and (pointer: fine) {
  .touch-controls { display: none; }
  .key-hint { display: block; }
  .touch-help { display: none; }
}

@media (max-width: 700px) {
  .hud {
    inset:
      calc(5px + env(safe-area-inset-top))
      calc(48px + env(safe-area-inset-right))
      auto
      calc(6px + env(safe-area-inset-left));
  }
  .pill { min-height: 23px; padding: 3px 8px; }
  .icon-button { width: 30px; height: 30px; font-size: 15px; }
  .chapter { display: none; }
  .toast { top: 14%; white-space: normal; text-align: center; width: max-content; max-width: 82%; }
  .game-shell { border-radius: 14px; }
  .overlay p { font-size: clamp(11px, 2.8vw, 14px); }
}

@media (max-height: 520px) and (orientation: landscape) {
  .overlay { justify-content: flex-start; padding-top: 12px; }
  .overlay h1 { font-size: 30px; }
  .overlay h2 { font-size: 24px; }
  .overlay p { margin: .22em 0; }
  .overlay-buttons { margin-top: 8px; }
  .byline, .controls-help { display: none; }
  .touch-button { min-height: 50px; }
  .touch-button.swing { width: 70px; height: 70px; }
  .touch-button.climb { width: 64px; height: 64px; }
  .touch-button.move { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .hearts.low { animation: none; }
  .toast { transition: none; }
}

.rotate-hint { display: none; }

@media (orientation: portrait) and (max-width: 800px) {
  .game-shell {
    width: min(100%, calc((100dvh - 150px) * 16 / 9));
  }
  .overlay {
    position: fixed;
    inset: 0;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    z-index: 60;
  }
  .overlay h1 { font-size: clamp(30px, 10vw, 48px); }
  .overlay h2 { font-size: clamp(24px, 8vw, 38px); }
  .overlay p { font-size: clamp(12px, 3.4vw, 15px); }
  .touch-controls {
    top: 100%;
    bottom: auto;
    padding-top: 10px;
  }
  .touch-button.move { width: 58px; height: 58px; }
  .touch-button.swing { width: 78px; height: 78px; }
  .touch-button.climb { width: 70px; height: 70px; }
  .rotate-hint {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(10px + env(safe-area-inset-bottom));
    margin: 0;
    text-align: center;
    color: #93abc2;
    font-size: 12px;
    letter-spacing: .01em;
  }
}

@media (orientation: portrait) and (max-width: 800px) and (max-height: 560px) {
  .rotate-hint { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .desktop-help { display: none; }
  .touch-help { display: inline; }
  body { place-items: start center; }
  .game-shell {
    width: min(1080px, 100%, calc((100dvh - 142px) * 16 / 9));
    overflow: visible;
  }
  canvas { border-radius: inherit; }
  .overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    padding: max(14px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom));
  }
  .touch-controls {
    top: 100%;
    bottom: auto;
    padding-top: 8px;
  }
}