/* =====================================================================
   Shared look for the Mitzy games. Built 6 September 2026.

   Big targets, warm paper, no scoreboards shouting at anybody. A game
   here is allowed to be quiet. Everything is sized in rem off the page
   font so it grows on a tablet and shrinks on a phone without a pile of
   breakpoints.
   ===================================================================== */

:root {
  --paper:      #faf7f1;
  --paper-deep: #f2ece1;
  --ink:        #2b2420;
  --ink-soft:   #6a5c52;
  --rule:       #ddd2c2;
  --rose:       #b8446b;
  --leaf:       #4d7c50;
  --sky:        #3b8285;
  --sun:        #e0a33c;
  --shadow:     0 1px 2px rgba(43,36,32,.06), 0 8px 28px rgba(43,36,32,.07);
}

*, *::before, *::after { box-sizing: border-box; }

body.game {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.05rem/1.6 "Lora", Georgia, serif;
  -webkit-text-size-adjust: 100%;
}

.gwrap { width: min(64rem, 100% - 2rem); margin: 0 auto; }

/* ---- the strip along the top ---------------------------------------- */
.gbar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 0 1rem;
}
.gback {
  font: 600 .82rem/1 "Lora", Georgia, serif;
  color: var(--ink-soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .8rem .5rem .55rem; border-radius: 999px;
  transition: background .16s ease, color .16s ease;
}
.gback:hover { background: var(--paper-deep); color: var(--ink); }
.gback::before { content: "\2039"; font-size: 1.4em; line-height: 0; }
.gbar h1 {
  margin: 0; flex: 1 1 14rem;
  font: 700 clamp(1.3rem, 3.4vw, 2rem)/1.15 "Fraunces", Georgia, serif;
  letter-spacing: -.02em;
}

/* the score, quiet, never flashing */
.gscore {
  display: flex; gap: 1.4rem; align-items: baseline;
  font: 600 .78rem/1 "Lora", Georgia, serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.gscore b {
  display: block; font-size: 1.7rem; letter-spacing: -.01em;
  text-transform: none; color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
}

/* ---- the board ------------------------------------------------------ */
.board {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: clamp(1rem, 3vw, 2rem);
  margin-bottom: 1.4rem;
}

/* A CHARACTER STANDS BESIDE THE BOARD AND DOES THE ASKING. Aaron asked for
   Mrs. Trala standing next to a blackboard, so she is level with the board
   itself, not tucked under the whole column. Their feet line up. */
.host {
  display: flex; align-items: flex-end;
  gap: clamp(.6rem, 2.2vw, 1.4rem);
}
.host > img {
  flex: 0 0 auto;
  width: clamp(88px, 16vw, 190px); height: auto;
  filter: drop-shadow(0 4px 7px rgba(43,36,32,.18));
}
.host-side { flex: 1 1 auto; min-width: 0; }

/* on a phone the teacher steps aside so the board keeps the width */
@media (max-width: 34rem) {
  .host > img { width: 72px; }
}

/* Mrs. Trala's blackboard, drawn rather than painted so it stays sharp
   at any size and costs no image generations */
.slate {
  background:
    radial-gradient(120% 140% at 30% 15%, #4a5f52 0%, #33443a 60%, #2b3a31 100%);
  border: .55rem solid #7a5334;
  border-radius: 8px;
  box-shadow: inset 0 0 40px rgba(0,0,0,.35), 0 4px 10px rgba(43,36,32,.18);
  color: #f4efe4;
  text-align: center;
  padding: clamp(1.2rem, 4vw, 2.4rem) 1rem;
}
.slate .sum {
  font: 700 clamp(2.4rem, 9vw, 4.6rem)/1.1 "Fraunces", Georgia, serif;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(255,255,255,.14);
}
.slate .hint {
  margin: .5rem 0 0; font-size: .92rem; color: #cbd8cc;
}

/* ---- answers, big enough for a small hand --------------------------- */
.answers {
  display: grid; gap: clamp(.5rem, 1.6vw, .9rem);
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  margin-top: clamp(1rem, 3vw, 1.6rem);
}
.ans {
  font: 700 clamp(1.3rem, 4vw, 2rem)/1 "Fraunces", Georgia, serif;
  padding: clamp(.85rem, 2.6vw, 1.3rem) .6rem;
  border: 2px solid var(--rule); border-radius: 12px;
  background: #fff; color: var(--ink); cursor: pointer;
  transition: transform .12s ease, border-color .16s ease, background .16s ease;
  min-height: 3.4rem;
}
.ans:hover:not(:disabled) { border-color: var(--sky); transform: translateY(-2px); }
.ans:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.ans:disabled { cursor: default; }
.ans.right { background: #e7f2e6; border-color: var(--leaf); color: #24501f; }
.ans.wrong { background: #fdeef0; border-color: #d08b9c; }

/* character answers, for the letter and feelings games */
.ans--face { display: grid; justify-items: center; gap: .35rem; padding: .7rem .4rem; }
.ans--face img { width: clamp(52px, 9vw, 84px); height: auto; }
.ans--face span { font: 600 .8rem/1.2 "Lora", Georgia, serif; }

/* ---- the little switches at the top of a board ----------------------- */
/* Shared, because more than one game needs them: the race has Letters,
   Words and No clock, and the pairs game has how many pairs. */
.modes { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mode {
  font: 600 .76rem/1 "Lora", Georgia, serif;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .6rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: #fff; color: var(--ink-soft);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.mode:hover { border-color: var(--sky); color: var(--ink); }
.mode[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.mode:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

/* ---- what the game says back ---------------------------------------- */
.says {
  margin: clamp(.9rem, 2.5vw, 1.3rem) 0 0;
  min-height: 2.2rem;
  font: 600 clamp(1rem, 2.6vw, 1.2rem)/1.4 "Lora", Georgia, serif;
  color: var(--ink-soft);
}
.says--good { color: var(--leaf); }
.says--try  { color: var(--rose); }

.gbtn {
  display: inline-block; cursor: pointer;
  font: 600 .84rem/1 "Lora", Georgia, serif;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .78rem 1.5rem; border: 0; border-radius: 999px;
  background: var(--rose); color: #fff; text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.gbtn:hover { background: #9d3a5c; transform: translateY(-1px); }
.gbtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.gbtn--quiet { background: none; color: var(--ink-soft); border: 1px solid var(--rule); }
.gbtn--quiet:hover { background: var(--paper-deep); color: var(--ink); }
.gbtns { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }

/* ---- the shelf of coloring pages ------------------------------------ */
.shelf-h {
  margin: 2rem 0 .9rem;
  font: 600 .7rem/1.4 "Lora", Georgia, serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.shelf {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.shelf li {
  border: 1px solid var(--rule); border-radius: 10px;
  background: #fff; overflow: hidden; text-align: center;
}
.shelf a { display: block; text-decoration: none; color: inherit; }
.shelf img { display: block; width: 100%; height: auto; background: #fff; }
.shelf-t {
  display: block; padding: .5rem .5rem .2rem;
  font: 600 .76rem/1.3 "Lora", Georgia, serif;
}
.shelf-go {
  display: block; padding: 0 .5rem .6rem;
  font: 600 .68rem/1.4 "Lora", Georgia, serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--rose);
}
.shelf li.won { border-color: #cbb9a4; box-shadow: 0 2px 6px rgba(43,36,32,.08); }
.shelf li.locked {
  background: var(--paper-deep); border-style: dashed;
  display: grid; place-items: center; gap: .4rem;
  min-height: 8.5rem; padding: .8rem;
}
.shelf li.locked .shelf-t { color: var(--ink-soft); font-weight: 400; }
/* the locked mark is a rabbit shape, not a padlock: a padlock on a
   children's page reads as something being taken away */
.shelf-lock {
  width: 2.1rem; height: 2.6rem; display: block; opacity: .34;
  background: currentColor;
  -webkit-mask: center/contain no-repeat url("../img/game/_soon.svg");
          mask: center/contain no-repeat url("../img/game/_soon.svg");
}

/* ---- a moment of celebration, never a fanfare ----------------------- */
.won-note {
  margin-top: 1.2rem; padding: 1rem 1.2rem;
  border: 1px solid #cbb9a4; border-radius: 12px;
  background: #fffaf0;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.won-note img { width: 84px; height: auto; border: 1px solid var(--rule); }
.won-note p { margin: 0; flex: 1 1 12rem; }
.won-note strong { display: block; font-family: "Fraunces", Georgia, serif; }

/* ---- notes for the grown-ups ---------------------------------------- */
.grown {
  margin: 2.4rem 0 3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: .88rem; color: var(--ink-soft); max-width: 42rem;
}
.grown h2 {
  margin: 0 0 .4rem;
  font: 600 .7rem/1.4 "Lora", Georgia, serif;
  letter-spacing: .14em; text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .ans, .gbtn, .gback { transition: none; }
  .ans:hover:not(:disabled), .gbtn:hover { transform: none; }
}