/* The Play page: the app's game screen in a browser. The sky behind, the board, and the
   wooden plank along the bottom with the counters, the dog, the score and the buttons. */

body.play { height: 100dvh; overflow: hidden; background: var(--sky); overscroll-behavior: none; touch-action: manipulation; }
.stage { position: relative; height: 100dvh; display: flex; flex-direction: column; }
.sky { position: absolute; inset: 0; background: url('../img/sky.webp') center 72% / cover no-repeat, var(--sky); z-index: 0; }

.home { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); z-index: 5; width: 46px; height: 46px; }
.home img { width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25)); }
.home:hover img { transform: scale(1.06); }
.corner-tools { position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; gap: 6px; }

.board-host {
  position: relative; z-index: 1; flex: 1; min-height: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding: max(64px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
}
/* The plank: the art's ends stay their size, only the middle stretches (the app's rule). */
.plank {
  --h: clamp(78px, 15vh, 128px);
  position: relative; z-index: 2; flex: none; height: var(--h);
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: clamp(8px, 1.6vw, 22px);
  /* The title's plank (GAME_menu_woodpanel, 1600 × 324 exported): the in-game one has a score
     plate painted in, which sat beside the score box as a second, empty one. */
  border-style: solid; border-width: 0 calc(var(--h) * 0.33) 0 calc(var(--h) * 0.28);
  border-image: url('../img/ui/GAME_menu_woodpanel.webp') 0 106 0 90 fill / 0 calc(var(--h) * 0.33) 0 calc(var(--h) * 0.28) stretch;
  padding: calc(var(--h) * 0.16) calc(var(--h) * 0.05) max(calc(var(--h) * 0.06), env(safe-area-inset-bottom));
  color: #fff;
}
.counters { display: flex; gap: clamp(6px, 1.2vw, 18px); list-style: none; margin: 0; padding: 0; }
.counter { position: relative; display: flex; align-items: center; gap: 4px; }
.counter img { width: calc(var(--h) * 0.5); height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
.counter span { font: calc(var(--h) * 0.17)/1 var(--numbers); font-weight: 600; min-width: 2ch; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.counter[data-share="1"] span { color: #73edff; }
.counter[data-share="2"] span { color: #ffe64d; }
.counter[data-share="3"] span { color: #ff6b5c; }
.dog { height: calc(var(--h) * 0.72); width: auto; justify-self: end; }
.score {
  display: grid; justify-items: center; align-content: center; min-width: calc(var(--h) * 1.5);
  justify-self: center; width: max-content;
  padding: 4px 14px; border-radius: 14px; background: rgba(35, 20, 8, 0.45); box-shadow: inset 0 2px 6px rgba(0,0,0,0.35);
}
.score .caption { font: calc(var(--h) * 0.14)/1.1 var(--serif); white-space: nowrap; }
.score .caption.is-preview { color: #ffe64d; }
.score .value { font: calc(var(--h) * 0.26)/1.1 var(--numbers); font-weight: 600; font-variant-numeric: tabular-nums; }
.buttons { display: flex; gap: clamp(6px, 1vw, 14px); justify-self: end; }
.icon-btn { width: calc(var(--h) * 0.55); height: calc(var(--h) * 0.55); padding: 0; border: 0; background: none; cursor: pointer; }
.icon-btn img { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); transition: transform 0.12s; }
.icon-btn:hover img { transform: scale(1.07); }
.icon-btn:disabled { opacity: 0.45; cursor: default; }
.icon-btn:disabled img { transform: none; }

/* Tall screens stack the plank: the counters, then the dog, the score and the buttons. */
@media (orientation: portrait) {
  .plank { --h: clamp(130px, 22vh, 190px); grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; row-gap: 4px; }
  .counters { grid-column: 1 / -1; justify-content: center; }
  /* Each count under its icon, as the app's stacked counters are: beside it, the counts ran
     into the next icon on a 390-point phone. */
  .counters { gap: clamp(4px, 2.5vw, 18px); }
  .counter { flex-direction: column; gap: 2px; }
  .counter img { width: min(calc(var(--h) * 0.27), 15vw); }
  .counter span { font-size: calc(var(--h) * 0.09); min-width: 0; }
  .dog { height: calc(var(--h) * 0.38); justify-self: start; }
  .score { min-width: 0; }
  .score .caption { font-size: calc(var(--h) * 0.08); }
  .score .value { font-size: calc(var(--h) * 0.15); }
  .icon-btn { width: calc(var(--h) * 0.3); height: calc(var(--h) * 0.3); }
}

.toast {
  position: absolute; z-index: 6; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  margin: 0; padding: 8px 18px; border-radius: 999px; background: rgba(20, 40, 60, 0.72); color: #fff;
  font-weight: 600; font-size: 0.95rem; opacity: 0; pointer-events: none; white-space: nowrap;
}

/* Game over: the app's wood panel. */
.panel-veil { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(10, 25, 40, 0.5); }
.panel-veil[hidden] { display: none; }
.panel {
  width: min(560px, 100%); text-align: center; color: #fff;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 48px);
  background: url('../img/ui/GAME_gamescreen_woodpanel.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}
.panel-title { width: min(360px, 80%); margin: 0 auto 10px; }
.panel .final { font: clamp(1.3rem, 4vw, 1.8rem)/1.3 var(--serif); margin: 0; }
.panel .final strong { font: 1.5em/1 var(--numbers); font-weight: 600; color: #ffe64d; display: block; margin-top: 6px; }
.panel .detail, .panel .best { font-size: 0.95rem; opacity: 0.9; margin: 6px 0 0; }
.panel .more { font-size: 0.9rem; opacity: 0.85; margin: 14px auto 0; max-width: 26em; }

/* The first visit's panel: what the browser game is, and what the app adds. */
.panel.intro { width: min(600px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.intro-title { font: clamp(1.8rem, 6vw, 2.6rem)/1.1 var(--display); margin: 0 0 12px; color: #ffe64d; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.panel .lead { font: clamp(1rem, 2.6vw, 1.15rem)/1.45 var(--serif); margin: 0 auto 8px; max-width: 30em; }
.app-has { list-style: none; padding: 0; margin: 4px auto 0; max-width: 30em; text-align: left; font-size: clamp(0.9rem, 2.4vw, 1rem); line-height: 1.4; }
.app-has li { position: relative; padding: 3px 0 3px 26px; }
.app-has li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 16px; height: 16px; background: url('../img/tiles/character_5.webp') center / contain no-repeat; }
.app-has strong { color: #ffe64d; font-weight: 700; }
@media (max-height: 500px) and (min-width: 600px) {
  .panel.intro { width: min(760px, 100%); padding: 22px 40px; }
  .intro-title { font-size: 1.7rem; margin-bottom: 6px; }
  .panel .lead { margin-bottom: 4px; max-width: none; }
  .app-has { columns: 2; column-gap: 28px; max-width: none; font-size: 0.88rem; }
  .app-has li { break-inside: avoid; }
  .intro .panel-actions { margin-top: 10px; }
}
.panel-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.noscript { position: fixed; inset: auto 0 0 0; padding: 16px; background: #fff; text-align: center; }

/* A phone held sideways: the board is narrow enough there for the close button to sit beside
   it, so the top gap kept for the button goes (the tiles were 27 px instead of 33). */
@media (orientation: landscape) and (max-height: 500px) {
  .board-host { padding-top: max(8px, env(safe-area-inset-top)); }
  .plank { --h: clamp(64px, 20vh, 90px); }
}