/* ===== ui-cleanup-v7.css — "Tuck": guesser PFP behind the word =====
 * Loaded after alt-*.css, so equal-specificity rules win on order.
 *
 * GRID + TOP CARD: the avatar disc stops being a flex sibling of the pill
 * and becomes an absolutely-positioned layer pinned to the chip's right
 * edge, grown to ~1.3x the pill height. The pill is shifted left by 52%
 * of the disc, so just over half the face sits under the glass. The cell
 * keeps overflow:hidden, which shaves the very top/bottom of the disc —
 * that clip is part of the approved look (mockups/grid-pfp-behind.html).
 *
 * The top card's username + title cosmetic are hidden: the tucked disc
 * occupies the slot they used to stack in. Owner's call, 2026-08-02 —
 * the guesser's name still shows on the podium.
 *
 * TICKER: same idea, in the ticker's base units (1800px scene). .rt-av is
 * emitted by the patched alt bundle — the ticker is word-only in stock
 * RecentTicker. .has-av gates the pill shift so pfp-less guesses keep
 * today's chip exactly.
 *
 * OBS: see the block at the bottom.
 */

/* ---- tuck geometry (disc size + how far the pill shifts left) ---- */
.alt-index-grid .cell[data-tier="0"] { --tuck-disc: 9.1cqw; --tuck-shift: 4.732cqw; }
.alt-index-grid .cell[data-tier="1"] { --tuck-disc: 8.32cqw; --tuck-shift: 4.326cqw; }
.alt-index-grid .cell[data-tier="2"] { --tuck-disc: 7.54cqw; --tuck-shift: 3.921cqw; }
.alt-index-grid .cell[data-tier="3"] { --tuck-disc: 6.76cqw; --tuck-shift: 3.515cqw; }
.alt-index-grid .cell[data-tier="4"] { --tuck-disc: 5.98cqw; --tuck-shift: 3.11cqw; }
.alt-index-grid .cell[data-tier="5"] { --tuck-disc: 5.2cqw; --tuck-shift: 2.704cqw; }
.alt-index-top-card .cell { --tuck-disc: 14cqw; --tuck-shift: 7.28cqw; }

/* ---- grid chips ---- */
.alt-index-grid .cell .av {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 0;
}
.alt-index-grid .cell[data-tier="0"] .av { width: var(--tuck-disc); height: var(--tuck-disc); font-size: 3.64cqw; }
.alt-index-grid .cell[data-tier="0"] .cell-pill { margin-right: var(--tuck-shift); }
.alt-index-grid .cell[data-tier="1"] .av { width: var(--tuck-disc); height: var(--tuck-disc); font-size: 3.328cqw; }
.alt-index-grid .cell[data-tier="1"] .cell-pill { margin-right: var(--tuck-shift); }
.alt-index-grid .cell[data-tier="2"] .av { width: var(--tuck-disc); height: var(--tuck-disc); font-size: 3.016cqw; }
.alt-index-grid .cell[data-tier="2"] .cell-pill { margin-right: var(--tuck-shift); }
.alt-index-grid .cell[data-tier="3"] .av { width: var(--tuck-disc); height: var(--tuck-disc); font-size: 2.704cqw; }
.alt-index-grid .cell[data-tier="3"] .cell-pill { margin-right: var(--tuck-shift); }
.alt-index-grid .cell[data-tier="4"] .av { width: var(--tuck-disc); height: var(--tuck-disc); font-size: 2.392cqw; }
.alt-index-grid .cell[data-tier="4"] .cell-pill { margin-right: var(--tuck-shift); }
.alt-index-grid .cell[data-tier="5"] .av { width: var(--tuck-disc); height: var(--tuck-disc); font-size: 2.08cqw; }
.alt-index-grid .cell[data-tier="5"] .cell-pill { margin-right: var(--tuck-shift); }

