/* V64 mobile foundation. Gameplay rules stay in app.js, not in layout code.
   The character takes remaining space; actions and timer never depend on its
   intrinsic image height. Secondary details remain scrollable below the turn. */
:root { --spark-viewport-height: 100vh; }
@supports (height: 100svh) { :root { --spark-viewport-height: 100svh; } }

.reference-screen.screen-update { animation: none; }
body:has(.reference-game) .app-shell {
  min-height: var(--tg-viewport-stable-height, var(--spark-viewport-height));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-inline: 12px;
}
body:has(.reference-game) #app { padding-top: 0; }
.reference-game { padding-bottom: 0; }
.reference-game::before { height: 72%; }
.reference-turn {
  --turn-height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - 100px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  height: var(--turn-height);
  min-height: 420px;
}
.reference-turn > * { position: relative; z-index: 1; flex-shrink: 0; }
.reference-game .reference-chain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 7px 6px;
  gap: 8px;
}
.reference-game .reference-chain-head .reference-chain-meta span,
.reference-game .reference-chain-head .reference-chain-meta strong { font-size: clamp(12px, 3.8cqw, 15px); line-height: 1.15; }
.reference-game .reference-players { min-height: 32px; padding-left: 0; }
.reference-game .reference-players > span,
.reference-game .reference-players > b { width: 30px; height: 30px; flex-basis: 30px; }
.reference-game .reference-scene-game {
  flex: 1 1 0;
  min-height: 80px;
  margin: 0 -12px;
}
.reference-game .reference-scene-game .reference-character { bottom: 0; height: 100%; width: 100%; }
.reference-game .reference-scene-game::after {
  background: linear-gradient(180deg, transparent 75%, #020813 100%);
}
.reference-turn-controls { display: grid; gap: 7px; background: #020813; box-shadow: 0 -10px 18px #020813; }
/* Toasts must never cover HOLD/PASS or intercept a tap. */
body:has(.reference-game) .toast {
  top: calc(58px + env(safe-area-inset-top, 0px));
  bottom: auto;
  pointer-events: none;
}
.reference-turn-status { display: grid; gap: 6px; }
.reference-game .reference-danger-card {
  width: 60%; min-height: 58px; margin: 0 auto; border-radius: 16px;
}
.reference-game .reference-danger-card small,
.reference-game .reference-xp-bank small { font-size: 12px; }
.reference-game .reference-danger-card strong { font-size: 36px; margin-top: 3px; }
.reference-game .reference-risk-track { height: 10px; margin: 0 auto; }
.reference-game .reference-xp-bank { min-height: 64px; margin: 0 auto; border-radius: 14px; }
.reference-game .reference-xp-bank strong { font-size: 34px; margin-top: 4px; }
.reference-game .reference-xp-bolt { width: 23px; height: 30px; flex-basis: 23px; }
.reference-game .reference-action-grid button {
  min-height: clamp(108px, calc(var(--spark-viewport-height) * .16), 145px);
  padding: 8px 5px;
}
.reference-game .reference-action-grid .reference-action-icon { width: 34px; height: 30px; }
.reference-game .reference-hold .reference-action-icon svg { width: 24px; }
.reference-game .reference-action-grid button > strong { font-size: clamp(22px, 6.3cqw, 27px); margin: 3px 0 6px; }
.reference-game .reference-action-grid button > small { font-size: 14px; }
.reference-game .reference-action-grid button > small b { font-size: 15px; }
.reference-game .reference-game-note { font-size: 12px; line-height: 1.2; margin: 0; }
.reference-game .reference-timer { display: flex; align-items: center; gap: 9px; margin: 0 4px; min-height: 19px; }
.reference-game .reference-timer .timer-track { flex: 1; margin: 0; height: 5px; }
.reference-game .reference-timer .timer-text { margin: 0; min-width: 60px; font-size: 12px; text-align: right; }
.reference-game .reference-more-panel { margin: 6px 0 0; }
.reference-game .reference-more-panel > summary { min-height: 36px; padding: 10px; }
.reference-game .chain-pulse { min-height: 49px; margin: 0; padding: 5px 8px; grid-template-columns: 30px minmax(0,1fr) auto; gap: 6px; border-radius: 12px; }
.reference-game .chain-pulse-icon { width: 30px; height: 30px; border-radius: 9px; }
.reference-game .chain-pulse small { margin-top: 2px; font-size: 11px; }
.reference-game .chain-pulse-used { min-height: 36px; margin: 0; padding: 4px 8px; }
.reference-game .chain-pulse-used > span { height: 26px; }

/* Short WebViews retain the full character by putting risk and XP side by side. */
@media (max-height: 740px) {
  .reference-turn-status { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .reference-game .reference-danger-card { grid-column: 1; grid-row: 1; width: 100%; min-height: 60px; }
  .reference-game .reference-xp-bank { grid-column: 2; grid-row: 1; width: 100%; min-height: 60px; }
  .reference-game .reference-risk-track { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}
@media (min-width: 600px) {
  body:has(.reference-game) .app-shell { margin-top: 0; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-game .reference-character { animation: none; }
}