/* CAST Games account UI. MASTER COPY: edit shared/cast-account/ in the 1000TRIES repo, then run tools/sync_shared.py.
   Self-contained (own colours, .ca- prefix) so it looks the same in every Cast game. */

.ca { --ca-gold: #f1c073; --ca-gold-rgb: 241, 192, 115; --ca-text: #f0f0f5; --ca-muted: #a9a9c1; --ca-line: #2a2a44; --ca-card: #16152a; --ca-bad: #f87171;
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: flex-end; justify-content: center; font-family: Inter, system-ui, -apple-system, sans-serif; color: var(--ca-text); }
.ca[hidden], [data-cast-account][hidden], [data-cast-results][hidden], [data-cast-launch][hidden] { display: none !important; }
html.ca-open, html.ca-open body { overflow: hidden; }
/* Home-screen app (the page draws under the status bar): keep every pop-up clear of the clock and notch */
.ca { padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; }
.ca-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 10, .74); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.ca-panel {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box;
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0;
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--ca-gold-rgb), .14), transparent 60%), linear-gradient(180deg, #1b1830, #0f0d1d);
  border: 2px solid var(--ca-gold); border-bottom: 0;
  box-shadow: 0 0 0 4px rgba(var(--ca-gold-rgb), .12), 0 -10px 40px rgba(var(--ca-gold-rgb), .18);
  animation: caUp .25s ease both;
}
@keyframes caUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 720px) {
  .ca { align-items: center; padding: max(24px, env(safe-area-inset-top, 0px)) 24px 24px; }
  .ca-panel { border-radius: 22px; border-bottom: 2px solid var(--ca-gold); padding: 26px 26px 22px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px));
    box-shadow: 0 0 0 5px rgba(var(--ca-gold-rgb), .12), 0 0 50px rgba(var(--ca-gold-rgb), .2), 0 30px 70px rgba(0, 0, 0, .6);
    animation: caIn .3s cubic-bezier(.2, .9, .3, 1.15) both; }
}
@keyframes caIn { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }
.ca-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ca-line); background: rgba(255, 255, 255, .04); color: var(--ca-muted); font-size: 15px; cursor: pointer; }
@media (hover: hover) { .ca-x:hover { color: var(--ca-gold); border-color: var(--ca-gold); } }

.ca-head { display: flex; flex-direction: column; gap: 2px; margin: 0 44px 14px 0; }
.ca-logo { font: italic 900 24px/1 Inter, sans-serif; letter-spacing: -.4px; text-transform: uppercase; color: var(--ca-gold); }
.ca-who { font-size: 12px; color: var(--ca-muted); }
.ca-hello { font: italic 900 26px/1.1 Inter, sans-serif; letter-spacing: -.4px; color: #fff; }
.ca-logo-sm { font-size: 12px; font-style: normal; letter-spacing: 2px; order: -1; margin-bottom: 4px; }
.ca-fanchip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: var(--t1); color: #fff; font: 800 12px/1 Inter, sans-serif; box-shadow: inset 0 0 0 1.5px var(--t2); }
.ca-fanchip b { padding: 4px 7px; border-radius: 999px; background: var(--t2); color: var(--t1); font-weight: 900; font-size: 11px; }

/* Team colours along the top of the panel */
.ca-panel.has-team { border-top-width: 0; }
.ca-panel.has-team::before { content: ""; position: sticky; top: -20px; display: block; height: 7px; margin: -20px -18px 16px; background: linear-gradient(90deg, var(--t1) 0 60%, var(--t2) 60% 100%); z-index: 3; }
@media (min-width: 720px) { .ca-panel.has-team::before { top: -26px; margin: -26px -26px 18px; border-radius: 20px 20px 0 0; } }

/* Daily streak + time played: three separate tiles */
.ca-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 8px; }
.ca-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 14px; text-align: center;
  background: var(--ca-card); border: 1px solid var(--ca-line); }
.ca-tile.is-live { background: linear-gradient(160deg, rgba(251, 146, 60, .22), rgba(239, 68, 68, .08)); border-color: rgba(251, 146, 60, .6); }
.ca-tile-ico { font-size: 20px; line-height: 1; }
.ca-tile.is-live .ca-tile-ico { animation: caFlame 1.6s ease-in-out infinite; }
@keyframes caFlame { 0%, 100% { transform: scale(1) rotate(-5deg); } 50% { transform: scale(1.18) rotate(5deg); } }
.ca-tile b { font-size: 24px; font-weight: 900; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-tile.is-live b { color: #fdba74; }
.ca-tile span:last-child { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--ca-muted); }


@media (max-width: 380px) { .ca-tile b { font-size: 20px; } }
.ca-streak-note { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 800; color: #fdba74; background: rgba(251, 146, 60, .12); border: 1px solid rgba(251, 146, 60, .4); }
.ca-head-streak { margin-left: 2px; padding: 3px 6px; border-radius: 999px; background: #111; color: #fdba74; font-size: 11px; font-weight: 900; letter-spacing: 0; }
@media (max-width: 560px) { .ca-btn-head { position: relative; } .ca-head-streak { position: absolute; top: -8px; right: -10px; padding: 2px 5px; font-size: 10px; border: 1px solid rgba(251, 146, 60, .6); } }

/* Tabs */
.ca-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 4px; margin: 4px 0 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); }
.ca-tab { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--ca-muted); font: 900 13px/1 Inter, sans-serif; letter-spacing: .3px; cursor: pointer; }
.ca-tab.is-on { background: var(--ca-gold); color: #111; }

/* Chips (game switcher and fan profile answers) */
.ca-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ca-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ca-line); background: rgba(255, 255, 255, .03); color: #d6d6e4; font: 800 13px/1 Inter, sans-serif; cursor: pointer; }
.ca-chip.is-on { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); color: #fff; }
@media (hover: hover) { .ca-chip:hover:not(.is-on) { border-color: rgba(255, 255, 255, .45); color: #fff; } }
.ca-game-chips { margin-bottom: 14px; }
.ca-chips-one { margin-top: 8px; }
.ca-chips-states { margin-top: 2px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.ca-chips-states .ca-chip { min-width: 58px; }
.ca-teams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 440px) { .ca-teams { grid-template-columns: repeat(4, 1fr); } }
.ca-team { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 4px; border-radius: 12px; cursor: pointer;
  border: 2px solid transparent; background: var(--t1); color: #fff; font: 800 11px/1.1 Inter, sans-serif; box-shadow: inset 0 -4px 0 var(--t2); opacity: .82; transition: transform .12s, opacity .12s; }
.ca-team b { font-size: 14px; font-weight: 900; letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.ca-team span { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.ca-team.is-on { opacity: 1; border-color: var(--ca-gold); transform: scale(1.04); box-shadow: inset 0 -4px 0 var(--t2), 0 0 0 3px rgba(var(--ca-gold-rgb), .35), 0 0 18px rgba(var(--ca-gold-rgb), .45); }
@media (hover: hover) { .ca-team:hover { opacity: 1; } }
/* A light club colour (St Helens, Toulouse): dark text, and a hairline so the tile stands off the panel */
.ca-team.is-light { color: #111; border-color: rgba(0, 0, 0, .12); opacity: .92; }
.ca-team.is-light.is-on { border-color: var(--ca-gold); }
.ca-team.is-light b, .ca-team.is-light span { text-shadow: none; }

/* Text field (first name) */
.ca-field { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--ca-line); background: #0f0e1c; color: #fff; font: 800 16px Inter, sans-serif; }
.ca-field:focus { outline: none; border-color: var(--ca-gold); }

/* Stats overview (one tile per game, scales as more games are added) */
.ca-overview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ca-ov { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 14px; text-align: left; cursor: pointer;
  background: var(--ca-card); border: 1px solid var(--ca-line); color: var(--ca-text); font-family: Inter, sans-serif; }
@media (hover: hover) { .ca-ov:hover { border-color: var(--ca-gold); } }
.ca-ov-name { font: italic 900 15px/1 Inter, sans-serif; color: #fff; margin-bottom: 6px; }
.ca-ov-big { font-size: 30px; font-weight: 900; line-height: 1; color: var(--ca-gold); font-variant-numeric: tabular-nums; }
.ca-ov-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ca-muted); }
.ca-ov-best { font-size: 12px; color: #c9c9da; margin-top: 6px; }

/* Fan profile prompt and detail lists */
.ca-prompt { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(var(--ca-gold-rgb), .16), rgba(var(--ca-gold-rgb), .05)); border: 1.5px solid rgba(var(--ca-gold-rgb), .6); }
.ca-prompt-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ca-prompt-txt b { font-size: 15px; font-weight: 900; color: #fff; }
.ca-prompt-txt small { font-size: 12px; color: #b8b8cc; }
.ca-progress { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ca-progress i { display: block; height: 100%; background: var(--ca-gold); border-radius: 3px; }
.ca-dl { margin: 0 0 10px; display: grid; gap: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--ca-line); }
.ca-dl div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; background: rgba(255, 255, 255, .02); }
.ca-dl div + div { border-top: 1px solid var(--ca-line); }
.ca-dl dt { font-size: 12px; font-weight: 800; color: var(--ca-muted); text-transform: uppercase; letter-spacing: .4px; }
.ca-dl dd { margin: 0; font-size: 13.5px; font-weight: 800; color: #fff; text-align: right; overflow: hidden; text-overflow: ellipsis; }
/* A second line under a value (Signed in with: the provider, then the address under it, so a long address never leaves the
   provider hanging on a dot) */
.ca-dl dd .ca-dd-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ca-muted); overflow-wrap: anywhere; }
.ca-btn:disabled.ca-btn-primary { opacity: .4; cursor: not-allowed; }
.ca-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--ca-gold); margin-bottom: 6px; }
.ca-title { font: italic 900 24px/1.12 Inter, sans-serif; text-transform: uppercase; letter-spacing: -.3px; margin: 0 0 8px; color: #fff; }
.ca-text { font-size: 14px; line-height: 1.5; color: #c9c9da; margin: 0 0 14px; }
.ca-muted { color: var(--ca-muted); font-size: 13px; margin: 6px 0; }
.ca-small { font-size: 11.5px; line-height: 1.5; color: var(--ca-muted); margin: 12px 0 0; }
.ca-small a { color: var(--ca-gold); font-weight: 800; text-decoration: none; }
.ca-foot { margin-top: 18px; }
.ca-center { text-align: center; }
.ca-h3 { font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ca-gold); margin: 18px 0 8px; }
.ca-badge { width: 60px; height: 60px; margin: 4px auto 10px; display: flex; align-items: center; justify-content: center; font-size: 28px; border-radius: 50%;
  border: 2px solid var(--ca-gold); background: rgba(var(--ca-gold-rgb), .12); box-shadow: 0 0 0 5px rgba(var(--ca-gold-rgb), .1), 0 0 24px rgba(var(--ca-gold-rgb), .4); }
.ca-badge-bad { border-color: var(--ca-bad); background: rgba(248, 113, 113, .12); box-shadow: 0 0 0 5px rgba(248, 113, 113, .1); }
.ca-flash { margin: 0 44px 12px 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .5); color: #fecaca; }

/* Buttons */
.ca-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 10px; padding: 12px 16px; box-sizing: border-box;
  border-radius: 12px; font: 800 15px/1.1 Inter, sans-serif; cursor: pointer; border: 2px solid transparent; text-decoration: none; }
.ca-btn:disabled { opacity: .55; cursor: wait; }
.ca-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.ca-btn-google { background: #fff; color: #1f1f1f; border-color: #fff; }
.ca-btn-apple { background: #000; color: #fff; border-color: #444; }
.ca-btn-primary { background: var(--ca-gold); color: #111; border-color: var(--ca-gold); text-transform: uppercase; letter-spacing: .4px; font-weight: 900; }
.ca-btn-ghost { background: transparent; color: var(--ca-gold); border-color: var(--ca-gold); }
.ca-btn-danger { background: var(--ca-bad); color: #1a0505; border-color: var(--ca-bad); font-weight: 900; }
.ca-btn-sm { min-height: 42px; font-size: 13px; margin-top: 0; }
@media (hover: hover) {
  .ca-btn-google:hover:not(:disabled) { background: #f1f1f1; }
  .ca-btn-ghost:hover { background: var(--ca-gold); color: #111; }
  .ca-btn-primary:hover { filter: brightness(1.08); }
}
.ca-btn-quiet { background: rgba(255, 255, 255, .04); color: #c9c9da; border-color: var(--ca-line); font-weight: 800; }
.ca-btn-danger-ghost { background: transparent; color: #fca5a5; border-color: rgba(248, 113, 113, .6); }
@media (hover: hover) { .ca-btn-quiet:hover { border-color: var(--ca-gold); color: var(--ca-gold); } .ca-btn-danger-ghost:hover { background: rgba(248, 113, 113, .12); } }
.ca-gap { margin-top: 14px; }
.ca-kicker-bad { color: #fca5a5; }
.ca-lose { list-style: none; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; text-align: left; background: rgba(248, 113, 113, .07); border: 1px solid rgba(248, 113, 113, .3); display: grid; gap: 6px; font-size: 13.5px; color: #e8e8f0; }
.ca-lose li::before { content: "\2715"; color: #f87171; font-weight: 900; margin-right: 8px; }
.ca-lose b { color: #fff; }
.ca-input { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 14px; border-radius: 12px; border: 2px solid rgba(248, 113, 113, .5); background: #0f0e1c; color: #fff;
  font: 900 20px/1 Inter, sans-serif; letter-spacing: 4px; text-align: center; text-transform: uppercase; }
.ca-input:focus { outline: none; border-color: var(--ca-bad); box-shadow: 0 0 0 3px rgba(248, 113, 113, .2); }
.ca-btn-danger:disabled { opacity: .35; cursor: not-allowed; }
.ca-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ca-check, .ca-toggle { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: #d6d6e4; cursor: pointer; margin: 4px 0 8px; }
.ca-check input, .ca-toggle input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: #b8955a; }

/* Birth month and year */
.ca-dob { display: grid; grid-template-columns: .8fr 1.4fr 1fr; gap: 8px; margin: 4px 0 12px; text-align: left; }
.ca-dob-err { color: #fca5a5; margin: -4px 0 10px; }
.ca-dob label { display: flex; flex-direction: column; gap: 4px; }
.ca-dob span { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ca-muted); }
.ca-dob select { width: 100%; min-width: 0; min-height: 48px; padding: 0 8px; border-radius: 12px; border: 1.5px solid var(--ca-line); background: #0f0e1c; color: #fff; font: 700 15px Inter, sans-serif; }
.ca-dob select:focus { outline: none; border-color: var(--ca-gold); }
.ca-partner { text-align: left; }

/* Stat cards */
.ca-cards { display: grid; gap: 10px; }
.ca-card { padding: 12px 14px; border-radius: 14px; background: var(--ca-card); border: 1px solid var(--ca-line); }
.ca-card-empty { opacity: .8; }
.ca-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ca-card-name { font: italic 900 16px/1 Inter, sans-serif; color: #fff; }
.ca-card-play { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: #fff; font: 800 11.5px/1 Inter, sans-serif; text-decoration: none; }
.ca-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ca-stats div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, .04); text-align: center; }
.ca-stats b { font-size: 20px; font-weight: 900; color: var(--ca-gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ca-stats span { font-size: 10px; font-weight: 700; color: var(--ca-muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }
.ca-fav { margin-top: 10px; border-top: 1px solid var(--ca-line); padding-top: 8px; }
.ca-fav summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; min-height: 32px; }
.ca-fav summary::-webkit-details-marker { display: none; }
.ca-fav-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ca-muted); }
.ca-fav-top { flex: 1; font-size: 13px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-fav[open] .ca-fav-top { visibility: hidden; }
.ca-fav-chev { width: 8px; height: 8px; border-right: 2px solid var(--ca-gold); border-bottom: 2px solid var(--ca-gold); transform: rotate(45deg); margin: -4px 4px 0; transition: transform .15s; }
.ca-fav[open] .ca-fav-chev { transform: rotate(-135deg); margin-top: 4px; }
.ca-fav-list { list-style: none; counter-reset: fav; margin: 6px 0 2px; padding: 0; display: grid; gap: 6px; }
.ca-fav-list li { counter-increment: fav; display: grid; grid-template-columns: 22px minmax(0, 2.4fr) minmax(24px, 1fr) 34px; align-items: center; gap: 8px; font-size: 13px; } /* names first: "Corey Harawira-Naera" whole at 360 */
.ca-fav-list li::before { content: counter(fav); font-size: 11px; font-weight: 900; color: var(--ca-muted); text-align: right; }
.ca-fav-list li:first-child::before { color: var(--ca-gold); }
.ca-fav-name { font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-fav-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.ca-fav-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #c8882a, var(--ca-gold)); }
.ca-fav-n { font-size: 12px; font-weight: 800; color: var(--ca-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Daily line on the 27-0 Daily card */
.ca-daily-line { margin: 10px 0 0; font-size: 12.5px; color: #d6d6e4; }
.ca-daily-line b { color: var(--ca-gold); }

/* Recent games */
.ca-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ca-recent li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "game score" "mode res"; gap: 1px 10px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--ca-line); }
.ca-r-game { grid-area: game; font-weight: 900; font-size: 13px; }
.ca-r-mode { grid-area: mode; font-size: 11.5px; color: var(--ca-muted); }
.ca-r-score { grid-area: score; text-align: right; font-weight: 900; font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.ca-r-score small { font-size: 10px; color: var(--ca-muted); font-weight: 700; }
.ca-r-res { grid-area: res; text-align: right; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--ca-gold); }
.ca-r-res.is-win { color: #4ade80; }
.ca-r-res.is-fail { color: #f87171; }

.ca-settings { margin-top: 6px; }
.ca-spin { width: 34px; height: 34px; margin: 18px auto 12px; border-radius: 50%; border: 3px solid rgba(var(--ca-gold-rgb), .25); border-top-color: var(--ca-gold); animation: caSpin .8s linear infinite; }
@keyframes caSpin { to { transform: rotate(360deg); } }

/* Header button (host adds <button data-cast-account>) */
.ca-btn-head { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #f1c073; background: #f1c073; color: #111; font: 900 11px/1 Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(241, 192, 115, .18), 0 4px 14px rgba(241, 192, 115, .25); }
.ca-btn-head svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (hover: hover) { .ca-btn-head:hover { background: #f7d49a; border-color: #f7d49a; } }
/* Phones keep the label ("Sign In" / "Profile") so the button reads as the way in; only the tiniest screens drop it */
@media (max-width: 560px) { .ca-btn-head { padding: 0 11px 0 9px; gap: 5px; } }
@media (max-width: 340px) { .ca-btn-head { width: 38px; padding: 0; justify-content: center; } .ca-head-lbl { display: none; } }

/* Results prompt (host adds <div data-cast-results>) */
.ca-cta { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 12px 12px 12px 14px; border-radius: 14px; text-align: left;
  background: linear-gradient(135deg, rgba(241, 192, 115, .16), rgba(241, 192, 115, .05)); border: 1.5px solid rgba(241, 192, 115, .6); font-family: Inter, system-ui, sans-serif; }
.ca-cta.is-in { background: linear-gradient(135deg, rgba(74, 222, 128, .14), rgba(74, 222, 128, .04)); border-color: rgba(74, 222, 128, .55); }
.ca-cta-ico { font-size: 24px; flex-shrink: 0; }
.ca-cta-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ca-cta-txt b { font-size: 15px; font-weight: 900; color: #fff; }
.ca-cta-txt small { font-size: 12px; color: #b8b8cc; line-height: 1.35; }
.ca-cta-btn { flex-shrink: 0; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 0; background: #f1c073; color: #111; font: 900 12px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; }
.ca-cta.is-in .ca-cta-btn { background: transparent; color: #86efac; border: 1.5px solid rgba(74, 222, 128, .6); }

@media (prefers-reduced-motion: reduce) { .ca-panel, .ca-spin, .ca-tile-ico { animation: none !important; } }

/* ---- Leaderboards ---- */
.ca-tab-ico { font-style: normal; }
@media (max-width: 420px) { .ca-tab { font-size: 12.5px; letter-spacing: 0; } .ca-tab-ico { display: none; } }
.ca-lb-boards { margin: 14px 0 10px; }
.ca-lb-boards .ca-chip { min-height: 36px; font-size: 12.5px; padding: 0 12px; }
.ca-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; margin: 0 0 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); }
.ca-seg-btn { min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ca-muted); font: 800 12.5px/1 Inter, sans-serif; cursor: pointer; }
.ca-seg-btn.is-on { background: rgba(255, 255, 255, .14); color: #fff; } /* white, not gold: gold is kept for CAST Pass */
.ca-lb-note { font-size: 12px; margin: 0 0 10px; }
/* Your rank: one fixed-height line in every state (checking, ranked, not ranked yet), so the list below never moves */
.ca-lb-rank { box-sizing: border-box; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(241, 192, 115, .12); border: 1px solid rgba(241, 192, 115, .5); font: 700 14px/24px Inter, sans-serif; color: #fff; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-lb-rank b { color: var(--ca-gold); font-size: 17px; line-height: 1; }
.ca-lb-rank.is-none { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .55); }
.ca-lb-rank.is-none b { color: #fca5a5; }
.ca-lb-rank.is-wait { color: var(--ca-muted); font-weight: 600; }
/* Not ranked yet: the whole box starts that mode */
.ca-lb-rank.is-play { display: block; width: 100%; box-sizing: border-box; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s; }
.ca-lb-rank.is-play .ca-lb-play-go { display: inline-block; margin-left: 2px; font-size: 18px; line-height: 1; color: #fca5a5; transition: transform .15s; }
.ca-lb-rank.is-play:focus-visible { outline: 2px solid #fca5a5; outline-offset: 2px; }
.ca-lb-rank.is-play:active { background: rgba(248, 113, 113, .22); }
@media (hover: hover) { .ca-lb-rank.is-play:hover { background: rgba(248, 113, 113, .2); border-color: #f87171; } .ca-lb-rank.is-play:hover .ca-lb-play-go { transform: translateX(3px); } }
.ca-lb-foot { margin: 10px 0 0; }
.ca-lb-rank.is-off { background: rgba(255, 255, 255, .04); border-color: var(--ca-line); color: var(--ca-muted); font-size: 13px; }
.ca-lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ca-lb-row { display: grid; grid-template-columns: 36px 26px 1fr auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid transparent; }
.ca-lb-row.is-me { background: rgba(241, 192, 115, .14); border-color: var(--ca-gold); }
.ca-lb-pos { font: italic 900 15px/1 Inter, sans-serif; color: var(--ca-muted); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ca-lb-row.is-top1 .ca-lb-pos { color: #f1c073; font-size: 18px; }
.ca-lb-row.is-top2 .ca-lb-pos { color: #d7dbe3; font-size: 17px; }
.ca-lb-row.is-top3 .ca-lb-pos { color: #d99a6c; font-size: 16px; }
/* Long ranks shrink to fit the column (after the top-3 sizes, so they always win) */
.ca-lb-row .ca-lb-pos.is-3 { font-size: 13px; letter-spacing: -.3px; }
.ca-lb-row .ca-lb-pos.is-4 { font-size: 11px; letter-spacing: -.4px; }
.ca-lb-row .ca-lb-pos.is-5 { font-size: 9.5px; letter-spacing: -.4px; }
.ca-lb-club { display: inline-grid; place-items: center; width: 26px; height: 26px; justify-self: center; border-radius: 7px; background: var(--t1); color: var(--t2); font: 900 8.5px/1 Inter, sans-serif; letter-spacing: .2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ca-lb-club.is-none { background: rgba(255, 255, 255, .06); box-shadow: none; }
/* Nations (World Cup, 4 Oct 2026): a side's third colour as a stripe along the bottom of its badge */
.ca-lb-club.has-stripe { background: linear-gradient(to bottom, var(--t1) 0 74%, var(--t3) 74% 100%); }
/* Admin, World Cup Tries: the last games counted */
.ca-adm-wct { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--ca-muted); }
.ca-adm-wct li { margin-top: 2px; }
.ca-lb-n { font: 800 14px/1.2 Inter, sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ca-lb-n em { font-style: normal; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; color: #111; background: var(--ca-gold); padding: 2px 5px; border-radius: 4px; vertical-align: 2px; }
.ca-lb-s { font: 900 14px/1.1 Inter, sans-serif; color: #fff; text-align: right; white-space: nowrap; }
.ca-lb-s small { font-size: 12px; font-weight: 700; color: var(--ca-muted); }
.ca-lb-empty { padding: 18px 0; }
.ca-lb-name { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); }
.ca-lb-name label b { font-size: 14px; color: #fff; }
.ca-lb-name small { font-size: 11.5px; color: var(--ca-muted); line-height: 1.4; }
.ca-lb-name-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ca-lb-name input { min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--ca-line); background: #0d0d16; color: #fff; font: 700 15px Inter, sans-serif; min-width: 0; }
.ca-lb-name input:focus { outline: none; border-color: var(--ca-gold); }
.ca-lb-name-row .ca-btn { margin: 0; min-height: 42px; }
.ca-lb-err { margin: 0; font-size: 12.5px; color: #fca5a5; font-weight: 700; }
.ca-lb-me { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); }
.ca-lb-me-txt { font-size: 13.5px; color: #d6d6e4; }
.ca-lb-me-txt b { color: var(--ca-gold); font-size: 15px; }
.ca-lb-me .ca-row { margin: 0; }
.ca-lb-me .ca-row { display: flex; flex-wrap: nowrap; gap: 8px; }
.ca-lb-me .ca-btn-sm { width: auto; flex: 0 0 auto; min-height: 32px; padding: 6px 14px; font-size: 12.5px; border-radius: 999px; white-space: nowrap; border-width: 1.5px; }

/* ---- Trophies ---- */
.ca-trophies { margin: 16px 0 8px; }
.ca-trophies-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; }
.ca-trophies-h b { font: 900 13px/1 Inter, sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--ca-gold); }
.ca-trophies-h span { font: 800 12px/1 Inter, sans-serif; color: var(--ca-muted); }
/* Trophies and Recent Games fold away so the Stats tab is not one long scroll */
.ca-fold { margin: 12px 0 8px; border: 1px solid var(--ca-line); border-radius: 14px; background: rgba(255, 255, 255, .02); padding: 0 12px; }
.ca-fold > summary { list-style: none; cursor: pointer; align-items: center; gap: 10px; min-height: 48px; margin: 0; }
.ca-fold > summary::-webkit-details-marker { display: none; }
.ca-fold > summary:focus { outline: none; }
.ca-fold > summary:focus-visible { outline: 2px solid rgba(241, 192, 115, .7); outline-offset: 2px; border-radius: 10px; }
.ca-fold > summary b { flex: 0 0 auto; }
.ca-fold-peek { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-align: right; font-size: 15px; letter-spacing: 2px; }
.ca-fold[open] .ca-fold-peek { visibility: hidden; }
.ca-fold-n { margin-left: auto; }
.ca-fold-peek + .ca-fold-n { margin-left: 0; }
.ca-fold[open] > summary .ca-fav-chev { transform: rotate(-135deg); margin-top: 4px; }
.ca-fold[open] { padding-bottom: 12px; }
@media (hover: hover) { .ca-fold > summary:hover b { color: #fff; } }
.ca-play-cell.is-best { background: linear-gradient(160deg, rgba(var(--ca-gold-rgb), .2), rgba(var(--ca-gold-rgb), .05)); border-color: rgba(var(--ca-gold-rgb), .65); }
.ca-play-cell.is-best .ca-play-big { color: var(--ca-gold); }
.ca-play-cell.is-best .ca-play-lbl { color: var(--ca-gold); }
.ca-best { color: var(--ca-gold); font-weight: 900; }
.ca-play-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(var(--ca-gold-rgb), .24), rgba(var(--ca-gold-rgb), .06)); border: 1.5px solid rgba(var(--ca-gold-rgb), .7); }
.ca-play-hero .ca-play-lbl { color: var(--ca-gold); font-size: 12px; }
.ca-play-hero b { font: italic 900 34px/1 Inter, sans-serif; letter-spacing: -.5px; color: var(--ca-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-trophy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ca-trophy { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 6px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--ca-line); text-align: center; min-width: 0; }
.ca-trophy:not(.is-on) .ca-trophy-ico { opacity: .45; filter: grayscale(1); }
.ca-trophy:not(.is-on) b { color: #d3d3e2; }
.ca-trophy:not(.is-on) small { color: #8b8ba4; }
.ca-trophy.is-on { opacity: 1; background: rgba(241, 192, 115, .1); border-color: rgba(241, 192, 115, .55); }
.ca-trophy .ca-trophy-ico { font-size: 22px; line-height: 1.1; }
.ca-trophy b { font: 900 11.5px/1.2 Inter, sans-serif; color: #fff; }
.ca-trophy small { font-size: 10px; line-height: 1.3; color: var(--ca-muted); }
.ca-trophy-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 10090; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 14px;
  background: #16162a; border: 2px solid var(--ca-gold, #f1c073); box-shadow: 0 12px 40px rgba(0, 0, 0, .55); color: #fff; font-family: Inter, sans-serif;
  transform: translate(-50%, 30px); opacity: 0; transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), opacity .35s; max-width: calc(100vw - 32px); }
.ca-trophy-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.ca-trophy-toast .ca-trophy-ico { font-size: 28px; }
.ca-trophy-toast small { display: block; font: 900 10px/1 Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ca-gold, #f1c073); margin-bottom: 3px; }
.ca-trophy-toast b { font: 900 15px/1.2 Inter, sans-serif; }
.ca-trophy-toast .ca-cta-btn { margin-left: 4px; }

/* ---- Bonus reroll ---- */
.ca-bonus .ca-body { text-align: center; }
.ca-bonus-ico { font-size: 44px; line-height: 1; margin: 4px 0 8px; }
.ca-h2 { font: italic 900 24px/1.1 Inter, sans-serif; text-transform: uppercase; color: #fff; margin: 0 0 8px; }
.ca-follow-yt, .ca-follow-ig { width: 100%; margin: 0 0 8px; color: #fff !important; border: 0 !important; font-weight: 900; }
.ca-follow-yt { background: #ff0000 !important; }
.ca-follow-ig { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888) !important; }
.ca-follow-yt:disabled, .ca-follow-ig:disabled { opacity: .45; }
.ca-lb-club-row { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.ca-lb-club-row label { font: 800 12px/1 Inter, sans-serif; color: var(--ca-muted); text-transform: uppercase; letter-spacing: .6px; }
.ca-lb-club-row select, .ca-lb-name select { flex: 1; min-height: 38px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--ca-line); background: #0d0d16; color: #fff; font: 700 14px Inter, sans-serif; min-width: 0; }
.ca-lb-report { display: block; margin: 12px auto 0; }

/* ---- "Want another reroll?" nudge ---- */
.ca-nudge { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 10085; display: flex; align-items: center; gap: 10px; width: min(420px, calc(100vw - 24px));
  padding: 10px 10px 10px 12px; border-radius: 14px; background: #16162a; border: 2px solid var(--ca-gold, #f1c073); box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  color: #fff; font-family: Inter, sans-serif; transform: translate(-50%, 30px); opacity: 0; transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), opacity .35s; }
.ca-nudge.is-on { transform: translate(-50%, 0); opacity: 1; }
.ca-nudge-ico { font-size: 26px; }
.ca-nudge-txt { flex: 1; min-width: 0; line-height: 1.25; }
.ca-nudge-txt b { display: block; font: 900 14px/1.2 Inter, sans-serif; }
.ca-nudge-txt small { font-size: 12px; color: #c9c9da; }
.ca-nudge-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #9a9ab0; font-size: 14px; cursor: pointer; }
/* Long boards scroll inside the panel; your own row pinned underneath when outside the list */
.ca-lb { max-height: min(56vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.ca-lb-pinned { margin-top: 6px; }
/* Trophy tiles are all one size: one-line names, two-line descriptions */
.ca-trophy-grid { grid-auto-rows: 1fr; }
.ca-trophy { height: 100%; min-height: 104px; justify-content: flex-start; padding: 10px 5px 8px; }
.ca-trophy b { width: 100%; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-trophy b.is-long { font-size: 10px; } /* 14+ letters (Maroon Machine, Against the Odds): still one line at 390px */
.ca-trophy b.is-xlong { font-size: 9.5px; } /* 17+ letters (Player of the Week) */
@media (max-width: 374px) { /* narrow phones (360 wide): every name still whole on one line (7 Oct 2026) */
  .ca-trophy { padding-left: 3px; padding-right: 3px; }
  .ca-trophy b { font-size: 10px; letter-spacing: -.2px; }
  .ca-trophy b.is-long { font-size: 9.5px; }
  .ca-trophy b.is-xlong { font-size: 9px; }
  .ca-trophy small { font-size: 9.5px; } /* descriptions keep to their two lines (no hidden third line, no lonely word) */
}
.ca-trophy small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }

/* How much you play: Today / This week / All time */
.ca-play { margin: 0 0 14px; padding: 14px; border-radius: 16px; background: var(--ca-card); border: 1px solid var(--ca-line); }
.ca-play-h { font: 900 12px/1 Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ca-gold); margin-bottom: 12px; }
.ca-play-h span { color: var(--ca-muted); font-weight: 600; font-size: 11.5px; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.ca-play-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ca-play-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--ca-line); text-align: center; }
.ca-play-lbl { font: 800 11px/1 Inter, sans-serif; color: var(--ca-muted); text-transform: uppercase; letter-spacing: .6px; }
.ca-play-big { font: 900 28px/1.05 Inter, sans-serif; color: var(--ca-text); font-variant-numeric: tabular-nums; }
.ca-play-cell small { font-size: 11px; color: var(--ca-muted); }
.ca-play-cell small .ca-best { display: block; margin-top: 2px; } /* the label, then its value on a line of its own: the same in every tile */
/* Your Games panel and per-game stats use the same compact tiles as Lifetime Stats */
.ca-play-h-row { display: flex; align-items: center; justify-content: space-between; }
.ca-play-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ca-play-grid-auto { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.ca-play-btn { font: inherit; color: inherit; cursor: pointer; }
@media (hover: hover) { .ca-play-btn:hover { border-color: var(--ca-gold); } }
.ca-play-grid-4 .ca-play-big { font-size: 22px; }
.ca-play-lbl { line-height: 1.2; }
.ca-play + .ca-daily-line, .ca-play .ca-daily-line { margin-top: 10px; }

/* ---- Sign-up pitch: animated reasons to make a free account (CastAccount.pitch) ---- */
.ca-pitch .ca-body { text-align: center; }
.ca-pitch .ca-kicker { margin-top: 2px; }
.ca-pz-bars { display: flex; gap: 5px; margin: 2px 44px 14px 0; }
.ca-pz-bars button { flex: 1; height: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.ca-pz-bars i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; position: relative; }
.ca-pz-bars .is-done i { background: var(--ca-gold); }
.ca-pz-bars .is-on i::after { content: ""; position: absolute; inset: 0; background: var(--ca-gold); transform-origin: left; animation: caPzBar 3.8s linear both; }
@keyframes caPzBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Every slide sits in the same grid cell, so the pop-up keeps the height of the tallest and never jumps */
.ca-pz-stage { cursor: pointer; display: grid; }
.ca-pz-slide { grid-area: 1 / 1; display: flex; flex-direction: column; }
.ca-pz-art { margin-block: auto; } /* shorter slides sit in the middle of the space, not stuck to the top */
.ca-pz-slide:not(.is-on) { visibility: hidden; }
.ca-pz-slide .ca-title { margin: 4px 0 6px; }
.ca-pz-slide .ca-text { margin: 0 auto 14px; max-width: 34ch; }
.ca-pz-art { position: relative; text-align: left; }
.ca-pz-eg { display: block; margin-top: 6px; text-align: center; font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--ca-muted); opacity: .7; }
.ca-pz-cta { margin-top: 6px; font-size: 16px; min-height: 52px; animation: caPzPulse 2.4s ease-in-out infinite; }
@keyframes caPzPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ca-gold-rgb), .45); } 50% { box-shadow: 0 0 0 8px rgba(var(--ca-gold-rgb), 0); } }
.ca-pz-fine { margin-top: 8px; }

/* Board */
.ca-pz-board { padding: 10px; border-radius: 14px; background: var(--ca-card); border: 1px solid var(--ca-line); }
.ca-pz-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ca-pz-tabs span { padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--ca-muted); border: 1px solid var(--ca-line); }
.ca-pz-slide.is-on .ca-pz-tabs span { animation: caPzTab 3.6s steps(1) forwards; animation-delay: calc(var(--i) * 1.1s); }
.ca-pz-tabs span:first-child { background: var(--ca-gold); color: #111; border-color: var(--ca-gold); }
.ca-pz-slide.is-on .ca-pz-tabs span:first-child { animation: none; }
/* Each tab lights up in its own board colour on its turn (see [data-mc] below), then settles back */
@keyframes caPzTab { 0% { background: var(--mf, var(--ca-gold)); color: var(--mo, #111); border-color: var(--mf, var(--ca-gold)); }
  30%, 100% { background: color-mix(in srgb, var(--mc, #8a8aa0) 10%, transparent); color: var(--mt, var(--ca-muted)); border-color: color-mix(in srgb, var(--mc, #8a8aa0) 45%, transparent); } }
.ca-pz-row { display: grid; grid-template-columns: 20px 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; font-size: 13px; }
.ca-pz-row + .ca-pz-row { margin-top: 3px; }
.ca-pz-row em { font-style: normal; font-weight: 900; color: var(--ca-muted); text-align: right; font-variant-numeric: tabular-nums; }
.ca-pz-row.is-top em { color: var(--ca-gold); }
.ca-pz-row i { width: 14px; height: 14px; border-radius: 50%; }
.ca-pz-row b { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-pz-row span { font-size: 12px; font-weight: 800; color: var(--ca-muted); font-variant-numeric: tabular-nums; }
.ca-pz-slide.is-on .ca-pz-row { animation: caPzIn .4s ease both; animation-delay: calc(var(--i) * 70ms); }
@keyframes caPzIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.ca-pz-you { margin-top: 6px !important; background: rgba(var(--ca-gold-rgb), .16); border: 1.5px solid var(--ca-gold); }
.ca-pz-you em, .ca-pz-you b, .ca-pz-you span { color: var(--ca-gold) !important; }
.ca-pz-you i { background: var(--ca-gold); }
.ca-pz-slide.is-on .ca-pz-you { animation: caPzClimb 1.8s cubic-bezier(.2, .8, .3, 1) .4s both; }
@keyframes caPzClimb { 0% { transform: translateY(26px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(-4px); } 100% { transform: none; } }

/* Stats */
.ca-pz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ca-pz-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; background: var(--ca-card); border: 1px solid var(--ca-line); text-align: center; }
.ca-pz-stat span { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ca-muted); }
.ca-pz-stat b { font-size: 26px; font-weight: 900; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-pz-stat.is-best { background: linear-gradient(160deg, rgba(var(--ca-gold-rgb), .22), rgba(var(--ca-gold-rgb), .05)); border-color: rgba(var(--ca-gold-rgb), .7); }
.ca-pz-stat.is-best span, .ca-pz-stat.is-best b { color: var(--ca-gold); }
.ca-pz-slide.is-on .ca-pz-stat { animation: caPzPop .45s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes caPzPop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
.ca-pz-fav { margin-top: 8px; padding: 9px 12px; border-radius: 10px; display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ca-muted); background: rgba(255, 255, 255, .03); border: 1px solid var(--ca-line); }
.ca-pz-fav b { font-size: 13px; letter-spacing: 0; text-transform: none; color: #fff; }

/* Trophies */
.ca-pz-trophies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ca-pz-trophy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 12px; background: var(--ca-card); border: 1px solid var(--ca-line); text-align: center; }
.ca-pz-trophy b { font-size: 11px; font-weight: 800; color: #fff; line-height: 1.2; }
.ca-pz-ico, .ca-pz-lock { font-size: 24px; line-height: 1; height: 26px; }
.ca-pz-lock { position: absolute; top: 12px; left: 0; right: 0; opacity: 0; }
.ca-pz-slide.is-on .ca-pz-trophy { animation: caPzGlow .5s ease both; animation-delay: calc(.35s + var(--i) * .32s); }
.ca-pz-slide.is-on .ca-pz-lock { animation: caPzLock .5s ease both; animation-delay: calc(.35s + var(--i) * .32s); }
.ca-pz-slide.is-on .ca-pz-ico { animation: caPzUnlock .5s cubic-bezier(.2, .9, .3, 1.5) both; animation-delay: calc(.35s + var(--i) * .32s); }
@keyframes caPzLock { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px) rotate(-20deg) scale(.6); } }
@keyframes caPzUnlock { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes caPzGlow { 0% { border-color: var(--ca-line); } 50% { border-color: var(--ca-gold); box-shadow: 0 0 18px rgba(var(--ca-gold-rgb), .35); } 100% { border-color: rgba(var(--ca-gold-rgb), .45); } }

/* Perks */
.ca-pz-perks { display: grid; gap: 8px; }
.ca-pz-perk { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "ico t" "ico s"; align-items: center; column-gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ca-card); border: 1px solid var(--ca-line); }
.ca-pz-perk > span { grid-area: ico; font-size: 30px; line-height: 1; text-align: center; }
.ca-pz-perk b { grid-area: t; font-size: 14.5px; color: #fff; }
.ca-pz-perk small { grid-area: s; font-size: 12px; color: var(--ca-muted); }
.ca-pz-slide.is-on .ca-pz-perk { animation: caPzIn .4s ease both; animation-delay: calc(var(--i) * 140ms); }
.ca-pz-slide.is-on .ca-pz-dice { animation: caPzRoll 1.1s cubic-bezier(.2, .8, .3, 1) .3s both; }
@keyframes caPzRoll { from { transform: rotate(-540deg) scale(.4); } to { transform: none; } }
.ca-pz-slide.is-on .ca-pz-flame { animation: caFlame 1.4s ease-in-out infinite; }
.ca-pz-slide.is-on .ca-pz-sync { animation: caPzSync 1.6s ease-in-out .5s 2; }
@keyframes caPzSync { 0%, 100% { transform: none; } 50% { transform: translateX(6px) rotate(8deg); } }

@media (max-width: 380px) { .ca-pz-stat b { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) {
  .ca-pitch *, .ca-pitch *::after { animation: none !important; }
  .ca-pz-lock { display: none; }
}

/* ---- Leaderboard on the host's home page (<section data-cast-board>) ---- */
.ca-hb { --ca-gold: #f1c073; --ca-gold-rgb: 241, 192, 115; --ca-text: #f0f0f5; --ca-muted: #a9a9c1; --ca-line: #2a2a44; --ca-card: #16152a;
  display: block; box-sizing: border-box; margin: 18px 0; padding: 16px 14px 14px; border-radius: 18px; text-align: left;
  font-family: Inter, system-ui, -apple-system, sans-serif; color: var(--ca-text);
  background: radial-gradient(120% 70% at 50% 0%, rgba(var(--ca-gold-rgb), .12), transparent 65%), linear-gradient(180deg, #1b1830, #121024);
  border: 1.5px solid rgba(var(--ca-gold-rgb), .55); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.ca-hb[hidden] { display: none !important; }
.ca-hb-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ca-hb-h b { font: italic 900 20px/1 Inter, sans-serif; letter-spacing: -.3px; text-transform: uppercase; color: #fff; }
.ca-hb-all { border: 0; background: none; padding: 6px 2px; cursor: pointer; color: var(--ca-gold); font: 800 13px/1 Inter, sans-serif; }
.ca-hb-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px 6px; padding: 0 2px; }
.ca-hb-tabs::-webkit-scrollbar { display: none; }
.ca-hb-tabs button { flex: 1 0 auto; min-height: 34px; padding: 0 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--ca-line); background: rgba(255, 255, 255, .03); color: var(--ca-muted); font: 800 12.5px/1 Inter, sans-serif; }
.ca-hb-tabs button.is-on { background: var(--ca-gold); border-color: var(--ca-gold); color: #111; }
/* Four or fewer boards: one row of equal tabs, all in view (short names on phones: Classic, Pack, Daily, Hard) */
.ca-hb-tabs.is-row { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); overflow: visible; }
.ca-hb-tabs.is-row button { min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .ca-hb-tabs.is-row { gap: 5px; } .ca-hb-tabs.is-row button { min-height: 32px; padding: 0 3px; font-size: 12px; } }
.ca-hb-sub { margin: 4px 2px 8px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ca-muted); }
.ca-hb .ca-hb-list { max-height: none; overflow: visible; }
.ca-hb-msg { margin: 8px 0 4px; padding: 16px 10px; border-radius: 12px; text-align: center; font-size: 13.5px; color: var(--ca-muted); background: rgba(255, 255, 255, .03); border: 1px dashed var(--ca-line); }
.ca-hb-more { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--ca-muted); }
.ca-hb-cta { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 12px 12px 14px; border-radius: 14px;
  background: rgba(var(--ca-gold-rgb), .1); border: 1px solid rgba(var(--ca-gold-rgb), .4); }
.ca-hb-cta > span { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ca-hb-cta b { font-size: 14.5px; color: #fff; }
.ca-hb-cta small { font-size: 12px; line-height: 1.35; color: #c9c9da; }
.ca-hb-cta.is-me b { color: var(--ca-gold); }

/* ---- Calmer profile (2026-09-26 polish): sticky tabs and actions, quiet links, danger zone ---- */
/* Main tabs stay put while the content scrolls under them */
.ca-tabs { position: sticky; top: -20px; z-index: 4; background: #1c1930; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .7); }
@media (min-width: 720px) { .ca-tabs { top: -26px; } }
/* Primary actions on long forms (Save Fan Profile) are always on screen */
.ca-sticky-actions { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom, 0px)); z-index: 4; display: grid; gap: 6px; margin: 18px -18px calc(-22px - env(safe-area-inset-bottom, 0px));
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(15, 13, 29, .6), #0f0d1d 30%); border-top: 1px solid var(--ca-line); }
.ca-sticky-actions .ca-btn { margin: 0; }
@media (min-width: 720px) { .ca-sticky-actions { bottom: -22px; margin: 18px -26px -22px; padding: 12px 26px 16px; border-radius: 0 0 20px 20px; } }
.ca-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 13px; box-sizing: border-box; vertical-align: middle; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font: 800 12.5px/1.15 Inter, sans-serif; text-decoration: none; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-link:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
@media (hover: hover) { .ca-link:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); } }
.ca-link.is-pass { border-color: rgba(241, 192, 115, .6); background: rgba(241, 192, 115, .1); color: var(--ca-gold); }
@media (hover: hover) { .ca-link.is-pass:hover { border-color: var(--ca-gold); background: rgba(241, 192, 115, .18); } }
.ca-muted + .ca-link, .ca-small + .ca-link { margin: -2px 0 12px; }
.ca-quiet-links { margin: 14px 0 0; }
.ca-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .05); }
.ca-danger div { display: grid; gap: 3px; flex: 1 1 180px; }
.ca-danger b { font-size: 13px; color: #fca5a5; }
.ca-danger small { font-size: 12px; color: var(--ca-muted); }
.ca-danger .ca-btn { width: auto; margin: 0; }

/* ---- Full-screen Leaderboards page (view 'boards') ---- */
.ca.is-full { padding: 0; align-items: stretch; }
.ca.is-full .ca-panel { max-width: none; width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none;
  padding: calc(18px + env(safe-area-inset-top, 0px)) max(16px, calc((100% - 720px) / 2)) calc(28px + env(safe-area-inset-bottom, 0px)); animation: caFade .2s ease both; }
.ca.is-full .ca-panel.has-team::before { display: none; }
.ca.is-full .ca-x { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: max(14px, calc((100% - 720px) / 2)); /* solid, so the page scrolls cleanly under it */
  background: #1d1a31; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
@keyframes caFade { from { opacity: 0; } to { opacity: 1; } }
.ca-full-head { margin: 0 48px 14px 0; }
.ca-full-title { margin: 4px 0 4px; font: italic 900 28px/1.1 Inter, sans-serif; letter-spacing: -.5px; color: #fff; text-transform: uppercase; }
.ca-me-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 13px; color: var(--ca-muted); }
.ca-me-line b { color: #fff; }
.ca-me-line .ca-link { min-height: 28px; padding: 4px 11px; font-size: 12px; }
.ca-lb-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px 10px; padding: 0 2px 2px; }
.ca-lb-chips::-webkit-scrollbar { display: none; }
.ca-lb-chips .ca-chip { flex: 0 0 auto; min-height: 36px; padding: 0 13px; font-size: 12.5px; white-space: nowrap; }
.ca-lb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ca-lb-filters .ca-seg { flex: 1 1 210px; margin: 0; }
/* The board filter: a button face (funnel, "Filter", what it shows) with the real select invisible on top of it */
.ca-lb-filter { position: relative; flex: 1 1 130px; min-width: 0; display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 11px 0 12px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--ca-line); background: rgba(255, 255, 255, .04); color: var(--ca-muted); cursor: pointer; transition: border-color .15s, background .15s; }
.ca-lb-filter-i { flex: none; width: 17px; height: 17px; }
.ca-lb-filter-t { flex: 1; min-width: 0; display: grid; gap: 3px; text-align: left; }
.ca-lb-filter-k { font: 800 9px/1 Inter, sans-serif; letter-spacing: .9px; text-transform: uppercase; }
.ca-lb-filter-v { font: 800 12.5px/1.15 Inter, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-lb-filter-c { flex: none; width: 15px; height: 15px; }
.ca-lb-filter select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px; -webkit-appearance: none; appearance: none; }
.ca-lb-filter:focus-within { border-color: rgba(255, 255, 255, .6); }
/* Narrowed to a club, state or country: a white highlight (gold is kept for CAST Pass) */
.ca-lb-filter.is-on { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); color: #fff; }
/* Creators: the tick's blue while the board shows only the blue-tick players */
.ca-lb-filter.is-cr { border-color: rgba(29, 155, 240, .75); background: rgba(29, 155, 240, .12); }
.ca-lb-filter-v .ca-vf { width: 13px; height: 13px; margin-left: 4px; vertical-align: -2px; }
@media (hover: hover) { .ca-lb-filter:hover { border-color: rgba(255, 255, 255, .45); color: #fff; } }
.ca-seg-one { flex: 1 1 210px; display: grid; place-items: center; min-height: 42px; border-radius: 10px; border: 1px solid var(--ca-line); color: var(--ca-muted); font: 800 12.5px/1 Inter, sans-serif; }
.ca-lb-rank-quiet { margin: 0 0 10px; font-size: 12.5px; color: var(--ca-muted); text-align: center; }
.ca.is-full .ca-lb { max-height: none; overflow: visible; }
.ca-lb-report { display: flex; width: max-content; margin: 14px auto 0; color: var(--ca-muted); }
.ca-lb-empty p { margin: 0 0 10px; }
.ca-full-head + .ca-lb-chips + .ca-lb-name { margin-bottom: 10px; }
/* Guests: a blurred glimpse of the board, then sign in */
.ca-gate { position: relative; margin: 4px 0 14px; }
.ca-gate-peek { filter: blur(3.5px); opacity: .8; pointer-events: none; user-select: none; }
.ca-gate-card { position: absolute; inset: 50% 8px auto; transform: translateY(-50%); display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; text-align: center;
  background: rgba(15, 13, 29, .92); border: 1.5px solid rgba(241, 192, 115, .6); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.ca-gate-card b { font-size: 15px; color: #fff; }
.ca-gate-card small { font-size: 12.5px; color: #c9c9da; line-height: 1.4; }
/* The guest Stats page's sign-in card sits in the page, under what this device has played: there is no blurred board under
   it to float over (it floated halfway down, on top of Most Picked, 7 Oct 2026) */
.ca-stats-gate { position: static; inset: auto; transform: none; margin: 14px 0 10px; }

/* Leaderboard freshness: "Updated 2 mins ago" and a small refresh button (15 second cooldown) */
.ca-lb-upd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; min-height: 30px; }
.ca-lb-upd > span { font-size: 12px; color: var(--ca-muted); }
.ca-lb-refresh { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ca-line); background: rgba(255, 255, 255, .04); color: #d6d6e4; font: 800 12px/1 Inter, sans-serif; }
.ca-lb-refresh span { font-size: 14px; }
.ca-lb-refresh:disabled { opacity: .45; cursor: default; }
@media (hover: hover) { .ca-lb-refresh:not(:disabled):hover { border-color: rgba(255, 255, 255, .45); color: #fff; } }
/* Your rank with a Refresh button beside it, one line; "Updated" sits under the board */
.ca-lb-rankrow { display: flex; align-items: stretch; gap: 8px; margin: 0 0 10px; }
.ca-lb-rankrow .ca-lb-rank { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
.ca-lb-refresh.is-icon { flex: none; width: 44px; min-height: 0; padding: 0; justify-content: center; border-radius: 12px; }
.ca-lb-refresh.is-icon span { font-size: 17px; }
.ca-lb-refresh.is-busy span { display: inline-block; animation: ca-turn .9s linear infinite; }
@keyframes ca-turn { to { transform: rotate(360deg); } }
.ca-lb-updated { margin: 8px 0 0; font-size: 11.5px; color: var(--ca-muted); text-align: center; }
/* Phones: the top of the leaderboard stays short, so the board itself shows sooner. Period and filter share a line. */
@media (max-width: 560px) {
  .ca-lb-who { margin-bottom: 6px; }
  .ca-lb-who .ca-seg-btn { min-height: 30px; font-size: 12px; }
  .ca-lb-filters { gap: 6px; margin-bottom: 8px; }
  .ca-lb-filters .ca-seg { flex: 1 1 165px; }
  .ca-lb-filters .ca-seg-btn { min-height: 30px; font-size: 12px; }
  .ca-lb-filters .ca-seg-one { flex: 1 1 165px; min-height: 38px; }
  .ca-lb-filter { flex: 1 1 130px; min-height: 38px; gap: 7px; padding: 0 9px 0 10px; }
  .ca-lb-filter-i { width: 15px; height: 15px; }
  .ca-lb-filter-c { width: 13px; height: 13px; }
  .ca-lb-rankrow { margin-bottom: 8px; }
  .ca-lb-rank { padding: 6px 10px; font-size: 13.5px; line-height: 22px; }
  .ca-lb-rank b { font-size: 15.5px; }
}

/* Leaderboard name step (after sign-up, or until an account has a name) */
.ca-name-step { display: grid; gap: 8px; margin-top: 6px; }
.ca-name-step .ca-field { font-size: 18px; font-weight: 800; text-align: center; letter-spacing: .3px; }
.ca-name-step small { font-size: 12px; color: var(--ca-muted); line-height: 1.45; text-align: center; }
.ca-name-step .ca-btn { margin-top: 6px; }

/* ---- Moderation (admins only) ---- */
.ca-head-mod { margin-left: 2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; display: inline-grid; place-items: center;
  background: #ef4444; color: #fff; font: 900 10.5px/1 Inter, sans-serif; letter-spacing: 0; box-shadow: 0 0 0 2px #0f0d1d; }
@media (max-width: 560px) { .ca-head-mod { position: absolute; top: -7px; left: -6px; } }
.ca-mod-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .08); color: #fca5a5; font: 800 12.5px/1 Inter, sans-serif; }
.ca-mod-toggle b { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; display: inline-grid; place-items: center; background: #ef4444; color: #fff; font-size: 10.5px; }
.ca-mod-toggle.is-on { border-color: var(--ca-line); background: rgba(255, 255, 255, .04); color: #d6d6e4; }
.ca-mod-item { display: grid; gap: 6px; margin: 0 0 8px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--ca-line); }
.ca-mod-item.is-hidden { border-color: rgba(248, 113, 113, .4); }
.ca-mod-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ca-mod-top b { font-size: 15px; color: #fff; word-break: break-all; }
.ca-mod-tag { padding: 3px 7px; border-radius: 6px; font: 900 10px/1 Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; background: rgba(248, 113, 113, .16); color: #fca5a5; }
.ca-mod-tag.is-gone { background: rgba(255, 255, 255, .06); color: var(--ca-muted); }
.ca-mod-item small { font-size: 12px; color: var(--ca-muted); line-height: 1.4; }
.ca-mod-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ca-mod-acts .ca-btn { width: auto; margin: 0; min-height: 32px; padding: 0 12px; font-size: 12px; }

/* Your Ranks (Stats tab) and the back link on the full leaderboard page */
.ca-ranks .ca-play-h-row .ca-link { min-height: 28px; padding: 4px 11px; font-size: 12px; letter-spacing: 0; text-transform: none; }
/* Your Ranks tiles: two to a row, grouped by game */
.ca-rk-h { margin: 12px 0 6px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ca-muted); }
.ca-play-h-row + .ca-rk-h { margin-top: 0; }
.ca-rk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ca-rk-grid + .ca-rk-grid { margin-top: 6px; }
.ca-rk { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 9px 11px 10px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--ca-line); background: rgba(255, 255, 255, .04);
  color: #fff; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-rk.is-wide { grid-column: 1 / -1; }
.ca-rk-k { font: 800 10.5px/1.2 Inter, sans-serif; letter-spacing: .7px; text-transform: uppercase; color: var(--ca-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-rk-v { font: 900 20px/1.1 Inter, sans-serif; color: #fff; white-space: nowrap; }
.ca-rk-v.is-none { padding: 3px 0 2px; font-size: 13.5px; color: #d6d6e4; }
.ca-rk-v.is-wait { color: var(--ca-muted); }
.ca-rk small { font: 600 11.5px/1.2 Inter, sans-serif; color: var(--ca-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-rk:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
@media (hover: hover) { .ca-rk:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .07); } }
/* Stats: which game, as one filter button */
.ca-stats-filter { margin: 0 0 14px; }
.ca-ranks-list { display: grid; gap: 4px; }
.ca-ranks-row { display: grid; grid-template-columns: 1fr auto 14px; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid transparent; background: rgba(255, 255, 255, .03); color: #fff; font: 800 13.5px/1.2 Inter, sans-serif; }
.ca-ranks-k small { font-weight: 600; font-size: 12px; color: var(--ca-muted); margin-left: 4px; }
.ca-ranks-v { font-weight: 700; font-size: 13px; color: #d6d6e4; white-space: nowrap; }
.ca-ranks-v b { font-size: 16px; color: var(--ca-gold); }
.ca-ranks-v.is-none { color: var(--ca-muted); font-weight: 600; font-size: 12.5px; }
.ca-ranks-v.is-wait { color: var(--ca-muted); }
.ca-ranks-go { color: var(--ca-muted); font-size: 18px; }
@media (hover: hover) { .ca-ranks-row:hover { border-color: rgba(241, 192, 115, .45); } }
.ca-back { margin: 0 0 10px; min-height: 30px; padding: 5px 12px 5px 10px; font-size: 12.5px; }

/* Best Record rows: the squad rating as a small number chip in 27-0's rating colours, sitting right beside the record
   (hover or long-press says "Squad rating"). Kept compact so usernames get the room. */
.ca-lb-s:has(.ca-lb-rec) { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }
.ca-lb-sq { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid var(--rc); color: var(--rc);
  background: color-mix(in srgb, var(--rc) 14%, transparent); font: 900 11.5px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.ca-lb-rec { min-width: 2.9em; text-align: right; font-variant-numeric: tabular-nums; }
.ca-lb-s .ca-lb-stage { color: #a2a2b8; font-weight: 700; }

/* Rename form: Cancel and Hide Me side by side, so hiding is never buried behind the editor */
.ca-lb-name-foot { display: flex; gap: 8px; }
.ca-lb-name-foot .ca-btn { flex: 1; margin: 0; }

/* Required setup step: name, team, place */
.ca-chip-none { margin-top: 8px; }
.ca-setup-note { margin: 14px 0 0; font-size: 12px; line-height: 1.45; text-align: center; }
.ca-sticky-actions .ca-lb-err { margin: 0; text-align: center; }

/* Phones keep the square club badge (or a creator's logo): it is narrow enough to leave usernames their room */
@media (max-width: 480px) {
  .ca-lb-row { grid-template-columns: 36px 26px minmax(0, 1fr) auto; gap: 7px; }
}

/* A perfect 27-0: the record itself glows (Perfect Seasons purple). The gold row (edge, wash and gold name) is kept for
   CAST Pass holders only (.is-pass), so gold always means the Pass */
.ca-lb-rec.is-perfect { color: #ddd6fe; text-shadow: 0 0 10px rgba(167, 139, 250, .85), 0 0 2px rgba(221, 214, 254, .9); }

/* Verified creator tick */
.ca-vf { width: 1.05em; height: 1.05em; margin-left: 4px; vertical-align: -0.16em; flex-shrink: 0; }
.ca-lb-n .ca-vf { width: 16px; height: 16px; }
.ca-verified { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ca-verified li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .03); }
.ca-verified li span { font-weight: 800; color: #fff; }
/* Admin > Players > Verified Players: each creator's logo (or club), what is set, and Edit to open their card; Remove on the end */
.ca-vf-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ca-vf-list li { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.ca-vf-open { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 46px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-vf-open:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 1px; }
@media (hover: hover) { .ca-vf-open:hover { background: rgba(255, 255, 255, .06); } .ca-vf-open:hover .ca-vf-edit, .ca-vf-open:hover .ca-lb-go { color: #fff; } }
.ca-vf-open .ca-lb-club { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; color: var(--t2); font: 900 10px/1 Inter, sans-serif; letter-spacing: .3px; }
.ca-vf-open .ca-adm-pn { flex: 1 1 auto; }
.ca-vf-open .ca-adm-pn b { font: 800 14px/1.2 Inter, sans-serif; }
.ca-vf-open .ca-adm-pn .ca-vf { width: 15px; height: 15px; margin: 0; flex: none; }
.ca-vf-edit { flex: 0 0 auto; color: #7cc4f7; font: 800 12.5px/1 Inter, sans-serif; }
.ca-vf-open .ca-lb-go { flex: 0 0 10px; font: 900 20px/1 Inter, sans-serif; color: var(--ca-muted); }
.ca-vf-list .ca-link { flex: 0 0 auto; }
/* A long name shortens with an ellipsis and keeps its tick; on a phone the arrow alone says Edit */
.ca-vf-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 440px) { .ca-vf-edit { display: none; } .ca-vf-list .ca-link { padding: 6px 11px; } }

/* Email opt-in inside the setup step: one tap, unticked until they choose it */
.ca-mail { display: grid; grid-template-columns: 40px 1fr 30px; align-items: center; gap: 12px; width: 100%; margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1.5px dashed rgba(241, 192, 115, .5); background: rgba(241, 192, 115, .05); color: var(--ca-text); font: inherit; }
.ca-mail.is-on { border-style: solid; border-color: #4ade80; background: rgba(74, 222, 128, .08); }
.ca-mail-ico { font-size: 28px; line-height: 1; text-align: center; }
.ca-mail-txt { display: grid; gap: 3px; }
.ca-mail-txt b { font-size: 15px; color: #fff; }
.ca-mail-txt small { font-size: 12px; line-height: 1.4; color: #c9c9da; }
.ca-mail-box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(241, 192, 115, .6); display: grid; place-items: center; font-weight: 900; color: #052e14; }
.ca-mail.is-on .ca-mail-box { background: #4ade80; border-color: #4ade80; }

/* Verified chip in the profile header, beside the fan chip */
.ca-head-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px -44px 0 0; }
.ca-hchip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 7px; box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: #fff; font: 800 11.5px/1 Inter, sans-serif; white-space: nowrap; }
.ca-hchip .ca-vf { width: 15px; height: 15px; margin: 0; flex: none; }
.ca-hchip.is-pass { border-color: rgba(241, 192, 115, .65); background: rgba(241, 192, 115, .12); color: var(--ca-gold); cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .ca-hchip.is-pass:hover { border-color: var(--ca-gold); background: rgba(241, 192, 115, .2); } }
.ca-hchip.is-pass:focus-visible { outline: 2px solid var(--ca-gold); outline-offset: 2px; }
.ca-hchip-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--t1) 50%, var(--t2) 50%); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .3); }
.ca-hchip.is-vf { border-color: rgba(29, 155, 240, .5); background: rgba(29, 155, 240, .1); }
.ca-vchip { display: inline-flex; align-items: center; gap: 2px; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(29, 155, 240, .14); border: 1.5px solid rgba(29, 155, 240, .6); color: #fff; font: 800 12px/1 Inter, sans-serif; }
.ca-vchip small { margin-left: 6px; font-size: 10px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: #7cc4f7; }

/* ---- Team sheets: tap a leaderboard row or a recent game to see the team behind it ---- */
.ca-lb-row.has-go { grid-template-columns: 36px 26px minmax(0, 1fr) auto 10px; }
.ca-lb-row.is-tap { cursor: pointer; transition: background .15s, border-color .15s; }
.ca-lb-go { color: var(--ca-muted); font: 900 20px/1 Inter, sans-serif; text-align: right; margin-top: -2px; }
.ca-lb-row.is-tap:focus-visible, .ca-recent li.is-tap:focus-visible { outline: 2px solid var(--ca-gold); outline-offset: 2px; }
@media (hover: hover) {
  .ca-lb-row.is-tap:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); }
  .ca-lb-row.is-tap:hover .ca-lb-go { color: var(--ca-gold); }
  .ca-recent li.is-tap:hover { background: rgba(255, 255, 255, .07); }
}
@media (max-width: 480px) { .ca-lb-row.has-go { grid-template-columns: 36px 26px minmax(0, 1fr) auto 10px; } }
.ca-recent li.is-tap { cursor: pointer; }

.ca-sheet-kicker { margin: 10px 0 0; font: 900 11px/1.3 Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ca-gold); }
.ca-sheet-title { display: flex; align-items: center; gap: 10px; text-transform: none; font-style: normal; font-size: 26px; overflow-wrap: anywhere; }
.ca-sheet-title .ca-lb-club { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 13px; font-size: 14px; letter-spacing: .4px; }
.ca-sheet-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ca-sf { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ca-line); background: rgba(255, 255, 255, .05);
  font: 700 12.5px/1.2 Inter, sans-serif; color: #d6d6e4; white-space: nowrap; }
.ca-sf b { font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.ca-sf.is-main b { font-size: 15px; }
.ca-sf.is-main.is-win { border-color: rgba(74, 222, 128, .55); background: rgba(74, 222, 128, .1); }
.ca-sf.is-main.is-fail { border-color: rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .08); }
.ca-sf.is-rating { border-color: var(--rc); color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); }
.ca-sf.is-rating b { color: var(--rc); }
.ca-sf.is-legend { border-color: #c98a4b; color: #e7c08f; }
.ca-sf.is-immortal { border-color: #f1c073; color: #fff1c4; }
.ca-sheet-when { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--ca-muted); }
.ca-sheet-seg { max-width: 260px; }

/* Field: the 13 in their spots, club colour along the top of each */
.ca-pitch { display: grid; gap: 10px; padding: 16px 8px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08);
  background: repeating-linear-gradient(180deg, #13301f 0 44px, #16371f 44px 88px); }
.ca-pitch-row { display: flex; justify-content: center; gap: 6px; }
/* 4000 GOALS (12 Oct 2026): an oval of 18, three to a row, a gap between the lines (forwards, midfield, backs) */
.ca-pitch.is-oval { border-radius: 48% / 22%; padding: 22px 14px; gap: 8px; }
.ca-pitch.is-oval .ca-spot { flex-basis: 30%; }
.ca-pitch.is-oval .ca-pitch-row:nth-child(2), .ca-pitch.is-oval .ca-pitch-row:nth-child(4) { margin-bottom: 8px; }
.ca-spot { flex: 0 1 25%; max-width: 124px; min-width: 0; display: grid; gap: 3px; padding: 6px 6px 7px; border-radius: 10px; text-align: center;
  background: rgba(8, 8, 16, .86); border: 1px solid rgba(255, 255, 255, .12); border-top: 4px solid var(--t1, #3a3a4e); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.ca-spot-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; font: 900 9.5px/1 Inter, sans-serif; letter-spacing: .4px; }
.ca-spot-pos { color: var(--ca-muted); }
.ca-spot-club { padding: 2px 4px; border-radius: 4px; background: var(--t1); color: var(--t2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.ca-spot-name { font: 900 13px/1.15 Inter, sans-serif; color: #fff; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: break-word; }
.ca-spot-name.is-long { font-size: 11px; letter-spacing: -.2px; }
.ca-spot-name.is-xlong { font-size: 9.5px; letter-spacing: -.3px; }
.ca-spot-meta { display: flex; align-items: baseline; justify-content: center; gap: 5px; min-height: 14px; font-size: 11px; color: var(--ca-muted); font-variant-numeric: tabular-nums; }
.ca-spot-meta b { font: 900 13px/1 Inter, sans-serif; }
.ca-spot-meta small { font-size: 10.5px; font-weight: 700; }
.ca-spot.is-empty { place-items: center; min-height: 56px; background: rgba(8, 8, 16, .4); border-style: dashed; }
.ca-sv-r { color: var(--rc); }
.ca-sv-t { color: #fff; }
/* 1000TRIES greats keep their looks: bronze Legends, platinum Immortals */
.ca-spot.is-legend { background: linear-gradient(160deg, #4a2c12, #1c120a 70%); border-color: #c98a4b; border-top-color: #e7c08f; }
.ca-spot.is-immortal { background: linear-gradient(160deg, #f4f6fa, #aeb5c2); border-color: #f1c073; border-top-color: #f1c073; box-shadow: 0 0 14px rgba(241, 192, 115, .45); }
.ca-spot.is-immortal .ca-spot-name, .ca-spot.is-immortal .ca-sv-t { color: #14161d; }
.ca-spot.is-immortal .ca-spot-pos, .ca-spot.is-immortal .ca-spot-meta { color: #3b4150; }
@media (max-width: 380px) { .ca-pitch { padding: 12px 4px; } .ca-pitch-row { gap: 4px; } .ca-spot { padding: 5px 4px 6px; } .ca-spot-name { font-size: 12px; } }
/* Special cards (11 Oct 2026, the owner): each kind's mark under the spot and its edge, the same in the list. World Legends
   in their gold (the owner's 8 Oct call), 88+ Picks blue, Immortal Picks on the Immortal look, Team of the Year platinum,
   Premiers trophy gold, the GOAT green, Legend Keys bronze */
.ca-spot.is-src { border-color: var(--src); box-shadow: 0 0 0 1px var(--src), 0 4px 12px rgba(0, 0, 0, .35); }
.is-src-wcp { --src: #5aa9ff; } .is-src-imm { --src: #f1c073; } .is-src-toty { --src: #d7dee9; } .is-src-prem { --src: #e8c36a; } .is-src-goat { --src: #6fd28a; } .is-src-key { --src: #c98a4b; }
.is-src-il { --src: #e6c35c; }
.ca-spot-src { justify-self: center; max-width: 100%; padding: 2px 5px; border-radius: 6px; font: 900 9px/1.1 Inter, sans-serif; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #0d0d14; background: var(--src); }
.ca-spot.is-immortal .ca-spot-src { color: #14161d; }
.ca-src-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; }
.ca-src-k { padding: 4px 9px; border-radius: 999px; font: 800 11.5px/1.2 Inter, sans-serif; color: #fff; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--src); }
.ca-sheet-list li.is-src { box-shadow: inset 3px 0 0 var(--src); }
.ca-sl-src { display: block; font: 800 11.5px/1.3 Inter, sans-serif; font-style: normal; color: var(--src); }
/* Admin > Flags, See Team: the flagged picks in red, and why */
.ca-spot.is-flagged { border-color: #f87171; box-shadow: 0 0 0 2px #f87171, 0 0 16px rgba(248, 113, 113, .45); }
.ca-sheet-list li.is-flagged { box-shadow: inset 3px 0 0 #f87171; background: rgba(248, 113, 113, .1); }
.ca-flag-box { display: grid; gap: 8px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .35); }
.ca-flag-h { margin: 0; font: 900 13px/1.2 Inter, sans-serif; letter-spacing: .3px; color: #fca5a5; }
.ca-flag-lines { margin: 0; padding-left: 18px; display: grid; gap: 4px; font: 600 13.5px/1.4 Inter, sans-serif; color: #f3f3f8; text-wrap: pretty; }
.ca-flag-st { margin: 0; font-size: 12px; font-weight: 700; color: var(--ca-muted); }
.ca-mod-tag-btn { border: 0; cursor: pointer; text-align: left; }
/* Admin > Players: account ID and email, each with Copy */
.ca-adm-ids { display: grid; gap: 6px; margin: 0 0 12px; }
.ca-adm-id { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.ca-adm-id > span { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.ca-adm-id small { font: 800 10.5px/1.2 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--ca-muted); }
.ca-adm-id code { font: 600 12px/1.3 ui-monospace, Menlo, monospace; color: #fff; overflow-wrap: anywhere; }
.ca-adm-id em { font-style: normal; font-size: 11.5px; color: var(--ca-muted); }
.ca-adm .ca-adm-id .ca-btn, .ca-adm-id .ca-btn { flex: 0 0 auto; width: auto; min-width: 76px; min-height: 40px; }
/* Admin > Players: Give Items (the owner) */
.ca-adm-give { display: grid; gap: 10px; }
.ca-give-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ca-give-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 2px 4px 2px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.ca-give-n { font: 700 14px/1.25 Inter, sans-serif; color: #fff; }
.ca-give-ico { display: inline-block; width: 1.5em; }
.ca-give-sum { margin: 0; font: 600 13.5px/1.4 Inter, sans-serif; color: var(--ca-muted); text-wrap: pretty; }
.ca-give-sum b { color: #fff; }
.ca-give-n small { margin-left: 4px; font-size: 11.5px; font-weight: 600; color: var(--ca-muted); }
.ca-give-step { display: flex; align-items: center; gap: 6px; }
.ca-give-step .ca-btn { min-width: 40px; min-height: 40px; padding: 0; font-size: 18px; }
.ca-give-step b { min-width: 22px; text-align: center; font: 900 15px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }

/* List: position, club, name with club and season, then the number */
.ca-sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ca-sheet-list li { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 4px 12px 4px 8px;
  border-radius: 10px; background: rgba(255, 255, 255, .03); }
.ca-sheet-list li.is-legend { background: linear-gradient(90deg, rgba(201, 138, 75, .22), rgba(255, 255, 255, .03) 70%); }
.ca-sheet-list li.is-immortal { background: linear-gradient(90deg, rgba(241, 236, 220, .22), rgba(255, 255, 255, .03) 70%); }
.ca-sheet-list.no-clubs li { grid-template-columns: 30px minmax(0, 1fr) auto; }
.ca-sl-pos { font: 900 11px/1 Inter, sans-serif; letter-spacing: .4px; color: var(--ca-muted); text-align: center; }
.ca-sheet-club { width: 40px; }
.ca-sl-name { min-width: 0; font: 800 14px/1.25 Inter, sans-serif; color: #fff; }
.ca-sl-name small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ca-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-sl-val b { font: 900 16px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }

/* Many boards (27-0 has six): every tab in view at once. One row where it fits. On phones the board tabs go three to a
   row, small, with short names (Classic, not Classic Mode), and the last tabs of a row or a game's group stretch to fill
   it instead of leaving a gap. The home-screen tabs go two to a row. */
.ca-lb-chips.is-grid, .ca-hb-tabs.is-grid { flex-wrap: wrap; overflow: visible; }
.ca-chip-tiny { display: none; }
@media (max-width: 560px) {
  .ca-lb-chips.is-grid, .ca-hb-tabs.is-grid { display: flex; flex-wrap: wrap; gap: 6px; }
  .ca-hb-tabs.is-grid button { flex: 1 1 calc(50% - 3px); min-width: calc(50% - 3px); width: auto; justify-content: center; text-align: center; }
  .ca-lb-chips.is-grid { gap: 5px; }
  .ca-lb-chips.is-grid .ca-chip { flex: 1 1 calc(33.333% - 4px); min-width: calc(33.333% - 4px); width: auto; min-height: 32px; padding: 0 4px; font-size: 11.5px; justify-content: center; text-align: center; overflow: hidden; text-overflow: ellipsis; }
  .ca-chip-full { display: none; }
  .ca-chip-tiny { display: inline; }
}

/* Board tabs wear their mode's colour, so each board is easy to tell apart.
   27-0: Classic gold, Pack blue and Hard red (as on the home-screen mode cards), Daily green, Perfect Seasons purple.
   1000TRIES: 1000+ gold, NRLW teal (its mode colours). Streak: fire orange. World Cup (both games): sky blue.
   --mc the colour, --mt its light text tint, --mf a solid fill (deeper where white text sits on it), --mo text on that fill. */
.ca-lb-chips [data-v="270best"], .ca-hb-tabs [data-v="270best"], [data-mc="270best"], .ca-lb-chips [data-v="1000plus"], .ca-hb-tabs [data-v="1000plus"], [data-mc="1000plus"] { --mc: #f1c073; --mt: #f5d49a; --mf: #f1c073; --mo: #111; }
.ca-lb-chips [data-v="270pack"], .ca-hb-tabs [data-v="270pack"], [data-mc="270pack"] { --mc: #6688ff; --mt: #a5b8ff; --mf: #3b5bdb; --mo: #fff; }
.ca-lb-chips [data-v="270perfect"], .ca-hb-tabs [data-v="270perfect"], [data-mc="270perfect"] { --mc: #a78bfa; --mt: #c4b5fd; --mf: #7c3aed; --mo: #fff; }
.ca-lb-chips [data-v="270daily"], .ca-hb-tabs [data-v="270daily"], [data-mc="270daily"],
.ca-lb-chips [data-v="1000daily"], .ca-hb-tabs [data-v="1000daily"], [data-mc="1000daily"] { --mc: #fb923c; --mt: #fdba74; --mf: #fb923c; --mo: #1f0f02; } /* orange, like both Dailies */
.ca-lb-chips [data-v="270hard"], .ca-hb-tabs [data-v="270hard"], [data-mc="270hard"] { --mc: #f87171; --mt: #fca5a5; --mf: #dc2626; --mo: #fff; }
.ca-lb-chips [data-v="nrlw"], .ca-hb-tabs [data-v="nrlw"], [data-mc="nrlw"] { --mc: #2dd4bf; --mt: #5eead4; --mf: #2dd4bf; --mo: #04201c; }
.ca-lb-chips [data-v="streak"], .ca-hb-tabs [data-v="streak"], [data-mc="streak"] { --mc: #fb923c; --mt: #fdba74; --mf: #fb923c; --mo: #1f0f02; }
.ca-lb-chips [data-v="270wc"], .ca-hb-tabs [data-v="270wc"], [data-mc="270wc"],
.ca-lb-chips [data-v="1000wc"], .ca-hb-tabs [data-v="1000wc"], [data-mc="1000wc"] { --mc: #0ea5e9; --mt: #7dd3fc; --mf: #0369a1; --mo: #fff; }
.ca-lb-chips .ca-chip[data-v], .ca-hb-tabs button[data-v] {
  border-color: color-mix(in srgb, var(--mc, #8a8aa0) 45%, transparent); background: color-mix(in srgb, var(--mc, #8a8aa0) 9%, transparent); color: var(--mt, #d6d6e4); }
.ca-lb-chips .ca-chip[data-v].is-on { border-color: var(--mc); background: color-mix(in srgb, var(--mc) 26%, transparent); color: #fff;
  box-shadow: inset 0 0 0 1px var(--mc), 0 4px 16px color-mix(in srgb, var(--mc) 30%, transparent); }
.ca-hb-tabs button[data-v].is-on { border-color: var(--mf); background: var(--mf); color: var(--mo); }
@media (hover: hover) {
  .ca-lb-chips .ca-chip[data-v]:not(.is-on):hover, .ca-hb-tabs button[data-v]:not(.is-on):hover { background: color-mix(in srgb, var(--mc, #8a8aa0) 18%, transparent); }
}

/* Team sheets wear the colour too: the heading line, toggle and pitch edge take the board's colour,
   the mode pill its own mode's (a Perfect Seasons sheet: purple heading, gold Classic pill) */
.ca-sheet .ca-sheet-kicker { color: var(--mt, var(--ca-gold)); }
.ca-sheet .ca-sheet-seg .ca-seg-btn.is-on { background: color-mix(in srgb, var(--mc, #f1c073) 22%, transparent); color: var(--mt, var(--ca-gold)); }
.ca-sheet .ca-pitch { border-color: color-mix(in srgb, var(--mc, #ffffff) 40%, transparent); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--mc, transparent) 70%, transparent); }
.ca-sf.is-mode { border-color: var(--mc, var(--ca-line)); background: color-mix(in srgb, var(--mc, #ffffff) 16%, transparent); color: var(--mt, #d6d6e4); font-weight: 800; }

/* ---- Admin tab (owner only): Overview | Players | Reports | Flags | Log | Words ---- */
.ca-adm-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 12px; }
.ca-adm-tabs .ca-chip { width: 100%; min-height: 38px; padding: 0 8px; font-size: 12.5px; }
.ca-adm-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10.5px; }
.ca-adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0 0 6px; }
.ca-adm-tile { display: grid; align-content: start; gap: 5px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); }
.ca-adm-tile b { font: 900 22px/1 Inter, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.ca-adm-tile small { font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--ca-muted); }
.ca-adm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ca-adm-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.ca-adm-list li.is-tap { grid-template-columns: minmax(0, 1fr) auto 10px; cursor: pointer; }
@media (hover: hover) { .ca-adm-list li.is-tap:hover { background: rgba(255, 255, 255, .07); } }
.ca-adm-list li.is-tap:focus-visible { outline: 2px solid var(--ca-gold); outline-offset: 2px; }
.ca-adm-list li > span { min-width: 0; font: 700 13.5px/1.3 Inter, sans-serif; color: #fff; }
.ca-adm-list li small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ca-muted); }
.ca-adm-list li > b { font: 900 14px/1.1 Inter, sans-serif; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-adm-score { display: inline-flex; align-items: center; gap: 8px; }
.ca-adm-score small { display: inline !important; }
.ca-adm-log li > span b { color: var(--ca-gold); }
.ca-adm-card { display: grid; gap: 10px; margin: 12px 0; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); }
.ca-adm-who { display: flex; align-items: center; gap: 10px; min-width: 0; font: 900 20px/1.2 Inter, sans-serif; color: #fff; overflow-wrap: anywhere; }
.ca-adm-who .ca-lb-club { flex: 0 0 auto; }
.ca-adm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ca-mod-tag.is-ok { background: rgba(29, 155, 240, .18); color: #7cc4f7; }
.ca-adm-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 0; }
.ca-adm-rows div { min-width: 0; }
.ca-adm-rows .is-wide { grid-column: 1 / -1; }
.ca-adm-rows dt { font-size: 10.5px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: var(--ca-muted); }
.ca-adm-rows dd { margin: 3px 0 0; font-size: 13.5px; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.ca-adm-h4 { margin: 6px 0 0; font: 900 11.5px/1 Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ca-gold); }
.ca-adm-matches { display: flex; flex-wrap: wrap; gap: 6px; }
.ca-adm-acts { margin-top: 4px; }
/* The sign-up pop-up's example board: tabs in their mode colours, the first one filled, like the real tabs */
.ca-pz-tabs span[data-mc] { border-color: color-mix(in srgb, var(--mc, #8a8aa0) 45%, transparent); background: color-mix(in srgb, var(--mc, #8a8aa0) 10%, transparent); color: var(--mt, var(--ca-muted)); }
.ca-pz-tabs span[data-mc]:first-child { border-color: var(--mf, var(--ca-gold)); background: var(--mf, var(--ca-gold)); color: var(--mo, #111); }

/* ---- 1000TRIES boards for every mode: Exactly 1000 in red, Team Spin in violet (as on the 1000TRIES home cards) ---- */
.ca-lb-chips [data-v="1000exact"], .ca-hb-tabs [data-v="1000exact"], [data-mc="1000exact"] { --mc: #f87171; --mt: #fca5a5; --mf: #dc2626; --mo: #fff; }
.ca-lb-chips [data-v="1000spin"], .ca-hb-tabs [data-v="1000spin"], [data-mc="1000spin"] { --mc: #9d8cff; --mt: #c4b5fd; --mf: #7c5cff; --mo: #fff; }
/* Both games' boards (27-0 once 1000TRIES is launched): a 27-0 | 1000TRIES switch above the board tabs */
.ca-lb-games { margin: 0 0 8px; }
.ca-lb-games .ca-seg-btn { min-height: 32px; font-size: 13px; letter-spacing: .2px; }
@media (max-width: 560px) { .ca-lb-games { margin-bottom: 6px; } .ca-lb-games .ca-seg-btn { min-height: 30px; font-size: 12.5px; } }

/* ---- Team sheets: the luck of the draw ---- */
.ca-sf small { font-size: 11px; font-weight: 800; opacity: .85; }
.ca-sf.is-luck { border-color: rgba(134, 239, 172, .3); color: #d6f5e0; }
.ca-sf.is-luck.is-lucky { border-color: rgba(74, 222, 128, .7); background: rgba(74, 222, 128, .12); color: #bbf7d0; }
.ca-sf.is-luck.is-lucky b { color: #86efac; }
.ca-sf.is-luck.is-unlucky { border-color: rgba(148, 163, 184, .55); background: rgba(148, 163, 184, .1); color: #cbd5e1; }
.ca-sf.is-wc.is-clean { border-color: rgba(125, 211, 252, .55); background: rgba(125, 211, 252, .08); color: #bae6fd; }

/* ---- Admin: the launch switch ---- */
.ca-adm-launch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 14px; padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--ca-gold-rgb), .14), rgba(var(--ca-gold-rgb), .03)); border: 1.5px solid rgba(var(--ca-gold-rgb), .6); }
.ca-adm-launch.is-live { background: linear-gradient(135deg, rgba(74, 222, 128, .13), rgba(74, 222, 128, .03)); border-color: rgba(74, 222, 128, .6); }
.ca-adm-launch-txt { display: grid; gap: 5px; flex: 1 1 240px; min-width: 0; }
.ca-adm-launch-txt .ca-mod-tag { justify-self: start; }
.ca-adm-launch-txt b { font-size: 15px; color: #fff; }
.ca-adm-launch-txt small { font-size: 12px; line-height: 1.45; color: var(--ca-muted); }
.ca-adm-launch .ca-adm-launch-q { color: #fff; font-weight: 700; }
.ca-adm-launch.is-live .ca-mod-tag { background: rgba(74, 222, 128, .18); color: #86efac; }
.ca-adm-launch > .ca-btn { width: auto; margin: 0; min-height: 42px; }
.ca-adm-launch .ca-row { margin: 0; flex: 1 1 100%; }
.ca-adm-launch .ca-row .ca-btn { margin: 0; min-height: 42px; }

/* ---- New game pop-up (CastAccount.promo): 1000TRIES on 27-0 once it is launched ---- */
.ca-promo .ca-body { text-align: center; }
.ca-pr-logo { display: block; width: min(210px, 56%); height: auto; margin: 2px auto 10px; filter: drop-shadow(0 6px 18px rgba(var(--ca-gold-rgb), .25)); }
.ca-promo .ca-title { margin: 4px 0 12px; }
.ca-pr-art { padding: 12px 10px 10px; border-radius: 16px; background: var(--ca-card); border: 1px solid var(--ca-line); overflow: hidden; }
.ca-pr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ca-pr-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 9px 8px 10px; border-radius: 12px; text-align: left;
  background: linear-gradient(160deg, color-mix(in srgb, var(--t1) 90%, #000), color-mix(in srgb, var(--t1) 50%, #000));
  border: 1px solid color-mix(in srgb, var(--t2) 35%, transparent); box-shadow: inset 0 3px 0 var(--t2);
  animation: caPrDeal .5s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 140ms); }
.ca-pr-top { display: flex; justify-content: space-between; gap: 4px; font-size: 10px; font-weight: 900; letter-spacing: .6px; color: rgba(255, 255, 255, .75); }
.ca-pr-card b { font-size: 13px; line-height: 1.15; color: #fff; overflow-wrap: anywhere; }
.ca-pr-card small { font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, .72); }
@keyframes caPrDeal { from { opacity: 0; transform: translateY(18px) rotate(-4deg) scale(.9); } to { opacity: 1; transform: none; } }
.ca-pr-tally { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin-top: 12px; }
.ca-pr-tally b { font: 900 40px/1 Inter, system-ui, sans-serif; letter-spacing: -1px; color: #fff; font-variant-numeric: tabular-nums; }
.ca-pr-tally small { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ca-muted); }
.ca-pr-tally.is-hit b { color: var(--ca-gold); text-shadow: 0 0 22px rgba(var(--ca-gold-rgb), .6); animation: caPrHit .5s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes caPrHit { 40% { transform: scale(1.14); } }
.ca-promo .ca-text { margin: 12px auto; max-width: 36ch; }
.ca-pr-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 4px; }
.ca-pr-modes span { padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--mt, var(--ca-muted));
  border: 1px solid color-mix(in srgb, var(--mc, #8a8aa0) 55%, transparent); background: color-mix(in srgb, var(--mc, #8a8aa0) 12%, transparent);
  animation: caPzIn .4s ease both; animation-delay: calc(.5s + var(--i) * 90ms); }
.ca-pr-cta { margin-top: 14px; font-size: 16px; min-height: 52px; text-decoration: none; animation: caPzPulse 2.4s ease-in-out infinite; }
@media (max-width: 360px) { .ca-pr-card b { font-size: 12px; } .ca-pr-tally b { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { .ca-promo *, .ca-promo *::after { animation: none !important; } }

/* ---- Admin: Google Analytics ---- */
.ca-ga-controls { display: grid; gap: 8px; margin: 8px 0 10px; }
.ca-ga-trend { display: flex; align-items: flex-end; gap: 3px; height: 96px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--ca-line); }
.ca-ga-trend i { flex: 1 1 0; min-width: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--ca-gold), rgba(var(--ca-gold-rgb), .45)); }
.ca-ga-axis { display: flex; justify-content: space-between; margin: 4px 2px 0; font-size: 11px; color: var(--ca-muted); }
/* Admin Trends: one Google Analytics number over time, 27-0 (gold) and 1000TRIES (sky) stacked */
.ca-tr-pickrow { display: flex; align-items: center; gap: 10px; }
.ca-tr-pickrow > span, .ca-tr-custom label { font: 800 11px/1 Inter, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--ca-muted); }
.ca-tr-pickrow select, .ca-tr-custom input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--ca-line); background: #0d0d16; color: #fff; font: 700 13px Inter, sans-serif; color-scheme: dark; }
.ca-tr-pickrow select:focus, .ca-tr-custom input:focus { outline: none; border-color: var(--ca-gold); }
.ca-tr-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0 0 6px; }
.ca-tr-custom label { flex: 1 1 130px; display: grid; gap: 6px; }
.ca-tr-custom .ca-btn { min-height: 40px; }
.ca-tr-tiles .ca-adm-tile small span { display: block; margin-top: 2px; color: var(--ca-text); }
.ca-tr-tiles .is-up { color: #4ade80; }
.ca-tr-tiles .is-down { color: var(--ca-bad); }
.ca-tr-read { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 2px 10px; min-height: 56px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); font-size: 13px; }
.ca-tr-read b { color: #fff; }
.ca-tr-read > span { font-weight: 900; color: var(--ca-gold); font-variant-numeric: tabular-nums; }
.ca-tr-read > span small { font-weight: 700; color: var(--ca-muted); }
.ca-tr-read > small { flex-basis: 100%; font-weight: 700; color: var(--ca-muted); font-variant-numeric: tabular-nums; }
.ca-tr-chart { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 180px auto; column-gap: 8px; margin: 0 0 10px; }
.ca-tr-y { display: flex; flex-direction: column; justify-content: space-between; margin: -6px 0; font: 700 10.5px/12px Inter, sans-serif; color: var(--ca-muted); text-align: right; font-variant-numeric: tabular-nums; }
.ca-tr-plot { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .3);
  background: linear-gradient(var(--ca-line), var(--ca-line)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--ca-line), var(--ca-line)) 0 50% / 100% 1px no-repeat; }
.ca-tr-bars { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 2px; }
.ca-tr-chart.is-dense .ca-tr-bars { gap: 1px; }
.ca-tr-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; padding: 0; border: 0; border-radius: 3px 3px 0 0; background: transparent; cursor: pointer; }
.ca-tr-bar i { display: block; flex: none; width: 100%; }
.ca-tr-bar i:last-child { border-radius: 3px 3px 0 0; }
.ca-tr-bar .is-270, .ca-tr-legend .is-270 { background: #f1c073; }
.ca-tr-bar .is-1000, .ca-tr-legend .is-1000 { background: #38bdf8; }
.ca-tr-bar.is-pick { background: rgba(255, 255, 255, .09); }
.ca-tr-bar.is-pick i { filter: brightness(1.2); }
.ca-tr-bar:focus-visible { outline: 2px solid var(--ca-gold); outline-offset: 1px; }
@media (hover: hover) { .ca-tr-bar:hover { background: rgba(255, 255, 255, .06); } }
.ca-tr-x { grid-column: 2; position: relative; height: 14px; margin-top: 6px; font: 700 10.5px/14px Inter, sans-serif; color: var(--ca-muted); }
.ca-tr-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ca-tr-x .is-first { left: 0; transform: none; }
.ca-tr-x .is-last { right: 0; transform: none; }
.ca-tr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--ca-muted); }
.ca-tr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ca-tr-legend i { width: 10px; height: 10px; border-radius: 3px; }
.ca-tr-legend b { color: #fff; font-variant-numeric: tabular-nums; }
.ca-tr-table { margin: 4px 0 8px; }
.ca-tr-table summary { cursor: pointer; padding: 8px 0; font: 800 12.5px/1 Inter, sans-serif; color: var(--ca-gold); }
.ca-tr-scroll { max-height: 320px; overflow: auto; border: 1px solid var(--ca-line); border-radius: 10px; }
.ca-tr-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ca-tr-table th, .ca-tr-table td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--ca-line); }
.ca-tr-table th:first-child, .ca-tr-table td:first-child { text-align: left; }
.ca-tr-table th { position: sticky; top: 0; background: #16152a; font-weight: 800; color: var(--ca-muted); }
.ca-ga-bars { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.ca-ga-bars li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.ca-ga-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.ca-ga-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.ca-ga-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ca-gold); }
.ca-ga-bars b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-ga-bars small { color: var(--ca-muted); font-weight: 600; }
.ca-ga-steps { margin: 10px 0 4px; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; color: var(--ca-muted); }
.ca-ga-steps li.is-now { color: #fff; }
.ca-ga-steps li.is-now::marker { color: var(--ca-gold); font-weight: 900; }
.ca-ga-steps b { color: #fff; word-break: break-all; }

/* ---- Admin: tap a number for the list behind it ---- */
.ca-adm-tile.is-tap { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
@media (hover: hover) { .ca-adm-tile.is-tap:hover { border-color: rgba(var(--ca-gold-rgb), .55); } }
.ca-adm-listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 2px; }
/* Overview lists (players or games): badge, name and details, tags or score, arrow. A flex row, so tappable rows never
   pick up the plain admin list's 3-column grid, and the badge keeps its small size */
.ca-adm-list.ca-adm-people li { display: flex; align-items: center; gap: 10px; }
.ca-adm-people li.is-tap { cursor: pointer; }
.ca-adm-people .ca-lb-club { flex: 0 0 auto; color: var(--t2); }
/* Admin rows set their text size on every direct span: keep the club square's own small type */
.ca-adm-list li > .ca-lb-club { flex: none; font: 900 8.5px/1 Inter, sans-serif; letter-spacing: .2px; }
.ca-adm-people .ca-lb-club.is-none { color: var(--ca-muted); }
.ca-adm-people .ca-adm-pn { flex: 1 1 auto; }
.ca-adm-people .ca-adm-tags { flex: 0 1 auto; justify-content: flex-end; }
.ca-adm-people .ca-adm-pv { flex: 0 0 auto; }
.ca-adm-people .ca-lb-go { flex: 0 0 12px; font: 900 20px/1 Inter, sans-serif; color: var(--ca-muted); }
.ca-adm-pn { display: grid; gap: 2px; min-width: 0; }
.ca-adm-pn b { display: flex; align-items: center; gap: 4px; min-width: 0; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-adm-pn small { color: var(--ca-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-adm-pv { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-adm-people .ca-adm-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ca-mod-tag.is-mail { background: rgba(74, 222, 128, .14); color: #86efac; }

/* ---- Sign-up and new-game pop-ups: a bigger, brighter close button. On the sign-up pop-up a gold ring runs down
   the 15 seconds before it closes itself (gone once they tap inside, as it then stays open) ---- */
.ca-x.ca-x-big { width: 42px; height: 42px; top: 10px; right: 10px; display: grid; place-items: center; font-size: 18px; font-weight: 900; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); }
.ca-x-big span { position: relative; z-index: 1; line-height: 1; }
@media (hover: hover) { .ca-x.ca-x-big:hover { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; } }
.ca-x-ring { position: absolute; top: -3px; left: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); pointer-events: none; }
.ca-x-ring circle { fill: none; stroke: var(--ca-gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 125.7; stroke-dashoffset: 0; animation: caXRing 15s linear forwards; }
@keyframes caXRing { to { stroke-dashoffset: 125.7; } }
.ca-pitch.is-held .ca-x-ring { display: none; }
.ca-pitch .ca-pz-bars { margin-right: 54px; }
@media (prefers-reduced-motion: reduce) { .ca-x-ring { display: none; } }

/* ---------------- CAST Pass: the gold tick, the Pass page, the profile strip and the guest wall ---------------- */
/* The CAST Pass tag beside a name: the words and the gold tick, in a gold pill (tap it to see what CAST Pass is) */
.ca-ps { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 2px 3px 2px 7px; border-radius: 999px; background: rgba(241, 192, 115, .14);
  box-shadow: inset 0 0 0 1px rgba(241, 192, 115, .6); color: var(--ca-gold); font: 900 10px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase;
  white-space: nowrap; vertical-align: 2px; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; transition: background .15s; }
.ca-ps .ca-vf, .ca-lb-n .ca-ps .ca-vf { width: 13px; height: 13px; margin: 0; flex: none; }
.ca-ps:focus-visible { outline: 2px solid var(--ca-gold); outline-offset: 2px; }
@media (hover: hover) { .ca-ps:hover { background: rgba(241, 192, 115, .28); } }
/* In the profile header the CAST Pass chip comes first and stands out */
.ca-vchip.is-pass { gap: 6px; padding: 5px 9px 5px 12px; background: linear-gradient(135deg, rgba(241, 192, 115, .32), rgba(241, 192, 115, .1)); border-color: var(--ca-gold);
  box-shadow: 0 0 16px rgba(241, 192, 115, .28); cursor: pointer; }
.ca-vchip.is-pass b { font: 900 11px/1 Inter, sans-serif; letter-spacing: .9px; text-transform: uppercase; color: var(--ca-gold); }
.ca-vchip.is-pass .ca-vf { width: 16px; height: 16px; margin: 0; }
.ca-mod-tag.is-pass { background: rgba(241, 192, 115, .18); color: var(--ca-gold); }
.ca-btn-gold { color: var(--ca-gold); border-color: rgba(241, 192, 115, .7); }

.ca-pass { display: grid; gap: 4px; }
.ca-pass-head { display: grid; justify-items: center; text-align: center; gap: 4px; margin: 4px 0 6px; }
.ca-pass-badge .ca-vf { width: 64px; height: 64px; margin: 0 0 6px; filter: drop-shadow(0 0 18px rgba(241, 192, 115, .55)); }
/* The CAST Pass logo (10 Oct 2026): the gold Pass Card, floating a little */
/* Before You Go and Pause (10 Oct 2026) */
.ca-pass-mine .ca-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ca-bye > .ca-back { display: inline-flex; width: auto; max-width: calc(100% - 64px); margin: 0 0 4px; }
.ca-bye-lose .ca-pass-ico .ca-vf { width: 26px; height: 26px; }
.ca-bye-since { margin: 6px 0 8px; text-align: center; font: 700 12px/1.3 Inter, sans-serif; color: #a2a2b8; }
.ca-bye-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0 0 14px; }
.ca-bye-stats > div { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 12px; background: rgba(241, 192, 115, .08); border: 1px solid rgba(241, 192, 115, .3); text-align: center; }
.ca-bye-stats b { font: 900 26px/1 Inter, sans-serif; color: #f1c073; }
.ca-bye-stats small { font: 700 11px/1.25 Inter, sans-serif; color: #d6d6e4; text-wrap: balance; }
.ca-bye-btns { display: grid; gap: 8px; margin-top: 14px; }
.ca-bye-btns .ca-btn small { display: block; margin-top: 2px; font: 600 11px/1.2 Inter, sans-serif; opacity: .8; text-transform: none; letter-spacing: 0; }
.ca-bye-lens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.ca-bye-len { display: grid; gap: 3px; padding: 12px 10px; border-radius: 12px; border: 1px solid #3a3a4e; background: rgba(255, 255, 255, .03); color: #fff; cursor: pointer; text-align: center; font: inherit; }
.ca-bye-len b { font: 800 14px/1.2 Inter, sans-serif; }
.ca-bye-len small { font: 600 11px/1.2 Inter, sans-serif; color: #a2a2b8; }
.ca-bye-len.is-on { border-color: #fff; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px #fff inset; }
.ca-pass-logo-wrap { display: flex; justify-content: center; margin: -8px auto 2px; }
.ca-pass-logo { display: block; width: 128px; height: 128px; filter: drop-shadow(0 8px 20px rgba(241, 192, 115, .25)); animation: caPassFloat 4.5s ease-in-out infinite; }
@keyframes caPassFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .ca-pass-logo { animation: none; } }
.ca-pass-head .ca-title { margin: 0; }
.ca-pass-head .ca-text { margin: 4px 0 0; max-width: 34ch; }
.ca-pass-welcome { display: grid; gap: 4px; margin: 8px 0; padding: 12px 14px; border-radius: 12px; background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .5); color: #dcfce7; font-size: 13.5px; }
.ca-pass-welcome b { color: #fff; font-size: 15px; }
.ca-pass-mine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; padding: 12px 14px; border-radius: 12px; background: rgba(241, 192, 115, .1); border: 1px solid rgba(241, 192, 115, .5); font: 700 13.5px/1.35 Inter, sans-serif; color: #fff; }
.ca-pass-perks, .ca-pass-soon { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; }
.ca-pass-perks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.ca-pass-ico { font-size: 20px; line-height: 1.2; text-align: center; }
.ca-pass-perks b { display: block; color: #fff; font: 800 14px/1.3 Inter, sans-serif; }
.ca-pass-perks small { display: block; color: var(--ca-muted); font-size: 12.5px; line-height: 1.4; }
.ca-pass-soon li { position: relative; padding-left: 18px; color: var(--ca-muted); font-size: 13px; line-height: 1.4; }
.ca-pass-soon li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ca-gold); }
.ca-pass-buy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
@media (max-width: 360px) { .ca-pass-buy { grid-template-columns: 1fr; } }
.ca-pass-plan { display: grid; justify-items: start; gap: 2px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--ca-line); background: rgba(255, 255, 255, .04); color: #fff; text-align: left; cursor: pointer; font-family: Inter, sans-serif; transition: border-color .15s, background .15s, transform .12s; }
.ca-pass-plan:first-child { border-color: rgba(241, 192, 115, .8); background: linear-gradient(160deg, rgba(241, 192, 115, .18), rgba(241, 192, 115, .05)); }
.ca-pass-plan-t { display: flex; align-items: center; gap: 6px; font: 800 12px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--ca-muted); }
.ca-pass-plan-t em { font-style: normal; padding: 2px 6px; border-radius: 6px; background: var(--ca-gold); color: #111; letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.ca-pass-plan b { font: italic 900 28px/1.1 Inter, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.ca-pass-plan:first-child b { color: var(--ca-gold); }
.ca-pass-plan small { font-size: 12px; color: var(--ca-muted); }
.ca-pass-plan:disabled { opacity: .6; cursor: default; }
.ca-pass-plan:focus-visible { outline: 2px solid var(--ca-gold); outline-offset: 2px; }
@media (hover: hover) { .ca-pass-plan:not(:disabled):hover { border-color: var(--ca-gold); transform: translateY(-1px); } }
.ca-pass-fine { text-align: left; }
.ca-pass-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(241, 192, 115, .5); color: var(--ca-muted); text-align: center; font-size: 13.5px; }

.ca-pass-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; margin: 4px 0 12px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid rgba(241, 192, 115, .55); background: linear-gradient(135deg, rgba(241, 192, 115, .16), rgba(241, 192, 115, .04)); color: #fff; text-align: left; cursor: pointer; font-family: Inter, sans-serif; }
.ca-pass-strip .ca-vf { width: 30px; height: 30px; margin: 0; }
.ca-pass-strip b { display: block; font: 900 14px/1.2 Inter, sans-serif; color: var(--ca-gold); }
.ca-pass-strip small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ca-muted); }
.ca-pass-strip i { font: 900 22px/1 Inter, sans-serif; color: var(--ca-gold); font-style: normal; }
.ca-pass-strip:focus-visible { outline: 2px solid var(--ca-gold); outline-offset: 2px; }
@media (hover: hover) { .ca-pass-strip:hover { border-color: var(--ca-gold); } }

.ca-wall-perks { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; }
.ca-wall-perks li { position: relative; padding-left: 22px; font-size: 13.5px; color: #e8e8f2; }
.ca-wall-perks li::before { content: "\2713"; position: absolute; left: 2px; top: 0; color: var(--ca-gold); font-weight: 900; }

/* Perfect Seasons: the hardest mode of each player's 27-0s, before the count (27-0's mode colours) */
.ca-lb-mode { display: inline-block; margin-right: 8px; padding: 3px 7px; border-radius: 6px; font: 900 10px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; vertical-align: 2px; }
.ca-lb-mode.is-hard { background: rgba(248, 113, 113, .18); color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .45); }
.ca-lb-mode.is-classic { background: rgba(241, 192, 115, .16); color: var(--ca-gold); box-shadow: inset 0 0 0 1px rgba(241, 192, 115, .45); }
.ca-lb-mode.is-pack { background: rgba(102, 136, 255, .18); color: #aac4ff; box-shadow: inset 0 0 0 1px rgba(102, 136, 255, .45); }

/* CAST Pass holders: how to claim the podcast shout-out and the custom video */
.ca-pass-claim { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(241, 192, 115, .45); background: rgba(241, 192, 115, .08); }
.ca-pass-claim > b { color: var(--ca-gold); font-size: 14px; }
.ca-pass-claim > span { font-size: 13px; line-height: 1.45; color: var(--ca-text, #e8e8f0); }
.ca-pass-claim .ca-row { flex-wrap: wrap; }
.ca-pass-claim a { text-decoration: none; }
/* The Yearly Switch (7 Oct 2026): a CAST Pass card, so gold */
.ca-pass-switch { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(241, 192, 115, .55); background: linear-gradient(135deg, rgba(241, 192, 115, .14), rgba(241, 192, 115, .04)); }
.ca-pass-switch-t { color: var(--ca-gold); font-size: 15px; }
.ca-pass-switch > span { font-size: 13px; line-height: 1.45; color: var(--ca-text, #e8e8f0); text-wrap: pretty; }
.ca-pass-switch > small { font-size: 12px; line-height: 1.4; color: #a2a2b8; text-wrap: pretty; }
.ca-pass-switch .ca-row { grid-template-columns: 1fr; gap: 8px; margin-top: 4px; } /* one per row: SWITCH TO YEARLY on one line */

/* ---------------- Friends ---------------- */
.ca-tab-n { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; display: inline-grid; place-items: center; background: var(--ca-bad); color: #fff; font: 900 10.5px/1 Inter, sans-serif; }
.ca-tab.is-on .ca-tab-n { background: #111; color: var(--ca-gold); }
.ca-soc-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ca-soc-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid transparent; }
.ca-soc-row.is-tap { cursor: pointer; }
@media (hover: hover) { .ca-soc-row.is-tap:hover { border-color: rgba(var(--ca-gold-rgb), .45); } }
.ca-soc-row .ca-lb-club { flex: 0 0 auto; width: 38px; height: 38px; margin: -6px 0; border-radius: 9px; font-size: 11px; letter-spacing: .3px; }
.ca-soc-n { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; font: 800 14px/1.25 Inter, sans-serif; color: #fff; }
.ca-soc-n > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ca-soc-n small { flex-basis: 100%; color: var(--ca-muted); font: 700 11.5px/1.3 Inter, sans-serif; }
.ca-soc-acts { display: flex; gap: 6px; flex: none; }
.ca-soc-acts .ca-btn, .ca-soc-row > .ca-btn { width: auto; margin: 0; }
/* Accept, Decline and Cancel on a friend row: compact, so the name keeps its room */
.ca-soc-acts .ca-btn-sm, .ca-soc-row > .ca-btn-sm { min-height: 34px; padding: 0 12px; font-size: 12px; border-radius: 10px; }
.ca-fr-head .ca-btn-sm { width: auto; min-height: 32px; margin: 0; padding: 0 12px; font-size: 12px; }
.ca-soc-tag { flex: none; display: inline-block; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--ca-muted); font: 800 11.5px/1 Inter, sans-serif; }
.ca-soc-tag.is-ok { background: rgba(34, 197, 94, .14); color: #86efac; }
.ca-soc-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--ca-bad); color: #fff; font: 900 11px/1 Inter, sans-serif; vertical-align: 2px; letter-spacing: 0; }
.ca-soc-count.is-quiet { background: rgba(255, 255, 255, .08); color: var(--ca-muted); }
.ca-soc-msg { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: rgba(var(--ca-gold-rgb), .1); border: 1px solid rgba(var(--ca-gold-rgb), .35); color: var(--ca-text); font-size: 13px; word-break: break-word; }
.ca-soc-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; margin: 0 0 10px; border-radius: 14px; border: 1px dashed var(--ca-line); text-align: center; }
.ca-soc-empty > span { font-size: 26px; }
.ca-soc-empty b { color: #fff; font-size: 14px; }
.ca-soc-empty small { color: var(--ca-muted); font-size: 12.5px; line-height: 1.4; max-width: 34ch; }
.ca-soc-invite { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; margin: 0 0 10px; border-radius: 14px; background: linear-gradient(135deg, rgba(var(--ca-gold-rgb), .12), rgba(var(--ca-gold-rgb), .03)); border: 1px solid rgba(var(--ca-gold-rgb), .35); }
.ca-soc-invite > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ca-soc-invite b { color: var(--ca-gold); font-size: 14px; }
.ca-soc-invite small { color: var(--ca-muted); font-size: 12.5px; }
.ca-soc-invite code { display: block; margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, .3); color: #e8e8f0; font: 600 12px/1.3 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.ca-soc-invite .ca-row { flex-wrap: wrap; }
.ca-soc-invite .ca-btn { width: auto; margin: 0; }
.ca-soc-search { display: flex; gap: 8px; margin: 0 0 10px; }
.ca-soc-search .ca-field { flex: 1; min-width: 0; margin: 0; }
.ca-soc-search .ca-btn { width: auto; margin: 0; flex: none; }
.ca-flair { margin-left: 4px; font-size: 14px; line-height: 1; }
.ca-key { font-size: 12px; margin-right: 3px; filter: drop-shadow(0 0 3px rgba(241, 192, 115, .5)); }
.ca-soc-title { margin: 2px 0 0; color: var(--ca-gold); font: 800 12px/1.2 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.ca-soc-h2h { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); }
.ca-soc-h2h span { width: 100%; text-align: center; color: var(--ca-muted); font: 800 11px/1 Inter, sans-serif; letter-spacing: .8px; text-transform: uppercase; }
.ca-soc-h2h b { color: #fff; font: 900 18px/1 Inter, sans-serif; }
.ca-soc-h2h i { color: var(--ca-muted); font-style: normal; }
.ca-soc-h2h small { width: 100%; text-align: center; color: var(--ca-muted); }
.ca-soc-picks { margin: 8px 0 0; font-size: 12.5px; color: #d6d6e4; line-height: 1.4; }
.ca-soc-picks span { display: block; color: var(--ca-muted); font: 800 10.5px/1.6 Inter, sans-serif; letter-spacing: .8px; text-transform: uppercase; }
.ca-soc-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0 4px; text-align: center; color: var(--ca-muted); font-size: 13px; }
.ca-soc-foot .ca-btn { width: auto; }
.ca-sheet-friend { margin: 6px 0 0; }
.ca-sheet-friend .ca-btn { width: auto; margin: 0; }
.ca-head-inbox { background: #ef4444 !important; color: #fff !important; }
/* Friends: NEW until they first open it (then the red count, as ever) */
.ca-head-new { background: #fff !important; color: #1d4ed8 !important; font-size: 10px !important; letter-spacing: .4px !important; text-transform: uppercase; }

/* ---------------- Challenges ---------------- */
.ca-ch-row .ca-ch-ico { flex: none; width: 38px; text-align: center; font-size: 20px; }
.ca-ch-row.is-turn { border-color: rgba(var(--ca-gold-rgb), .55); background: rgba(var(--ca-gold-rgb), .08); }
.ca-ch-row.is-me { border-color: rgba(34, 197, 94, .35); }
.ca-ch-row.is-them { opacity: .9; }
.ca-ch-row .ca-btn { width: auto; margin: 0; flex: none; }
.ca-ch-passbtn { display: inline-flex; align-items: center; gap: 4px; }
.ca-ch-passbtn .ca-ps { margin-left: 2px; padding: 2px 6px; }
.ca-ch-wait { margin: 2px 0 8px; }
.ca-ch-btn { width: auto; }
.ca-ch-games { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.ca-ch-game { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--ca-line); background: rgba(255, 255, 255, .03); color: #fff; font: 700 13px/1.3 Inter, sans-serif; text-align: left; cursor: pointer; }
.ca-ch-game span { color: var(--ca-muted); font-weight: 600; text-align: right; }
.ca-ch-game.is-on { border-color: var(--ca-gold); background: rgba(var(--ca-gold-rgb), .1); }
.ca-soc-row.is-on { border-color: var(--ca-gold); background: rgba(var(--ca-gold-rgb), .1); }
.ca-ch-check { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--ca-line); display: grid; place-items: center; color: #111; font-weight: 900; }
.ca-soc-row.is-on .ca-ch-check { background: var(--ca-gold); border-color: var(--ca-gold); }
.ca-cta { flex-wrap: wrap; }
/* On a phone the prompt's button goes under its words, full width, so the words keep the whole row instead of a squeezed
   column ("Your stats and / leaderboards / are up to date.") */
.ca-cta { container-type: inline-size; }
@container (max-width: 420px) { .ca-cta > .ca-cta-btn { flex: 1 1 100%; } }
.ca-cta .ca-cta-ch { flex-basis: 100%; margin-top: 8px; }
.ca-cta.is-ch { border-color: rgba(var(--ca-gold-rgb), .6); }

/* ---------------- The Vault (CAST Pass) ---------------- */
.ca-vault { margin: 0 0 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(var(--ca-gold-rgb), .45); background: linear-gradient(135deg, rgba(var(--ca-gold-rgb), .12), rgba(var(--ca-gold-rgb), .02)); }
.ca-vault.is-locked { border-style: dashed; }
.ca-vault-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.ca-vault-h b { color: var(--ca-gold); font-size: 14px; }
.ca-vault-h small { color: var(--ca-muted); font-size: 11.5px; }
.ca-vault-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ca-vault-key { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--ca-line); }
.ca-vault-key > span { font-size: 20px; }
.ca-vault-key b { color: #fff; font-size: 13px; }
.ca-vault-key small { font: 900 10.5px/1.4 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--ca-muted); }
.ca-vault-key.is-ready small { color: #86efac; }
.ca-vault-key.is-used { opacity: .65; }
.ca-vault-key i { font-style: normal; color: var(--ca-muted); font-size: 11.5px; line-height: 1.35; }

/* ---------------- Names on rows: the name shortens itself, the ticks and the CAST PASS tag always show whole ---------------- */
.ca-lb-n { display: flex; align-items: center; gap: 0; overflow: hidden; }
.ca-lb-n .ca-lb-nm { font: inherit; flex: none; white-space: nowrap; }
/* Short of room (js fitRows): the CAST PASS tag becomes just the gold tick, then the YOU tag goes, then the name steps down a size, and only
   then is it shortened */
.ca-lb-n.is-tight .ca-ps { gap: 0; margin-left: 4px; padding: 0; background: none; box-shadow: none; }
.ca-lb-n.is-tight .ca-ps .ca-ps-t { display: none; }
.ca-lb-n.is-tight .ca-ps .ca-vf { width: 16px; height: 16px; }
.ca-lb-n.is-tighter em { display: none; }
.ca-lb-n.is-tightest .ca-lb-nm { font-size: 12.5px; letter-spacing: -.1px; }
.ca-lb-n.is-squeezed .ca-lb-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ca-lb-n > .ca-vf, .ca-lb-n > .ca-ps, .ca-lb-n > .ca-flair, .ca-lb-n > em { flex: none; }
.ca-lb-n > .ca-vf { margin-left: 4px; }
.ca-lb-n > em { margin-left: 5px; }
@media (max-width: 420px) {
  .ca-lb-row .ca-ps { gap: 2px; margin-left: 4px; padding: 2px 2px 2px 5px; font-size: 8.5px; letter-spacing: .35px; }
  .ca-lb-row .ca-ps .ca-vf { width: 11px; height: 11px; }
}

/* ---------------- The Friends screen ---------------- */
.ca-btn-friends { position: relative; }
/* Friends: four tabs in one row, all in view (no sideways scrolling). A count sits on the tab's corner. */
.ca-fr-tabs { display: grid; grid-template-columns: repeat(4, auto); gap: 4px; padding: 3px; margin: 2px 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); }
.ca-fr-tab { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 34px; padding: 0 4px; border: 0; border-radius: 9px; background: transparent; color: var(--ca-muted); font: 800 12.5px/1 Inter, sans-serif; cursor: pointer; }
.ca-fr-tab-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-fr-tab.is-on { background: rgba(255, 255, 255, .14); color: #fff; }
.ca-fr-tab .ca-tab-n { position: absolute; top: -7px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px #1b1830; }
@media (hover: hover) { .ca-fr-tab:not(.is-on):hover { color: #fff; } }
@media (max-width: 380px) { .ca-fr-tab { font-size: 11.5px; padding: 0 2px; } }
/* A section heading with a button on the right (Your Friends, + Add Friends) */
.ca-fr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; }
.ca-fr-head .ca-h3 { margin: 0; }
.ca-fr-tabs + .ca-fr-head, .ca-fr-tabs + .ca-h3 { margin-top: 0; }
.ca-fr-pitch { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ca-fr-pitch li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); }
.ca-fr-pitch b { color: #fff; font-size: 14px; }
.ca-fr-pitch small { color: var(--ca-muted); font-size: 12.5px; }
.ca-soc-tag.is-new { background: rgba(var(--ca-gold-rgb), .18); color: var(--ca-gold); margin-right: 4px; }
.ca-fr-boards { margin-bottom: 8px; }
.ca-fr-period { margin-bottom: 10px; }
.ca-sheet-friend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Leaderboards: Everyone or the Friends Leaderboard, at the top */
.ca-lb-who { margin: 0 0 8px; }
.ca-lb-who .ca-seg-btn.is-on { background: #ecebf5; color: #15131f; }
.ca-lb-filters.is-friends .ca-lb-filter { display: none; }

/* ---------------- The CAST Pass page: the pitch ---------------- */
.ca-pass-tagline { margin: 6px 0 0; max-width: 30ch; color: #fff; font: 800 17px/1.35 Inter, sans-serif; text-wrap: balance; }
.ca-pass-sub { margin: 6px 0 0; color: var(--ca-gold); font: 700 13px/1.3 Inter, sans-serif; }
.ca-pass-plan { position: relative; }
.ca-pass-plan.is-best { box-shadow: 0 0 22px rgba(241, 192, 115, .28); }
.ca-pass-flag { position: absolute; top: -10px; right: 10px; padding: 3px 8px; border-radius: 999px; background: var(--ca-gold); color: #111; font: 900 10px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.ca-pass-trust { margin: 0 0 6px; text-align: center; color: var(--ca-muted); font-size: 11.5px; }
.ca-pass-perks li b { font-size: 14.5px; }
.ca-pass-perks.is-soon li { opacity: .8; }
.ca-pass-perks.is-soon b::after { content: "Soon"; margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: rgba(241, 192, 115, .16); color: var(--ca-gold); font: 900 9.5px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; vertical-align: 2px; }
.ca-pass-vs { display: grid; gap: 0; margin: 0 0 6px; border-radius: 14px; overflow: hidden; border: 1px solid var(--ca-line); }
.ca-pass-vs-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 9px 12px; font-size: 12.5px; color: #d6d6e4; }
.ca-pass-vs-row:nth-child(even) { background: rgba(255, 255, 255, .03); }
.ca-pass-vs-row > span:nth-child(2) { color: var(--ca-muted); text-align: center; }
.ca-pass-vs-row > b { color: var(--ca-gold); text-align: center; font-weight: 800; }
.ca-pass-vs-row.is-head { background: rgba(241, 192, 115, .1); font: 900 10.5px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--ca-muted); }
.ca-pass-vs-row.is-head > span:nth-child(3) { color: var(--ca-gold); text-align: center; }

/* The Vault card in Stats: tap anywhere on it (for the CAST Pass page) */
.ca-vault[role="button"] { cursor: pointer; transition: border-color .15s, transform .15s; }
@media (hover: hover) { .ca-vault[role="button"]:hover { border-color: var(--ca-gold); transform: translateY(-1px); } }
.ca-vault[role="button"]:focus-visible { outline: 2px solid var(--ca-gold); outline-offset: 2px; }
.ca-vault-cta { color: var(--ca-gold); font: 800 12px/1 Inter, sans-serif; white-space: nowrap; }

/* My Details: what a free profile is missing out on */
.ca-miss { display: grid; gap: 10px; margin: 0 0 16px; padding: 14px; border-radius: 16px; cursor: pointer; border: 1.5px solid rgba(241, 192, 115, .6);
  background: radial-gradient(120% 90% at 100% 0%, rgba(241, 192, 115, .22), transparent 60%), linear-gradient(160deg, rgba(241, 192, 115, .1), rgba(241, 192, 115, .02));
  box-shadow: 0 0 22px rgba(241, 192, 115, .15); transition: transform .15s, border-color .15s; }
@media (hover: hover) { .ca-miss:hover { border-color: var(--ca-gold); transform: translateY(-1px); } }
.ca-miss:focus-visible { outline: 2px solid var(--ca-gold); outline-offset: 2px; }
.ca-miss-h { display: flex; align-items: center; gap: 8px; }
.ca-miss-h b { color: var(--ca-gold); font: 900 13px/1 Inter, sans-serif; letter-spacing: .8px; text-transform: uppercase; }
.ca-miss-vault { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.ca-miss-key { font-size: 26px; animation: caKeyGlow 2.4s ease-in-out infinite; }
@keyframes caKeyGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(241, 192, 115, 0)); } 50% { filter: drop-shadow(0 0 8px rgba(241, 192, 115, .9)); } }
@media (prefers-reduced-motion: reduce) { .ca-miss-key { animation: none; } }
.ca-miss-vault b { display: block; color: #fff; font-size: 14px; }
.ca-miss-vault small { display: block; color: var(--ca-muted); font-size: 12px; margin-top: 2px; }
.ca-miss-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: #d6d6e4; font-size: 13px; }
.ca-miss-list b { color: #fff; }
.ca-miss-btn { display: block; padding: 11px 14px; border-radius: 12px; background: var(--ca-gold); color: #111; text-align: center; font: 900 13.5px/1.2 Inter, sans-serif; }

/* ---------------- CAST Pass holders stand out on every leaderboard ----------------
   A gold edge on the left, a warm gold wash across the row, their name in gold, and a slow sheen now and then */
.ca-lb-row.is-pass { position: relative; overflow: hidden; border-color: rgba(241, 192, 115, .38);
  background: linear-gradient(90deg, rgba(241, 192, 115, .2), rgba(241, 192, 115, .06) 55%, rgba(255, 255, 255, .03));
  box-shadow: inset 3px 0 0 #f1c073; }
.ca-lb-row.is-pass .ca-lb-nm { color: #f7d49a; }
.ca-lb-row.is-pass.is-me { border-color: var(--ca-gold); }
.ca-lb-row.is-pass::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 32%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 190, .16), transparent); animation: caPassSheen 6s ease-in-out infinite; }
@keyframes caPassSheen { 0%, 72% { left: -40%; } 100% { left: 120%; } }
@media (hover: hover) { .ca-lb-row.is-pass.is-tap:hover { background: linear-gradient(90deg, rgba(241, 192, 115, .28), rgba(241, 192, 115, .1) 55%, rgba(255, 255, 255, .05)); border-color: rgba(241, 192, 115, .6); } }
@media (prefers-reduced-motion: reduce) { .ca-lb-row.is-pass::after { display: none; } }

/* Challenge records: wins, losses, draws */
.ca-ch-rec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; width: 100%; }
.ca-ch-rec > div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); }
.ca-ch-rec b { font: italic 900 22px/1 Inter, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.ca-ch-rec span { font: 900 10.5px/1 Inter, sans-serif; letter-spacing: .7px; text-transform: uppercase; color: var(--ca-muted); }
.ca-ch-rec .is-w b { color: #86efac; }
.ca-ch-rec .is-l b { color: #fca5a5; }
.ca-ch-rec .is-d b { color: var(--ca-gold); }
.ca-soc-h2h .ca-ch-rec { margin: 6px 0 0; }
.ca-soc-rec { color: var(--ca-muted); font-weight: 700; }
.ca-soc-rec b { color: #fff; font-weight: 900; }

/* ---------------- Deep Stats (CAST Pass) ---------------- */
.ca-deep { margin: 0 0 14px; padding: 14px; border-radius: 16px; border: 1px solid rgba(241, 192, 115, .45); background: linear-gradient(160deg, rgba(241, 192, 115, .08), rgba(255, 255, 255, .02)); }
.ca-deep-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.ca-deep-h > b { color: #fff; font: 900 15px/1.2 Inter, sans-serif; }
.ca-deep-h .ca-ps { cursor: default; }
.ca-deep-fam { margin: 0 0 10px; }
.ca-deep-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 4px; }
.ca-deep-tiles > div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.ca-deep-tiles b { font: italic 900 22px/1 Inter, sans-serif; color: var(--ca-gold); font-variant-numeric: tabular-nums; }
.ca-deep-tiles span { font: 900 10px/1 Inter, sans-serif; letter-spacing: .7px; text-transform: uppercase; color: var(--ca-muted); }
.ca-deep-t { margin: 14px 0 8px; color: var(--ca-gold); font: 900 12px/1.2 Inter, sans-serif; letter-spacing: .8px; text-transform: uppercase; }
.ca-deep-t small { margin-left: 6px; color: var(--ca-muted); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.ca-deep-form { display: flex; flex-wrap: wrap; gap: 5px; }
.ca-form-chip { min-width: 40px; padding: 6px 7px; border: 0; border-radius: 8px; text-align: center; background: rgba(255, 255, 255, .06); color: #d6d6e4; font: 800 12px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
@media (hover: hover) { .ca-form-chip:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); } }
.ca-form-chip.is-win { background: rgba(34, 197, 94, .18); color: #86efac; }
.ca-form-chip.is-fail { background: rgba(248, 113, 113, .15); color: #fca5a5; }
.ca-deep-trend { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ca-muted); }
.ca-deep-trend.is-up { color: #86efac; }
.ca-deep-trend.is-down { color: #fca5a5; }
.ca-deep-modes { display: grid; border-radius: 12px; overflow: hidden; border: 1px solid var(--ca-line); }
.ca-deep-mrow { display: grid; grid-template-columns: minmax(0, 1.4fr) .7fr .7fr 1fr; gap: 6px; padding: 8px 10px; font-size: 12.5px; color: #e6e6f0; font-variant-numeric: tabular-nums; }
.ca-deep-mrow:nth-child(even) { background: rgba(255, 255, 255, .03); }
.ca-deep-mrow > span:not(:first-child) { text-align: right; }
.ca-deep-mrow.is-head { background: rgba(241, 192, 115, .1); color: var(--ca-muted); font: 900 10px/1.2 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.ca-deep-best, .ca-deep-lucky, .ca-deep-clubs, .ca-deep-eras { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* Best 13s: every row shares the list's columns (subgrid), so scores and dates line up down the list */
.ca-deep-best { grid-template-columns: minmax(0, 1fr) auto auto 12px; column-gap: 10px; }
.ca-deep-best li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 42px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); cursor: pointer; }
.ca-deep-best li b { justify-self: end; }
@supports not (grid-template-columns: subgrid) { .ca-deep-best li { grid-template-columns: minmax(0, 1fr) 64px 132px 12px; gap: 10px; } }
.ca-deep-best li span { color: #fff; font-weight: 800; font-size: 13px; }
.ca-deep-best li b { color: var(--ca-gold); font-size: 14px; font-weight: 900; white-space: nowrap; }
.ca-deep-best li small { color: var(--ca-muted); font-size: 11px; white-space: nowrap; }
.ca-deep-best li i { color: var(--ca-muted); font-style: normal; }
@media (hover: hover) { .ca-deep-best li:hover { background: rgba(255, 255, 255, .07); } }
@media (max-width: 380px) { .ca-deep-best li small { display: none; } .ca-deep-best { grid-template-columns: minmax(0, 1fr) auto 12px; } }
.ca-deep-most .ca-fav-n small { color: var(--ca-muted); font-weight: 700; margin-left: 4px; }
.ca-deep-lucky li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(34, 197, 94, .07); font-size: 13px; color: #fff; }
.ca-deep-lucky b { color: #86efac; }
.ca-deep-lucky small { color: var(--ca-muted); font-size: 11.5px; }
.ca-deep-clubs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 40px; align-items: center; gap: 8px; font-size: 13px; color: #e6e6f0; }
.ca-deep-clubs .ca-lb-club { flex: 0 0 auto; }
.ca-deep-clubs b { color: #fff; }
.ca-deep-clubs small { color: var(--ca-muted); text-align: right; }
.ca-deep-eras li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 34px 52px; align-items: center; gap: 8px; font-size: 12.5px; color: #e6e6f0; }
.ca-deep-eras b { color: #fff; text-align: right; }
.ca-deep-eras small { color: var(--ca-muted); }
.ca-deep-weeks { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 5px; align-items: end; }
.ca-wk { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ca-wk-bar { display: flex; align-items: flex-end; width: 100%; height: 64px; border-radius: 6px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.ca-wk-bar i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #f7d49a, #c8952a); }
.ca-wk b { color: #fff; font: 800 10.5px/1 Inter, sans-serif; }
.ca-wk small { color: var(--ca-muted); font-size: 9.5px; white-space: nowrap; }
/* Locked for a free profile: a blurred peek, and the whole card opens CAST Pass */
.ca-deep.is-locked { cursor: pointer; border-style: dashed; }
@media (hover: hover) { .ca-deep.is-locked:hover { border-color: var(--ca-gold); } }
.ca-deep.is-locked:focus-visible { outline: 2px solid var(--ca-gold); outline-offset: 2px; }
.ca-deep-peek { display: grid; gap: 10px; margin: 0 0 12px; filter: blur(3px); opacity: .7; pointer-events: none; user-select: none; }
.ca-deep-weeks.is-peek .ca-wk-bar { height: 48px; }
.ca-deep-most li { grid-template-columns: 22px minmax(0, 2.4fr) minmax(24px, 1fr) auto; } /* names first (Anthony Minichiello was cut at 360) */
@media (max-width: 374px) { /* narrow phones: the count says it, so the bar steps aside and the name gets the room */
  .ca-deep-most li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .ca-deep-most .ca-fav-bar { display: none; }
}
/* Admin, Players: the owner corrects a date of birth */
.ca-adm-birth { display: grid; gap: 10px; margin: 12px 0 0; padding: 12px; border-radius: 12px; border: 1px solid rgba(241, 192, 115, .45); background: rgba(241, 192, 115, .06); }
.ca-adm-birth > b { color: var(--ca-gold); font-size: 13.5px; }
.ca-adm-birth .ca-row .ca-btn { width: auto; }
/* Admin > Players: Give Trophy (6 Oct 2026), in the same panel as the date of birth */
.ca-adm-trophy label { font-size: 12.5px; }
.ca-adm-trophy select { width: 100%; min-width: 0; min-height: 48px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--ca-line); background: #0f0e1c; color: #fff; font: 700 14px Inter, sans-serif; }
.ca-adm-trophy select:focus { outline: none; border-color: #fff; }
.ca-adm-trophy-games { flex-wrap: wrap; }

/* Creators: challenge the verified players */
.ca-cr-head { display: flex; flex-direction: column; gap: 3px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(29, 155, 240, .16), rgba(29, 155, 240, .04)); border: 1px solid rgba(29, 155, 240, .45); }
.ca-cr-head b { color: #fff; font-size: 14.5px; }
.ca-cr-head small { color: #cfe6f7; font-size: 12.5px; line-height: 1.4; }
.ca-ch-new { flex-wrap: wrap; }
.ca-ch-new .ca-btn { width: auto; flex: 1 1 auto; white-space: nowrap; }

/* ---------------- Send a Challenge: limits and long lists ---------------- */
.ca-ch-find { margin: 4px 0 2px; }
/* Creators fold away; the Send button is pinned (no scroll boxes inside the page) */
.ca-ch-creators { margin: 14px 0 0; }
.ca-ch-creators > summary .ca-ch-one { margin-left: 8px; }
.ca-ch-creators > .ca-soc-list { margin-top: 8px; }
.ca-ch-actions .ca-ch-limit { margin: 0 0 2px; text-align: center; }
.ca-ch-actions .ca-lb-err { margin: 0; }
.ca-soc-row.is-off { opacity: .45; }
.ca-soc-row[hidden] { display: none !important; }
.ca-ch-one { margin-left: 6px; color: var(--ca-muted); font: 700 10.5px/1 Inter, sans-serif; letter-spacing: .6px; }
.ca-ch-limit b { color: #fff; }

/* ---------------- Welcome tour (after signing up, and from My Details) ---------------- */
.ca-wel-grid { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ca-wel-grid li { display: grid; align-content: start; gap: 4px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--ca-line); }
.ca-wel-i { font-size: 22px; line-height: 1; }
.ca-wel-grid b { color: #fff; font: 900 13.5px/1.2 Inter, sans-serif; }
.ca-wel-grid small { color: var(--ca-muted); font-size: 12px; line-height: 1.35; }
@media (max-width: 360px) { .ca-wel-grid { grid-template-columns: 1fr; } }
.ca-wel-pass, .ca-wel-link { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left; color: #fff; font: inherit; }
.ca-wel-pass { border: 1.5px solid rgba(241, 192, 115, .6); background: linear-gradient(160deg, rgba(241, 192, 115, .14), rgba(241, 192, 115, .03)); }
.ca-wel-link { border: 1px solid var(--ca-line); background: rgba(255, 255, 255, .03); }
.ca-wel-pass > span:nth-child(2), .ca-wel-link > span:nth-child(2) { flex: 1; min-width: 0; }
.ca-wel-pass b, .ca-wel-link b { display: block; font-size: 14px; }
.ca-wel-pass small, .ca-wel-link small { display: block; color: var(--ca-muted); font-size: 12px; margin-top: 2px; }
.ca-wel-link > span:first-child { font-size: 20px; }
@media (hover: hover) { .ca-wel-pass:hover { border-color: var(--ca-gold); } .ca-wel-link:hover { border-color: rgba(255, 255, 255, .25); } }
.ca-wel-acts { display: grid; gap: 8px; justify-items: center; }
.ca-wel-acts .ca-row { justify-content: center; }

/* ---------------- Creator logos (verified creators, set in Admin) ---------------- */
/* The same rounded square as a club badge, filled with the logo */
.ca-lb-club.ca-crest-logo { overflow: hidden; background: #0d0d16; }
.ca-lb-club.ca-crest-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ca-crest-big { position: relative; flex: 0 0 auto; width: 52px; height: 52px; }
.ca-crest-big > img { display: block; width: 52px; height: 52px; border-radius: 13px; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(122, 176, 226, .55), 0 4px 14px rgba(0, 0, 0, .35); }
.ca-crest-team { position: absolute; right: -8px; bottom: -6px; }
.ca-crest-team .ca-lb-club { width: 22px; height: 22px; border-radius: 6px; font-size: 7px; letter-spacing: 0; box-shadow: 0 0 0 2px #15131f; }
/* Follow: a pill with the platform's logo and the handle, lined up under the name (past the 52px logo) */
.ca-follow { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px 62px; padding: 5px 13px 5px 6px; border-radius: 999px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14); color: #fff; font: 700 13px/1 Inter, sans-serif; text-decoration: none; }
.ca-follow b { font-weight: 900; }
.ca-follow svg { width: 22px; height: 22px; flex: none; }
@media (hover: hover) { .ca-follow:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); } }
.ca-follow.is-small { margin: 5px 0 0; padding: 3px 10px 3px 4px; gap: 6px; font-size: 11.5px; }
.ca-follow.is-small svg { width: 17px; height: 17px; }
.ca-cr-acts { justify-content: center; margin: 14px 0 8px; }
.ca-cr-acts .ca-btn { width: auto; margin: 0; }
.ca-vchip-logo { width: 18px; height: 18px; margin-right: 6px; border-radius: 5px; object-fit: cover; }
.ca-adm-logo { display: grid; gap: 8px; margin: 12px 0 0; padding: 12px; border-radius: 12px; border: 1px solid rgba(122, 176, 226, .35); background: rgba(58, 120, 181, .08); }
.ca-adm-logo > b { color: #fff; font-size: 14px; }
.ca-adm-logo > small { color: var(--ca-muted); font-size: 12px; line-height: 1.4; }
.ca-adm-logo-row { display: flex; align-items: center; gap: 12px; }
.ca-adm-logo-prev { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: #0d0d16; border: 1px solid var(--ca-line); font-size: 24px; }
.ca-adm-logo-prev img { width: 100%; height: 100%; object-fit: cover; }
.ca-adm-logo-pick { width: auto; margin: 0; }
.ca-adm-logo .ca-row { justify-content: flex-start; }
.ca-adm-logo .ca-row .ca-btn { width: auto; margin: 0; }
.ca-adm-card > .ca-adm-logo { margin: 0; }
/* Admin > Players: a creator's Story (made here), a 9:16 preview and its buttons */
.ca-adm-story { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); } /* not gold: that's CAST Pass's */
.ca-adm-story .ca-adm-logo-row { align-items: flex-start; }
.ca-adm-story-prev { flex: none; width: 90px; height: 160px; border-radius: 10px; object-fit: cover; border: 1px solid var(--ca-line); background: #0d0d16; }
.ca-adm-story-acts { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; min-width: 0; }
.ca-adm-story-acts .ca-btn { width: auto; margin: 0; }
.ca-soc-n .ca-follow { align-self: flex-start; }

/* Verified creators: a blue row on every leaderboard, the way CAST Pass holders get gold (gold wins when they have both) */
.ca-lb-row.is-vf { border-color: rgba(122, 176, 226, .3); background: linear-gradient(90deg, rgba(58, 120, 181, .24), rgba(58, 120, 181, .07) 55%, rgba(255, 255, 255, .03)); box-shadow: inset 3px 0 0 #5b9bd5; }
.ca-lb-row.is-vf .ca-lb-nm { color: #c3defa; }
.ca-lb-row.is-vf.is-me { border-color: #5b9bd5; }
@media (hover: hover) { .ca-lb-row.is-vf.is-tap:hover { background: linear-gradient(90deg, rgba(58, 120, 181, .32), rgba(58, 120, 181, .1) 55%, rgba(255, 255, 255, .05)); border-color: rgba(122, 176, 226, .55); } }

/* Friends and creators rows: the name stays on one line (fitRows shrinks the CAST PASS tag first), smaller Challenge buttons */
.ca-soc-n > .ca-soc-nl { flex: 1 1 100%; min-width: 0; font: 800 14px/1.25 Inter, sans-serif; }
.ca-soc-row .ca-ch-btn { min-height: 34px; padding: 0 12px; font-size: 11.5px; letter-spacing: .3px; border-radius: 10px; white-space: nowrap; }
@media (max-width: 380px) { .ca-soc-row .ca-ch-btn { padding: 0 10px; font-size: 11px; } }

/* Finished challenges: links to both teams */
.ca-ch-teams { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.ca-ch-teams .ca-link { font: 800 12.5px/1.3 Inter, sans-serif; }

/* ---------------- Quick Draft (owner only) ---------------- */
.ca-qd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.ca-qd-bar .ca-btn { width: auto; margin: 0; }
.ca-qd-bar small { flex: 1 1 200px; color: var(--ca-muted); font-size: 12px; line-height: 1.35; }
.ca-soc-acts .ca-qd-btn { min-width: 40px; padding: 0 10px; font-size: 16px; }
/* Quick Draft running: a full-screen card over the game */
.ca-qd-float { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 24px; box-sizing: border-box; background: rgba(8, 8, 14, .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ca-qd-card { display: grid; justify-items: center; gap: 8px; max-width: 320px; padding: 22px 22px 24px; border-radius: 18px; background: #15131f; border: 1px solid rgba(255, 255, 255, .14); text-align: center; color: #fff; }
.ca-qd-card .ca-spin { margin: 0 0 6px; border-color: rgba(241, 192, 115, .25); border-top-color: #f1c073; } /* outside the panel, so its own colours */
.ca-qd-card b { font: 900 18px/1.2 Inter, sans-serif; }
.ca-qd-card span { font: 600 13.5px/1.45 Inter, sans-serif; color: var(--ca-muted, #a9a9c1); }
.ca-qd-card button { margin-top: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; font: 800 12.5px/1 Inter, sans-serif; cursor: pointer; }

/* ---------------- The sign-in wall: what a free CAST Profile gives, then sign in ---------------- */
.ca-wall .ca-wall-grid { margin: 14px 0 10px; gap: 7px; }
/* Compact tiles: the icon sits beside the name, so the sign-in buttons stay near the top of a phone screen */
.ca-wall .ca-wall-grid li { grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: center; padding: 10px 11px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border-color: rgba(255, 255, 255, .1); }
.ca-wall .ca-wall-grid .ca-wel-i { grid-row: 1; font-size: 18px; }
.ca-wall .ca-wall-grid b { grid-row: 1; font-size: 13px; }
.ca-wall .ca-wall-grid small { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.3; }
.ca-wall-free { margin: 2px 0 12px; text-align: center; color: #d6d6e4; font: 800 13px/1.3 Inter, sans-serif; }
.ca-wall-free span { margin-right: 6px; }
.ca-wall > .ca-center { padding: 0 34px; } /* clear of the close button */
.ca-wall .ca-signin { padding-top: 0; }

/* Sent challenges waiting on a friend: what they have to beat */
.ca-ch-waiting { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ca-ch-waiting li { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .14); color: #d6d6e4; font-size: 13.5px; }
.ca-ch-waiting li small { margin-left: 6px; color: var(--ca-muted); font-size: 11.5px; }

/* Admin > Dailies (27-0) */
.ca-adm-list.ca-adm-dailies li { display: flex; align-items: center; gap: 12px; }
.ca-adm-list.ca-adm-dailies li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.ca-adm-dly-ico { flex: none; width: 34px; text-align: center; font-size: 22px; }

/* Admins: a team sheet links to that player in Admin */
.ca-sheet-adm { display: inline-flex; margin: 0 0 10px; color: #fca5a5; font: 800 13px/1.2 Inter, sans-serif; }

/* A short note at the foot of the page (e.g. signed in after tapping through from the other game) */
.ca-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 2147483000; max-width: calc(100vw - 32px); box-sizing: border-box; transform: translateX(-50%);
  padding: 11px 16px; border-radius: 12px; background: #1b1830; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color: #fff; font: 700 13.5px/1.35 Inter, sans-serif; text-align: center; animation: ca-toast-in .25s ease-out; transition: opacity .5s, transform .5s; }
.ca-toast.is-out { opacity: 0; transform: translate(-50%, 8px); }
@keyframes ca-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
/* A newer version is live: Refresh, or Not Now (x). Same foot-of-page spot as the note above, white button (gold is CAST Pass's) */
.ca-upd { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2147483000; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 7px 7px 7px 16px; border-radius: 999px; background: #1b1830; border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); color: #fff; font: 700 13.5px/1.3 Inter, sans-serif; animation: ca-toast-in .25s ease-out; }
.ca-upd-go { flex: none; min-height: 34px; padding: 0 15px; border: 0; border-radius: 999px; background: #fff; color: #111; font: 800 13px/1 Inter, sans-serif; cursor: pointer; }
.ca-upd-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #c9c9da; font: 700 17px/1 Inter, sans-serif; cursor: pointer; }
.ca-upd-go:focus-visible, .ca-upd-x:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }

/* A creator's page before you are friends: Add Friend and Challenge side by side, then a blurred look at their profile */
.ca-cr-acts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 12px; }
.ca-cr-acts2 > .ca-btn, .ca-cr-acts2 > .ca-soc-tag { width: 100%; margin: 0; min-height: 42px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.ca-cr-lock { margin: 4px 0 12px; padding: 14px 12px; border-radius: 14px; border: 1px dashed var(--ca-line); text-align: center; background: rgba(255, 255, 255, .02); }
.ca-cr-lock .ca-tiles { margin: 0; filter: blur(4px); opacity: .45; pointer-events: none; user-select: none; }
.ca-cr-lock p { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--ca-muted); }
.ca-cr-lock p b { color: #fff; }

/* Finished challenges: the result, both sides' scores side by side (tap a side for its team), then Rematch */
.ca-ch-done { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
/* A finished challenge: one compact row (result, who, both scores, Rematch), with the game and when underneath */
.ca-chd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px 8px; padding: 10px 8px 10px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--ca-line); }
.ca-chd.is-won { border-color: rgba(34, 197, 94, .35); }
.ca-chd.is-lost { border-color: rgba(248, 113, 113, .3); }
.ca-chd-res { grid-column: 1; grid-row: 1; justify-self: start; padding: 4px 8px; border-radius: 999px; font: 900 10px/1 Inter, sans-serif; letter-spacing: .7px; text-transform: uppercase; }
.ca-chd.is-won .ca-chd-res { background: rgba(34, 197, 94, .18); color: #86efac; }
.ca-chd.is-lost .ca-chd-res { background: rgba(248, 113, 113, .16); color: #fca5a5; }
.ca-chd.is-tie .ca-chd-res { background: rgba(255, 255, 255, .1); color: #d6d6e4; }
.ca-chd-vs { grid-column: 2; grid-row: 1; min-width: 0; font: 900 14.5px/1.2 Inter, sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-chd-vs span { color: var(--ca-muted); font-weight: 700; font-size: 12px; }
.ca-chd-meta { grid-column: 2 / -1; grid-row: 2; color: var(--ca-muted); font-size: 11.5px; font-weight: 700; }
.ca-chd-sc { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 3px; }
.ca-chd-s { padding: 5px 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: #fff; font: 900 13px/1 Inter, sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-chd-s small { display: none; } /* "tries": the row says which game */
button.ca-chd-s { cursor: pointer; }
.ca-chd-s.is-win { color: #86efac; border-color: rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .1); }
.ca-chd-v { font: 900 10px/1 Inter, sans-serif; color: var(--ca-muted); text-transform: uppercase; }
.ca-chd-re { grid-column: 4; grid-row: 1; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05);
  font-size: 15px; line-height: 1; cursor: pointer; }
.ca-chd-re.is-pass { border-color: rgba(241, 192, 115, .6); } /* Rematch is a CAST Pass perk */
.ca-chd-hint { margin: 0 0 6px; }
@media (hover: hover) { button.ca-chd-s:hover, .ca-chd-re:hover { border-color: rgba(255, 255, 255, .45); } }
/* On a team sheet the look at their profile is smaller, so the team stays near the top */
.ca-cr-lock.is-compact { margin: 8px 0 4px; padding: 10px; }
.ca-cr-lock.is-compact .ca-tile { padding: 6px 4px; }
.ca-cr-lock.is-compact p { margin-top: 8px; font-size: 12.5px; }

/* Stats: a switch between the overview and Deep Stats (its own page, a CAST Pass perk) */
.ca-stats-view { margin: 0 0 12px; }
.ca-stats-view .ca-seg-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.ca-stats-view .ca-seg-btn { white-space: nowrap; }
@media (max-width: 420px) { .ca-stats-view .ca-sv-tag { display: none; } }
.ca-sv-tag { display: inline-block; padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(241, 192, 115, .6); color: var(--ca-gold); font: 900 9px/1.2 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; vertical-align: 1px; }
/* The way into Deep Stats from the overview */
.ca-deep-link { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; box-sizing: border-box; cursor: pointer; text-align: left;
  border: 1px solid rgba(241, 192, 115, .45); background: linear-gradient(160deg, rgba(241, 192, 115, .1), rgba(255, 255, 255, .02)); color: #fff; font: inherit; }
.ca-deep-link > span:first-child { font-size: 24px; }
.ca-deep-link > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ca-deep-link b { font: 900 15px/1.2 Inter, sans-serif; }
.ca-deep-link small { color: var(--ca-muted); font-size: 12px; }
.ca-deep-link i { font-style: normal; color: var(--ca-gold); font-size: 20px; }
@media (hover: hover) { .ca-deep-link:hover { border-color: var(--ca-gold); } }
/* Deep Stats without CAST Pass: each section with a blurred look, then the Pass */
.ca-deep-show { display: grid; gap: 10px; }
.ca-deep-show-h { text-align: center; padding: 6px 12px 4px; }
.ca-deep-show-h h3 { margin: 8px 0 4px; font: italic 900 26px/1.1 Inter, sans-serif; text-transform: uppercase; color: #fff; letter-spacing: -.3px; }
.ca-deep-show-h p { margin: 0; color: var(--ca-muted); font-size: 13.5px; line-height: 1.45; }
.ca-deep-card { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(241, 192, 115, .3); background: linear-gradient(160deg, rgba(241, 192, 115, .06), rgba(255, 255, 255, .02)); }
.ca-deep-card-h { display: flex; align-items: center; gap: 8px; }
.ca-deep-card-h span { font-size: 18px; }
.ca-deep-card-h b { font: 900 14.5px/1.2 Inter, sans-serif; color: #fff; }
.ca-deep-card p { margin: 4px 0 10px; font-size: 12.5px; line-height: 1.4; color: var(--ca-muted); }
.ca-deep-card .ca-deep-peek { margin: 0; }
.ca-deep-show > .ca-btn { margin-top: 4px; }
/* Admin: a CAST Pass given by hand (paying ones say Paid, in gold) */
.ca-mod-tag.is-gift { background: rgba(255, 255, 255, .1); color: #d6d6e4; }
/* Admin view of a non-friend's stats, and the CAST Pass totals above the holders list */
.ca-adm-look { margin: 10px 0 12px; padding: 9px 12px; border-radius: 10px; background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .3); color: #fca5a5; font: 700 12.5px/1.4 Inter, sans-serif; }
.ca-adm-passsum { margin-bottom: 6px; }
/* CAST Pass profile photo (My Details), and reporting someone's photo */
.ca-photo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; box-sizing: border-box; border-radius: 14px; border: 1px solid var(--ca-line); background: var(--ca-card); color: var(--ca-text); text-align: left; font: inherit; }
button.ca-photo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-photo.is-locked { border-style: dashed; }
.ca-photo-pic { flex: none; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, .06); }
.ca-photo-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-photo-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ca-photo-txt b { font: 800 14px/1.25 Inter, sans-serif; }
.ca-photo-txt small { color: var(--ca-muted); font-size: 12.5px; line-height: 1.4; }
.ca-photo-txt .ca-row { margin-top: 6px; }
.ca-photo-pick { cursor: pointer; }
.ca-photo.is-locked .ca-link { flex: none; }
.ca-photo-rep { margin-top: 8px; min-height: 26px; padding: 3px 10px; font-size: 11.5px; color: var(--ca-muted); }
/* Extra rerolls to buy: Stripe's pop-up in its own layer over the game */
.ca-rr { z-index: 10060; }
/* The reroll sheet, in the reroll teal (both games' Reroll button): where you're at, then the two packs, the five-pack lit */
.ca-rr-kicker { color: #5eead4; }
.ca-rr-badge { border-color: #2dd4bf !important; box-shadow: 0 0 26px rgba(45, 212, 191, .35) !important; } /* teal, not the Pass gold */
.ca-rr-hook { margin: 10px auto 0; max-width: 360px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(45, 212, 191, .45); background: rgba(45, 212, 191, .1);
  color: #fff; font: 800 14px/1.4 Inter, sans-serif; text-align: center; }
.ca-rr-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 12px; }
.ca-rr-pack { position: relative; display: grid; gap: 5px; justify-items: center; align-content: start; padding: 18px 10px 16px; border-radius: 14px; border: 1.5px solid rgba(45, 212, 191, .35);
  background: linear-gradient(160deg, rgba(45, 212, 191, .12), rgba(255, 255, 255, .03)); color: var(--ca-text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s, border-color .15s; }
.ca-rr-pack:active { transform: scale(.98); }
.ca-rr-pack b { font: 900 15px/1.2 Inter, sans-serif; }
.ca-rr-pack span { font: 900 28px/1.05 Inter, sans-serif; color: #fff; }
.ca-rr-pack small { font: 600 11.5px/1.35 Inter, sans-serif; color: #b9c3d6; text-align: center; }
.ca-rr-pack small strong { color: #5eead4; font-weight: 900; }
.ca-rr-pack.is-best { border-color: #2dd4bf; background: linear-gradient(160deg, rgba(45, 212, 191, .28), rgba(45, 212, 191, .06)); box-shadow: 0 0 22px rgba(45, 212, 191, .28); }
.ca-rr-pack em { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px; background: #2dd4bf; color: #04342c; font: 900 10px/1.5 Inter, sans-serif; font-style: normal; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.ca-rr-pack em.is-quick { background: #fff; color: #111; }
.ca-rr-pack { grid-template-rows: auto auto 1fr auto; } /* name, price, line, then the chip at the foot */
.ca-rr-pack small { align-self: start; }
.ca-rr-save { align-self: end; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(45, 212, 191, .18); color: #5eead4; font: 900 10.5px/1.3 Inter, sans-serif; font-style: normal; letter-spacing: .4px; text-transform: uppercase; }
@media (hover: hover) { .ca-rr-pack:hover { border-color: #5eead4; } }
@media (prefers-reduced-motion: reduce) { .ca-rr-pack { transition: none; } .ca-rr-pack:active { transform: none; } }
/* The Remove Player sheet (.is-rm): the same, in pink, the Remove Player wildcard's colour in both games */
.ca-rr.is-rm .ca-rr-kicker, .ca-rr.is-rm .ca-rr-pack small strong { color: #f9a8d4; }
.ca-rr.is-rm .ca-rr-badge { border-color: #f472b6 !important; box-shadow: 0 0 26px rgba(244, 114, 182, .35) !important; }
.ca-rr.is-rm .ca-rr-hook { border-color: rgba(244, 114, 182, .45); background: rgba(244, 114, 182, .1); }
.ca-rr.is-rm .ca-rr-pack { border-color: rgba(244, 114, 182, .35); background: linear-gradient(160deg, rgba(236, 72, 153, .12), rgba(255, 255, 255, .03)); }
.ca-rr.is-rm .ca-rr-pack.is-best { border-color: #f472b6; background: linear-gradient(160deg, rgba(236, 72, 153, .28), rgba(236, 72, 153, .06)); box-shadow: 0 0 22px rgba(244, 114, 182, .28); }
.ca-rr.is-rm .ca-rr-pack em { background: #f472b6; color: #3b0a24; }
.ca-rr.is-rm .ca-rr-pack em.is-quick { background: #fff; color: #111; }
.ca-rr.is-rm .ca-rr-save { background: rgba(244, 114, 182, .18); color: #f9a8d4; }
@media (hover: hover) { .ca-rr.is-rm .ca-rr-pack:hover { border-color: #f9a8d4; } }
/* The Streak Freeze sheet (.is-fz): ice blue */
.ca-rr.is-fz .ca-rr-kicker, .ca-rr.is-fz .ca-rr-pack small strong { color: #7dd3fc; }
.ca-rr.is-fz .ca-rr-badge { border-color: #38bdf8 !important; box-shadow: 0 0 26px rgba(56, 189, 248, .35) !important; }
.ca-rr.is-fz .ca-rr-hook { border-color: rgba(56, 189, 248, .45); background: rgba(56, 189, 248, .1); }
.ca-rr.is-fz .ca-rr-pack { border-color: rgba(56, 189, 248, .35); background: linear-gradient(160deg, rgba(56, 189, 248, .12), rgba(255, 255, 255, .03)); }
.ca-rr.is-fz .ca-rr-pack.is-best { border-color: #38bdf8; background: linear-gradient(160deg, rgba(56, 189, 248, .28), rgba(56, 189, 248, .06)); box-shadow: 0 0 22px rgba(56, 189, 248, .28); }
.ca-rr.is-fz .ca-rr-pack em { background: #38bdf8; color: #06283d; }
.ca-rr.is-fz .ca-rr-pack em.is-quick { background: #fff; color: #111; }
.ca-rr.is-fz .ca-rr-save { background: rgba(56, 189, 248, .18); color: #7dd3fc; }
@media (hover: hover) { .ca-rr.is-fz .ca-rr-pack:hover { border-color: #7dd3fc; } }
/* The Reveal sheet (.is-rv): violet */
.ca-rr.is-rv .ca-rr-kicker, .ca-rr.is-rv .ca-rr-pack small strong { color: #c4b5fd; }
.ca-rr.is-rv .ca-rr-badge { border-color: #a78bfa !important; box-shadow: 0 0 26px rgba(167, 139, 250, .35) !important; }
.ca-rr.is-rv .ca-rr-hook { border-color: rgba(167, 139, 250, .45); background: rgba(167, 139, 250, .1); }
.ca-rr.is-rv .ca-rr-pack { border-color: rgba(167, 139, 250, .35); background: linear-gradient(160deg, rgba(167, 139, 250, .12), rgba(255, 255, 255, .03)); }
.ca-rr.is-rv .ca-rr-pack.is-best { border-color: #a78bfa; background: linear-gradient(160deg, rgba(167, 139, 250, .28), rgba(167, 139, 250, .06)); box-shadow: 0 0 22px rgba(167, 139, 250, .28); }
.ca-rr.is-rv .ca-rr-pack em { background: #a78bfa; color: #1e1147; }
.ca-rr.is-rv .ca-rr-pack em.is-quick { background: #fff; color: #111; }
.ca-rr.is-rv .ca-rr-save { background: rgba(167, 139, 250, .18); color: #c4b5fd; }
@media (hover: hover) { .ca-rr.is-rv .ca-rr-pack:hover { border-color: #c4b5fd; } }
/* The Immortal Pick (.is-imm, 1 Oct 2026): 1000TRIES's Immortal look, a charcoal card, a gold edge and a moving platinum
   shine, on its payment pop-up, its three cards, the Shop, the Vault and the home slider */
@keyframes caImmShine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.ca-rr.is-imm .ca-rr-panel { background: radial-gradient(120% 70% at 50% 0%, #2b2a33, #121219 72%); border-color: rgba(241, 192, 115, .55); }
.ca-rr.is-imm .ca-rr-kicker, .ca-rr.is-imm .ca-rr-pack small strong { color: #ffe2a8; }
.ca-rr.is-imm .ca-rr-badge { border-color: #f1c073 !important; box-shadow: 0 0 26px rgba(241, 192, 115, .35) !important; background: linear-gradient(180deg, #2b2a33, #121219) !important; }
.ca-rr.is-imm .ca-rr-hook { border-color: rgba(241, 192, 115, .45); background: rgba(241, 192, 115, .08); color: #fff; }
.ca-rr.is-imm .ca-rr-pack { border-color: rgba(241, 192, 115, .35); background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.ca-rr.is-imm .ca-rr-pack.is-best { border-color: #f1c073; background: linear-gradient(160deg, rgba(241, 192, 115, .2), rgba(241, 192, 115, .04)); box-shadow: 0 0 22px rgba(241, 192, 115, .3); }
.ca-rr.is-imm .ca-rr-pack em { background: linear-gradient(135deg, #c9953a, #ffe2a8 50%, #c9953a); color: #1a1204; }
.ca-rr.is-imm .ca-rr-pack em.is-quick { background: #fff; color: #111; }
.ca-rr.is-imm .ca-rr-save { background: rgba(241, 192, 115, .18); color: #ffe2a8; }
@media (hover: hover) { .ca-rr.is-imm .ca-rr-pack:hover { border-color: #ffe2a8; } }
.ca-rr-tc.is-imm { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(180deg, #23222c, #121219 75%); border-color: #f1c073;
  box-shadow: 0 0 16px rgba(241, 192, 115, .4), 0 6px 14px rgba(0, 0, 0, .5); }
.ca-rr-tc.is-imm .ca-rr-tc-r { background: linear-gradient(135deg, #8e97a6 0%, #dfe4ec 26%, #ffffff 50%, #dfe4ec 74%, #8e97a6 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: caImmShine 4s linear infinite; }
.ca-rr-tc.is-imm .ca-rr-tc-top b, .ca-rr-tc.is-imm .ca-rr-tc-t { color: #ffe2a8; }
.ca-shop-it.is-imm { --it: 241, 192, 115; --itc: #f1c073; --itl: #ffe2a8; --itd: #1a1204; border-color: rgba(241, 192, 115, .45);
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .1), transparent 55%), linear-gradient(180deg, #23222c, #15151c 80%); }
.ca-vl-row.is-imm { --it: 241, 192, 115; --itl: #ffe2a8; background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(35, 34, 44, .6)); }
.ca-vl-chip.is-imm { --it: 241, 192, 115; --itl: #ffe2a8; }
.ca-wild.is-imm { --it: 241, 192, 115; --itc: #f1c073; --itl: #ffe2a8; --itd: #1a1204; border-color: rgba(241, 192, 115, .65); background: linear-gradient(135deg, rgba(43, 42, 51, .92), rgba(18, 18, 25, .75)); }
/* The 88+ Pick (.is-wcp, 7 Oct 2026): World Cup blue (#0ea5e9) and white, never gold, on its payment pop-up, the
   Shop, the Vault and the home slider */
.ca-rr.is-wcp .ca-rr-panel { background: radial-gradient(120% 70% at 50% 0%, #0c2a3d, #0b1220 72%); border-color: rgba(14, 165, 233, .6); }
.ca-rr.is-wcp .ca-rr-kicker, .ca-rr.is-wcp .ca-rr-pack small strong { color: #bae6fd; }
.ca-rr.is-wcp .ca-rr-badge { border-color: #0ea5e9 !important; box-shadow: 0 0 26px rgba(14, 165, 233, .35) !important; background: linear-gradient(180deg, #0c2a3d, #0b1220) !important; }
.ca-rr.is-wcp .ca-rr-hook { border-color: rgba(14, 165, 233, .45); background: rgba(14, 165, 233, .08); color: #fff; }
.ca-rr.is-wcp .ca-rr-pack { border-color: rgba(14, 165, 233, .35); background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.ca-rr.is-wcp .ca-rr-pack.is-best { border-color: #0ea5e9; background: linear-gradient(160deg, rgba(14, 165, 233, .2), rgba(14, 165, 233, .04)); box-shadow: 0 0 22px rgba(14, 165, 233, .3); }
.ca-rr.is-wcp .ca-rr-pack em { background: #0ea5e9; color: #082f49; }
.ca-rr.is-wcp .ca-rr-pack em.is-quick { background: #fff; color: #111; }
.ca-rr.is-wcp .ca-rr-save { background: rgba(14, 165, 233, .18); color: #bae6fd; }
@media (hover: hover) { .ca-rr.is-wcp .ca-rr-pack:hover { border-color: #7dd3fc; } }
.ca-shop-it.is-wcp { --it: 14, 165, 233; --itc: #0ea5e9; --itl: #bae6fd; --itd: #082f49; border-color: rgba(14, 165, 233, .45); background: linear-gradient(180deg, #0c2233, #10151f 80%); }
.ca-vl-row.is-wcp { --it: 14, 165, 233; --itl: #bae6fd; }
.ca-vl-chip.is-wcp { --it: 14, 165, 233; --itl: #bae6fd; }
.ca-wild.is-wcp { --it: 14, 165, 233; --itc: #0ea5e9; --itl: #bae6fd; --itd: #082f49; border-color: rgba(14, 165, 233, .65); background: linear-gradient(135deg, rgba(12, 42, 61, .92), rgba(11, 18, 32, .75)); }
/* The World Legend Pick (.is-ileg, 8 Oct 2026): near black with gold accents, like its reveal (not the Team of the Year blue: the owner), never all gold (the
   owner: "you still wanna see the country, but golden as well"; gold is otherwise kept for CAST Pass), on its payment
   pop-up, the Shop, the Vault and the home slider */
.ca-rr.is-ileg .ca-rr-panel { background: radial-gradient(120% 70% at 50% 0%, #1d1b26, #0b0a11 72%); border-color: rgba(241, 192, 115, .6); }
.ca-rr.is-ileg .ca-rr-kicker, .ca-rr.is-ileg .ca-rr-pack small strong { color: #ffe2a8; }
.ca-rr.is-ileg .ca-rr-badge { border-color: #f1c073 !important; box-shadow: 0 0 26px rgba(241, 192, 115, .35) !important; background: linear-gradient(180deg, #1d1b26, #0b0a11) !important; }
.ca-rr.is-ileg .ca-rr-hook { border-color: rgba(241, 192, 115, .45); background: rgba(241, 192, 115, .08); color: #fff; }
.ca-rr.is-ileg .ca-rr-pack { border-color: rgba(241, 192, 115, .35); background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.ca-rr.is-ileg .ca-rr-pack.is-best { border-color: #f1c073; background: linear-gradient(160deg, rgba(241, 192, 115, .2), rgba(241, 192, 115, .04)); box-shadow: 0 0 22px rgba(241, 192, 115, .3); }
.ca-rr.is-ileg .ca-rr-pack em { background: #f1c073; color: #1a1204; }
.ca-rr.is-ileg .ca-rr-pack em.is-quick { background: #fff; color: #111; }
.ca-rr.is-ileg .ca-rr-save { background: rgba(241, 192, 115, .18); color: #ffe2a8; }
@media (hover: hover) { .ca-rr.is-ileg .ca-rr-pack:hover { border-color: #ffe2a8; } }
.ca-shop-it.is-ileg { --it: 241, 192, 115; --itc: #f1c073; --itl: #ffe2a8; --itd: #1a1204; border-color: rgba(241, 192, 115, .45); background: linear-gradient(180deg, #1b1924, #10151f 80%); }
.ca-vl-row.is-ileg { --it: 241, 192, 115; --itl: #ffe2a8; }
.ca-vl-chip.is-ileg { --it: 241, 192, 115; --itl: #ffe2a8; }
.ca-wild.is-ileg { --it: 241, 192, 115; --itc: #f1c073; --itl: #ffe2a8; --itd: #1a1204; border-color: rgba(241, 192, 115, .65); background: linear-gradient(135deg, rgba(29, 27, 38, .92), rgba(11, 10, 17, .75)); }
.ca-wild.is-imm .ca-wild-ico { background: linear-gradient(180deg, #2b2a33, #121219); box-shadow: inset 0 0 0 1.5px #f1c073; }
.ca-wild.is-imm .ca-wild-buy { background: linear-gradient(135deg, #8e97a6 0%, #dfe4ec 26%, #ffffff 50%, #dfe4ec 74%, #8e97a6 100%); background-size: 200% 100%; color: #14161d; animation: caImmShine 4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ca-rr-tc.is-imm .ca-rr-tc-r, .ca-wild.is-imm .ca-wild-buy { animation: none; } }
/* The Team of the Year Pick sheet (.is-toty): Dally M navy, icy edges */
/* Its three players, on 27-0's pick cards (css/theme.css .tp-card), the Dally M Medal winner in the middle (1 Oct 2026) */
/* The 88+ Pick and World Legend Pick sample cards (8 Oct 2026): World Cup blue, and the nation's look under a gold frame */
.ca-rr-tc.is-wcp { background: linear-gradient(160deg, #0c4a6e, #0b1220 80%); border-color: #7dd3fc; box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 12px rgba(14, 165, 233, .35); }
.ca-rr-tc.is-wcp .ca-rr-tc-top b, .ca-rr-tc.is-wcp .ca-rr-tc-t { color: #7dd3fc; }
.ca-rr-tc.is-wcp .ca-rr-tc-r, .ca-rr-tc.is-ileg .ca-rr-tc-r { font-size: 26px; }
.ca-rr-tc.is-ileg { background: #0b0a11; border: 2px solid #f1c073; box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 241, 196, .5), 0 0 18px rgba(241, 192, 115, .45); }
.ca-rr-tc.is-ileg .ca-rr-tc-look { position: absolute; inset: 0; z-index: 0; }
.ca-rr-tc.is-ileg .ca-rr-tc-look svg { display: block; width: 100%; height: 100%; }
.ca-rr-tc.is-ileg .ca-rr-tc-look::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 14, .3), rgba(8, 8, 14, .72) 55%, rgba(8, 8, 14, .88)); }
.ca-rr-tc.is-ileg > :not(.ca-rr-tc-look) { position: relative; z-index: 1; }
.ca-rr-tc.is-ileg .ca-rr-tc-top b, .ca-rr-tc.is-ileg .ca-rr-tc-t { color: #ffe2a8; text-shadow: 0 1px 2px rgba(0, 0, 0, .85); }
.ca-rr-tc.is-ileg .ca-rr-tc-n { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.ca-rr-tc.is-wcp .ca-rr-tc-top > i, .ca-rr-tc.is-ileg .ca-rr-tc-top > i { min-width: 0; padding: 3px 4px; color: var(--n2); background: linear-gradient(to bottom, var(--n1) 0 72%, var(--n3) 72% 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
/* The World Legend Pick's nations, as small badges */
.ca-nat-strip { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 0; }
.ca-nat-strip i { display: inline-grid; place-items: center; min-width: 24px; height: 14px; padding: 0 2px; border-radius: 3px; font: 900 7.5px/1 Inter, sans-serif; font-style: normal; letter-spacing: .1px;
  color: var(--n2); background: linear-gradient(to bottom, var(--n1) 0 72%, var(--n3) 72% 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ca-rr-top .ca-nat-strip, .ca-rr-trio + .ca-nat-strip { justify-content: center; margin: 0 auto 10px; max-width: 336px; }
.ca-wild-txt .ca-nat-strip { flex-wrap: nowrap; gap: 2px; margin: 3px 0 0; overflow: hidden; }
.ca-wild-txt .ca-nat-strip i { min-width: 20px; height: 13px; font-size: 6.5px; flex: 0 0 auto; }
.ca-rr-trio { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 26px auto 12px; max-width: 336px; perspective: 800px; } /* clear of the close button */
.ca-rr-tc { position: relative; overflow: hidden; flex: 1 1 0; min-width: 0; max-width: 106px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px 9px; border-radius: 12px;
  box-sizing: border-box; background: linear-gradient(160deg, #1e3a8a, #0a1a45 80%); border: 1.5px solid #bfdbfe; box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 12px rgba(147, 197, 253, .3);
  color: #fff; text-align: center; opacity: 0; animation: caRrDeal .5s cubic-bezier(.2, 1.2, .4, 1) calc(var(--d) * 150ms + 100ms) forwards; }
@keyframes caRrDeal { from { opacity: 0; transform: rotateY(90deg) translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }
.ca-rr-tc::after { content: ''; position: absolute; top: -50%; left: -120%; width: 60%; height: 200%; transform: rotate(20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); animation: caPmShine 3s ease-in-out calc(var(--d) * 150ms + 800ms) infinite; }
.ca-rr-tc.is-medal { margin-bottom: 10px; border-color: #f1c073; box-shadow: 0 0 20px rgba(241, 192, 115, .6), 0 6px 16px rgba(0, 0, 0, .5); }
.ca-rr-tc-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 4px; }
.ca-rr-tc-top b { font: 900 10.5px/1 Inter, sans-serif; color: #bfdbfe; }
.ca-rr-tc-top i { font: 900 9px/1 Inter, sans-serif; font-style: normal; padding: 3px 4px; border-radius: 4px; }
.ca-rr-tc.is-medal .ca-rr-tc-top b { color: #f1c073; }
.ca-rr-tc .ca-rr-tc-r { margin-top: 4px; font: 900 32px/1 Inter, sans-serif; color: #fff; }
.ca-rr-tc.is-medal .ca-rr-tc-r { background: linear-gradient(115deg, #c7d2fe, #f0abfc, #99f6e4, #fde68a, #c7d2fe); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: caPmHolo 4s linear infinite; }
.ca-rr-tc-n { min-height: 2.3em; display: flex; align-items: center; justify-content: center; font: 900 12px/1.15 Inter, sans-serif; text-wrap: balance; overflow-wrap: anywhere; }
.ca-rr-tc-t { font: 800 8px/1.2 Inter, sans-serif; letter-spacing: .2px; text-transform: uppercase; white-space: nowrap; color: #93c5fd; }
.ca-rr-tc.is-medal .ca-rr-tc-t { color: #f1c073; }
@media (prefers-reduced-motion: reduce) { .ca-rr-tc, .ca-rr-tc::after, .ca-rr-tc.is-medal .ca-rr-tc-r { animation: none !important; opacity: 1; } }
.ca-rr.is-toty .ca-rr-panel { background: radial-gradient(120% 70% at 50% 0%, #17337c, #0a1230 72%); border-color: rgba(191, 219, 254, .5); }
.ca-rr.is-toty .ca-rr-kicker, .ca-rr.is-toty .ca-rr-pack small strong { color: #bfdbfe; }
.ca-rr.is-toty .ca-rr-badge { border-color: #bfdbfe !important; box-shadow: 0 0 26px rgba(147, 197, 253, .4) !important; background: linear-gradient(160deg, #1e3a8a, #0a1a45) !important; }
.ca-rr.is-toty .ca-rr-hook { border-color: rgba(191, 219, 254, .45); background: rgba(147, 197, 253, .1); color: #eff6ff; }
.ca-rr.is-toty .ca-rr-pack { border-color: rgba(191, 219, 254, .35); background: linear-gradient(160deg, rgba(30, 58, 138, .45), rgba(255, 255, 255, .03)); }
.ca-rr.is-toty .ca-rr-pack.is-best { border-color: #bfdbfe; background: linear-gradient(160deg, rgba(59, 130, 246, .35), rgba(30, 58, 138, .2)); box-shadow: 0 0 22px rgba(147, 197, 253, .3); }
.ca-rr.is-toty .ca-rr-pack em { background: #bfdbfe; color: #0a1a45; }
.ca-rr.is-toty .ca-rr-pack em.is-quick { background: #fff; color: #111; }
.ca-rr.is-toty .ca-rr-save { background: rgba(147, 197, 253, .18); color: #bfdbfe; }
@media (hover: hover) { .ca-rr.is-toty .ca-rr-pack:hover { border-color: #eff6ff; } }
/* The Run It Back sheet (.is-rib): orange */
.ca-rr.is-rib .ca-rr-kicker, .ca-rr.is-rib .ca-rr-pack small strong { color: #fdba74; }
.ca-rr.is-rib .ca-rr-badge { border-color: #fb923c !important; box-shadow: 0 0 26px rgba(251, 146, 60, .35) !important; }
.ca-rr.is-rib .ca-rr-hook { border-color: rgba(251, 146, 60, .45); background: rgba(251, 146, 60, .1); }
.ca-rr.is-rib .ca-rr-pack { border-color: rgba(251, 146, 60, .35); background: linear-gradient(160deg, rgba(251, 146, 60, .12), rgba(255, 255, 255, .03)); }
.ca-rr.is-rib .ca-rr-pack.is-best { border-color: #fb923c; background: linear-gradient(160deg, rgba(251, 146, 60, .28), rgba(251, 146, 60, .06)); box-shadow: 0 0 22px rgba(251, 146, 60, .28); }
.ca-rr.is-rib .ca-rr-pack em { background: #fb923c; color: #431407; }
.ca-rr.is-rib .ca-rr-pack em.is-quick { background: #fff; color: #111; }
.ca-rr.is-rib .ca-rr-save { background: rgba(251, 146, 60, .18); color: #fdba74; }
@media (hover: hover) { .ca-rr.is-rib .ca-rr-pack:hover { border-color: #fdba74; } }
/* The key sheet (.is-ky): the Vault's amber, as the Shop's key packs */
.ca-rr.is-ky .ca-rr-kicker, .ca-rr.is-ky .ca-rr-pack small strong { color: #fcd34d; }
.ca-rr.is-ky .ca-rr-badge { border-color: #fbbf24 !important; box-shadow: 0 0 26px rgba(251, 191, 36, .35) !important; }
.ca-rr.is-ky .ca-rr-hook { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .1); }
.ca-rr.is-ky .ca-rr-pack { border-color: rgba(251, 191, 36, .35); background: linear-gradient(160deg, rgba(251, 191, 36, .12), rgba(255, 255, 255, .03)); }
.ca-rr.is-ky .ca-rr-pack.is-best { border-color: #fbbf24; background: linear-gradient(160deg, rgba(251, 191, 36, .28), rgba(251, 191, 36, .06)); box-shadow: 0 0 22px rgba(251, 191, 36, .28); }
.ca-rr.is-ky .ca-rr-pack em { background: #fbbf24; color: #412402; }
.ca-rr.is-ky .ca-rr-pack em.is-quick { background: #fff; color: #111; }
.ca-rr.is-ky .ca-rr-save { background: rgba(251, 191, 36, .18); color: #fcd34d; }
@media (hover: hover) { .ca-rr.is-ky .ca-rr-pack:hover { border-color: #fcd34d; } }
/* A plain tag (the 5-pack beside the 12-pack), and a pack across the row (the 12-pack): name and price side by side */
.ca-rr-pack em.is-plain { background: rgba(255, 255, 255, .16); color: #fff; }
.ca-rr-pack.is-wide { grid-column: 1 / -1; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; justify-items: start; align-items: center; column-gap: 12px; padding: 18px 16px 14px; }
.ca-rr-pack.is-wide b { grid-column: 1; grid-row: 1; }
.ca-rr-pack.is-wide span { grid-column: 2; grid-row: 1 / span 2; }
.ca-rr-pack.is-wide small { grid-column: 1; grid-row: 2; text-align: left; }
.ca-rr-pack.is-wide .ca-rr-save { grid-column: 1; grid-row: 3; }
.ca-rr-passnote { margin: 4px 0 12px; }
/* The $1 pack's chip ("Instant", "Automatic"): white, like its Quick Fix tag, in every colour of the pop-up */
.ca-rr .ca-rr-pack .ca-rr-save.is-quick { background: rgba(255, 255, 255, .12); color: #fff; }
.ca-rr-payhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 44px 8px 0; }
.ca-rr-payhead .ca-back { margin: 0; }
.ca-rr-pay:not(:empty) { margin-top: 6px; border-radius: 12px; overflow: hidden; background: #fff; }

/* Just-bought rerolls: the game's Reroll button glows green until one is used (the games add ca-rr-fresh) */
@keyframes caRrFresh {
  0%, 100% { box-shadow: 0 0 0 2px rgba(74, 222, 128, .85) inset, 0 0 0 0 rgba(74, 222, 128, 0); transform: none; }
  50% { box-shadow: 0 0 0 2px rgba(74, 222, 128, 1) inset, 0 0 22px 4px rgba(74, 222, 128, .45); transform: scale(1.03); }
}
.ca-rr-fresh { animation: caRrFresh 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ca-rr-fresh { animation: none; box-shadow: 0 0 0 2px rgba(74, 222, 128, .9) inset; } }

/* Trophies just won: a pop-up a few seconds after the result (green, the colour of a win; gold stays with CAST Pass) */
.ca-tp { --ca-gold: #4ade80; --ca-gold-rgb: 74, 222, 128; z-index: 10055; }
.ca-tp-ico { width: 88px; height: 88px; margin: 6px auto 12px; display: grid; place-items: center; font-size: 46px; line-height: 1; border-radius: 50%;
  border: 2px solid var(--ca-gold); background: rgba(var(--ca-gold-rgb), .12); box-shadow: 0 0 0 6px rgba(var(--ca-gold-rgb), .1), 0 0 36px rgba(var(--ca-gold-rgb), .45);
  animation: caTpPop .7s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes caTpPop { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.12) rotate(6deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.ca-tp .ca-text { margin: 0 0 12px; font-size: 15px; color: #e4e4ee; text-wrap: balance; }
.ca-tp-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ca-tp-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ca-line); text-align: left; }
.ca-tp-li-ico { font-size: 24px; line-height: 1; text-align: center; }
.ca-tp-list b { display: block; font: 900 14px/1.2 Inter, sans-serif; color: #fff; }
.ca-tp-list small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--ca-muted); }
.ca-tp-count { margin: 2px 0 4px; text-align: center; font: 800 11.5px/1.3 Inter, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--ca-muted); }
@media (prefers-reduced-motion: reduce) { .ca-tp-ico { animation: none; } }

/* CAST Pass funnel: the pop-up after games (the Pass's own gold) and the slim home banner */
.ca-pf { z-index: 10054; }
.ca-pf .ca-badge { width: 72px; height: 72px; font-size: 34px; }
.ca-pf .ca-text { font-size: 15px; color: #e4e4ee; text-wrap: balance; }
.ca-pf-price { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--ca-muted); }
.ca-pf-price .ca-ps { margin: 0 4px 0 0; vertical-align: middle; }
.ca-pfb { display: flex; align-items: stretch; gap: 6px; margin: 0 0 16px; }
.ca-pfb[hidden] { display: none; }
.ca-pfb-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; border: 1.5px solid rgba(241, 192, 115, .5);
  background: linear-gradient(135deg, rgba(241, 192, 115, .14), rgba(241, 192, 115, .04)); color: #f0f0f5; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-pfb-go .ca-ps { margin: 0; flex: none; }
.ca-pfb-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ca-pfb-txt b { font: 800 13.5px/1.25 Inter, sans-serif; color: #fff; }
.ca-pfb-txt small { font: 700 11.5px/1.3 Inter, sans-serif; color: #f1c073; }
.ca-pfb-arrow { flex: none; color: #f1c073; font-size: 20px; line-height: 1; }
.ca-pfb-x { flex: none; width: 34px; border-radius: 12px; border: 1px solid #2a2a44; background: rgba(255, 255, 255, .03); color: #a9a9c1; font-size: 13px; cursor: pointer; }
@media (hover: hover) { .ca-pfb-go:hover { border-color: #f1c073; } .ca-pfb-x:hover { color: #fff; } }

/* Friends > Creators: Top Creators This Week (the top three on one board's Creators copy, first in the middle, a step up),
   a board picker, See All Creators, and each creator's rank under their name */
.ca-crtop { display: grid; gap: 10px; margin: 0 0 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(29, 155, 240, .35); background: rgba(29, 155, 240, .07); }
.ca-crtop-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ca-crtop-h > b { color: #fff; font: 900 14.5px/1.2 Inter, sans-serif; }
.ca-lb-filter.ca-crtop-pick { flex: 0 1 auto; min-height: 34px; max-width: 58%; padding: 0 8px 0 11px; }
.ca-crtop-pod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: end; text-align: center; }
.ca-crtop-p { display: grid; justify-items: center; gap: 3px; min-width: 0; padding-bottom: 2px; }
.ca-crtop-p .ca-lb-club { width: 44px; height: 44px; border-radius: 12px; color: var(--t2); font: 900 12px/1 Inter, sans-serif; letter-spacing: .3px; }
.ca-crtop-p.is-mid { padding-bottom: 14px; }
.ca-crtop-p.is-mid .ca-lb-club { width: 58px; height: 58px; border-radius: 15px; font-size: 14px; box-shadow: 0 0 0 2px rgba(29, 155, 240, .7); }
.ca-crtop-place { color: #7cc4f7; font: 900 12px/1.1 Inter, sans-serif; letter-spacing: .4px; }
.ca-crtop-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font: 800 13px/1.2 Inter, sans-serif; }
.ca-crtop-s { color: var(--ca-muted); font: 700 12px/1.2 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.ca-crtop-s small { font-size: 10.5px; }
.ca-crtop-empty { margin: 4px 0; text-align: center; font-size: 13px; }
.ca-crtop-all { justify-self: center; }
.ca-soc-n .ca-cr-rk { color: #7cc4f7; font-weight: 800; }

/* A used key's countdown ("Back in 12h 54m") keeps its lower case wherever the label around it is in capitals */
[data-cast-cd] { text-transform: none; }

/* Results: the challenge card under the saved line, in the social blue */
.ca-chr { display: grid; gap: 6px; margin: -4px 0 16px; padding: 14px; border-radius: 14px; border: 1px solid rgba(29, 155, 240, .5); background: rgba(29, 155, 240, .1); text-align: left; }
.ca-chr[hidden] { display: none; }
.ca-chr-h { color: #fff; font: 900 15px/1.25 Inter, sans-serif; }
.ca-chr small { color: #cfd6e6; font-size: 12.5px; line-height: 1.4; }
.ca-chr-go { margin-top: 4px; min-height: 44px; border: 0; border-radius: 10px; background: #1d9bf0; color: #fff; font: 900 13px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; }
.ca-chr-alt { justify-self: center; min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(124, 196, 247, .5); background: transparent; color: #7cc4f7; font: 800 12.5px/1 Inter, sans-serif; cursor: pointer; }
@media (hover: hover) { .ca-chr-go:hover { background: #3aa9f2; } .ca-chr-alt:hover { border-color: #7cc4f7; color: #fff; } }
.ca-chr-go:focus-visible, .ca-chr-alt:focus-visible, .ca-chh:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
/* Results strips (4 Oct 2026, the owner's call): the saved line and the challenge on one slim row each, under the buttons */
.ca-cta.is-slim { flex-wrap: nowrap; gap: 10px; margin: 12px 0; padding: 7px 7px 7px 12px; border-radius: 12px; }
.ca-cta.is-slim .ca-cta-ico { font-size: 18px; }
.ca-cta.is-slim .ca-cta-txt { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 7px; row-gap: 1px; }
.ca-cta.is-slim .ca-cta-txt b { font-size: 14px; }
.ca-cta.is-slim .ca-cta-txt small { font-size: 12px; }
.ca-cta.is-slim .ca-cta-next { display: inline; margin: 0; font-size: 12px; }
.ca-cta.is-slim .ca-cta-btn { flex: 0 0 auto; min-height: 44px; padding: 0 12px; white-space: nowrap; }
.ca-chr { padding: 2px; gap: 0; margin: -4px 0 12px; }
.ca-chr-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px; border: 0; background: none; color: #fff;
  font: 900 14px/1.25 Inter, sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-chr-row-ico { font-size: 17px; }
.ca-chr-row-t { flex: 1; min-width: 0; }
.ca-chr-row-go { color: #7cc4f7; font-size: 22px; line-height: 1; transition: transform .15s ease; }
.ca-chr.is-open .ca-chr-row-go { transform: rotate(90deg); }
.ca-chr-more { display: grid; gap: 8px; padding: 0 12px 12px; }
.ca-chr-more[hidden] { display: none; }
.ca-chr-more .ca-chr-alt { min-height: 40px; }
.ca-chr-row:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: -2px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .ca-chr-row-go { transition: none; } }

/* Home page: challenges waiting, or this week's top creator to beat (under the Daily Challenge) */
[data-cast-challenges][hidden] { display: none; }
[data-cast-challenges] { margin: 0 0 14px; } /* 27-0 sets its own spacing on the slot */
.ca-chh { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(29, 155, 240, .45);
  background: rgba(29, 155, 240, .08); color: #fff; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .ca-chh:hover { border-color: rgba(29, 155, 240, .8); } }
.ca-chh-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; font-size: 22px; }
.ca-chh-ico .ca-lb-club { width: 40px; height: 40px; border-radius: 11px; color: var(--t2); font: 900 11px/1 Inter, sans-serif; }
.ca-chh-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ca-chh-txt b { font: 900 14.5px/1.2 Inter, sans-serif; overflow-wrap: anywhere; } /* a long name wraps rather than getting cut off */
.ca-chh-txt small { color: #a9b6cc; font: 700 12.5px/1.3 Inter, sans-serif; }
.ca-chh-txt small small { font-size: 11px; }
.ca-chh-btn { flex: none; padding: 9px 14px; border-radius: 10px; background: #1d9bf0; color: #fff; font: 900 12px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .4px; }
.ca-chh.is-creator .ca-chh-btn { background: transparent; box-shadow: inset 0 0 0 1.5px #1d9bf0; color: #7cc4f7; }

/* ---------------- The Shop (Profile > Shop) ---------------- */
/* Stats: the way into the Shop */
.ca-shop-row { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ca-line);
  background: rgba(255, 255, 255, .04); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.ca-shop-row > span:first-child { font-size: 22px; }
.ca-shop-row > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ca-shop-row b { font: 900 14px/1.2 Inter, sans-serif; }
.ca-shop-row small { color: var(--ca-muted); font-size: 12px; }
.ca-shop-go { flex: none; color: var(--ca-muted); font: 900 20px/1 Inter, sans-serif; }
@media (hover: hover) { .ca-shop-row:hover { border-color: rgba(255, 255, 255, .4); } }
/* CAST Pass leads: the best deal */
.ca-shop-pass { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 14px; border-radius: 14px;
  border: 1.5px solid rgba(241, 192, 115, .7); background: linear-gradient(135deg, rgba(241, 192, 115, .18), rgba(241, 192, 115, .04)); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.ca-shop-pass .ca-vf { flex: none; width: 34px; height: 34px; margin: 0; }
.ca-shop-pass > span:not(.ca-shop-go) { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ca-shop-pass b { font: 900 14.5px/1.2 Inter, sans-serif; color: #f1c073; }
.ca-shop-pass small { color: #e6dcc8; font-size: 12.5px; line-height: 1.4; }
.ca-shop-pass.is-on { cursor: default; }
/* The Shop (28 Sep 2026): one small card per item, what you have on the right, its packs side by side underneath. Each
   card takes its item's colour (the same as its pop-up): --it (rgb), --itc (main), --itl (light), --itd (dark text) */
.ca-shop-it.is-rr { --it: 45, 212, 191; --itc: #2dd4bf; --itl: #5eead4; --itd: #04342c; }
.ca-shop-it.is-rm { --it: 244, 114, 182; --itc: #f472b6; --itl: #f9a8d4; --itd: #3b0a24; }
.ca-shop-it.is-rv { --it: 167, 139, 250; --itc: #a78bfa; --itl: #c4b5fd; --itd: #1e1147; }
.ca-shop-it.is-key { --it: 251, 191, 36; --itc: #fbbf24; --itl: #fcd34d; --itd: #412402; }
.ca-shop-it.is-rib { --it: 251, 146, 60; --itc: #fb923c; --itl: #fdba74; --itd: #431407; }
.ca-shop-it.is-fz { --it: 56, 189, 248; --itc: #38bdf8; --itl: #7dd3fc; --itd: #06283d; }
.ca-shop-it.is-toty { --it: 147, 197, 253; --itc: #bfdbfe; --itl: #bfdbfe; --itd: #0a1a45; border-color: rgba(191, 219, 254, .5); background: radial-gradient(120% 90% at 50% 0%, #17337c, #0a1230 75%); }
.ca-shop-items { display: grid; gap: 10px; margin: 0 0 12px; }
.ca-shop-it { padding: 12px; border-radius: 14px; border: 1px solid rgba(var(--it), .28); background: linear-gradient(160deg, rgba(var(--it), .09), rgba(255, 255, 255, .02)); }
.ca-shop-ith { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.ca-shop-iti { flex: none; font-size: 22px; line-height: 1; }
.ca-shop-itt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ca-shop-itt b { color: #fff; font: 900 15px/1.2 Inter, sans-serif; }
.ca-shop-itt small { color: var(--ca-muted); font-size: 11.5px; line-height: 1.35; }
.ca-shop-its { flex: none; display: grid; justify-items: end; gap: 2px; max-width: 45%; text-align: right; }
.ca-shop-its strong { font: 900 12.5px/1.2 Inter, sans-serif; color: var(--itl); }
.ca-shop-its strong.is-none { color: var(--ca-muted); font-weight: 700; }
.ca-shop-its em { font: 800 11.5px/1.25 Inter, sans-serif; font-style: normal; color: #cfd6e6; }











/* CAST Pass: one slim row on top for a free profile, a line for a Pass holder */
.ca-shop-passrow { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid rgba(241, 192, 115, .6); background: linear-gradient(135deg, rgba(241, 192, 115, .14), rgba(241, 192, 115, .03)); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.ca-shop-passrow .ca-vf { flex: none; width: 28px; height: 28px; margin: 0; }
.ca-shop-passrow > span:not(.ca-shop-go) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ca-shop-passrow b { font: 900 13.5px/1.2 Inter, sans-serif; color: #f1c073; }
.ca-shop-passrow small { color: #e6dcc8; font-size: 12px; line-height: 1.35; }
.ca-shop-passline { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ca-muted); font-size: 12.5px; line-height: 1.4; }
.ca-shop-passline .ca-vf { flex: none; width: 20px; height: 20px; margin: 0; }
@media (hover: hover) {  .ca-shop-pass:not(.is-on):hover, .ca-shop-passrow:hover { border-color: #f1c073; } }


/* Friends > Add: the referral line under the invite link */
.ca-ref-line { display: block; margin-top: 6px; color: #5eead4; font: 800 12px/1.4 Inter, sans-serif; }

/* Admin lists: a person's tags sit under their name as small chips (not a squeezed column on the right) */
.ca-adm-people .ca-adm-tags.is-under { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; margin-top: 4px; }
.ca-adm-tags.is-under .ca-mod-tag { font-size: 9.5px; padding: 2px 7px; }
.ca-adm-people .ca-adm-pn small { white-space: normal; }

/* Admin > every sale (the owner taps Total Collected): filter by kind (it scrolls sideways on a phone), amount on the right */
.ca-adm-salesseg { grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
.ca-adm-salesseg::-webkit-scrollbar { display: none; }
.ca-adm-salesseg .ca-seg-btn { padding: 0 12px; white-space: nowrap; }
.ca-adm-sale { flex: 0 0 auto; color: #fff; font: 900 14px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.ca-adm-sale.is-refunded { color: var(--ca-muted); text-decoration: line-through; }
.ca-mod-tag.is-refund { background: rgba(248, 113, 113, .16); color: #fca5a5; }
/* Admin > Dailies: the button to the other game's list */
.ca-adm-otherdly { margin: 14px 0 0; }

/* Streak Freezes under the streak tiles: how many are ready, or a pill to get one (ice blue, a pill not a text link) */




/* ---------------- No lonely words ----------------
   The user's rule (28 Sep 2026): a word never sits on a line by itself. Every block wraps "pretty" (its last line is
   never one lonely word) and short copy (titles, hooks, captions, labels, notes) is balanced, which older iPhones
   understand too. text-wrap-style is inherited, so this reaches everything drawn in the panels, pop-ups and toasts. */
.ca, .ca-toast { text-wrap-style: pretty; }
.ca h2, .ca h3, .ca h4, .ca p, .ca li, .ca small, .ca b, .ca strong, .ca span, .ca div, .ca em, .ca button, .ca label, .ca-title, .ca-kicker, .ca-text, .ca-muted, .ca-center, .ca-rr-hook,
.ca-toast, .ca-promo *, .ca-pf *, .ca-tp * { text-wrap-style: balance; }
.ca-adm-sub { display: block; margin-top: 2px; color: var(--ca-text); font-weight: 800; }

/* ---------------- Daily and streak rewards (28 Sep 2026) ----------------
   The green of a completed Daily and of trophies (gold is CAST Pass's) */
.ca-rwp { z-index: 10056; } /* the reward pop-up (ca-tp's green) */


.ca-cta-next { display: block; margin-top: 3px; color: #fdba74; font: 800 11.5px/1.35 Inter, sans-serif; }
.ca-nw { white-space: nowrap; } /* "10-day" kept whole */
.ca-free { color: #86efac; font-weight: 800; } /* the free Reveal for joining the emails */
.ca-mail-txt .ca-free { font-size: 12.5px; color: #86efac; } /* (beats .ca-mail-txt b) */
/* The 'loved it?' prompt on the results screen */
.ca-ups { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 12px 12px 14px; border-radius: 14px; text-align: left;
  background: linear-gradient(135deg, rgba(74, 222, 128, .12), rgba(74, 222, 128, .03)); border: 1px solid rgba(74, 222, 128, .5); flex-wrap: wrap; container-type: inline-size; }
.ca-ups[hidden] { display: none; }
.ca-ups-ico { flex: none; font-size: 24px; line-height: 1; }
.ca-ups-txt { flex: 1 1 170px; min-width: 0; display: grid; gap: 2px; }
.ca-ups-txt b { color: #fff; font: 900 15px/1.25 Inter, sans-serif; }
.ca-ups-txt small { color: #cfe9d8; font: 700 12px/1.35 Inter, sans-serif; }
.ca-ups-btn { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 0; background: #4ade80; color: #06290f; font: 900 12px/1 Inter, sans-serif;
  text-transform: uppercase; letter-spacing: .4px; cursor: pointer; }
.ca-ups-btn.is-pass { background: #f1c073; color: #2a1c05; } /* the Pass's gold */
@container (max-width: 420px) { .ca-ups > .ca-ups-btn { flex: 1 1 100%; } }
/* The launch-day banner (in the home banner slot) */
.ca-rwb .ca-pfb-go { border-color: rgba(74, 222, 128, .55); background: linear-gradient(135deg, rgba(74, 222, 128, .14), rgba(74, 222, 128, .03)); }
.ca-rwb .ca-pfb-txt small { color: #b8e8c8; }
.ca-rwb .ca-pfb-arrow { color: #86efac; }
.ca-rwb-ico { flex: none; font-size: 24px; line-height: 1; }
/* The Day 2 Streak Card (7 Oct 2026): a guest's streak, in the streak's flame orange */
.ca-stk .ca-pfb-go { border-color: rgba(251, 146, 60, .55); background: linear-gradient(135deg, rgba(251, 146, 60, .16), rgba(251, 146, 60, .03)); }
.ca-stk .ca-pfb-txt small { color: #fed7aa; }
.ca-stk .ca-pfb-arrow { color: #fdba74; }
.ca-stk-ico { flex: none; font-size: 24px; line-height: 1; }
/* Shop and Vault: your Vault at a glance, and a bright count on each card */






  
  
.ca-shop-its .ca-shop-badge { padding: 3px 9px; border-radius: 999px; background: rgba(var(--it), .22); border: 1px solid rgba(var(--it), .7); color: #fff; font: 900 12px/1.3 Inter, sans-serif; white-space: nowrap; }
.ca-shop-its .ca-shop-badge.is-none { background: transparent; border-color: var(--ca-line); color: var(--ca-muted); font-weight: 800; }
/* Admin: the rewards card and the Dailies' completions */
.ca-adm-rwtab { overflow-x: auto; margin: 0 0 16px; }
.ca-adm-rwtab table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ca-adm-rwtab th, .ca-adm-rwtab td { padding: 7px 8px; border-bottom: 1px solid var(--ca-line); text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ca-adm-rwtab th { color: var(--ca-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.ca-adm-rwtab td small { color: var(--ca-muted); }
.ca-adm-dly-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ca-mod-tag.is-hard { background: rgba(248, 113, 113, .16); color: #fca5a5; }

/* ---------------- The top bar (29 Sep 2026) ----------------
   It had gold, blue, teal and red pills side by side. Now every button is one quiet tab: its icon (coloured by what it
   is) over a small label, all the same size, like an app's tab bar, and a full bar still fits a 375px phone. Profile is
   a round avatar with no label (it is only My Details now). A guest's Sign In stays the gold pill: it's the way in.
   The sites' own Stats and Leaderboards buttons take the same look with .ca-nav-tab and .ca-nav-lbl. */
.ca-btn-head.ca-btn-shop, .ca-btn-head.ca-btn-friends, .ca-btn-head.ca-btn-admin, .ca-nav-tab {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: auto; min-width: 50px; height: 46px; min-height: 46px; padding: 4px 6px; box-sizing: border-box; flex-shrink: 0; cursor: pointer;
  border: 1px solid transparent; border-radius: 12px; background: transparent; box-shadow: none; color: #fff;
  font: 800 11px/1 Inter, sans-serif; letter-spacing: .1px; text-transform: none; white-space: nowrap; } /* 11px: Apple's smallest text size (4 Oct 2026) */
.ca-nav-tab[hidden], .ca-btn-head[hidden] { display: none; }
.ca-btn-head.ca-btn-shop svg, .ca-btn-head.ca-btn-friends svg, .ca-btn-head.ca-btn-admin svg { width: 21px; height: 21px; }
.ca-nav-tab > span:first-child { font-size: 18px; line-height: 21px; height: 21px; }
.ca-btn-head.ca-btn-shop .ca-head-lbl, .ca-btn-head.ca-btn-friends .ca-head-lbl, .ca-btn-head.ca-btn-admin .ca-head-lbl, .ca-nav-tab .ca-nav-lbl { display: block; color: #d6d6e4; }
.ca-btn-head.ca-btn-shop svg { color: #2dd4bf; }
.ca-btn-head.ca-btn-friends svg { color: #7db8f0; }
.ca-btn-head.ca-btn-admin svg { color: #f87171; }
@media (hover: hover) { .ca-btn-head.ca-btn-shop:hover, .ca-btn-head.ca-btn-friends:hover, .ca-btn-head.ca-btn-admin:hover, .ca-nav-tab:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); } }
.ca-btn-head.ca-btn-shop:active, .ca-btn-head.ca-btn-friends:active, .ca-btn-head.ca-btn-admin:active, .ca-nav-tab:active { background: rgba(255, 255, 255, .12); }
.ca-btn-head.ca-btn-shop:focus-visible, .ca-btn-head.ca-btn-friends:focus-visible, .ca-btn-head.ca-btn-admin:focus-visible, .ca-nav-tab:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* Counts (and Friends' NEW) sit on the icon's corner */
.ca-btn-head.ca-btn-friends .ca-head-mod, .ca-btn-head.ca-btn-admin .ca-head-mod { position: absolute; top: 0; left: calc(50% + 4px); right: auto; margin: 0; }
/* Friends' NEW ran under a guest's Sign In pill and read "NEV" (4 Oct 2026): drawn on top, and pulled in a little */
.ca-btn-head.ca-btn-friends { z-index: 1; }
.ca-btn-head.ca-btn-friends .ca-head-new { right: -8px; }
/* Profile, signed in: a round avatar, the streak badge on its corner */
.ca-btn-head.is-in { position: relative; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; gap: 0; justify-content: center; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); background: #1d1c30; color: #fff; box-shadow: none; }
.ca-btn-head.is-in .ca-head-av { display: grid; place-items: center; }
.ca-btn-head.is-in svg { width: 20px; height: 20px; }
@media (hover: hover) { .ca-btn-head.is-in:hover { background: #2a2942; border-color: #fff; } }
.ca-btn-head.is-in .ca-head-streak { position: absolute; top: -8px; right: -3px; margin: 0; padding: 2px 5px; font-size: 10px; border: 1px solid rgba(251, 146, 60, .6); }
/* Small phones: a little narrower, so the fullest bar still fits */
@media (max-width: 400px) {
  .ca-btn-head.ca-btn-shop, .ca-btn-head.ca-btn-friends, .ca-btn-head.ca-btn-admin, .ca-nav-tab { min-width: 42px; padding: 4px 2px; font-size: 11px; }
}
/* A label that shortens on phones ("Leaderboards", then "Rankings") */
.ca-lbl-s { display: none; }
@media (max-width: 560px) { .ca-lbl-l { display: none; } .ca-lbl-s { display: inline; } }

/* The home spot ([data-cast-spot]): its cards stack in one place and take turns. The tallest sets the height, so the page
   never jumps when they change; the dots under it pick one (neutral white: gold is CAST Pass's) */
.ca-home-spot { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; margin: 0 0 4px; }
.ca-home-spot[hidden] { display: none; }
/* One card at a time (6 Oct 2026): the card leaving fades out first, then the next fades in, so two never show through
   each other mid-swipe */
.ca-home-spot > * { grid-area: 1 / 1; margin: 0 !important; min-width: 0; transition: opacity .2s ease .15s, transform .25s ease .15s, visibility 0s; }
.ca-home-spot > [hidden] { display: none !important; }
/* One size for every card (6 Oct 2026, the owner: "make a universal size and apply to all of them, and future ones"):
   every slot is a flex box, so the card in it (the slot's only child, or the slot itself when it is the card) stretches
   to the spot's height, which is the tallest card's. A new card needs nothing of its own */
.ca-home-spot > * { display: flex; }
.ca-home-spot > * > :only-child { flex: 1 1 auto; min-width: 0; }
/* A thinner banner (6 Oct 2026, the owner): titles and lines a touch smaller and 8px top and bottom, so the tallest card,
   and with it the banner, is about 86px on a phone instead of 105. Titles and lines sit in each card's "-txt" column, so a
   new card built that way gets the same size */
.ca-home-spot [class$="-txt"] > b { font-size: 14px; line-height: 1.2; }
.ca-home-spot [class$="-txt"] > small { font-size: 11.5px; line-height: 1.3; }
.ca-home-spot .ca-wild, .ca-home-spot .ca-inv-spot, .ca-home-spot .spot-promo, .ca-home-spot .ca-fan-spot, .ca-home-spot .ca-pm-spot,
.ca-home-spot .ca-chh, .ca-home-spot .ca-pfb-go { padding-top: 8px; padding-bottom: 8px; }
.ca-home-spot .ca-inv-spot { gap: 10px; }
.ca-home-spot .ca-inv-ico { width: 36px; height: 36px; font-size: 19px; }
.ca-home-spot .ca-inv-go { padding-left: 10px; padding-right: 10px; }
@media (max-width: 374px) {
  .ca-home-spot [class$="-txt"] > b { font-size: 13.5px; }
  .ca-home-spot [class$="-txt"] > small { font-size: 11px; }
  .ca-home-spot .ca-inv-go { padding-left: 8px; padding-right: 8px; }
  .ca-home-spot .ca-inv-spot, .ca-home-spot .ca-wild { gap: 8px; }
}
.ca-home-spot > [data-spot-off] { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(12px); transition: opacity .15s ease, transform .15s ease, visibility 0s .15s; }
.ca-home-spot > [data-cast-challenges] { display: flex; }
.ca-home-spot > [data-cast-challenges] > .ca-chh { flex: 1; }
@media (prefers-reduced-motion: reduce) { .ca-home-spot > * { transition: none; transform: none !important; } }
.ca-home-spot-dots { display: flex; justify-content: center; gap: 0; margin: 0 0 10px; }
.ca-home-spot-dots[hidden] { display: none; }
.ca-home-spot-dot { display: grid; place-items: center; width: 24px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-home-spot-dot::before { content: ''; width: 7px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .28); transition: width .2s ease, background .2s ease; }
.ca-home-spot-dot.is-on::before { width: 18px; background: rgba(255, 255, 255, .85); }
.ca-home-spot-dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 6px; }

/* Home, both games (29 Sep 2026). First visit only: how it works in three steps, under the pitch (each game hides it once
   they finish a game) */
.first-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 16px; padding: 0; counter-reset: fs; }
.first-steps[hidden] { display: none; }
.first-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 6px 10px; border-radius: 14px; background: #14142a; border: 1px solid #26264a; text-align: center; counter-increment: fs; }
.first-steps li::before { content: counter(fs); position: absolute; top: 7px; left: 9px; font: 900 10px/1 Inter, sans-serif; color: #7a7a96; }
.fs-ico { font-size: 22px; line-height: 1; }
.first-steps b { font-size: 14px; font-weight: 900; color: #fff; white-space: nowrap; }
.first-steps small { font-size: 11.5px; line-height: 1.3; color: #a8a8c0; }
/* The spot's card for the other game, tinted in that game's colour (--sp: 1000TRIES shows 27-0 in purple, 27-0 shows 1000TRIES in gold) */
.spot-promo { --sp: 124, 92, 255; display: flex; text-align: left; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 14px; border: 1px solid rgba(var(--sp), .4);
  background: linear-gradient(135deg, rgba(var(--sp), .14), rgba(var(--sp), .02) 70%), #14142a; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.spot-promo[hidden] { display: none; }
@media (hover: hover) { .spot-promo:hover { border-color: rgba(var(--sp), .9); } }
.spot-promo-logo { flex: none; width: 62px; height: auto; }
.spot-promo-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.spot-promo-txt b { font-size: 15px; font-weight: 900; line-height: 1.2; color: #fff; }
.spot-promo-txt small { font-size: 12.5px; line-height: 1.35; color: #b8b8cc; }
.spot-promo-arrow { flex: none; font-size: 26px; line-height: 1; color: #b8b8cc; }

/* ---------------- Stats: the streak, tidied (29 Sep 2026) ----------------
   The Streak tile and one line under the tiles open Your Streak (streakPage) */
.ca-tile.is-tap { position: relative; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, border-color .15s ease; }
.ca-tile.is-tap:active { transform: scale(.97); }
.ca-tile-go { position: absolute; top: 6px; right: 9px; font: 900 16px/1 Inter, sans-serif; font-style: normal; color: rgba(255, 255, 255, .45); }
.ca-tile.is-live .ca-tile-go { color: #fdba74; }
@media (hover: hover) { .ca-tile.is-tap:hover { border-color: rgba(251, 146, 60, .9); } }
.ca-streak-row { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 10px 12px 10px 14px; border-radius: 12px;
  border: 1px solid var(--ca-line); background: rgba(255, 255, 255, .03); color: #d6d6e4; font: 700 13px/1.35 Inter, sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-streak-row.is-done { border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .07); color: #d6f5e0; }
.ca-streak-row-t { flex: 1; min-width: 0; }
.ca-streak-row-t i { font-style: normal; color: var(--ca-muted); margin: 0 2px; }
.ca-streak-row-go { flex: none; font: 900 18px/1 Inter, sans-serif; color: var(--ca-muted); }
@media (hover: hover) { .ca-streak-row:hover { border-color: rgba(255, 255, 255, .4); } }

/* Your Streak: the flame and today's state, the next prize, the milestones, the freezes */
.ca-sk-hero { display: grid; justify-items: center; gap: 4px; margin: 4px 0 14px; padding: 18px 14px 14px; border-radius: 18px; text-align: center;
  border: 1px solid var(--ca-line); background: var(--ca-card); }
.ca-sk-hero.is-live { border-color: rgba(251, 146, 60, .55); background: radial-gradient(120% 90% at 50% 0%, rgba(251, 146, 60, .24), rgba(239, 68, 68, .06) 60%, rgba(0, 0, 0, 0)), var(--ca-card); }
.ca-sk-flame { font-size: 40px; line-height: 1; }
.ca-sk-hero.is-live .ca-sk-flame { animation: caFlame 1.6s ease-in-out infinite; }
.ca-sk-num { font: 900 44px/1 Inter, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.ca-sk-hero.is-live .ca-sk-num { color: #fdba74; }
.ca-sk-num small { font-size: 18px; font-weight: 800; color: #d6d6e4; }
.ca-sk-best { font: 800 12px/1.2 Inter, sans-serif; letter-spacing: .4px; text-transform: uppercase; color: var(--ca-muted); }
.ca-sk-status { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: #d6d6e4; }
.ca-sk-status.is-done { color: #bbf7d0; }
.ca-sk-next { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .06); }
.ca-sk-next-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ca-sk-next-h b { font: 900 14px/1.2 Inter, sans-serif; color: #fff; }
.ca-sk-next-h > span { font: 800 12.5px/1.2 Inter, sans-serif; color: #86efac; white-space: nowrap; }
.ca-sk-bar { height: 10px; margin: 10px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ca-sk-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #86efac); }
.ca-sk-next-p { margin: 0; font: 800 13.5px/1.4 Inter, sans-serif; color: #d6f5e0; }
.ca-sk-list { list-style: none; display: grid; gap: 6px; margin: 0 0 16px; padding: 0; }
.ca-sk-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px 9px 8px; border-radius: 12px;
  border: 1px solid var(--ca-line); background: rgba(255, 255, 255, .03); }
.ca-sk-row.is-next { border-color: rgba(74, 222, 128, .5); background: rgba(74, 222, 128, .07); }
.ca-sk-row.is-done { opacity: .75; }
.ca-sk-day { display: grid; justify-items: center; line-height: 1; }
.ca-sk-day b { font: 900 20px/1 Inter, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.ca-sk-day small { font: 800 9.5px/1.4 Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--ca-muted); }
.ca-sk-prize { font: 700 13px/1.4 Inter, sans-serif; color: #e6e6f0; }
.ca-sk-big { display: inline-block; margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: rgba(251, 146, 60, .18); color: #fdba74; font: 900 9.5px/1.5 Inter, sans-serif;
  font-style: normal; letter-spacing: .5px; text-transform: uppercase; vertical-align: 1px; }
.ca-sk-state { font: 800 11.5px/1.2 Inter, sans-serif; color: var(--ca-muted); white-space: nowrap; }
.ca-sk-row.is-next .ca-sk-state { color: #86efac; }
.ca-sk-fz { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(56, 189, 248, .4); background: rgba(56, 189, 248, .07); }
.ca-sk-fz-i { flex: none; font-size: 26px; line-height: 1; }
.ca-sk-fz-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ca-sk-fz-t b { font: 900 14px/1.2 Inter, sans-serif; color: #bae6fd; }
.ca-sk-fz-t small { font-size: 12.5px; line-height: 1.4; color: #cfe3f0; }
.ca-sk-fz .ca-btn { flex: none; width: auto; margin: 0; }
.ca-sk-how { margin: 0 0 8px; text-align: center; color: var(--ca-muted); }

/* ---------------- The Shop, calmer (29 Sep 2026) ----------------
   Each card: what it does and where it works, the big Best Value pack, then the middle pack and a small "or 1" */
.ca-shop-ith { margin: 0 0 6px; }
.ca-shop-what { margin: 0 0 4px; font-size: 13px; line-height: 1.45; color: #d6d6e4; }
.ca-shop-where { margin: 0 0 12px; font: 800 11px/1.3 Inter, sans-serif; letter-spacing: .3px; color: var(--itl); }
.ca-shop-big { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "s p"; align-items: center; column-gap: 12px; row-gap: 2px;
  width: 100%; box-sizing: border-box; padding: 14px 16px 12px; border-radius: 13px; border: 1.5px solid var(--itc); cursor: pointer; text-align: left;
  background: linear-gradient(160deg, rgba(var(--it), .26), rgba(var(--it), .07)); box-shadow: 0 0 18px rgba(var(--it), .18); color: #fff; font: inherit;
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease, border-color .15s ease; }
.ca-shop-big em { position: absolute; top: -9px; left: 14px; padding: 1px 8px; border-radius: 999px; background: var(--itc); color: var(--itd);
  font: 900 9.5px/1.5 Inter, sans-serif; font-style: normal; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.ca-shop-big-n { grid-area: n; font: 900 16px/1.2 Inter, sans-serif; }
.ca-shop-big-p { grid-area: p; font: 900 24px/1 Inter, sans-serif; }
.ca-shop-big small { grid-area: s; font: 800 12px/1.3 Inter, sans-serif; color: var(--itl); }
.ca-shop-more { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ca-shop-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 10px; border-radius: 11px;
  border: 1.5px solid rgba(var(--it), .45); background: rgba(255, 255, 255, .04); color: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-shop-mid b { font: 900 13.5px/1.2 Inter, sans-serif; white-space: nowrap; }
.ca-shop-mid i { padding: 2px 7px; border-radius: 999px; background: rgba(var(--it), .18); color: var(--itl); font: 900 9.5px/1.3 Inter, sans-serif; font-style: normal;
  letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.ca-shop-one { flex: 1; min-height: 40px; padding: 8px 10px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: #cfcfe0;
  font: 800 13px/1.2 Inter, sans-serif; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.ca-shop-more .ca-shop-one:only-child { flex: none; margin: 0 auto; }
/* Two packs side by side (the Team of the Year Pick): the same size, stacked inside, the single one plainer */
.ca-shop-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin-top: 16px; }
.ca-shop-fine { margin: 10px 0 0; font: 600 11px/1.4 Inter, sans-serif; color: var(--ca-muted); text-align: center; text-wrap: balance; }
.ca-shop-big.is-half { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "p" "c"; grid-template-rows: auto auto 1fr; justify-items: center; row-gap: 6px; padding: 16px 10px 12px; text-align: center; }
.ca-shop-big.is-half em { left: 50%; transform: translateX(-50%); }
.ca-shop-big.is-half .ca-shop-big-n { font-size: 15px; white-space: nowrap; }
.ca-shop-big.is-half .ca-shop-big-p { font-size: 28px; }
.ca-shop-chip { grid-area: c; align-self: end; padding: 2px 8px; border-radius: 999px; background: rgba(var(--it), .2); color: var(--itl); font: 900 9.5px/1.4 Inter, sans-serif; font-style: normal;
  letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.ca-shop-big.is-single { border-color: rgba(var(--it), .45); background: rgba(255, 255, 255, .04); box-shadow: none; }
.ca-shop-big.is-single em { background: #fff; color: #111; }
.ca-shop-big.is-single .ca-shop-chip { background: rgba(255, 255, 255, .12); color: #e5e7eb; }
.ca-shop-big:active:not(:disabled), .ca-shop-mid:active:not(:disabled) { transform: scale(.98); }
.ca-shop-big:disabled, .ca-shop-mid:disabled, .ca-shop-one:disabled { opacity: .45; cursor: default; }
@media (hover: hover) { .ca-shop-big:hover:not(:disabled), .ca-shop-mid:hover:not(:disabled) { border-color: #fff; } .ca-shop-one:hover:not(:disabled) { color: #fff; border-color: rgba(255, 255, 255, .25); } }
@media (prefers-reduced-motion: reduce) { .ca-shop-big, .ca-shop-mid { transition: none; } .ca-shop-big:active, .ca-shop-mid:active { transform: none; } }

/* Your Vault, labelled: each item, how many, and how it gets used (tap one to jump to it in the Shop) */
.ca-vl { margin: 0 0 16px; padding: 12px; border-radius: 14px; border: 1px solid var(--ca-line); background: var(--ca-card); }
.ca-vl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
/* Folded (1 Oct 2026): the heading is the toggle, and a line of chips says what's inside */
.ca-vl-toggle { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-vl-toggle small { display: inline-flex; align-items: center; gap: 5px; color: var(--ca-muted); }
.ca-vl-caret { display: inline-block; font-size: 12px; transition: transform .2s ease; }
.ca-vl.is-open .ca-vl-caret { transform: rotate(180deg); }
.ca-vl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ca-vl-chip { --it: 255, 255, 255; --itl: #fff; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 7px; border-radius: 999px; border: 1px solid rgba(var(--it), .45);
  background: rgba(var(--it), .12); color: var(--itl); font: 900 12.5px/1.2 Inter, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }
.ca-vl-chip span { font-size: 14px; line-height: 1; }
.ca-vl-chip.is-rr { --it: 45, 212, 191; --itl: #5eead4; } .ca-vl-chip.is-rm { --it: 244, 114, 182; --itl: #f9a8d4; } .ca-vl-chip.is-rv { --it: 167, 139, 250; --itl: #c4b5fd; }
.ca-vl-chip.is-key { --it: 251, 191, 36; --itl: #fcd34d; } .ca-vl-chip.is-rib { --it: 251, 146, 60; --itl: #fdba74; } .ca-vl-chip.is-fz { --it: 56, 189, 248; --itl: #7dd3fc; }
.ca-vl-chip.is-goat { --it: 241, 192, 115; --itl: #ffe2a8; } .ca-vl-chip.is-toty { --it: 147, 197, 253; --itl: #bfdbfe; }
.ca-vl-h b { font: 900 15px/1.2 Inter, sans-serif; color: #fff; }
.ca-vl-h small { font: 800 11.5px/1.2 Inter, sans-serif; color: var(--ca-muted); }
.ca-vl-empty { margin: 0; font-size: 13px; line-height: 1.45; color: #cfcfe0; }
.ca-vl-list { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.ca-vl-row { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 11px; border: 1px solid rgba(var(--it), .35);
  background: rgba(var(--it), .08); color: #fff; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
button.ca-vl-row { cursor: pointer; }
.ca-vl-row.is-rr { --it: 45, 212, 191; --itl: #5eead4; } .ca-vl-row.is-rm { --it: 244, 114, 182; --itl: #f9a8d4; } .ca-vl-row.is-rv { --it: 167, 139, 250; --itl: #c4b5fd; }
.ca-vl-row.is-key { --it: 251, 191, 36; --itl: #fcd34d; } .ca-vl-row.is-rib { --it: 251, 146, 60; --itl: #fdba74; } .ca-vl-row.is-fz { --it: 56, 189, 248; --itl: #7dd3fc; }
.ca-vl-row.is-toty { --it: 147, 197, 253; --itl: #bfdbfe; background: linear-gradient(135deg, rgba(30, 58, 138, .55), rgba(10, 26, 69, .35)); }
.ca-vl-ico { flex: none; font-size: 20px; line-height: 1; }
.ca-vl-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ca-vl-txt b { font: 900 13.5px/1.25 Inter, sans-serif; color: var(--itl); }
.ca-vl-txt small { font-size: 12px; line-height: 1.35; color: #cfcfe0; }
@media (hover: hover) { button.ca-vl-row:hover { border-color: rgba(var(--it), .8); } }
/* A Daily reward lasts 24 hours: its own row, dashed, with its time (cast-account.js vaultList) */
.ca-vl-row.is-daily { border-style: dashed; background: rgba(var(--it), .04); }
.ca-vl-row.is-daily small { color: var(--itl); }

/* ---------------- CAST Pass page, slimmed (29 Sep 2026) ----------------
   Double Wildcards leads: each wildcard doubles up on a loop (a second card slides out, x1 turns to x2). Then the
   price, one short tile per other perk, and one line for what's coming */
.ca-pass-dw { position: relative; overflow: hidden; margin: 10px 0 16px; padding: 16px 14px 14px; border-radius: 18px; text-align: center;
  border: 1.5px solid rgba(241, 192, 115, .7); background: radial-gradient(120% 90% at 50% 0%, rgba(241, 192, 115, .22), rgba(241, 192, 115, .04) 60%, rgba(0, 0, 0, 0)), #16131f;
  box-shadow: 0 10px 30px rgba(241, 192, 115, .15); }
.ca-pass-dw-k { font: 900 10.5px/1 Inter, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: #f1c073; }
.ca-pass-dw-t { margin: 6px 0 2px; font: italic 900 30px/1.05 Inter, sans-serif; letter-spacing: -.4px; text-transform: uppercase; color: #fff; }
.ca-pass-dw-s { margin: 0 0 14px; font: 700 13.5px/1.4 Inter, sans-serif; color: #e6dcc8; }
.ca-pass-dw-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.ca-dw { display: grid; justify-items: center; gap: 6px; }
.ca-dw-cards { position: relative; width: 58px; height: 70px; }
.ca-dw-card { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; font-size: 26px; line-height: 1;
  border: 1.5px solid rgba(241, 192, 115, .75); background: linear-gradient(160deg, #2a2233, #1b1726); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.ca-dw-card.is-b { opacity: 0; animation: caDwCopy 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ca-dw-n { position: relative; display: block; height: 22px; width: 44px; font: 900 18px/22px Inter, sans-serif; color: #f1c073; }
.ca-dw-n span { position: absolute; inset: 0; }
.ca-dw-n .is-1 { color: #cfcfe0; animation: caDwOne 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ca-dw-n .is-2 { opacity: 0; animation: caDwTwo 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ca-dw small { font: 800 11px/1.2 Inter, sans-serif; letter-spacing: .4px; text-transform: uppercase; color: #cfcfe0; }
@keyframes caDwCopy { 0%, 22% { opacity: 0; transform: translate(0, 0) rotate(0); } 38%, 88% { opacity: 1; transform: translate(12px, -9px) rotate(8deg); } 100% { opacity: 0; transform: translate(0, 0) rotate(0); } }
@keyframes caDwOne { 0%, 26% { opacity: 1; transform: scale(1); } 34%, 90% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes caDwTwo { 0%, 26% { opacity: 0; transform: scale(.6); } 36% { opacity: 1; transform: scale(1.35); } 44%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) {
  .ca-dw-card.is-b, .ca-dw-n .is-1, .ca-dw-n .is-2 { animation: none; }
  .ca-dw-card.is-b { opacity: 1; transform: translate(12px, -9px) rotate(8deg); }
  .ca-dw-n .is-1 { opacity: 0; } .ca-dw-n .is-2 { opacity: 1; }
}
.ca-pass-dw-vs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; font: 700 12.5px/1.3 Inter, sans-serif; color: var(--ca-muted); }
.ca-pass-dw-vs b { color: #f1c073; font-weight: 900; }
.ca-pass-dw-hard { margin: 8px 0 0; font-size: 11.5px; line-height: 1.35; color: #9a9ab2; }
.ca-pass-tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; }
.ca-pass-tiles li { display: grid; align-content: start; gap: 3px; padding: 11px 12px; border-radius: 13px; border: 1px solid rgba(241, 192, 115, .22); background: rgba(241, 192, 115, .05); }
.ca-pass-tiles li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ca-pass-tiles .ca-pass-ico { font-size: 20px; line-height: 1; }
.ca-pass-tiles b { font: 900 13.5px/1.25 Inter, sans-serif; color: #fff; }
.ca-pass-tiles small { font-size: 12px; line-height: 1.35; color: #cfc8b8; }
.ca-pass-soon { margin: 0 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--ca-muted); text-align: center; }
.ca-pass-soon b { color: #e6dcc8; }

/* The GOAT in the Shop and the Vault (29 Sep 2026): his gold, the same as his card in 1000TRIES */
@keyframes caGoatShine { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.ca-shop-it.is-goat { --it: 241, 192, 115; --itc: #f1c073; --itl: #ffe2a8; --itd: #1a1204; border-color: rgba(241, 192, 115, .75);
  background: radial-gradient(120% 80% at 50% 0%, rgba(241, 192, 115, .2), rgba(241, 192, 115, .03) 65%), #17141d; }
.ca-shop-it.is-goat .ca-shop-big { border-color: #fff1c4; color: #1a1204; box-shadow: 0 0 22px rgba(241, 192, 115, .35);
  background: linear-gradient(135deg, #7a5a12 0%, #f1c073 30%, #fff1c4 50%, #f1c073 70%, #7a5a12 100%); background-size: 200% 100%; animation: caGoatShine 3s linear infinite; }
.ca-shop-it.is-goat .ca-shop-big small { color: #3a2a08; }
.ca-shop-it.is-goat .ca-shop-big em { background: #1a1204; color: #f1c073; }
.ca-vl-row.is-goat { --it: 241, 192, 115; --itl: #ffe2a8; }
@media (prefers-reduced-motion: reduce) { .ca-shop-it.is-goat .ca-shop-big { animation: none; } }
.ca-pass-week { display: block; margin: 2px 0 1px; font: 900 13px/1.2 Inter, sans-serif; color: #86efac; }

/* ---------------- The Dally M promo (30 Sep 2026, js/cast-promo.js) ----------------
   The pop-up: the Team of the Year roll in on Dally M navy cards, the Medal winner last with a gold edge and a
   holographic number (the owner's pick) */
.ca-pm { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 16px; background: rgba(4, 6, 14, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow-y: auto; }
.ca-pm[hidden] { display: none; }
.ca-pm-box { position: relative; width: min(460px, 100%); box-sizing: border-box; padding: 22px 16px 18px; border-radius: 22px; text-align: center; color: #eff6ff; font-family: Inter, sans-serif;
  background: radial-gradient(120% 80% at 50% 0%, #17337c, #0a1230 72%); border: 1.5px solid rgba(191, 219, 254, .5); box-shadow: 0 0 60px rgba(59, 130, 246, .25), 0 24px 60px rgba(0, 0, 0, .6); animation: caPmIn .35s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes caPmIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.ca-pm-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #dbeafe; font-size: 14px; cursor: pointer; }
.ca-pm-kick, .ca-pm-title, .ca-pm-tabs, .ca-pm-sub, .ca-pm-go, .ca-pm-end { animation: caPmUp .5s cubic-bezier(.2, 1, .4, 1) both; }
.ca-pm-kick { animation-delay: .1s; } .ca-pm-title { animation-delay: .22s; } .ca-pm-tabs { animation-delay: .38s; }
.ca-pm-sub { animation-delay: 2.75s; } .ca-pm-go { animation-delay: 3s; } .ca-pm-end { animation-delay: 3.2s; }
@keyframes caPmUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ca-pm-kick { margin: 0 36px 4px; font: 800 11px/1.3 Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #93c5fd; }
.ca-pm-title { margin: 0 0 14px; font: 900 28px/1.1 Inter, sans-serif; letter-spacing: .5px; color: #fff; text-wrap: balance; text-shadow: 0 0 24px rgba(96, 165, 250, .45); }
.ca-pm-grid { display: grid; gap: 6px; margin: 0 0 12px; perspective: 800px; }
.ca-pm-row { display: flex; justify-content: center; gap: 5px; }
@keyframes caPmHolo { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.ca-pm-card { position: relative; overflow: hidden; flex: 0 1 62px; min-width: 0; min-height: 84px; box-sizing: border-box; padding: 5px 4px 6px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #fff;
  background: linear-gradient(160deg, #1e3a8a, #0a1a45 80%); border: 1.5px solid #bfdbfe; box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 10px rgba(147, 197, 253, .25);
  opacity: 0; animation: caPmRoll .5s cubic-bezier(.2, 1.2, .4, 1) calc(var(--d) * 110ms + 600ms) forwards; }
@keyframes caPmRoll { from { opacity: 0; transform: rotateY(90deg) translateY(10px) scale(.8); } to { opacity: 1; transform: none; } }
.ca-pm-card.is-medal { overflow: visible; border-color: #f1c073; box-shadow: 0 0 18px rgba(241, 192, 115, .65); animation: caPmRoll .6s cubic-bezier(.2, 1.4, .4, 1) calc(var(--d) * 110ms + 800ms) forwards; }
/* the Medal winner lands with a gold burst (its card shows outside its edge, so no shine band) */
.ca-pm-card.is-medal::after { display: none; }
.ca-pm-card.is-medal::before { content: ''; position: absolute; inset: -4px; border-radius: 12px; border: 3px solid #f1c073; opacity: 0; pointer-events: none; animation: caPmBurst .9s ease-out calc(var(--d) * 110ms + 1050ms) 1; }
@keyframes caPmBurst { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.ca-pm-card::after { content: ''; position: absolute; top: -50%; left: -120%; width: 60%; height: 200%; transform: rotate(20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); animation: caPmShine 3s ease-in-out calc(var(--d) * 110ms + 900ms) infinite; }
@keyframes caPmShine { 0% { left: -120%; } 45%, 100% { left: 160%; } }
.ca-pm-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 2px; }
.ca-pm-top b { font: 900 10px/1 Inter, sans-serif; color: #bfdbfe; }
.ca-pm-top i { font: 900 8.5px/1 Inter, sans-serif; font-style: normal; padding: 2px 3px; border-radius: 3px; }
.ca-pm-v { font: 900 22px/1 Inter, sans-serif; margin-top: 4px; color: #fff; }
.ca-pm-card.is-medal .ca-pm-v { background: linear-gradient(115deg, #c7d2fe, #f0abfc, #99f6e4, #fde68a, #c7d2fe); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: caPmHolo 4s linear infinite; }
.ca-pm-card.is-medal .ca-pm-top b { color: #f1c073; }
.ca-pm-u { font: 800 8px/1 Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: #93c5fd; }
.ca-pm-n { margin-top: auto; max-width: 100%; overflow: hidden; text-align: center; overflow-wrap: anywhere; font: 900 10.5px/1.05 Inter, sans-serif; }
.ca-pm-medal { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; margin: 0 0 8px; font: 700 13px/1.3 Inter, sans-serif; color: #e2e8f0; opacity: 0; animation: caPmFade .5s ease 2.5s forwards; }
.ca-pm-medal span { font-weight: 800; color: #f1c073; }
.ca-pm-medal b { font-weight: 900; color: #fff; }
@keyframes caPmFade { to { opacity: 1; } }
.ca-pm-sub { margin: 0 auto 14px; max-width: 36ch; font: 600 13.5px/1.45 Inter, sans-serif; color: #dbeafe; text-wrap: pretty; }
.ca-pm-go { display: block; width: 100%; max-width: 320px; margin: 0 auto; padding: 14px 20px; border: 0; border-radius: 999px; cursor: pointer; font: 900 16px/1 Inter, sans-serif; color: #0a1a45;
  background: linear-gradient(135deg, #bfdbfe, #eff6ff 50%, #bfdbfe); box-shadow: 0 0 24px rgba(147, 197, 253, .45); }
.ca-pm-end { margin: 10px 0 0; font: 700 11.5px/1.3 Inter, sans-serif; color: #93c5fd; }
/* 27-0: the Team of the Year Pick under the message (a line and its price, or the Picks you have), and a CAST Pass
   holder's thank-you: the Pass gold, on top and around their free Pick (1 Oct 2026) */
.ca-pm-thx, .ca-pm-gift, .ca-pm-pick { animation: caPmUp .5s cubic-bezier(.2, 1, .4, 1) both; }
.ca-pm-thx { animation-delay: .05s; } .ca-pm-gift, .ca-pm-pick { animation-delay: 2.88s; }
.ca-pm-thx { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin: 0 38px 10px; font: 900 13.5px/1.25 Inter, sans-serif; color: #f1c073; text-wrap: balance; }
.ca-pm-thx .ca-ps { margin: 0; cursor: default; }
.ca-pm-box.is-thanks { border-color: rgba(241, 192, 115, .7); box-shadow: 0 0 60px rgba(241, 192, 115, .2), 0 24px 60px rgba(0, 0, 0, .6); }
.ca-pm-gift { margin: -4px auto 14px; max-width: 40ch; padding: 10px 12px; border-radius: 14px; border: 1.5px solid rgba(241, 192, 115, .65); background: linear-gradient(160deg, rgba(241, 192, 115, .16), rgba(241, 192, 115, .04));
  font: 600 13px/1.45 Inter, sans-serif; color: #fdf3dc; text-wrap: pretty; }
.ca-pm-gift p { margin: 0; } .ca-pm-gift p + p { margin-top: 6px; color: #f1c073; font-weight: 800; }
.ca-pm-gift b { color: #fff; font-weight: 800; }
.ca-pm-pick { display: flex; align-items: center; gap: 10px; margin: -4px auto 14px; max-width: 380px; padding: 9px 10px 9px 12px; border-radius: 14px; text-align: left;
  border: 1.5px solid rgba(191, 219, 254, .55); background: linear-gradient(135deg, rgba(30, 58, 138, .6), rgba(10, 26, 69, .4)); }
.ca-pm-pick-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ca-pm-pick-t b { font: 800 13px/1.25 Inter, sans-serif; color: #fff; text-wrap: balance; }
.ca-pm-pick-t small { font: 600 11.5px/1.3 Inter, sans-serif; color: #bfdbfe; text-wrap: pretty; }
.ca-pm-pick-go { flex: none; min-width: 64px; padding: 10px 12px; border: 0; border-radius: 999px; cursor: pointer; font: 900 13px/1 Inter, sans-serif; color: #0a1a45;
  background: linear-gradient(135deg, #bfdbfe, #eff6ff 50%, #bfdbfe); box-shadow: 0 0 14px rgba(147, 197, 253, .4); }
.ca-pm-pick.is-have { justify-content: center; gap: 8px; font: 700 13px/1.35 Inter, sans-serif; color: #dbeafe; text-wrap: pretty; }
.ca-pm-pick.is-have b { color: #fff; }
@media (prefers-reduced-motion: reduce) { .ca-pm-box, .ca-pm-card, .ca-pm-card::after, .ca-pm-card::before, .ca-pm-medal, .ca-pm-card.is-medal .ca-pm-v, .ca-pm-kick, .ca-pm-title, .ca-pm-tabs, .ca-pm-sub, .ca-pm-go, .ca-pm-end,
  .ca-pm-thx, .ca-pm-gift, .ca-pm-pick { animation: none !important; opacity: 1; } .ca-pm-card::before { opacity: 0; } }
/* 1000TRIES: the NRL and NRLW Teams of the Year on two tabs */
.ca-pm-tabs { display: inline-flex; gap: 4px; margin: -4px 0 12px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(191, 219, 254, .3); }
.ca-pm-tab { padding: 7px 18px; border: 0; border-radius: 999px; background: none; color: #bfdbfe; font: 800 12.5px/1 Inter, sans-serif; cursor: pointer; }
.ca-pm-tab.is-on { background: linear-gradient(135deg, #bfdbfe, #eff6ff 50%, #bfdbfe); color: #0a1a45; }
/* Its card in the home spot, which opens the pop-up again */
.ca-home-spot > [data-cast-promo], .ca-home-spot > [data-cast-wild] { display: flex; }
.ca-pm-spot { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid rgba(191, 219, 254, .6);
  background: linear-gradient(135deg, rgba(30, 58, 138, .55), rgba(10, 26, 69, .35)); color: #eff6ff; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-pm-spot-cards { position: relative; flex: none; width: 48px; height: 40px; }
.ca-pm-spot-cards i { position: absolute; top: 4px; width: 22px; height: 30px; border-radius: 5px; background: linear-gradient(160deg, #1e3a8a, #0a1a45); border: 1.5px solid #bfdbfe; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.ca-pm-spot-cards i:nth-child(1) { left: 0; transform: rotate(-12deg); }
.ca-pm-spot-cards i:nth-child(2) { left: 12px; transform: rotate(-2deg); }
.ca-pm-spot-cards i:nth-child(3) { left: 24px; transform: rotate(10deg); }
.ca-pm-spot-cards i.is-medal { border-color: #f1c073; box-shadow: 0 0 8px rgba(241, 192, 115, .6); }
.ca-pm-spot-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ca-pm-spot-txt b { font: 800 13.5px/1.25 Inter, sans-serif; color: #fff; }
.ca-pm-spot-txt small { font: 700 11.5px/1.3 Inter, sans-serif; color: #bfdbfe; text-wrap: pretty; }
.ca-pm-spot-go { flex: none; color: #dbeafe; font-size: 20px; line-height: 1; }

/* ---------------- The wildcard card in the home spot (30 Sep 2026) ----------------
   The item as it is in the Shop, in its own colour, with the price on the buy button */
.ca-wild { --it: 45, 212, 191; --itc: #2dd4bf; --itl: #5eead4; --itd: #04342c; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border-radius: 14px;
  border: 1.5px solid rgba(var(--it), .6); background: linear-gradient(135deg, rgba(var(--it), .16), rgba(var(--it), .04)); color: #f0f0f5; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-wild.is-rm { --it: 244, 114, 182; --itc: #f472b6; --itl: #f9a8d4; --itd: #3b0a24; }
.ca-wild.is-rib { --it: 251, 146, 60; --itc: #fb923c; --itl: #fdba74; --itd: #431407; }
.ca-wild.is-goat { --it: 241, 192, 115; --itc: #f1c073; --itl: #ffe2a8; --itd: #1a1204; }
/* The Team of the Year Pick (27-0, the Dally M promo): Dally M navy with an icy edge, like its cards */
.ca-wild.is-toty { --it: 147, 197, 253; --itc: #bfdbfe; --itl: #bfdbfe; --itd: #0a1a45; border-color: rgba(191, 219, 254, .65); background: linear-gradient(135deg, rgba(30, 58, 138, .6), rgba(10, 26, 69, .4)); }
.ca-wild.is-toty .ca-wild-ico { background: linear-gradient(160deg, #1e3a8a, #0a1a45); box-shadow: inset 0 0 0 1.5px #bfdbfe; }
.ca-wild.is-toty .ca-wild-buy { background: linear-gradient(135deg, #bfdbfe, #eff6ff 50%, #bfdbfe); }
.ca-wild-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(var(--it), .18); font-size: 20px; }
.ca-wild-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ca-wild-txt em { font: 900 9.5px/1.2 Inter, sans-serif; font-style: normal; letter-spacing: 1px; text-transform: uppercase; color: var(--itl); }
.ca-wild-txt b { font: 800 13.5px/1.25 Inter, sans-serif; color: #fff; text-wrap: balance; }
.ca-wild-txt small { font: 600 11.5px/1.3 Inter, sans-serif; color: #c9c9d9; text-wrap: pretty; }
.ca-wild-buy { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 8px 10px; border-radius: 12px; background: var(--itc); color: var(--itd); box-shadow: 0 0 14px rgba(var(--it), .35); }
.ca-wild-buy b { font: 900 13px/1.1 Inter, sans-serif; white-space: nowrap; }
.ca-wild-buy i { font: 800 10.5px/1 Inter, sans-serif; font-style: normal; letter-spacing: .5px; text-transform: uppercase; }
.ca-wild.is-goat .ca-wild-buy { background: linear-gradient(135deg, #7a5a12 0%, #f1c073 30%, #fff1c4 50%, #f1c073 70%, #7a5a12 100%); }

/* The Streak Restore (2 Oct 2026): a one-time offer when a streak of 3 days or more breaks. Streak orange (not gold,
   which is CAST Pass's), the streak's length in the badge, and a quiet "No Thanks" under the one pack */
.ca-rr.is-rs .ca-rr-panel { border-color: rgba(251, 146, 60, .55); }
.ca-rr.is-rs .ca-rr-kicker, .ca-rr.is-rs .ca-rr-pack small strong { color: #fdba74; }
.ca-rr.is-rs .ca-rr-badge { border-color: #fb923c !important; box-shadow: 0 0 30px rgba(249, 115, 22, .45) !important; background: radial-gradient(circle at 50% 35%, rgba(251, 146, 60, .35), rgba(24, 12, 6, .9) 70%) !important; }
.ca-rs-badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1; }
.ca-rs-badge span { font-size: 22px; }
.ca-rs-badge b { font: 900 20px/1 'Inter', sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.ca-rr.is-rs .ca-rr-hook { border-color: rgba(251, 146, 60, .45); background: rgba(249, 115, 22, .1); color: #fff; }
.ca-rr.is-rs .ca-rr-pack { border-color: #fb923c; background: linear-gradient(160deg, rgba(249, 115, 22, .3), rgba(249, 115, 22, .06)); box-shadow: 0 0 22px rgba(249, 115, 22, .3); }
.ca-rr.is-rs .ca-rr-pack em { background: #fb923c; color: #1c0d03; }
@media (hover: hover) { .ca-rr.is-rs .ca-rr-pack:hover { border-color: #fed7aa; } }
.ca-rs-no { margin-top: 10px; }
/* The Shop's Streak Freeze when one is already held (one at a time, no count) */
.ca-shop-ready { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(56, 189, 248, .45); background: rgba(56, 189, 248, .1); font-weight: 700; font-size: 13px; line-height: 1.4; color: #e0f2fe; text-wrap: pretty; }
/* The Team of the Year's last 24 hours (2 Oct 2026): a banner above the home cards with a live clock, in the promo's
   Dally M navy with an icy edge; the final hour turns it red. Also the Shop row's clock and the pop-up's Last Chance */
.ca-tl-box { margin: 0 0 10px; }
.ca-tl-box[hidden] { display: none; }
.ca-tl[data-tl] { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* a tap shows the team (9 Oct 2026) */
@media (hover: hover) { .ca-tl[data-tl]:hover { filter: brightness(1.06); } }
.ca-tl { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid #bfdbfe; color: #eff6ff;
  background: linear-gradient(135deg, #1e3a8a, #0a1a45 80%); box-shadow: 0 0 18px rgba(96, 165, 250, .3); text-align: left; }
.ca-tl-ico { font-size: 22px; line-height: 1; flex: none; }
.ca-tl-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ca-tl-txt b { font: 900 13.5px/1.2 Inter, sans-serif; text-wrap: balance; }
.ca-tl-txt small { font: 700 12px/1.3 Inter, sans-serif; color: #dbeafe; }
.ca-tl-clock { font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.ca-tl-go { flex: none; border: 0; border-radius: 999px; padding: 9px 14px; font: 900 12.5px/1 Inter, sans-serif; color: #0a1a45; cursor: pointer;
  background: linear-gradient(135deg, #bfdbfe, #eff6ff 50%, #bfdbfe); white-space: nowrap; }
.ca-tl.is-final { border-color: #f87171; background: linear-gradient(135deg, #7f1d1d, #2a0a0a 80%); box-shadow: 0 0 22px rgba(248, 113, 113, .4); animation: caTlPulse 2s ease-in-out infinite; }
.ca-tl.is-final .ca-tl-txt small { color: #fecaca; }
.ca-tl.is-final .ca-tl-go { background: #fff; color: #7f1d1d; }
@keyframes caTlPulse { 50% { box-shadow: 0 0 30px rgba(248, 113, 113, .65); } }
@media (prefers-reduced-motion: reduce) { .ca-tl.is-final { animation: none; } }
.ca-shop-fine.ca-shop-last { color: #bfdbfe; font-weight: 800; }
.ca-shop-fine.ca-shop-last span, .ca-pm-kick.is-last span { font-variant-numeric: tabular-nums; color: #fff; }
.ca-shop-fine.ca-shop-last.is-final { color: #fca5a5; }
.ca-pm-kick.is-last.is-final { color: #fca5a5; }
/* The CAST Player of the Week (2 Oct 2026; the Fan of the Week until 5 Oct): a card in the home spot in their team's
   colours (--t1, --t2) with a trophy-gold edge, glow and kicker (gold like the Premiers cards: the owner's call, 5 Oct).
   The whole card is a button that opens their numbers */
[data-cast-fan][hidden] { display: none; }
.ca-fan-spot { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 8px 10px 12px; border-radius: 14px; border: 1.5px solid #f6d27a; color: #fff;
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--t1, #1e293b) 85%, #000), color-mix(in srgb, var(--t1, #1e293b) 45%, #0b0b12));
  box-shadow: 0 0 0 1px rgba(246, 210, 122, .16), 0 0 18px rgba(246, 210, 122, .3); transition: transform .12s ease, box-shadow .2s ease; }
.ca-fan-spot:active { transform: scale(.985); }
@media (hover: hover) { .ca-fan-spot:hover { box-shadow: 0 0 0 1px rgba(246, 210, 122, .3), 0 0 26px rgba(246, 210, 122, .48); } }
.ca-fan-spot:focus-visible { outline: 2px solid #fff1c1; outline-offset: 2px; }
.ca-fan-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 22px; background: rgba(246, 210, 122, .14); box-shadow: inset 0 0 0 1.5px #f6d27a; }
.ca-fan-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ca-fan-txt em { font: 800 10.5px/1.2 Inter, sans-serif; font-style: normal; letter-spacing: .8px; text-transform: uppercase; color: #ffd978; }
.ca-fan-txt b { font: 900 17px/1.15 Inter, sans-serif; overflow-wrap: anywhere; }
.ca-fan-txt small { font: 700 12px/1.3 Inter, sans-serif; color: #fff6dc; text-wrap: balance; }
.ca-fan-go { flex: none; font: 900 28px/1 Inter, sans-serif; color: #ffd978; padding: 0 4px 3px; }
/* Its pop-up: in their team's colours (--t1, --t2; --tg is the glow, their second colour when the first is light): a
   glow and stripes across the top, the trophy on their colours, their club under their name. Their numbers in tiles
   (two across on a phone; the best scores open their teams), then the call to keep playing */
.ca-fanpop.has-team .ca-panel { background: radial-gradient(125% 48% at 50% 0%, color-mix(in srgb, var(--tg) 72%, transparent), transparent 74%),
  linear-gradient(180deg, color-mix(in srgb, var(--tg) 34%, #0f0d1d), #0f0d1d 62%); }
.ca-fanpop.has-team .ca-panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none;
  background: linear-gradient(90deg, var(--t1) 0 30%, var(--t2) 30% 40%, var(--t1) 40% 60%, var(--t2) 60% 70%, var(--t1) 70%); }
.ca-fanpop.has-team .ca-fan-badge { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tg) 72%, #fff 14%), var(--tg));
  border-color: #f6d27a; box-shadow: 0 0 0 3.5px var(--t2), 0 0 26px rgba(246, 210, 122, .45); }
.ca-fan-kick { color: #ffd978; }
.ca-fan-team { margin: 2px 0 10px; }
.ca-fan-team-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 13px 4px 4px; border-radius: 999px; font: 800 13px/1.2 Inter, sans-serif; color: #fff;
  background: color-mix(in srgb, var(--tg, #1e293b) 70%, #000); box-shadow: inset 0 0 0 1.5px var(--t2, rgba(255, 255, 255, .3)); }
.ca-fan-team-pill .ca-lb-club { flex: none; margin: 0; }
.ca-fan-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 16px; text-align: center; }
@media (min-width: 560px) { .ca-fan-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ca-fan-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; margin: 0; padding: 11px 8px 10px; border-radius: 12px;
  border: 1px solid rgba(246, 210, 122, .38); background: linear-gradient(160deg, rgba(246, 210, 122, .12), rgba(255, 255, 255, .02)); color: #fff; font: inherit; text-align: center; }
.ca-fanpop.has-team .ca-fan-tile { background: linear-gradient(160deg, color-mix(in srgb, var(--tg) 36%, transparent), rgba(255, 255, 255, .02)); }
.ca-fan-tile.is-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, border-color .2s ease; }
.ca-fan-tile.is-tap:active { transform: scale(.97); }
@media (hover: hover) { .ca-fan-tile.is-tap:hover { border-color: #ffd978; } }
.ca-fan-tile.is-tap:focus-visible { outline: 2px solid #fff1c1; outline-offset: 2px; }
.ca-fan-tile em { margin-top: 2px; font: 800 11px/1.2 Inter, sans-serif; font-style: normal; color: #ffd978; }
.ca-fan-tile b { font: 900 22px/1.1 Inter, sans-serif; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ca-fan-tile.is-name b { font-size: 15px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
.ca-fan-tile small { font: 800 10.5px/1.2 Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: #ffd978; }
.ca-fan-tile i { font: 600 11.5px/1.3 Inter, sans-serif; font-style: normal; color: var(--ca-muted); text-wrap: balance; }
.ca-fan-cta { margin: 0 0 12px; font-weight: 800; font-size: 14.5px; line-height: 1.45; color: #fff; text-wrap: balance; }
/* The trophy by their name on the boards and friends lists for the week */
.ca-potw-b { display: inline-block; margin-left: 4px; font-size: .9em; line-height: 1; vertical-align: -1px; }
/* Admin > Fans */
.ca-adm-fan { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.ca-adm-fan.is-on { border-color: rgba(52, 211, 153, .55); background: rgba(16, 185, 129, .08); }
.ca-adm-fan-i { font-size: 22px; line-height: 1; }
.ca-adm-fan .ca-adm-pn { flex: 1; min-width: 0; }
ol.ca-adm-fans { counter-reset: fan; padding-left: 0; }
ol.ca-adm-fans > li { counter-increment: fan; }
ol.ca-adm-fans > li::before { content: counter(fan); flex: none; width: 1.6em; text-align: right; font: 900 12px/1 Inter, sans-serif; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.ca-adm-fanask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
/* In-app browsers (2 Oct 2026): Instagram, Facebook and TikTok's own browsers block Google and Apple sign-in. A slim
   banner above the home cards, the steps in the sign-in card, and the how-to with an arrow at the app's menu. Slate, not
   gold (that's CAST Pass's) */
.ca-ia-box { margin: 0 0 10px; }
.ca-ia-box[hidden] { display: none; }
.ca-ia { display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .26); color: #f8fafc;
  background: linear-gradient(135deg, #273449, #111827 80%); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); text-align: left; }
.ca-ia-ico { font-size: 22px; line-height: 1; flex: none; }
.ca-ia-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ca-ia-txt b { font: 900 13.5px/1.2 Inter, sans-serif; text-wrap: balance; }
.ca-ia-txt small { font: 700 12px/1.3 Inter, sans-serif; color: #cbd5e1; text-wrap: pretty; }
.ca-ia-go { flex: none; border: 0; border-radius: 999px; padding: 9px 14px; font: 900 12.5px/1 Inter, sans-serif; color: #111827; background: #fff; cursor: pointer; white-space: nowrap; }
.ca-ia-x { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: #94a3b8; font-size: 13px; cursor: pointer; }
@media (hover: hover) { .ca-ia-go:hover { background: #e2e8f0; } .ca-ia-x:hover { color: #fff; } }
.ca-ia-steps { list-style: none; counter-reset: iastep; margin: 14px 0 4px; padding: 0; display: grid; gap: 8px; text-align: left; }
.ca-ia-steps li { counter-increment: iastep; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ca-line, #2a2a44);
  background: rgba(255, 255, 255, .04); font: 600 14px/1.35 Inter, sans-serif; color: var(--ca-text, #f0f0f5); text-wrap: pretty; }
.ca-ia-steps li::before { content: counter(iastep); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: #111827; font: 900 13px/1 Inter, sans-serif; }
.ca-ia-steps b { font-weight: 900; color: #fff; }
.ca-ia-dots { display: inline-block; padding: 1px 7px; border-radius: 8px; background: rgba(255, 255, 255, .14); letter-spacing: 1px; }
.ca-ia-card .ca-ia-steps { margin-bottom: 6px; }
/* The arrow at the app's menu button (the top right of its browser, just above the page) */
.ca-ia-point { position: fixed; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 6px); right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  pointer-events: none; color: #fff; animation: caIaBob 1.1s ease-in-out infinite; }
.ca-ia-point i { font: 900 34px/1 Inter, sans-serif; font-style: normal; margin-right: 6px; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.ca-ia-point span { padding: 7px 11px; border-radius: 999px; background: #fff; color: #111827; font: 900 13px/1 Inter, sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); white-space: nowrap; }
@keyframes caIaBob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ca-ia-point { animation: none; } }
/* Admin > Analytics: the Sign-Up Funnel (GA event under each name, share of the row above) */
.ca-adm-funnel li > span small { display: block; margin-top: 1px; font: 600 10.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255, 255, 255, .45); }
.ca-adm-funnel li > b em { margin-left: 8px; font-style: normal; font-weight: 800; font-size: .82em; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.ca-ia-url { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; font: 600 16px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; } /* 16px: iPhone zooms in on smaller */
/* The sign-up steps (2 Oct 2026): one question per screen, a step bar (white, not gold: gold is CAST Pass's) and Back.
   Compact club tiles so the grid and its button fit a phone */
.ca-step-top { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: -4px 48px 12px 0; }
.ca-step-back { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ca-line); background: rgba(255, 255, 255, .05); color: #e5e5f0; font: 800 13px/1 Inter, sans-serif; }
@media (hover: hover) { .ca-step-back:hover { border-color: #fff; color: #fff; } }
.ca-stepbar { flex: 1; display: flex; gap: 5px; }
.ca-stepbar i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.ca-stepbar i.is-done { background: rgba(255, 255, 255, .5); }
.ca-stepbar i.is-on { background: #fff; }
.ca-step-head .ca-title { margin-bottom: 6px; text-wrap: balance; }
.ca-step-head .ca-text { margin-bottom: 14px; text-wrap: balance; }
.ca-setup-step .ca-teams { gap: 7px; }
@media (min-width: 360px) { .ca-setup-step .ca-teams { grid-template-columns: repeat(4, 1fr); } } /* 5 rows: fits under Safari's bars */
.ca-setup-step .ca-team { min-height: 50px; }
.ca-team.ca-team-none { --t1: #23233a; --t2: #3f3f5c; border: 1.5px dashed rgba(255, 255, 255, .28); opacity: .95; }
.ca-team.ca-team-none b { font-size: 16px; text-shadow: none; }
.ca-team.ca-team-none.is-on { border-style: solid; border-color: var(--ca-gold); }
.ca-step-chips { justify-content: center; }
.ca-step-chips .ca-chip { min-height: 44px; padding-inline: 16px; font-size: 14px; }
.ca-setup-step .ca-mail { margin-top: 18px; }
.ca-setup-step .ca-name-step .ca-field { min-height: 54px; font-size: 20px; }
.ca-btn[aria-disabled="true"] { opacity: .5; }
/* Every sign-up step in one sheet height, with the button pinned in the same place on each (the owner: the Continue bar
   must stay put). Taller than the screen (small phones): the step scrolls and the button stays stuck to the bottom */
.ca-panel.is-steps { display: flex; flex-direction: column; height: min(620px, calc(100vh - 24px)); height: min(620px, calc(100dvh - 24px - env(safe-area-inset-top, 0px))); }
.ca-panel.is-steps > .ca-body { flex: 1 0 auto; display: flex; flex-direction: column; }
.ca-panel.is-steps > .ca-body > .ca-setup-step { flex: 1 0 auto; display: flex; flex-direction: column; }
.ca-setup-step > .ca-sticky-actions { margin-top: auto; }
.ca-panel.is-steps > .ca-body > .ca-center:only-child { margin-block: auto; } /* Saving: the spinner in the middle */
@media (min-width: 720px) { .ca-panel.is-steps { height: min(640px, calc(100vh - 48px)); height: min(640px, calc(100dvh - 48px - env(safe-area-inset-top, 0px))); } }
/* Invite a Mate (2 Oct 2026): the free Rerolls' teal (gold is CAST Pass's), on the home banner, the welcome screen and
   Friends */
[data-cast-invite][hidden] { display: none; }
.ca-inv-spot, .ca-inv-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-align: left; color: #fff;
  border: 1.5px solid rgba(45, 212, 191, .55); background: linear-gradient(135deg, #0f3d37, #0b1f24 80%); box-shadow: 0 0 18px rgba(45, 212, 191, .18); }
.ca-inv-spot { cursor: pointer; }
.ca-inv-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 22px; background: rgba(45, 212, 191, .16); box-shadow: inset 0 0 0 1.5px rgba(94, 234, 212, .6); }
.ca-inv-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ca-inv-txt em { font: 800 10.5px/1.2 Inter, sans-serif; font-style: normal; letter-spacing: .8px; text-transform: uppercase; color: #5eead4; }
.ca-inv-txt b { font: 900 15px/1.2 Inter, sans-serif; text-wrap: balance; }
.ca-inv-txt small { font: 700 12px/1.3 Inter, sans-serif; color: rgba(255, 255, 255, .78); text-wrap: pretty; }
.ca-inv-go { flex: none; border: 0; border-radius: 999px; padding: 9px 15px; font: 900 12.5px/1 Inter, sans-serif; color: #04342c; background: #5eead4; cursor: pointer; white-space: nowrap; }
@media (hover: hover) { .ca-inv-go:hover { background: #99f6e4; } }
.ca-inv-card { margin: 14px 0 4px; }
.ca-soc-invite.is-reward { border-color: rgba(45, 212, 191, .55); background: linear-gradient(135deg, rgba(45, 212, 191, .16), rgba(45, 212, 191, .04)); }
.ca-soc-invite.is-reward .ca-inv-h { color: #5eead4; font-size: 15px; text-wrap: balance; }
.ca-soc-invite .ca-ref-line { color: #5eead4; }
.ca-soc-invite.is-reward .ca-btn-primary { background: #5eead4; border-color: #5eead4; color: #04342c; }
.ca-soc-invite.is-reward .ca-btn-ghost { color: #5eead4; border-color: rgba(94, 234, 212, .7); }
@media (hover: hover) { .ca-soc-invite.is-reward .ca-btn-ghost:hover { background: #5eead4; color: #04342c; } }

/* ---------------- The Grand Final promo, 2026 Premiers (4 Oct 2026, js/cast-promo.js; the owner's calls) ----------------
   A premier in his club's colours (--pc, --pc2 and --pct, the text on --pc2, set on the element) with a trophy-gold foil
   edge and a moving shine (the owner's call, 2 Oct 2026: gold, like proper winners, not silver like the rating cards);
   the medal winner's edge is holographic, with the holographic number. The pop-up, its home card,
   the last 24 hours banner, the Premiers Pick (its payment pop-up, the Shop, the Vault and the home wildcard card) */
.ca-pm-box.is-prem { background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .1), transparent 60%), linear-gradient(180deg, var(--pc, #1a1a2e), #05070d 80%);
  border-color: rgba(246, 210, 122, .6); box-shadow: 0 0 60px rgba(246, 210, 122, .16), 0 24px 60px rgba(0, 0, 0, .6); }
.ca-pm-box.is-prem .ca-pm-kick, .ca-pm-box.is-prem .ca-pm-end, .ca-pm-box.is-prem .ca-pm-u { color: #ffd978; }
.ca-pm-box.is-prem .ca-pm-title { margin-bottom: 8px; text-shadow: 0 0 24px rgba(246, 210, 122, .5); }
.ca-pm-box.is-prem .ca-pm-sub { color: #fff6dc; }
.ca-pm-club { margin: 0 0 12px; animation: caPmUp .5s cubic-bezier(.2, 1, .4, 1) .3s both; }
.ca-pm-club span { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--pc2, #fff); color: var(--pct, #111); font: 900 12.5px/1.2 Inter, sans-serif; letter-spacing: .4px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55), 0 4px 14px rgba(0, 0, 0, .4); }
.ca-pm-card.is-prem { border: 1.5px solid transparent; box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 10px rgba(246, 210, 122, .28);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .42)) padding-box, linear-gradient(var(--pc, #1a1a2e), var(--pc, #1a1a2e)) padding-box,
    linear-gradient(135deg, #8a5a14, #f6d27a 30%, #fff1c1 48%, #d4a23c 66%, #8a5a14) border-box; }
.ca-pm-card.is-prem .ca-pm-top b { color: #ffd978; }
.ca-pm-mk { display: inline-block; margin-left: 2px; white-space: nowrap; font-size: 9.5px; }
.ca-pm-card.is-prem.is-medal { box-shadow: 0 0 18px rgba(240, 171, 252, .6), 0 0 8px rgba(153, 246, 228, .4);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .42)) padding-box, linear-gradient(var(--pc, #1a1a2e), var(--pc, #1a1a2e)) padding-box,
    linear-gradient(135deg, #c7d2fe, #f0abfc 30%, #99f6e4 55%, #fde68a 80%, #c7d2fe) border-box; }
.ca-pm-card.is-prem.is-medal .ca-pm-top b { color: #f5d0fe; }
.ca-pm-bench { margin: 4px 0 -2px; font: 800 10px/1.2 Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #f6d27a; opacity: 0; animation: caPmFade .4s ease 1.9s forwards; }
.ca-pm-row.is-bench .ca-pm-card { flex-basis: 56px; min-height: 76px; }
.ca-pm-box.is-prem .ca-pm-go, .ca-pm-box.is-prem .ca-pm-pick-go, .ca-pm-box.is-prem .ca-pm-tab.is-on { background: linear-gradient(135deg, #d4a23c, #fff1c1 50%, #d4a23c); color: #1a1204; box-shadow: 0 0 22px rgba(246, 210, 122, .35); }
.ca-pm-box.is-prem .ca-pm-tabs { border-color: rgba(246, 210, 122, .35); }
.ca-pm-box.is-prem .ca-pm-tab { color: #ffd978; }
.ca-pm-box.is-prem .ca-pm-pick { border-color: rgba(246, 210, 122, .5); background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); }
.ca-pm-box.is-prem .ca-pm-pick-t small, .ca-pm-box.is-prem .ca-pm-pick.is-have { color: #ffd978; }
.ca-pm-box.is-prem .ca-pm-x { color: #ffd978; }
/* 17 cards: the message waits for the bench and the medal winner */
.ca-pm-box.is-prem .ca-pm-medal { animation-delay: 2.9s; } .ca-pm-box.is-prem .ca-pm-sub { animation-delay: 3.15s; }
.ca-pm-box.is-prem .ca-pm-gift, .ca-pm-box.is-prem .ca-pm-pick { animation-delay: 3.28s; } .ca-pm-box.is-prem .ca-pm-go { animation-delay: 3.4s; } .ca-pm-box.is-prem .ca-pm-end { animation-delay: 3.6s; }
@media (prefers-reduced-motion: reduce) { .ca-pm-club, .ca-pm-bench { animation: none !important; opacity: 1; } }
/* Its card in the home spot */
.ca-pm-spot.is-prem { border-color: rgba(246, 210, 122, .65); background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .35)), var(--pc, #1a1a2e); }
.ca-pm-spot.is-prem .ca-pm-spot-cards i { border-color: #ffd978; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .3)), var(--pc, #1a1a2e); }
.ca-pm-spot.is-prem .ca-pm-spot-cards i.is-medal { border-color: #f0abfc; box-shadow: 0 0 8px rgba(240, 171, 252, .6); }
.ca-pm-spot.is-prem .ca-pm-spot-txt small { color: #ffd978; }
/* The last 24 hours banner, in gold */
.ca-tl.is-prem:not(.is-final) { border-color: #ffd978; background: linear-gradient(135deg, #3a2a0e, #0f0b04 80%); box-shadow: 0 0 18px rgba(246, 210, 122, .22); }
.ca-tl.is-prem:not(.is-final) .ca-tl-txt small { color: #ffd978; }
.ca-tl.is-prem:not(.is-final) .ca-tl-go { background: linear-gradient(135deg, #d4a23c, #fff1c1 50%, #d4a23c); color: #1a1204; }
/* The Premiers Pick: its payment pop-up and three cards, the Shop, the Vault and the home wildcard card, in trophy gold */
.ca-rr.is-prem .ca-rr-panel { background: radial-gradient(120% 70% at 50% 0%, #3a2a0e, #0f0b04 72%); border-color: rgba(246, 210, 122, .5); }
.ca-rr.is-prem .ca-rr-kicker, .ca-rr.is-prem .ca-rr-pack small strong { color: #ffd978; }
.ca-rr.is-prem .ca-rr-badge { border-color: #ffd978 !important; box-shadow: 0 0 26px rgba(246, 210, 122, .35) !important; background: linear-gradient(160deg, #4a3512, #120d05) !important; }
.ca-rr.is-prem .ca-rr-hook { border-color: rgba(246, 210, 122, .45); background: rgba(246, 210, 122, .08); color: #fff1c1; }
.ca-rr.is-prem .ca-rr-pack { border-color: rgba(246, 210, 122, .35); background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); }
.ca-rr.is-prem .ca-rr-pack.is-best { border-color: #ffd978; background: linear-gradient(160deg, rgba(246, 210, 122, .22), rgba(255, 255, 255, .04)); box-shadow: 0 0 22px rgba(246, 210, 122, .25); }
.ca-rr.is-prem .ca-rr-pack em { background: #ffd978; color: #1a1204; }
.ca-rr.is-prem .ca-rr-pack em.is-quick { background: #fff; color: #111; }
.ca-rr.is-prem .ca-rr-save { background: rgba(246, 210, 122, .16); color: #ffd978; }
@media (hover: hover) { .ca-rr.is-prem .ca-rr-pack:hover { border-color: #fff; } }
.ca-rr-tc.is-prem { border: 1.5px solid transparent; box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 12px rgba(246, 210, 122, .28);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .42)) padding-box, linear-gradient(var(--pc, #1a1a2e), var(--pc, #1a1a2e)) padding-box,
    linear-gradient(135deg, #8a5a14, #f6d27a 30%, #fff1c1 48%, #d4a23c 66%, #8a5a14) border-box; }
.ca-rr-tc.is-prem .ca-rr-tc-top b, .ca-rr-tc.is-prem .ca-rr-tc-t { color: #ffd978; }
.ca-rr-tc.is-prem .ca-rr-tc-t { white-space: normal; text-wrap: balance; line-height: 1.15; } /* "Clive Churchill Medal" on two lines */
.ca-rr-tc.is-prem.is-medal { box-shadow: 0 0 20px rgba(240, 171, 252, .55), 0 6px 16px rgba(0, 0, 0, .5);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .42)) padding-box, linear-gradient(var(--pc, #1a1a2e), var(--pc, #1a1a2e)) padding-box,
    linear-gradient(135deg, #c7d2fe, #f0abfc 30%, #99f6e4 55%, #fde68a 80%, #c7d2fe) border-box; }
.ca-rr-tc.is-prem.is-medal .ca-rr-tc-top b, .ca-rr-tc.is-prem.is-medal .ca-rr-tc-t { color: #f5d0fe; }
.ca-shop-it.is-prem { --it: 226, 232, 240; --itc: #ffd978; --itl: #fff1c1; --itd: #1a1204; border-color: rgba(246, 210, 122, .5); background: radial-gradient(120% 90% at 50% 0%, #3a2a0e, #0f0b04 75%); }
.ca-vl-chip.is-prem { --it: 226, 232, 240; --itl: #fff1c1; }
.ca-vl-row.is-prem { --it: 226, 232, 240; --itl: #fff1c1; background: linear-gradient(135deg, rgba(74, 53, 18, .7), rgba(15, 11, 4, .5)); }
.ca-wild.is-prem { --it: 226, 232, 240; --itc: #ffd978; --itl: #fff1c1; --itd: #1a1204; border-color: rgba(246, 210, 122, .65); background: linear-gradient(135deg, rgba(74, 53, 18, .75), rgba(15, 11, 4, .55)); }
.ca-wild.is-prem .ca-wild-ico { background: linear-gradient(160deg, #4a3512, #120d05); box-shadow: inset 0 0 0 1.5px #ffd978; }
.ca-wild.is-prem .ca-wild-buy { background: linear-gradient(135deg, #d4a23c, #fff1c1 50%, #d4a23c); }

.ca-pm-card.is-prem.is-medal::before { border-color: #f0abfc; }
.ca-pm-box.is-prem .ca-pm-medal span { color: #ffd978; }

/* The home page logo (4 Oct 2026, the owner's call): it glides in along its own speed lines, then a light glint crosses
   it, cut to the logo's exact shape (a mask made from the same image), so the artwork itself never changes. The glint
   passes again every 9 seconds and a tap plays it now (cast-account.js). Reduced motion: the still logo. Each site sets
   --logo-fx-img to its logo, in its own stylesheet */
.cast-logo-fx { position: relative; display: block; width: -webkit-fit-content; width: fit-content; margin: 0 auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cast-logo-fx > img { animation: castLogoIn .75s cubic-bezier(.2, .85, .3, 1.12) both; }
.cast-logo-fx::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  -webkit-mask: var(--logo-fx-img) center / 100% 100% no-repeat; mask: var(--logo-fx-img) center / 100% 100% no-repeat;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 249, 230, .9) 50%, transparent 58%) 100% 0 / 300% 100% no-repeat;
  animation: castLogoGlint 9s ease-in-out .6s infinite; }
.cast-logo-fx.is-again::after { animation-name: castLogoGlint2; animation-delay: 0s; }
@keyframes castLogoIn { 0% { opacity: 0; transform: translateX(-40px) skewX(-12deg); } 55% { opacity: 1; transform: translateX(5px) skewX(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes castLogoGlint { 0% { background-position: 100% 0; } 12%, 100% { background-position: 0% 0; } }
@keyframes castLogoGlint2 { 0% { background-position: 100% 0; } 12%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .cast-logo-fx > img { animation: none; } .cast-logo-fx::after { display: none; } }
/* World Cup Tries (Admin): scorers not matched, each with who they might be, and the owner's matches */
.ca-adm-wct-h { display: block; margin-top: 10px; font: 800 12px/1.3 Inter, sans-serif; color: #fff; }
.ca-adm-wct-m { display: flex; gap: 8px; align-items: center; margin: 4px 0 6px; }
.ca-adm-wct-m select { flex: 1; min-width: 0; min-height: 38px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--ca-line); background: #0d0d16; color: #fff; font: 700 13px Inter, sans-serif; }

/* Check Past 27-0 Games (Admin > Flags, owner only; 6 Oct 2026) */
.ca-adm-scan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.ca-adm-scan small { flex: 1 1 200px; }

/* ---------------- Ratings Upgrades (cast-upgrades.js, 6 Oct 2026) ----------------
   27-0's rating upgrades, on both games (1000TRIES: a push to play 27-0). A home spot card with five upgraded players on club-colour cards (silver edges, never the Pass gold), each with its
   jump in green; a tap opens the best 30 as a sheet with Play Classic pinned. Kept inside the spot's 95px */
.ca-home-spot > [data-cast-upgrades] { display: flex; }
.cp-upg-spot { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 100%; box-sizing: border-box; padding: 4px 10px 5px; border-radius: 14px; border: 1px solid rgba(126, 226, 168, .35);
  background: linear-gradient(135deg, rgba(126, 226, 168, .12), rgba(126, 226, 168, 0) 60%), #11141f; color: #fff; font-family: Inter, sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .cp-upg-spot:hover { border-color: rgba(126, 226, 168, .75); } }
.cp-upg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-upg-head b { font: 900 13px/1 Inter, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
.cp-upg-head b span { color: #7ee2a8; }
.cp-upg-all { flex: none; font: 800 10.5px/1 Inter, sans-serif; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #e7ecf5; }
.cp-upg-row { display: flex; justify-content: center; align-items: flex-end; gap: 5px; margin-top: 5px; }
.cp-upg-c { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 1 56px; min-width: 0; height: 42px; box-sizing: border-box; padding: 8px 3px 4px; border-radius: 8px 8px 12px 12px;
  border: 1.5px solid #cfd6e4; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .4)), var(--c, #333); box-shadow: 0 3px 8px rgba(0, 0, 0, .45); }
.cp-upg-c.is-big { flex-basis: 62px; height: 48px; border-color: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .28), 0 3px 8px rgba(0, 0, 0, .45); }
.cp-upg-c .cu-r { font: 900 16px/1 Inter, sans-serif; }
.cp-upg-c.is-big .cu-r { font-size: 19px; }
.cp-upg-c .cu-n { margin-top: auto; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 900 7.5px/1.1 Inter, sans-serif; }
.cp-upg-c .cu-ch { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1px; padding: 1px 5px 1px 3px; border-radius: 999px;
  background: #0f2a1c; border: 1px solid #7ee2a8; color: #7ee2a8; font: 900 9.5px/1.2 Inter, sans-serif; white-space: nowrap; }
.cp-upg-c .cu-ch::before { content: ''; border: 4px solid transparent; border-bottom: 5px solid #7ee2a8; border-top: 0; margin-right: 1px; }
/* The sheet */
html.cp-upg-open, html.cp-upg-open body { overflow: hidden; }
.cp-upg { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: flex-end; justify-content: center; background: rgba(3, 5, 10, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cp-upg[hidden] { display: none; }
.cp-upg-box { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 460px; max-height: 92vh; max-height: 92dvh; box-sizing: border-box; border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(126, 226, 168, .35); background: radial-gradient(120% 50% at 50% 0%, rgba(126, 226, 168, .14), transparent 60%), #0c0f18; color: #fff; font-family: Inter, sans-serif; }
.cp-upg-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; font-size: 14px; cursor: pointer; }
.cp-upg-top { padding: 20px 48px 8px; text-align: center; }
.cp-upg-k { margin: 0; font: 800 11px/1.3 Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #7ee2a8; }
.cp-upg-t { margin: 4px 0 6px; font: 900 26px/1.1 Inter, sans-serif; color: #fff; text-wrap: balance; }
.cp-upg-s { margin: 0 auto; max-width: 34ch; font: 600 13px/1.45 Inter, sans-serif; color: #c9d2e3; text-wrap: pretty; }
.cp-upg-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; padding: 16px 14px 12px; }
.cp-upg-grid .cp-upg-c { width: 100%; height: 92px; padding: 6px 5px; }
.cp-upg-grid .cp-upg-c .cu-tp { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 2px; margin-top: 2px; }
.cp-upg-grid .cp-upg-c .cu-tp b { font: 900 9px/1 Inter, sans-serif; opacity: .85; }
.cp-upg-grid .cp-upg-c .cu-cl { font: 900 7.5px/1 Inter, sans-serif; font-style: normal; padding: 2px 3px; border-radius: 3px; background: rgba(0, 0, 0, .35); }
.cp-upg-grid .cp-upg-c .cu-r { font-size: 22px; margin-top: 4px; }
.cp-upg-grid .cp-upg-c .cu-f { font: 700 8.5px/1 Inter, sans-serif; opacity: .85; margin-top: 2px; }
.cp-upg-grid .cp-upg-c .cu-n { font-size: 10px; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.cp-upg-foot { flex: none; padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .06); }
.cp-upg-go { display: block; box-sizing: border-box; width: 100%; max-width: 320px; margin: 0 auto; padding: 14px 20px; border: 0; border-radius: 999px; cursor: pointer; font: 900 16px/1 Inter, sans-serif; color: #06210f; text-align: center; text-decoration: none;
  background: linear-gradient(135deg, #7ee2a8, #d6f8e4 50%, #7ee2a8); }
@media (prefers-reduced-motion: reduce) { .cp-upg { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------------- Admin, rebuilt (7 Oct 2026, the owner: phone first, a search on top, one row of tabs, the player's
   actions grouped with the risky ones apart, a quiet look). Inside .ca-admin the app's gold turns a soft white, so
   every button, heading and number goes quiet in one place; CAST Pass keeps its gold; colour is left for status */
.ca-admin { --ca-gold: #e9ecf3; --ca-gold-rgb: 233, 236, 243; }
.ca-admin .ca-mod-tag.is-pass, .ca-admin .ca-btn-gold, .ca-admin .ca-adm-sec.is-pass > .ca-adm-sec-h { --ca-gold: #f1c073; --ca-gold-rgb: 241, 192, 115; }
.ca-admin .ca-adm-sec.is-pass > .ca-adm-sec-h { color: var(--ca-gold); }
.ca-panel:has(.ca-admin) { border-color: #3a3a50; background: linear-gradient(180deg, #17161f, #0d0c13); box-shadow: 0 -10px 40px rgba(0, 0, 0, .45); }
.ca-admin .ca-full-title { font-size: 22px; letter-spacing: .2px; }
/* The search, always on top (it stays put while the page scrolls) */
.ca-adm-search { position: sticky; top: -2px; z-index: 1; display: flex; gap: 8px; margin: 0 0 6px; padding: 8px 0; background: #15141d; }
.ca-adm-search input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; box-sizing: border-box; border-radius: 12px; border: 1px solid #34344a; background: #0b0b12; color: #fff; font: 700 16px Inter, sans-serif; -webkit-appearance: none; appearance: none; }
.ca-adm-search input::placeholder { color: #7c7c92; }
.ca-adm-search input:focus { outline: none; border-color: #fff; }
.ca-adm-search .ca-btn { width: auto; flex: none; min-height: 46px; padding: 0 16px; }
/* One row of tabs, sideways on a phone; the chosen one underlined */
.ca-adm-tabbar { display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 0 14px; border-bottom: 1px solid #2a2a3c; }
.ca-adm-tabbar::-webkit-scrollbar { display: none; }
.ca-adm-tab { flex: none; display: inline-flex; align-items: center; min-height: 42px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: #9a9aae; font: 800 14px/1 Inter, sans-serif; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-adm-tab.is-on { color: #fff; border-bottom-color: #fff; }
@media (hover: hover) { .ca-adm-tab:hover { color: #fff; } }
.ca-adm-tab:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 6px; }
/* Four tabs and More (7 Oct 2026, the owner: no scrolling row): the row fits, the rest drop down under More */
.ca-adm-tabbar { overflow: visible; }
.ca-adm-tabbar > .ca-adm-tab { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
.ca-adm-more { position: relative; flex: 1 1 auto; display: flex; }
.ca-adm-more-btn { flex: 1 1 auto; justify-content: center; gap: 4px; padding: 0 8px; }
.ca-adm-more-i { font-size: 11px; opacity: .8; }
.ca-adm-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 5; min-width: 168px; display: grid; padding: 6px; border-radius: 12px; background: #16162a; border: 1px solid #2a2a3c; box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.ca-adm-mi { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: #c9c9da; font: 800 14px/1 Inter, sans-serif; text-align: left; cursor: pointer; }
.ca-adm-mi.is-on { color: #fff; background: rgba(255, 255, 255, .06); }
@media (hover: hover) { .ca-adm-mi:hover { color: #fff; background: rgba(255, 255, 255, .06); } }
@media (max-width: 374px) { .ca-adm-tabbar > .ca-adm-tab, .ca-adm-more-btn { padding: 0 5px; font-size: 13px; } }
/* Fans' own tabs: Games, Time, Spend */
.ca-adm-subtabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.ca-adm-subtab { flex: 1; min-height: 38px; border-radius: 999px; border: 1px solid #2a2a3c; background: rgba(255, 255, 255, .03); color: #a2a2b8; font: 800 13px/1 Inter, sans-serif; cursor: pointer; }
.ca-adm-subtab.is-on { color: #111; background: #fff; border-color: #fff; }
.ca-adm-hint { margin: 2px 0 12px; font-size: 13px; }
/* The player: who, their headline numbers, then the groups */
.ca-adm-player .ca-adm-who { position: relative; padding-right: 40px; }
.ca-adm-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 1px solid #34344a; background: none; color: #a9a9c1; font-size: 13px; cursor: pointer; }
@media (hover: hover) { .ca-adm-close:hover { color: #fff; border-color: #fff; } }
.ca-adm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ca-adm-kpis div { min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.ca-adm-kpis b { display: block; font: 900 14px/1.25 Inter, sans-serif; color: #fff; overflow-wrap: anywhere; }
.ca-adm-kpis span { display: block; margin-top: 3px; font: 800 10px/1 Inter, sans-serif; letter-spacing: .7px; text-transform: uppercase; color: #8d8da3; }
.ca-adm-busy { margin: 10px 0 0; font: 700 13px/1.3 Inter, sans-serif; color: #c9c9da; }
.ca-adm-sec { margin: 12px 0 0; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid #2a2a3c; }
.ca-adm-sec-h { margin: 0 0 10px; font: 900 11px/1 Inter, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #9a9aae; }
.ca-adm-sec .ca-adm-rows { margin: 0 0 10px; }
.ca-adm-sec .ca-adm-rows:last-child { margin-bottom: 0; }
.ca-adm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-adm-btns .ca-btn { width: auto; flex: 1 1 auto; margin: 0; }
.ca-adm-btns .ca-adm-fanask { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 13px/1.35 Inter, sans-serif; }
.ca-adm-sub { margin: 12px 0 6px; font: 800 12px/1 Inter, sans-serif; color: #c9c9da; }
.ca-adm-sec .ca-adm-sub:first-of-type { margin-top: 0; }
.ca-adm-sec.is-danger { border-color: rgba(248, 113, 113, .3); background: rgba(248, 113, 113, .03); }
.ca-adm-sec.is-danger .ca-adm-sec-h { color: #fca5a5; }
.ca-adm-danger-note { margin: 10px 0 0; font-size: 12px; }
.ca-adm-sec-cr .ca-adm-logo, .ca-adm-sec-cr .ca-adm-story { margin-top: 0; }
.ca-adm-sec-cr .ca-adm-logo + .ca-adm-story { margin-top: 10px; }
/* Admin Flags: the flagged player's name opens their player card (8 Oct 2026) */
.ca-mod-top .ca-mod-who { min-height: 34px; padding: 0 12px; color: #fff; font-size: 14px; }
/* ---------------- The big moment (js/cast-celebrate.js, 8 Oct 2026): 27-0's 27-0 and 1000TRIES's Exactly 1000 ----------------
   Night sky, floodlights, the player's club colours (--cc1, --cc2); gold only on the cup and the score */
.cc { position: fixed; inset: 0; z-index: 99999; overflow: hidden; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: 'Inter', system-ui, -apple-system, sans-serif; background: radial-gradient(130% 70% at 50% 112%, rgba(var(--cc1-rgb), .3), transparent 62%), #05050a; }
.cc:focus { outline: none; }
.cc-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.cc-lights { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .9s ease; z-index: 0; }
.cc-lights::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -28%; height: 62%; background: radial-gradient(closest-side, rgba(var(--cc1-rgb), .34), transparent); }
.cc.is-trophy .cc-lights { opacity: 1; }
.cc.is-end .cc-lights { opacity: .55; }
.cc-beam { position: absolute; top: -6vh; width: 56vmax; height: 140vh; transform-origin: 50% 0; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 50%, transparent 78%); clip-path: polygon(48.5% 0, 51.5% 0, 82% 100%, 18% 100%); }
.cc-beam-l { left: -28vmax; transform: rotate(-30deg); }
.cc-beam-r { right: -28vmax; transform: rotate(30deg); }
.cc.is-trophy .cc-beam-l { animation: ccSweepL 3.4s ease-in-out infinite alternate; }
.cc.is-trophy .cc-beam-r { animation: ccSweepR 3.4s ease-in-out infinite alternate; }
@keyframes ccSweepL { from { transform: rotate(-32deg); } to { transform: rotate(-9deg); } }
@keyframes ccSweepR { from { transform: rotate(32deg); } to { transform: rotate(9deg); } }
.cc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.cc.is-slam .cc-flash { animation: ccFlash .55s ease-out; }
@keyframes ccFlash { 0% { opacity: 0; } 14% { opacity: .82; } 100% { opacity: 0; } }
.cc-wave { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid var(--cc1); opacity: 0; pointer-events: none; z-index: 1; }
.cc.is-slam .cc-wave { animation: ccWave 1.1s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes ccWave { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(55); opacity: 0; } }
.cc.is-shake { animation: ccShake .45s linear; }
@keyframes ccShake { 0%, 100% { transform: none; } 15% { transform: translate(-7px, 4px); } 30% { transform: translate(6px, -5px); } 45% { transform: translate(-5px, -3px); }
  60% { transform: translate(4px, 5px); } 75% { transform: translate(-3px, 2px); } 90% { transform: translate(2px, -1px); } }
/* The count-up: the step's words under the score, its tiles below them */
.cc-tick { position: absolute; left: 16px; right: 16px; top: calc(42% + clamp(48px, 13vw, 74px)); margin: 0; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; pointer-events: none; }
.cc-tiles { position: absolute; left: 50%; top: calc(42% + clamp(76px, 13vw + 28px, 102px)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(var(--cols), 32px); gap: 5px; z-index: 2; pointer-events: none; }
.cc-tile { height: 22px; border-radius: 5px; background: var(--bg); color: var(--fg); font-size: 9px; font-weight: 800; font-style: normal; line-height: 22px; text-align: center;
  letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); opacity: 0; transform: scale(.2); transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), opacity .15s ease; }
.cc-tile.is-on { opacity: 1; transform: none; }
.cc.is-slam .cc-tick { opacity: 0; transition: opacity .2s ease; }
.cc.is-slam .cc-tile { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(.5); transition: transform .8s cubic-bezier(.1, .7, .2, 1), opacity .8s ease-in; }
.cc.is-trophy .cc-tiles, .cc.is-trophy .cc-tick { display: none; }
/* What stays: the score up top, the 13, the numbers, the history; it scrolls once it's all there, the button stays put */
.cc-scroll { position: absolute; left: 0; right: 0; top: 0; bottom: calc(86px + env(safe-area-inset-bottom)); overflow: hidden; overscroll-behavior: contain; z-index: 3; }
.cc.is-end .cc-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cc-body { max-width: 440px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
/* The stage: the score in the middle of the screen, the cup rising above it, the stamp and line below; it flies into the
   header when the 13 come */
.cc-stage { position: absolute; left: 50%; top: 42%; z-index: 3; transform: translate(-50%, -50%); transform-origin: 50% 50%; pointer-events: none;
  transition: transform .75s cubic-bezier(.2, .9, .2, 1), opacity .45s ease .3s; }
.cc.is-team .cc-stage { opacity: 0; }
.cc-stage .cc-cup { position: absolute; left: 50%; bottom: 100%; width: 92px; height: 115px; margin: 0 0 4px -46px; opacity: 0; transform: translateY(34px) scale(.7);
  transition: opacity .5s ease, transform .9s cubic-bezier(.2, 1.25, .3, 1); filter: drop-shadow(0 8px 22px rgba(245, 197, 24, .4)); }
.cc.is-trophy .cc-stage .cc-cup { opacity: 1; transform: none; }
.cc-cup svg, .cc-head-cup svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cc.is-trophy .cc-shine { animation: ccShine 1.3s ease-in-out .6s 2 both; }
@keyframes ccShine { from { transform: translateX(-30px); } to { transform: translateX(150px); } }
.cc-big { font-weight: 900; line-height: 1; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: #f5c518; background: linear-gradient(180deg, #fff6cf 8%, #f5c518 48%, #c98f12 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cc-stage .cc-big { font-size: clamp(76px, 24vw, 128px); filter: drop-shadow(0 4px 24px rgba(245, 197, 24, .34)); }
.cc.is-slam .cc-stage .cc-big { animation: ccSlam .6s cubic-bezier(.2, 1.4, .3, 1); }
@keyframes ccSlam { 0% { transform: scale(1.7); opacity: .25; } 55% { transform: scale(.93); opacity: 1; } 100% { transform: none; } }
.cc-under { position: absolute; left: 50%; top: 100%; width: min(92vw, 380px); margin-top: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.cc-stamp { padding-left: .34em; font-size: 17px; font-weight: 900; line-height: 1; letter-spacing: .34em; text-transform: uppercase;
  opacity: 0; transform: scale(1.8); transition: opacity .25s ease .35s, transform .45s cubic-bezier(.2, 1.5, .3, 1) .35s; }
.cc.is-trophy .cc-stamp { opacity: 1; transform: none; }
.cc-line { margin-top: 10px; max-width: 100%; padding-bottom: 6px; border-bottom: 2px solid var(--cc1); font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: .06em;
  text-transform: uppercase; text-align: center; text-wrap: balance; opacity: 0; transform: translateY(8px); transition: opacity .5s ease .8s, transform .5s ease .8s; }
.cc.is-trophy .cc-line { opacity: 1; transform: none; }
/* The header the score flies into */
.cc-head { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; opacity: 0; transition: opacity .35s ease .45s; }
.cc.is-team .cc-head { opacity: 1; }
.cc-head-cup { flex: none; width: 42px; height: 52px; filter: drop-shadow(0 4px 12px rgba(245, 197, 24, .35)); }
.cc-head-txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.cc-head .cc-big { font-size: 46px; }
.cc-head-stamp { margin-top: 5px; font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: .3em; text-transform: uppercase; }
.cc-head-line { margin-top: 4px; max-width: 230px; padding-bottom: 2px; border-bottom: 2px solid var(--cc1); font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: .05em;
  text-transform: uppercase; color: #d8d8e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-xiii { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cc-sec { margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a2a2b8; opacity: 0; transition: opacity .4s ease .2s; }
.cc.is-team .cc-sec { opacity: 1; }
.cc-row { width: 100%; display: flex; justify-content: center; gap: 6px; }
.cc-card { width: calc((100% - 18px) / 4); max-width: 86px; box-sizing: border-box; padding: 4px 5px 5px; border-radius: 9px; border-top: 3px solid var(--bg); background: #12121c; text-align: center;
  opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.3) rotate(var(--fr)); transition: transform .6s cubic-bezier(.2, 1.1, .3, 1) var(--d), opacity .3s ease var(--d); }
.cc.is-team .cc-card { opacity: 1; transform: none; }
.cc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 2px; font-size: 9px; font-weight: 800; line-height: 1; color: #a2a2b8; }
.cc-chip { padding: 2px 3px; border-radius: 3px; background: var(--bg); color: var(--fg); font-size: 8px; font-weight: 800; }
.cc-card-name { margin-top: 4px; font-size: 11.5px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-card-val { margin-top: 1px; font-size: 14px; font-weight: 900; line-height: 1; color: var(--vc); font-variant-numeric: tabular-nums; }
.cc-stats { width: 100%; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; }
.cc-stat { padding: 9px 4px 8px; border-radius: 10px; border-bottom: 2px solid var(--cc1); background: #12121c; text-align: center;
  opacity: 0; transform: translateY(10px); transition: opacity .4s ease var(--d), transform .4s ease var(--d); }
.cc.is-end .cc-stat { opacity: 1; transform: none; }
.cc-stat b { display: block; font-size: 19px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-stat small { display: block; margin-top: 5px; font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; color: #a2a2b8; }
.cc-star { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; text-wrap: balance; color: #d8d8e6; opacity: 0; transition: opacity .4s ease .35s; }
.cc-star span { color: #a2a2b8; }
.cc-star b { color: #fff; }
.cc-star i { font-style: normal; font-weight: 800; color: var(--cc1); }
.cc.is-end .cc-star { opacity: 1; }
.cc-hist { width: 100%; box-sizing: border-box; padding: 11px 10px 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, rgba(var(--cc1-rgb), .14), rgba(255, 255, 255, .03)); opacity: 0; transform: translateY(12px); transition: opacity .45s ease .5s, transform .45s ease .5s; }
.cc.is-end .cc-hist { opacity: 1; transform: none; }
.cc-hist h4 { margin: 0; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: #a2a2b8; }
.cc-hist p { margin: 7px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; text-wrap: balance; }
.cc-hist-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 9px; }
.cc-hist-list span { padding: 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #d8d8e6; font-size: 10px; font-weight: 700; line-height: 1;
  opacity: 0; transform: scale(.7); transition: opacity .3s ease calc(var(--d) + .6s), transform .35s cubic-bezier(.2, 1.5, .3, 1) calc(var(--d) + .6s); }
.cc.is-end .cc-hist-list span { opacity: 1; transform: none; }
.cc-hist-list .is-you { background: var(--cc1); color: var(--cc1-ink); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 18px rgba(var(--cc1-rgb), .6); }
.cc.is-done .cc-hist-list .is-you { animation: ccPulse 1.8s ease-in-out infinite; }
@keyframes ccPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 14px rgba(var(--cc1-rgb), .5); } 50% { box-shadow: 0 0 0 2px #fff, 0 0 26px rgba(var(--cc1-rgb), .9); } }
.cc-skip { position: absolute; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .42); z-index: 5; pointer-events: none; transition: opacity .3s ease; }
.cc.is-done .cc-skip { opacity: 0; }
.cc-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: center; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, #05050a 62%, rgba(5, 5, 10, 0)); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.cc.is-done .cc-foot { opacity: 1; transform: none; pointer-events: auto; }
.cc-go { width: 100%; max-width: 408px; min-height: 54px; border: 0; border-radius: 999px; background: #fff; color: #0b0b14; font: inherit; font-size: 17px; font-weight: 900; cursor: pointer;
  box-shadow: 0 0 0 3px rgba(var(--cc1-rgb), .55), 0 10px 30px rgba(var(--cc1-rgb), .35); }
.cc-go:active { transform: scale(.98); }
.cc.is-skip *:not(.cc-beam):not(.cc-shine) { transition: none !important; }
.cc.is-skip .cc-big, .cc.is-skip .cc-flash, .cc.is-skip .cc-wave { animation: none !important; }
.cc.is-skip .cc-stage { display: none; }
.cc.is-calm, .cc.is-calm * { animation: none !important; transition: none !important; }

/* ---------------- The World Legend reveal (js/cast-intl.js, 8 Oct 2026): .ci-* ----------------
   Night sky with a World Cup blue haze; the nations' own looks are the star. Gold (the CAST gold: an approved exception for
   World Legends) only as an accent: the label, and on a landed badge its edge, ring, shine and sparkles.
   The script sets --ci-w and --ci-h (a badge, sized for the screen), --ci-gap (between reels) and, on each reel, --ci-glow
   (its nation's colour as r, g, b). .ci-n1: one big reel; .ci-nm: two or three side by side */
.ci { --ci-gold: #f1c073; --ci-gold-rgb: 241, 192, 115; --ci-hi: #ffe9b8; --ci-r: 12px; --ci-ld: .1s; --ci-rs: 1.4;
  position: fixed; inset: 0; z-index: 99990; box-sizing: border-box; margin: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(64px + env(safe-area-inset-bottom, 0px)); overflow: hidden; overscroll-behavior: contain; touch-action: none;
  color: #fff; font-family: 'Inter', system-ui, -apple-system, sans-serif; text-align: center; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  background: radial-gradient(130% 55% at 50% 112%, rgba(14, 165, 233, .17), rgba(14, 165, 233, 0) 64%), radial-gradient(80% 50% at 50% 44%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%), #05050a;
  animation: ciFade .22s ease-out both; }
.ci.is-bronze { --ci-gold: #d9a66b; --ci-gold-rgb: 217, 166, 107; --ci-hi: #f3d2a8; } /* 1000TRIES's Legends Pick: its Legend cards' bronze */
.ci *, .ci *::before, .ci *::after { box-sizing: border-box; }
@keyframes ciFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ciUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Faint white rays turning slowly behind it all, a touch brighter once everything has landed */
.ci-rays { position: absolute; left: 50%; top: 46%; z-index: 0; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; pointer-events: none; opacity: .55;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .05) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0) 70%); mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0) 70%);
  animation: ciTurn 60s linear infinite; transition: opacity .8s ease; }
.ci.is-landed .ci-rays { opacity: 1; }
@keyframes ciTurn { to { transform: rotate(1turn); } }
.ci-stage { position: relative; z-index: 2; width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; }
/* The label: gold small capitals on one line with a fine gold rule each side (the span's margin evens out the last
   letter's spacing). The label, nation names, names and title keep to one line: the script makes one smaller to fit its
   column on a small phone (the title wraps, balanced, if it still can't fit). (text-wrap-style, not the text-wrap
   shorthand: that would switch white-space: nowrap back to wrapping) */
.ci-kick { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; font-size: 12px; font-weight: 900; line-height: 1.25;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ci-gold); text-shadow: 0 0 16px rgba(var(--ci-gold-rgb), .45); animation: ciUp .5s cubic-bezier(.2, .8, .3, 1) both; }
.ci-kick span { flex: 0 0 auto; margin-right: -.26em; white-space: nowrap; }
.ci-kick::before, .ci-kick::after { content: ''; flex: 0 1 28px; min-width: 0; height: 1.5px; background: linear-gradient(90deg, rgba(var(--ci-gold-rgb), 0), var(--ci-gold)); }
.ci-kick::after { transform: scaleX(-1); }
.ci-title { max-width: 100%; margin: 8px 0 0; font-size: 23px; font-weight: 900; line-height: 1.12; letter-spacing: -.01em; color: #fff; white-space: nowrap; text-wrap-style: balance;
  animation: ciUp .5s cubic-bezier(.2, .8, .3, 1) .06s both; }
/* The reels: tops in a line. A reel rises in (fill backwards only, so once in it makes no layer of its own and every
   nation's glow stays behind every badge and every word) */
.ci-reels { display: flex; align-items: flex-start; justify-content: center; gap: var(--ci-gap, 12px); width: 100%; margin-top: 24px; }
.ci-reel { flex: 0 0 var(--ci-w); width: var(--ci-w); min-width: 0; display: flex; flex-direction: column; align-items: center;
  animation: ciUp .45s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
.ci-badge { position: relative; flex: none; width: var(--ci-w); height: var(--ci-h); }
.ci-glow { position: absolute; left: 50%; top: 50%; z-index: -1; display: block; width: 240%; height: 320%; border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(.5); background: radial-gradient(closest-side, rgba(var(--ci-glow), .5), rgba(var(--ci-glow), .16) 55%, rgba(var(--ci-glow), 0));
  transition: opacity .6s ease var(--ci-ld), transform .9s cubic-bezier(.2, .8, .3, 1) var(--ci-ld); }
.ci-reel.is-landed .ci-glow { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* The badge: a window the faces turn through (shaded top and bottom while it spins); landed, a gold edge and a pop */
.ci-tile { position: absolute; inset: 0; z-index: 1; border-radius: var(--ci-r); background: #0d0d16;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .16), 0 14px 30px rgba(0, 0, 0, .55); transition: box-shadow .4s ease var(--ci-ld); }
.ci-reel.is-landed .ci-tile { box-shadow: 0 0 0 2px var(--ci-gold), 0 0 22px rgba(var(--ci-gold-rgb), .34), 0 14px 30px rgba(0, 0, 0, .55);
  animation: ciPop .55s cubic-bezier(.3, 1.2, .4, 1) var(--ci-ld) backwards; }
@keyframes ciPop { 0% { transform: none; } 35% { transform: scale(1.08); } 65% { transform: scale(.985); } 100% { transform: none; } }
.ci-win { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; clip-path: inset(0 round var(--ci-r)); background: #0d0d16; }
.ci-win::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 10, .6), rgba(5, 5, 10, 0) 26%, rgba(5, 5, 10, 0) 74%, rgba(5, 5, 10, .6)); transition: opacity .3s ease var(--ci-ld); }
.ci-reel.is-landed .ci-win::after { opacity: 0; }
/* A face: the nation's look and its code in a pill (the code alone on a plain tile when there's no look). The new face
   comes in from above as the last goes down and out; the script sets each pair's pace */
.ci-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #262640, #12121e); }
.ci-face svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ci-face.is-in { animation: ciIn 80ms linear both; }
.ci-face.is-out { animation: ciOut 80ms linear both; }
@keyframes ciIn { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes ciOut { from { transform: none; } to { transform: translateY(100%); } }
.ci-code { position: relative; z-index: 1; padding: 2px 7px; border-radius: 6px; background: rgba(8, 10, 18, .62); color: #fff; font-size: 13px; font-weight: 900; line-height: 1.2;
  letter-spacing: .06em; transition: opacity .3s ease var(--ci-ld); }
.ci-face:not(.has-look) .ci-code { padding: 0; background: none; font-size: 20px; letter-spacing: .08em; }
.ci-reel.is-landed .ci-face.has-look .ci-code { opacity: 0; }
/* The landing: a flash in the window, a gold ring going out, a shine across now and then, a few sparkles */
.ci-flash { position: absolute; inset: 0; z-index: 3; display: block; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 233, 184, .5) 55%, rgba(255, 233, 184, 0)); }
.ci-reel.is-landed .ci-flash { animation: ciFlash .6s ease-out var(--ci-ld) forwards; }
@keyframes ciFlash { 0% { opacity: .8; } 100% { opacity: 0; } }
.ci-shine { position: absolute; top: -15%; bottom: -15%; left: 0; z-index: 3; display: block; width: 46%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 244, 214, 0), rgba(255, 244, 214, .72) 50%, rgba(255, 244, 214, 0)); transform: translateX(-130%) skewX(-18deg); }
.ci-reel.is-landed .ci-shine { animation: ciShine 3.2s ease-in-out calc(var(--ci-ld) + .18s) infinite; }
@keyframes ciShine { 0% { opacity: 1; transform: translateX(-130%) skewX(-18deg); } 28% { opacity: 1; transform: translateX(260%) skewX(-18deg); }
  28.01%, 100% { opacity: 0; transform: translateX(260%) skewX(-18deg); } }
.ci-ring { position: absolute; inset: -1px; z-index: 2; display: block; border: 2px solid var(--ci-hi); border-radius: calc(var(--ci-r) + 1px); pointer-events: none; opacity: 0;
  box-shadow: 0 0 12px rgba(var(--ci-gold-rgb), .85); }
.ci-reel.is-landed .ci-ring { animation: ciRing .7s cubic-bezier(.2, .7, .3, 1) var(--ci-ld) forwards; }
@keyframes ciRing { 0% { opacity: 1; transform: none; } 40% { opacity: .45; } 100% { opacity: 0; transform: scale(var(--ci-rs)); } }
.ci-spark { position: absolute; z-index: 3; display: block; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; opacity: 0; background: var(--ci-hi);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.ci-spark-1 { left: 3%; top: 2%; }
.ci-spark-2 { left: 99%; top: 24%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff; }
.ci-spark-3 { left: 88%; top: 99%; width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.ci-spark-4 { left: 1%; top: 78%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: #fff; }
.ci-reel.is-landed .ci-spark { animation: ciSpark 2.6s ease-out infinite; }
.ci-reel.is-landed .ci-spark-1 { animation-delay: calc(var(--ci-ld) + .1s); }
.ci-reel.is-landed .ci-spark-2 { animation-delay: calc(var(--ci-ld) + .28s); }
.ci-reel.is-landed .ci-spark-3 { animation-delay: calc(var(--ci-ld) + .44s); }
.ci-reel.is-landed .ci-spark-4 { animation-delay: calc(var(--ci-ld) + .6s); }
@keyframes ciSpark { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 12% { opacity: 1; transform: scale(1.15) rotate(45deg); } 30%, 100% { opacity: 0; transform: scale(0) rotate(100deg); } }
/* The words under a badge come in once it lands: the nation over a bar in its colour, the name (first names over the
   surname), then the line under it */
.ci-nation { max-width: 100%; margin: 14px 0 0; padding: 0 0 3px .1em; border-bottom: 2px solid rgb(var(--ci-glow)); font-size: 10px; font-weight: 800; line-height: 1.2;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: #e8eaf2; }
.ci-name { max-width: 100%; margin: 8px 0 0; display: flex; flex-direction: column; align-items: center; }
.ci-first { display: block; max-width: 100%; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; color: #c9cbd8; }
.ci-last { display: block; max-width: 100%; margin-top: 1px; font-size: 16px; font-weight: 900; line-height: 1.12; letter-spacing: -.005em; white-space: nowrap; color: #fff; }
.ci-sub { max-width: 100%; margin: 6px 0 0; font-size: 11px; font-weight: 700; line-height: 1.3; color: #a2a2b8; text-wrap: balance; }
.ci-seg { display: block; }
.ci-seg.is-num { font-weight: 900; color: #fff; } /* a number on its own (the rating) */
/* Two or three side by side: each row the same height in every column (one line each, shrunk to fit, never wrapped), so
   the names, positions and ratings line up across (the owner, 8 Oct 2026) */
.ci-nm .ci-nation { white-space: nowrap; line-height: 16px; }
.ci-nm .ci-first { line-height: 16px; height: 16px; }
.ci-nm .ci-last { line-height: 24px; height: 24px; }
.ci-nm .ci-sub { text-wrap: nowrap; }
.ci-nm .ci-seg { white-space: nowrap; line-height: 17px; height: 17px; }
.ci-nb { white-space: nowrap; }
.ci-nation, .ci-first, .ci-last, .ci-sub { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .3, 1); }
.ci-reel.is-landed .ci-nation, .ci-reel.is-landed .ci-first, .ci-reel.is-landed .ci-last, .ci-reel.is-landed .ci-sub { opacity: 1; transform: none; }
.ci-reel.is-landed .ci-nation { transition-delay: calc(var(--ci-ld) + .06s); }
.ci-reel.is-landed .ci-first, .ci-reel.is-landed .ci-last { transition-delay: calc(var(--ci-ld) + .14s); }
.ci-reel.is-landed .ci-sub { transition-delay: calc(var(--ci-ld) + .22s); }
/* One reel: a big badge, the name across the screen, the line under it on one line */
.ci-n1 { --ci-r: 16px; --ci-rs: 1.22; }
.ci-n1 .ci-kick { font-size: 13px; }
.ci-n1 .ci-title { font-size: 27px; }
.ci-n1 .ci-reels { margin-top: 30px; }
.ci-n1 .ci-reel { flex: 1 1 auto; width: 100%; }
.ci-n1 .ci-code { padding: 4px 11px; border-radius: 9px; font-size: 19px; }
.ci-n1 .ci-face:not(.has-look) .ci-code { padding: 0; font-size: 34px; }
.ci-n1 .ci-spark { transform-origin: 50% 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.ci-n1 .ci-spark-2, .ci-n1 .ci-spark-4 { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.ci-n1 .ci-nation { margin-top: 24px; padding: 0 0 4px .18em; font-size: 13px; letter-spacing: .18em; }
.ci-n1 .ci-name { margin-top: 12px; }
.ci-n1 .ci-first { font-size: 16px; }
.ci-n1 .ci-last { margin-top: 2px; font-size: 38px; letter-spacing: -.015em; }
.ci-n1 .ci-sub { margin-top: 10px; font-size: 14px; }
.ci-n1 .ci-seg { display: inline; }
.ci-n1 .ci-seg + .ci-seg::before { content: "\a0\b7\20"; font-weight: 700; color: #a2a2b8; }
@media (min-width: 480px) {
  .ci-nm .ci-code { font-size: 15px; }
  .ci-nm .ci-nation { font-size: 11px; }
  .ci-nm .ci-first, .ci-nm .ci-sub { font-size: 12.5px; }
  .ci-nm .ci-last { font-size: 19px; }
}
@media (max-width: 359px) { .ci-kick { letter-spacing: .18em; } .ci-kick span { margin-right: -.18em; } }
/* The tap layer over everything (a real button, so keys and the games' tap fix work), its hint at the foot */
.ci-hit { all: unset; position: absolute; inset: 0; z-index: 5; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ci-hint { position: absolute; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 11px; font-weight: 700; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, .42); animation: ciFade .4s ease .5s both; }
.ci.is-landed .ci-hint { color: rgba(255, 255, 255, .6); }
.ci-hit:focus-visible .ci-hint { color: #fff; }
.ci-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* A tap during the spin: straight to the landed state (no slides, ring or flash; the shine and sparkles still play) */
.ci.is-skip .ci-face, .ci.is-skip .ci-tile, .ci.is-skip .ci-ring, .ci.is-skip .ci-flash { animation: none !important; }
.ci.is-skip .ci-reel, .ci.is-skip .ci-reel *, .ci.is-skip .ci-reel *::after { transition: none !important; }
/* Reduced motion: the landed state, still */
.ci.is-calm, .ci.is-calm *, .ci.is-calm *::before, .ci.is-calm *::after { animation: none !important; transition: none !important; }

/* World Legend Pick: how many there are, and the spin as it opens (10 Oct 2026) */
.ca-ileg-count { margin: 0 auto 12px; max-width: 336px; text-align: center; font: 600 13px/1.45 Inter, system-ui, sans-serif; color: #c9c9da; text-wrap: balance; }
.ca-ileg-count b { color: #f1c073; font-weight: 900; }
.ca-rr-tc.is-spinning { filter: brightness(1.12) blur(.4px); }
.ca-rr-tc.is-landed { opacity: 1; animation: caIlegLand .32s ease-out; } /* opacity: the deal's end state goes when this animation replaces it, and the cards vanished (11 Oct 2026) */
@keyframes caIlegLand { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ca-rr-tc.is-landed { animation: none; } }

/* World Cup is here (10 Oct 2026, the owner): the one-time full screen intro on each site (js wcIntro). World Cup blue,
   the ten nations fly in, then the globe, the title, the chips and Play Now. Still for reduced motion */
.ca-wci { position: fixed; inset: 0; z-index: 10070; display: grid; place-items: center; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box; overflow-y: auto;
  font-family: Inter, sans-serif; color: #fff; background: radial-gradient(120% 80% at 50% 0%, #0c4a6e 0%, #062338 45%, #030b14 100%); animation: caWciFade .35s ease-out both; }
.ca-wci[hidden] { display: none; }
.ca-wci-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 64% 42%, rgba(186,230,253,.6), transparent), radial-gradient(1px 1px at 28% 66%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 88% 74%, rgba(186,230,253,.5), transparent), radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,.5), transparent); }
.ca-wci-sky i { position: absolute; top: -20%; left: -60%; width: 50%; height: 140%; background: linear-gradient(100deg, transparent, rgba(125, 211, 252, .16), transparent); transform: rotate(12deg); animation: caWciBeam 5s ease-in-out 1s infinite; }
.ca-wci-box { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.ca-wci-box { padding-top: 44px; }
.ca-wci-x { position: absolute; top: 0; right: 0; }
.ca-wci-kick { margin: 0 0 2px; font: 900 11.5px/1.3 Inter, sans-serif; letter-spacing: 2.4px; text-transform: uppercase; color: #7dd3fc; text-wrap: balance; animation: caWciUp .5s ease-out .1s both; }
.ca-wci-nats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; max-width: 360px; }
.ca-wci-nat { position: relative; aspect-ratio: 64 / 42; border-radius: 8px; overflow: hidden; background: #0b2a40; box-shadow: 0 6px 14px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .18) inset;
  animation: caWciNat .6s cubic-bezier(.2, 1.4, .4, 1) calc(.25s + var(--i) * 70ms) both; }
.ca-wci-nat svg { display: block; width: 100%; height: 100%; }
.ca-wci-nat b { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 1px 4px; border-radius: 4px; background: rgba(3, 11, 20, .72); font: 900 8.5px/1.2 Inter, sans-serif; letter-spacing: .6px; }
.ca-wci-globe { margin-top: 6px; font-size: 64px; line-height: 1; filter: drop-shadow(0 0 22px rgba(56, 189, 248, .55)); animation: caWciPop .7s cubic-bezier(.2, 1.4, .4, 1) 1s both, caWciFloat 4s ease-in-out 1.7s infinite; }
.ca-wci-t { margin: 0; font: italic 900 44px/1 Inter, sans-serif; letter-spacing: -1.5px; text-transform: uppercase; text-wrap: balance; animation: caWciPop .6s cubic-bezier(.2, 1.3, .4, 1) 1.2s both; }
.ca-wci-t span { display: block; padding: 0 .12em; font-size: 1.45em; line-height: 1.02; background: linear-gradient(100deg, #38bdf8 0%, #e0f2fe 45%, #fff 50%, #e0f2fe 55%, #38bdf8 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: caWciShine 3.2s linear 1.8s infinite; }
.ca-wci-line { margin: 0; max-width: 32ch; font: 600 16px/1.4 Inter, sans-serif; color: #e0f2fe; text-wrap: balance; animation: caWciUp .5s ease-out 1.4s both; }
.ca-wci-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ca-wci-chips span { padding: 6px 12px; border-radius: 999px; background: rgba(14, 165, 233, .16); border: 1px solid rgba(125, 211, 252, .45); font: 800 12.5px/1 Inter, sans-serif; color: #bae6fd;
  animation: caWciUp .45s ease-out calc(1.55s + var(--i) * 90ms) both; }
.ca-wci-go { margin-top: 8px; width: 100%; max-width: 360px; min-height: 58px; border: 0; border-radius: 999px; cursor: pointer; font: 900 20px/1 Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #38bdf8, #0369a1); box-shadow: 0 10px 28px rgba(14, 165, 233, .45), 0 0 0 1px rgba(186, 230, 253, .5) inset;
  animation: caWciUp .5s ease-out 1.9s both, caWciGlow 2.4s ease-in-out 2.5s infinite; }
.ca-wci-go i { font-style: normal; font-size: .75em; margin-left: 6px; }
.ca-wci-note { margin: -4px 0 0; font: 700 12px/1.3 Inter, sans-serif; color: #7dd3fc; animation: caWciUp .5s ease-out 2s both; }
.ca-wci-later { border: 1px solid rgba(186, 230, 253, .3); border-radius: 999px; background: none; color: #bae6fd; padding: 9px 22px; cursor: pointer; font: 700 13px/1 Inter, sans-serif; animation: caWciUp .5s ease-out 2.1s both; }
@keyframes caWciFade { from { opacity: 0; } }
@keyframes caWciUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes caWciNat { from { opacity: 0; transform: translateY(36px) scale(.5) rotate(-10deg); } }
@keyframes caWciPop { from { opacity: 0; transform: scale(.4); } }
@keyframes caWciFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes caWciShine { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes caWciGlow { 0%, 100% { box-shadow: 0 10px 28px rgba(14, 165, 233, .45), 0 0 0 1px rgba(186, 230, 253, .5) inset; } 50% { box-shadow: 0 10px 40px rgba(56, 189, 248, .75), 0 0 0 1px rgba(224, 242, 254, .8) inset; } }
@keyframes caWciBeam { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@media (max-height: 700px) { .ca-wci-globe { font-size: 44px; } .ca-wci-t { font-size: 34px; } .ca-wci-box { gap: 9px; } }
@media (prefers-reduced-motion: reduce) { .ca-wci, .ca-wci *, .ca-wci-sky i { animation: none !important; } }

/* The World Legend Pick card, first in the home spot for CAST Pass members (11 Oct 2026) */
.ca-lead-ileg { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 2px solid #f1c073; cursor: pointer; text-align: left; font: inherit; color: #fff;
  background: linear-gradient(120deg, #1d1606 0%, #2c2108 45%, #12100a 100%); box-shadow: 0 0 16px rgba(241, 192, 115, .3); }
.ca-lead-ico { font-size: 30px; line-height: 1; flex: none; }
.ca-lead-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ca-lead-txt em { font: 900 10.5px/1.2 Inter, sans-serif; font-style: normal; letter-spacing: 1.6px; text-transform: uppercase; color: #f1c073; }
.ca-lead-txt b { font: 900 16px/1.2 Inter, sans-serif; text-wrap: balance; }
.ca-lead-txt small { font: 600 12.5px/1.35 Inter, sans-serif; color: #e8dcc0; text-wrap: pretty; }
.ca-lead-go { flex: none; padding: 9px 14px; border-radius: 999px; font: 900 13px/1 Inter, sans-serif; color: #1a1204; background: linear-gradient(135deg, #c9953a, #ffe2a8 50%, #c9953a); }
/* Desktop flicker (11 Oct 2026, the owner's videos of his external monitor: the World Cup draft, then Admin). Chrome on a
   Mac redraws a see-through blur every frame anything under it moves, and on some monitors that shows as flicker. On a
   mouse or trackpad screen nothing blurs what's behind it: the top bars are 92% solid anyway, and the pop-up backdrop
   is a touch darker instead. Phones keep the blur */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .ca-backdrop, .cp-confirm-backdrop { background: rgba(5, 5, 10, .86); }
}
/* The other game's World Cup in the home spot (11 Oct 2026, the owner: "more of a World Cup push with the correct
   branding"): the World Cup cards' blue, the ten nations' flags, and a Play button into that mode */
.ca-wcx { width: 100%; box-sizing: border-box; text-align: left; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 2px solid #0ea5e9; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, rgba(14, 165, 233, .3), rgba(14, 165, 233, .05) 70%), #101624; box-shadow: 0 0 16px rgba(14, 165, 233, .25); }
.ca-wcx-top { display: flex; align-items: center; gap: 12px; }
.ca-wcx-logo { flex: none; width: 66px; height: auto; display: block; }
.ca-wcx-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ca-wcx-txt em { font: 900 10.5px/1.2 Inter, sans-serif; font-style: normal; letter-spacing: 1.6px; text-transform: uppercase; color: #7dd3fc; }
.ca-wcx-txt b { font: 900 16px/1.2 Inter, sans-serif; text-wrap: balance; }
.ca-wcx-go { flex: none; padding: 9px 16px; border-radius: 999px; font: 900 13px/1 Inter, sans-serif; color: #fff; background: linear-gradient(180deg, #38bdf8, #0284c7); box-shadow: 0 4px 12px rgba(2, 132, 199, .4); }
.ca-wcx-flags { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.ca-wcx-flags i { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; height: 20px; border-radius: 4px; font: 900 8.5px/1 Inter, sans-serif; font-style: normal;
  color: #fff; background: #0c4a6e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ca-wcx-flags i > span:last-child { text-shadow: 0 0 3px rgba(0, 0, 0, .95), 0 1px 2px rgba(0, 0, 0, .9); }
.ca-wcx-look { position: absolute; inset: 0; z-index: -1; filter: brightness(.95); }
.ca-wcx-look svg { display: block; width: 100%; height: 100%; }
@media (max-width: 380px) { .ca-wcx-flags i { height: 17px; font-size: 7px; } .ca-wcx-logo { width: 56px; } }
@media (hover: hover) { .ca-wcx:hover { border-color: #7dd3fc; } }
/* World Cup trophies (both games, 11 Oct 2026, the owner): the unlock pop-up and the in-game note in World Cup blue, the
   pop-up with the ten nations' flags across its top */
.ca-tp.is-wc { --ca-gold: #38bdf8; --ca-gold-rgb: 56, 189, 248; }
.ca-tp.is-wc .ca-tp-panel { border-color: #0ea5e9; background: linear-gradient(160deg, rgba(14, 165, 233, .26), rgba(14, 165, 233, .04) 55%), #0f1522; box-shadow: 0 0 0 1px rgba(14, 165, 233, .35), 0 18px 48px rgba(2, 132, 199, .3); }
.ca-tp.is-wc .ca-kicker { color: #7dd3fc; }
.ca-tp-flags { margin: 2px 52px 10px; }
.ca-trophy-toast.is-wc { border-color: #0ea5e9; background: linear-gradient(135deg, #0c2a40, #0f1522); }
.ca-trophy-toast.is-wc small { color: #7dd3fc; }
/* The World Legend Pick pop-up as a sell (11 Oct 2026, the owner): the three heroes' big numbers, one big buy button, and
   the Shop's way in. World Legend gold on near black, like the rest of the Pick */
.ca-rr-tc.is-ileg.is-hero .ca-rr-tc-r { font-size: 30px; color: #ffe2a8; }
.ca-rr-tc.is-ileg.is-hero .ca-rr-tc-t { font-size: 10px; line-height: 1.2; color: #ffe2a8; text-wrap: balance; }
.ca-ileg-cta { margin: 12px 0 4px; min-height: 52px; font-size: 16px; background: linear-gradient(135deg, #c9953a, #ffe2a8 50%, #c9953a); color: #1a1204; border: 0; }
.ca-ileg-meet { display: block; margin: 8px 0 2px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(241, 192, 115, .55); background: rgba(241, 192, 115, .1); color: #ffe2a8; font: 800 13px/1.2 Inter, sans-serif; cursor: pointer; }
.ca-rr.is-ileg .ca-rr-trio { margin-top: 30px; } /* clear of the close button */

/* Admin Overview: a folded card (World Cup Tries, 11 Oct 2026) */
.ca-adm-fold-h { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ca-adm-fold-h b { flex: 1; }
.ca-adm-launch.is-folded { padding-top: 8px; padding-bottom: 8px; }
.ca-adm-fold-h .ca-fav-chev { border-color: var(--ca-muted); }
.ca-adm-fold-h[aria-expanded="true"] .ca-fav-chev { transform: rotate(-135deg); margin-top: 4px; }
/* Admin > Fans: the Player of the Week card, stacked so its name always shows (11 Oct 2026) */
.ca-adm-fan.is-stack { flex-wrap: wrap; }
.ca-adm-fan.is-stack > .ca-btn, .ca-adm-fan.is-stack > .ca-adm-fanask { flex: 1 1 100%; }
.ca-adm-fan-k { display: block; font: 800 10.5px/1.2 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #6ee7b7; }
.ca-adm-fan .ca-adm-pn b { display: block; font-size: 17px; }

/* Tap a trophy to read it in full (12 Oct 2026) */
.ca-trophy[data-tr-d] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ca-trophy[data-tr-d]:active { transform: scale(.97); }
.ca-trpop { position: fixed; inset: 0; z-index: 10095; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 6, 12, .62); }
.ca-trpop-card { width: min(320px, 100%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 18px 16px; border-radius: 18px; text-align: center;
  background: #1c1930; border: 1px solid var(--ca-line, rgba(255, 255, 255, .12)); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.ca-trpop-card.is-on { border-color: rgba(241, 192, 115, .55); }
.ca-trpop-ico { font-size: 40px; line-height: 1.1; }
.ca-trpop-card b { font: 900 18px/1.2 Inter, sans-serif; color: #fff; text-wrap: balance; }
.ca-trpop-card p { margin: 0; font: 600 14px/1.45 Inter, sans-serif; color: #d6d6e4; text-wrap: pretty; }
.ca-trpop-card small { margin: 2px 0 10px; font: 900 10.5px/1 Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #9a9ab0; }
.ca-trpop-card.is-on small { color: var(--ca-gold, #f1c073); }