/* Pebble: the shared look (nature theme: greens, warm stones, friendly rounded type).
 * Used by the student page, the teacher page, the store and the landing page.
 * Load the fonts in the page head (this file does not import them):
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Fredoka:wght@500;600;700&display=swap">
 *
 * CLASS NAMES (all start with pb-)
 *   Page:      body.pb-body (the nature background), .pb-page (padded column; leaves room for the ZoodleBug Home
 *              button top-left via padding-left: var(--zb-home-space)), .pb-center (centred narrow column),
 *              .pb-logo (the Pebble logo image), .pb-h1 .pb-h2 (headings), .pb-muted (soft text), .pb-hint
 *   Panels:    .pb-panel (cream card), .pb-panel.pb-dark (deep green card), .pb-row (flex row, wraps), .pb-grid
 *   Buttons:   .pb-btn (+ .pb-primary green, .pb-warn amber, .pb-bad red, .pb-ghost, .pb-big, .pb-small, .pb-on)
 *              every button is at least 44px tall
 *   Forms:     .pb-input, .pb-code (the big 6-letter code box), .pb-label, .pb-check (checkbox + label row),
 *              .pb-select, .pb-switch (toggle row)
 *   Small bits: .pb-pill (rounded badge), .pb-diamonds (the diamond counter), .pb-chip, .pb-timer (+ .pb-low),
 *              .pb-badge-good / .pb-badge-bad
 *   Messages:  .pb-toast (+ .pb-toast-bad), .pb-err (inline error text), .pb-banner (big coloured strip)
 *   Numbers:   .pb-num .pb-frac .pb-n .pb-d .pb-whole .pb-minus  (what PebbleMath.html() writes; sized in em, so they
 *              grow with whatever font-size their parent has)
 *   Board:     .pb-board and everything inside it is styled by board.js itself (it injects its own small style block);
 *              this file only gives it a nicer frame (.pb-board-frame)
 *   Table:     .pb-table (simple report / leaderboard table), .pb-me (the row that is "you")
 * Colour variables are on :root (--pb-*), so a page can reuse them.
 */
:root {
  --pb-leaf: #2f8f3a;
  --pb-leaf-dk: #1f6a2a;
  --pb-moss: #6cb44a;
  --pb-forest: #12361f;
  --pb-forest2: #1d4d2c;
  --pb-stone: #efe6d2;
  --pb-stone2: #e0d3b2;
  --pb-stone3: #b9a77c;
  --pb-bark: #7a4f2a;
  --pb-cream: #fbf6e8;
  --pb-ink: #1d3a2a;
  --pb-ink-soft: #566b5c;
  --pb-sun: #f5a623;
  --pb-sun-dk: #8a5600;
  --pb-sky: #bfe9ff;
  --pb-good: #1f7a3c;
  --pb-bad: #b3303f;
  --pb-diamond: #2aa5d6;
  --zb-home-space: 190px;
  --zb-home-top: 58px;
}
.pb-body, .pb-body * { box-sizing: border-box; }
html:has(.pb-body) { height: 100%; }
.pb-body {
  margin: 0; min-height: 100%;
  font-family: "Andika", "Fredoka", "Trebuchet MS", Arial, sans-serif;
  color: var(--pb-ink);
  background: #e3f3cf;                                  /* shows only for an instant, until the picture below has loaded */
  -webkit-text-size-adjust: 100%;
}
/* The backgrounds (Tim, 13 Oct 2026). One picture is fixed behind the whole page. Each comes in a landscape and a portrait file;
 * "cover" fills any screen shape, and all the scenery sits at the edges so cropping never hides anything important.
 * Which one shows follows the screen being looked at (no script needed):
 *   general (default)  join / lobby / waiting screens, the Setup page, the store
 *   setup              the teacher's problem setup page
 *   game               where the pebble is placed (student board, teacher live, practice, class screen board)
 *   results            where the teacher reviews the answers, and the end screens */
