/* Shared WordTwiq typography and surfaces for the game, public pages and account flows. */
@font-face { font-family: Gabarito; src: url('/Gabarito.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Gabarito; src: url('/fonts/GabaritoBold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Fredoka; src: url('/fonts/FredokaBold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root { --brand-ink: #24213b; --brand-bg: #f5f3ee; --brand-purple: #7048e8; --brand-purple-dark: #4f2ead; --brand-edge: #dcd9e6; --brand-radius: 14px; --brand-sans: Gabarito, ui-rounded, system-ui, sans-serif; --brand-display: Fredoka, Gabarito, ui-rounded, system-ui, sans-serif; }
:focus-visible { outline: 3px solid var(--brand-purple-dark); outline-offset: 3px; }
.public-page { font-family: var(--brand-sans); color: var(--brand-ink); background: var(--brand-bg); }
.public-page h1, .public-page h2 { font-family: var(--brand-display); }
.public-page a:not(.play) { color: var(--brand-purple-dark); }
.public-page section { border: 1px solid var(--brand-edge); border-radius: var(--brand-radius); }
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; } }

/* Long-form public pages keep the same local fonts and quiet reading surfaces. */
.public-page main { box-sizing: border-box; width: min(860px, 100%); min-width: 0; margin: 28px auto; padding: 24px; }
.public-page section { padding: 24px; box-shadow: none; }
.public-page p, .public-page li, .public-page a { overflow-wrap: anywhere; }
.public-page ul, .public-page ol { padding-left: 1.35em; }
.public-page .pair { margin: 10px 0; }
.public-page .play { border-radius: var(--brand-radius); font: 700 18px/1.4 var(--brand-sans); }
@media (max-width: 480px) { .public-page main { margin: 8px auto; padding: 16px; } .public-page section { padding: 18px; } }

/* One quiet footer composition across the game and all supporting pages. */
.site-footer { box-sizing: border-box; flex: 0 0 auto; width: min(1180px, 100%); margin: 0 auto; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); text-align: center; color: #676477; font: 400 14px/1.4 var(--brand-sans); }
.site-footer .footer-credit { margin: 0; color: inherit; font: 700 12px/1.5 var(--brand-sans); }
.site-footer .footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; }
.site-footer .footer-app-tools { display: contents; }
.site-footer .footer-links a, .site-footer .footer-links button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 0; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--brand-purple-dark); font: 700 14px/1.3 var(--brand-sans); text-decoration: none; overflow-wrap: anywhere; }
.site-footer .footer-links a:hover, .site-footer .footer-links button:hover { text-decoration: underline; text-underline-offset: 3px; }
.public-page { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.public-page main { flex: 1 0 auto; }