:root {
  color-scheme: dark;
  --night: #030805;
  --deep: #07100b;
  --grove: #10251a;
  --leaf: #7fa474;
  --moss: #a9c18f;
  --bone: #eee8d8;
  --muted: #9ca99d;
  --gold: #d4ae69;
  --blight: #8c5470;
  --line: rgba(202, 220, 183, .17);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--night); }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--bone);
  background:
    radial-gradient(circle at 50% 5%, rgba(62, 112, 74, .18), transparent 34rem),
    linear-gradient(#07100b, #020503 76%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }

.grove-shell { width: min(calc(100% - 28px), 1440px); margin: 0 auto; padding: 18px 0 52px; }
.game-header { min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.back-link, .sound-button {
  color: var(--muted);
  font-size: .66rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.back-link { justify-self: start; text-underline-offset: 6px; }
.sound-button { justify-self: end; padding: 10px 0; border: 0; background: none; cursor: pointer; }
.back-link:hover, .sound-button:hover { color: var(--moss); }
.title-lockup { text-align: center; }
.title-lockup span { color: var(--leaf); font-size: .61rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.title-lockup h1 { margin: 5px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 4vw, 2.9rem); font-weight: 400; line-height: .95; }

.game-stage { position: relative; }
.grove-frame {
  position: relative;
  padding: clamp(10px, 1.6vw, 20px);
  border: 1px solid rgba(202, 220, 183, .18);
  background:
    linear-gradient(90deg, rgba(202, 220, 183, .025), transparent 12% 88%, rgba(202, 220, 183, .025)),
    #06100a;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
}
.grove-frame::before, .grove-frame::after {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 72%;
  border-block: 1px solid rgba(202, 220, 183, .14);
  content: "";
  transform: translateY(-50%);
}
.grove-frame::before { left: -1px; border-right: 1px solid rgba(202, 220, 183, .1); }
.grove-frame::after { right: -1px; border-left: 1px solid rgba(202, 220, 183, .1); }
.canvas-wrap { position: relative; overflow: hidden; border: 1px solid rgba(202, 220, 183, .13); background: #07100b; }
canvas { width: 100%; height: auto; display: block; touch-action: none; }
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    repeating-linear-gradient(to bottom, rgba(238, 232, 216, .018) 0 1px, transparent 2px 5px),
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, .48));
  mix-blend-mode: screen;
}
.crown-mark {
  position: absolute;
  top: -17px;
  left: 50%;
  z-index: 5;
  width: 36px;
  aspect-ratio: 1;
  border: 1px solid rgba(202, 220, 183, .3);
  border-radius: 50%;
  background: #07100b;
  transform: translateX(-50%);
}
.crown-mark::before, .crown-mark::after { position: absolute; content: ""; }
.crown-mark::before { inset: 7px; border: 1px solid rgba(202, 220, 183, .22); border-radius: 50%; }
.crown-mark::after { left: 17px; top: 7px; width: 1px; height: 22px; background: rgba(202, 220, 183, .45); box-shadow: -6px 6px 0 -0.25px rgba(202, 220, 183, .25), 6px 6px 0 -0.25px rgba(202, 220, 183, .25); }

.game-overlay, .choice-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: clamp(15px, 4vw, 44px);
  background: radial-gradient(circle at 50% 43%, rgba(16, 43, 27, .76), rgba(2, 6, 4, .96) 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.game-overlay.is-visible, .choice-overlay.is-visible { opacity: 1; pointer-events: auto; }
.overlay-panel { width: min(760px, 100%); text-align: center; }
.overlay-kicker, .choice-panel > p { margin: 0 0 14px; color: var(--leaf); font-size: .63rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.game-overlay h2, .choice-panel h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.15rem, 6vw, 5.3rem); font-weight: 400; line-height: .92; }
.game-overlay [data-overlay-copy] { max-width: 620px; margin: 21px auto 0; color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-size: clamp(.9rem, 1.7vw, 1.1rem); line-height: 1.6; }
.primary-button {
  min-width: 180px;
  margin-top: 25px;
  padding: 13px 27px;
  border: 1px solid rgba(202, 220, 183, .42);
  color: var(--moss);
  background: rgba(127, 164, 116, .08);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.primary-button:hover { border-color: var(--moss); background: rgba(127, 164, 116, .16); }
.overlay-hint { display: block; max-width: 600px; margin: 16px auto 0; color: rgba(238, 232, 216, .48); font-size: .62rem; letter-spacing: .07em; }

.memory-panel { margin-top: 22px; padding: 14px; border: 1px solid rgba(202, 220, 183, .14); background: rgba(3, 9, 5, .42); text-align: left; }
.memory-panel.is-hidden { display: none; }
.memory-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--muted); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; }
.memory-head strong { color: var(--gold); font-weight: 700; }
.memory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.memory-grid button { min-width: 0; padding: 11px; border: 1px solid rgba(202, 220, 183, .13); color: var(--bone); background: rgba(16, 37, 26, .46); text-align: left; cursor: pointer; }
.memory-grid button:hover:not(:disabled) { border-color: rgba(202, 220, 183, .38); background: rgba(25, 54, 37, .58); }
.memory-grid button:disabled { opacity: .42; cursor: not-allowed; }
.memory-grid span { display: block; color: var(--moss); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
.memory-grid small { display: block; min-height: 2.5em; margin-top: 4px; color: var(--muted); font-size: .61rem; line-height: 1.35; }
.memory-grid b { display: block; margin-top: 7px; color: var(--gold); font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

.choice-panel { width: min(960px, 100%); text-align: center; }
.choice-panel h2 { font-size: clamp(2rem, 5vw, 4.4rem); }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.5vw, 16px); margin-top: 24px; }
.choice-card { min-width: 0; min-height: 168px; padding: 18px; border: 1px solid rgba(202, 220, 183, .2); color: var(--bone); background: rgba(7, 18, 11, .86); text-align: left; cursor: pointer; }
.choice-card:hover { border-color: var(--moss); background: rgba(17, 39, 24, .92); transform: translateY(-2px); }
.choice-card .choice-icon { display: grid; width: 35px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(212, 174, 105, .3); border-radius: 50%; color: var(--gold); font-family: Georgia, serif; }
.choice-card h3 { margin: 12px 0 5px; color: var(--moss); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; font-weight: 400; }
.choice-card p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.choice-card small { display: block; margin-top: 12px; color: var(--gold); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; }

