/* Cache Only: the shared tokens and the one set of parts every page is built from.
Dark, monochrome, no accent colour: what stands out is solid white (--ink). A game whose
registry.json entry says light: true is light while Settings allows it (shared/theme.js,
:root[data-theme="light"] below), where the white turns black. The visual language is the
logo's rounded-square pixels: progress is pixels coming into focus, and glass with progressive
blur sits over art.
Every button, header, card, sheet and menu is defined here; a game's own stylesheet only
draws its board or arena.
Corner radii are concentric: an outer radius is the inner radius plus the inset between them.
Nothing is a pill or a circle: every button starts from the icon button's 8.
8 every button and control: icon buttons (their 9 x 9 pixel icon inset 7, plus its
pixels' own corner, 0.93), buttons, small buttons, number keys, side-menu rows, the segmented
control, the slider, the switch track, fields; and the rows and cards that sit beside them
4 a chip inset 4 inside a control: the selected segment and the slider's thumb (8 - 4)
5 the switch knob, inset 3 (8 - 3)
24 a sheet, holding its close button and buttons inset 16 (8 + 16)
18 a launcher game tile (8 art + 10), and the suggested game's panel (8 button + 10)
Pixels (the logo's and the icons') are rounded squares of their own: 34% of a pixel. */
:root {
color-scheme: dark;
--bg: #0b0b0b;
--card: #151515;
--raised: #1d1d1d;
--quiet: #4a4a4a;
--muted: #a8a8a8;
--ink: #efefef;
--on-ink: #0b0b0b;
--ink-press: #d6d6d6; /* a solid --ink button while pressed */
--red-soft: #f0a39d; /* the one coloured button, .btn-red */
--shade: 11, 11, 11; /* the background's channels, for shades that fade to it */
--shade-deep: 0, 0, 0; /* the side menu's darker shade */
/* Glass: a faint white fill, a hairline edge and a backdrop blur. */
--glass: rgba(255, 255, 255, 0.07);
--glass-press: rgba(255, 255, 255, 0.14);
--glass-line: rgba(255, 255, 255, 0.14);
--glass-line-strong: rgba(255, 255, 255, 0.22);
--hairline: rgba(255, 255, 255, 0.08);
--panel: rgba(24, 24, 24, 0.55); /* a notice laid over a board or arena */
--sheet: rgba(21, 21, 21, 0.4); /* a sheet is glass: it blurs what's behind, barely tinted (the suggested game's panel too) */
--blur: 20px;
--blur-panel: 24px;
--blur-sheet: 40px;
--scrim: rgba(0, 0, 0, 0.25); /* the page dimmed behind any open sheet */
--blur-scrim: 14px; /* and blurred too, behind a sheet opened with blur (a card up close) */
--r-btn: 8px;
--r-chip: 4px;
--r-sheet: 24px;
--r-game-tile: 18px;
--r-game-art: 8px;
--r-pixel: 34%;
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;
--tap: 44px;
/* The top safe area takes in the status bar's strip (Header, below): nothing goes under it but
backgrounds, as at the sides. */
--safe-t: max(env(safe-area-inset-top, 0px), var(--status-h));
--status-h: 0px; /* the status bar's strip: what a light along the top edge starts under */
--safe-r: env(safe-area-inset-right, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-l: env(safe-area-inset-left, 0px);
/* The header: an icon-button row right under the status bar. */
--bar-top: calc(max(var(--safe-t), 8px) + 8px);
--bar-total: calc(var(--bar-top) + 44px);
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--t-blur: 0.24s; /* blur in and blur out (Motion, below) */
--t-twinkle: 1.2s; /* the same, slowed down for the install page's pixel field */
--blur-fade: 8px;
/* A sheet coming and going (Sheets, below): in and out, and complete, from the very bottom. */
--t-sheet: 0.26s;
--t-sheet-out: 0.2s;
--t-sheet-full: 0.42s;
--t-sheet-full-out: 0.5s;
--ease-back: cubic-bezier(0.6, 0, 0.8, 0.3); /* --ease played backwards, a little sooner off */
}
/* Light: the same parts with the greys turned over, for a game that has a light mode while Settings
allows it (shared/theme.js sets data-theme). Glass turns to a faint dark fill, shades fade to the
light background, and the ink is black, so whatever is solid white is solid black. */
:root[data-theme="light"] {
color-scheme: light;
--bg: #efefef;
--card: #ffffff;
--raised: #e2e2e2;
--quiet: #c2c2c2;
--muted: #666666;
--ink: #121212;
--on-ink: #f7f7f7;
--ink-press: #3a3a3a;
--glass: rgba(0, 0, 0, 0.05);
--glass-press: rgba(0, 0, 0, 0.1);
--glass-line: rgba(0, 0, 0, 0.1);
--glass-line-strong: rgba(0, 0, 0, 0.16);
--hairline: rgba(0, 0, 0, 0.08);
--panel: rgba(247, 247, 247, 0.6);
--sheet: rgba(247, 247, 247, 0.55);
--scrim: rgba(0, 0, 0, 0.15);
--shade: 239, 239, 239;
--shade-deep: 239, 239, 239;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Feel like an app, not a web page: no pinch or double-tap zoom (scrolling still works;
game boards that need raw touches set touch-action: none), no text selection or long-press
callouts outside of fields, no rubber-banding. app.js blocks the zoom gestures iOS still allows. */
* {
touch-action: pan-x pan-y;
}
/* No scrollbar indicators anywhere: the page, the landscape strip, sheets and menus all still
scroll, without the bar. */
* {
scrollbar-width: none;
}
*::-webkit-scrollbar {
display: none;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
background: var(--bg);
overscroll-behavior: none;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
background: var(--bg);
color: var(--ink);
font: 400 15px/1.45 var(--font-sans);
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
overscroll-behavior: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
input,
textarea {
user-select: text;
-webkit-user-select: text;
-webkit-touch-callout: default;
/* The caret, and on iOS the selection's highlight and handles, in the ink (white, black on a
light page), not the system's blue. */
caret-color: var(--ink);
}
::selection {
background: color-mix(in srgb, var(--ink) 30%, transparent);
}
img,
svg,
a {
-webkit-user-drag: none;
}
[hidden] {
display: none !important;
}
h1, h2, h3, p, ol, ul, dl, dd {
margin: 0;
}
ol, ul {
padding: 0;
list-style: none;
}
button {
font: inherit;
color: inherit;
}
/* No highlight on tap anywhere, and no focus ring unless the keyboard is in use: shared/app.js
sets data-input="keyboard" on a key press and "pointer" on any touch or click. */
* {
-webkit-tap-highlight-color: transparent;
}
:focus,
:focus-visible {
outline: none;
}
:root[data-input="keyboard"] :focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* A pixel icon from shared/icons.js: . */
.icon {
width: 20px;
height: 20px;
flex: none;
fill: currentColor;
stroke: none;
}
/* ---------- Type ---------- */
.t-display {
font: 800 52px/1 var(--font-display);
letter-spacing: -0.045em;
}
.t-title {
font: 800 30px/1 var(--font-display);
letter-spacing: -0.04em;
}
.t-heading {
font: 750 18px/1.25 var(--font-display);
letter-spacing: -0.02em;
}
.t-body {
font-size: 15px;
line-height: 1.45;
color: var(--muted);
}
.t-note {
font-size: 13px;
line-height: 1.45;
color: var(--muted);
}
/* Numbers, sizes, versions and section labels. */
.eyebrow {
font: 500 12px/1.2 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* ---------- Buttons: one shape ---------- */
/* Secondary: glass. Everything that is a button and isn't the one thing the screen is for. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
min-width: 48px;
padding: 0 22px;
border: 1px solid var(--glass-line-strong);
border-radius: var(--r-btn);
background: var(--glass);
-webkit-backdrop-filter: blur(var(--blur));
backdrop-filter: blur(var(--blur));
color: var(--ink);
font: 650 16px/1 var(--font-sans);
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.btn .icon {
width: 18px;
height: 18px;
}
.btn:active {
background: var(--glass-press);
}
/* Primary: solid. At most one per screen. */
.btn-primary {
border-color: var(--ink);
background: var(--ink);
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: var(--on-ink);
}
.btn-primary:active {
background: var(--ink-press);
}
/* Red: a solid pastel red in place of the primary, for the move that ends something and passes play
on (Ktan's End turn), and beside it for turning something down (Ktan's Decline of an offer). The
one colour among the buttons. */
.btn-red {
border-color: var(--red-soft);
background: var(--red-soft);
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: var(--on-ink);
}
.btn-red:active {
background: #e3938d;
}
.btn-block {
width: 100%;
}
/* Icon only: the same button, square, its pixel icon 7 in from the edge like an icon button's
(34 in a 48). */
.btn-icon {
width: 48px;
padding: 0;
}
.btn-icon .icon {
width: 34px;
height: 34px;
}
/* Disabled is the same button at 40%, never a new style. */
.btn:disabled,
.btn[aria-disabled="true"],
.btn-small:disabled,
.icon-btn:disabled,
.tool:disabled,
.key:disabled {
opacity: 0.4;
cursor: default;
}
.btn:disabled:active,
.btn-small:disabled:active {
background: var(--glass);
}
.btn-primary:disabled:active {
background: var(--ink);
}
.btn-red:disabled:active {
background: var(--red-soft);
}
/* Small: a 32 tall button in a section header, next to a 12px label. Its tap area stays 44 tall. */
.btn-small {
display: inline-flex;
align-items: center;
height: var(--tap);
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.btn-small > span {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 14px;
border-radius: var(--r-btn);
background: var(--ink);
color: var(--on-ink);
font: 650 13px/1 var(--font-sans);
white-space: nowrap;
}
.btn-small .icon {
width: 14px;
height: 14px;
}
/* Icon: a 44 glass rounded square. Home, settings, close, and the moves under a board. Its 9 x 9
pixel icon sits 7 in from the edge, 30 wide: the radius of 8 is that inset plus a pixel's own
corner (0.93), so the icon's corner pixels nest in the button's corners. */
.icon-btn {
display: inline-grid;
place-items: center;
flex: none;
width: var(--tap);
height: var(--tap);
padding: 0;
border: 1px solid var(--glass-line);
border-radius: var(--r-btn);
background: var(--glass);
-webkit-backdrop-filter: blur(var(--blur));
backdrop-filter: blur(var(--blur));
color: var(--ink);
text-decoration: none;
cursor: pointer;
}
.icon-btn .icon {
width: 30px;
height: 30px;
}
.icon-btn:active,
.tool:active .icon-btn {
background: var(--glass-press);
}
.icon-btn[aria-pressed="true"],
.tool[aria-pressed="true"] .icon-btn {
border-color: var(--ink);
background: var(--ink);
color: var(--on-ink);
}
/* Primary: the same 44 square, solid like .btn-primary, for a header action that is the screen's
one primary (Tanks' map editor: Play, beside the home button and its size). */
.icon-btn-primary {
border-color: var(--ink);
background: var(--ink);
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: var(--on-ink);
}
.icon-btn-primary:active {
background: var(--ink-press);
}
.icon-btn-primary:disabled:active {
background: var(--ink);
}
/* News: one of the logo's pixels on the button's top right corner, in the colour of what's new
(--news: K-TAN's chat wears the colour of whoever wrote last), ringed in the page's background. */
.icon-btn.has-news {
position: relative;
}
.icon-btn.has-news::after {
content: '';
position: absolute;
top: -3px;
right: -3px;
width: 10px;
height: 10px;
border-radius: var(--r-pixel);
background: var(--news, var(--ink));
box-shadow: 0 0 0 2px var(--bg);
}
/* A move under a board: an icon button with its name below; the whole column is the button. */
.tool {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: var(--tap);
padding: 0;
border: 0;
background: none;
color: var(--muted);
font: 400 12px/1.2 var(--font-sans);
cursor: pointer;
}
.tool .icon-btn {
pointer-events: none;
}
.tools {
flex: none;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
justify-items: center;
}
/* Number keys: flat cards, radius 8 like every button. */
.keypad {
--key-gap: 8px;
--t-key: 0.22s; /* a mode key turning on or off, and the numbers changing with it */
container-type: inline-size; /* its width, for a mode key's face (100cqw) */
flex: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--key-gap);
}
.key {
height: 56px;
padding: 0;
border: 0;
border-radius: var(--r-btn);
background: var(--card);
color: var(--ink);
font: 650 24px/1 var(--font-sans);
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.key:active {
background: var(--ink);
color: var(--on-ink);
}
.key.is-done {
opacity: 0.4;
}
/* A number key shows its digit twice, as a number (::before) and as a note (::after), and Notes
turns one into the other in place: the number shrinks to the note's size and blurs out as the
note blurs in from the number's size. The key's own text stays for screen readers, at no size. */
.key[data-d] {
position: relative;
font-size: 0;
}
.key[data-d]::before,
.key[data-d]::after {
content: attr(data-d);
position: absolute;
inset: 0;
display: grid;
place-items: center;
transition: opacity var(--t-key) var(--ease), filter var(--t-key) var(--ease),
transform var(--t-key) var(--ease);
}
.key[data-d]::before {
font-size: 24px;
}
.key[data-d]::after {
font: 500 19px/1 var(--font-mono);
color: var(--muted);
opacity: 0;
filter: blur(var(--blur-fade));
transform: scale(1.26); /* 24 / 19 */
}
.keypad.is-notes .key[data-d]::before {
opacity: 0;
filter: blur(var(--blur-fade));
transform: scale(0.79); /* 19 / 24 */
}
.keypad.is-notes .key[data-d]::after {
opacity: 1;
filter: none;
transform: none;
}
/* Tools in the keypad (Sudoku's Notes and Erase): a first row over the numbers, each a number key's
card holding its icon (a smooth shape), with its name or alone. A mode that is on is solid white,
like a pressed icon button. The mode (.key-mode, Notes) is as wide as the pad; while it is on it
narrows to the left to two keys' width, uncovering the tool that goes with it (.key-mode-tool,
Erase) in the third column, which sits under it all along, out of reach until it shows. Its
face (icon and name) is as wide as the pad and only slides, by a transform, to stay centred:
centred again by layout every frame as the key narrowed, it jittered. A mode is a switch: it
turns white when it turns on, with no flash while pressed (that flashed white, dark, white on a
tap). */
.key-tool {
grid-row: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font: 600 15px/1 var(--font-sans);
}
.key-tool .icon {
width: 22px;
height: 22px;
}
.key-tool[aria-pressed="true"] {
background: var(--ink);
color: var(--on-ink);
}
.key-mode {
position: relative;
z-index: 1;
grid-column: 1 / -1;
justify-self: start;
width: 100%;
overflow: hidden;
transition: width var(--t-key) var(--ease), background-color var(--t-key) var(--ease),
color var(--t-key) var(--ease);
}
.key-mode:not([aria-pressed="true"]):active {
background: var(--card);
color: var(--ink);
}
.key-mode[aria-pressed="true"] {
width: calc((200% - var(--key-gap)) / 3);
}
.key-face {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100cqw;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: transform var(--t-key) var(--ease);
}
/* Half of what the key gives up (a key and a gap). */
.key-mode[aria-pressed="true"] .key-face {
transform: translateX(calc((100cqw + var(--key-gap)) / -6));
}
/* Hidden only once the mode has covered it again (a visibility transition shows at once and hides
at its end). Inherit, so a keypad stepping away hides it too. */
.key-mode-tool {
grid-column: -2 / -1;
visibility: hidden;
transition: visibility var(--t-key);
}
.key-mode[aria-pressed="true"] + .key-mode-tool {
visibility: inherit;
}
@media (max-height: 740px) {
.key {
height: 48px;
}
.keypad {
--key-gap: 6px;
}
}
/* ---------- Controls ---------- */
.segmented {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 4px;
padding: 4px;
border-radius: var(--r-btn);
background: var(--card);
}
.segmented button {
position: relative;
height: 40px;
padding: 0 8px;
border: 0;
border-radius: var(--r-chip);
background: none;
color: var(--muted);
font: 600 14px/1 var(--font-sans);
white-space: nowrap;
cursor: pointer;
}
/* The 4px padding around the segments still takes taps: 48 tall in all. */
.segmented button::after {
content: "";
position: absolute;
inset: -4px -2px;
}
.segmented button[aria-pressed="true"] {
background: var(--ink);
color: var(--on-ink);
font-weight: 650;
}
/* More choices than fit in a row (Tanks' test range picks one of a dozen enemy kinds): the same
control in rows of six. Its corners stay 8 = 4 segment + 4 padding. */
.segmented.is-grid {
grid-auto-flow: row;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
/* Six choices with longer labels (Tanks' map sizes): rows of three. */
.segmented.is-grid.is-thirds {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* A list to pick one from (Tanks' own maps): the same control, one choice per row, its text
starting where a side-menu row's does. */
.segmented.is-list {
grid-auto-flow: row;
}
.segmented.is-list button {
overflow: hidden;
padding: 0 14px;
text-align: left;
text-overflow: ellipsis;
}
/* Slider: one of a row of steps (Sudoku's difficulty), in the segmented control's box (48 tall,
radius 8). Each step is a pixel on the track; the thumb is the selected segment's chip (radius
4, inset 4) and glides from step to step with the value written in it. A drag anywhere on the
track moves it, and so does a tap. setupSlider() in shared/ui.js builds and runs it. */
.slider {
--thumb-w: 48px;
position: relative;
display: block;
height: 48px;
border-radius: var(--r-btn);
background: var(--card);
touch-action: none;
cursor: pointer;
}
.slider[aria-disabled="true"] {
opacity: 0.4;
cursor: default;
}
/* Thumb and steps sit on the same line: a step's centre is where the thumb's centre stops. */
.slider-step,
.slider-thumb {
position: absolute;
left: calc(4px + var(--at, 0) * (100% - 8px - var(--thumb-w)));
}
.slider-step {
top: 21px;
width: 6px;
height: 6px;
margin-left: calc(var(--thumb-w) / 2 - 3px);
border-radius: var(--r-pixel);
background: var(--quiet);
}
.slider-thumb {
top: 4px;
display: grid;
place-items: center;
width: var(--thumb-w);
height: 40px;
border-radius: var(--r-chip);
background: var(--ink);
color: var(--on-ink);
font: 650 15px/1 var(--font-sans);
font-variant-numeric: tabular-nums;
transition: left 0.18s var(--ease);
}
.slider-thumb:empty {
display: none;
}
/* Switch: track 8, knob 5 inset 3. */
.switch {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: none;
width: 52px;
height: 32px;
margin: 0;
border: 0;
border-radius: var(--r-btn);
background: var(--quiet);
cursor: pointer;
}
.switch::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 26px;
height: 26px;
border-radius: calc(var(--r-btn) - 3px);
background: var(--ink);
transition: transform 0.15s var(--ease);
}
.switch:checked {
background: var(--ink);
}
.switch:checked::after {
background: var(--on-ink);
transform: translateX(20px);
}
/* Toggle row: a setting's name on the left and its switch on the right, in the segmented
control's box (48 tall, radius 8), the switch inset 8 like a side-menu row's. The row is the
switch's label, so a tap anywhere on it flips it. */
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 48px;
padding: 0 8px 0 18px;
border-radius: var(--r-btn);
background: var(--card);
font-size: 15px;
cursor: pointer;
}
.field {
width: 100%;
min-height: 7.5em;
padding: 14px 18px;
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
background: var(--card);
color: var(--ink);
font: 500 16px/1.5 var(--font-mono);
letter-spacing: 0.08em;
resize: none;
}
/* One line of text (a name): as tall as a button, in the body face rather than the code face. */
.field.is-line {
min-height: 0;
height: 48px;
padding: 0 18px;
font: 500 16px/1 var(--font-sans);
letter-spacing: 0;
}
/* ---------- Surfaces ---------- */
/* Card: flat. Lists, facts, rows. */
.card {
border-radius: var(--r-btn);
background: var(--card);
}
/* Glass: only over art or content. */
.glass {
border: 1px solid var(--glass-line);
background: var(--glass);
-webkit-backdrop-filter: blur(var(--blur));
backdrop-filter: blur(var(--blur));
}
/* Panel: glass over art, shaped like a game tile (18 = 8 + 10): its button sits inset 10 with the
tile art's radius 8, and its text starts where a tile's title does. It blurs what's behind it
the way a sheet does (the sheet's tint and blur). */
.panel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 10px 10px 18px;
border: 1px solid var(--glass-line);
border-radius: var(--r-game-tile);
background: var(--sheet);
-webkit-backdrop-filter: blur(var(--blur-sheet));
backdrop-filter: blur(var(--blur-sheet));
}
.panel-text {
min-width: 0;
}
.panel .btn {
border-radius: var(--r-game-art);
}
/* A glass row in a list (install steps): an icon in a glass tile, then an eyebrow over a line of
text, on a panel that blurs what's behind it like a sheet. The panel's radius is the tile's 8
plus the 8 it sits in. */
.glass-row {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 16px 8px 8px;
border: 1px solid var(--glass-line);
border-radius: calc(var(--r-btn) + 8px);
background: var(--sheet);
-webkit-backdrop-filter: blur(var(--blur-sheet));
backdrop-filter: blur(var(--blur-sheet));
}
.glass-row-icon {
display: grid;
place-items: center;
flex: none;
width: var(--tap);
height: var(--tap);
border-radius: var(--r-btn);
background: var(--glass);
}
.glass-row-icon .icon {
width: 30px;
height: 30px;
}
.glass-row-text {
display: flex;
flex-direction: column;
gap: 4px;
font: 600 16px/1.3 var(--font-sans);
}
/* Notice: a glass text card laid over a board or arena for a moment (Tanks' mission banners). */
.notice {
display: grid;
justify-items: center;
gap: 6px;
padding: 18px 20px;
border: 1px solid var(--glass-line);
border-radius: var(--r-btn);
background: var(--panel);
-webkit-backdrop-filter: blur(var(--blur-panel));
backdrop-filter: blur(var(--blur-panel));
text-align: center;
}
.notice > :empty {
display: none;
}
/* In a row of buttons, in their place: as tall as a button (K-TAN's accepted offer, and Wait for
your turn in place of the moves). Words too long for one line make it taller. */
.notice.is-row {
min-height: 48px;
padding: 0 16px;
align-content: center;
}
/* Facts: a card of label / value rows. */
.facts {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
margin: 0;
border-radius: var(--r-btn);
background: var(--card);
font-size: 15px;
}
.facts dt {
padding: 14px 0 14px 18px;
}
.facts dd {
margin: 0;
padding: 14px 18px;
color: var(--muted);
text-align: right;
overflow-wrap: anywhere;
}
.facts dd.is-num {
font: 500 13px/1.6 var(--font-mono);
font-variant-numeric: tabular-nums;
}
.facts dt:not(:nth-last-child(2)),
.facts dd:not(:last-child) {
border-bottom: 1px solid var(--hairline);
}
/* ---------- Progressive blur ---------- */
/* Stacked backdrop-filter layers, each masked to reach less far the harder it blurs, then a
shade. Used at the top and bottom edges of scrolling screens, behind the side menu and under
a game tile's title. Nothing that wraps the layers may set opacity, filter or mask: that would
cut the blur off from what is behind, so each layer fades itself. */
.pblur {
pointer-events: none;
}
.pblur > i,
.pblur > b {
position: absolute;
inset: 0;
}
.pblur > i {
-webkit-backdrop-filter: blur(var(--b));
backdrop-filter: blur(var(--b));
-webkit-mask-image: linear-gradient(var(--dir), #000 var(--from), transparent var(--to));
mask-image: linear-gradient(var(--dir), #000 var(--from), transparent var(--to));
}
.pblur-top { --dir: to bottom; }
.pblur-top > i:nth-child(1) { --b: 2px; --from: 55%; --to: 100%; }
.pblur-top > i:nth-child(2) { --b: 6px; --from: 40%; --to: 75%; }
.pblur-top > i:nth-child(3) { --b: 14px; --from: 25%; --to: 55%; }
.pblur-top > b { background: linear-gradient(to bottom, rgba(var(--shade), 0.92), rgba(var(--shade), 0.45) 50%, rgba(var(--shade), 0)); }
.pblur-bottom { --dir: to top; }
.pblur-bottom > i:nth-child(1) { --b: 2px; --from: 55%; --to: 100%; }
.pblur-bottom > i:nth-child(2) { --b: 6px; --from: 40%; --to: 75%; }
.pblur-bottom > i:nth-child(3) { --b: 14px; --from: 20%; --to: 50%; }
.pblur-bottom > b { background: linear-gradient(to top, rgba(var(--shade), 0.85), rgba(var(--shade), 0)); }
.pblur-tile { --dir: to top; }
.pblur-tile > i:nth-child(1) { --b: 2px; --from: 50%; --to: 100%; }
.pblur-tile > i:nth-child(2) { --b: 6px; --from: 35%; --to: 75%; }
.pblur-tile > i:nth-child(3) { --b: 14px; --from: 20%; --to: 55%; }
.pblur-tile > b { background: linear-gradient(to top, rgba(var(--shade), 0.75), rgba(var(--shade), 0.3) 55%, rgba(var(--shade), 0)); }
.pblur-left { --dir: to right; }
.pblur-left > i:nth-child(1) { --b: 1px; --from: 55%; --to: 100%; }
.pblur-left > i:nth-child(2) { --b: 4px; --from: 35%; --to: 76%; }
.pblur-left > i:nth-child(3) { --b: 12px; --from: 22%; --to: 60%; }
.pblur-left > i:nth-child(4) { --b: 32px; --from: 5%; --to: 40%; }
.pblur-left > b { background: linear-gradient(to right, rgba(var(--shade-deep), 0.78), rgba(var(--shade-deep), 0.55) 45%, rgba(var(--shade-deep), 0.15)); }
/* The side edges of a screen that scrolls sideways (the launcher's games in landscape). */
.pblur-side > i:nth-child(1) { --b: 2px; --from: 55%; --to: 100%; }
.pblur-side > i:nth-child(2) { --b: 6px; --from: 35%; --to: 75%; }
.pblur-side > i:nth-child(3) { --b: 14px; --from: 15%; --to: 50%; }
.pblur-side > b { background: linear-gradient(var(--dir), rgba(var(--shade), 0.85), rgba(var(--shade), 0)); }
/* Deep, with -top, -bottom or -side: a blur that deepens all the way to the edge (each layer stays
on once it has come in), under a shade from transparent to the background there (its ; leave
that out for the blur alone). The launcher's top edge on its home view. The Tanks arena's wall
past its field has the same look, but baked into its canvas (games/tanks/render.js blurEdges,
which copies these layers and this shade): for performance, since iOS blurs backdrop-filter
layers again on every frame the canvas under them changes. */
:is(.pblur-deep, .launcher[data-view="home"] .edge-top) > i:nth-child(1) { --b: 3px; --from: 80%; --to: 100%; }
:is(.pblur-deep, .launcher[data-view="home"] .edge-top) > i:nth-child(2) { --b: 7px; --from: 45%; --to: 80%; }
:is(.pblur-deep, .launcher[data-view="home"] .edge-top) > i:nth-child(3) { --b: 14px; --from: 10%; --to: 45%; }
:is(.pblur-deep, .launcher[data-view="home"] .edge-top) > b {
background: linear-gradient(var(--dir), var(--bg), rgba(var(--shade), 0.86) 24%, rgba(var(--shade), 0.68) 46%, rgba(var(--shade), 0.42) 66%, rgba(var(--shade), 0.18) 84%, rgba(var(--shade), 0));
}
/* The fixed edges of a scrolling screen: top and bottom, or left and right when it scrolls
sideways (shown only there, by the page). */
.edge-top,
.edge-bottom {
position: fixed;
left: 0;
right: 0;
z-index: 5;
}
.edge-left,
.edge-right {
display: none;
position: fixed;
top: 0;
bottom: 0;
z-index: 5;
}
.edge-left {
--dir: to right;
left: 0;
width: calc(var(--safe-l) + 16px);
}
.edge-right {
--dir: to left;
right: 0;
width: calc(var(--safe-r) + 16px);
}
.edge-top {
top: 0;
height: calc(var(--bar-total) + 24px);
}
.edge-bottom {
bottom: 0;
height: calc(var(--safe-b) + 64px);
}
@media (orientation: landscape) {
.edge-top {
height: calc(var(--safe-t) + 28px);
}
}
/* ---------- The logo, pixel by pixel ---------- */
/* The 11 x 13 mark as a grid of rounded squares (shared/logo.js), so each pixel can come into
focus on its own: progress is pixels going from a blurred grey to sharp white. A pixel is 3/4
of the pitch and the gap 1/4, so 11 pixels and 10 gaps are 43 gaps wide. */
.logo {
--logo-w: 22px;
--logo-haze: 1.5px;
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
gap: calc(var(--logo-w) / 43);
width: var(--logo-w);
flex: none;
}
.logo i {
aspect-ratio: 1;
border-radius: var(--r-pixel);
}
.logo i.lit {
background: var(--ink);
transition: background 0.5s var(--ease), filter 0.5s var(--ease);
}
.logo i.lit.soft {
background: var(--quiet);
filter: blur(var(--logo-haze));
}
.logo-md { --logo-w: 24px; --logo-haze: 1.5px; }
.logo-lg { --logo-w: 150px; --logo-haze: 3px; }
.logo-xs { --logo-w: 14px; }
/* The same mark, all white and blurred hard: a soft glow behind a big logo. */
.logo-glow {
position: absolute;
z-index: 0;
filter: blur(46px);
opacity: 0.4;
pointer-events: none;
}
/* ---------- Pixel field (shared/pixel-field.js) ---------- */
/* The browser tab's background: the app icon's scatter of dim pixels across the whole page, with
the mark lit white in it. Its pixels blur out and back in at random, slower than anything else
(--t-twinkle). The GPU draws them on one canvas, with the blur out and blur in of Motion (below);
without WebGL each pixel is an element (i) and they stay still. */
.pixel-field {
--t-blur: var(--t-twinkle);
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
pointer-events: none;
}
.pixel-field canvas {
display: block;
}
.pixel-field i {
position: absolute;
width: var(--dot);
height: var(--dot);
border-radius: var(--r-pixel);
}
/* ---------- Header ---------- */
/* The status bar (iOS, installed app), as Modern Web Weekly's "So what's up with the iOS 27 blur"
has it (linked in CLAUDE.md): iOS 26 and later blur the top of the page under the status bar,
unless a fixed element with a solid colour lies along the top, as wide as the screen and within
4 px of it. Then the status bar takes that colour, solid, and the blur goes. This strip (added
by shared/app.js) is the page's background, or whatever a page sets as --status on :root (Ktan's
table: the sea under it; a phone at a table: the deep shade of the portal's colour). It is 6 px tall, the least the
article found: under 10 px iOS reads its colour from the pixels there (fixed layers only), the
strip's own. iOS reads the colour again only when a fixed element comes or goes, so app.js puts
a fresh strip in when --status changes; an iPad keeps the first colour it read once the page has
been touched. Only where a status bar shows: a phone in landscape has none. It is part of the
top safe area (--safe-t), so only backgrounds lie under it. A browser tab keeps Safari's own.
The status-bar style stays default, as in the article (its clock is dark): under
black-translucent, iOS took no fixed element's colour at all (fixed bars from 0 to 480 px, tried
on an iPhone on 2026-10-18) and kept its blur over the status bar and about 20 px below. */
.status-strip {
display: none;
}
@supports (-webkit-touch-callout: none) {
@media (display-mode: standalone) and (orientation: portrait), (display-mode: standalone) and (min-height: 600px) {
:root {
--status-h: 6px;
}
.status-strip {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--status-h);
background: var(--status, var(--bg));
}
}
}
/* Portrait: a row right under the status bar (a game's home button and its stats right-aligned;
the launcher's logo centred and settings at the right). No page shows a title. Landscape: a
game's header floats over the play area, home in the top-left corner and the stats down the
top-right; the launcher's logo scrolls along with its games while settings floats at the top
right (Launcher, below). */
.bar {
position: relative;
z-index: 10;
flex: none;
display: flex;
align-items: center;
gap: 12px;
min-height: var(--bar-total);
padding: var(--bar-top) calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px);
}
.bar-stats {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px 16px;
margin-left: auto;
}
.stat {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
position: relative;
}
.stat-label {
font: 500 11px/1.2 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.stat-value {
font: 750 17px/1.1 var(--font-sans);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Meters right under the stats: one small icon per thing you hold (a game's shells, its mines),
filled while it's ready and hollow while it's in use. A row in portrait; in a landscape game
header each meter runs down the right edge. */
.stat-meters {
flex-basis: 100%;
display: flex;
justify-content: flex-end;
gap: 12px;
}
.meter {
display: flex;
gap: 1px;
}
.meter .icon {
width: 18px;
height: 18px;
}
/* Lives (Sudoku's hearts): smooth hearts, full while a life is left and hollow once it's spent.
In portrait the row sits in the middle of the header (.bar-center); in landscape it runs down
the right edge under the stats, like a meter. A heart is whole (.life-full) until its life is
lost; then it breaks: it cracks down the middle and its halves part, then fall away to either
side, turning and blurring out, uncovering the hollow heart already in place under them. */
.lives {
display: flex;
gap: 6px;
}
.life {
--life: 24px;
display: grid;
grid-template: var(--life) / var(--life);
}
/* Sized outright: an svg of no size of its own falls back to 150 tall. */
.life > *,
.life-half > .icon {
display: block;
grid-area: 1 / 1;
width: var(--life);
height: var(--life);
}
.life-empty {
color: var(--muted);
opacity: 0;
}
.life.is-used .life-empty {
opacity: 1;
}
.life.is-used .life-full {
opacity: 0;
}
/* The crack: one zigzag from the notch down to the point, each half's heart clipped to its side
of it. The half moves and blurs around its clipped heart, so the blur softens the crack too. The
halves show only while the heart breaks (their animation): side by side, the crack shows as a
seam, so a heart at rest is the whole one. */
.life-half {
opacity: 0;
transform-origin: 50% 86%;
pointer-events: none;
}
.life-half.is-left > .icon {
clip-path: polygon(0 0, 50% 0, 50% 27%, 44% 42%, 55% 55%, 46% 69%, 50% 86%, 50% 100%, 0 100%);
}
.life-half.is-right > .icon {
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 50% 86%, 46% 69%, 55% 55%, 44% 42%, 50% 27%);
}
.life.is-breaking .life-half.is-left {
animation: life-fall-left 0.8s both;
}
.life.is-breaking .life-half.is-right {
animation: life-fall-right 0.8s both;
}
/* Parting at the point, quick; then falling, slow to start like a weight. */
@keyframes life-fall-left {
0% {
transform: none;
opacity: 1;
filter: blur(0);
animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
22% {
transform: translateX(-10%) rotate(-12deg);
opacity: 1;
filter: blur(0);
animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.55);
}
100% {
transform: translate(-50%, 100%) rotate(-36deg);
opacity: 0;
filter: blur(4px);
}
}
@keyframes life-fall-right {
0% {
transform: none;
opacity: 1;
filter: blur(0);
animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
22% {
transform: translateX(10%) rotate(12deg);
opacity: 1;
filter: blur(0);
animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.55);
}
100% {
transform: translate(50%, 100%) rotate(36deg);
opacity: 0;
filter: blur(4px);
}
}
/* Portrait: something in the middle of the header row, between the home button and the stats
(Sudoku's hearts). Landscape: it joins the stats down the right edge. */
@media (orientation: portrait) {
.bar-center {
position: absolute;
top: var(--bar-top);
left: 50%;
height: var(--tap);
align-items: center;
transform: translateX(-50%);
}
}
/* An icon with two states: .full (a solid shape) and .empty (its outline, a pixel icon of its
own such as #i-shell-empty). Put .is-used on the svg to show the outline. */
.slot .empty {
display: none;
}
.slot.is-used .full {
display: none;
}
.slot.is-used .empty {
display: inline;
}
.meter .slot.is-used {
color: var(--muted);
}
@media (orientation: landscape) {
/* A game's header stays in the page (never fixed) and shares the shell's one grid cell with
the play area, so it floats over it: home in the top-left corner, the stats stacked down the
top-right, each in a gutter (--side-w) the play area keeps free on its side. */
.game-page {
--side-w: 72px; /* 16 + 44 + 12 */
}
.game-page .shell {
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}
.game-page .shell > * {
grid-area: 1 / 1;
}
.game-page .bar {
align-self: start;
align-items: flex-start;
min-height: 0;
padding: max(var(--safe-t), 16px) calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px);
pointer-events: none;
}
.game-page .bar > * {
pointer-events: auto;
}
.game-page .bar-stats {
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-end;
gap: 14px;
}
.game-page .stat-meters {
flex-direction: column;
align-items: flex-end;
}
.game-page .meter,
.game-page .lives {
flex-direction: column;
}
}
/* ---------- Game pages: a fixed shell that never scrolls ---------- */
.game-page {
position: fixed;
inset: 0;
overflow: hidden;
min-height: 0;
}
.shell {
height: 100%;
display: flex;
flex-direction: column;
}
/* Portrait: header, then the board, then the moves. Landscape: the board on the left and the
moves beside it, with the header floating over the corners. */
.play {
flex: 1;
min-height: 0;
width: 100%;
max-width: 560px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 18px;
padding: 18px calc(var(--safe-r) + 16px) calc(max(var(--safe-b), 8px) + 12px) calc(var(--safe-l) + 16px);
}
.board-wrap {
position: relative;
flex: 1 1 auto;
min-height: 0;
container-type: size;
display: grid;
place-items: start center;
}
/* Portrait: the board is as wide as the page and gives up height only when the screen is short,
so the moves sit right under it and any spare room stays at the bottom. */
@media (orientation: portrait) {
.play > .board-wrap {
flex: 0 1 auto;
aspect-ratio: 1;
}
}
.board {
position: relative;
width: var(--board-size, 100cqmin);
height: var(--board-size, 100cqmin);
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
/* What sits under the board: the moves. */
.controls {
flex: none;
display: flex;
flex-direction: column;
gap: 20px;
}
@media (max-height: 740px) {
.play {
gap: 12px;
padding-top: 12px;
}
.controls {
gap: 14px;
}
}
@media (orientation: landscape) {
.play {
max-width: none;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 32px;
padding: max(var(--safe-t), 16px) calc(var(--safe-r) + var(--side-w)) max(var(--safe-b), 16px) calc(var(--safe-l) + var(--side-w));
/* The play area's height, and the board's: as tall as the play area, or 60% of its width if
less (a percentage here is of the play area's width wherever it is used). */
--play-h: calc(100vh - max(var(--safe-t), 16px) - max(var(--safe-b), 16px));
--play-h: calc(100dvh - max(var(--safe-t), 16px) - max(var(--safe-b), 16px));
--board-h: min(60%, var(--play-h));
}
/* The board's height given as a width WebKit can lay out: a width taken from aspect-ratio and a
stretched height came out 0 there (a size container's content counts for nothing), and the
board vanished in landscape on iPhones. */
.play > .board-wrap {
flex: none;
width: var(--board-h);
height: auto;
aspect-ratio: 1;
place-items: center;
}
.controls {
flex: 0 1 340px;
min-width: 0;
}
}
/* A line of state laid over a board (Generating…). */
.board-note {
position: absolute;
inset: 0;
z-index: 3;
display: grid;
place-items: center;
pointer-events: none;
}
/* ---------- Side menu (a game's home button) ---------- */
/* A list of choices down the left edge, over the page blurred hardest at that edge and sharp
again toward the right. As it opens, the home button that opened it blurs out, and it blurs
back in as the menu closes (Resume, or a tap beside the list). The blur covers the whole
screen, the header's strip too, so it never stops short under the home button; the list starts
under the header. Opening it pauses the game. shared/ui.js runs it. */
.side-menu {
position: fixed;
inset: 0;
z-index: 10;
color: var(--ink);
}
.side-menu-blur {
position: absolute;
inset: 0;
cursor: pointer;
}
.side-menu-blur > i,
.side-menu-blur > b {
opacity: 0;
transition: opacity 0.22s var(--ease);
}
.side-menu-list {
position: absolute;
top: 0;
left: 0;
width: min(84%, 320px);
max-height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
padding: calc(var(--bar-total) + 14px) 0 calc(var(--safe-b) + 16px) calc(var(--safe-l) + 6px);
opacity: 0;
transform: translateX(-18px);
transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.side-menu.open .side-menu-blur > i,
.side-menu.open .side-menu-blur > b,
.side-menu.open .side-menu-list {
opacity: 1;
transform: none;
}
.side-item {
display: flex;
align-items: center;
gap: 14px;
min-height: 52px;
padding: 0 12px;
border: 0;
border-radius: var(--r-btn);
background: none;
color: var(--ink);
font: 700 19px/1.15 var(--font-display);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.side-item:active {
background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.side-item .icon {
width: 22px;
height: 22px;
color: var(--muted);
}
.side-item .switch {
margin-left: auto;
}
/* Leaving the game sits apart from what happens in it. */
.side-item.is-exit {
margin-top: 10px;
}
/* Landscape: the list starts under the home button's spot in the top-left corner. */
@media (orientation: landscape) {
.side-menu-list {
padding: calc(max(var(--safe-t), 16px) + 56px) 0 calc(var(--safe-b) + 16px) calc(var(--safe-l) + 6px);
}
}
/* ---------- Sheets ---------- */
/* Content (settings, confirmations, results): glass from the bottom, top corners 24, padding 16,
a 44 close button at the top right (8 + 16 = 24). Every sheet dims the page behind it in black
(--scrim) and takes its taps; openSheet's blur blurs the page as well (only Ktan's staged sheets).
A sheet that belongs to the game state (a start screen or a result) is "docked": opened with
show() instead of showModal(), so .sheet-scrim (openSheet in shared/ui.js) dims for it, and the
header's home button stays above the dim, so the side menu still works. A game page stacks: the
play area (up to 6), the header's other items while a docked sheet is open (7), the scrim (8),
the docked sheet (9), the side menu (10), the header (11). .sheet-panel is the sheet inside a
staged one (below). The sheet itself never scrolls: its content (.sheet-inner, below) does,
under its head. */
dialog.sheet,
.sheet-panel {
--sheet-l: calc(var(--safe-l) + 16px);
--sheet-r: calc(var(--safe-r) + 16px);
position: fixed;
inset: auto 0 0 0;
z-index: 9;
width: 100%;
max-width: 560px;
max-height: calc(100vh - var(--safe-t) - 24px);
max-height: calc(100dvh - var(--safe-t) - 24px);
margin: 0 auto;
padding: 0;
border: 0;
border-top: 1px solid var(--glass-line);
border-radius: var(--r-sheet) var(--r-sheet) 0 0;
background: var(--sheet);
-webkit-backdrop-filter: blur(var(--blur-sheet));
backdrop-filter: blur(var(--blur-sheet));
color: var(--ink);
overflow: hidden;
}
/* [open]: a closed dialog keeps the browser's display: none. */
dialog.sheet[open]:not(.sheet-staged),
.sheet-panel {
display: flex;
flex-direction: column;
}
/* Written out: older WebKit doesn't pass custom properties to ::backdrop. Keep it --scrim,
--blur-scrim and the --t-sheet times. */
dialog.sheet::backdrop {
background: rgba(0, 0, 0, 0.25);
animation: sheet-dim-in 0.26s cubic-bezier(0.2, 0.7, 0.2, 1);
}
dialog.sheet.sheet-blur::backdrop {
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
dialog.sheet.sheet-closing::backdrop {
animation: sheet-dim-out 0.2s cubic-bezier(0.6, 0, 0.8, 0.3) forwards;
}
.sheet-scrim {
display: none;
position: fixed;
inset: 0;
z-index: 8;
background: var(--scrim);
}
body:has(dialog.sheet-docked[open]) > .sheet-scrim {
display: block;
animation: sheet-dim-in var(--t-sheet) var(--ease);
}
body:has(dialog.sheet-docked.sheet-blur[open]:not(.sheet-closing)) > .sheet-scrim {
-webkit-backdrop-filter: blur(var(--blur-scrim));
backdrop-filter: blur(var(--blur-scrim));
}
/* Only once every docked sheet is leaving: one closing as the next opens keeps the dim. */
body:not(:has(dialog.sheet-docked[open]:not(.sheet-closing))) > .sheet-scrim {
animation: sheet-dim-out var(--t-sheet-out) var(--ease-back) forwards;
}
/* A game's header items sit over the play area and the side menu on their own (flex items take
z-index without a position, which would move .bar-center's anchor), so a docked sheet's dim can
pass over all of them but the home button. */
.game-page .bar {
z-index: auto;
}
.game-page .bar > * {
z-index: 11;
}
.game-page:has(dialog.sheet-docked[open]) .bar > :not(#homeBtn) {
z-index: 7;
}
/* On a glass sheet, flat surfaces turn to glass too, so nothing on it reads as a solid block. */
dialog.sheet :is(.segmented, .slider, .toggle-row, .card, .facts, .field) {
background: var(--glass);
}
/* A staged sheet (Ktan's card up close, its robber): the dialog covers the screen and draws the dim (and blur)
itself, in its ::before, so it fades in and out with the sheet on every browser; a tap on it is a
tap beside the sheet. .sheet-stage holds what the sheet is about, over the dim and the sheet
(Ktan's card up close lays its stage under the sheet instead, so a card on its way back to its
pile passes behind it), and .sheet-panel is the sheet. */
dialog.sheet.sheet-staged {
inset: 0;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
padding: 0;
border: 0;
border-radius: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
overflow: hidden;
}
dialog.sheet.sheet-staged::backdrop {
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
dialog.sheet-staged::before {
content: "";
position: absolute;
inset: 0;
background: var(--scrim);
animation: sheet-dim-in var(--t-sheet) var(--ease);
}
dialog.sheet-staged.sheet-blur::before {
-webkit-backdrop-filter: blur(var(--blur-scrim));
backdrop-filter: blur(var(--blur-scrim));
}
dialog.sheet-staged > .sheet-panel {
z-index: 1;
max-height: 52%;
}
dialog.sheet-staged > .sheet-stage {
position: absolute;
z-index: 2;
}
/* A docked staged sheet (Ktan's robber) dims and blurs in its own ::before instead of the scrim,
and the header's home button stays above it. */
body:has(dialog.sheet-docked.sheet-staged[open]) > .sheet-scrim {
display: none;
}
/* Coming and going. A sheet fades in as it rises a few pixels into place (sheet-in) and fades out
sinking them (sheet-out); a complete one (openSheet's complete, only a card up close) rises from
the very bottom of the screen without fading (sheet-rise) and falls all the way back down
(sheet-fall). closeSheet in shared/ui.js waits for sheet-out or sheet-fall before closing. */
dialog.sheet:not(.sheet-staged)[open],
dialog.sheet-staged[open] > .sheet-panel {
animation: sheet-in var(--t-sheet) var(--ease);
}
dialog.sheet.sheet-complete:not(.sheet-staged)[open],
dialog.sheet-complete.sheet-staged[open] > .sheet-panel {
animation: sheet-rise var(--t-sheet-full) var(--ease);
}
dialog.sheet.sheet-closing:not(.sheet-staged),
dialog.sheet-closing.sheet-staged > .sheet-panel {
animation: sheet-out var(--t-sheet-out) var(--ease-back) forwards;
}
dialog.sheet.sheet-closing.sheet-complete:not(.sheet-staged),
dialog.sheet-closing.sheet-complete.sheet-staged > .sheet-panel {
animation: sheet-fall var(--t-sheet-full-out) var(--ease-back) forwards;
}
dialog.sheet-staged.sheet-complete::before {
animation-duration: var(--t-sheet-full);
}
dialog.sheet-staged.sheet-closing::before {
animation: sheet-dim-out var(--t-sheet-out) var(--ease-back) forwards;
}
dialog.sheet-staged.sheet-closing.sheet-complete::before {
animation-duration: var(--t-sheet-full-out);
}
dialog.sheet.sheet-complete::backdrop {
animation-duration: 0.42s;
}
dialog.sheet.sheet-closing.sheet-complete::backdrop {
animation-duration: 0.5s;
}
@keyframes sheet-in {
from {
transform: translateY(16px);
opacity: 0;
}
}
@keyframes sheet-out {
to {
transform: translateY(16px);
opacity: 0;
}
}
@keyframes sheet-rise {
from {
transform: translateY(100%);
}
}
@keyframes sheet-fall {
to {
transform: translateY(100%);
}
}
@keyframes sheet-dim-in {
from {
opacity: 0;
}
}
@keyframes sheet-dim-out {
to {
opacity: 0;
}
}
@media (orientation: landscape) {
dialog.sheet,
.sheet-panel {
--sheet-l: 16px;
--sheet-r: 16px;
max-width: 700px;
max-height: calc(100dvh - 22px);
}
dialog.sheet.sheet-docked {
max-width: min(560px, calc(100% - 32px));
}
dialog.sheet.sheet-docked.sheet-staged {
max-width: none;
}
dialog.sheet-docked.sheet-staged > .sheet-panel {
max-width: min(560px, calc(100% - 32px));
}
}
/* A sheet's content, and what scrolls when it doesn't fit: the one child of every sheet, a