:root {
    /* Palette - matches the Flutter app's "Warm Grove" theme
    (mahjong_mobile_client/lib/themes.dart), so both clients read as the
    same product instead of two unrelated ones. These five were dead code
    before this - every var(--background-colour) etc. reference across
    common.css/register.css resolved to nothing, because this whole block
    used to be commented out. */
    --surface-parchment: #FBF3E3;
    --accent-terracotta: #E8735F;
    --ink-cocoa: #4A3B2A;
    --moss-green: #7FA88C;
    --dusty-orchid: #D9A6D4;
    /* Accept/decline are a functional UX convention (green=go, red=stop),
    not a branding choice - matches the Flutter app's acceptGreen/
    declineRed exactly (lib/themes.dart), kept as real green/red rather
    than force-fit into the decorative palette above. */
    --accept-green: #4C8C5B;
    --decline-red: #B33A3A;

    /* Semantic aliases - existing CSS already references these names, so
    the roles stay the same even though the values are new. */
    --background-colour: var(--surface-parchment);
    --font-color: var(--ink-cocoa);
    --game-button-background: var(--accent-terracotta);
    --game-button-font-color: #ffffff;
    /* Matches the Flutter app's buttons - it never sets an explicit shape,
    so Material3's default ElevatedButton radius (20dp on a ~48dp-tall
    button) applies, reading as a pill. A single large px value here does
    the same job at any button height, since border-radius clamps to a
    true stadium once it exceeds half the box's height - no per-button
    tuning needed. */
    --game-button-border-radius: 999px;
    --small-button-color: var(--moss-green);
    --border-color: 1px solid #e6d9c3;
    --translucent: rgba(0, 0, 0, 0.5);
    --default-padding: 20px;
    --default-margins: 20px;
    --icon-size: 64px;
    --avatar-size: 128px;
    --profile-size: 256px;

    /* Spacing scale - the single source every dialog should pull its
    padding/margins/gaps from, instead of each one hand-picking a value.
    Matches the de facto scale the Flutter app's widgets already converge
    on (EdgeInsets.all(8/16/12) etc.) even though it was never named there
    either - both apps read from the same steps now. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Radius/shadow - previously redefined per-file (mobile-landscape.css
    had its own --screen-border-radius/--card-border-radius/--box-shadow)
    with values that happened to agree; consolidated here as the one
    definition so they can't silently drift apart again. */
    --screen-border-radius: 16px;
    --card-border-radius: 12px;
    --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

    /* Icon glyph sizing - distinct from --icon-size above, which is an
    avatar *image* size (128px avatars use it too), not a glyph size. */
    --icon-size-sm: 20px;
    --icon-size-md: 24px;

    /* Font variables. Potta One is reserved for real headline moments
    only (see h1/h2/h3/.title below) - it's a heavy bubble face that turns
    mushy at small sizes, same reasoning as the Flutter app's type scale -
    so it's deliberately NOT --main-font-face (the page-wide default,
    which needs to stay legible for body copy and buttons). */
    --main-font-face: "Nunito", "Raleway", sans-serif;
    --heading-font-face: "Potta One", "Hammersmith One", sans-serif;
  }

  h1, h2, h3, .title {
    font-family: var(--heading-font-face);
    color: var(--accent-terracotta);
  }

  /* Nothing zeroed the browser's default body margin before - harmless
  while .screen was position:absolute, but .screen is now position:fixed;
  inset:0, which needs a true full-bleed html/body underneath it to sit
  flush against every edge. */
  html, body {
    margin: 0;
    height: 100%;
  }

/* Material Symbols - every icon in the app, having fully replaced the
vendored FontAwesome webfont/SVGs (both removed - was 1,392 glyphs
shipped for ~44 actually used, plus a colliding raw-emoji/unicode-glyph
mix). The variable-font axes (fill/weight/grade/optical size) need
setting per element since the browser has no context to infer them from,
same reasoning as Google's own usage docs. Requires the stylesheet link
in each page's <head>: see mobile-landscape.html/landing.html/
onboarding.html/register.html. */
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: var(--icon-size-md);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.material-symbols-rounded.icon-sm {
  font-size: var(--icon-size-sm);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}