/* Shared mobile-game shell for every game: start card, fullscreen button, menu sheet and install tip.
   Each game can override the --gs-* tokens to match its own look. Used with assets/game-shell.js. */
:root {
  --gs-bg: #150e09;
  --gs-panel: #22170f;
  --gs-line: rgba(255, 222, 170, .16);
  --gs-text: #f2e7d2;
  --gs-muted: #ad9a7b;
  --gs-accent: #e2bd68;
  --gs-accent-2: #b98e3a;
  --gs-accent-ink: #2a1a0c;
  --gs-display: Georgia, 'Times New Roman', serif;
  --gs-body: system-ui, sans-serif;
}

/* Fullscreen and install buttons only show where they can work. */
/* Decided before first paint by an inline <head> script (gs-no-fs), so nothing jumps when this loads. */
html.gs-no-fs [data-gs-fullscreen] { display: none !important; }
/* Install keeps its space until the browser offers installation, so it never pushes content around. */
html:not(.gs-can-install) [data-gs-install] { visibility: hidden; }

/* No accidental text selection, callouts or pull-to-refresh while playing. */
html.gs-playing, html.gs-playing body { overscroll-behavior: none; }
[data-gs-play-area] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }

/* Start card: sits over the play area like a game's title screen. */
.gs-start {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  gap: clamp(8px, 2.2vmin, 14px);
  padding: clamp(12px, 4vmin, 28px);
  overflow: auto;
  text-align: center;
  color: var(--gs-text);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(244, 166, 42, .18), transparent 60%),
    rgba(14, 9, 6, .82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: inherit;
  animation: gs-fade .35s ease both;
}
.gs-start.gs-off { display: none; }
.gs-title-row { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vmin, 12px); }
.gs-title-row img { width: clamp(40px, 12vmin, 64px); height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); animation: gs-bob 3.2s ease-in-out infinite; }
.gs-title-row img:last-child { animation-delay: -1.6s; }
.gs-title { margin: 0; font-family: var(--gs-display); font-weight: 400; font-size: clamp(1.7rem, 7vmin, 2.8rem); line-height: 1; color: var(--gs-accent); text-wrap: balance; }
.gs-sub { margin: 0; color: var(--gs-muted); font-size: clamp(.85rem, 3.2vmin, 1rem); }
.gs-actions { display: grid; gap: 8px; width: min(100%, 320px); }
.gs-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: clamp(42px, 11vmin, 52px);
  padding: 8px 16px;
  border-radius: 14px;
  border: 1px solid var(--gs-line);
  background: rgba(255, 255, 255, .05);
  color: var(--gs-text);
  font: 700 clamp(.95rem, 3.6vmin, 1.08rem) var(--gs-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .08s, filter .15s;
}
.gs-btn img { width: 26px; height: 26px; }
.gs-btn.primary { background: linear-gradient(180deg, var(--gs-accent), var(--gs-accent-2)); border-color: var(--gs-accent); color: var(--gs-accent-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.gs-btn:active { transform: translateY(2px) scale(.99); }
.gs-btn:hover { filter: brightness(1.06); }
.gs-btn:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }
.gs-hint { margin: 0; font-size: .8rem; color: var(--gs-muted); }
.gs-fs-note { margin: 0; min-height: 1.3em; font-size: .8rem; font-weight: 700; color: var(--gs-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-height: 700px) {
  .gs-start { gap: 6px; padding: 10px; }
  .gs-btn { min-height: 40px; }
  .gs-title-row img { width: 36px; }
  .gs-title { font-size: 1.6rem; }
  .gs-sub, .gs-hint, .gs-fs-note { font-size: .78rem; }
}

/* Menu sheet backdrop (the sheet itself is styled by each game). */
.gs-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .25s; }
html.gs-sheet-open .gs-backdrop { opacity: 1; pointer-events: auto; }

/* One-time tip (iPhone full screen, etc.) */
.gs-tip {
  position: fixed; z-index: 60;
  left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px;
  background: var(--gs-panel); color: var(--gs-text); border: 1px solid var(--gs-accent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  font: 500 .95rem/1.35 var(--gs-body);
  animation: gs-up .3s ease both;
}
.gs-tip p { margin: 0; flex: 1; }
.gs-tip button { flex: none; min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: var(--gs-accent); color: var(--gs-accent-ink); font-weight: 700; cursor: pointer; }

@keyframes gs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gs-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .gs-start, .gs-tip, .gs-title-row img { animation: none; } }

/* Extra room at the bottom in fullscreen: on Android a swipe brings the navigation bar back over the page. */
html.gs-fullscreen { --gs-bottom-gap: 28px; }