/* TERRA — app shell and Material 3 component library. Every colour, radius, duration and type size comes from tokens.css. Two rules this file keeps everywhere: 1. Interactive elements get a >=48px hit area, a :focus-visible ring, and an M3 state layer — a currentColor ::before at 8% hover / 12% press, painted above the element's own background and below its content (z-index:-1 inside an isolated stacking context). 2. Accent-tinted plates only ever carry --md-on-surface / -variant text: an accent on a 12% tint of itself falls to 4.2:1, so accent-coloured glyphs sit on --md-surface-container-lowest instead (>=6.4:1 in all 12 palettes). */ /* ========================================================================== 1. Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { --nav-offset: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); --z-nav: 40; --z-topbar: 50; --z-menu: 60; --z-tooltip: 70; --z-scrim: 80; --z-dialog: 85; --z-toast: 95; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--md-outline-variant) transparent; } /* Deliberately no scrollbar-gutter: reserving one keeps the initial containing block wider than the client area, which makes every position:fixed full-width element (bottom nav, full-screen sheet) overhang by the scrollbar width. */ /* Scroll lock behind a modal, with no JS required. */ html:has(dialog[open]), html:has(> body > .scrim:not([hidden])) { overflow: hidden; } body { margin: 0; min-height: 100dvh; background: var(--md-surface); color: var(--md-on-surface); font-family: var(--font-body); font-size: var(--fs-body-large); line-height: var(--lh-body-large); letter-spacing: calc(var(--ls-body-large) + var(--tracking-body)); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } /* The icon sprite is inlined at the top of and must never take space. Collapsed rather than display:none so references stay resolvable. */ body > svg[aria-hidden="true"] { position: absolute; width: 0; height: 0; overflow: hidden; } [hidden] { display: none !important; } ::selection { background: color-mix(in srgb, var(--md-primary) 26%, transparent); color: var(--md-on-surface); } :focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* Rounds the ring on elements that have no radius of their own. Zero specificity on purpose: a component's own border-radius must win no matter which stylesheet declares it or in what order. */ :where(:focus-visible) { border-radius: var(--r-xs); } :focus:not(:focus-visible) { outline: none; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border: 3px solid transparent; border-radius: var(--r-full); background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--md-outline); background-clip: content-box; } button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; } button { background: none; border: 0; } a { color: var(--md-primary); text-decoration-color: color-mix(in srgb, var(--md-primary) 45%, transparent); text-underline-offset: 2px; } a:hover { text-decoration-color: currentColor; } img, svg, canvas { max-width: 100%; } img { border: 0; } hr { border: 0; border-top: 1px solid var(--md-outline-variant); margin: var(--sp-4) 0; } table { border-collapse: collapse; } fieldset { border: 0; margin: 0; padding: 0; } legend { padding: 0; } /* ========================================================================== 2. Typography ========================================================================== */ .display-large, .display-medium, .display-small, .headline-large, .headline-medium, .headline-small, .title-large, h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); margin: 0; text-wrap: balance; } .display-large { font-size: var(--fs-display-large); line-height: var(--lh-display-large); letter-spacing: calc(var(--ls-display-large) + var(--tracking-heading)); } .display-medium { font-size: var(--fs-display-medium); line-height: var(--lh-display-medium); letter-spacing: calc(var(--ls-display-medium) + var(--tracking-heading)); } .display-small { font-size: var(--fs-display-small); line-height: var(--lh-display-small); letter-spacing: calc(var(--ls-display-small) + var(--tracking-heading)); } h1, .headline-large { font-size: var(--fs-headline-large); line-height: var(--lh-headline-large); letter-spacing: calc(var(--ls-headline-large) + var(--tracking-heading)); } h2, .headline-medium { font-size: var(--fs-headline-medium); line-height: var(--lh-headline-medium); letter-spacing: calc(var(--ls-headline-medium) + var(--tracking-heading)); } h3, .headline-small { font-size: var(--fs-headline-small); line-height: var(--lh-headline-small); letter-spacing: calc(var(--ls-headline-small) + var(--tracking-heading)); } h4, .title-large { font-size: var(--fs-title-large); line-height: var(--lh-title-large); letter-spacing: calc(var(--ls-title-large) + var(--tracking-heading)); } h5, .title-medium { font-family: var(--font-body); font-size: var(--fs-title-medium); line-height: var(--lh-title-medium); letter-spacing: calc(var(--ls-title-medium) + var(--tracking-heading)); font-weight: var(--fw-medium); margin: 0; } h6, .title-small { font-family: var(--font-body); font-size: var(--fs-title-small); line-height: var(--lh-title-small); letter-spacing: calc(var(--ls-title-small) + var(--tracking-heading)); font-weight: var(--fw-medium); margin: 0; } .body-large { font-size: var(--fs-body-large); line-height: var(--lh-body-large); letter-spacing: calc(var(--ls-body-large) + var(--tracking-body)); } .body-medium { font-size: var(--fs-body-medium); line-height: var(--lh-body-medium); letter-spacing: calc(var(--ls-body-medium) + var(--tracking-body)); } .body-small { font-size: var(--fs-body-small); line-height: var(--lh-body-small); letter-spacing: calc(var(--ls-body-small) + var(--tracking-body)); } .label-large { font-size: var(--fs-label-large); line-height: var(--lh-label-large); letter-spacing: calc(var(--ls-label-large) + var(--tracking-body)); font-weight: var(--fw-medium); } .label-medium { font-size: var(--fs-label-medium); line-height: var(--lh-label-medium); letter-spacing: calc(var(--ls-label-medium) + var(--tracking-body)); font-weight: var(--fw-medium); } .label-small { font-size: var(--fs-label-small); line-height: var(--lh-label-small); letter-spacing: calc(var(--ls-label-small) + var(--tracking-body)); font-weight: var(--fw-medium); } p { margin: 0 0 var(--sp-3); } p:last-child { margin-bottom: 0; } .muted { color: var(--md-on-surface-variant); } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; } .skip-link:focus-visible { left: var(--sp-4); top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--md-primary); color: var(--md-on-primary); box-shadow: var(--e3); } /* ========================================================================== 3. Layout utilities ========================================================================== */ .stack { display: flex; flex-direction: column; gap: var(--gap, var(--sp-3)); min-width: 0; } .row { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--gap, var(--sp-2)); min-width: 0; } .row.nowrap { flex-wrap: nowrap; } .spread { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--gap, var(--sp-3)); min-width: 0; } .grow { flex: 1 1 auto; min-width: 0; } .center { text-align: center; justify-content: center; } .divider { border-top: 1px solid var(--md-outline-variant); } .section { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); } .section-title { font-size: var(--fs-title-medium); font-weight: var(--fw-medium); letter-spacing: calc(var(--ls-title-medium) + var(--tracking-heading)); color: var(--md-on-surface-variant); text-transform: uppercase; margin: 0; } /* ========================================================================== 4. Icons, flags, avatars ========================================================================== */ .icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.15em; fill: currentColor; stroke: none; pointer-events: none; } .icon-lg { font-size: 32px; } .icon-xl { font-size: 48px; } .flag { flex: none; width: 2em; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; background: var(--md-surface-container-high); box-shadow: 0 0 0 1px color-mix(in srgb, var(--md-outline) 55%, transparent); } .flag-lg { width: 3em; } .avatar { flex: none; width: 32px; height: 32px; border-radius: var(--r-full); object-fit: cover; background: var(--md-surface-container-highest); } /* ========================================================================== 5. State layer One list, three rules: the host is isolated, ::before is the overlay, and hover/press set its opacity. Anything that needs a state layer joins here. ========================================================================== */ .btn, .btn-icon, .fab, .chip, .nav-item, .segmented > *, .menu-item, [role="option"], .card-interactive, a.card, button.card, .game-card, .row-interactive, .swatch, .tile-btn { position: relative; isolation: isolate; } .btn::before, .btn-icon::before, .fab::before, .chip::before, .nav-item::before, .segmented > *::before, .menu-item::before, [role="option"]::before, .card-interactive::before, a.card::before, button.card::before, .game-card::before, .row-interactive::before, .swatch::before, .tile-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-emph); } .btn:hover::before, .btn-icon:hover::before, .fab:hover::before, .chip:hover::before, .nav-item:hover::before, .segmented > :hover::before, .menu-item:hover::before, [role="option"]:hover::before, .card-interactive:hover::before, a.card:hover::before, button.card:hover::before, .game-card:hover::before, .row-interactive:hover::before, .swatch:hover::before, .tile-btn:hover::before { opacity: var(--state-hover); } .btn:focus-visible::before, .btn-icon:focus-visible::before, .fab:focus-visible::before, .chip:focus-visible::before, .nav-item:focus-visible::before, .segmented > :focus-visible::before, .menu-item:focus-visible::before, [role="option"]:focus-visible::before, .card-interactive:focus-visible::before, a.card:focus-visible::before, button.card:focus-visible::before, .game-card:focus-visible::before, .row-interactive:focus-visible::before, .swatch:focus-visible::before, .tile-btn:focus-visible::before { opacity: var(--state-focus); } .btn:active::before, .btn-icon:active::before, .fab:active::before, .chip:active::before, .nav-item:active::before, .segmented > :active::before, .menu-item:active::before, [role="option"]:active::before, .card-interactive:active::before, a.card:active::before, button.card:active::before, .game-card:active::before, .row-interactive:active::before, .swatch:active::before, .tile-btn:active::before { opacity: var(--state-press); } :disabled::before, [aria-disabled="true"]::before { opacity: 0 !important; } /* ========================================================================== 6. Buttons and FAB ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-5); border: 0; border-radius: var(--r-full); background: transparent; color: var(--md-primary); font-family: var(--font-body); font-size: var(--fs-label-large); font-weight: var(--fw-medium); line-height: 1; letter-spacing: calc(var(--ls-label-large) + var(--tracking-body)); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-short) var(--ease-emph), box-shadow var(--dur-short) var(--ease-emph), border-radius var(--dur-short) var(--ease-spring), color var(--dur-short) var(--ease-emph); } /* M3 Expressive: the shape morphs on press. */ .btn:active:not(:disabled) { border-radius: var(--r-sm); } .btn .icon { font-size: 20px; } .btn-filled { background: var(--md-primary); color: var(--md-on-primary); } .btn-filled:hover:not(:disabled) { box-shadow: var(--e1); } .btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } .btn-outlined { border: 1px solid var(--md-outline); padding: 0 calc(var(--sp-5) - 1px); color: var(--md-primary); } .btn-outlined:hover:not(:disabled) { border-color: var(--md-primary); } .btn-text { padding: 0 var(--sp-3); } .btn-sm { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-label-medium); } /* Restores the 48px touch target a 40px button loses. */ .btn-sm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; height: 48px; } .btn-lg { min-height: 56px; padding: 0 var(--sp-6); font-size: var(--fs-title-medium); } .btn-full { width: 100%; display: flex; } .btn.danger { color: var(--md-error); } .btn-filled.danger { background: var(--md-error); color: var(--md-on-error); } .btn-tonal.danger { background: var(--md-error-container); color: var(--md-on-error-container); } .btn-outlined.danger { border-color: var(--md-error); } .btn:disabled, .btn[aria-disabled="true"], .btn-icon:disabled, .fab:disabled { cursor: default; box-shadow: none; color: color-mix(in srgb, var(--md-on-surface) 38%, transparent); } .btn:disabled, .btn-icon:disabled, .fab:disabled { pointer-events: none; } .btn-filled:disabled, .btn-tonal:disabled, .fab:disabled { background: color-mix(in srgb, var(--md-on-surface) 12%, transparent); } .btn-outlined:disabled { border-color: color-mix(in srgb, var(--md-on-surface) 12%, transparent); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--r-full); background: transparent; color: var(--md-on-surface-variant); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-short) var(--ease-emph), color var(--dur-short) var(--ease-emph); } .btn-icon .icon { font-size: 24px; } .btn-icon.selected, .btn-icon[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } .btn-icon.filled { background: var(--md-primary); color: var(--md-on-primary); } .btn-icon.tonal { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); } .fab { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); min-width: 56px; min-height: 56px; padding: 0; border: 0; border-radius: var(--r-md); background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: var(--e3); font-family: var(--font-body); font-size: var(--fs-label-large); font-weight: var(--fw-medium); cursor: pointer; transition: box-shadow var(--dur-short) var(--ease-emph), scale var(--dur-short) var(--ease-spring); } .fab .icon { font-size: 24px; } .fab:hover { box-shadow: var(--e4); } .fab:active { scale: .96; } .fab.extended { padding: 0 var(--sp-5); } .fab.primary { background: var(--md-primary); color: var(--md-on-primary); } .fab-sm { min-width: 40px; min-height: 40px; border-radius: var(--r-sm); } .fab-lg { min-width: 96px; min-height: 96px; border-radius: var(--r-xl); } .fab-lg .icon { font-size: 36px; } /* ========================================================================== 7. Cards ========================================================================== */ .card { display: block; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--md-surface-container-low); color: var(--md-on-surface); box-shadow: var(--e1); } .card-filled { background: var(--md-surface-container-highest); box-shadow: none; } .card-outlined { background: var(--md-surface); border: 1px solid var(--md-outline-variant); box-shadow: none; } /* An outlined card that is itself a control needs a 3:1 boundary; a static one is decoration and keeps the softer hairline. */ a.card-outlined, button.card-outlined, .card-outlined.card-interactive { border-color: var(--md-outline); } .card-tight { padding: var(--sp-4); } a.card, button.card, .card-interactive { width: 100%; text-align: left; text-decoration: none; color: var(--md-on-surface); cursor: pointer; transition: box-shadow var(--dur-med) var(--ease-emph), translate var(--dur-med) var(--ease-emph); } a.card:hover, button.card:hover, .card-interactive:hover { box-shadow: var(--e2); translate: 0 -2px; } a.card:active, button.card:active, .card-interactive:active { translate: 0 0; } .card-title { font-family: var(--font-display); font-size: var(--fs-title-large); font-weight: var(--fw-semibold); letter-spacing: calc(var(--ls-title-large) + var(--tracking-heading)); margin: 0; } /* ========================================================================== 8. Chips ========================================================================== */ .chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4); border: 1px solid var(--md-outline); border-radius: var(--r-xs); background: transparent; color: var(--md-on-surface-variant); font-family: var(--font-body); font-size: var(--fs-label-large); font-weight: var(--fw-medium); line-height: 1; letter-spacing: calc(var(--ls-label-large) + var(--tracking-body)); white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-short) var(--ease-emph), border-color var(--dur-short) var(--ease-emph), color var(--dur-short) var(--ease-emph); } /* 40px chip, 48px hit area. A [data-tooltip] on a chip replaces this pseudo with the tooltip bubble, so tooltips belong on icon buttons instead. */ .chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; height: 48px; } .chip .icon { font-size: 18px; } .chip.selected, .chip.is-selected, .chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[data-selected="true"], .chip[aria-checked="true"] { background: var(--md-secondary-container); border-color: transparent; color: var(--md-on-secondary-container); } .chip-assist { color: var(--md-on-surface); } .chip-filter { color: var(--md-on-surface); padding-inline: var(--sp-4); } /* A filter chip that carries a leading check tightens up on the left. */ .chip-filter.selected, .chip-filter[aria-pressed="true"], .chip-filter[aria-selected="true"], .chip-filter[aria-checked="true"] { padding-left: var(--sp-3); } .chip-input { padding-right: var(--sp-2); background: var(--md-surface-container-low); } .chip-elevated { border-color: transparent; background: var(--md-surface-container-low); box-shadow: var(--e1); } .chip:disabled, .chip[aria-disabled="true"] { cursor: default; pointer-events: none; border-color: color-mix(in srgb, var(--md-on-surface) 12%, transparent); color: color-mix(in srgb, var(--md-on-surface) 38%, transparent); } .chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; } /* Accent-tinted status chip. On-surface text only — see the header note. */ .pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px var(--sp-2); border-radius: var(--r-full); background: var(--md-surface-container-high); color: var(--md-on-surface-variant); font-size: var(--fs-label-medium); font-weight: var(--fw-medium); line-height: 1.4; white-space: nowrap; } .pill .icon { font-size: 16px; } .pill.accent { background: color-mix(in srgb, var(--accent, var(--md-primary)) 16%, var(--md-surface-container-high)); color: var(--md-on-surface); } .pill.streak { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); } .pill.success { background: var(--md-success-container); color: var(--md-on-success-container); } .pill.error { background: var(--md-error-container); color: var(--md-on-error-container); } .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--md-error); color: var(--md-on-error); font-size: var(--fs-label-small); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; line-height: 1; } .badge.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; } .badge.floating { position: absolute; top: 4px; right: 4px; box-shadow: 0 0 0 2px var(--md-surface); } /* ========================================================================== 9. Segmented button ========================================================================== */ /* overflow is visible *explicitly*: clipping the container cut off the :focus-visible ring of the segment inside it, and games.css' fallback layer declares overflow:hidden, so leaving it undeclared here is not enough. The end segments carry the rounding instead, which the state layer picks up through border-radius:inherit. */ .segmented { display: inline-flex; align-items: stretch; padding: 0; border: 1px solid var(--md-outline); border-radius: var(--r-full); overflow: visible; background: transparent; max-width: 100%; } .segmented > * { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); flex: 1 1 auto; min-height: 48px; padding: 0 var(--sp-4); border: 0; border-left: 1px solid var(--md-outline); background: transparent; color: var(--md-on-surface); font-family: var(--font-body); font-size: var(--fs-label-large); font-weight: var(--fw-medium); letter-spacing: calc(var(--ls-label-large) + var(--tracking-body)); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-short) var(--ease-emph), color var(--dur-short) var(--ease-emph); } .segmented > :first-child { border-left: 0; border-start-start-radius: var(--r-full); border-end-start-radius: var(--r-full); } .segmented > :last-child { border-start-end-radius: var(--r-full); border-end-end-radius: var(--r-full); } .segmented > .selected, .segmented > .is-selected, .segmented > [aria-pressed="true"], .segmented > [aria-selected="true"], .segmented > [aria-checked="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } .segmented > .icon, .segmented > * > .icon { font-size: 18px; } .segmented.block { display: flex; width: 100%; } /* ========================================================================== 10. Switch and slider ========================================================================== */ .switch { position: relative; flex: none; appearance: none; -webkit-appearance: none; width: 52px; height: 32px; margin: 0; padding: 0; border: 2px solid var(--md-outline); border-radius: var(--r-full); background: var(--md-surface-container-highest); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-short) var(--ease-emph), border-color var(--dur-short) var(--ease-emph); } /* 56x48 hit area around a 52x32 control. The offsets are measured from the padding box, which the 2px border makes 48x28 — not from the border box. */ .switch::before { content: ""; position: absolute; inset: -10px -4px; } .switch::after { content: ""; position: absolute; top: 50%; left: 4px; translate: 0 -50%; width: 16px; height: 16px; border-radius: var(--r-full); background: var(--md-outline); transition: left var(--dur-short) var(--ease-spring), width var(--dur-short) var(--ease-spring), height var(--dur-short) var(--ease-spring), box-shadow var(--dur-short) var(--ease-emph), background-color var(--dur-short) var(--ease-emph); } /* The state layer is a halo around the thumb — ::before is already spoken for as the hit-area expander, and a layer over the whole track is not M3. */ .switch:hover::after { box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-on-surface) calc(var(--state-hover) * 100%), transparent); } .switch:focus-visible::after { box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-on-surface) calc(var(--state-focus) * 100%), transparent); } .switch:active::after { box-shadow: 0 0 0 10px color-mix(in srgb, var(--md-on-surface) calc(var(--state-press) * 100%), transparent); } .switch:checked:hover::after, .switch[aria-checked="true"]:hover::after { box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-primary) calc(var(--state-hover) * 100%), transparent); } .switch:checked:focus-visible::after, .switch[aria-checked="true"]:focus-visible::after { box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-primary) calc(var(--state-focus) * 100%), transparent); } .switch:checked:active::after, .switch[aria-checked="true"]:active::after { box-shadow: 0 0 0 10px color-mix(in srgb, var(--md-primary) calc(var(--state-press) * 100%), transparent); } .switch:checked, .switch[aria-checked="true"] { background: var(--md-primary); border-color: var(--md-primary); } .switch:checked::after, .switch[aria-checked="true"]::after { left: 22px; width: 24px; height: 24px; background: var(--md-on-primary); } .switch:disabled, .switch[aria-disabled="true"] { cursor: default; pointer-events: none; border-color: color-mix(in srgb, var(--md-on-surface) 12%, transparent); background: color-mix(in srgb, var(--md-on-surface) 12%, transparent); } .slider, input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 48px; margin: 0; background: transparent; cursor: pointer; } .slider::-webkit-slider-runnable-track, input[type="range"]::-webkit-slider-runnable-track { height: 16px; border-radius: var(--r-full); background: linear-gradient(to right, var(--md-primary) 0 var(--val, 50%), var(--md-secondary-container) var(--val, 50%) 100%); } .slider::-webkit-slider-thumb, input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 6px; height: 40px; margin-top: -12px; border: 0; border-radius: 3px; background: var(--md-primary); box-shadow: 0 0 0 3px var(--md-surface); } .slider::-moz-range-track, input[type="range"]::-moz-range-track { height: 16px; border-radius: var(--r-full); background: var(--md-secondary-container); } .slider::-moz-range-progress, input[type="range"]::-moz-range-progress { height: 16px; border-radius: var(--r-full); background: var(--md-primary); } .slider::-moz-range-thumb, input[type="range"]::-moz-range-thumb { width: 6px; height: 40px; border: 0; border-radius: 3px; background: var(--md-primary); box-shadow: 0 0 0 3px var(--md-surface); } /* Handle state layer. Each engine needs its own rule — one invalid pseudo-element would drop the whole selector list. */ .slider:hover::-webkit-slider-thumb, input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--md-surface), 0 0 0 11px color-mix(in srgb, var(--md-primary) calc(var(--state-hover) * 100%), transparent); } .slider:active::-webkit-slider-thumb, input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--md-surface), 0 0 0 13px color-mix(in srgb, var(--md-primary) calc(var(--state-press) * 100%), transparent); } .slider:hover::-moz-range-thumb, input[type="range"]:hover::-moz-range-thumb { box-shadow: 0 0 0 3px var(--md-surface), 0 0 0 11px color-mix(in srgb, var(--md-primary) calc(var(--state-hover) * 100%), transparent); } .slider:active::-moz-range-thumb, input[type="range"]:active::-moz-range-thumb { box-shadow: 0 0 0 3px var(--md-surface), 0 0 0 13px color-mix(in srgb, var(--md-primary) calc(var(--state-press) * 100%), transparent); } .slider-row { display: flex; align-items: center; gap: var(--sp-4); } .slider-row .slider { flex: 1 1 auto; } /* ========================================================================== 11. Text field, autocomplete menu, settings rows ========================================================================== */ .field, .country-input { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } .field-label { font-size: var(--fs-label-large); font-weight: var(--fw-medium); color: var(--md-on-surface-variant); } .field input, .field textarea, .field select, .field-input, input.field { width: 100%; min-height: 56px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--md-outline); border-radius: var(--r-xs); background: var(--md-surface); color: var(--md-on-surface); font-family: var(--font-body); font-size: var(--fs-body-large); transition: border-color var(--dur-short) var(--ease-emph), box-shadow var(--dur-short) var(--ease-emph); } /* Doubling the border with an inset shadow keeps focus from reflowing the box. */ .field input:focus, .field textarea:focus, .field-input:focus, input.field:focus { border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); } /* Only the pointer-focus outline is dropped — keyboard focus keeps the 2px ring the spec pins, on top of the thickened border. */ .field input:focus:not(:focus-visible), .field textarea:focus:not(:focus-visible), .field-input:focus:not(:focus-visible), input.field:focus:not(:focus-visible) { outline: none; } .field input::placeholder, .field textarea::placeholder, .field-input::placeholder { color: var(--md-on-surface-variant); opacity: 1; } .field input[aria-invalid="true"], .field-input[aria-invalid="true"] { border-color: var(--md-error); box-shadow: inset 0 0 0 1px var(--md-error); } .field.has-lead input, .field.has-lead .field-input { padding-left: 48px; } .field.has-trail input, .field.has-trail .field-input { padding-right: 48px; } .field-lead, .field-trail { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; color: var(--md-on-surface-variant); pointer-events: none; } .field-lead { left: var(--sp-4); } .field-trail { right: var(--sp-2); pointer-events: auto; } .field-lead .icon, .field-trail .icon { font-size: 22px; } .field-hint { font-size: var(--fs-body-small); color: var(--md-on-surface-variant); padding-inline: var(--sp-4); } .field-error { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-body-small); font-weight: var(--fw-medium); color: var(--md-error); padding-inline: var(--sp-4); } .field-error .icon { font-size: 16px; } .menu, .ac-menu, .field-menu { position: absolute; z-index: var(--z-menu); left: 0; right: 0; top: calc(100% + var(--sp-1)); max-height: min(46vh, 340px); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: var(--sp-1); list-style: none; border-radius: var(--r-sm); background: var(--md-surface-container-high); box-shadow: var(--e2); } /* Anchored above the input — for a footer-docked field. */ .menu.above, .ac-menu.above { top: auto; bottom: calc(100% + var(--sp-1)); } .menu-item, [role="option"] { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs); color: var(--md-on-surface); font-size: var(--fs-body-medium); cursor: pointer; -webkit-tap-highlight-color: transparent; } [role="option"][aria-selected="true"], .menu-item.active, .menu-item[data-active] { background: color-mix(in srgb, var(--md-primary) 14%, transparent); font-weight: var(--fw-medium); } .menu-item .flag, [role="option"] .flag { width: 1.75em; } .menu-item .muted, [role="option"] .muted { font-size: var(--fs-body-small); } .menu-empty { padding: var(--sp-4); text-align: center; color: var(--md-on-surface-variant); font-size: var(--fs-body-medium); } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 56px; padding: var(--sp-2) 0; } .setting-row + .setting-row { border-top: 1px solid var(--md-outline-variant); } .setting-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .setting-text .muted { font-size: var(--fs-body-small); } .swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--sp-3); } .swatch { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3); /* A radio in all but name, so its boundary uses --md-outline. */ border: 1px solid var(--md-outline); border-radius: var(--r-md); background: var(--md-surface-container-low); color: var(--md-on-surface); font-size: var(--fs-label-medium); font-weight: var(--fw-medium); cursor: pointer; transition: border-color var(--dur-short) var(--ease-emph); } .swatch[aria-checked="true"], .swatch[aria-pressed="true"], .swatch.selected { border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); } .swatch-dot { width: 40px; height: 40px; border-radius: var(--r-full); background: conic-gradient(from 135deg, var(--md-primary) 0 33%, var(--md-tertiary) 33% 66%, var(--md-surface-container-highest) 66% 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--md-outline) 50%, transparent); } /* ========================================================================== 12. Lists and guess rows ========================================================================== */ .list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; min-width: 0; } .list.tight { gap: var(--sp-1); } .list-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--md-surface-container-low); color: var(--md-on-surface); font-size: var(--fs-body-medium); min-width: 0; } .list-row.row-interactive { width: 100%; text-align: left; cursor: pointer; } .list-row .flag { width: 2.25em; } .list-row-title { font-size: var(--fs-body-large); font-weight: var(--fw-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The canonical guess row. Correct also gets a left bar and a ring so the state survives without colour. */ .guess-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--md-surface-container-low); color: var(--md-on-surface); font-size: var(--fs-body-medium); min-width: 0; animation: row-in var(--dur-med) var(--ease-emph) both; } .guess-row .flag { width: 2.25em; } .guess-name { flex: 1 1 auto; min-width: 0; font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guess-dist, .guess-prox { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: var(--md-on-surface-variant); white-space: nowrap; } .guess-dir { display: inline-flex; flex: none; color: var(--md-on-surface-variant); } .guess-dir .icon { font-size: 20px; } .guess-row.correct, .guess-row[data-correct="true"], .list-row.correct, .list-row[data-correct="true"] { background: var(--md-success-container); color: var(--md-on-success-container); box-shadow: inset 4px 0 0 var(--md-success); } .guess-row.correct .guess-dist, .guess-row.correct .guess-prox, .guess-row.correct .guess-dir, .list-row.correct .muted { color: var(--md-on-success-container); } .guess-row.wrong, .guess-row[data-correct="false"] { box-shadow: inset 4px 0 0 var(--md-outline-variant); } .prox { position: relative; flex: none; width: 68px; height: 8px; border-radius: var(--r-full); background: var(--md-surface-container-highest); overflow: hidden; } .prox > * , .prox-fill { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--md-primary); transition: width var(--dur-med) var(--ease-emph); } /* ========================================================================== 13. Progress, skeleton, tooltip, empty state ========================================================================== */ .progress, progress { display: block; width: 100%; height: 8px; border: 0; border-radius: var(--r-full); background: var(--md-secondary-container); overflow: hidden; position: relative; appearance: none; -webkit-appearance: none; } .progress > *, .progress-bar { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--md-primary); transition: width var(--dur-med) var(--ease-emph); } progress::-webkit-progress-bar { background: var(--md-secondary-container); } progress::-webkit-progress-value { background: var(--md-primary); border-radius: var(--r-full); } progress::-moz-progress-bar { background: var(--md-primary); } .progress.indeterminate::after { content: ""; position: absolute; inset-block: 0; width: 40%; border-radius: inherit; background: var(--md-primary); animation: progress-slide 1.6s var(--ease-emph) infinite; } .spinner { width: var(--size, 40px); height: var(--size, 40px); flex: none; border-radius: var(--r-full); border: 4px solid color-mix(in srgb, var(--md-primary) 22%, transparent); border-top-color: var(--md-primary); animation: spin 900ms linear infinite; } .spinner-sm { --size: 20px; border-width: 2px; } .skeleton { border-radius: var(--r-sm); background: var(--md-surface-container-high); background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--md-on-surface) 7%, transparent) 50%, transparent 100%); background-size: 200% 100%; background-repeat: no-repeat; animation: shimmer 1.4s linear infinite; color: transparent; user-select: none; min-height: 1em; } .tooltip { position: absolute; z-index: var(--z-tooltip); max-width: 220px; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-xs); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); font-size: var(--fs-label-medium); line-height: var(--lh-label-medium); pointer-events: none; box-shadow: var(--e2); } /* data-tooltip is presentational only: it is invisible to assistive tech and to touch, so anything carrying one still needs its own aria-label (or aria-describedby pointing at a .tooltip). It is never the label. */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: var(--z-tooltip); left: 50%; bottom: calc(100% + 4px); translate: -50% 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-xs); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); font-size: var(--fs-label-medium); font-weight: var(--fw-regular); line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-emph); } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; } [data-tooltip].tip-below::after { bottom: auto; top: calc(100% + 4px); } .empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--md-on-surface-variant); } .empty > .icon { font-size: 48px; color: var(--md-outline); } .empty-title { font-size: var(--fs-title-medium); font-weight: var(--fw-medium); color: var(--md-on-surface); } /* ========================================================================== 14. App shell — top app bar, navigation rail, bottom nav ========================================================================== */ .topbar, .app-bar, .top-app-bar { position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: var(--sp-2); height: var(--topbar-h); padding-inline: max(var(--sp-2), env(safe-area-inset-left)) max(var(--sp-2), env(safe-area-inset-right)); background: color-mix(in srgb, var(--md-surface) 84%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-emph), background-color var(--dur-short) var(--ease-emph); } .topbar.scrolled, .app-bar.scrolled { border-bottom-color: var(--md-outline-variant); background: color-mix(in srgb, var(--md-surface-container) 92%, transparent); } .brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); color: var(--md-on-surface); text-decoration: none; } .brand-mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); background: linear-gradient(140deg, var(--md-primary), var(--md-tertiary)); color: var(--md-on-primary); font-size: 22px; } .brand-name { font-family: var(--font-display); font-size: var(--fs-title-large); font-weight: var(--fw-bold); letter-spacing: calc(.1em + var(--tracking-heading)); line-height: 1; text-transform: uppercase; white-space: nowrap; } .tagline { font-size: var(--fs-body-medium); color: var(--md-on-surface-variant); } .topbar-actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; } /* Slots the streak and account chips are injected into. Collapsed while empty so they do not each leave a gap in the action row. */ .topbar-slot { display: flex; align-items: center; min-width: 0; } .topbar-slot:empty { display: none; } .account-chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-3) 0 var(--sp-1); /* A control boundary, so --md-outline (>=3.72:1), never -variant. */ border: 1px solid var(--md-outline); border-radius: var(--r-full); background: transparent; color: var(--md-on-surface-variant); font-size: var(--fs-label-medium); font-weight: var(--fw-medium); cursor: pointer; max-width: 40vw; } .account-chip .avatar { width: 28px; height: 28px; } .account-chip .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-rail, .rail { position: fixed; z-index: var(--z-nav); left: 0; top: var(--topbar-h); bottom: 0; display: none; flex-direction: column; align-items: center; gap: var(--sp-1); width: var(--rail-w); padding: var(--sp-3) var(--sp-1); background: var(--md-surface); border-right: 1px solid var(--md-outline-variant); overflow-y: auto; overscroll-behavior: contain; } .nav-bar, .bottom-nav { position: fixed; z-index: var(--z-nav); left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--md-surface-container); border-top: 1px solid var(--md-outline-variant); } .nav-item, .nav-rail a, .nav-rail button, .nav-bar a, .nav-bar button { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 56px; padding: var(--sp-1) 2px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--md-on-surface-variant); font-size: var(--fs-label-medium); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-rail .nav-item, .nav-rail a, .nav-rail button { flex: 0 0 auto; width: 100%; } /* The spacer that pushes Stats/Settings to the foot of the rail. The rail appears at 700px, so the spacer has to work from there too. */ .nav-rail .nav-gap, .rail .nav-gap { flex: 1 1 auto; min-height: var(--sp-2); } .nav-item .icon, .nav-rail a .icon, .nav-rail button .icon, .nav-bar a .icon, .nav-bar button .icon { box-sizing: content-box; width: 24px; height: 24px; font-size: 24px; padding: 4px 18px; border-radius: var(--r-full); transition: background-color var(--dur-med) var(--ease-emph), color var(--dur-med) var(--ease-emph); } /* aria-current="false" is a legal value meaning "not current", so the bare attribute selector is never used on its own. */ .nav-item[aria-current]:not([aria-current="false"]), .nav-item.active, .nav-item.is-active, .nav-item[aria-selected="true"], .nav-rail [aria-current]:not([aria-current="false"]), .nav-bar [aria-current]:not([aria-current="false"]) { color: var(--md-on-surface); } .nav-item[aria-current]:not([aria-current="false"]) .icon, .nav-item.active .icon, .nav-item.is-active .icon, .nav-item[aria-selected="true"] .icon, .nav-rail [aria-current]:not([aria-current="false"]) .icon, .nav-bar [aria-current]:not([aria-current="false"]) .icon { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* All four sides are declared, not just the two that matter here: the padding shorthand in games.css' fallback layer would otherwise supply the other two and leave the gutters lopsided. */ .main, main { display: block; padding-top: 0; padding-right: 0; padding-bottom: calc(var(--nav-offset) + var(--sp-6)); padding-left: var(--rail-w); min-height: calc(100dvh - var(--topbar-h)); } /* .view is the router's mount point (index.html), so it is one of these: the gutter and the measure live on the content container, never on main. */ .content, .wrap, .view { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); padding-block: var(--sp-5); } .content.wide, .view.wide { max-width: 1600px; } /* The

on purpose: a closed