/* ---------- Superapp shell (home, sections, game landings) ---------- */
:root {
  --hub-bg: #0a1210;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .08);
  --games-1: #17614a; --games-2: #0b3327;
  --menus-1: #c4643c; --menus-2: #6f2716;
  --money-1: #2b7f8f; --money-2: #123c47;
}

.screen.hub {
  background:
    radial-gradient(80% 45% at 15% 0%, rgba(23, 97, 74, .35), transparent 70%),
    radial-gradient(70% 40% at 100% 100%, rgba(43, 127, 143, .18), transparent 70%),
    var(--hub-bg);
}
.hub-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px 6px; max-width: 520px; width: 100%; margin: 0 auto;
}
.hub-title { flex: 1; text-align: center; font-weight: 700; font-size: 1.05rem; }
.icon-btn svg, .tile-go, .chev { width: 20px; height: 20px; }
a.icon-btn { color: inherit; }
.ghost-space { visibility: hidden; }
.mark { display: flex; align-items: center; gap: 8px; color: var(--gold-2); }
.mark svg { width: 22px; height: 22px; }
.mark span { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; }
.profile-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: .88rem; font-weight: 600; max-width: 60%;
}
.profile-chip span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-chip .avatar { width: 30px; height: 30px; font-size: .85rem; }

.hub-wrap {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  padding: 8px 16px calc(24px + var(--safe-b)); max-width: 520px; width: 100%; margin: 0 auto;
}
.hub-wrap > * { flex-shrink: 0; } /* let the column scroll instead of squashing its cards */
.hello h1 { font-size: 1.7rem; font-weight: 700; margin: 10px 0 2px; letter-spacing: -.01em; }
.hello p { margin: 0 0 4px; color: var(--muted); }

/* Section tiles */
.tile {
  position: relative; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  padding: 16px; border-radius: 22px; color: var(--ink); text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  transition: transform .15s ease;
}
.tile:active { transform: scale(.98); }
.tile h2 { margin: 6px 0 0; font-size: 1.25rem; font-weight: 700; }
.tile p { margin: 0; font-size: .85rem; color: rgba(245, 239, 225, .78); line-height: 1.35; }
.tile-icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .16);
}
.tile-icon svg { width: 22px; height: 22px; }
.tile-icon.big { width: 56px; height: 56px; border-radius: 16px; }
.tile-icon.big svg { width: 30px; height: 30px; }
.tile-games { min-height: 190px; justify-content: flex-end; background: radial-gradient(120% 90% at 80% 20%, var(--games-1), var(--games-2)); border-color: var(--gold-dim); }
.tile-games .tile-body { position: relative; z-index: 1; max-width: 62%; }
.tile-games .tile-icon { color: var(--gold-2); }
.tile-go { position: absolute; right: 16px; bottom: 18px; color: var(--gold-2); }
.tile-art { position: absolute; right: 18px; top: 10px; width: 150px; height: 120px; transform: rotate(6deg); }
.tile-art .card { position: absolute; left: 50%; top: 14px; margin-left: -34px; }
.tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile-row .tile { min-height: 172px; }
.tile-menus { background: linear-gradient(160deg, var(--menus-1), var(--menus-2)); }
.tile-expenses { background: linear-gradient(160deg, var(--money-1), var(--money-2)); }
.soon-pill {
  align-self: flex-start; margin-top: auto; padding: 3px 9px; border-radius: 999px; font-size: .64rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; background: rgba(0, 0, 0, .28); color: rgba(255, 255, 255, .85);
  vertical-align: middle;
}

/* Active table shortcut */
.resume-slot:empty { display: none; }
.resume {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--ink);
  background: rgba(217, 180, 90, .1); border: 1px solid var(--gold-dim);
}
.resume .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.resume small { color: var(--muted); font-size: .78rem; }
.resume-go { font-weight: 700; color: var(--gold-2); font-size: .9rem; }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: #5fd08a; box-shadow: 0 0 0 0 rgba(95, 208, 138, .6); animation: dot 1.8s infinite; flex: none; }
@keyframes dot { 70% { box-shadow: 0 0 0 10px rgba(95, 208, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 208, 138, 0); } }

