@charset "UTF-8";
/* ==========================================================================
Bible Games — the four-choice quiz layout (shared/quiz.css)
--------------------------------------------------------------------------
Every game on this site that asks "here is a thing — which of these four is
it?" wears this file: the prompt, the feedback panel with its verse, and the
four answer buttons.
IT NO LONGER HOLDS THE SHELL
Until 2026-09-02 this file also held the no-scroll column, the top bar, the
scoreboard, the ordinary buttons and the end-of-round card. Those are not
quiz things — a card grid and a falling-word catcher want exactly the same
ones — so they moved to shared/shell.css and every game loads that. What is
left here is only what a four-choice quiz has and other shapes do not.
Nothing was rewritten in the move. Every rule below is the rule that was
already here, in the order it was already in.
WHY THIS IS SHARED WHEN Shared.md SAYS LAYOUT IS NOT
The rule in Shared.md is not "never share layout" — it is "could a page
reasonably want it different?" The hub is a scrolling grid of tiles and a
game is a fixed-height column, so those two genuinely differ and must not be
merged. But two four-choice quizzes do NOT reasonably want a different
answer grid, and writing it twice is how they drift apart. Written once,
changing how every quiz on the site looks is one edit here.
A game keeps its own styles.css and loads it AFTER this file, so anything
here can be overridden per game. Put in that file only what is genuinely
that game's own.
--------------------------------------------------------------------------
HOW A PAGE LOADS IT
shell.css is REQUIRED and comes first. This file assumes .app, .stage,
.topbar, .hud and .overlay already exist.
--------------------------------------------------------------------------
Contents
1. Tokens this layout adds
2. Focus for the question
3. The prompt and the answer panel
4. The four answer buttons
5. Responsive
6. Reduced motion, forced colours, more contrast, print
--------------------------------------------------------------------------
THE LAYOUT CONTRACT (Standards.md §5) is held by shell.css. .stage is the
only element allowed to grow or shrink; the answers are their own row and
must never be put inside it.
========================================================================== */
/* -------------------------------------------------------------------------- */
/* 1. Tokens this layout adds */
/* -------------------------------------------------------------------------- */
:root {
/* --right and --wrong are in shell.css now: the feedback panel that uses
them is shared with the card grids, and a token has to be defined with the
rules that read it or one file can be loaded without the other. */
/* The answer buttons. A game with short answers ("True") can raise these in
its own styles.css; a game with long ones ("John the Baptist") should not
need to, because the name shrinks to fit rather than wrapping. */
--ans-min-h: clamp(54px, 9vh, 84px);
--ans-font: clamp(0.95rem, 3.4vw, 1.4rem);
}
/* -------------------------------------------------------------------------- */
/* 2. Focus for the question */
/* -------------------------------------------------------------------------- */
/* .visually-hidden, the three-step focus ring for links and buttons, and
::selection are all in theme.css. The prompt is neither a link nor a button
and quiz.js moves focus to it as each question appears, so it needs its own
ring — written in all three steps so no browser is left without one. */
.ask:focus {
outline: 3px solid var(--gold-1);
outline-offset: 4px;
}
.ask:focus:not(:focus-visible) {
outline: none;
}
.ask:focus-visible {
outline: 3px solid var(--gold-1);
outline-offset: 4px;
}
/* -------------------------------------------------------------------------- */
/* 3. The prompt and the answer panel */
/* -------------------------------------------------------------------------- */
/* The thing being asked about — the deed, or the quotation. THIS is the game,
so it gets the largest type on the page and the most room. */
.ask {
align-self: center;
max-width: 44ch;
margin: 0;
text-align: center;
font-family: var(--font-display);
font-size: clamp(1.1rem, 3.9vw, 1.75rem);
line-height: 1.3;
color: var(--gold-1);
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
/*
* The answer panel's LOOK is in shell.css — every game on the site says the
* same three things after an answer, so it moved there when a card grid needed
* the identical panel. What is left here is where a QUIZ puts it.
*
* It gets its own scrollbar, and only its own: a long explanation with a long
* verse under it can exceed a short screen, and the alternative to scrolling
* HERE is either cropping the verse or scrolling the whole page, which the
* layout contract forbids. This sits inside .stage, so it can never push the
* answer buttons off the bottom — which is exactly why a quiz wants this and a
* card grid, whose panel is its own row, does not.
*/
.feedback {
max-height: 100%;
overflow-y: auto;
}
/* -------------------------------------------------------------------------- */
/* 4. The four answer buttons */
/* -------------------------------------------------------------------------- */
/*
* Two by two, at every width.
*
* Four in a row was tried first and is wrong on a phone: names here run long
* — "John the Baptist", "Mary of Bethany", "Nebuchadnezzar" — and a 320px
* screen split four ways gives each about 70px, which wraps every one of them
* to three lines. Two by two gives each half the width and keeps the buttons
* the same height as one another, which is what stops the grid reading as a
* mistake.
*/
.answers {
flex: 0 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.ans {
/* The anchor for .ans__mark, which is absolutely positioned so the tick or
cross cannot shift the name sideways when it appears. */
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--ans-min-h);
padding: 8px 10px;
border: 1px solid var(--panel-edge);
border-radius: 14px;
background: linear-gradient(160deg, var(--panel-1), var(--panel-2));
color: var(--gold-1);
font-family: var(--font-display);
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 8px 18px rgba(3, 2, 12, 0.45);
transition: transform var(--dur) ease, box-shadow var(--dur) ease,
border-color var(--dur) ease, filter var(--dur) ease;
-webkit-tap-highlight-color: transparent;
}
/*
* The tick or the cross.
*
* Absolutely positioned so it cannot shift the name when it appears — a name
* that jumps sideways the moment you answer reads as a glitch. Empty until an
* answer is given, and taking no space then either.
*/
.ans__mark {
position: absolute;
top: 5px;
left: 8px;
font-size: 1.15rem;
line-height: 1;
}
.ans.is-right .ans__mark { color: var(--right); }
.ans.is-wrong .ans__mark { color: var(--wrong); }
.ans__name {
/* Long names shrink rather than wrap. Four buttons of different heights read
as a mistake, and a wrapped "John the Baptist" is harder to take in than a
slightly smaller one. */
font-size: var(--ans-font);
line-height: 1.15;
text-align: center;
/* Belt and braces for the longest names on the narrowest screens: break
rather than overflow the button. */
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.ans:active:not(:disabled) {
transform: translateY(3px);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 4px 10px rgba(3, 2, 12, 0.45);
}
/* Disabled means "the question has moved on", not "unavailable to you", so
they stay legible rather than fading to grey. The two marked states below
are what the eye should be drawn to. */
.ans:disabled { cursor: default; }
/* The right answer is ALWAYS marked, whether or not it was chosen. A wrong
answer that only says "not that one" teaches nothing. */
.ans.is-right {
border-color: var(--right);
color: #eafff1;
box-shadow: 0 0 0 3px var(--right), 0 8px 20px rgba(3, 2, 12, 0.5);
}
/* The wrong one, marked only when it was the one chosen. */
.ans.is-wrong {
border-color: var(--wrong);
color: #ffe6da;
filter: brightness(0.85);
box-shadow: 0 0 0 3px var(--wrong), 0 8px 20px rgba(3, 2, 12, 0.5);
}
/* The two that were neither chosen nor right recede, so the eye goes to the
answer. Not hidden: reading them afterwards is part of learning. */
.ans.is-quiet {
filter: brightness(0.62);
}
/* -------------------------------------------------------------------------- */
/* 5. Responsive */
/* -------------------------------------------------------------------------- */
/* Hover only where a pointer can genuinely hover. On a touch screen the
browser fakes a hover on tap and leaves the element stuck in its lit state
until you tap elsewhere — so every answer a child had tapped would glow. */
@media (hover: hover) {
.ans:hover:not(:disabled) {
border-color: rgba(255, 214, 130, 0.8);
transform: translateY(-2px);
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), 0 12px 24px rgba(3, 2, 12, 0.5);
}
}
/* Small phones: trim the chrome so the question and the answers keep their
share of a short screen. */
@media (max-width: 420px) {
:root {
--ans-min-h: clamp(48px, 8vh, 68px);
}
.ask { font-size: clamp(1rem, 4.6vw, 1.4rem); }
.feedback { padding: 8px 11px; }
.feedback__why,
.feedback__verse { font-size: 0.87rem; }
}
/* Landscape on a phone: very little height. Four across, because width is what
there is. */
@media (max-height: 460px) and (orientation: landscape) {
.answers { grid-template-columns: repeat(4, 1fr); }
.ans { min-height: clamp(44px, 15vh, 66px); }
.ans__name { font-size: clamp(0.8rem, 2.9vh, 1.1rem); }
.ask { font-size: clamp(0.95rem, 4vh, 1.3rem); }
.feedback { padding: 6px 10px; }
.feedback__why,
.feedback__verse { font-size: 0.8rem; }
.feedback__scripture { margin-top: 6px; padding: 6px 10px 5px; }
}
/*
* Below 300px of height the shell stops being a fixed-height column and the
* page scrolls (Standards.md §5, and shell.css section 8). The feedback panel
* has to give up its own scrollbar at the same moment, or the verse is still
* cropped inside a panel on a page that can now grow.
*/
@media (max-height: 299px) {
.feedback {
max-height: none;
overflow-y: visible;
}
}
/* -------------------------------------------------------------------------- */
/* 6. Reduced motion, forced colours, more contrast, print */
/* -------------------------------------------------------------------------- */
/* The blanket "kill every transition" rule is in theme.css. What is left here
is specific to this layout: the answer buttons move by TRANSFORM on press
and on hover, and a transform with no duration still jumps. Duration alone
does not switch that off; the movement itself has to go. */
@media (prefers-reduced-motion: reduce) {
.ans:hover:not(:disabled),
.ans:active:not(:disabled) {
transform: none;
}
}
/*
* Windows High Contrast. The system throws our palette away wholesale, which
* would leave the four answer buttons identical to one another and the marked
* answer indistinguishable. Explicit borders and outlines bring the difference
* back in a form the system cannot flatten.
*/
@media (forced-colors: active) {
.ans,
.feedback {
border: 1px solid CanvasText;
}
.ans.is-right { outline: 4px solid Highlight; outline-offset: 2px; }
.ans.is-wrong { outline: 4px dotted CanvasText; outline-offset: 2px; }
.ans.is-quiet { filter: none; }
.ask:focus-visible {
outline: 3px solid Highlight;
outline-offset: 2px;
}
}
/* "Increase contrast": keep the palette, firm up the edges. */
@media (prefers-contrast: more) {
.ans.is-quiet { filter: brightness(0.85); }
}
/*
* Print. A game is not a printable thing, so this exists only so an accidental
* Ctrl+P produces one tidy page instead of a black rectangle.
*/
@media print {
.answers {
display: none !important;
}
.ask { color: #000; text-shadow: none; }
}