/* Odd one out (/demos/odd-one-out/, odd-one-out.js). Score, streak and lives on top, the time running out under them,
   the four faces as big as their room allows (a row when the room is wide, two by two when it is not), and what
   happened under them. */
.odd { --pad: clamp(var(--space-3), 2vmin, var(--space-6)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--pad); }
.odd [hidden] { display: none !important; }

.odd-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 32px; }
.odd-score { position: relative; display: flex; align-items: baseline; gap: var(--space-2); }
.odd-score span { color: var(--ink-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.odd-score strong { font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.odd-pop { position: absolute; left: 100%; top: -4px; margin-left: var(--space-2); color: var(--accent); font-weight: 700; white-space: nowrap; animation: odd-pop 900ms var(--ease-out) forwards; }
@keyframes odd-pop { from { opacity: 0; translate: 0 6px; } 20% { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -14px; } }
.odd-combo { color: var(--accent); font-size: var(--text-sm); font-weight: 700; text-align: center; white-space: nowrap; }
.odd-lives { display: flex; gap: 2px; }
.odd-lives span { color: var(--paper-3); transition: color 300ms var(--ease-out), scale 300ms var(--ease-spring); }
.odd-lives span.is-on { color: hsl(350 70% 55%); }
.odd-lives svg { display: block; fill: currentColor; }

.odd-timer { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--paper-3); }
.odd-timer i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: background-color 300ms var(--ease-out); }
.odd-timer i.is-low { background: hsl(350 70% 55%); }

.odd-board { container-type: size; display: grid; place-items: center; min-height: 0; }
.odd-grid { --g: clamp(8px, 2cqmin, 20px); --w: min((100cqw - var(--g)) / 2, ((100cqh - var(--g)) / 2) * 0.75, 260px); display: grid; grid-template-columns: repeat(2, var(--w)); gap: var(--g); }
@container (min-aspect-ratio: 3 / 2) { .odd-grid { --w: min((100cqw - 3 * var(--g)) / 4, 100cqh * 0.75, 300px); grid-template-columns: repeat(4, var(--w)); } }
.odd-card { position: relative; display: block; width: var(--w); aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); cursor: pointer; animation: odd-in 420ms var(--ease-spring) calc(var(--i) * 70ms) both; transition: translate var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity 400ms var(--ease-out), filter 400ms var(--ease-out); }
@keyframes odd-in { from { opacity: 0; transform: perspective(700px) rotateY(70deg) scale(0.9); } }
.odd-card img { display: block; width: 100%; height: 100%; }
.odd-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .odd-card:not(:disabled):hover { translate: 0 -3px; box-shadow: var(--shadow-lg); } }
.odd-card:disabled { cursor: default; }
.odd-key { position: absolute; left: 8px; top: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: hsl(0 0% 100% / 0.75); color: var(--ink-2); font-size: 11px; font-weight: 700; opacity: 0; }
@media (hover: hover) and (pointer: fine) { .is-playing .odd-key { opacity: 1; } }
/* after an answer: the odd one lights up, the rest step back; a wrong pick shakes */
.odd-card.is-rest { opacity: 0.55; filter: saturate(0.6); }
.odd-card.is-odd { box-shadow: 0 0 0 4px var(--accent), var(--shadow-lg); }
.odd-card.is-right { animation: odd-yes 520ms var(--ease-spring); }
.odd-card.is-wrong { opacity: 1; filter: none; box-shadow: 0 0 0 4px hsl(350 70% 55%), var(--shadow-md); animation: odd-no 420ms ease-in-out; }
@keyframes odd-yes { 40% { scale: 1.06; } }
@keyframes odd-no { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }

.odd-say { min-height: 2.6em; color: var(--ink-2); font-size: clamp(var(--text-sm), 1vh + 0.5rem, var(--text-lg)); font-weight: 600; line-height: 1.3; text-align: center; }
.odd-say.is-right { color: var(--accent); }
.odd-say.is-wrong { color: hsl(350 60% 45%); }

/* the start and the end: a card over the faces */
.odd-start, .odd-over { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: var(--space-3); padding: var(--space-6); border-radius: inherit; text-align: center; }
.odd-start .btn, .odd-over .btn { min-height: 52px; padding-inline: var(--space-8); font-size: var(--text-lg); box-shadow: var(--shadow-lg); }
.odd-over { background: color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: odd-fade 400ms var(--ease-out); }
.odd-over-title { font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--tracking-tight); }
.odd-over-text { color: var(--ink-2); }
@keyframes odd-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .odd-card, .odd-card.is-right, .odd-card.is-wrong, .odd-pop, .odd-over { animation: none; } }