/* Keep the original header; use the remaining viewport for the game. */
.app-shell {
  width: 100%;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(420px, 1fr);
}
.app-shell > main {
  min-width: 0;
  min-height: 0;
}
.site-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 25px;
  height: 88px;
  width: min(1360px, calc(100% - 80px));
  margin-inline: auto;
}
.brand > img {
  width: 93px;
  height: 54px;
}
.header-heading {
  border-left: 1px solid var(--line);
  padding-left: 25px;
  min-width: 0;
}
.header-heading h1 {
  margin: 0;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.5;
  letter-spacing: -.6px;
}
.header-heading h1 span {
  display: inline-block;
}
.header-heading p {
  margin: 3px 0 0;
  font-size: 10px;
  color: #9d895e;
}
.game-layout {
  display: grid;
  height: 100%;
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.stage {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.scene-viewport {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.scene,
.stage-bottom {
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.stage-bottom {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: none;
  border: 0;
  border-top: 1px solid #d6be7f30;
  border-radius: 0;
  padding: 10px max(20px, env(safe-area-inset-right)) max(11px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: var(--sanctuary-bg);
  backdrop-filter: none;
  transition: box-shadow .2s;
}
.stage-bottom:hover,
.stage-bottom:focus-within {
  box-shadow: inset 0 1px 0 #e3c68175, inset 0 18px 30px -24px #e3c681;
}
.drop-button {
  touch-action: none;
}
.drop-button:disabled {
  pointer-events: none;
}
.controls {
  max-width: 370px;
}
.position-control {
  width: 165px;
  height: 20px;
  margin-bottom: 5px;
}
.position-control input {
  min-width: 0;
  height: 20px;
  background: linear-gradient(#ccbc8f60, #ccbc8f60) center / 100% 3px no-repeat;
}
.position-control input::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
}
.position-control input::-moz-range-thumb {
  width: 12px;
  height: 12px;
}
.control-hint {
  margin-top: 9px;
  font-size: 9px;
}
.move-button,
.drop-button {
  height: 48px;
  min-width: 44px;
}
.score-card {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 190px) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 20px;
  padding: 8px max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
  border: 0;
  border-bottom: 1px solid #d9cba8;
  border-radius: 0;
  box-shadow: none;
}
.card-eyebrow,
.score-heading,
.score-divider,
.goal-track,
.shot-status {
  display: none;
}
.score-display {
  grid-column: 1;
  grid-row: 1 / 3;
  gap: 9px;
  margin: 0;
}
.score-display > strong {
  font-size: 37px;
  letter-spacing: -2px;
}
.score-display > span {
  font-size: 18px;
  line-height: 1.2;
}
.score-display small {
  font-size: 9px;
  margin-top: 2px;
}
.coins-heading {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 10px;
}
.coins-heading > strong { font-size: 16px; }
.coins-heading small { font-size: 10px; }
.coin-inventory {
  grid-column: 2;
  grid-row: 2;
  gap: 4px;
  margin: 0;
}
.inventory-coin { font-size: 8px; }
.restart-button {
  grid-column: 3;
  grid-row: 1 / 3;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  margin: 0;
  padding: 8px;
  border-left: 1px solid #e2d8c2;
  white-space: nowrap;
}
.difficulty-options button {
  min-height: 40px;
}
.mobile-score {
  display: none;
}
@media (max-width: 1100px) {
  .site-header { width: calc(100% - 48px); }
  .stage-top { left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); gap: 6px; }
}

/* Only the header keeps page gutters; the score strip and game reach the edges. */
@media (max-width: 900px) {
  .site-header {
    height: 80px;
    gap: 18px;
    width: auto;
    margin-left: max(16px, env(safe-area-inset-left));
    margin-right: max(16px, env(safe-area-inset-right));
  }
  .brand > img { width: 84px; height: 49px; }
  .header-heading { padding-left: 18px; }
  .header-heading h1 { font-size: 23px; }
  .stage-top { top: 14px; align-items: center; }
  .round-chip { font-size: 9px; padding: 8px 10px; }
  .water-chip { padding: 7px 9px; gap: 7px; }
  .water-chip > svg { display: block; width: 19px; }
  .water-chip strong { font-size: 10px; }
  .current-meter { display: block; width: 29px; }
  .scene-caption { display: none; }
  .stage-bottom { padding: 8px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .position-control { margin-bottom: 4px; }
  .controls { gap: 9px; }
  .move-button { width: 46px; }
  .drop-button { font-size: 14px; }
  .drop-button kbd { display: none; }
  .desktop-hint { display: none; }
  .mobile-hint { display: inline; }
  .control-hint { font-size: 9px; margin-top: 8px; }
}
@media (max-width: 540px) {
  .site-header {
    height: 74px;
    gap: 11px;
    margin-left: max(12px, env(safe-area-inset-left));
    margin-right: max(12px, env(safe-area-inset-right));
  }
  .brand > img { width: 72px; height: 42px; }
  .header-heading { padding-left: 11px; }
  .header-heading h1 { font-size: 17px; line-height: 1.5; letter-spacing: -.35px; }
  .header-heading h1 span { display: block; }
  .header-heading p { display: none; }
  .header-actions { gap: 3px; }
  .header-actions .icon-button { width: 36px; height: 40px; border-color: transparent; }
  .score-card { grid-template-columns: minmax(0, 1fr) minmax(0, 160px) auto; gap: 2px 12px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .restart-button span { display: none; }
  .feedback { font-size: 15px; }
}
@media (max-width: 360px) {
  .site-header { gap: 8px; }
  .brand > img { width: 62px; height: 36px; }
  .header-heading { padding-left: 8px; }
  .header-heading h1 { font-size: 15px; }
  .header-actions .icon-button { width: 31px; }
  .score-card { grid-template-columns: minmax(0, 1fr) minmax(0, 135px) auto; gap: 2px 9px; }
  .score-display { gap: 7px; }
  .score-display small { font-size: 8px; }
  .coin-inventory { gap: 3px; }
  .round-chip { font-size: 8px; padding: 8px; }
  .stage-top { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
  .current-meter { width: 22px; }
  .water-chip { gap: 5px; padding-inline: 7px; }
  .water-chip > svg { display: none; }
}
@media (pointer: fine) and (min-width: 541px) {
  .desktop-hint { display: inline; }
  .mobile-hint { display: none; }
}

.win-modal { width: min(360px, calc(100% - 32px)); padding: 26px; text-align: center; }
.win-modal h2 { font-size: 24px; line-height: 1.5; margin: 0 0 20px; }
#win-title:focus { outline: none; }
.win-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.win-actions .secondary-button { border: 1px solid #d9ccb0; font-size: 14px; font-weight: 600; color: var(--ink); }

/* A short invitation: one goal, two gestures, one difficulty choice. */
.setup-modal {
  --dialog-padding: 22px;
  width: min(420px, calc(100% - 24px));
  padding: var(--dialog-padding);
  max-height: calc(100dvh - 24px);
  overscroll-behavior: contain;
  line-height: 1.5;
}
.help-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23px;
  margin: 0 0 14px;
}
.wish-preview {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border: 1px solid #d8c493;
  border-radius: 46px 46px 24px 24px;
  background: radial-gradient(ellipse at 50% 90%, #5f8060 0, #244d36 60%, #112e21 100%);
  box-shadow: inset 0 0 0 4px #f4e6bf13, 0 7px 18px #254a3817;
}
.wish-preview > svg {
  position: absolute;
  bottom: 9px;
  left: 27px;
  width: 34px;
  height: 34px;
  color: #f1deb2;
  stroke-width: 1.25;
}
.preview-coin {
  position: absolute;
  top: 9px;
  left: 31px;
  z-index: 1;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 3px double #ac823e;
  border-radius: 50%;
  color: #8b672d;
  background: linear-gradient(135deg, #fff0bb, #d4ac56);
  font-size: 15px;
  box-shadow: 0 3px 14px #edcd8059;
  animation: welcome-coin 3.6s ease-in-out infinite;
}
.preview-water {
  position: absolute;
  top: 37px;
  left: 12px;
  width: 64px;
  height: 11px;
  border: 1px solid #e4d6a964;
  border-radius: 50%;
}
.preview-water::after {
  content: "";
  position: absolute;
  inset: 3px 12px;
  border: 1px solid #e4d6a941;
  border-radius: 50%;
}
.preview-spark {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 13px;
  color: #d9c38e;
}
.help-hero h2 {
  font-size: 26px;
  margin: 0;
  line-height: 1.4;
  letter-spacing: -.6px;
}
.help-hero h2 span {
  color: #8d743e;
  font-weight: 500;
}
#help-title:focus { outline: none; }
.wish-goal {
  text-align: center;
  padding: 10px 8px;
  border: 1px solid #e6d8b4;
  border-radius: 14px;
  background: linear-gradient(110deg, #f1e6c8, #fcf7e9);
}
.wish-goal strong { font-size: 17px; font-weight: 700; }
.wish-goal p {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 1.7;
  margin: 4px 0 0;
  color: #796439;
}
.wish-goal p svg { width: 17px; height: 17px; }
.quick-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 14px 0;
}
.quick-controls > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.quick-controls > div + div { border-left: 1px solid #e2d8bf; }
.quick-controls svg { width: 20px; height: 20px; color: #9b7f44; }
.quick-controls strong { display: block; font-size: 12px; font-weight: 600; }
.quick-controls .touch-help { display: none; }
.round-setup {
  border-top: 1px solid #e5dcc6;
  padding-top: 11px;
}
.round-setup .setting-heading h3 { font-size: 12px; font-weight: 600; margin: 0; }
.round-setup .difficulty-options {
  margin-top: 8px;
  padding: 0;
  gap: 7px;
  background: none;
}
.round-setup .difficulty-options button {
  position: relative;
  min-width: 0;
  min-height: 58px;
  padding: 8px 3px;
  border: 1px solid #ded5be;
  border-radius: 12px;
  background: #f5f0e4;
  color: #6c715e;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.round-setup .difficulty-options button:hover { border-color: #a18a52; }
.round-setup .difficulty-options button strong { display: block; font-size: 14px; font-weight: 600; }
.round-setup .difficulty-options button small { display: block; font-size: 9px; font-weight: 400; margin-top: 3px; }
.round-setup .difficulty-options button.active {
  background: #244b3c;
  color: #f2e5be;
  border-color: #244b3c;
  box-shadow: 0 4px 10px #244b3c1c;
}
.round-setup .difficulty-options button.active::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 9px;
  color: #e3c681;
}
.help-actions {
  position: sticky;
  bottom: calc(-1 * var(--dialog-padding));
  padding-top: 16px;
  padding-bottom: var(--dialog-padding);
  margin-bottom: calc(-1 * var(--dialog-padding));
  background: linear-gradient(#faf6ec00, #faf6ec 12px);
}
.help-actions .primary-button {
  min-height: 54px;
  padding: 14px;
  font-size: 16px;
  border: 1px solid #385b47;
  background: linear-gradient(110deg, #244b3c, #32624d);
  box-shadow: 0 5px 0 #183b2e, 0 9px 18px #244b3c1a;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.help-actions .primary-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.help-actions .primary-button:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #183b2e;
}
.help-actions .primary-button svg { color: #e3c681; }
@keyframes welcome-coin {
  0%, 100% { transform: translateY(-2px) rotate(-12deg); }
  50% { transform: translateY(5px) rotate(12deg); }
}
@media (max-width: 540px) {
  .setup-modal { --dialog-padding: 20px; border-radius: 24px; }
  .help-hero { gap: 19px; }
  .help-hero h2 { font-size: 25px; }
  .quick-controls > div { gap: 7px; }
}
@media (pointer: coarse) {
  .quick-controls .pointer-help { display: none; }
  .quick-controls .touch-help { display: inline; }
}
@media (max-width: 360px) {
  .setup-modal { --dialog-padding: 16px; }
  .help-hero { gap: 13px; }
  .help-hero h2 { font-size: 22px; }
  .wish-goal strong { font-size: 16px; }
  .wish-goal p { font-size: 10px; }
  .quick-controls > div { gap: 6px; }
  .quick-controls svg { width: 16px; height: 16px; }
  .quick-controls strong { font-size: 11px; }
}
@media (max-height: 550px) and (min-width: 541px) {
  .setup-modal { --dialog-padding: 18px; }
  .help-hero { margin-bottom: 12px; }
  .quick-controls { margin-block: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-coin { animation: none; }
  .help-actions .primary-button,
  .round-setup .difficulty-options button,
  .stage-bottom { transition: none; }
}