/* Games list */
.code-input {
  height: 52px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--line); outline: none;
  background: rgba(0, 0, 0, .28); color: var(--ink); min-width: 0;
}
.code-input::placeholder { letter-spacing: .08em; font-weight: 500; font-size: 1rem; color: var(--muted); text-transform: none; }
.code-input:focus { border-color: var(--gold-dim); box-shadow: 0 0 0 3px rgba(217, 180, 90, .15); }
.join-inline { display: flex; gap: 8px; }
.join-inline .code-input { flex: 1; }
.join-inline .btn { width: auto; }
.game-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.game-card {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); transition: transform .15s ease;
}
.game-card:active { transform: scale(.98); }
.game-card.soon { opacity: .7; }
.game-card .grow { flex: 1; min-width: 0; }
.game-card h3 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.game-card h3 .soon-pill { margin: 0; background: rgba(217, 180, 90, .16); color: var(--gold-2); }
.game-card p { margin: 3px 0 4px; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.game-card small { font-size: .72rem; color: var(--gold-2); font-weight: 600; letter-spacing: .04em; }
.game-card .chev { color: var(--muted); flex: none; }
.game-art {
  position: relative; width: 74px; height: 88px; flex: none; border-radius: 14px;
  background: radial-gradient(100% 100% at 50% 30%, var(--games-1), var(--games-2)); border: 1px solid var(--gold-dim);
}
.game-art .card { --cw: 34px; position: absolute; left: 50%; top: 50%; margin: -24px 0 0 -17px; }
.game-art .tilt-l { transform: rotate(-14deg) translate(-12px, 2px); }
.game-art .tilt-c { transform: translateY(-2px); }
.game-art .tilt-r { transform: rotate(14deg) translate(12px, 2px); }

/* Game landing */
#landing .topbar-title { visibility: hidden; }
#landing .join-box .code-input { text-align: center; }

/* Coming soon */
.soon-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 26px 18px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1);
}
.soon-hero .soon-pill { align-self: center; margin: 0; }
.soon-hero p { margin: 0; font-size: 1.05rem; font-weight: 600; max-width: 300px; }
.soon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.soon-list li {
  padding: 12px 14px 12px 40px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  font-size: .9rem; line-height: 1.4; position: relative;
}
.soon-list li::before {
  content: ''; position: absolute; left: 16px; top: 17px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--gold); box-sizing: border-box;
}

/* Joining */
.joining { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Public home: hero, about, legal footer */
.hero { position: relative; border-radius: 22px; overflow: hidden; margin-top: 4px; border: 1px solid var(--line); }
.hero img { display: block; width: 100%; height: 240px; object-fit: cover; object-position: 50% 88%; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 18, 16, 0) 35%, rgba(6, 18, 16, .55) 62%, rgba(6, 18, 16, .95) 100%); }
.hero .hello { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; }
.hero .hello h1 { margin: 0 0 2px; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.hero .hello p { color: rgba(245, 239, 225, .85); }
.about { padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.about h2 { margin: 0 0 6px; font-size: 1.05rem; }
.about p { margin: 0 0 10px; font-size: .9rem; line-height: 1.5; color: rgba(245, 239, 225, .82); }
.about p:last-child { margin: 0; display: flex; align-items: center; gap: 6px; }
.legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 8px 0 4px; font-size: .78rem; color: var(--muted); }
.legal-links a { color: var(--muted); }

a.btn { color: var(--ink); text-decoration: none; }

/* Account screens */
.auth-wrap { gap: 16px; }
.auth-brand { text-align: center; }
.auth-brand img { border-radius: 16px; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }
.auth-brand p { margin: 10px auto 0; max-width: 300px; color: var(--muted); font-size: .92rem; }
.auth-brand p:empty { display: none; }
.auth-panel { display: flex; flex-direction: column; gap: 12px; }
.auth-panel .step { display: flex; flex-direction: column; gap: 12px; }
.btn.google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; gap: 12px; text-decoration: none; }
.g-logo { width: 20px; height: 20px; }
.field .hint { font-size: .74rem; color: var(--muted); }
.pw { position: relative; display: flex; }
.pw input { flex: 1; min-width: 0; padding-right: 76px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: 10px; font-size: .78rem; color: var(--gold-2); background: rgba(255, 255, 255, .06); }
.otp {
  height: 64px; border-radius: 16px; border: 1px solid var(--gold-dim); background: rgba(0, 0, 0, .28); color: var(--gold-2); outline: none;
  text-align: center; font: 800 2rem 'Inter', sans-serif; letter-spacing: .45em; padding-left: .45em;
}
.otp::placeholder { color: rgba(245, 239, 225, .25); }
.link.right { align-self: flex-end; padding: 0; font-size: .85rem; }
.link.center { align-self: center; }
a.inline { color: var(--gold-2); }
.auth-panel .divider span, .panel .divider span { white-space: nowrap; }

/* Profile */
.avatar .emoji { font-size: 1.15em; line-height: 1; }
.avatar.xl { width: 64px; height: 64px; font-size: 1.6rem; }
.profile-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.profile-card h2 { margin: 0; font-size: 1.25rem; }
.profile-card p { margin: 2px 0 6px; overflow-wrap: anywhere; }
.profile-card .grow { flex: 1; min-width: 0; }
.panel-lite { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
details.panel-lite summary { cursor: pointer; font-weight: 600; list-style: none; }
details.panel-lite summary::after { content: '›'; float: right; transition: transform .2s; }
details.panel-lite[open] summary::after { transform: rotate(90deg); }
details.panel-lite form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.at { display: flex; align-items: center; gap: 6px; }
.at b { color: var(--muted); }
.at input { flex: 1; min-width: 0; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.emoji-grid button, .swatches button { height: 40px; border-radius: 12px; font-size: 1.3rem; background: rgba(255, 255, 255, .06); border: 2px solid transparent; }
.emoji-grid button.sel, .swatches button.sel { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217, 180, 90, .3); }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 8px; }
.swatches button { height: 30px; border-radius: 50%; }
.field input:not([type]), .field input[type=email], .field input[type=password], .field input[type=text] { width: 100%; }

/* ---------- Juegos hub: liquid glass ---------- */
/* Safari has no backdrop refraction, so the glass is blur + saturation with an inner specular rim. */
.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 1px rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .42);
}
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 60% at 30% -10%, rgba(255, 255, 255, .22), transparent 55%);
}

.games-hub .hub-wrap { padding-bottom: calc(120px + var(--safe-b)); }
.games-hub .hub-wrap[hidden] { display: none; }
.large-title { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }

.tabbar {
  position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); z-index: 30;
  width: calc(100% - 28px); max-width: 492px; display: flex; gap: 10px; align-items: center;
}
.games-hub::after { /* content fades out under the floating bar */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(140px + var(--safe-b)); z-index: 20; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(10, 18, 16, .85) 70%);
}
.tabs { flex: 1; height: 64px; border-radius: 32px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; }
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 28px; font-size: .68rem; font-weight: 600; color: rgba(245, 239, 225, .72); text-decoration: none;
  transition: background .2s, color .2s;
}
.tab svg { width: 24px; height: 24px; }
.tab.on {
  color: var(--gold-2); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 10px rgba(0, 0, 0, .25);
}
.tab-dot {
  position: absolute; top: 5px; right: calc(50% - 24px); min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  display: grid; place-items: center; font-size: .58rem; font-weight: 800; background: #5fd08a; color: #062015;
}
.fab {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #2a1f05; flex: none;
  background: radial-gradient(90% 70% at 35% 20%, rgba(255, 255, 255, .6), transparent 60%), linear-gradient(180deg, var(--gold-2), var(--gold) 60%, #b8923a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 26px rgba(217, 180, 90, .35), 0 12px 30px rgba(0, 0, 0, .4);
  transition: transform .15s;
}
.fab:active, .tab:active { transform: scale(.94); }
.fab svg { width: 28px; height: 28px; }

.search { height: 46px; border-radius: 23px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; color: var(--muted); }
.search > svg { width: 18px; height: 18px; flex: none; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font-size: 1rem; }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.code-pill {
  flex: none; height: 34px; padding: 0 12px; border-radius: 17px; font-size: .78rem; font-weight: 600; color: var(--gold-2);
  background: rgba(217, 180, 90, .14); border: 1px solid var(--gold-dim);
}
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; font-size: .82rem; font-weight: 600; color: rgba(245, 239, 225, .82); }
.chip.glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.chip.on { color: #2a1f05; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.seg { height: 40px; border-radius: 20px; padding: 3px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.seg button { border-radius: 17px; font-size: .82rem; font-weight: 600; color: var(--muted); transition: background .2s, color .2s; }
.seg button.on { color: var(--ink); background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 8px rgba(0, 0, 0, .25); }
.section-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 239, 225, .4); font-weight: 700; }
.empty-state { text-align: center; color: var(--muted); padding: 30px 12px; line-height: 1.5; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.empty-state b { color: var(--ink); }
.empty-state .big-icon { width: 44px; height: 44px; color: var(--gold); margin-bottom: 4px; }

/* Catalog */
.catalog { display: flex; flex-direction: column; gap: 14px; }
.feature {
  position: relative; min-height: 210px; border-radius: 24px; overflow: hidden; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--gold-dim); background: radial-gradient(120% 90% at 80% 15%, var(--games-1), var(--games-2)); box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.feature[data-href] { cursor: pointer; }
.feature.blue { background: radial-gradient(120% 90% at 80% 15%, #245a8f, #0f2240); border-color: rgba(140, 180, 240, .35); }
.feature .art { position: absolute; right: 14px; top: 8px; width: 150px; height: 120px; transform: rotate(6deg); }
.feature .art .card { position: absolute; left: 50%; top: 16px; margin-left: -34px; }
.feature .meta { position: relative; display: flex; gap: 8px; flex-wrap: wrap; }
.feature h3 { position: relative; margin: 6px 0 0; font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 800; color: var(--gold-2); }
.feature p { position: relative; margin: 2px 0 0; font-size: .82rem; color: rgba(245, 239, 225, .8); max-width: 58%; line-height: 1.35; }
.feature .meta { max-width: 58%; }
.feature .pill { height: 26px; padding: 0 10px; border-radius: 13px; display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; }
.feature .pill.new { background: var(--gold-2); color: #2a1f05; }
.feature .play { position: absolute; right: 14px; bottom: 14px; height: 40px; padding: 0 18px; border-radius: 20px; font-weight: 700; font-size: .88rem; }
.row-games { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-game { border-radius: 20px; padding: 12px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-height: 124px; }
.mini-game .emoji { font-size: 1.6rem; }
.mini-game small { color: var(--muted); font-size: .72rem; }
.mini-game .soon-pill { background: rgba(217, 180, 90, .14); color: var(--gold-2); }

/* Mesas */
.tables-list { display: flex; flex-direction: column; gap: 10px; }
.table-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.gicon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; border: 1px solid var(--gold-dim);
  background: radial-gradient(100% 100% at 50% 30%, var(--games-1), var(--games-2)); font-family: 'Playfair Display', serif; font-weight: 800; color: var(--gold-2); font-size: 1.2rem;
}
.gicon.blue { background: radial-gradient(100% 100% at 50% 30%, #245a8f, #0f2240); border-color: rgba(140, 180, 240, .35); }
.table-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.table-row .t { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-row .sub { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); flex-wrap: wrap; }
.faces { display: flex; }
.avatar.xs { width: 24px; height: 24px; font-size: .62rem; margin-left: -7px; border: 2px solid #10201b; box-shadow: none; }
.faces .avatar.xs:first-child { margin-left: 0; }
.live { display: inline-flex; align-items: center; gap: 5px; color: #5fd08a; font-weight: 700; }
.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5fd08a; }
.btn-pill {
  height: 34px; padding: 0 14px; border-radius: 17px; display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-weight: 700; font-size: .8rem; color: var(--ink); text-decoration: none;
}
.btn-pill.gold { color: #2a1f05; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-pill[aria-disabled] { opacity: .5; }
.btn-pill svg { width: 16px; height: 16px; }

/* New table sheet */
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.opt { text-align: left; border-radius: 18px; padding: 12px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, .04); display: flex; flex-direction: column; gap: 3px; }
.opt.on { border-color: var(--gold); background: rgba(217, 180, 90, .1); box-shadow: 0 0 0 3px rgba(217, 180, 90, .15); }
.opt .ic { font-family: 'Playfair Display', serif; font-weight: 800; color: var(--gold-2); font-size: 1.3rem; }
.opt small { color: var(--muted); font-size: .74rem; }
.setting { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.setting .grow { flex: 1; }
.setting small { display: block; color: var(--muted); font-size: .76rem; margin-top: 2px; }
.switch {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 50px; height: 30px; border-radius: 15px; position: relative; cursor: pointer;
  background: rgba(255, 255, 255, .16); transition: background .2s;
}
.switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .2s; }
.switch:checked { background: #5fd08a; }
.switch:checked::after { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.setting .stepper { display: flex; align-items: center; gap: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.setting .stepper button { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 1.1rem; }

/* Watching a table */
.watch-bar {
  position: fixed; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 22px; font-size: .86rem; font-weight: 600;
}
.watch-bar svg { width: 18px; height: 18px; color: var(--gold-2); }
.watch-bar .btn-pill { background: rgba(255, 255, 255, .12); }
.msg.spec b { color: #a9dcff; }

/* Ranking */
.ranking { display: flex; flex-direction: column; gap: 14px; }
.rank-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 4px 0 14px; }
.rank-podium .step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.rank-podium .step:only-child { grid-column: 2; }
.rank-podium .avatar { width: 52px; height: 52px; font-size: 1.3rem; }
.rank-podium .first .avatar { width: 64px; height: 64px; font-size: 1.6rem; box-shadow: 0 0 0 3px var(--hub-bg), 0 0 0 5px var(--gold), 0 0 26px rgba(217, 180, 90, .5); }
.rank-podium .n { font-size: .82rem; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-podium .pts { font-size: .8rem; color: var(--gold-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-podium .block { width: 100%; border-radius: 14px 14px 6px 6px; display: grid; place-items: center; font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.4rem; color: var(--gold-2); }
.rank-list { display: flex; flex-direction: column; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.rrow { display: grid; grid-template-columns: 26px 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; font-variant-numeric: tabular-nums; }
.rank-list .rrow + .rrow { border-top: 1px solid var(--line); }
.rrow .avatar { width: 34px; height: 34px; font-size: .85rem; }
.rrow .pos { color: rgba(245, 239, 225, .4); font-weight: 700; font-size: .82rem; text-align: center; }
.rrow .nm { font-weight: 600; font-size: .88rem; min-width: 0; }
.rrow .nm small { display: block; color: var(--muted); font-weight: 400; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow .sc { text-align: right; font-weight: 700; font-size: .9rem; }
.rrow .sc small { display: block; font-size: .66rem; font-weight: 600; }
.up { color: #6fd49a; } .down { color: #f08a7e; }
.league { font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; margin-left: 5px; vertical-align: 1px; background: rgba(255, 255, 255, .1); color: var(--muted); }
.l-bronce { background: rgba(205, 127, 50, .18); color: #e8b27f; }
.l-plata { background: rgba(220, 225, 235, .14); color: #dfe4ec; }
.l-oro { background: rgba(217, 180, 90, .18); color: var(--gold-2); }
.l-diamante { background: rgba(120, 200, 255, .16); color: #a9dcff; }
.l-king { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1f05; }
.me-pin { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(92px + var(--safe-b)); z-index: 25; width: calc(100% - 28px); max-width: 492px; border-radius: 20px; }
.me-pin .rrow { padding: 12px 14px; }
.me-pin .pos { color: var(--gold-2); }
.games-hub .pane[data-pane="ranking"] { padding-bottom: calc(190px + var(--safe-b)); }