/* ---- top card (closest guess) ---- */
/* av-col collapses to a zero-size static box so the disc can position
 * against .cell itself; everything in the column except the disc (name,
 * title cosmetic) is hidden. contain:size and the 13cqw width lock are
 * unset or they'd keep reserving the old column. */
.alt-index-top-card .cell { gap: 0; }
.alt-index-top-card .cell .av-col {
  position: static;
  width: 0; min-width: 0; max-width: 0;
  height: 0; max-height: 0;
  flex: 0 0 0;
  contain: none;
  overflow: visible;
}
.alt-index-top-card .cell .av-col > *:not(.av) { display: none; }
.alt-index-top-card .cell .av {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--tuck-disc);
  height: var(--tuck-disc);
  font-size: 5.6cqw;
  margin: 0;
  /* Above the pill (z-index 1), not behind it: the closest guess is the
   * one chip where the face should read clearly, so the disc overlaps the
   * glass instead of hiding under it. The pill keeps its margin-right, so
   * the word still never runs beneath the disc. */
  z-index: 2;
}
.alt-index-top-card .cell-pill { margin-right: var(--tuck-shift); }

/* ---- ticker chips ---- */
.rt-av {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 106px;
  height: 106px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
  background: var(--c, rgba(255,255,255,0.15));
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--c, white) 70%, transparent),
    0 4px 10px rgba(0,0,0,0.5);
}
.rt-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt-chip.has-av .rt-pill { margin-right: 55px; }

/* ===== OBS — frosted pfp under the pill =============================
 * On render1 OBS runs BrowserHWAccel=false, where backdrop-filter can't
 * sample its backdrop and composites over BLACK — that is why the pill's
 * blur is killed in obs-mode (see alt.css "OBS software-CEF fixes").
 * Turning it back on would black out the chips.
 *
 * So the frost is faked with geometry we already know: each disc paints
 * a pre-blurred copy of ITSELF over its own left 52% — exactly the part
 * the pill covers — and the pill's translucent wash sits on top of that.
 * The sharp face keeps the uncovered crescent.
 *
 * Cost: a plain filter: blur() over a static background image. It
 * rasterizes once when the chip renders, instead of re-sampling a moving
 * 3D backdrop every frame the way backdrop-filter does. Scope is capped
 * to the chips a viewer actually reads — ticker, top card, grid tiers
 * 0-2 (9 chips) — so rows 3+ keep the flat baked wash.
 *
 * ::before, NOT ::after — .av::after is reserved for the fan-club badge.
 * Chips with no pfp never get --pfp set, so nothing paints for them.
 * ==================================================================== */
body.obs-mode .alt-index-grid .cell[data-tier="0"] .av::before,
body.obs-mode .alt-index-grid .cell[data-tier="1"] .av::before,
body.obs-mode .alt-index-grid .cell[data-tier="2"] .av::before,
body.obs-mode .rt-av::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--pfp, none);
  background-size: cover;
  background-position: center;
  /* keep the left 52% — the half the pill sits over */
  clip-path: inset(0 48% 0 0);
}
body.obs-mode .alt-index-grid .cell .av::before { filter: blur(4px); }
body.obs-mode .rt-av::before { filter: blur(12px); }

/* ===== WT-logo avatars (hint guesses) ===============================
 * Hint chips carry the Word Tycoon logo as their pfp (set server-side in
 * session-manager.revealHintWord). It's a transparent rounded-square tile,
 * not a photo: object-fit:cover would crop the top hat against the circular
 * disc and let the random player color bleed through the transparency. So
 * matched avatars get contain, a small inset, and a neutral disc.
 *
 * Matched on the src rather than a hint class, so real players whose avatar
 * fell back to the same WT default get the same treatment for free — no
 * bundle patch needed.
 * ==================================================================== */
.alt-index-grid .cell .av img[src$="/portal/img/logo.png"],
.alt-index-top-card .cell .av img[src$="/portal/img/logo.png"],
.rt-av img[src$="/portal/img/logo.png"] {
  object-fit: contain;
  padding: 11%;
  box-sizing: border-box;
  background: #171334;
}