/* Find Gnaldo (working title): game CSS. Tokens from /design/garden.css. Phones first: portrait stacks
   HUD / prompt / board / bar; landscape puts the HUD left, the board in the middle and the claim button right. */
html, body { height: 100%; }
body {
  display: flex; flex-direction: column; height: 100svh; overflow: hidden; overscroll-behavior: none;
  background: var(--gg-cream);
  background-image: radial-gradient(color-mix(in srgb, var(--gg-ink) 8%, transparent) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
}
.gn-appbar { position: relative; z-index: 5; flex: none; }
.gn-namechip { min-height: 30px; }
@media (max-width: 560px) { .gn-namechip { display: none; } }

.gn-main {
  flex: 1; min-height: 0; width: 100%; max-width: 760px; margin: 0 auto;
  display: grid; grid-template-areas: "hud" "prompt" "board" "bar";
  grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px;
  padding: 8px max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
  user-select: none; -webkit-user-select: none;
}

/* ---------- HUD ---------- */
.gn-hud { grid-area: hud; display: flex; align-items: center; gap: 8px; min-width: 0; }
.gn-main.is-title .gn-hud, .gn-main.is-title .gn-prompt, .gn-main.is-title .gn-bar { visibility: hidden; }
.gn-level { background: var(--gg-butter); font-family: var(--gg-font-display); font-weight: 800; white-space: nowrap; }
.gn-kind { background: var(--gg-lavender-100); font-weight: 800; white-space: nowrap; }
.gn-kind.is-3 { background: #FFD9B8; }
.gn-kind.is-4 { background: var(--gg-pink-100); }
.gn-left { font-weight: 700; font-size: var(--gg-text-sm); color: var(--gg-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gn-clock {
  margin-left: auto; display: grid; justify-items: end; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gn-clock b {
  font-family: var(--gg-font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em;
  padding: 2px 8px; border-radius: 10px; transition: background-color var(--gg-dur-md);
}
.gn-clock small { font-size: var(--gg-text-xs); font-weight: 700; color: var(--gg-ink-3); margin-top: 2px; padding-right: 8px; }
.gn-clock.is-over b { background: #FFD9B8; }
.gn-clock.is-hit b { animation: gn-hit .5s ease-out; }
@keyframes gn-hit { 0% { background: var(--gg-pink); color: #fff; } 100% { background: transparent; } }

.gn-prompt {
  grid-area: prompt; margin: 0; min-height: 44px; display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 12px; border: var(--gg-border); border-radius: var(--gg-r-md); background: var(--gg-paper); box-shadow: var(--gg-shadow-sm);
  font-weight: 700; font-size: var(--gg-text-sm); line-height: 1.25;
}
.gn-prompt::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gg-ink); background: var(--gg-lime); }
.gn-prompt.is-oops::before { background: var(--gg-pink); }
.gn-prompt.is-win::before { background: var(--gg-butter); }
.gn-prompt b { font-weight: 800; background: var(--gg-lime); padding: 0 4px; border-radius: 5px; white-space: nowrap; }

/* ---------- the board ---------- */
.gn-board {
  grid-area: board; position: relative; min-height: 0; min-width: 0;
  border: 3px solid var(--gg-ink); border-radius: var(--gg-r-lg); box-shadow: var(--gg-shadow);
  background: #C9EBA3; overflow: hidden; touch-action: none;
}
.gn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.gn-canvas:focus { outline: none; }
.gn-canvas:focus-visible { outline: 3px dashed var(--gg-ink); outline-offset: -6px; }
.gn-board.is-resting .gn-canvas { visibility: hidden; }
.gn-veil { position: absolute; inset: 0; display: grid; place-items: center; background: #C9EBA3; font-weight: 800; color: var(--gg-green-800); }
.gn-veil[hidden] { display: none; }

/* "Not me, I have a twin!" */
.gn-bubble {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; max-width: 190px;
  padding: 6px 12px; background: var(--gg-paper); border: 2px solid var(--gg-ink); border-radius: 14px; box-shadow: var(--gg-shadow-sm);
  font-weight: 800; font-size: var(--gg-text-sm); line-height: 1.2; text-align: center; white-space: nowrap;
  transform: translate(var(--bx, 0), var(--by, 0)) translate(-50%, -100%);
}
.gn-bubble::after {
  content: ''; position: absolute; left: calc(50% + var(--tail, 0px)); bottom: -8px; width: 12px; height: 12px; margin-left: -6px;
  background: var(--gg-paper); border-right: 2px solid var(--gg-ink); border-bottom: 2px solid var(--gg-ink); transform: rotate(45deg);
}
.gn-bubble[hidden] { display: none; }

/* the guide's pointing hand (fingertip at --hx, --hy) */
.gn-hand {
  position: fixed; left: 0; top: 0; z-index: 30; width: 46px; height: 58px; pointer-events: none;
  transform: translate(calc(var(--hx, 0px) - 23px), calc(var(--hy, 0px) - 3px));
  filter: drop-shadow(2px 3px 0 rgba(17, 17, 17, .35));
  animation: gn-point 1.1s ease-in-out infinite;
}
.gn-hand[hidden] { display: none; }
.gn-hand.is-down { transform: translate(calc(var(--hx, 0px) - 23px), calc(var(--hy, 0px) - 55px)) rotate(180deg); animation-name: gn-point-down; filter: drop-shadow(-2px -3px 0 rgba(17, 17, 17, .35)); }
@keyframes gn-point-down {
  0%, 100% { transform: translate(calc(var(--hx, 0px) - 23px), calc(var(--hy, 0px) - 65px)) rotate(180deg); }
  50% { transform: translate(calc(var(--hx, 0px) - 23px), calc(var(--hy, 0px) - 57px)) rotate(180deg); }
}
@keyframes gn-point {
  0%, 100% { transform: translate(calc(var(--hx, 0px) - 23px), calc(var(--hy, 0px) + 7px)); }
  50% { transform: translate(calc(var(--hx, 0px) - 23px), calc(var(--hy, 0px) - 1px)); }
}

/* ---------- bottom bar: your pick + the claim ---------- */
.gn-bar { grid-area: bar; display: flex; align-items: center; gap: 10px; }
.gn-tray { display: flex; gap: 6px; flex: none; }
.gn-slot {
  width: 48px; height: 52px; border: 2px dashed color-mix(in srgb, var(--gg-ink) 40%, transparent); border-radius: 12px; background: var(--gg-paper);
  display: grid; place-items: center; overflow: hidden;
}
.gn-slot.is-on { border-style: solid; border-color: var(--gg-ink); background: var(--gg-lime-100); }
.gn-slot canvas { width: 100%; height: 100%; display: block; }
.gn-claim { flex: 1; min-height: 56px; font-size: var(--gg-text-lg); padding-inline: 14px; white-space: nowrap; }
.gn-claim:not(:disabled) { animation: gn-ready 1.6s ease-in-out infinite; }
@keyframes gn-ready { 0%, 100% { box-shadow: var(--gg-shadow); } 50% { box-shadow: 3px 3px 0 var(--gg-ink), 0 0 0 5px color-mix(in srgb, var(--gg-lime) 55%, transparent); } }

/* ---------- landscape: HUD left, board middle, pick + claim right ---------- */
@media (orientation: landscape) and (min-aspect-ratio: 5/4) {
  .gn-main {
    max-width: 1280px;
    grid-template-areas: "hud board prompt" "hud board bar";
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) minmax(150px, 200px);
    grid-template-rows: auto minmax(0, 1fr); gap: 10px;
    padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .gn-hud { flex-direction: column; align-items: stretch; gap: 8px; }
  .gn-hud .gg-pill { justify-content: center; }
  .gn-left { text-align: center; }
  .gn-clock { margin: 0; justify-items: center; padding: 8px 6px 6px; border: var(--gg-border); border-radius: var(--gg-r-md); background: var(--gg-paper); box-shadow: var(--gg-shadow-sm); }
  .gn-clock b { font-size: 30px; }
  .gn-clock small { padding: 0; }
  .gn-hud { align-self: start; }
  .gn-prompt { align-self: start; align-items: flex-start; }
  .gn-prompt::before { margin-top: 2px; }
  .gn-bar { flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 10px; }
  .gn-tray { justify-content: center; flex-wrap: wrap; }
  .gn-claim { flex: none; min-height: 64px; white-space: normal; line-height: 1.1; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .gn-main { grid-template-columns: 140px minmax(0, 1fr) 164px; }
  .gn-appbar .gg-appbar__in { min-height: 48px; }
  .gn-appbar .gg-wordmark { font-size: 18px; }
  .gn-appbar .gg-wordmark svg { width: 28px; height: 28px; }
  .gn-main { padding-top: 6px; gap: 8px; }
  .gn-hud { gap: 6px; }
  .gn-clock { padding: 5px 6px 4px; }
  .gn-clock b { font-size: 24px; }
  .gn-prompt { font-size: var(--gg-text-xs); padding: 6px 10px; }
}
@media (min-width: 1000px) and (min-height: 700px) {
  .gn-main { padding-top: 16px; padding-bottom: 20px; gap: 14px; }
  .gn-clock b { font-size: 36px; }
  .gn-prompt { font-size: var(--gg-text-md); }
}

/* ---------- modals ---------- */
.gn-modal { z-index: 60; }
.gn-sheet { align-items: end; background: rgba(14, 44, 14, .3); }
.gn-h2 { font-family: var(--gg-font-display); font-weight: 800; font-size: var(--gg-text-2xl); margin: 2px 0 6px; }
.gn-line { margin: 4px 0 12px; color: var(--gg-ink-2); font-size: var(--gg-text-sm); }
.gn-btns { display: grid; gap: 10px; }

.gn-titlecard { padding-top: 16px; }
.gn-titleart { width: 100%; height: 132px; display: block; margin: 0 auto 4px; }
.gn-title { font-family: var(--gg-font-display); font-weight: 800; font-size: clamp(38px, 10vw, 52px); line-height: 1; margin: 4px 0 10px; }
.gn-lede { color: var(--gg-ink-2); margin: 0 0 14px; font-size: var(--gg-text-md); }
.gn-levelpick { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 12px; }
.gn-levelpick[hidden] { display: none; }
.gn-levelpick__v { font-family: var(--gg-font-display); font-weight: 800; font-size: 22px; min-width: 104px; }
.gn-titlebtns { display: grid; gap: 6px; }
.gn-status { margin: 10px 0 0; font-size: var(--gg-text-sm); color: var(--gg-ink-2); }
.gn-status b { color: var(--gg-ink); }

.gn-howlist { text-align: left; margin: 0 0 18px; padding-left: 20px; display: grid; gap: 8px; font-size: var(--gg-text-sm); }
.gn-hero { background: var(--gg-butter); padding: 0 4px; border-radius: 4px; }
.gn-hero-btn { background: var(--gg-lime); padding: 0 4px; border-radius: 4px; }

.gn-resultcard { padding: 18px 20px 20px; }
.gn-result__top { display: flex; align-items: center; gap: 12px; text-align: left; }
.gn-portrait { width: 84px; height: 104px; flex: none; border: 2px solid var(--gg-ink); border-radius: 18px; background: #D7F2B4; }
.gn-score { margin: 0; font-size: var(--gg-text-sm); color: var(--gg-ink-2); font-weight: 700; }
.gn-score b { font-family: var(--gg-font-display); font-size: 34px; color: var(--gg-ink); font-variant-numeric: tabular-nums; }
.gn-stars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 10px; }
.gn-star { display: grid; justify-items: center; gap: 2px; font-size: var(--gg-text-xs); font-weight: 700; color: var(--gg-ink-3); line-height: 1.15; }
.gn-star svg { width: 34px; height: 34px; }
.gn-star.is-on { color: var(--gg-ink); }
.gn-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px; }
.gn-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 6px 10px; border: 2px solid var(--gg-ink); border-radius: var(--gg-r-sm); background: var(--gg-cream); font-size: var(--gg-text-xs); font-weight: 700; color: var(--gg-ink-2); text-align: left; }
.gn-row b { font-family: var(--gg-font-display); font-size: 17px; color: var(--gg-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the playtest board line (platform/playtest.js renders it: "Saved to the board: #3 this week" + Board) */
.gn-ptline { margin: 0 0 12px; }
.gn-ptline[hidden] { display: none; }
.gn-pausecard .gn-btns { margin-top: 6px; }
.gn-toggle { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 10px; font-weight: 700; }

/* short landscape: cards go wide and short */
@media (orientation: landscape) and (max-height: 560px) {
  .gg-modal { padding: 10px; }
  .gn-titlecard { width: min(640px, 100%); display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; padding: 14px 18px; text-align: left; }
  .gn-titleart { height: 200px; margin: 0; }
  .gn-title { font-size: 36px; margin: 2px 0 6px; }
  .gn-lede { font-size: var(--gg-text-sm); margin-bottom: 8px; }
  .gn-levelpick { justify-content: flex-start; margin-bottom: 8px; }
  .gn-titlebtns { grid-template-columns: 1fr auto; }
  .gn-titlebtns .gg-btn--lg { min-height: 52px; }
  .gn-status { margin-top: 6px; font-size: var(--gg-text-xs); }
  .gn-sheet { align-items: center; }
  .gn-resultcard { width: min(680px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 14px 18px; align-items: start; }
  .gn-result__top { grid-column: 1; grid-row: 1; }
  .gn-stars { grid-column: 1; grid-row: 2; margin: 10px 0 0; }
  .gn-result__stats { grid-column: 2; grid-row: 1; align-self: start; }
  /* the board line sits under the stats, next to the stars, so the card stays one screen tall */
  .gn-ptline { grid-column: 2; grid-row: 2; align-self: end; gap: 4px; margin: 8px 0 0; padding: 6px 10px; }
  .gn-ptline .ggp-moment__line { font-size: var(--gg-text-xs); }
  .gn-ptline .ggp-moment__row { flex-wrap: nowrap; }
  .gn-rows { margin: 0; }
  .gn-result__stats .gn-line { margin: 10px 0 0; }
  .gn-resultcard .gn-btns { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-top: 8px; }
  .gn-resultcard .gn-btns .gg-btn--lg { min-height: 52px; }
  .gn-how { width: min(640px, 100%); padding: 16px 20px; }
  .gn-howlist { gap: 4px; margin-bottom: 10px; }
  .gn-pausecard { width: min(520px, 100%); padding: 16px 20px; }
  .gn-pausecard .gn-btns { grid-template-columns: 1fr 1fr 1fr; }
  .gn-toggle { margin: 10px 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .gn-hand { animation: none; transform: translate(calc(var(--hx, 0px) - 23px), calc(var(--hy, 0px) + 2px)); }
  .gn-hand.is-down { animation: none; transform: translate(calc(var(--hx, 0px) - 23px), calc(var(--hy, 0px) - 60px)) rotate(180deg); }
  .gn-claim:not(:disabled) { animation: none; box-shadow: 3px 3px 0 var(--gg-ink), 0 0 0 4px color-mix(in srgb, var(--gg-lime) 60%, transparent); }
  .gn-clock.is-hit b { animation: none; background: var(--gg-pink-100); }
}