/* =========================================================
   Games 9+ — the rest of the library.
   Reuses .stage-scoreline, .pill, .unlock-grid, .pd-timer,
   .meter and the .oc-* outcome colours from the shared sheets.
   ========================================================= */

/* ---------------------------------------------------------
   Shared bits used by several of these games
   --------------------------------------------------------- */
/* Applied directly to a line of text. The existing .oc-* rules in
   games.css colour a CHILD (.oc-verdict), so these do not collide —
   but the colour mapping is kept identical on purpose: bad is amber,
   awful is red, so a player reads the same severity everywhere. */
.oc-good  { color: var(--lime); }
.oc-weird { color: var(--grape); }
.oc-bad   { color: var(--gold); }
.oc-awful { color: var(--red); }

/* An emoji-and-label grid of choices. Rows are full-width on a
   phone, two-up once there is room. */
.pick-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) {
  .pick-grid { grid-template-columns: repeat(3, 1fr); }
}
.pick-item {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
  min-height: 84px;
  padding: 10px 8px;
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: border-color .12s ease, transform .1s ease;
}
.pick-item:hover:enabled { border-color: var(--accent); }
.pick-item:active:enabled { transform: translateY(2px); }
.pick-item:disabled { opacity: .5; cursor: default; }

/* =========================================================
   GAME 9 — CATCH THAT FLY
   ========================================================= */
.ctf-wrap { display: flex; flex-direction: column; gap: 12px; }

.ctf-field {
  position: relative;
  min-height: 320px;
  height: 46vh;
  max-height: 460px;
  background:
    radial-gradient(400px 220px at 30% 20%, rgba(158,240,26,.07), transparent 70%),
    var(--bg-2);
  border: 2px dashed var(--line);
  border-radius: var(--r);
  overflow: hidden;
  cursor: crosshair;
  touch-action: manipulation;
}

/* Never smaller than 48px — difficulty comes from the fly moving,
   not from the target becoming impossible to hit on a phone. */
.ctf-fly {
  position: absolute;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-size: 30px; line-height: 1;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: left .16s ease-out, top .16s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.ctf-fly:hover:enabled { border-color: var(--accent); }
.ctf-fly.is-golden { filter: drop-shadow(0 0 10px var(--gold)); }
.ctf-fly.is-wasp   { filter: drop-shadow(0 0 8px var(--red)); }
.ctf-fly.is-gone   { opacity: .25; }

.ctf-say {
  margin: 0; text-align: center; min-height: 2.2em;
  font-weight: bold;
}
.ctf-say.good { color: var(--lime); }
.ctf-say.bad  { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .ctf-fly { transition: none; }
}

/* =========================================================
   GAME 10 — CHICKEN CEO
   ========================================================= */
.cc-wrap { display: flex; flex-direction: column; gap: 12px; }

.cc-rank {
  margin: 0; text-align: center;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: bold;
}
.cc-stats {
  display: grid; gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}
.cc-stats .ft-stat.cc-danger {
  border-color: var(--red);
  color: var(--red);
}
.cc-desk {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: clamp(14px, 3vw, 22px);
}
.cc-q {
  margin: 0;
  font-size: clamp(18px, 4.2vw, 26px);
  text-transform: none;
  font-family: var(--font-display);
}
.cc-sub { margin: 6px 0 0; color: var(--ink-dim); font-size: 14px; }
.cc-outcome {
  text-align: center; min-height: 3em; margin: 0;
  font-weight: bold;
}

/* =========================================================
   GAME 11 — TOILET PAPER EMERGENCY
   ========================================================= */
.tp-wrap { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

.tp-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: clamp(14px, 3vw, 20px);
  text-align: center;
}
.tp-ask {
  margin: 0;
  font-size: clamp(18px, 4.4vw, 27px);
  text-transform: none;
  font-family: var(--font-display);
}
.tp-why { margin: 6px 0 0; color: var(--ink-dim); font-size: 14px; }

.tp-count {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(44px, 13vw, 84px);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.tp-strip {
  text-align: center;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-dim);
  min-height: 1.2em;
  word-break: break-all;
}

/* One big hold target. */
.tp-roll {
  align-self: center;
  width: min(220px, 70%);
  min-height: 110px;
  display: grid; place-items: center;
  font-size: 54px;
  background: var(--surface-2);
  border: 3px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, border-color .12s ease;
}
.tp-roll:hover:enabled { border-color: var(--accent); }
.tp-roll.is-pulling {
  border-color: var(--accent);
  transform: scale(.97);
}
.tp-roll:disabled { opacity: .5; cursor: default; }

.tp-react {
  text-align: center; min-height: 2.6em; margin: 0;
  font-weight: bold;
}

@media (prefers-reduced-motion: reduce) {
  .tp-roll, .tp-roll.is-pulling { transition: none; transform: none; }
}

/* =========================================================
   GAME 12 — WHAT'S IN MY BAG?
   ========================================================= */
.bag-wrap { display: flex; flex-direction: column; gap: 12px; }

.bag-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: clamp(14px, 3vw, 20px);
}
.bag-ask {
  margin: 0;
  font-size: clamp(17px, 4.2vw, 25px);
  text-transform: none;
  font-family: var(--font-display);
}
.bag-hint { margin: 6px 0 0; color: var(--grape); font-size: 13px; font-weight: bold; }