.pb-body {
  --pb-bg: url("/pebble/assets/bg/general-landscape.webp");
  --pb-bgp: url("/pebble/assets/bg/general-portrait.webp");
}
.pb-body:has(#sRound.on) { --pb-bg: url("/pebble/assets/bg/setup-landscape.webp"); --pb-bgp: url("/pebble/assets/bg/setup-portrait.webp"); }
.pb-body:has(#sLive.on, #sPractice.on, #sPlay.on, #csBoard.on) { --pb-bg: url("/pebble/assets/bg/game-landscape.webp"); --pb-bgp: url("/pebble/assets/bg/game-portrait.webp"); }
.pb-body:has(#sReview.on, #sEnd.on, #sPEnd.on, #sFinal.on, #csFinal.on) { --pb-bg: url("/pebble/assets/bg/results-landscape.webp"); --pb-bgp: url("/pebble/assets/bg/results-portrait.webp"); }
.pb-body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: #e3f3cf var(--pb-bg) center bottom / cover no-repeat;
}
@media (max-aspect-ratio: 1/1) { .pb-body::before { background-image: var(--pb-bgp); } }
.pb-body button { font: inherit; cursor: pointer; color: inherit; }
.pb-body button:focus-visible, .pb-body a:focus-visible, .pb-body input:focus-visible, .pb-body select:focus-visible, .pb-body [tabindex]:focus-visible {
  outline: 3px solid var(--pb-sun); outline-offset: 2px;
}
.pb-body [hidden] { display: none !important; }

/* ---------- page ---------- */
.pb-page { min-height: 100%; padding: 14px 18px 56px; padding-left: max(18px, var(--zb-home-space)); }
.pb-center { margin: 0 auto; width: 100%; max-width: 560px; text-align: center; padding: 16px; }
.pb-logo { display: block; margin: 0 auto 6px; width: auto; height: auto; max-width: min(680px, 94%); max-height: clamp(110px, 34vh, 330px); }   /* the trimmed logo, as big as the screen allows (Tim, 13 Oct 2026) */
.pb-h1, .pb-h2 { font-family: "Fredoka", "Andika", sans-serif; margin: 0 0 8px; color: var(--pb-forest); line-height: 1.15; }
.pb-h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 700; }
.pb-h2 { font-size: clamp(22px, 3.6vw, 30px); font-weight: 600; }
.pb-muted { color: var(--pb-ink-soft); }
.pb-hint { color: var(--pb-forest2); font-size: 18px; margin: 6px 0; }

/* ---------- panels ---------- */
.pb-panel {
  background: var(--pb-cream); border: 3px solid var(--pb-stone3); border-radius: 20px;
  padding: 16px 18px; box-shadow: 0 5px 0 rgba(60, 80, 40, .22);
}
.pb-panel.pb-dark { background: var(--pb-forest2); border-color: var(--pb-forest); color: var(--pb-cream); }
.pb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pb-grid { display: grid; gap: 12px; }

/* ---------- buttons (all at least 44px tall) ---------- */
.pb-btn {
  min-height: 48px; min-width: 48px; padding: 8px 18px; border-radius: 14px;
  border: 3px solid var(--pb-stone3); background: var(--pb-cream); color: var(--pb-forest);
  font-weight: 700; font-size: 17px; box-shadow: 0 3px 0 rgba(60, 60, 30, .3);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
}
.pb-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(60, 60, 30, .3); }
.pb-btn.pb-primary { background: var(--pb-leaf); border-color: var(--pb-leaf-dk); color: #fff; }
.pb-btn.pb-warn { background: #ffe9b8; border-color: var(--pb-sun-dk); color: #5a3800; }
.pb-btn.pb-bad { background: #fde1e4; border-color: var(--pb-bad); color: #7d1625; }
.pb-btn.pb-ghost { background: transparent; box-shadow: none; border-color: rgba(18, 54, 31, .35); }
.pb-btn.pb-big { min-height: 64px; font-size: 22px; padding: 10px 28px; }
.pb-btn.pb-small { min-height: 44px; font-size: 15px; padding: 4px 12px; }
.pb-btn.pb-on, .pb-btn[aria-pressed="true"] { background: var(--pb-forest2); border-color: var(--pb-forest); color: var(--pb-cream); }
.pb-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- forms ---------- */
.pb-label { display: block; font-weight: 700; margin: 8px 0 4px; text-align: left; }
.pb-input, .pb-select {
  width: 100%; min-height: 52px; padding: 8px 14px; font: inherit; font-size: 20px;
  border: 3px solid var(--pb-stone3); border-radius: 14px; background: #fff; color: var(--pb-ink);
}
.pb-code {
  width: 100%; min-height: 84px; font-family: "Fredoka", "Andika", sans-serif; font-weight: 700;
  font-size: clamp(40px, 11vw, 60px); letter-spacing: .22em; text-align: center; text-transform: uppercase;
  border: 4px solid var(--pb-leaf); border-radius: 18px; background: #fff; color: var(--pb-forest);
  padding: 6px 10px 6px calc(10px + .22em);
}
.pb-check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; cursor: pointer; text-align: left; }
.pb-check input { width: 28px; height: 28px; flex: 0 0 auto; accent-color: var(--pb-leaf); }
.pb-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-weight: 700; }

/* ---------- small bits ---------- */
.pb-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px;
  background: var(--pb-cream); border: 3px solid var(--pb-stone3); font-weight: 700; color: var(--pb-forest);
}
.pb-diamonds { border-color: var(--pb-diamond); color: #0a5b7d; background: #eaf8ff; font-size: 18px; }
.pb-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--pb-stone2); font-size: 14px; font-weight: 700; }
.pb-timer { font-family: "Fredoka", "Andika", sans-serif; font-size: 28px; font-weight: 700; min-width: 4.2ch; text-align: center; }
.pb-timer.pb-low { color: var(--pb-bad); animation: pb-pulse 1s ease-in-out infinite; }
@keyframes pb-pulse { 50% { transform: scale(1.12); } }
.pb-badge-good { background: #d8f0d8; color: #0f4a22; border-color: var(--pb-good); }
.pb-badge-bad { background: #fde1e4; color: #7d1625; border-color: var(--pb-bad); }

/* ---------- messages ---------- */
.pb-toast {
  position: fixed; left: 50%; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  max-width: min(92vw, 520px); padding: 12px 20px; border-radius: 16px; z-index: 9000;
  background: var(--pb-forest2); color: var(--pb-cream); font-weight: 700; text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.pb-toast.pb-toast-bad { background: #8a1c28; }
.pb-err { color: #8a1c28; font-weight: 700; min-height: 24px; }
.pb-banner {
  padding: 10px 18px; border-radius: 16px; font-family: "Fredoka", "Andika", sans-serif; font-weight: 700;
  font-size: clamp(20px, 4vw, 30px); text-align: center; background: var(--pb-sun); color: #3a2300; border: 3px solid var(--pb-sun-dk);
}

/* ---------- numbers: what PebbleMath.html() writes ---------- */
.pb-num { display: inline-flex; align-items: center; justify-content: center; gap: .12em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-whole { line-height: 1; }
.pb-minus { line-height: 1; margin-right: .02em; }
.pb-frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; vertical-align: middle; }
.pb-n { padding: 0 .14em .06em; border-bottom: .09em solid currentColor; font-size: .66em; line-height: 1.05; text-align: center; }
.pb-d { padding: .06em .14em 0; font-size: .66em; line-height: 1.05; text-align: center; }

/* ---------- board frame and tables ---------- */
.pb-board-frame { background: rgba(255, 255, 255, .35); border: 3px solid var(--pb-stone3); border-radius: 22px; padding: 6px; }
.pb-table { width: 100%; border-collapse: collapse; font-size: 18px; }
.pb-table th, .pb-table td { padding: 8px 12px; text-align: left; border-bottom: 2px solid var(--pb-stone2); }
.pb-table th { font-family: "Fredoka", "Andika", sans-serif; font-weight: 600; }
.pb-table tr.pb-me td { background: #fff4c4; font-weight: 700; }

@media (max-width: 640px) {
  .pb-page { padding: 10px 12px 48px; padding-left: max(12px, var(--zb-home-space)); }
}
@media (prefers-reduced-motion: reduce) {
  .pb-timer.pb-low { animation: none; }
}