/* ==========================================================================
English Games — shared stylesheet
One file, linked by index.html and all 14 game pages.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,75..125,400..900&display=swap');
:root {
/* Surfaces */
--eg-bg: #0A0A0A;
--eg-surface: #121212; /* large tiles, panels */
--eg-card: #141414; /* small cards */
--eg-card-hover: #1B1B1B;
--eg-border: #1F1F1F;
--eg-border-strong: #2A2A2A;
/* Ink */
--eg-ink: #F4EFE6; /* primary text, also used as a light surface */
--eg-ink-muted: #C9C3B8; /* body copy on dark surfaces */
--eg-ink-dim: #A39D93; /* body copy inside small cards */
--eg-ink-faint: #8F8980; /* eyebrows, meta, labels */
--eg-ink-on-light: #0A0A0A;
/* Accents (tile backgrounds — always pair with --eg-ink text) */
--eg-teal-deep: #0E4655;
--eg-teal: #11736A;
--eg-green: #12632F;
--eg-red: #96162F;
--eg-gold: #8A6510;
/* Accent tints (labels/icons on DARK cards only — never as tile bg) */
--eg-teal-light: #45A89B;
--eg-teal-deep-light: #4FA3B8; /* tint of --eg-teal-deep, for VerbSprint's tile */
--eg-green-light: #7FB08D;
--eg-gold-light: #D9A520;
--eg-rose: #CF4F66;
/* Artwork wells: darkened version of the parent tile colour */
--eg-well-teal-deep: #0A333F;
--eg-well-teal: #0B524B;
--eg-well-green: #0C4722;
--eg-well-red: #6F1024;
--eg-well-gold: #654A0B;
--eg-well-dark: #101010;
/* Wells inside dark cards, tinted to the card's accent */
--eg-well-teal-tint: #0D2F2C;
--eg-well-gold-tint: #332508;
--eg-well-red-tint: #3A0C17;
--eg-well-green-tint: #0C2F1A;
/* Radii */
--eg-r-tile: 20px;
--eg-r-card: 16px;
--eg-r-well: 14px;
--eg-r-inner: 12px;
--eg-r-pill: 999px;
/* Spacing */
--eg-gap: 14px; /* the bento gutter — same everywhere */
--eg-gap-sm: 10px;
--eg-pad-tile: clamp(22px, 2.6vw, 32px);
--eg-pad-hero: clamp(26px, 3vw, 44px);
--eg-pad-card: 20px;
--eg-section-gap: 44px;
/* Type */
--eg-font: Archivo, system-ui, -apple-system, sans-serif;
--eg-transition: 140ms ease;
/* Back-compat aliases: shared.js (used by every game page) hardcodes
these old theme.css variable names in a couple of UI strings — the
leaderboard's "Loading…"/empty-state row and the score-submit
success/fail message. Cheap to keep them resolving to something
sensible without touching shared.js itself. */
--muted: var(--eg-ink-faint);
--correct: var(--eg-green);
--wrong: var(--eg-red);
}
/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--eg-bg);
color: var(--eg-ink);
font-family: var(--eg-font);
-webkit-font-smoothing: antialiased;
padding: 0 clamp(12px, 2.5vw, 28px) 40px;
}
a { color: var(--eg-ink); text-decoration: none; }
a:hover { color: #FFFFFF; }
::selection { background: var(--eg-red); color: var(--eg-ink); }
/* --- Type scale ---------------------------------------------------------- *
All display type: weight 900, font-stretch 110-115%, uppercase, tight leading.
Body copy: weight 400, line-height 1.5, text-wrap: pretty. */
.eg-h1 { margin:0; font-size: clamp(38px,5.2vw,68px); line-height:.95; font-weight:900; font-stretch:115%; letter-spacing:-.01em; text-transform:uppercase; text-wrap:balance; }
.eg-h2 { margin:0; font-size: clamp(22px,2.2vw,30px); line-height:1; font-weight:900; font-stretch:112%; text-transform:uppercase; }
.eg-h3 { margin:0; font-size: clamp(26px,2.6vw,34px); line-height:1; font-weight:900; font-stretch:112%; text-transform:uppercase; }
.eg-h4 { margin:0; font-size: 22px; line-height:1.05;font-weight:900; font-stretch:110%; text-transform:uppercase; overflow-wrap:anywhere; }
.eg-display { font-size: clamp(52px,7vw,84px); line-height:.9; font-weight:900; font-stretch:112%; }
/* Eyebrow / meta label — the signature small-caps line above every title */
.eg-eyebrow {
font-size: 11.5px; font-weight: 700; letter-spacing: .2em;
text-transform: uppercase; color: var(--eg-ink-faint);
}
.eg-eyebrow--on-color { color: var(--eg-ink); } /* on a colour tile */
.eg-body { margin:0; font-size:15px; line-height:1.5; color: var(--eg-ink-muted); text-wrap: pretty; }
.eg-body--sm { font-size:14px; color: var(--eg-ink-dim); }
/* --- Layout: the bento grid ---------------------------------------------- */
.eg-row { display:flex; flex-wrap:wrap; gap: var(--eg-gap); }
.eg-row + .eg-row { margin-top: var(--eg-gap); }
/* auto-fitting card grid; cards never go below 260px */
.eg-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--eg-gap); }
/* Section heading row: title left, meta right */
.eg-section-head {
display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
gap:12px; margin: var(--eg-section-gap) 6px 16px;
}
.eg-header {
display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
justify-content:space-between; padding: 22px 6px 20px;
}
.eg-nav { display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px;
font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.eg-nav a { color: var(--eg-ink-muted); }
.eg-nav a:hover { color: var(--eg-ink); }
/* Fast Lane / Arcade / Workshop / Long Game / Leaderboard are this site's
own sections, so they should read as the primary nav — bright, bold and
underlined — rather than blending in with the plainer links out to the
sibling sites (Lens, Quiz) next to them. Selectors are bumped a notch
past ".eg-nav a" (two classes beat one class + one type) so they don't
get silently overridden by it the way the old "Game of the week" button
was. Each link sets its own --eg-nav-accent inline (see index.html),
picked from that section's own tile artwork, so the underline (and the
hover colour) differs per section instead of being one flat colour. */
.eg-nav .eg-nav-cat {
color: var(--eg-ink); font-weight:800;
border-bottom:2px solid var(--eg-nav-accent, var(--eg-gold-light));
padding-bottom:4px;
transition: color var(--eg-transition), border-color var(--eg-transition);
}
.eg-nav .eg-nav-cat:hover { color: var(--eg-nav-accent, var(--eg-gold-light)); }
/* Lens / Quiz — links out to the sibling sites, deliberately quieter than
this site's own section links above (mirrors how English Lens's own nav
keeps its "Games"/"Quiz" cross-links smaller and muted too). */
.eg-nav .eg-nav-quiet { font-size:11px; letter-spacing:.14em; }
.eg-footer {
margin-top:40px; padding:22px 6px 0; border-top:1px solid #1C1C1C;
display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
font-size:12.5px; letter-spacing:.06em; color:#7C766D;
}
/* --- Tiles --------------------------------------------------------------- */
.eg-tile {
border-radius: var(--eg-r-tile);
padding: var(--eg-pad-tile);
display:flex; flex-direction:column; gap:16px;
background: var(--eg-surface); color: var(--eg-ink);
transition: background var(--eg-transition);
}
.eg-tile--hero { padding: var(--eg-pad-hero); justify-content:space-between; gap:36px; min-height:420px; flex:1 1 520px; }
.eg-tile--lg { flex: 1 1 400px; min-height: 360px; }
.eg-tile--md { flex: 1 1 380px; min-height: 340px; }
/* Colour variants. Each sets its own hover + well + on-light button colour. */
.eg-tile--teal-deep { background: var(--eg-teal-deep); --eg-well: var(--eg-well-teal-deep); --eg-btn-fg: var(--eg-teal-deep); }
.eg-tile--teal { background: var(--eg-teal); --eg-well: var(--eg-well-teal); --eg-btn-fg: var(--eg-well-teal); }
.eg-tile--green { background: var(--eg-green); --eg-well: var(--eg-well-green); --eg-btn-fg: var(--eg-well-green); }
.eg-tile--red { background: var(--eg-red); --eg-well: var(--eg-well-red); --eg-btn-fg: var(--eg-red); }
.eg-tile--gold { background: var(--eg-gold); --eg-well: var(--eg-well-gold); --eg-btn-fg: var(--eg-well-gold); }
.eg-tile--dark { background: #1B1B1B; --eg-well: var(--eg-well-dark); --eg-btn-fg: var(--eg-ink-on-light); }
.eg-tile--teal-deep:hover { background:#115364; }
.eg-tile--teal:hover { background:#148176; }
.eg-tile--green:hover { background:#157136; }
.eg-tile--red:hover { background:#A61A36; }
.eg-tile--gold:hover { background:#9C7213; }
.eg-tile--dark:hover { background:#232323; }
/* On colour tiles ALL text is full-opacity --eg-ink (contrast requirement).
Never use alpha-muted text on a colour ground. */
.eg-tile[class*="eg-tile--"]:not(.eg-tile--dark) .eg-body { color: var(--eg-ink); }
/* Accent-tinted chips (.eg-chip and its variants) are designed to sit on a
dark backdrop — their low-opacity accent-coloured background/text nearly
disappears against a matching-hued tile. On a colour tile, use a neutral
cream pod instead so found/missed word chips stay legible. */
.eg-tile[class*="eg-tile--"]:not(.eg-tile--dark) .eg-chip,
.eg-tile[class*="eg-tile--"]:not(.eg-tile--dark) .eg-chip--muted,
.eg-tile[class*="eg-tile--"]:not(.eg-tile--dark) .eg-chip--ant {
background: rgba(244,239,230,.16); border-color: rgba(244,239,230,.4); color: var(--eg-ink);
}
.eg-tile[class*="eg-tile--"]:not(.eg-tile--dark) .eg-chip:hover,
.eg-tile[class*="eg-tile--"]:not(.eg-tile--dark) .eg-chip--muted:hover,
.eg-tile[class*="eg-tile--"]:not(.eg-tile--dark) .eg-chip--ant:hover {
background: rgba(244,239,230,.28);
}
/* --- Cards (the Long Game grid) ------------------------------------------ */
.eg-card {
background: var(--eg-card);
border: 1px solid var(--eg-border);
border-radius: var(--eg-r-card);
padding: var(--eg-pad-card);
display:flex; flex-direction:column; gap:12px;
color: var(--eg-ink);
transition: background var(--eg-transition);
}
.eg-card:hover { background: var(--eg-card-hover); }
/* Accent per card — drives the eyebrow colour and the artwork well */
.eg-card--teal { --eg-accent: var(--eg-teal-light); --eg-well: var(--eg-well-teal-tint); }
.eg-card--gold { --eg-accent: var(--eg-gold-light); --eg-well: var(--eg-well-gold-tint); }
.eg-card--rose { --eg-accent: var(--eg-rose); --eg-well: var(--eg-well-red-tint); }
.eg-card--green { --eg-accent: var(--eg-green-light); --eg-well: var(--eg-well-green-tint); }
.eg-card .eg-eyebrow { color: var(--eg-accent); font-size: 11px; }
/* --- Artwork well -------------------------------------------------------- *
Each game has a flat geometric SVG motif sitting in a darkened well.
SVG is single-colour + opacity steps (1 / .75 / .6 / .45 / .35). No gradients.
Tiles: viewBox ~300x110-130. Cards: viewBox ~260x80. */
.eg-art {
background: var(--eg-well, var(--eg-well-dark));
border-radius: var(--eg-r-well);
padding: 16px;
}
.eg-card .eg-art { border-radius: var(--eg-r-inner); padding: 14px; }
.eg-art svg { width:100%; height:auto; display:block; }
.eg-art svg[hidden] { display:none; } /* fix: rotating game-of-the-week motifs must actually hide */
/* --- Welcome-screen "more instructions" inline expander ------------------
Used on every game's welcome-screen hero tile (the same tile/art as its
index.html card) to reveal the full how-to-play text without a modal. */
.hero-play-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.instr-toggle {
display:inline-flex; align-items:center; gap:.35rem;
background:none; border:none; padding:6px 0; margin:0;
font-family:'Archivo',sans-serif; font-size:12.5px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:var(--eg-ink);
opacity:.8; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.instr-toggle:hover { opacity:1; }
.instr-chevron { display:inline-block; font-size:11px; transition:transform .2s ease; }
.instr-toggle[aria-expanded="true"] .instr-chevron { transform:rotate(180deg); }
.instr-wrap { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.instr-wrap.open { grid-template-rows:1fr; }
.instr-inner { overflow:hidden; }
.instr-inner > p + p { margin-top:8px; }
/* --- Buttons ------------------------------------------------------------- */
.eg-btn {
display:inline-flex; align-items:center; justify-content:center;
align-self:flex-start;
padding: 15px 30px; min-height: 48px; /* 44px min touch target */
border-radius: var(--eg-r-pill);
font: inherit; font-size:14px; font-weight:800; letter-spacing:.04em;
border:0; cursor:pointer; transition: background var(--eg-transition);
}
.eg-btn--primary { background: var(--eg-ink); color: var(--eg-btn-fg, var(--eg-ink-on-light)); }
.eg-btn--primary:hover { background:#FFFFFF; }
.eg-btn--ghost { background:transparent; color: var(--eg-ink-muted); border:1px solid var(--eg-border-strong); font-weight:700; padding:14px 26px; }
.eg-btn--ghost:hover { color: var(--eg-ink); border-color:#3A3A3A; }
.eg-btn--sm { padding:11px 22px; min-height:44px; font-size:13px; }
/* Text link with arrow, used at the foot of cards */
.eg-link { margin-top:auto; font-size:13px; font-weight:800; }
/* --- Game HUD ------------------------------------------------------------ */
/* No flex-wrap: with wrapping, a row of 3 stat tiles on a narrow phone
would fit 2 per row and strand the 3rd alone on its own row, where
flex-grow then stretches it to the full container width — a huge,
oddly-empty tile that pushes everything below it further down the page.
Dividing the row evenly and letting tiles shrink (min-width:0 so the
value/label can wrap instead of forcing overflow) keeps every stat row
exactly one line tall at any width. */
.eg-hud { display:flex; gap: var(--eg-gap-sm); }
.eg-stat {
flex: 1 1 0;
min-width: 0;
background: var(--eg-card); border:1px solid var(--eg-border);
border-radius: var(--eg-r-well); padding:16px 18px;
box-sizing: border-box;
}
.eg-stat__label { font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: var(--eg-ink-faint); }
.eg-stat__value { font-size:28px; font-weight:900; font-stretch:110%; line-height:1.1; margin-top:4px; }
.eg-stat__value--streak { color: var(--eg-gold-light); }
.eg-stat__value--time { color: var(--eg-rose); }
.eg-stat__value small { color: var(--eg-ink-faint); font-size:18px; }
@media (max-width:420px) {
/* Keeps a 3- or 4-stat row comfortably on one line on a phone-width
screen instead of the tiles' own padding/font-size forcing an early
wrap (which is exactly the awkward wrap this rule set exists to avoid). */
.eg-hud { gap:8px; }
.eg-stat { padding:12px 10px; }
.eg-stat__label { font-size:9.5px; letter-spacing:.12em; }
.eg-stat__value { font-size:22px; }
}
.eg-progress { height:8px; border-radius: var(--eg-r-pill); background: var(--eg-border); overflow:hidden; }
.eg-progress__bar { height:100%; background: var(--eg-teal-light); border-radius: var(--eg-r-pill);
transition: width 300ms ease; }
.eg-progress__bar.is-low { background: var(--eg-red); }
/* Lives / hearts indicator, used by games with a limited-attempts mechanic */
.eg-lives { display:flex; justify-content:center; gap:6px; }
.eg-life { font-size:18px; transition: filter var(--eg-transition), opacity var(--eg-transition); }
.eg-life.is-lost { filter:grayscale(1); opacity:.3; }
/* --- Prompt (the question) ----------------------------------------------- *
Inverted: cream ground, black ink. This is the focal point of every game. */
.eg-prompt {
background: var(--eg-ink); color: var(--eg-ink-on-light);
border-radius: 18px; padding: clamp(24px,3vw,40px); text-align:center;
}
.eg-prompt__label { font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#6B665E; }
.eg-prompt__text { margin-top:16px; font-size: clamp(26px,3.4vw,40px); line-height:1.2;
font-weight:900; font-stretch:110%; text-wrap:balance; }
.eg-prompt__blank { border-bottom:6px solid var(--eg-red); padding-bottom:2px; }
/* --- Answer options ------------------------------------------------------ */
/* width:100% (and align-self, belt-and-braces) is required here: this grid
sits inside a `align-items:center` flex column in every game that uses
it, so without an explicit width it shrink-wraps to a single column's
content width instead of the auto-fit repeat ever getting a chance to
place a second column — the classic "grid inside a centered flex column
collapses to one column" trap. */
.eg-options { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:12px; width:100%; align-self:stretch; box-sizing:border-box; }
.eg-option {
display:flex; align-items:center; gap:14px;
background: var(--eg-card); border:1px solid var(--eg-border-strong);
border-radius: var(--eg-r-well); padding:20px 22px; min-height:64px;
color: var(--eg-ink); font: inherit; font-size:19px; font-weight:800;
text-align:left; cursor:pointer; transition: background var(--eg-transition), border-color var(--eg-transition);
}
.eg-option:hover:not([disabled]) { background: var(--eg-border); border-color:#3A3A3A; }
.eg-option:focus-visible { outline:2px solid var(--eg-teal-light); outline-offset:2px; }
.eg-option__key { font-size:11px; font-weight:700; letter-spacing:.1em; color: var(--eg-ink-faint); }
.eg-option.is-correct { background: var(--eg-green); border-color: var(--eg-green); }
.eg-option.is-correct .eg-option__key { color:#A9D9B8; }
.eg-option.is-wrong { background: var(--eg-red); border-color: var(--eg-red); }
.eg-option.is-wrong .eg-option__key { color:#F0C3CC; }
.eg-option[disabled] { cursor:default; }
/* --- Feedback ------------------------------------------------------------ */
.eg-feedback {
display:flex; gap:14px; align-items:baseline;
border-radius: var(--eg-r-well); padding:18px 22px; font-size:15px; line-height:1.45;
}
.eg-feedback--correct { background: var(--eg-teal-deep); color: var(--eg-ink); }
.eg-feedback--correct .eg-eyebrow { color:#9FC4CE; }
.eg-feedback--wrong { background: var(--eg-card); border:1px solid var(--eg-border); color: var(--eg-ink-muted); }
.eg-feedback--wrong .eg-eyebrow { color: var(--eg-rose); }
/* --- Leaderboard --------------------------------------------------------- */
.eg-board { display:flex; flex-direction:column; gap:2px; }
.eg-board__row {
display:flex; gap:14px; align-items:baseline;
padding:11px 0; border-bottom:1px solid var(--eg-border);
font-size:15px; font-weight:700;
}
.eg-board__row:last-child { border-bottom:0; }
.eg-board__rank { width:24px; font-size:13px; font-weight:800; color: var(--eg-ink-faint); }
.eg-board__row:first-child .eg-board__rank { color: var(--eg-gold-light); }
.eg-board__name { flex:1; color: var(--eg-ink-muted); }
.eg-board__score { font-weight:800; color: var(--eg-ink-muted); }
.eg-board__row.is-you { background: var(--eg-card-hover); border-radius:8px; padding-inline:10px; }
.eg-board__row.is-you .eg-board__name,
.eg-board__row.is-you .eg-board__score,
.eg-board__row.is-you .eg-board__rank { color: var(--eg-ink); }
/* --- Game of the week badge ---------------------------------------------- */
.eg-badge {
background: var(--eg-ink); color: var(--eg-teal-deep);
padding:7px 14px; border-radius: var(--eg-r-pill);
font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
/* --- Shared game chrome --------------------------------------------------- *
Not in the original handoff (which only covered the index + the shell's
4 screens) but needed by every game page once it's actually wired up.
Added while converting PhrasalBlitz (session 2) so it's here once,
consistently, instead of reinvented per game. */
/* Text input — typed-answer fields, leaderboard name entry, etc. */
.eg-input {
background: var(--eg-card); border:1px solid var(--eg-border-strong);
border-radius: var(--eg-r-well); padding:14px 18px; min-height:48px;
color: var(--eg-ink); font: inherit; font-size:16px; width:100%;
transition: border-color var(--eg-transition);
}
.eg-input:focus { outline:none; border-color: var(--eg-teal-light); }
.eg-input.is-correct { border-color: var(--eg-green); }
.eg-input.is-wrong { border-color: var(--eg-red); }
/* Mode-select cards — for any game with more than one mode. The selected
card takes the game's own accent colour via --eg-modecard-bg, set inline
per game, e.g. style="--eg-modecard-bg: var(--eg-gold)". */
.eg-modecard {
background: var(--eg-card); border:1px solid var(--eg-border);
border-radius: var(--eg-r-card); padding:22px;
display:flex; flex-direction:column; gap:8px; min-height:130px;
text-align:left; font:inherit; color:var(--eg-ink); cursor:pointer;
transition: background var(--eg-transition);
}
.eg-modecard:hover { background: var(--eg-card-hover); }
.eg-modecard .eg-eyebrow { color: var(--eg-ink-faint); }
.eg-modecard .eg-body--sm { color: var(--eg-ink-dim); }
.eg-modecard.is-selected {
background: var(--eg-modecard-bg, var(--eg-teal-deep)); border-color:transparent;
}
.eg-modecard.is-selected .eg-eyebrow,
.eg-modecard.is-selected .eg-body--sm { color: var(--eg-ink); }
/* Small pill tabs — for in-game mode switching and leaderboard filters,
where a full mode-select card would be too heavy. */
.eg-pilltabs { display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--eg-card); border:1px solid var(--eg-border); border-radius:var(--eg-r-pill); padding:4px; }
.eg-pilltab { padding:8px 16px; border-radius:var(--eg-r-pill); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border:0; background:transparent; color:var(--eg-ink-faint); cursor:pointer; transition:background var(--eg-transition), color var(--eg-transition); }
.eg-pilltab:hover { color: var(--eg-ink); }
.eg-pilltab.active { background:var(--eg-ink); color:var(--eg-ink-on-light); }
/* Chips — small clickable pills for things like "found" / "missed" word
lists. Default variant reads as a highlight; --muted is a quieter one
for secondary lists (e.g. missed answers) on the same screen. */
.eg-chip {
display:inline-flex; align-items:center;
background:rgba(217,165,32,.14); border:1px solid rgba(217,165,32,.3); color:var(--eg-gold-light);
border-radius:var(--eg-r-pill); padding:6px 14px; font-size:13px; font-weight:700;
cursor:pointer; transition:background var(--eg-transition);
}
.eg-chip:hover { background:rgba(217,165,32,.24); }
.eg-chip--muted { background:var(--eg-card); border-color:var(--eg-border); color:var(--eg-ink-dim); }
.eg-chip--muted:hover { border-color:var(--eg-gold-light); color:var(--eg-gold-light); }
/* Leaderboard table — shared.js's renderLeaderboard() writes plain |
rows into a |
, so this stays a real rather than eg-board's
div rows; styled to read the same way. */
.eg-lb-table { width:100%; border-collapse:collapse; font-size:14px; }
.eg-lb-table th { text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--eg-ink-faint); padding:8px 10px; border-bottom:1px solid var(--eg-border); }
.eg-lb-table td { padding:11px 10px; border-bottom:1px solid var(--eg-border); font-weight:700; color:var(--eg-ink-muted); }
.eg-lb-table tbody tr:first-child td { color:var(--eg-gold-light); }
/* Definition popup — shared.js's showDefinitionModal / showPhrasalModal /
showLocalDefModal hard-code these class names. */
.def-modal-overlay {
position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:100;
display:flex; align-items:center; justify-content:center; padding:16px;
}
.def-modal {
background:var(--eg-card); border:1px solid var(--eg-border-strong);
border-radius:var(--eg-r-card); padding:28px; max-width:420px; width:100%; position:relative;
}
.def-modal .close-btn {
position:absolute; top:16px; right:16px; background:none; border:0;
color:var(--eg-ink-faint); font-size:19px; cursor:pointer; line-height:1;
}
.def-modal .close-btn:hover { color:var(--eg-ink); }
.def-modal h3 { margin:0 0 4px; font-size:22px; font-weight:900; font-stretch:110%; text-transform:uppercase; color:var(--eg-gold-light); }
.def-modal .pos { font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--eg-ink-faint); margin-bottom:12px; }
.def-modal .definition { font-size:15px; color:var(--eg-ink); line-height:1.5; margin-bottom:12px; }
.def-modal .example { font-style:italic; color:var(--eg-ink-muted); font-size:14px; border-left:2px solid var(--eg-gold-light); padding-left:12px; line-height:1.5; margin-bottom:8px; }
.def-modal .example:last-child { margin-bottom:0; }
/* --- Arcade shell (WordSnake / WordDrop / English Ace) -------------------- *
The shared welcome → play → game-over chrome used by the three endless
arcade games that ship on the game's own dark accent ground (see the
design hand-off README, "Shared shell"). Affix Climber deliberately does
NOT use this — it has its own engineer's-notebook look, scoped to
wordrunner.html itself. */
.eg-arcade-play { border-radius: var(--eg-r-tile); background:#080B0D; border:1px solid var(--eg-border); overflow:hidden; }
.eg-arcade-hud { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:11px 14px; background:#101010; border-bottom:1px solid var(--eg-border); }
.eg-arcade-cat { background: var(--eg-gold-light); color: var(--eg-ink-on-light); border-radius: var(--eg-r-pill); padding:7px 13px; font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.eg-arcade-chip { background: var(--eg-card); border:1px solid var(--eg-border-strong); border-radius: var(--eg-r-pill); padding:7px 13px; display:flex; align-items:baseline; gap:4px; }
.eg-arcade-chip__label { font-size:10.5px; font-weight:700; letter-spacing:.2em; color: var(--eg-ink-faint); text-transform:uppercase; }
.eg-arcade-chip__value { font-size:14px; font-weight:900; color: var(--eg-ink); }
.eg-arcade-chip__value--mult { color: var(--eg-teal-light); }
.eg-arcade-chip__value--bad { color: var(--eg-rose); }
.eg-arcade-spacer { flex:1 1 auto; }
.eg-arcade-pause { background:transparent; color: var(--eg-ink-muted); border:1px solid var(--eg-border-strong); border-radius: var(--eg-r-pill); padding:7px 15px; min-height:34px; font:inherit; font-size:10.5px; font-weight:800; letter-spacing:.16em; cursor:pointer; transition: color var(--eg-transition), border-color var(--eg-transition); }
.eg-arcade-pause:hover { color: var(--eg-ink); border-color:#3A3A3A; }
.eg-arcade-speedpips { display:flex; gap:4px; align-items:center; background: var(--eg-card); border:1px solid var(--eg-border-strong); border-radius: var(--eg-r-pill); padding:6px 13px; }
.eg-arcade-speedpips__label { font-size:10.5px; font-weight:700; letter-spacing:.2em; color: var(--eg-ink-faint); margin-right:4px; }
.eg-arcade-speedpips span.pip { width:8px; height:14px; border-radius:2px; background: var(--eg-border-strong); display:inline-block; }
.eg-arcade-speedpips span.pip.on { background: var(--eg-gold-light); }
.eg-arcade-footer-note { background:#101010; padding:13px 20px 18px; font-size:14px; font-weight:700; color: var(--eg-ink-muted); min-height:20px; display:block; }
.eg-arcade-footer-note.is-bad { color: var(--eg-rose); }
.eg-arcade-pause-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(11,45,77,.92); z-index:3; text-align:center; }
.eg-arcade-pause-overlay .lbl { font-size:11.5px; font-weight:800; letter-spacing:.24em; color: var(--eg-gold-light); }
.eg-arcade-pause-overlay .hint { font-size:11px; font-weight:700; letter-spacing:.18em; color: var(--eg-ink-faint); }
/* .eg-btn defaults to align-self:flex-start (for horizontal button rows);
inside this centered column layout that pins Resume to the left edge, so
re-center it explicitly. */
.eg-arcade-pause-overlay .eg-btn { align-self:center; }
.eg-arcade-banner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.eg-arcade-banner span { background: var(--eg-ink); color: var(--eg-ink-on-light); border-radius: var(--eg-r-pill); padding:14px 26px; font-size:15px; font-weight:900; letter-spacing:.1em; text-align:center; }
.eg-arcade-over { border-radius: var(--eg-r-tile); background: var(--eg-teal-deep); padding: clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:16px; }
.eg-arcade-over__reason { font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: var(--eg-ink); }
.eg-arcade-over__score { font-size: clamp(50px,8vw,68px); line-height:.9; font-weight:900; font-stretch:112%; }
.eg-arcade-statrow { display:flex; gap:10px; flex-wrap:wrap; }
.eg-arcade-statcard { flex:1 1 100px; background:rgba(244,239,230,.14); border-radius:14px; padding:14px 16px; }
.eg-arcade-statcard__label { font-size:10.5px; font-weight:700; letter-spacing:.2em; }
.eg-arcade-statcard__value { font-size:26px; font-weight:900; font-stretch:110%; }
.eg-arcade-chiplist { display:flex; gap:7px; flex-wrap:wrap; }
.eg-arcade-review-chip { background:rgba(10,10,10,.28); border:1px solid rgba(244,239,230,.3); border-radius: var(--eg-r-pill); padding:6px 14px; font-size:13px; font-weight:700; color: var(--eg-ink); }
.eg-arcade-review-chip--miss { background:rgba(207,79,102,.14); border-color:rgba(207,79,102,.35); color: var(--eg-rose); }
/* Hidden by default — keyboard/mouse players steer with arrows/WASD or a
swipe, so the on-screen D-pad is only useful on a touch device with no
hover capability. Shown back via the (hover:none),(pointer:coarse) query
below. */
.eg-arcade-dpad { display:none; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(2,48px); gap:6px; }
.eg-arcade-dpad button { background: var(--eg-card); border:1px solid var(--eg-border-strong); border-radius:12px; color: var(--eg-ink-muted); font:inherit; font-size:18px; font-weight:900; cursor:pointer; transition: color var(--eg-transition), border-color var(--eg-transition); }
.eg-arcade-dpad button:hover { color: var(--eg-ink); border-color:#3A3A3A; }
.eg-arcade-dpad span.spacer { visibility:hidden; }
@media (hover:none), (pointer:coarse) {
.eg-arcade-dpad { display:grid; }
}
/* Short-height landscape phones (rotated to play WordSnake/English Ace) —
trims the site header and arcade HUD so the play area fits without
scrolling even outside of fullscreen. Gated on pointer:coarse so it never
fires for a landscape desktop/tablet window. */
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse) {
.eg-header { padding:8px 6px; gap:8px 16px; }
.eg-arcade-hud { padding:6px 10px; gap:6px; }
.eg-arcade-cat { padding:5px 10px; font-size:9.5px; }
.eg-arcade-chip { padding:5px 10px; }
.eg-arcade-pause { padding:5px 12px; min-height:28px; }
.eg-arcade-speedpips { padding:4px 10px; }
}
/* --- Rotate-to-landscape hint (mobile only) ------------------------------- */
/* A dismissible, non-blocking suggestion — never a hard gate — shown by
initRotateHint() (shared.js) on portrait touch devices for the games that
most benefit from the extra width (WordSnake, English Ace). Made loud on
purpose (gold, bold, animated icon) since a quiet version got missed. */
.eg-rotate-hint {
display:flex; align-items:center; gap:12px;
background: var(--eg-gold-light); border:2px solid var(--eg-gold);
border-radius: var(--eg-r-card); padding:14px 18px; margin:0 0 14px;
font-size:15px; font-weight:800; color: var(--eg-ink-on-light);
box-shadow: 0 4px 18px rgba(217,165,32,.35);
animation: eg-rotate-hint-pop 420ms ease;
}
.eg-rotate-hint__icon { font-size:26px; line-height:1; flex:0 0 auto; animation: eg-rotate-hint-spin 1.6s ease-in-out infinite; }
.eg-rotate-hint__text { flex:1 1 auto; line-height:1.25; }
.eg-rotate-hint__close { flex:0 0 auto; background:transparent; border:0; color: var(--eg-ink-on-light); opacity:.65; font-size:20px; line-height:1; cursor:pointer; padding:4px; }
.eg-rotate-hint__close:hover { opacity:1; }
@media (hover:hover) and (pointer:fine) { .eg-rotate-hint { display:none !important; } }
@keyframes eg-rotate-hint-pop {
0% { transform:scale(.92); opacity:0; }
100% { transform:scale(1); opacity:1; }
}
@keyframes eg-rotate-hint-spin {
0%, 100% { transform:rotate(0deg); }
20% { transform:rotate(-100deg); }
40% { transform:rotate(0deg); }
60% { transform:rotate(-100deg); }
80% { transform:rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
.eg-rotate-hint { animation:none; }
.eg-rotate-hint__icon { animation:none; }
}
/* --- Ready gate: "tap / press any key to start" -------------------------- */
/* Overlaid by armReadyGate() (shared.js) on the board/field right after the
game phase becomes visible, before any motion starts. The host element it
is appended to must already be position:relative/absolute. */
.eg-ready-gate {
position:absolute; inset:0; z-index:60;
display:flex; align-items:center; justify-content:center;
background:rgba(6,6,6,.6); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
cursor:pointer;
}
.eg-ready-gate__card {
background: var(--eg-gold-light); color: var(--eg-ink-on-light);
border-radius: var(--eg-r-pill); padding:16px 30px;
font-size:17px; font-weight:800; text-align:center; white-space:nowrap;
box-shadow:0 12px 30px rgba(0,0,0,.5);
animation: eg-ready-gate-pulse 1.5s ease-in-out infinite;
}
.eg-ready-gate__tap { display:none; }
.eg-ready-gate__key { display:inline; }
@media (pointer:coarse) {
.eg-ready-gate__tap { display:inline; }
.eg-ready-gate__key { display:none; }
}
@keyframes eg-ready-gate-pulse {
0%, 100% { transform:scale(1); }
50% { transform:scale(1.045); }
}
@media (prefers-reduced-motion: reduce) { .eg-ready-gate__card { animation:none; } }
/* --- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
/* --- Accessibility -------------------------------------------------------- */
/* Visually hidden but still announced by screen readers. Use for an
aria-live status region that reports answer feedback (correct/wrong,
round results) without adding visible clutter to the bento layout. */
.sr-only {
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}