.bag-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) {
  .bag-grid { grid-template-columns: repeat(3, 1fr); }
}
.bag-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-height: 88px;
  padding: 10px 6px;
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease, transform .1s ease;
}
.bag-item:hover:enabled { border-color: var(--accent); }
.bag-item:active:enabled { transform: translateY(2px); }
.bag-item:disabled { opacity: .45; cursor: default; }
.bag-em { font-size: 30px; line-height: 1; }
.bag-name { font-size: 12px; text-align: center; color: var(--ink-dim); overflow-wrap: anywhere; }

.bag-react { text-align: center; min-height: 2.6em; margin: 0; font-weight: bold; }

/* =========================================================
   GAME 13 — FISH HAS OPINIONS
   ========================================================= */
.fo-wrap { display: flex; flex-direction: column; gap: 10px; }

.fo-tank {
  display: grid; place-items: center;
  min-height: 130px;
  background:
    linear-gradient(180deg, rgba(72,202,228,.10), rgba(72,202,228,.03)),
    var(--bg-2);
  border: 2px solid var(--line);
  border-radius: var(--r);
}
.fo-fish { font-size: clamp(48px, 14vw, 82px); line-height: 1; }

.fo-approval {
  margin: 0; text-align: center;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: bold;
}

.fo-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: clamp(12px, 3vw, 18px);
  text-align: center;
}
.fo-say {
  margin: 0;
  font-size: clamp(16px, 4vw, 23px);
  text-transform: none;
  font-family: var(--font-display);
}
.fo-tell { margin: 6px 0 0; font-size: 13px; font-weight: bold; min-height: 1.3em; }

.fo-tray {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) {
  .fo-tray { grid-template-columns: repeat(3, 1fr); }
}
.fo-food {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-height: 84px;
  padding: 10px 6px;
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease, transform .1s ease;
}
.fo-food:hover:enabled { border-color: var(--accent); }
.fo-food:active:enabled { transform: translateY(2px); }
.fo-food:disabled { opacity: .45; cursor: default; }
.fo-food-em { font-size: 28px; line-height: 1; }
.fo-food-name { font-size: 12px; text-align: center; color: var(--ink-dim); overflow-wrap: anywhere; }

.fo-react { text-align: center; min-height: 2.8em; margin: 0; font-weight: bold; }

@media (prefers-reduced-motion: reduce) {
  .bag-item, .fo-food, .pick-item { transition: none; }
  .bag-item:active, .fo-food:active, .pick-item:active { transform: none; }
}

/* =========================================================
   GAME 14 — BUDGET WIZARD
   ========================================================= */
.bw-wrap { display: flex; flex-direction: column; gap: 12px; }

.bw-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: clamp(14px, 3vw, 20px);
  text-align: center;
}
.bw-spell {
  margin: 0;
  font-size: clamp(18px, 4.4vw, 27px);
  text-transform: none;
  font-family: var(--font-display);
}
.bw-needs {
  margin: 6px 0 0;
  color: var(--accent);
  font-weight: bold;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
}

.bw-slots { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.bw-slot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 76px; padding: 10px 6px;
  background: var(--bg-2);
  border: 2px dashed var(--line);
  border-radius: var(--r);
}
.bw-slot.filled { border-style: solid; border-color: var(--accent); }
.bw-slot-em { font-size: 28px; line-height: 1; }
.bw-slot-name { font-size: 12px; color: var(--ink-dim); text-align: center; overflow-wrap: anywhere; }

.bw-pantry { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .bw-pantry { grid-template-columns: repeat(3, 1fr); } }
.bw-pantry .pick-item.is-on { border-color: var(--accent); background: var(--surface); }
.bw-em { font-size: 26px; line-height: 1; }
.bw-name { font-size: 12.5px; font-weight: bold; overflow-wrap: anywhere; }
.bw-props { font-size: 10.5px; color: var(--ink-dim); letter-spacing: .04em; overflow-wrap: anywhere; }

.bw-react { text-align: center; min-height: 2.8em; margin: 0; font-weight: bold; }

/* =========================================================
   GAME 15 — DON'T MELT
   ========================================================= */
.dm-wrap { display: flex; flex-direction: column; gap: 8px; }

.dm-room {
  display: grid; place-items: center;
  min-height: 150px;
  background:
    linear-gradient(180deg, rgba(144,224,239,.10), rgba(144,224,239,.02)),
    var(--bg-2);
  border: 2px solid var(--line);
  border-radius: var(--r);
}
.dm-cube {
  font-size: clamp(52px, 15vw, 92px);
  line-height: 1;
  transition: transform .25s ease;
}