.mobile-stick { display: none; width: 150px; margin: 18px auto 0; text-align: center; touch-action: none; user-select: none; }
.stick-ring { position: relative; width: 112px; aspect-ratio: 1; margin: 0 auto; border: 1px solid rgba(202, 220, 183, .22); border-radius: 50%; background: rgba(9, 24, 15, .7); }
.stick-ring::before, .stick-ring::after { position: absolute; content: ""; background: rgba(202, 220, 183, .08); }
.stick-ring::before { left: 50%; top: 12px; bottom: 12px; width: 1px; }
.stick-ring::after { top: 50%; left: 12px; right: 12px; height: 1px; }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 46px; aspect-ratio: 1; border: 1px solid rgba(202, 220, 183, .38); border-radius: 50%; background: rgba(127, 164, 116, .28); transform: translate(-50%, -50%); }
.mobile-stick small { display: block; margin-top: 7px; color: var(--muted); font-size: .59rem; letter-spacing: .11em; text-transform: uppercase; }

.game-notes { margin-top: 20px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; color: var(--muted); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.game-notes p { margin: 0; }
.game-notes strong { color: var(--moss); }
.status-line { min-height: 1.4em; margin: 15px 0 0; color: rgba(238, 232, 216, .52); font-family: Georgia, "Times New Roman", serif; font-size: .88rem; text-align: center; }

@media (max-width: 820px) {
  .grove-shell { width: min(calc(100% - 14px), 1440px); padding-top: 5px; }
  .game-header { min-height: 62px; grid-template-columns: 1fr auto 1fr; gap: 7px; }
  .back-link, .sound-button { font-size: .56rem; letter-spacing: .1em; }
  .title-lockup span { font-size: .51rem; }
  .title-lockup h1 { font-size: 1.5rem; }
  .grove-frame { padding: 7px; }
  .mobile-stick { display: block; }
  .game-notes { display: none; }
  .memory-grid, .choice-grid { grid-template-columns: 1fr; }
  .memory-grid button { padding: 8px 10px; }
  .memory-grid small { min-height: 0; }
  .choice-panel { max-height: 94%; overflow: auto; }
  .choice-card { min-height: 0; padding: 13px; }
  .choice-card .choice-icon { float: left; margin-right: 12px; }
  .choice-card h3 { margin-top: 1px; }
  .choice-card small { clear: both; padding-top: 7px; }
}

@media (max-width: 470px) {
  .sound-button { font-size: 0; }
  .sound-button::after { content: "Sound"; font-size: .56rem; }
  .game-overlay, .choice-overlay { padding: 10px; }
  .overlay-panel { max-height: 96%; overflow: auto; padding: 4px; }
  .memory-panel { padding: 8px; }
  .game-overlay h2 { font-size: 2.05rem; }
  .game-overlay [data-overlay-copy] { margin-top: 12px; font-size: .83rem; }
  .primary-button { margin-top: 16px; }
}