/* rl.f.cat: the page around the game (the game and its rooms: assets/turbogol/turbogol.css) */
:root { color-scheme: light; }
[data-theme="dark"] {
  color-scheme: dark;
  --ink:#eceae4; --ink-2:#c5c7cd; --mute:#a3a8b2; --faint:#868b95;
  --line:#2b2f37; --line-2:#22262d; --paper:#111317; --card:#191c22;
  --accent-ink:#ff8a63; --accent-soft:rgba(255,90,44,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.rl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(1180px, 100%); margin: 0 auto; padding: 14px 16px 0; }
.rl-brand { font: 700 20px var(--mono); text-decoration: none; letter-spacing: -.02em; }
.rl-brand span { color: var(--mute); }
.rl-name { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; }
.rl-name[hidden] { display: none; }
.rl-name small { color: var(--mute); font-weight: 500; }
.rl-main { flex: 1; width: min(1180px, 100%); margin: 0 auto; padding: 8px 16px 24px; }
.rl-foot { width: min(1180px, 100%); margin: 0 auto; padding: 18px 16px 28px; color: var(--mute); font-size: 12.5px; }
.field-input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink); font: 500 15px var(--sans); }
.field-input:focus { outline: 2px solid #2f6fe0; outline-offset: 1px; border-color: transparent; }
.form-error { min-height: 1em; margin: 0; color: var(--accent-ink); font-size: 13px; }
.jg-btn { text-decoration: none; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 3000; max-width: min(520px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 12px; background: #12141a; color: #fff; font-size: 14px; box-shadow: var(--shadow-lg); transform: translate(-50%, 20px); opacity: 0; transition: opacity .2s, transform .2s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* The name dialog */
.rl-dialog { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; padding: 16px; background: rgba(8, 10, 16, .55); }
.rl-dialog form { display: grid; gap: 12px; width: min(400px, 100%); padding: 22px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-lg); }
.rl-dialog h2 { margin: 0; font-size: 20px; }
.rl-dialog p { margin: 0; color: var(--mute); font-size: 14px; }
.rl-dialog .row { display: flex; gap: 8px; justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }