html,
body,
* {
scrollbar-width: auto;
}
.games-main {
flex: 1;
overflow: hidden;
padding: 12px 0 0;
}
.games-shell {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: start;
width: 100%;
max-width: 1320px;
margin: 0 auto 12px;
}
/* The intro sits above the grid, not beside it. As a side-by-side row this was
a ~180px block of copy next to a ~673px grid, aligned to the top, so roughly
490px of the left column was empty - and stretching the panel would only have
moved that emptiness inside its border. Stacked, the copy is a full-width
strip and the grid gets the whole width. */
.games-toolbar {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
background: transparent;
border-radius: 16px;
}
.games-toolbar-copy {
flex: 0 0 auto;
padding: 18px;
border: 1px solid rgba(182, 203, 230, 0.18);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(20, 27, 39, 0.94), rgba(12, 18, 28, 0.98)),
radial-gradient(circle at top left, rgba(210, 168, 108, 0.12), transparent 52%),
radial-gradient(circle at 85% 100%, rgba(95, 194, 203, 0.08), transparent 45%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.games-lead {
margin: 0;
font-size: 0.9rem;
color: var(--accent-strong);
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
}
.games-sublead {
margin: 6px 0 0;
color: var(--text-muted);
font-size: 0.88rem;
line-height: 1.5;
max-width: 34ch;
}
/* three across on a full-width strip; they stack again when there is no room */
.games-toolbar-notes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 8px;
margin-top: 14px;
}
.games-toolbar-note {
margin: 0;
padding: 9px 10px;
border-radius: 12px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.03);
color: var(--text-muted);
font-size: 0.77rem;
line-height: 1.45;
}
.games-toolbar-note strong {
color: var(--gold-strong);
font-weight: 700;
}
.game-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
margin: 0;
flex: 1 1 680px;
width: 100%;
align-items: stretch;
}
.game-picker.hidden {
display: none;
}
.game-toolbar-actions {
display: none;
gap: 10px;
margin-left: 0;
flex: 1 1 100%;
width: 100%;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
}
.game-toolbar-actions.visible {
display: flex;
}
.game-toolbar-hint {
margin: 0;
min-height: 0;
padding: 11px 16px 12px;
border-radius: 18px;
border: 1px solid var(--accent-border);
background:
linear-gradient(180deg, var(--surface-raised), var(--surface)),
radial-gradient(circle at top left, var(--accent-soft), transparent 56%),
radial-gradient(circle at 90% 120%, var(--gold-soft), transparent 46%);
color: var(--text);
font-size: 0.88rem;
line-height: 1.3;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
align-content: center;
flex-wrap: wrap;
column-gap: 10px;
row-gap: 4px;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
flex: 0 1 auto;
width: fit-content;
min-width: min(220px, 100%);
max-width: min(46ch, 100%);
position: relative;
overflow: hidden;
}
.game-toolbar-hint-kicker,
.game-toolbar-hint-title,
.game-toolbar-hint-meta {
display: block;
position: relative;
z-index: 1;
padding-left: 0;
}
.game-toolbar-hint-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--gold-border);
background: var(--gold-soft);
color: var(--gold-strong);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.08), 0 6px 14px rgba(0, 0, 0, 0.16);
}
.game-toolbar-hint-title {
color: var(--text);
font-size: 1.08rem;
font-weight: 800;
letter-spacing: 0.035em;
line-height: 1.12;
text-wrap: balance;
flex: 0 1 auto;
}
.game-toolbar-hint-meta {
flex: 1 0 100%;
color: var(--text-muted);
font-size: 0.78rem;
line-height: 1.42;
}
.fullscreen-btn.hidden {
display: none;
}
.game-picker-btn {
--game-tint: rgba(210, 168, 108, 0.12);
--game-accent: rgba(95, 194, 203, 0.12);
display: inline-flex;
align-items: center;
gap: 12px;
justify-content: flex-start;
position: relative;
overflow: hidden;
width: 100%;
min-height: 102px;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid rgba(177, 200, 230, 0.28);
background:
linear-gradient(180deg, rgba(27, 35, 49, 0.96), rgba(17, 23, 34, 0.98)),
radial-gradient(circle at top left, var(--game-tint), transparent 56%),
radial-gradient(circle at 88% 110%, var(--game-accent), transparent 50%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 34px rgba(5, 10, 18, 0.28);
transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, filter 140ms ease;
white-space: normal;
text-align: left;
min-width: 0;
}
/* Arcade hub identity */
.games-page .games-shell { max-width: 1480px; gap: 20px; }
.games-page .games-toolbar-copy { border-color: var(--border); background: linear-gradient(160deg, var(--surface-raised), var(--surface)); box-shadow: none; }
.games-page .games-lead { color: var(--accent-strong); letter-spacing: .2em; }
.games-page .games-sublead { color: var(--text-muted); }
.games-page .game-picker { gap: 16px; }
.games-page .game-picker-btn { min-height: 112px; border-radius: 20px; border-color: var(--border); background: linear-gradient(160deg, var(--surface-raised), var(--surface)); box-shadow: none; }
.games-page .game-picker-btn:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: none; }
.games-page .game-picker-btn[aria-pressed='true'], .games-page .game-picker-btn.active { border-color: var(--accent-border); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--surface-raised)), var(--surface)); }
.games-page .games-card,
.games-page .game-picker-btn,
.games-page .game-panel { background: var(--surface); border-color: var(--border); box-shadow: none; }
.games-page .welcome-inner { background: linear-gradient(160deg, var(--surface-raised), var(--surface)); border: 1px solid var(--border); border-radius: 20px; }
/* The art fills the card and the copy rides on top of it, the same shape as the
featured pair above -- just smaller. It used to be a 40px glyph in a
two-column grid, which left most of the card empty. */
.game-picker-btn:not(.game-picker-btn-hero) {
display: block;
position: relative;
padding: 0;
min-height: 152px;
height: auto;
overflow: hidden;
border-color: var(--border);
background: var(--surface);
box-shadow: none;
isolation: isolate;
}
.game-picker-btn:not(.game-picker-btn-hero)::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
opacity: 1;
pointer-events: none;
z-index: 0;
}
.game-picker-btn[data-game='rpg'] {
--game-tint: rgba(216, 189, 132, 0.2);
--game-accent: rgba(108, 78, 34, 0.2);
}
.game-picker-btn[data-game='tetris'] {
--game-tint: rgba(98, 214, 255, 0.2);
--game-accent: rgba(255, 111, 145, 0.18);
}
.game-picker-btn[data-game='snake'] {
--game-tint: rgba(123, 218, 100, 0.2);
--game-accent: rgba(67, 120, 45, 0.18);
}
.game-picker-btn[data-game='pong'] {
--game-tint: rgba(142, 192, 255, 0.18);
--game-accent: rgba(69, 104, 176, 0.16);
}
.game-picker-btn[data-game='breakout'] {
--game-tint: rgba(255, 209, 102, 0.2);
--game-accent: rgba(79, 211, 255, 0.16);
}
.game-picker-btn[data-game='dash'] {
--game-tint: rgba(115, 168, 207, 0.2);
--game-accent: rgba(46, 99, 136, 0.18);
}
.game-picker-btn[data-game='memory'] {
--game-tint: rgba(255, 178, 90, 0.2);
--game-accent: rgba(136, 170, 255, 0.16);
}
.game-picker-btn[data-game='minefield'] {
--game-tint: rgba(197, 207, 225, 0.18);
--game-accent: rgba(102, 122, 155, 0.18);
}
.game-picker-btn[data-game='simon'] {
--game-tint: rgba(179, 138, 255, 0.18);
--game-accent: rgba(86, 146, 255, 0.18);
}
.game-picker-btn[data-game='whack'] {
--game-tint: rgba(255, 120, 130, 0.18);
--game-accent: rgba(255, 188, 120, 0.16);
}
.game-picker-btn[data-game='retrodoom'] {
--game-tint: rgba(225, 98, 84, 0.2);
--game-accent: rgba(103, 153, 226, 0.18);
}
.game-picker-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 36%);
opacity: 0.45;
pointer-events: none;
}
.back-btn {
border-color: var(--accent-border);
background: var(--accent-soft);
color: var(--accent-strong);
}
.game-toolbar-actions .home-button {
min-width: 138px;
max-width: 100%;
min-height: 46px;
height: auto;
border-radius: 15px;
font-size: 0.86rem;
letter-spacing: 0.05em;
white-space: normal;
text-align: center;
line-height: 1.2;
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.game-toolbar-actions .home-button:hover {
transform: translateY(-1px);
}
.game-toolbar-actions .home-button:focus-visible,
.game-picker-btn:focus-visible {
outline: 2px solid var(--accent-border);
outline-offset: 2px;
}
.game-toolbar-actions .back-btn {
margin-left: auto;
border-color: var(--accent-border);
background: var(--accent-soft);
box-shadow: none;
}
.game-toolbar-actions .fullscreen-btn {
border-color: var(--border-strong);
background: var(--surface-hover);
color: var(--text);
}
.game-toolbar-actions .restart-btn {
border-color: color-mix(in srgb, var(--warn) 45%, var(--border-strong));
background: color-mix(in srgb, var(--warn) 14%, var(--surface));
color: var(--text);
}
.game-toolbar-actions .restart-btn:disabled {
opacity: 0.62;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.game-picker-label {
line-height: 1.15;
font-size: 1.08rem;
font-weight: 800;
letter-spacing: 0.045em;
text-transform: none;
color: var(--text);
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.game-picker-copy {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
min-width: 0;
flex: 1 1 auto;
position: relative;
z-index: 1;
white-space: normal;
}
.game-picker-kicker {
display: inline-flex;
align-items: center;
padding: 3px 7px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent-strong);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.game-picker-meta {
display: block;
color: var(--text-muted);
font-size: 0.73rem;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.22;
max-width: 24ch;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Pixel art, so `pixelated`: these are 448px scenes covering a ~227px card and
any smooth filter would resample the hard edges into mush. */
.game-picker-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
image-rendering: pixelated;
border: 0;
margin: 0;
box-shadow: none;
transition: transform 0.28s var(--ease, ease);
}
/* Guaranteed legibility: the art is darkened toward the lower-left when it is
generated, but a bright stack of tetrominoes or a row of lit Simon pads can
still land under the title. This gradient is what the copy actually reads
against - baked-in shading alone was not enough. ::after is already spoken
for by the accent bar, so the scrim rides ::before. */
.game-picker-btn:not(.game-picker-btn-hero)::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(8, 11, 17, 0) 0%,
rgba(8, 11, 17, 0.32) 40%,
rgba(8, 11, 17, 0.82) 72%,
rgba(8, 11, 17, 0.94) 100%);
pointer-events: none;
z-index: 0;
}
/* copy sits over the art's darkened lower-left corner */
.game-picker-btn:not(.game-picker-btn-hero) .game-picker-copy {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 12px 14px 13px;
gap: 5px;
}
.game-picker-btn:not(.game-picker-btn-hero):hover .game-picker-art {
transform: scale(1.03);
}
.game-picker-btn:hover {
transform: translateY(-2px);
border-color: rgba(174,185,199,.34);
box-shadow: none;
filter: none;
}
.game-picker-btn:not(.game-picker-btn-hero):hover {
transform: translateY(-2px);
border-color: rgba(200,210,220,.32);
background: #192028;
box-shadow: none;
filter: none;
}
.game-picker-btn:hover .game-picker-art {
box-shadow: inset 0 0 0 1px rgba(10, 18, 33, 0.34), 0 8px 16px rgba(8, 14, 26, 0.34);
}
.game-picker-btn.featured .game-picker-art {
width: 42px;
height: 42px;
flex-basis: 42px;
border-radius: 12px;
}
.game-picker-btn.featured .game-picker-label {
color: #f5ead2;
font-size: 1rem;
}
.game-picker-btn.featured .game-picker-kicker {
background: rgba(216, 189, 132, 0.16);
color: #f0dcb0;
}
.game-picker-btn.active {
border-color: rgba(145, 188, 255, 0.66);
background:
linear-gradient(180deg, rgba(64, 86, 146, 0.96), rgba(36, 52, 98, 0.96)),
radial-gradient(circle at top left, rgba(145, 188, 255, 0.24), transparent 55%);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 30px rgba(18, 32, 64, 0.34), 0 0 0 1px rgba(123, 178, 255, 0.28);
}
.game-picker-btn:not(.game-picker-btn-hero).active {
background:
linear-gradient(165deg, rgba(70, 100, 166, 0.96), rgba(34, 51, 92, 0.98)),
radial-gradient(circle at top left, rgba(145, 188, 255, 0.32), transparent 58%);
border-color: rgba(167, 205, 255, 0.8);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(98, 162, 255, 0.36),
0 22px 36px rgba(14, 33, 70, 0.48),
0 0 0 1px rgba(130, 186, 255, 0.3);
}
.game-picker-btn:not(.game-picker-btn-hero).active .game-picker-kicker {
background: rgba(182, 214, 255, 0.24);
color: #e6f4ff;
}
.game-picker-btn.active .game-picker-art {
transform: scale(1.05);
}
.game-picker-btn.featured {
min-height: 88px;
border-color: rgba(212, 178, 114, 0.42);
background:
linear-gradient(180deg, rgba(72, 58, 34, 0.9), rgba(38, 32, 20, 0.9)),
radial-gradient(circle at top left, rgba(230, 191, 122, 0.18), transparent 52%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 30px rgba(16, 16, 24, 0.24);
}
.game-picker-btn.featured:hover,
.game-picker-btn.featured.active {
border-color: rgba(229, 196, 132, 0.62);
box-shadow: inset 0 1px 0 rgba(255, 244, 219, 0.12), 0 16px 30px rgba(34, 24, 12, 0.36), 0 0 0 1px rgba(224, 183, 111, 0.24);
}
.game-picker-btn:active {
transform: translateY(0);
}
.game-panel {
display: none;
}
.game-panel.active {
display: block;
}
body.gameplay-active-mode .games-main {
padding-top: 6px;
padding-bottom: 0;
}
body.gameplay-active-mode .games-shell {
max-width: min(1500px, calc(100vw - 18px));
gap: 10px;
grid-template-rows: auto minmax(0, 1fr);
margin-bottom: 0;
}
body.gameplay-active-mode .games-card {
padding: 12px;
box-shadow: none;
}
body.gameplay-active-mode .games-toolbar {
align-items: center;
gap: 10px;
}
body.gameplay-active-mode .games-toolbar-copy {
display: none;
}
body.gameplay-active-mode .game-panel.active {
display: grid;
gap: 10px;
align-content: start;
min-height: 0;
border-color: rgba(132, 182, 255, 0.36);
box-shadow: inset 0 0 0 1px rgba(130, 189, 255, 0.09);
}
body.gameplay-active-mode .game-panel.active > .games-title {
display: none;
}
body.gameplay-active-mode .game-panel.active .control-hint {
margin-top: 2px;
padding: 8px 10px;
font-size: 0.78rem;
line-height: 1.3;
}
body.gameplay-active-mode #retroDoomPanel.active {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
body.gameplay-active-mode #retroDoomPanel.active .control-hint {
margin-top: 0;
}
body.gameplay-active-mode #retroDoomPanel.active .retro-doom-embed-wrap {
margin-top: 0;
padding: 0;
}
body.gameplay-active-mode .tetris-board-wrap,
body.gameplay-active-mode .snake-wrap,
body.gameplay-active-mode .pong-wrap,
body.gameplay-active-mode .breakout-wrap,
body.gameplay-active-mode .dash-wrap,
body.gameplay-active-mode .memory-grid-wrap,
body.gameplay-active-mode .minefield-grid-wrap,
body.gameplay-active-mode .simon-wrap,
body.gameplay-active-mode .whack-grid-wrap {
margin-top: 8px;
padding: 10px;
}
body.gameplay-active-mode #tetrisBoard {
width: auto;
max-width: 100%;
height: min(76vh, calc(100dvh - 230px));
max-height: min(76vh, calc(100dvh - 230px));
}
body.gameplay-active-mode #snakeBoard {
width: min(100%, 900px);
max-height: min(76vh, calc(100dvh - 230px));
}
body.gameplay-active-mode #pongBoard,
body.gameplay-active-mode #breakoutBoard,
body.gameplay-active-mode #dashBoard {
width: min(100%, 1260px);
max-height: min(76vh, calc(100dvh - 230px));
height: auto;
}
.games-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: none;
padding: 18px;
}
.tetris-board-wrap {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, rgba(16, 22, 34, 0.96), rgba(10, 14, 24, 0.96));
border: 1px solid rgba(167, 188, 255, 0.22);
border-radius: 16px;
padding: 12px;
}
#tetrisPanel .games-title,
#tetrisPanel .control-hint {
grid-column: 1 / -1;
}
#tetrisPanel .tetris-board-wrap {
grid-column: 1;
grid-row: 3 / span 2;
margin-top: 0;
}
#tetrisBoard {
max-width: 100%;
border-radius: 8px;
background: #0a0f1a;
box-shadow: inset 0 0 0 1px rgba(130, 152, 200, 0.2);
image-rendering: pixelated;
display: block;
}
/* Next is a chip in the game bar, sized here because this id rule outranks any
class selector that tried to shrink it from 120px. */
#nextCanvas {
display: block;
width: 32px;
height: 32px;
margin: 0;
background: var(--bg);
border-radius: var(--r-sm);
border: 1px solid var(--border);
image-rendering: pixelated;
}
#gameStatus {
margin: 4px 0 0;
color: #d9e7ff;
min-height: 40px;
line-height: 1.35;
font-size: 0.88rem;
}
.controls-note {
margin: 0;
color: var(--text-muted);
font-size: 0.85rem;
line-height: 1.5;
}
.control-hint {
margin: 10px 0 0;
padding: 10px 12px;
border: 1px solid rgba(167, 188, 255, 0.25);
border-radius: 12px;
background: rgba(255, 255, 255, 0.02);
color: #d8e5ff;
font-size: 0.82rem;
line-height: 1.35;
}
.snake-wrap {
margin-top: 14px;
border: 1px solid rgba(167, 188, 255, 0.22);
border-radius: 16px;
background: linear-gradient(180deg, rgba(16, 22, 34, 0.96), rgba(10, 14, 24, 0.96));
padding: 12px;
display: flex;
justify-content: center;
align-items: center;
}
#snakeBoard {
width: clamp(300px, 56vw, 620px);
height: auto;
max-height: 70vh;
display: block;
background: #0a0f1a;
border: 1px solid rgba(130, 152, 200, 0.2);
border-radius: 10px;
image-rendering: pixelated;
}
.pong-wrap,
.breakout-wrap,
.dash-wrap {
margin-top: 14px;
border: 1px solid rgba(167, 188, 255, 0.22);
border-radius: 16px;
background: linear-gradient(180deg, rgba(16, 22, 34, 0.96), rgba(10, 14, 24, 0.96));
padding: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.rpg-embed-wrap {
position: relative;
margin-top: 14px;
border: 1px solid rgba(187, 161, 114, 0.28);
border-radius: 18px;
background: linear-gradient(180deg, rgba(22, 20, 18, 0.98), rgba(8, 10, 16, 0.98));
padding: 0;
box-shadow: inset 0 0 0 1px rgba(255, 223, 170, 0.04);
overflow: hidden;
}
.retro-doom-embed-wrap {
position: relative;
margin-top: 14px;
border: 1px solid rgba(157, 181, 227, 0.28);
border-radius: 18px;
background: linear-gradient(180deg, rgba(13, 18, 30, 0.98), rgba(8, 10, 16, 0.99));
padding: 0;
box-shadow: inset 0 0 0 1px rgba(197, 215, 255, 0.06);
overflow: hidden;
}
#retroDoomFrame {
width: 100%;
height: min(78vh, calc(100vh - 260px));
border: 0;
display: block;
background: #070b12;
}
#retroDoomPanel.active #retroDoomFrame {
height: min(78vh, calc(100dvh - 260px));
min-height: 430px;
}
.rpg-theater-exit {
min-width: 170px;
}
.rpg-theater-exit-trigger {
display: none;
}
.retrodoom-theater-exit {
display: none;
min-width: 170px;
position: fixed;
top: 10px;
left: 50%;
z-index: 36;
}
.retrodoom-theater-exit-trigger {
display: none;
}
#rpgFrame {
width: 100%;
height: min(82vh, calc(100vh - 190px));
border: 0;
border-radius: 12px;
display: block;
background: #080b10;
}
#rpgPanel {
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
#rpgPanel.active {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
align-items: stretch;
gap: 12px;
min-height: min(900px, calc(100dvh - 210px));
}
#rpgPanel.active .rpg-embed-wrap {
margin-top: 0;
min-height: 0;
height: 100%;
display: flex;
justify-content: center;
}
#rpgPanel.active #rpgFrame {
height: 100%;
min-height: 260px;
max-height: calc(100dvh - 250px);
}
body.rpg-active-mode .games-main {
min-height: 0;
overflow: hidden;
padding-top: 4px;
padding-bottom: 0;
}
html.rpg-active-mode,
body.rpg-active-mode {
height: 100dvh;
overflow-x: clip;
overflow-y: auto;
}
body.rpg-active-mode .main {
min-height: 0;
overflow: clip;
}
body.rpg-active-mode .page {
height: 100dvh;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
margin: 0 auto;
}
body.rpg-active-mode .games-shell {
height: 100%;
margin-bottom: 0;
max-width: min(1320px, calc(100vw - 22px));
gap: 8px;
grid-template-rows: auto minmax(0, 1fr);
}
body.rpg-active-mode .games-card {
min-height: 0;
padding: 14px;
box-shadow: none;
}
body.rpg-active-mode .games-toolbar {
gap: 8px;
}
body.rpg-active-mode #rpgPanel.active {
min-height: 0;
height: 100%;
gap: 8px;
}
body.rpg-active-mode #rpgPanel .control-hint {
margin-top: 4px;
padding: 8px 10px;
}
body.rpg-active-mode #rpgPanel.active #rpgFrame {
max-height: none;
min-height: 0;
}
#rpgPanel.rpg-theater-mode {
max-width: none;
}
#rpgPanel.active.rpg-theater-mode {
position: fixed;
inset: 0;
width: auto;
max-width: none;
margin: 0;
min-height: 0;
gap: 0;
z-index: 30;
border-radius: 0;
border: 0;
padding: 0;
background: #070b12;
display: grid;
grid-template-rows: minmax(0, 1fr);
}
#rpgPanel.active.rpg-theater-mode .games-title,
#rpgPanel.active.rpg-theater-mode .control-hint {
display: none;
}
#rpgPanel.active.rpg-theater-mode .rpg-embed-wrap {
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
height: 100%;
}
#rpgPanel.active.rpg-theater-mode #rpgFrame {
min-height: 0;
height: 100%;
border-radius: 0;
}
#rpgPanel.active.rpg-theater-mode .rpg-theater-exit-trigger {
display: block;
position: fixed;
top: 0;
left: 50%;
width: 220px;
height: 52px;
transform: translateX(-50%);
z-index: 35;
background: transparent;
}
#rpgPanel.active.rpg-theater-mode .rpg-theater-exit {
display: inline-flex;
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(-18px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
#rpgPanel.active.rpg-theater-mode .rpg-theater-exit-trigger:hover + .rpg-theater-exit,
#rpgPanel.active.rpg-theater-mode .rpg-theater-exit:hover,
#rpgPanel.active.rpg-theater-mode .rpg-theater-exit:focus-visible {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
body.rpg-active-mode.rpg-theater-mode #rpgFullscreenBtn {
display: none;
}
body.rpg-active-mode.rpg-theater-mode > .page {
margin: 0;
padding: 0;
height: 100dvh;
}
body.rpg-active-mode.rpg-theater-mode > .page > header,
body.rpg-active-mode.rpg-theater-mode > .page > .site-footer,
body.rpg-active-mode.rpg-theater-mode .games-shell > section:first-child {
display: none;
}
body.rpg-active-mode.rpg-theater-mode .games-main,
body.rpg-active-mode.rpg-theater-mode .main,
body.rpg-active-mode.rpg-theater-mode .games-shell {
overflow: visible;
margin: 0;
padding: 0;
max-width: none;
height: 100dvh;
}
#retroDoomPanel.active.retrodoom-theater-mode {
position: fixed;
inset: 0;
border-radius: 0;
border: 0;
padding: 0;
background: #070b12;
display: grid;
grid-template-rows: minmax(0, 1fr);
gap: 0;
z-index: 30;
}
#retroDoomPanel.active.retrodoom-theater-mode .games-title,
#retroDoomPanel.active.retrodoom-theater-mode .control-hint {
display: none;
}
#retroDoomPanel.active.retrodoom-theater-mode .retro-doom-embed-wrap {
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
height: 100%;
width: 100%;
}
#retroDoomPanel.active.retrodoom-theater-mode #retroDoomFrame {
min-height: 0;
height: 100%;
width: 100%;
border-radius: 0;
}
#retroDoomPanel.active.retrodoom-theater-mode .retrodoom-theater-exit-trigger {
display: block;
position: fixed;
top: 0;
left: 50%;
width: 220px;
height: 52px;
transform: translateX(-50%);
z-index: 35;
background: transparent;
}
#retroDoomPanel.active.retrodoom-theater-mode .retrodoom-theater-exit {
display: inline-flex;
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(-18px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
#retroDoomPanel.active.retrodoom-theater-mode .retrodoom-theater-exit-trigger:hover + .retrodoom-theater-exit,
#retroDoomPanel.active.retrodoom-theater-mode .retrodoom-theater-exit:hover,
#retroDoomPanel.active.retrodoom-theater-mode .retrodoom-theater-exit:focus-visible {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
body.retrodoom-active-mode.retrodoom-theater-mode #rpgFullscreenBtn {
display: none;
}
body.retrodoom-active-mode.retrodoom-theater-mode > .page {
margin: 0;
padding: 0;
height: 100dvh;
}
body.retrodoom-active-mode.retrodoom-theater-mode > .page > header,
body.retrodoom-active-mode.retrodoom-theater-mode > .page > .site-footer,
body.retrodoom-active-mode.retrodoom-theater-mode .games-shell > section:first-child {
display: none;
}
body.retrodoom-active-mode.retrodoom-theater-mode .games-main,
body.retrodoom-active-mode.retrodoom-theater-mode .main,
body.retrodoom-active-mode.retrodoom-theater-mode .games-shell {
overflow: visible;
margin: 0;
padding: 0;
max-width: none;
height: 100dvh;
}
#rpgPanel .games-title,
#rpgPanel .control-hint {
margin-top: 0;
}
body.rpg-active-mode #rpgPanel .games-title {
display: none;
}
/* The two featured worlds sit in one full-width row, split evenly. They used to
be full-bleed one above the other, which read as a queue rather than a
choice. The wrapper owns the span so the hero itself no longer has to know
how many columns the auto-fill grid happens to have resolved to. */
.game-picker-heroes {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-items: stretch;
}
.game-picker-btn-hero {
min-height: 200px;
height: 268px;
padding: 0;
align-items: stretch;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
background: transparent;
}
.game-picker-btn-hero .game-picker-banner {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
filter: saturate(0.98) contrast(1.02);
}
.game-picker-btn-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(8, 10, 16, 0.08), rgba(8, 10, 16, 0.34) 68%, rgba(8, 10, 16, 0.76));
pointer-events: none;
}
.game-picker-btn-hero .game-picker-copy {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 100%;
padding: 14px 16px 16px;
gap: 6px;
background: linear-gradient(180deg, rgba(18, 20, 18, 0.12), rgba(10, 12, 12, 0.6));
backdrop-filter: blur(1px);
}
/* Kicker tint is the one per-game part of the hero treatment: the layout is
shared, the colour belongs to whichever world the banner is showing. */
.game-picker-btn-hero[data-game='rpg'] .game-picker-kicker {
background: rgba(35, 46, 31, 0.78);
color: #dce7c9;
}
/* Dreadkeep's own HUD palette: soot plate, brass lettering. */
.game-picker-btn-hero[data-game='retrodoom'] .game-picker-kicker {
background: rgba(28, 18, 12, 0.82);
color: #d9a54f;
}
.game-picker-btn-hero .game-picker-label {
font-size: 1.06rem;
line-height: 1.15;
text-wrap: balance;
}
.game-picker-btn-hero:hover .game-picker-banner {
transform: scale(1.02);
}
/* Tetris and Snake were left out of this cap, so they alone ran the full
1480px shell -- switching games visibly jumped the panel width. */
#tetrisPanel,
#snakePanel,
#pongPanel,
#breakoutPanel,
#dashPanel,
#memoryPanel,
#minefieldPanel,
#simonPanel,
#whackPanel {
max-width: 1080px;
width: 100%;
margin: 0 auto;
}
/* ---------- board-first game layout ----------
One shape for all nine: a slim bar (name, readouts, controls toggle), then
the board with the rest of the space, then the status line. This replaces
about nine sets of hand-placed per-game `grid-column` rules, and stops a
game that measures one number carrying the same 320px rail as one that
measures four. */
#tetrisPanel.active,
#snakePanel.active,
#pongPanel.active,
#breakoutPanel.active,
#dashPanel.active,
#memoryPanel.active,
#minefieldPanel.active,
#simonPanel.active,
#whackPanel.active {
display: flex;
flex-direction: column;
gap: 10px;
}
#pongPanel .games-title,
#pongPanel .control-hint,
#breakoutPanel .games-title,
#breakoutPanel .control-hint,
#dashPanel .games-title,
#dashPanel .control-hint,
#memoryPanel .games-title,
#memoryPanel .control-hint,
#minefieldPanel .games-title,
#minefieldPanel .control-hint,
#simonPanel .games-title,
#simonPanel .control-hint,
#whackPanel .games-title,
#whackPanel .control-hint {
margin-top: 0;
}
#pongPanel .pong-wrap,
#breakoutPanel .breakout-wrap,
#dashPanel .dash-wrap {
max-width: 980px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.memory-grid-wrap,
.minefield-grid-wrap,
.simon-wrap,
.whack-grid-wrap {
max-width: 720px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.memory-grid {
max-width: 560px;
margin: 0 auto;
}
.minefield-grid {
max-width: 560px;
margin: 0 auto;
}
.simon-grid {
max-width: 460px;
margin: 14px auto 0;
}
.whack-grid {
max-width: 520px;
margin: 0 auto;
}
.minefield-controls {
max-width: 720px;
width: 100%;
margin: 14px auto 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.minefield-control {
display: grid;
gap: 8px;
color: #dce8ff;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.minefield-control select,
.minefield-control input {
width: 100%;
}
.minefield-control select {
height: 42px;
border-radius: 12px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.04);
color: #eef4ff;
font: inherit;
font-size: 0.92rem;
font-weight: 600;
padding: 0 12px;
text-transform: none;
letter-spacing: normal;
}
.minefield-slider-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
}
.minefield-slider-row output {
min-width: 64px;
text-align: right;
color: var(--accent);
font-size: 0.84rem;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
}
.memory-card,
.minefield-cell,
.whack-cell,
.simon-pad {
min-height: 0;
}
.minefield-cell {
border-radius: 10px;
font-size: 0.9rem;
}
.whack-cell {
min-height: 110px;
font-size: 1rem;
letter-spacing: 0.08em;
}
.simon-pad {
min-height: 140px;
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#pongBoard,
#breakoutBoard,
#dashBoard {
width: 100%;
max-width: 920px;
height: auto;
border-radius: 10px;
background: #0a0f1a;
border: 1px solid rgba(130, 152, 200, 0.2);
image-rendering: pixelated;
display: block;
}
#pongStatus,
#breakoutStatus,
#dashStatus,
#memoryStatus,
#minefieldStatus,
#simonStatus,
#whackStatus {
margin: 10px 0 0;
color: #d9e7ff;
min-height: 22px;
font-size: 0.86rem;
}
.memory-grid,
.minefield-grid,
.whack-grid {
display: grid;
gap: 10px;
margin-top: 14px;
}
.memory-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.minefield-grid {
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 6px;
}
.whack-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.memory-card,
.minefield-cell,
.whack-cell,
.simon-pad {
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
color: #eef4ff;
font: inherit;
cursor: pointer;
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.memory-card {
position: relative;
aspect-ratio: 5 / 6;
display: grid;
place-items: center;
min-height: 104px;
padding: 0;
overflow: hidden;
background:
linear-gradient(180deg, rgba(28, 40, 60, 0.96), rgba(13, 20, 33, 0.98)),
radial-gradient(circle at 20% 18%, rgba(113, 210, 255, 0.16), transparent 38%),
radial-gradient(circle at 82% 84%, rgba(224, 183, 111, 0.12), transparent 34%);
border-color: rgba(147, 180, 232, 0.24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 24px rgba(4, 9, 18, 0.28);
font-size: clamp(1.55rem, 2vw, 2rem);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #eef6ff;
isolation: isolate;
}
.memory-card::before {
content: '?';
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: rgba(226, 239, 255, 0.78);
font-size: clamp(1.35rem, 1.8vw, 1.7rem);
font-weight: 900;
letter-spacing: 0.2em;
z-index: 1;
}
.memory-card::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 32%),
repeating-linear-gradient(135deg, rgba(123, 178, 255, 0.09) 0 8px, rgba(10, 16, 28, 0) 8px 16px);
opacity: 0.9;
z-index: 0;
pointer-events: none;
}
.memory-card:hover {
transform: translateY(-2px);
border-color: rgba(150, 214, 255, 0.42);
}
.memory-card:active {
transform: translateY(0);
}
.memory-card.revealed,
.memory-card.matched {
color: #08111d;
text-shadow: none;
transform: translateY(-2px);
}
.memory-card.revealed::before,
.memory-card.revealed::after,
.memory-card.matched::before,
.memory-card.matched::after {
opacity: 0;
}
.memory-card.revealed {
background:
linear-gradient(180deg, rgba(218, 241, 255, 0.98), rgba(178, 225, 255, 0.96)),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 50%);
border-color: rgba(113, 210, 255, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 28px rgba(8, 18, 34, 0.22);
}
.memory-card.matched {
background:
linear-gradient(180deg, rgba(220, 255, 212, 0.98), rgba(173, 238, 168, 0.96)),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.76), transparent 48%);
border-color: rgba(140, 241, 138, 0.42);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 14px 28px rgba(12, 28, 16, 0.2);
color: #102313;
}
.memory-card:disabled {
cursor: default;
}
#memoryPanel.active #memoryStatus {
margin-top: 0;
padding: 12px 14px;
border: 1px solid rgba(150, 214, 255, 0.18);
border-radius: 14px;
background: linear-gradient(180deg, rgba(18, 27, 39, 0.88), rgba(11, 17, 28, 0.9));
color: #e1edff;
min-height: 52px;
display: flex;
align-items: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.minefield-grid-wrap,
.memory-grid-wrap,
.whack-grid-wrap,
.simon-wrap {
margin-top: 14px;
border: 1px solid rgba(167, 188, 255, 0.22);
border-radius: 16px;
background: linear-gradient(180deg, rgba(16, 22, 34, 0.96), rgba(10, 14, 24, 0.96));
padding: 14px;
}
.minefield-cell,
.whack-cell {
aspect-ratio: 1;
display: grid;
place-items: center;
font-weight: 800;
font-size: 0.96rem;
padding: 0;
}
.minefield-cell.revealed {
background: rgba(255, 255, 255, 0.1);
}
.minefield-cell.mine {
background: rgba(255, 122, 122, 0.18);
border-color: rgba(255, 122, 122, 0.38);
}
@media (max-width: 720px) {
.minefield-controls,
.minefield-stats {
grid-template-columns: 1fr 1fr;
}
}
.simon-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.simon-pad {
min-height: 110px;
}
.simon-pad[data-pad="0"] { background: rgba(255, 138, 115, 0.16); }
.simon-pad[data-pad="1"] { background: rgba(255, 209, 102, 0.16); }
.simon-pad[data-pad="2"] { background: rgba(140, 241, 138, 0.16); }
.simon-pad[data-pad="3"] { background: rgba(113, 210, 255, 0.16); }
.simon-pad.active { transform: scale(0.98); filter: brightness(1.25); }
.whack-cell.active {
background: rgba(255, 140, 108, 0.22);
border-color: rgba(255, 140, 108, 0.44);
}
#snakeStatus {
margin: 10px 0 0;
color: #d9e7ff;
min-height: 22px;
font-size: 0.86rem;
}
.rules-list {
margin: 0;
padding-left: 18px;
color: #dbe7fb;
}
.rules-list li {
margin-bottom: 6px;
}
@media (max-width: 1100px) {
.game-picker {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
#tetrisPanel.active {
display: block;
}
}
@media (max-width: 620px) {
.games-toolbar-copy {
min-width: 0;
width: 100%;
padding: 14px;
}
.games-sublead {
max-width: none;
}
body.gameplay-active-mode .game-panel.active {
min-height: 0;
}
body.gameplay-active-mode .game-panel.active .control-hint {
font-size: 0.74rem;
}
.game-picker {
grid-template-columns: 1fr;
}
.game-picker-btn:not(.game-picker-btn-hero) {
min-height: 0;
padding: 14px 12px;
}
.game-picker-label {
font-size: 0.92rem;
}
.game-picker-meta {
font-size: 0.66rem;
}
.game-toolbar-actions.visible {
width: 100%;
justify-content: stretch;
}
.game-toolbar-actions.visible .home-button {
flex: 1 1 0;
}
.game-toolbar-hint {
width: 100%;
max-width: none;
}
.game-toolbar-hint-title {
font-size: 1rem;
}
.game-toolbar-hint-meta {
font-size: 0.76rem;
}
#tetrisBoard,
#snakeBoard,
#pongBoard,
#breakoutBoard,
#dashBoard {
width: min(100%, 92vw);
}
body.rpg-active-mode #rpgFrame {
width: 100%;
}
.memory-grid,
.whack-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.minefield-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.simon-grid {
grid-template-columns: 1fr;
}
.simon-pad,
.whack-cell {
min-height: 96px;
}
#tetrisBoard {
width: auto;
height: min(56vh, calc(100vh - 250px));
max-width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.games-page .game-picker-btn:hover,
.games-page .game-picker-btn[aria-selected='true'] { transform: none; }
}
/* Keep the games layout physically stable; only its surface styling may change. */
.games-page .games-card,
.games-page .games-card:hover,
.games-page .game-panel,
.games-page .game-panel:hover,
.games-page .game-picker-btn,
.games-page .game-picker-btn:hover,
.games-page .game-picker-btn[aria-selected='true'] {
transform: none !important;
}
.games-page .memory-card:hover,
.games-page .memory-card.is-flipped:hover,
.games-page .memory-card.is-matched:hover {
transform: none !important;
}
/* ---------- Annunciator reconciliation ----------
Brings the arcade chrome onto the shared instrument language: machined edges,
flat panel faces, recessed data wells, etched legends. No lift-on-hover — panels
are bolted to the chassis, so hover lights an edge instead of floating the card. */
.games-page .games-card,
.games-page .game-panel,
.games-page .games-toolbar-copy,
.games-page .welcome-inner,
.games-page .game-picker-btn {
border-radius: var(--r-lg);
border-color: var(--border);
background: var(--surface);
box-shadow: var(--bezel), var(--shadow-sm);
}
.games-page .game-picker-btn {
min-height: 102px;
transition: border-color 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
/* drop the glassy diagonal sheen — panels are matte, not glazed */
.games-page .game-picker-btn::before { display: none; }
/* the picker's coloured tint survives as a left edge marker, not a wash.
The RPG tile is excluded: its ::after is the scrim that keeps the label
legible over the banner photo, and must not be replaced. */
.games-page .game-picker-btn:not(.game-picker-btn-hero)::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
right: auto;
width: 3px;
height: auto;
background: var(--accent);
opacity: 0.35;
transition: opacity 0.16s ease;
z-index: 1;
}
.games-page .game-picker-btn:hover,
.games-page .game-picker-btn:not(.game-picker-btn-hero):hover {
transform: none;
border-color: var(--border-strong);
background: var(--surface-hover);
box-shadow: var(--bezel), var(--shadow-sm);
filter: none;
}
.games-page .game-picker-btn:not(.game-picker-btn-hero):hover::after { opacity: 0.8; }
.games-page .game-picker-btn[aria-pressed='true'],
.games-page .game-picker-btn.active {
border-color: var(--accent-border);
background: var(--surface-raised);
}
.games-page .game-picker-btn:not(.game-picker-btn-hero)[aria-pressed='true']::after,
.games-page .game-picker-btn:not(.game-picker-btn-hero).active::after {
opacity: 1;
box-shadow: 0 0 10px var(--accent-glow);
}
.games-page .game-toolbar-actions .home-button { border-radius: var(--r-md); }
.games-page .game-toolbar-actions .home-button:hover { transform: none; }
/* kickers read as etched legends, not pills */
.games-page .game-picker-kicker,
.games-page .game-toolbar-hint-kicker {
border-radius: var(--r-sm);
font-family: var(--font-legend);
letter-spacing: 0.16em;
font-weight: 700;
box-shadow: none;
}
/* The kicker sits on the tile art, so a 12%-opacity wash is only a background
where the art behind it happens to be dark. On Breakout's yellow bricks and
Pong's white paddle the amber label all but vanished. An opaque plate reads
the same on every tile. */
.games-page .game-picker-kicker {
background: rgba(8, 11, 16, 0.86);
border: 1px solid var(--accent-border);
color: var(--accent-strong);
}
.games-page .game-picker-btn.featured .game-picker-kicker {
border-color: rgba(216, 189, 132, 0.5);
color: #f0dcb0;
}
.games-page .game-toolbar-hint {
border-radius: var(--r-lg);
background: var(--surface);
border-color: var(--border);
}
.games-page .game-picker-art { border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
.games-page .game-picker-label { font-family: var(--font-legend); letter-spacing: 0.04em; }
/* scoreboards are instrument readouts: recessed wells, mono tabular figures */
.games-page .stat {
border-radius: var(--r-sm);
background: var(--well);
border-color: var(--border);
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}
/* game panel titles: sized explicitly rather than left to element defaults. Every
panel title is an h2 now — Tetris used to carry the page's only h1, which made
the document title read "Tetris" whatever game was on screen. */
.games-page .games-title {
font-family: var(--font-legend);
font-size: 1.4rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0.01em;
text-transform: none;
color: var(--text);
margin: 0 0 6px;
text-shadow: none;
}
/* the side rails ("Next", "Status") stay etched legends */
.games-page .games-side-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--text-muted);
margin: 0 0 10px;
}
/* Two heroes side by side stop being readable once each is narrower than about a
phone screen; below that they stack and each gets the full width back. */
@media (max-width: 720px) {
.game-picker-heroes { grid-template-columns: 1fr; }
}
/* The only native form controls in the games are Minefield's difficulty select and
board-size slider, and both were rendering with OS chrome -- a system dropdown
arrow and the browser's default blue thumb -- against an interface that styles
everything else itself. */
.games-page .minefield-controls select,
.games-page #minefieldPanel select {
appearance: none;
-webkit-appearance: none;
padding: 8px 30px 8px 11px;
border-radius: var(--r-sm);
background-color: var(--well);
background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
border: 1px solid var(--border);
color: var(--text);
font-family: var(--font-mono);
font-size: 0.78rem;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}
.games-page #minefieldPanel select:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.games-page #minefieldPanel input[type='range'] {
accent-color: var(--accent);
}
/* ---------- the game bar ----------
Name on the left, the readings this particular game actually has on the right,
and the controls folded away behind a toggle. A hint that is only read once
should not hold a permanent block of the screen. */
.game-bar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding: 9px 12px;
border-radius: var(--r-md);
background: var(--well);
border: 1px solid var(--border);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}
.game-bar .games-title { margin: 0; flex: 0 0 auto; font-size: 1.15rem; }
.game-readouts {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 4px 20px;
min-width: 0;
}
.readout { display: inline-flex; align-items: baseline; gap: 7px; }
.readout-label {
font-family: var(--font-legend);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-faint);
white-space: nowrap;
}
.readout-value {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 1rem;
font-weight: 700;
color: var(--accent-strong);
}
/* Next is a picture rather than a figure, so it centres on the row instead of
sitting on the numerals' baseline */
.readout-next { align-items: center; }
.game-help { flex: 0 0 auto; height: 30px; padding: 0 12px; font-size: 11px; margin: 0; }
.game-help[aria-expanded='true'] { border-color: var(--accent-border); color: var(--accent-strong); }
.game-help-panel { display: grid; gap: 10px; }
.game-help-panel[hidden] { display: none; }
/* the board gets whatever the bar and status line do not */
.game-stage {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
min-height: 0;
}
/* The board wrappers measure themselves with clientWidth to size their canvas, so
they have to span the stage rather than shrink to their own content -- otherwise
the canvas sizes itself from a box that is only as wide as the canvas. */
.game-stage > * {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.game-status {
margin: 0;
padding: 2px 0;
text-align: center;
font-size: 0.8rem;
line-height: 1.4;
color: var(--text-muted);
min-height: 1.4em;
}
/* Minefield's difficulty and board size are setup, not readings, so they sit with
the controls rather than among the live counters. */
.games-page .minefield-controls {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-end;
margin: 0;
}
.games-page .minefield-control { display: grid; gap: 6px; }
.games-page .minefield-control > span {
font-family: var(--font-legend);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-faint);
}