/* Bits around the game (public/extras.js) and the legal pages. Uses the
   tokens from style.css. */
.xt-link { background: none; border: 0; color: var(--muted); font: inherit; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; margin: 0 auto; display: block; }
.xt-err { color: var(--gold); font-size: .9rem; margin: 0; }
.xt-radio { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); cursor: pointer; }
.xt-reasons { gap: 8px; }
.xt-credits { font-size: 1.6rem; font-weight: 700; margin: 4px 0; }
.xt-foot { display: flex; justify-content: center; gap: 18px; font-size: .85rem; margin-top: 4px; }
.xt-foot a, .legal a { color: var(--muted); }
.xt-biz { text-align: center; color: var(--muted); font-size: .78rem; margin: 0; }

.legal { max-width: 680px; margin: 0 auto; padding: 28px 16px 60px; line-height: 1.8; }
.legal h1 { font-size: 1.6rem; margin: 0 0 4px; }
.legal h2 { font-size: 1.1rem; margin: 26px 0 6px; }
.legal p, .legal li { color: var(--text); }
.legal .meta { color: var(--muted); font-size: .9rem; }
.legal .back { display: inline-block; margin-bottom: 18px; }

/* Lobby: team leader tag (captainMode 'fixed') */
.tag.lead { background: var(--gold); color: #1d1606; display: inline-flex; align-items: center; gap: 3px; }
.tag.lead svg { width: 12px; height: 12px; }
.tag.host { font-size: .7rem; }
.chip [data-act="setLeader"] { padding: 3px 8px; min-height: 0; font-size: .72rem; margin-inline-start: auto; white-space: nowrap; }

/* Round intro: tells players they just wait */
.wait-line { text-align: center; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--bg-2); color: var(--text); font-size: 1rem; }
.wait-line b { color: var(--gold); }

/* team votes on the move: a small count in the cell corner (cell size unchanged) */
.cell .vt { position: absolute; top: 5px; right: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  background: var(--gold); color: var(--ink, #14233D); font-family: var(--display); font-size: .75rem; line-height: 20px;
  text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }

/* "FLIP على تلفونك" install bar at the top of the page */
.install-bar { background: var(--bg-2); box-shadow: 0 4px 0 var(--edge); padding: 10px 16px; position: relative; z-index: 6; }
.install-row { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.install-row img { border-radius: 10px; flex: none; }
.install-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.install-txt b { font-family: var(--display); font-size: .95rem; }
.install-txt span { color: var(--muted); font-size: .8rem; }
.install-row .btn.small { width: auto; flex: none; padding-inline: 14px; }
.install-x { flex: none; width: 32px; height: 32px; border: 0; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 0; display: grid; place-items: center; }
.install-how { max-width: 560px; margin: 10px auto 2px; display: grid; gap: 8px; font-size: .9rem; }
.install-how > div { display: flex; align-items: center; gap: 8px; }
.install-how .no { flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--well); display: grid; place-items: center; font-family: var(--display); font-size: .8rem; }
.install-how .ic { width: 18px; height: 18px; vertical-align: -3px; }

/* question categories in the lobby */
.cats .label { margin-bottom: 8px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cat { border: 0; border-radius: 10px; padding: 8px 12px; min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-3); color: var(--muted); box-shadow: 0 3px 0 var(--edge); font-size: .9rem; font-weight: 600; }
.cat.on { background: var(--cream); color: var(--bg); box-shadow: 0 3px 0 var(--cream-edge); }
button.cat:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }

/* contact icons (landing + legal pages) */
.social { display: flex; justify-content: center; gap: 12px; margin: 14px 0 6px; }
.social a { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-3); color: var(--text); box-shadow: 0 4px 0 var(--edge); }
.social a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.social .ic { width: 24px; height: 24px; }
.legal .social { justify-content: flex-start; }
.legal .social a { color: var(--text); }

/* copyright line on every page, small and quiet */
.copy { text-align: center; color: var(--muted); opacity: .7; font-size: .72rem; padding: 18px 16px 8px; }

/* room code: keep the wide letter gaps for the typed code only; Arabic placeholder letters must join (iPad Safari) */
.code-input:placeholder-shown { letter-spacing: 0; font-weight: 600; }
.code-input::placeholder { letter-spacing: 0; }

/* page = content + copyright pinned to the bottom of the screen on every screen */
body:has(> main) { display: flex; flex-direction: column; padding-bottom: 0; }
body:has(> main) > main { flex: 1 0 auto; width: 100%; }
.copy { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
body:has(#chat:not(.hidden)) .copy { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* whole-site lock (invite scope 'site'): nothing of the game shows until the code is in */
html.xt-prelock #main, html.xt-prelock #hud, html.xt-prelock #chat, html.xt-prelock #modal, html.xt-prelock .install-bar, html.xt-prelock #practice,
html.xt-locked #main, html.xt-locked #hud, html.xt-locked #chat, html.xt-locked #modal, html.xt-locked .install-bar, html.xt-locked #practice { display: none !important; }
.xt-lock { flex: 1 0 auto; display: grid; place-items: center; padding: 24px 16px; }
.xt-lock-box { width: 100%; max-width: 380px; text-align: center; }
.xt-lock-logo { width: 220px; max-width: 70%; height: auto; margin: 0 auto 36px; display: block; }
.xt-lock .field { text-align: center; }
.xt-lock-join { margin-top: 22px; font-size: .9rem; }