/* the minigames (javascript/minigames.js) */
/* right and wrong: shapes found, photos matched, and misses; config/colours.json's feedback sets them (main.js) */
:root { --ok: #00ff00; --bad: #ff0000; }
.mg-root { position: absolute; inset: 0; overflow: hidden; }
/* the timer bar, at the very top of the screen, over the header */
.mg-bar { position: fixed; top: 0; left: 0; width: 100%; height: calc(5 * var(--u)); background: black; transform-origin: left center; z-index: 2; }
/* the last of the time (LOW_FRAC, LOW_SECS in minigames.js): red and black by turns, 0.3 s each */
.mg-bar.low { animation: mg-low .6s steps(1) infinite; }
@keyframes mg-low { 0% { background: #ff0000; } 50% { background: black; } }

/* every game's prompt on the same line at the top, and what's played centred in the room under it */
.mg-center { height: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--u)); padding: calc(28 * var(--u)) 0; box-sizing: border-box; }
.mg-prompt { flex: none; max-width: min(90vw, calc(900 * var(--u))); text-align: center; font: clamp(20px, 2.6vw, calc(30 * var(--u))) "Times New Roman", times, serif; margin: 0; min-height: 1.4em; }
/* as small as the loading… before [start], and centred in the same room (.mg-root's), under the header and over the strip */
.mg-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: calc(16 * var(--u)) var(--hand); pointer-events: none; }
.mg-prompt b { letter-spacing: calc(-0.66 * var(--u)); }  /* its bold words (the thing to find, the caption, the count at time-up) set tighter */
.mg-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* shapes are invisible until revealed, whatever colours the SVG file gave them */
.mg-overlay g * { fill: transparent; stroke: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.mg-overlay g.ok * { fill: color-mix(in srgb, var(--ok) 35%, transparent); stroke: var(--ok); }

/* the room under the prompt; a photo is sized to fit it whole */
.mg-fitbox { flex: 1; min-height: 0; align-self: stretch; margin: 0 calc(16 * var(--u)); display: flex; align-items: center; justify-content: center; }
.mg-find { position: relative; line-height: 0; cursor: crosshair; user-select: none; touch-action: none; }
.mg-find .mg-photo { display: block; }
.mg-miss { position: absolute; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: calc(-9 * var(--u)) 0 0 calc(-9 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid var(--bad); pointer-events: none; animation: mg-fade .6s forwards; }
@keyframes mg-fade { to { opacity: 0; transform: scale(1.8); } }

/* three photos in a row, --gap apart (64px at 2560 × 1440, growing and shrinking with the window like --u but
   below it too) and centred together, each as big as fits in a 4:3 box (--cw wide) that the room under the
   prompt allows; a photo's button is the photo's own size, so the outline hugs it.
   --r is the photo's width / height (minigames.js) */
.mg-fitbox:has(.mg-opts) { container-type: size; }
.mg-opts { --gap: min(2.5vw, 4.444vh); --cw: min((100cqw - 2 * var(--gap)) / 3, 100cqh * 4 / 3); display: flex; gap: var(--gap); justify-content: center; align-items: center; }
.mg-opt { flex: none; width: min(var(--cw), var(--cw) * 3 / 4 * var(--r, 4 / 3)); aspect-ratio: var(--r, 4 / 3); padding: 0; border: 0; background: none; cursor: pointer; }
.mg-opt img { width: 100%; height: 100%; display: block; }
.mg-opt:hover:not(:disabled) { box-shadow: 0 0 0 calc(3 * var(--u)) #bbb; }
.mg-opt:disabled { cursor: default; }
.mg-opt.ok, .mg-opt.ok:hover { box-shadow: 0 0 0 calc(5 * var(--u)) var(--ok); }
.mg-opt.bad, .mg-opt.bad:hover { box-shadow: 0 0 0 calc(5 * var(--u)) var(--bad); }
/* narrow screens: the photos stacked, 10px apart, each as big as a third of the room under the prompt allows */
@media (max-width: 640px) {
  .mg-opts { --cw: min(100cqw, (100cqh - 20px) / 3 * 4 / 3); flex-direction: column; gap: 10px; }
  .mg-opt { min-height: 0; }
}

/* 4 × 3 portrait (3:4) cells make a square grid, so its width is capped at the height under the
   prompt (cq units: the room's size, which the page's bars cut down) */
.mg-fitbox:has(.mg-pairs) { container-type: size; }
.mg-pairs { width: min(100cqw, 100cqh); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--u)); user-select: none; }
.mg-cell { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; }
.mg-cell:disabled { cursor: default; }
/* the whole photo, centred in its cell; the outline hugs the photo, not the cell */
.mg-cell img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; display: block; transition: box-shadow .15s, transform .35s ease-in; }
.mg-cell:hover:not(:disabled) img { box-shadow: 0 0 0 calc(3 * var(--u)) #bbb; }
.mg-cell.picked img, .mg-cell.picked:hover img { box-shadow: 0 0 0 calc(5 * var(--u)) black; }
.mg-cell.ok img, .mg-cell.ok:hover img { box-shadow: 0 0 0 calc(5 * var(--u)) var(--ok); }
.mg-cell.bad img, .mg-cell.bad:hover img { box-shadow: 0 0 0 calc(5 * var(--u)) var(--bad); }
.mg-cell.gone img { transform: scale(0); }
.mg-cell.out { visibility: hidden; }
/* narrow screens: 3 × 4, a 9:16 grid */
@media (max-width: 640px) {
  .mg-pairs { width: min(100cqw, 100cqh * 9 / 16); grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* find them all: the count found, after the prompt */
.mg-count { font-variant-numeric: tabular-nums; }