.dm-label {
  margin: 0 0 4px; text-align: center;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: bold;
}

.dm-actions { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .dm-actions { grid-template-columns: repeat(4, 1fr); } }
.dm-action {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 84px; padding: 10px 6px;
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--r);
  color: var(--ink); cursor: pointer;
  transition: border-color .12s ease, transform .1s ease;
}
.dm-action:hover:enabled { border-color: var(--accent); }
.dm-action:active:enabled { transform: translateY(2px); }
.dm-action.cooling, .dm-action:disabled { opacity: .45; cursor: default; }
.dm-action-em { font-size: 26px; line-height: 1; }
.dm-action-name { font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.dm-action-cool {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: bold;
}

.dm-react { text-align: center; min-height: 2.8em; margin: 0; font-weight: bold; }

@media (prefers-reduced-motion: reduce) {
  .dm-cube { transition: none; }
  .dm-action:active { transform: none; }
}

/* =========================================================
   GAME 16 — FLOOR INSPECTOR
   ========================================================= */
.fi-wrap { display: flex; flex-direction: column; gap: 12px; }

.fi-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: clamp(12px, 3vw, 18px);
  text-align: center;
}
.fi-room {
  margin: 0 0 4px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: bold;
}
.fi-brief {
  margin: 0;
  font-size: clamp(17px, 4.2vw, 25px);
  text-transform: none;
  font-family: var(--font-display);
}

.fi-grid { display: grid; gap: 8px; }
.fi-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.fi-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.fi-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

.fi-cell {
  position: relative;
  min-height: 56px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .12s ease;
}
.fi-cell:hover:enabled { border-color: var(--accent); }
.fi-cell:disabled { cursor: default; }
.fi-cell.is-answer { border-color: var(--red); }

.fi-obj { font-size: clamp(20px, 5.4vw, 28px); line-height: 1; }

/* The fault marker is a glyph, never colour on its own, so it stays
   visible without colour perception. */
.fi-mark {
  position: absolute;
  right: 5px; bottom: 2px;
  font-size: 15px; line-height: 1;
  color: var(--ink);
  font-weight: bold;
}

.fi-react { text-align: center; min-height: 2.8em; margin: 0; font-weight: bold; }

/* =========================================================
   GAME 17 — HIDE FROM GRANDMA
   ========================================================= */
.hg-wrap { display: flex; flex-direction: column; gap: 10px; }

.hg-room {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  justify-content: center;
  min-height: 165px;
  background:
    radial-gradient(320px 180px at 50% 30%, rgba(255,175,204,.10), transparent 70%),
    var(--bg-2);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
}
.hg-grandma {
  font-size: clamp(52px, 15vw, 88px);
  line-height: 1;
  transition: transform .18s ease;
}
.hg-grandma.is-turning { transform: rotate(-8deg) scale(1.04); }
.hg-grandma.is-looking { transform: scale(1.12); }

.hg-state {
  margin: 0; text-align: center; font-weight: bold;
  font-family: var(--font-display);
  font-size: clamp(14px, 3.4vw, 19px);
  text-transform: uppercase; letter-spacing: .04em;
}

.hg-label {
  margin: 0 0 4px; text-align: center;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: bold;
}

.hg-hide {
  align-self: center;
  width: min(260px, 80%);
  min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: .06em;
  background: var(--surface-2);
  color: var(--ink);
  border: 3px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, border-color .12s ease, background .12s ease;
}
.hg-hide span:first-child { font-size: 30px; line-height: 1; }
.hg-hide:hover:enabled { border-color: var(--accent); }
.hg-hide.is-hiding {
  border-color: var(--accent);
  background: var(--surface);
  transform: scale(.97);
}
.hg-hide:disabled { opacity: .5; cursor: default; }

.hg-react { text-align: center; min-height: 2.8em; margin: 0; font-weight: bold; }

@media (prefers-reduced-motion: reduce) {
  .hg-grandma, .hg-hide { transition: none; }
  .hg-grandma.is-turning, .hg-grandma.is-looking, .hg-hide.is-hiding { transform: none; }
}

/* =========================================================
   GAME 18 — ONE MORE SECOND
   ========================================================= */
.oms-wrap { display: flex; flex-direction: column; gap: 12px; }

.oms-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: clamp(16px, 4vw, 26px);
  text-align: center;
}
.oms-pot {
  font-family: var(--font-display);
  font-size: clamp(48px, 15vw, 96px);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.oms-pot-label {
  margin: 4px 0 14px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: bold;
}

.oms-nag {
  margin: 0; text-align: center;
  font-family: var(--font-display);
  font-size: clamp(15px, 3.8vw, 21px);
  color: var(--grape);
  min-height: 2.4em;
}

.oms-react { text-align: center; min-height: 2.8em; margin: 0; font-weight: bold; }