/* site.css — the complete visual layer of blitzmate.co. A class missing from this file ships
* unstyled. Provenance, the design values, and the compliance rules this file owns (accent as
* text, focus rings): notes/site-css.md#file-header. Phase 34 relocated the prose; nothing lost. */
/* --- Font stacks · notes/site-css.md#font-stacks ------------------------- */
:root {
--ff: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--fd: 'Space Grotesk', var(--ff);
--fb: 'Hanken Grotesk', var(--ff);
}
/* --- Base ---------------------------------------------------------------- */
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }
/* .only-mob is the exception at wide widths; .only-desk is simply the default. */
.only-mob { display: none }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }
/* --- Header (design 86-89) ----------------------------------------------- */
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 48px; border-bottom: 1px solid var(--border-soft) }
.brand { font: 700 21px var(--fd); letter-spacing: .02em }
/* THE one place the accent may be a text colour — the wordmark is 21px/700. */
.brand span { color: var(--accent) }
.header-cta { display: inline-flex; align-items: center; min-height: 44px; font: 700 14px var(--fd); background: var(--surface-raised); border: 1px solid var(--border); padding: 11px 20px; border-radius: 13px }
.age-badge { font: 600 12px var(--fb); color: var(--text-muted) }
/* --- Hero (design 91-112) ------------------------------------------------ */
.hero { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 24px; align-items: center; padding: 64px 48px 72px; min-height: 680px }
.hero-copy { position: relative; z-index: 2 }
.tc-chips { display: flex; align-items: center; gap: 8px; margin-bottom: 22px }
.tc-chips .age-badge { margin-left: 6px }
.chip { font: 500 13px var(--fd); font-variant-numeric: tabular-nums; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border-soft); padding: 5px 11px; border-radius: 24px }
.chip--on { color: var(--accent-hot); background: var(--accent-tint); border-color: rgba(255, 90, 77, .4) }
.hero-title { margin-bottom: 20px; font: 700 68px/1.02 var(--fd); letter-spacing: -.02em; text-wrap: balance }
.hero-sub { margin-bottom: 34px; max-width: 440px; font: 400 18px/1.55 var(--fb); color: var(--text-dim) }
.hero-fine { font: 400 12px var(--fb); color: var(--text-muted) }
/* --- Store badges · notes/site-css.md#store-badges — the 86.31/-14.155 pair is arithmetic, not taste --- */
.badge-row { display: flex; gap: 14px; margin-bottom: 16px }
.badge { display: inline-flex; align-items: center; min-height: 58px; border-radius: 13px } .badge--play { border-radius: 7.3px }
.badge-art { display: block; height: 58px; width: auto; max-width: none } .badge--play .badge-art { height: 86.31px; margin: -14.155px }
/* NO GLOW. Removed at the owner's request 2026-08-06; check-website-badges.cjs asserts no accent box-shadow
* reaches a badge, here or inline. Do not reinstate it. Ordering is all that is left: notes/site-css.md#no-glow */
html.platform-android .badge--play { order: -1 } html.platform-ios .badge--ios { order: -1 }
/* --- Play-in-browser button · the one LIVE action in .badge-row -----------
* Deliberately NOT .badge: that class carries rules written for the two
* placeholder STORE badges (check-website.cjs asserts there are exactly four
* and that none is interactive while unpublished). This button is a real
* and must stay one, so it takes its own class rather than weakening those
* guards. It duplicates .badge sizing so it still sits as a peer in the row.
* No artwork, so no vendor rules, and a real because
* play.blitzmate.co exists (the #store-badges-not-links reasoning is about
* links that would 404). order:-2 keeps it ahead of BOTH store badges even
* after the platform reordering above promotes one of them — while the stores
* say "coming soon", burying the only working action under a placeholder would
* be the same dishonesty that rule exists to prevent.
* NO box-shadow: check-website-badges.cjs bans an accent glow reaching a badge
* (notes/site-css.md#no-glow). The accent here is a FILL, which is what makes
* it read as the primary action without reintroducing the lit-rectangle. */
.play-cta { display: inline-flex; align-items: center; min-height: 58px; border-radius: 13px;
order: -2; gap: 9px; padding: 0 22px; background: var(--accent); color: var(--bg); font: 600 15px var(--fd) }
.play-cta:hover { background: var(--accent-hot) }
.play-cta .badge-web-icon { fill: var(--bg); flex: none }
/* --- Hero visual + the iPhone-framed match screen · notes/site-css.md#hero-visual-phone-mockup
* WEB-12 makes the APP the specification for this surface, not the design file: every value below
* traces to a source line tabulated in 34-MOCKUP-SPEC.md. .hero-visual's overflow:hidden stops the
* horizontal scrollbar; .phone-scale does ALL the scaling — never pre-multiply a value under it. */
.hero-visual { position: relative; height: 664px; overflow: hidden }
/* THE CROP · notes/site-css.md#hero-visual-phone-mockup. height is 560, not the device's 635: it reveals
* the top 764 of the 866px device and lets the rest fall outside, the way an app site conventionally
* shows a phone. Nothing is fabricated — the app itself leaves 189px empty under "Your move"
* (BOARD_MAX caps the board at 350), and that region is simply not in view. overflow:hidden IS the
* crop; the mask only softens its edge so the last 64px dissolve into --bg rather than ending on a
* hard line 8px under the status text. The two mask stops are tied to the height on this line — the
* second one IS it — and [mockup] fails the build if they drift apart or the crop moves. */
.phone-frame { position: absolute; left: 0; top: 8px; z-index: 1; width: 302px; height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 496px, transparent 560px); mask-image: linear-gradient(180deg, #000 496px, transparent 560px) }
.phone-scale { width: 412px; transform: scale(.733); transform-origin: top left }
/* position:relative is the notch's containing block. .phone must NOT get one: it stays a plain
* seven-child column and the notch is its absolutely positioned SIBLING, which is what keeps the
* device 412x866. In flow the notch makes it 899, and 899 scaled crops the bottom of the screen. */
.phone-device { position: relative; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 56px }
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1; width: 157px; height: 33px; border-radius: 0 0 20px 20px; background: #000 }
/* GameScreen.tsx:289-299 + spacing.ts:9-15. 61px top = the 47px inset SafeAreaView edges={['top']}
* consumes, plus 14px of padding; edges={['top']} reserves NOTHING at the bottom, so neither does
* this. No justify-content and no auto margin anywhere below — the app sets neither, and the pair
* is exactly what parked the old chip row at the bottom of an over-tall box. No border either:
* under the border-box reset one would silently render the board at 348px instead of 350. */
.phone { width: 390px; height: 844px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; padding: 61px 20px 14px; background: var(--bg); border-radius: 46px; overflow: hidden }
/* GameTopBar.tsx:83-101. The bar's height is its tallest child, the 32x32 chat button
* (chat/ChatToggleButton.tsx:21) — which ships whenever the match is active, as here. */
.gtb { display: flex; align-items: center; min-height: 32px }
.gtb-side { flex: 1; display: flex; flex-direction: column; align-items: flex-start }
.gtb-side--r { align-items: flex-end }
.gtb-center { flex: 2; display: flex; flex-direction: column; align-items: center }
.gtb-right { display: flex; align-items: center; gap: 12px }
.gtb-label { font: 600 12px var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim) }
.gtb-label--resign { color: var(--negative) }
.gtb-chat { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex: none }
/* The glyph's colour must stay a token, and a presentation fill= attribute cannot be one. */
.gtb-chat path { fill: var(--text-dim) }
/* PlayerRow.tsx:58-70 — the row has NO gap; spacing.ts:69's 8px is a margin on the identity. */
.player-row { display: flex; align-items: center }
.avatar { display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--bg); flex: none }
/* spacing.ts:65-67: a rounded SQUARE, overriding the shared 50%. It carries no letter, so no font. */
.phone .avatar { width: 38px; height: 38px; border-radius: 11px }
.p-id { flex: 1; min-width: 0; margin-left: 8px }
.p-name { font: 400 15px var(--fb); color: var(--text) }
.p-rating { font: 600 12px var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim) }
/* ClockPill.tsx:53-68 + spacing.ts:71-73. tabular-nums comes AFTER the shorthand, which resets it. */
.clock { font: 600 25px/25px var(--fd); font-variant-numeric: tabular-nums; padding: 10px 16px; border-radius: 13px }
.clock--idle { background: var(--surface); color: var(--text-dim2) }
.clock--low { background: var(--clock-low); color: #FFFFFF; animation: lowPulse 1s ease-in-out infinite }
/* CapturedStrip.tsx:22,37-42. Both strips are empty at this FEN — that IS the app's empty state,
* a full-height blank row with no placeholder glyph. StatusLine.tsx:20-30 closes the column. */
.cap { min-height: 15px }
.status { text-align: center; font: 400 15px var(--fb); color: var(--text) }
/* The app's canonical off-centre coin (LobbyHeader.tsx:31-39). Never centred, never an asset. */
.coin { border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-in), var(--gold-out)); flex: none }
/* --- Board (design 133-137) · notes/site-css.md#board-squares — .sq--hl is ADDITIVE --- */
.board { display: grid; grid-template-columns: repeat(8, 1fr); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 36px rgba(0, 0, 0, .45) }
.sq { aspect-ratio: 1; display: flex; align-items: center; justify-content: center }
.sq--l { background: var(--sq-l) } .sq--d { background: var(--sq-d) }
.sq--l.sq--hl { background: var(--sq-lm-l) } .sq--d.sq--hl { background: var(--sq-lm-d) }
.pc { width: 80%; height: 80%; display: block } .pc--snap { animation: snapIn .55s cubic-bezier(.2, .8, .2, 1) both }
/* The library is taken out of flow by zero size + clipping, NOT by
* hiding the element outright — that breaks