:root {
  /* Cuban flag palette */
  --cuba-blue: #0a3d91; --cuba-blue-d: #06286a; --cuba-red: #cb1515; --cuba-red-d: #9e0f0f; --cuba-white: #f6f7fb;
  /* mahogany table */
  --wood-dark: #2e1a0e; --wood-mid: #5a3a22; --wood-mid2: #6a3f22; --wood-light: #7d4e2c;
  --ivory: #f4ecdb; --ivory-shade: #cdbf9f;
  --plate: #6a4528; --plate-line: #43290f;
  --room: #14100d;
  --text: #f0e9dc; --muted: #c4b6a0; --good: #43A047;
}
* { box-sizing: border-box; }
/* The whole viewport is the game's dark blue — so no default-white ever shows
   around the layout on mobile (letterboxing, dynamic toolbars, or the safe areas
   of notched / rounded-corner phones). #061638 is the game gradient's outer stop,
   so the fill blends seamlessly with the edges of #game. */
html, body { margin: 0; padding: 0; height: 100%; background: #061638; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); min-height: 100%; }
/* Fill the viewport, including modern mobile browsers where 100vh ignores the
   dynamic URL bar: 100dvh tracks the *visible* viewport (100vh is the fallback). */
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.hidden { display: none !important; }
#bootLoading { display: none; }
html.booting body > :not(#bootLoading) { display: none !important; }
html.booting #bootLoading { display: flex; min-height: 100vh; min-height: 100dvh; align-items: center; justify-content: center; flex-direction: column; gap: 24px; }
#bootLoading strong { font-size: 32px; font-family: Georgia, serif; }
.boot-spinner { width: 24px; height: 24px; border: 2px solid #ffffff30; border-top-color: #f0e9dc; border-radius: 50%; animation: boot-spin 1s linear infinite; }
#bootRetry { display: none; color: inherit; background: transparent; border: 1px solid #ffffff50; border-radius: 50%; font-size: 28px; width: 48px; height: 48px; }
html.boot-failed #bootRetry { display: block; }
html.boot-failed .boot-spinner { display: none; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-spinner { animation: none; } }
/* Set by js/entry.js before the body is parsed, cleared by show() in js/dom.js. Keeps the
   homepage from painting when the URL is already heading into the table (/?play=lobby), so
   La Esquina's "CREAR MESA" lands in the setup dock instead of flashing the homepage first. */
html.entering-game #lobby { display: none; }

/* Localisation first paint. js/i18n-boot.js (a classic script in <head>) adds .i18n-boot when
   the resolved language is NOT the language this markup is written in, so the Spanish original
   is never seen by an English visitor. js/i18n-apply.js removes it at the end of <body>, the
   moment the text has been rewritten — and i18n-boot.js arms its own timeout to remove it
   anyway if that script never runs, so the page can never stay invisible.
   `visibility` rather than `display`: layout is still computed, so revealing it causes no
   reflow, and a Spanish visitor never gets the class at all. */
html.i18n-boot body { visibility: hidden; }
.screen { flex: 1; display: flex; flex-direction: column; }

/* ─── Development-mode banner ────────────────────────────────────────────
   Shown only when the server reports devMode (DEV_BYPASS_AUTH=1, non-prod).
   Fixed at the very top; the sticky nav sits below it. `body.dev-banner-on`
   reserves the banner's height so nothing is ever covered.
   Capicúa theme: red/white/blue, small, professional — not an error. */
.dev-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 30px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--cuba-white);
  background: linear-gradient(90deg, var(--cuba-blue-d) 0%, var(--cuba-blue) 50%, var(--cuba-blue-d) 100%);
  border-bottom: 2px solid var(--cuba-red);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  white-space: nowrap; overflow: hidden;
}
.dev-banner-icon { font-size: 14px; line-height: 1; }
.dev-banner-title { color: #fff; letter-spacing: .12em; }
.dev-banner-sep { width: 1px; height: 14px; background: rgba(255,255,255,.35); }
.dev-banner-sub { font-weight: 600; color: rgba(246,247,251,.82); }
/* Reserve space below the banner so the sticky nav and content stay visible. */
body.dev-banner-on { padding-top: 30px; }
@media (max-width: 560px) {
  .dev-banner { font-size: 11px; gap: 7px; padding: 0 10px; }
  .dev-banner-sep { display: none; }
  .dev-banner-sub { display: none; }
  .dev-banner-title { letter-spacing: .08em; }
}

/* ── Reconnecting pill ────────────────────────────────────────────────────────
   Appended to <body> by dom.js, not written into any one screen: reconnecting can happen from
   the game, the waiting room or the lobby, and every other banner in this app lives inside one
   section or another. Fixed, centred at the top, and pointer-events:none so it can never cover
   a control or swallow a tap. */
.reconnect-pill {
  position: fixed; z-index: 3000; top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%; transform: translateX(-50%); pointer-events: none;
  padding: 7px 15px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 800; color: #eaf1ff;
  background: rgba(10, 20, 45, .92); border: 1px solid rgba(151, 182, 255, .28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.reconnect-pill.hidden { display: none; }

/* ── the Capicúa domino icon ───────────────────────────────────────────────
   U+1F06B, the Unicode DOMINO TILE, has no glyph in Apple Color Emoji: on an iPhone it
   renders as a tofu box. It was being used as the icon on CREATE TABLE, OPEN TABLES and the
   table-setup headings, so the first thing a new player saw there was a missing character.
   This is the same tile as public/favicon.svg — upright body, a divider at the waist, a 1|2
   face — drawn instead of typed, so it needs no emoji font and cannot go missing.
   It is a MASK, not a background image, so the tile takes the colour of the text beside it
   and follows it wherever it is used. Sized in em, so it scales with its label. */
.ico-domino {
  display: inline-block; flex: none;
  width: 1em; height: 1em; vertical-align: -0.145em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22%3E%3Crect x=%225.25%22 y=%221.75%22 width=%229.5%22 height=%2216.5%22 rx=%222.25%22/%3E%3Cpath d=%22M5.25 10h9.5%22/%3E%3C/g%3E%3Cg fill=%22%23000%22%3E%3Ccircle cx=%2210%22 cy=%225.9%22 r=%221.5%22/%3E%3Ccircle cx=%228.1%22 cy=%2213.2%22 r=%221.5%22/%3E%3Ccircle cx=%2211.9%22 cy=%2215.6%22 r=%221.5%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22%3E%3Crect x=%225.25%22 y=%221.75%22 width=%229.5%22 height=%2216.5%22 rx=%222.25%22/%3E%3Cpath d=%22M5.25 10h9.5%22/%3E%3C/g%3E%3Cg fill=%22%23000%22%3E%3Ccircle cx=%2210%22 cy=%225.9%22 r=%221.5%22/%3E%3Ccircle cx=%228.1%22 cy=%2213.2%22 r=%221.5%22/%3E%3Ccircle cx=%2211.9%22 cy=%2215.6%22 r=%221.5%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
/* Beside a label, the tile wants a little air of its own. */
.ico-domino + * { margin-left: .45em; }