/* ============================================================
   Book Buddies App — shared game interface ("game shell")
   Linked by every game in _games/. Change the standard look here
   and it applies to all of them. Game-specific styles stay in
   each game's own <style> block.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  background: #101b34;
  display: grid;
  place-items: center;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
img { -webkit-user-drag: none; }

/* ---------- Dark-blue mobile frame, matching the app pages ---------- */
.phone-frame {
  position: relative;
  width: 390px;
  height: 844px;
  flex: 0 0 auto;
  overflow: hidden;
  background: #101b34;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
@media (min-width: 720px) {
  .phone-frame { border-radius: 8px; }
}

/* ---------- Top toolbar (frosted) ---------- */
#toolbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 9px 10px;
  background: rgba(246, 242, 233, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(20, 12, 0, 0.14);
}
/* Round nav buttons at the left of the toolbar.
   .tb-home always leaves the game for Geo's Home -- it must never open a panel,
   in any game. .tb-menu opens that game's own chooser, and is deliberately NOT a
   three-line hamburger: the hamburger sits in nearly this spot on the site pages
   where it navigates between pages, so reusing the glyph for game options would
   put two unrelated meanings in one place. Games with only an action or two
   (New, Theme) get those as plain labelled buttons and no .tb-menu at all. */
.tb-home,
.tb-menu {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 2px solid #3a3a3a;
  border-radius: 50%;
  background: #fff;
  color: #2b2b2b;
  transition: transform 0.1s ease;
}
.tb-home:active,
.tb-menu:active { transform: scale(0.92); }
.tb-home svg,
.tb-menu svg { width: 22px; height: 22px; }

/* Labeled square button (Theme, New, ...) */
.tb-btn {
  position: relative;
  width: 58px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px solid #d5cec0;
  border-radius: 12px;
  background: #fff;
  color: #2b2b2b;
  transition: transform 0.1s ease;
}
.tb-btn:active { transform: scale(0.93); }
.tb-btn:disabled { opacity: 0.35; }
.tb-btn svg { width: 20px; height: 20px; }
.tb-btn span {
  font-size: 10px;
  font-weight: 700;
  color: #4c4740;
}
.tb-btn.on { border-color: #2fb52f; box-shadow: 0 0 0 2px rgba(47, 181, 47, 0.25); }

/* Small round icon button (page arrows, undo/redo, ...) */
.tb-round {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1.5px solid #d5cec0;
  border-radius: 50%;
  background: #fff;
  color: #2b2b2b;
  transition: transform 0.1s ease;
}
.tb-round:active { transform: scale(0.9); }
.tb-round:disabled { opacity: 0.35; }
.tb-round svg { width: 18px; height: 18px; }

.tb-spacer { flex: 1; }

/* ---------- HUD stat chips ---------- */
.hud-chip {
  background: rgba(247, 243, 234, 0.94);
  border: 1px solid rgba(120, 100, 70, 0.25);
  border-radius: 13px;
  box-shadow: 0 6px 16px rgba(20, 10, 0, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.stat {
  flex: 1;
  padding: 6px 4px 7px;
  text-align: center;
}
.stat .l {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #8a8272;
  text-transform: uppercase;
}
.stat .v {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
  color: #2f2b24;
}
.stat-stars {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 10px;
  font-size: 15px;
}
.stat-stars span.off { filter: grayscale(1) opacity(0.3); }

/* ---------- Sheets / modals ---------- */
.modal {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(18, 10, 2, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.sheet {
  position: relative;
  width: 330px;
  max-height: 92%;
  overflow-y: auto;
  padding: 22px 18px 18px;
  border-radius: 22px;
  background: #f7f3ea;
  box-shadow: 0 24px 60px rgba(10, 8, 0, 0.55);
  text-align: center;
  animation: sheet-in 0.26s cubic-bezier(0.3, 0.9, 0.35, 1.2);
}
@keyframes sheet-in {
  from { transform: scale(0.92) translateY(14px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.sheet .x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  color: #6b6357;
  font-size: 16px;
  font-weight: 800;
}
.big-emoji { font-size: 54px; line-height: 1; margin-bottom: 8px; }
.sheet-title {
  font-size: 26px;
  font-weight: 900;
  color: #2f2b24;
}
.sheet-title.green { color: #23a52f; }
.sheet-text {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #7d7566;
  line-height: 1.45;
}
.sheet-text b { color: #2f2b24; }
.stars-big { display: flex; gap: 5px; justify-content: center; margin: 12px 0 2px; font-size: 30px; }
.stars-big span.off { filter: grayscale(1) opacity(0.3); }

/* Big green primary button */
.play-btn {
  display: block;
  width: 224px;
  margin: 16px auto 0;
  padding: 13px 0 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7be24e 0%, #3ec93e 45%, #2aad33 100%);
  box-shadow:
    0 6px 0 #1d8a26,
    0 12px 22px rgba(30, 100, 20, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 3px rgba(20, 90, 20, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.play-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #1d8a26,
    0 6px 12px rgba(30, 100, 20, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

/* Secondary white pill button */
.sheet-btn {
  display: block;
  width: 224px;
  margin: 10px auto 0;
  padding: 11px 0 12px;
  border-radius: 999px;
  border: 2px solid #d5cec0;
  background: #fff;
  color: #2f2b24;
  font-size: 16px;
  font-weight: 800;
}
.sheet-btn:active { transform: scale(0.97); }

/* ---------- Loading overlay ---------- */
#loading {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgba(12, 18, 36, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  text-align: center;
}
.spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #7be24e;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }