/* Leaderboard styles (site/play/lb/lb.js). Only the design tokens from CONTRACT-LB.md section 4: no hex, no colour
   names, rem only, light and dark both come from the tokens. Motion is small and stops for prefers-reduced-motion. */

.lb-screen {
  --lb-ring: color-mix(in oklab, var(--c-border) 70%, var(--c-text));
  display: grid; gap: var(--space-4); max-width: 44rem; margin: 0 auto; padding: var(--space-2) 0 var(--space-6);
  font-family: var(--font-body); color: var(--c-text);
  grid-template-areas: "you" "controls" "head" "board" "panel" "how" "foot";
}
.lb-screen > .lb-you { grid-area: you; }
.lb-screen > .lb-controls { grid-area: controls; }
.lb-screen > .lb-head { grid-area: head; }
.lb-screen > .lb-board { grid-area: board; }
.lb-screen > .lb-panel { grid-area: panel; }
.lb-screen > .lb-how { grid-area: how; }
.lb-screen > .lb-foot { grid-area: foot; }
@media (min-width: 64rem) {
  .lb-screen { max-width: 74rem; grid-template-columns: minmax(0, 1fr) 25rem; column-gap: var(--space-6);
    grid-template-areas: "you you" "controls panel" "head panel" "board panel" "how panel" "foot panel"; align-items: start; }
  .lb-screen:has(> .lb-panel[hidden]) { max-width: 52rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "you" "controls" "head" "board" "how" "foot"; }
  .lb-screen > .lb-panel { grid-row: 2 / span 5; }
  .lb-podium { width: 100%; max-width: 40rem; justify-self: center; }
}
.lb-screen :focus-visible, .lb-slot :focus-visible { outline: 0.1875rem solid var(--c-accent); outline-offset: 0.125rem; }
.lb-sr { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lb-h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: 1.15; }
.lb-h3 { margin: var(--space-4) 0 var(--space-2); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-l); }
.lb-h3 small { font-family: var(--font-body); font-size: var(--fs-s); color: var(--c-text-muted); font-weight: 600; }
.lb-small { margin: var(--space-2) 0 0; font-size: var(--fs-s); color: var(--c-text-muted); }
.lb-link { color: var(--c-link); font-weight: 700; text-underline-offset: 0.18em; }
.lb-link:hover { text-decoration-thickness: 0.125rem; }

/* ---------- buttons ---------- */
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); min-width: var(--tap); padding: var(--space-2) var(--space-4);
  font: inherit; font-family: var(--font-display); font-size: var(--fs-m); font-weight: 700; line-height: 1.15; border-radius: var(--radius-pill);
  border: 0.125rem solid var(--c-border); background: var(--glass); color: var(--c-text); cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; text-decoration: none;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lb-btn:active { transform: translateY(0.1rem); }
/* the same chunky pill as the app's .btn: warm gradient, a solid lip underneath, presses down when tapped */
.lb-btn-primary {
  font-size: var(--fs-l); color: var(--c-on-primary); border-color: var(--c-primary);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 78%, var(--c-surface)), var(--c-primary) 55%, color-mix(in srgb, var(--c-primary) 80%, var(--c-primary-2)));
  box-shadow: 0 0.25rem 0 color-mix(in srgb, var(--c-primary-2) 60%, var(--c-on-primary)), var(--shadow-1);
}
.lb-btn-primary:hover { filter: brightness(1.05); }
.lb-btn-primary:active { box-shadow: 0 0.08rem 0 color-mix(in srgb, var(--c-primary-2) 60%, var(--c-on-primary)); }
.lb-btn-ghost { -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); }
.lb-btn-ghost:hover { border-color: var(--c-primary); }
.lb-btn-big { min-height: calc(var(--tap) + 0.25rem); padding: var(--space-2) var(--space-5); font-size: var(--fs-l); background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent);
  box-shadow: 0 0.25rem 0 color-mix(in srgb, var(--c-accent) 55%, var(--c-on-primary)); }
.lb-btn-big:active { box-shadow: 0 0.08rem 0 color-mix(in srgb, var(--c-accent) 55%, var(--c-on-primary)); }
.lb-btn-wide { flex: 1 1 100%; }
.lb-btn-danger { color: var(--c-danger); }
.lb-btn-danger:hover { border-color: var(--c-danger); }
.lb-btn-danger-fill { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-bg); box-shadow: none; font-size: var(--fs-m); }
.lb-i { display: inline-grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; }
.lb-i svg { width: 100%; height: 100%; }
.lb-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* ---------- avatars ---------- */
.lb-av {
  --av: var(--c-primary); --a1: var(--av); --a2: var(--c-accent); --a3: var(--c-gold);
  display: inline-grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; overflow: hidden;
  background: color-mix(in oklab, var(--av) 26%, var(--c-surface-2));
  box-shadow: inset 0 0 0 0.125rem color-mix(in oklab, var(--av) 45%, var(--c-surface));
}
.lb-av svg { width: 84%; height: 84%; display: block; }
.lb-av-s { width: 2.5rem; height: 2.5rem; }
.lb-av-l { width: 4.5rem; height: 4.5rem; }
.lb-av-xl { width: 6rem; height: 6rem; }
.lb-face .a1 { fill: color-mix(in oklab, var(--a1) 72%, var(--c-surface)); stroke: color-mix(in oklab, var(--a1) 72%, var(--c-surface)); }
.lb-face .a2 { fill: color-mix(in oklab, var(--a2) 72%, var(--c-surface)); stroke: color-mix(in oklab, var(--a2) 72%, var(--c-surface)); }
.lb-face .a3 { fill: var(--a3); stroke: var(--a3); }
.lb-face .k { fill: var(--c-text); stroke: var(--c-text); }
.lb-face .l { fill: var(--c-surface); stroke: var(--c-surface); }
.lb-face path[fill="none"] { fill: none; }
.lb-av[data-a="peacock"] { --av: var(--c-primary); --a1: var(--c-primary); --a2: var(--c-success); --a3: var(--c-gold); }
.lb-av[data-a="tiger"] { --av: var(--c-accent); --a1: var(--c-accent); --a3: var(--c-gold); }
.lb-av[data-a="elephant"] { --av: var(--c-silver); --a1: var(--c-silver); --a2: color-mix(in oklab, var(--c-silver) 70%, var(--c-text)); }
.lb-av[data-a="mongoose"] { --av: var(--c-bronze); --a1: var(--c-bronze); --a2: var(--c-gold); }
.lb-av[data-a="langur"] { --av: var(--c-gold); --a1: var(--c-silver); }
.lb-av[data-a="cheetah"] { --av: var(--c-success); --a1: var(--c-gold); }
.lb-av[data-a="rhino"] { --av: var(--c-primary); --a1: var(--c-silver); --a2: color-mix(in oklab, var(--c-silver) 60%, var(--c-surface)); --a3: var(--c-bronze); }
.lb-av[data-a="slothbear"] { --av: var(--c-gold); --a1: color-mix(in oklab, var(--c-text) 70%, var(--c-bronze)); }
.lb-av[data-a="tortoise"] { --av: var(--c-accent); --a1: var(--c-success); --a2: var(--c-bronze); --a3: var(--c-gold); }
.lb-av[data-a="cobra"] { --av: var(--c-gold); --a1: var(--c-success); --a2: color-mix(in oklab, var(--c-success) 45%, var(--c-gold)); --a3: var(--c-danger); }
.lb-av[data-a="bustard"] { --av: var(--c-success); --a1: var(--c-gold); --a2: var(--c-bronze); --a3: var(--c-bronze); }
.lb-av[data-a="dolphin"] { --av: var(--c-primary); --a1: var(--c-silver); --a2: var(--c-danger); }

/* ---------- rank badges ---------- */
.lb-rb { display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; }
.lb-rb svg { width: 100%; height: 100%; display: block; }
.lb-rb-s { width: 1.5rem; height: 1.5rem; }
.lb-rb-m { width: 2.25rem; height: 2.25rem; }
.lb-rank-art .r0 { fill: color-mix(in oklab, var(--c-gold) 22%, var(--c-surface)); stroke: var(--c-gold); stroke-width: 0.15rem; }
.lb-rank-art .r1 { stroke: var(--c-success); }
.lb-rank-art .r2 { fill: var(--c-success); }
.lb-rank-art .r3 { fill: var(--c-gold); }
.lb-rank-art .r4 { fill: var(--c-primary); }
.lb-rank-art .r5 { fill: var(--c-accent); }
.lb-rb[data-tier="1"] .r0, .lb-rb[data-tier="2"] .r0 { fill: color-mix(in oklab, var(--c-primary) 18%, var(--c-surface)); stroke: var(--c-primary); }
.lb-rb[data-tier="3"] .r3 { fill: var(--c-bronze); }
.lb-rb[data-tier="5"] .r0 { fill: color-mix(in oklab, var(--c-accent) 26%, var(--c-surface)); stroke: var(--c-accent); }

/* ---------- top strip: me, invite ---------- */
.lb-me-strip {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--tap); padding: var(--space-3);
  font: inherit; color: inherit; text-align: start; cursor: pointer;
  background: var(--c-surface); border: 0.125rem solid var(--c-border); border-radius: var(--radius-l); box-shadow: var(--shadow-1);
}
.lb-me-text { display: grid; flex: 1; min-width: 0; gap: var(--space-1); }
.lb-me-text b { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-l); line-height: 1.15; }
.lb-me-title { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-s); color: var(--c-text-muted); font-weight: 600; }
.lb-me-pts { display: grid; justify-items: end; text-align: end; }
.lb-me-pts b { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1; color: var(--c-link); }
.lb-me-pts small { font-size: var(--fs-xs); color: var(--c-text-muted); }

.lb-invite {
  display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-l);
  background: linear-gradient(135deg, color-mix(in oklab, var(--c-gold) 22%, var(--c-surface)), color-mix(in oklab, var(--c-primary) 16%, var(--c-surface)));
  border: 0.125rem solid color-mix(in oklab, var(--c-gold) 45%, var(--c-border)); box-shadow: var(--shadow-1);
}
.lb-invite-art { display: flex; }
.lb-invite-art .lb-av + .lb-av { margin-inline-start: -0.75rem; }
.lb-invite-art .lb-av { box-shadow: 0 0 0 0.1875rem var(--c-surface); }
.lb-invite-text p { margin: 0; color: var(--c-text-muted); }
.lb-invite-text .lb-invite-h { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: var(--c-text); line-height: 1.15; margin-bottom: var(--space-1); }
.lb-invite .lb-btn-primary { justify-self: stretch; font-size: var(--fs-l); min-height: calc(var(--tap) + 0.5rem); }
@media (min-width: 40rem) {
  .lb-invite { grid-template-columns: auto 1fr auto; align-items: center; }
  .lb-invite .lb-btn-primary { justify-self: end; }
}

/* ---------- picker ---------- */
.lb-picker { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--c-surface); border: 0.125rem solid var(--c-border); border-radius: var(--radius-l); box-shadow: var(--shadow-2); min-width: 0; }
.lb-pick-top { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); border-radius: var(--radius-m); background: color-mix(in oklab, var(--c-primary) 10%, var(--c-surface-2)); }
.lb-pick-said { display: grid; gap: var(--space-2); justify-items: start; min-width: 0; flex: 1; }
.lb-pick-name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: 1.15; overflow-wrap: anywhere; }
.lb-pick-name.lb-pop { animation: lb-pop var(--dur) var(--ease); }
.lb-pick-row { display: grid; gap: var(--space-1); min-width: 0; }
.lb-label { margin: 0; font-size: var(--fs-s); font-weight: 700; color: var(--c-text-muted); }
.lb-scroll {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: var(--space-2); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding: var(--space-1) var(--space-1) var(--space-2); margin: 0 calc(-1 * var(--space-1)); scrollbar-width: thin;
}
.lb-word {
  min-height: var(--tap); padding: var(--space-1) var(--space-3); white-space: nowrap; scroll-snap-align: start;
  font: inherit; font-size: var(--fs-m); font-weight: 600; color: var(--c-text); background: var(--c-surface-2);
  border: 0.125rem solid var(--c-border); border-radius: var(--radius-pill); cursor: pointer; touch-action: manipulation;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lb-word[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.lb-word:active, .lb-face-btn:active, .lb-gchip:active, .lb-tab:active { transform: scale(0.96); }
.lb-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 40rem) { .lb-faces { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lb-face-btn {
  display: grid; place-items: center; min-height: calc(var(--tap) + 1.25rem); padding: var(--space-1); cursor: pointer; touch-action: manipulation;
  background: var(--c-surface-2); border: 0.1875rem solid var(--c-surface-2); border-radius: var(--radius-m);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lb-face-btn[aria-pressed="true"] { border-color: var(--c-primary); background: color-mix(in oklab, var(--c-primary) 14%, var(--c-surface)); }
.lb-face-btn[aria-pressed="true"] .lb-av { animation: lb-pop var(--dur) var(--ease); }
.lb-msg { margin: 0; min-height: 1.5em; font-size: var(--fs-s); font-weight: 600; }
.lb-msg-soft { color: var(--c-link); }
.lb-input {
  width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--fs-m);
  color: var(--c-text); background: var(--c-surface-2); border: 0.125rem solid var(--c-border); border-radius: var(--radius-m);
}
.lb-input:focus-visible { border-color: var(--c-primary); }
.lb-code-form { display: grid; gap: var(--space-2); padding-top: var(--space-2); }
.lb-code-form .lb-btn { justify-self: start; }

/* ---------- tabs and game chips ---------- */
.lb-controls { display: grid; gap: var(--space-3); min-width: 0; }
.lb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); padding: var(--space-1); background: var(--c-surface-2); border-radius: var(--radius-pill); }
.lb-tab {
  min-height: var(--tap); font: inherit; font-size: var(--fs-m); font-weight: 700; color: var(--c-text-muted); cursor: pointer;
  background: none; border: 0; border-radius: var(--radius-pill); touch-action: manipulation;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lb-tab[aria-pressed="true"] { background: var(--c-primary); color: var(--c-on-primary); box-shadow: 0 0.18rem 0 color-mix(in srgb, var(--c-primary-2) 60%, var(--c-on-primary)); }
.lb-games { display: flex; gap: var(--space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: var(--space-1) var(--space-1) var(--space-2); margin: 0 calc(-1 * var(--space-1)); scrollbar-width: thin; }
.lb-gchip {
  flex: none; min-height: var(--tap); padding: var(--space-1) var(--space-4); white-space: nowrap; scroll-snap-align: start;
  font: inherit; font-size: var(--fs-s); font-weight: 700; color: var(--c-text); cursor: pointer; touch-action: manipulation;
  background: var(--c-surface); border: 0.125rem solid var(--c-border); border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lb-gchip[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }

/* ---------- headline and board ---------- */
.lb-head { margin: 0; font-size: var(--fs-m); line-height: 1.4; color: var(--c-text-muted); min-height: 1.4em; }
.lb-head b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: var(--c-text); line-height: 1.15; margin-bottom: var(--space-1); }
.lb-board { display: grid; gap: var(--space-3); min-width: 0; }
.lb-board[aria-busy="true"] { opacity: 0.6; transition: opacity var(--dur) var(--ease); }
.lb-podium { list-style: none; margin: 0; padding: var(--space-4) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--space-2); }
.lb-step { display: grid; justify-items: center; gap: var(--space-1); text-align: center; min-width: 0; position: relative; }
.lb-step-who { position: relative; display: inline-grid; }
.lb-step .lb-av { animation: lb-drop calc(var(--dur) * 3) var(--ease) both; }
.lb-medal {
  position: absolute; inset-inline-end: -0.25rem; bottom: -0.25rem; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: 800; font-size: var(--fs-s); color: var(--c-on-primary);
  background: var(--c-gold); box-shadow: 0 0 0 0.1875rem var(--c-surface);
}
.lb-p2 .lb-medal { background: var(--c-silver); }
.lb-p3 .lb-medal { background: var(--c-bronze); }
.lb-step-name { font-weight: 700; font-size: var(--fs-s); line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }
.lb-step-pts {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; padding-top: var(--space-2); font-family: var(--font-display); font-size: var(--fs-l); font-weight: 800; line-height: 1.1;
  border-radius: var(--radius-m) var(--radius-m) var(--radius-s) var(--radius-s);
  background: linear-gradient(180deg, color-mix(in oklab, var(--c-gold) 46%, var(--c-surface)), color-mix(in oklab, var(--c-gold) 16%, var(--c-surface)));
  border-top: 0.25rem solid var(--c-gold); min-height: 6.5rem; transform-origin: bottom; animation: lb-rise calc(var(--dur) * 3) var(--ease) both;
}
.lb-step-pts small { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-muted); }
.lb-p1 .lb-av-l { width: 5.25rem; height: 5.25rem; box-shadow: inset 0 0 0 0.125rem var(--c-gold), 0 0 0 0.25rem color-mix(in oklab, var(--c-gold) 40%, var(--c-surface)); }
.lb-p2 .lb-step-pts { min-height: 4.75rem; border-top-color: var(--c-silver); background: linear-gradient(180deg, color-mix(in oklab, var(--c-silver) 46%, var(--c-surface)), color-mix(in oklab, var(--c-silver) 16%, var(--c-surface))); animation-delay: calc(var(--dur) * 0.6); }
.lb-p3 .lb-step-pts { min-height: 3.75rem; border-top-color: var(--c-bronze); background: linear-gradient(180deg, color-mix(in oklab, var(--c-bronze) 46%, var(--c-surface)), color-mix(in oklab, var(--c-bronze) 16%, var(--c-surface))); animation-delay: calc(var(--dur) * 1.2); }
.lb-p2 .lb-av { animation-delay: calc(var(--dur) * 0.6); }
.lb-p3 .lb-av { animation-delay: calc(var(--dur) * 1.2); }
.lb-youtag { display: inline-block; margin-inline-start: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 800; background: var(--c-primary); color: var(--c-on-primary); vertical-align: middle; }
.lb-step .lb-youtag { position: absolute; top: calc(-1 * var(--space-3)); }
.lb-step.lb-me .lb-step-name { color: var(--c-link); }

.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lb-row {
  display: grid; grid-template-columns: 2rem auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  min-height: calc(var(--tap) + 0.75rem); padding: var(--space-2) var(--space-3); border-radius: var(--radius-m);
  background: var(--c-surface); border: 0.125rem solid var(--c-border);
  animation: lb-in calc(var(--dur) * 2) var(--ease) both;
}
.lb-row:nth-child(2) { animation-delay: calc(var(--dur) * 0.2); }
.lb-row:nth-child(3) { animation-delay: calc(var(--dur) * 0.4); }
.lb-row:nth-child(4) { animation-delay: calc(var(--dur) * 0.6); }
.lb-row:nth-child(n + 5) { animation-delay: calc(var(--dur) * 0.8); }
.lb-row.lb-me { border-color: var(--c-primary); background: color-mix(in oklab, var(--c-primary) 12%, var(--c-surface)); box-shadow: var(--shadow-1); }
.lb-row-rank { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-l); text-align: center; color: var(--c-text-muted); }
.lb-row-who { display: grid; min-width: 0; }
.lb-row-name { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.lb-row-title { font-size: var(--fs-xs); color: var(--c-text-muted); }
.lb-row-pts { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-l); text-align: end; white-space: nowrap; }
.lb-row-pts small { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-muted); }
.lb-gap { display: flex; justify-content: center; gap: var(--space-2); margin: 0; }
.lb-gap span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--c-border); }
.lb-empty { padding: var(--space-5) var(--space-4); text-align: center; border-radius: var(--radius-l); background: var(--c-surface); border: 0.125rem dashed var(--c-border); }
.lb-empty p { margin: 0; }
.lb-empty p + p { margin-top: var(--space-1); color: var(--c-text-muted); }

/* loading */
.lb-skel { display: block; border-radius: var(--radius-m); background: linear-gradient(90deg, var(--c-surface-2) 30%, var(--c-surface) 50%, var(--c-surface-2) 70%); background-size: 300% 100%; animation: lb-shimmer 1.4s linear infinite; }
.lb-skel-you { height: 5.5rem; border-radius: var(--radius-l); }
.lb-skel-pod { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); align-items: end; }
.lb-skel-pod .lb-skel:nth-child(1) { height: 8rem; }
.lb-skel-pod .lb-skel:nth-child(2) { height: 10rem; }
.lb-skel-pod .lb-skel:nth-child(3) { height: 7rem; }
.lb-skel-row { height: 3.75rem; }

/* notes */
.lb-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-l); background: var(--c-surface); border: 0.125rem solid var(--c-border); }
.lb-note > .lb-i { width: 2rem; height: 2rem; color: var(--c-primary); }
.lb-note p { margin: 0 0 var(--space-1); }
.lb-note-me { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; margin-top: var(--space-2) !important; }
.lb-note .lb-btn { margin-top: var(--space-2); }

/* ---------- Your panel ---------- */
.lb-panel { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--c-surface); border: 0.125rem solid var(--c-border); border-radius: var(--radius-l); box-shadow: var(--shadow-1); min-width: 0; }
.lb-panel > .lb-picker { padding: 0; border: 0; box-shadow: none; }
.lb-me-card { display: flex; gap: var(--space-4); align-items: center; }
.lb-me-info { display: grid; gap: var(--space-1); min-width: 0; flex: 1; }
.lb-me-name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: 1.15; overflow-wrap: anywhere; }
.lb-me-rank { margin: 0; display: flex; gap: var(--space-2); align-items: center; }
.lb-me-rank > span { display: grid; line-height: 1.2; }
.lb-me-rank small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.lb-bar { height: 0.625rem; border-radius: var(--radius-pill); background: var(--c-surface-2); overflow: hidden; }
.lb-bar-fill { display: block; height: 100%; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--c-gold), var(--c-accent)); animation: lb-grow calc(var(--dur) * 4) var(--ease) both; }
.lb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.lb-stat { margin: 0; display: grid; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); background: var(--c-surface-2); }
.lb-stat b { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.1; }
.lb-stat small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.lb-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-2); }
.lb-badge { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2); border-radius: var(--radius-m); background: var(--c-surface-2); color: var(--c-text-muted); }
.lb-badge > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.lb-badge b { color: var(--c-text); font-size: var(--fs-s); }
.lb-badge small { font-size: var(--fs-xs); }
.lb-badge .lb-i { color: var(--c-border); }
.lb-badge.lb-have { background: color-mix(in oklab, var(--c-gold) 20%, var(--c-surface)); }
.lb-badge.lb-have .lb-i { color: var(--c-gold); }
.lb-bests { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lb-best { padding: var(--space-3); border-radius: var(--radius-m); background: var(--c-surface-2); display: grid; gap: var(--space-1); }
.lb-best p { margin: 0; }
.lb-best-h { display: flex; justify-content: space-between; gap: var(--space-2); }
.lb-best-h span { font-weight: 800; color: var(--c-link); }
.lb-best-wins { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lb-lvl { font-size: var(--fs-xs); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--c-surface); }
.lb-lvl b { font-size: var(--fs-s); }
.lb-best-more { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-xs); color: var(--c-text-muted); }
.lb-best-more span { display: inline-flex; gap: var(--space-1); align-items: center; }
.lb-panel .lb-actions .lb-btn { flex: 1 1 auto; }
.lb-codebox, .lb-confirm { margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-m); background: var(--c-surface-2); border: 0.125rem solid var(--c-border); animation: lb-in calc(var(--dur) * 2) var(--ease) both; }
.lb-codebox p, .lb-confirm p { margin: 0; }
.lb-code-words { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 !important; }
.lb-code-words span { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--c-surface); border: 0.125rem solid var(--c-gold); font-weight: 800; font-size: var(--fs-m); }
.lb-confirm { border-color: var(--c-danger); }

