/* Hesperides: The Wild Garden */
:root {
  --ink: #3d2f1e; --ivory: #f6efe0; --gold: #b8862c; --gold-l: #e8b53a;
  --panel: rgba(246, 239, 224, 0.94); --bad: #b45a4a;
  --vh100: 100vh;
}
@supports (height: 100dvh) { :root { --vh100: 100dvh; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  background: radial-gradient(120% 90% at 50% 0%, #efe4c8 0%, #dcc99c 55%, #c3a76e 100%);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-user-select: none; user-select: none;
}
[hidden] { display: none !important; }

#stage {
  position: relative;
  height: min(82vh, 660px);
  min-height: 400px;
  border-radius: 12px;
  overflow: hidden;
  background: #3d2f1e;
  box-shadow: 0 18px 50px rgba(40, 26, 8, 0.35);
}
#app { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---------- HUD ---------- */
#hud {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(#f6efe0, #ecdfc0);
  border-bottom: 1px solid rgba(90, 70, 40, 0.25);
  font-size: 14px; min-height: 46px;
}
#hudChap { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
#hudPar { color: #7a6134; white-space: nowrap; }
#hudMoves { white-space: nowrap; font-variant-numeric: tabular-nums; }
#hudApples { white-space: nowrap; }
.ht { margin-right: 2px; }
.ht.on { color: #c0392b; }
.ht.off { color: rgba(90, 70, 40, 0.25); }
.hud-btn {
  flex: 0 0 auto; font: 700 13px Georgia, serif; color: var(--ink);
  background: #f9f3e3; border: 1px solid rgba(90, 70, 40, 0.35);
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.hud-btn:hover { background: #fffaf0; }
.hud-btn:disabled { opacity: 0.4; cursor: default; }

/* ---------- stage ---------- */
#canvasWrap { flex: 1 1 auto; position: relative; min-height: 0; }
#cv { position: absolute; inset: 0; display: block; touch-action: none; }

/* ---------- overlays ---------- */
.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(48, 34, 16, 0.45);
  padding: 16px;
  z-index: 5;
}
.panel {
  background: var(--panel);
  border: 1px solid rgba(184, 134, 44, 0.5);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(40, 26, 8, 0.35);
  padding: 22px 26px;
  max-width: 460px; width: 100%;
  text-align: center;
  max-height: 92%; overflow: auto;
}
.reveal { animation: reveal .35s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.title-word {
  font-size: clamp(26px, 6vw, 40px); letter-spacing: .04em; color: var(--gold);
  text-shadow: 0 1px 0 #fff;
}
.title-word em { color: var(--ink); font-style: italic; }
.subtitle { margin: 8px 0 18px; font-style: italic; color: #6d5a38; font-size: 14.5px; line-height: 1.5; }
.btn {
  display: block; width: 100%; margin: 8px 0; padding: 11px 14px;
  font: 700 15px Georgia, serif; color: #fffaf0;
  background: linear-gradient(#c9992f, #a97620);
  border: 1px solid #7c5a18; border-radius: 10px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(90, 60, 10, 0.4);
}
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: #f3ead2; color: var(--ink); border-color: rgba(90,70,40,.4); box-shadow: none; }
.small { font-size: 12.5px; color: #7a6134; margin-top: 10px; }

/* chapter grid */
#chapGrid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 14px 0;
}
.chap {
  font: 700 15px Georgia, serif; padding: 8px 0 5px; cursor: pointer;
  background: #fbf5e6; border: 1px solid rgba(90,70,40,.3); border-radius: 9px; color: var(--ink);
}
.chap .s { display: block; font-size: 10px; color: var(--gold); letter-spacing: 2px; min-height: 12px; }
.chap:hover:not(:disabled) { background: #fff; border-color: var(--gold); }
.chap.locked { opacity: .45; cursor: default; }

/* result */
#resStars { font-size: 34px; letter-spacing: 8px; color: var(--gold-l); text-shadow: 0 2px 0 rgba(90,60,10,.4); }
#resTitle { font-size: 20px; margin: 6px 0 4px; }
#resBody { font-size: 14px; color: #6d5a38; margin-bottom: 12px; }

/* touch d-pad */
#dpad {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); gap: 4px;
  opacity: .82;
}
#dpad button {
  font-size: 20px; color: var(--ink); background: rgba(246,239,224,.85);
  border: 1px solid rgba(90,70,40,.4); border-radius: 10px; cursor: pointer; touch-action: none;
}
#dpad .blank { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { #dpad { display: none; } }
@media (max-width: 480px) {
  #hud { font-size: 12px; gap: 6px; padding: 6px 8px; }
  #hudPar { display: none; }
  .panel { padding: 16px; }
  #chapGrid { grid-template-columns: repeat(5, 1fr); }
}