/* ---------- how points work, footer ---------- */
.lb-how { border-radius: var(--radius-m); background: var(--c-surface); border: 0.125rem solid var(--c-border); }
.lb-how > summary { min-height: var(--tap); display: flex; align-items: center; padding: var(--space-2) var(--space-4); cursor: pointer; font-weight: 700; list-style-position: inside; }
.lb-how-body, .lb-code-box > form { padding: 0 var(--space-4) var(--space-4); }
.lb-picker .lb-how { background: var(--c-surface-2); }
.lb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.lb-table th, .lb-table td { padding: var(--space-2); text-align: start; border-bottom: 0.0625rem solid var(--c-border); }
.lb-rules { margin: var(--space-3) 0 0; padding-inline-start: var(--space-5); font-size: var(--fs-s); display: grid; gap: var(--space-1); }
.lb-foot { margin: 0; font-size: var(--fs-s); color: var(--c-text-muted); }
.lb-foot .lb-link { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- end screen card (inside the shell's div.lb-slot) ---------- */
.lb-card { display: grid; gap: var(--space-2); justify-items: center; text-align: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-l); background: var(--c-surface-2); border: 0.125rem solid var(--c-border); color: var(--c-text); font-family: var(--font-body); }
.lb-card p { margin: 0; }
.lb-card-done { border-color: color-mix(in oklab, var(--c-gold) 60%, var(--c-border)); }
.lb-card-join { background: color-mix(in oklab, var(--c-primary) 10%, var(--c-surface-2)); }
.lb-card-line { font-size: var(--fs-m); }
.lb-card-wait { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--c-text-muted); }
.lb-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--c-primary); animation: lb-pulse 1s var(--ease) infinite alternate; }
.lb-pts { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; line-height: 1.05; color: var(--c-link); animation: lb-pop calc(var(--dur) * 2) var(--ease) both; }
.lb-pts-zero { font-size: var(--fs-xl); color: var(--c-text); }
.lb-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); width: 100%; max-width: 20rem; font-size: var(--fs-s); }
.lb-parts li { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-1); border-bottom: 0.0625rem dashed var(--c-border); }
.lb-parts b { color: var(--c-success); }
.lb-card-rank { font-size: var(--fs-l); }
.lb-card-rank b { color: var(--c-link); font-family: var(--font-display); }
.lb-new { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--c-gold) 24%, var(--c-surface)); font-size: var(--fs-s); animation: lb-pop calc(var(--dur) * 2) var(--ease) both; animation-delay: var(--dur); }
.lb-new .lb-i { color: var(--c-gold); }
.lb-card .lb-btn { margin-top: var(--space-1); }

/* ---------- home chip (inside the shell's [data-lb-home]) ---------- */
.lb-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); max-width: 100%; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  font: inherit; color: var(--c-text); text-align: start; cursor: pointer; background: var(--c-surface); border: 0.125rem solid var(--c-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-1);
}
.lb-chip-text { display: grid; line-height: 1.2; min-width: 0; }
.lb-chip-text b { font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-chip-sub { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* toast */
.lb-toast {
  position: fixed; inset-inline: var(--space-4); bottom: max(var(--space-4), env(safe-area-inset-bottom)); z-index: 50; margin: 0 auto; max-width: 28rem;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--c-text); color: var(--c-bg); font-weight: 600; text-align: center; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(1rem); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lb-toast.on { opacity: 1; transform: none; }

@keyframes lb-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes lb-rise { from { transform: scaleY(0.15); opacity: 0.2; } to { transform: none; opacity: 1; } }
@keyframes lb-drop { from { transform: translateY(-0.75rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lb-in { from { transform: translateY(0.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lb-grow { from { width: 0; } }
@keyframes lb-shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }
@keyframes lb-pulse { from { opacity: 0.35; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .lb-screen *, .lb-card, .lb-card *, .lb-toast, .lb-chip { animation: none !important; transition: none !important; }
  .lb-toast { transform: none; }
}
.lb-small .lb-link { display: inline-flex; align-items: center; min-height: var(--tap); }
.lb-screen [hidden] { display: none !important; }