/* /game/ -- the tour of everything in Karoball. Page-only components, prefixed g-. */

/* ------------------------------------------------------------ hero + jump nav */

.g-hero { min-height: 0; padding-top: clamp(64px, 10vw, 128px); }
.g-hero .page-hero__bg img { opacity: .5; object-position: 50% 40%; }
@media (max-width: 760px) { .g-hero .page-hero__bg img { opacity: .38; object-position: 16% 50%; } }
.g-hero__note { margin: 14px 0 0; font-size: .92rem; color: var(--muted); }
.g-hero__note strong { color: var(--ink-soft); font-weight: 700; }

.g-jump { margin-top: clamp(26px, 4vw, 40px); }
.g-jump__label { font: 700 .74rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.g-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.g-jump a.chip { text-decoration: none; padding: .55em .95em; background: rgba(16, 16, 14, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color .15s, border-color .15s, background .15s; }
.g-jump a.chip:hover { color: var(--sky); border-color: rgba(64, 181, 227, .5); background: rgba(64, 181, 227, .1); }
.g-jump a.chip .icon { color: var(--sky); }
@media (max-width: 560px) {
  .g-jump ul { display: grid; grid-template-columns: 1fr 1fr; }
  .g-jump a.chip { width: 100%; }
}

/* ------------------------------------------------------------ shared bits */

.page-game .section { padding-block: clamp(56px, 7.5vw, 96px); }
@media (max-width: 899px) { .page-game .feature__body { order: -1; } }
.g-checks-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .5em 1.2em; margin-top: .2em; }

.g-section-head { display: grid; gap: 8px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.g-section-head h2 { margin: 0; }
.g-section-head p:not(.eyebrow) { color: var(--ink-soft); font-size: 1.1rem; margin: 0; max-width: 62ch; }
@media (min-width: 980px) { .g-section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

.g-zoom { display: block; position: relative; cursor: zoom-in; color: inherit; }
.g-zoom::after {
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 10px;
  background: rgba(12, 12, 10, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8EEF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E") center / 18px no-repeat;
  border: 1px solid rgba(255, 255, 255, .14); opacity: .85; transition: opacity .2s, transform .2s var(--ease);
}
.g-zoom:hover::after { opacity: 1; transform: scale(1.06); }
.g-zoom img { transition: transform .6s var(--ease); }
.g-zoom:hover img { transform: scale(1.02); }
.g-zoom:focus-visible { outline-offset: -3px; }

.g-shot-caption { margin: 10px 2px 0; font-size: .9rem; color: var(--muted); }

.g-pill-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .9rem; }

.g-small { font-size: .92rem; color: var(--muted); }
.g-small a { color: var(--link); }

.g-sub { margin-top: clamp(40px, 6vw, 72px); }
.g-sub > h3 { margin-bottom: .35em; }
.g-sub > p { color: var(--ink-soft); max-width: 70ch; }

.feature__body .checks { margin-top: .4em; }
.feature__body > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ quick play: three kinds */

.g-kinds { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: clamp(28px, 4vw, 44px); }
.g-kind { --k: var(--sky); position: relative; padding: 20px 22px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.g-kind::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--k); }
.g-kind--ranked { --k: var(--red); }
.g-kind--casual { --k: var(--green); }
.g-kind--bots { --k: #C8CCCB; }
.g-kind__name { font: 400 1.5rem/1 var(--display); letter-spacing: .02em; margin: 6px 0 4px; color: var(--ink); }
.g-kind__tag { font: 700 .78rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--k); margin: 0 0 12px; }
.g-kind p:last-child { margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* ------------------------------------------------------------ ranks ladder */

.g-ranks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-rank { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.g-rank__disc {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rk) 55%, white), var(--rk) 60%, color-mix(in srgb, var(--rk) 65%, black));
  border: 2px solid color-mix(in srgb, var(--rk) 55%, black); box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
.g-rank__name { display: block; font: 400 1.08rem/1.1 var(--round); color: var(--ink); }
.g-rank__elo { display: block; font: 700 .74rem/1.3 var(--label); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
@media (max-width: 1100px) { .g-ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .g-ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* two-column info blocks */
.g-duo { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.g-panel { padding: clamp(20px, 2.6vw, 28px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.g-panel > h3 { font-size: 1.3rem; display: flex; align-items: center; gap: .5em; }
.g-panel > h3 .icon { color: var(--sky); width: 1.05em; height: 1.05em; }
.g-panel > p { color: var(--ink-soft); }
.g-panel > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ match rules: pitches to scale */

.g-modes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-mode { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 14px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.g-mode__stage { width: 100%; height: 120px; display: flex; align-items: flex-end; justify-content: center; }
.g-mode__label { text-align: center; }
.g-mode__name { display: block; font: 400 1.7rem/1 var(--display); color: var(--ink); }
.g-mode__time { display: block; margin-top: 6px; font: 700 .8rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }

.g-pitch {
  --lw: 1.5px;
  position: relative; width: calc(var(--s, 1) * 100%); aspect-ratio: 112 / 73; border-radius: 3px;
  background:
    linear-gradient(90deg, transparent calc(50% - var(--lw) / 2), var(--chalk) calc(50% - var(--lw) / 2), var(--chalk) calc(50% + var(--lw) / 2), transparent calc(50% + var(--lw) / 2)),
    radial-gradient(closest-side circle at 50% 50%, transparent calc(36% - var(--lw)), var(--chalk) calc(36% - var(--lw)), var(--chalk) 36%, transparent 36%),
    repeating-linear-gradient(90deg, var(--turf) 0 10%, var(--turf-light) 10% 20%);
  box-shadow: inset 0 0 0 var(--lw) var(--chalk), 0 6px 16px -6px rgba(0, 0, 0, .6);
}
.g-pitch::before, .g-pitch::after { content: ""; position: absolute; top: 30%; height: 40%; width: 13%; border: var(--lw) solid var(--chalk); }
.g-pitch::before { left: 0; border-left: 0; }
.g-pitch::after { right: 0; border-right: 0; }

@media (max-width: 760px) {
  .g-modes { grid-template-columns: 1fr; gap: 10px; }
  .g-mode { flex-direction: row-reverse; justify-content: flex-end; align-items: center; padding: 12px 14px; gap: 16px; }
  .g-mode__label { flex: none; width: 76px; text-align: left; }
  .g-mode__name { font-size: 1.45rem; }
  .g-mode__stage { height: auto; justify-content: flex-start; align-items: center; flex: 1; }
}

.g-rules { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin-top: clamp(24px, 3vw, 36px); }
.g-rule { padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.g-rule .card__icon { margin-bottom: 12px; }
.g-rule h3 { font-size: 1.2rem; margin: 0 0 .35em; }
.g-rule p { margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* rejoin: the big number */
.g-rejoin { display: grid; gap: 20px 32px; align-items: center; margin-top: clamp(28px, 4vw, 44px); padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg); border: 1px solid rgba(64, 181, 227, .3); background: radial-gradient(70% 140% at 0% 0%, rgba(64, 181, 227, .12), transparent 60%), var(--surface); }
@media (min-width: 820px) { .g-rejoin { grid-template-columns: auto 1fr; } }
.g-rejoin__num { font: 400 clamp(3.4rem, 7vw, 5rem)/.9 var(--display); color: var(--green); text-align: center; }
.g-rejoin__num small { display: block; font: 700 .8rem/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 10px; }
.g-rejoin h3 { margin: 0 0 .35em; }
.g-rejoin p { color: var(--ink-soft); margin: 0 0 .7em; }
.g-rejoin p:last-child { margin: 0; }

/* ------------------------------------------------------------ cups */

.g-cup-grid { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 980px) { .g-cup-grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.g-cup-grid .steps h3 { font-size: 1.15rem; }
.g-stands { display: flex; flex-direction: column; gap: 16px; }
.g-media-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.g-media-card__img { display: block; border-bottom: 1px solid var(--line); background: var(--bg-deep); }
.g-media-card__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.g-media-card__body { padding: 18px 20px 20px; }
.g-media-card__body h3 { font-size: 1.25rem; margin: 0 0 .35em; }
.g-media-card__body p { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.g-media-card__body p + p { margin-top: .6em; }

.g-trophies { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.g-trophy { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.g-trophy .icon { width: 28px; height: 28px; flex: none; color: var(--gold); }
.g-trophy--silver .icon { color: #C8CCCB; }
.g-trophy b { display: block; font: 400 1.05rem/1.2 var(--round); color: var(--ink); margin-bottom: 2px; }
.g-trophy span { font-size: .92rem; color: var(--ink-soft); }

/* ------------------------------------------------------------ challenges */

.g-chal-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); margin-top: clamp(32px, 5vw, 56px); }
.g-chal { --cc: var(--sky) !important; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 6px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--cc) 12%, var(--surface-2)), var(--surface) 55%); }
.g-chal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cc); }
.g-chal__name { font-size: 1.5rem; margin: 2px 0 0; }
.g-chal__unlock { align-self: flex-start; }
.g-chal__unlock { position: relative; display: inline-flex; align-items: center; gap: .45em; padding: .35em .7em; border-radius: 999px; font: 700 .74rem/1 var(--label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--cc); border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); background: color-mix(in srgb, var(--cc) 10%, transparent); }
.g-chal__unlock:hover { color: var(--ink); border-color: var(--cc); }
.g-chal__unlock::after { content: ""; position: absolute; inset: -11px -6px; } /* a 44px-tall tap target round the small pill */
.g-chal__unlock .g-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cc); }
.g-chal__line { margin: 0; color: var(--ink); font-family: var(--round); font-size: 1.04rem; line-height: 1.45; }
.g-chal__meta { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: .94rem; padding: 12px 14px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .05); }
.g-chal__meta dt { font: 700 .72rem/1.6 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.g-chal__meta dd { margin: 0; color: var(--ink-soft); }
.g-stars { color: var(--gold); letter-spacing: .05em; }
.g-chal__note { margin: 0; font-size: .9rem; color: var(--muted); }
.g-chal details { margin-top: auto; border-top: 1px solid var(--line-soft); }
/* the whole row is the toggle, 44px tall, so it's easy to hit with a thumb */
.g-chal summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: 44px; gap: .4em; font: 700 .82rem/1.4 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.g-chal summary::-webkit-details-marker { display: none; }
.g-chal summary .icon { transition: transform .2s; }
.g-chal details[open] summary .icon { transform: rotate(180deg); }
.g-levels { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; counter-reset: lvl; }
.g-levels li { counter-increment: lvl; display: grid; grid-template-columns: 54px 1fr; gap: 8px; font-size: .93rem; color: var(--ink-soft); }
.g-levels li::before { content: "Lv " counter(lvl); font: 700 .74rem/1.75 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--cc); }

.g-pay { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 980px) { .g-pay { grid-template-columns: 1fr 1fr; align-items: start; } }
.g-pay .table-wrap { margin: 0; }
.g-pay .table td, .g-pay .table th { white-space: nowrap; }
.g-pay .table td.g-wrap { white-space: normal; }
.g-pay__text h3 { margin-bottom: .4em; }
.g-pay__text p { color: var(--ink-soft); }
.g-gold { color: var(--gold); font-weight: 700; }

.g-drills { margin-top: clamp(36px, 5vw, 56px); }
.g-drills .gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.g-celeb-shots { margin-top: clamp(24px, 3vw, 36px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.g-replay-shots { margin-top: clamp(28px, 3.5vw, 44px); }

/* ------------------------------------------------------------ town */

.g-town-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--bg-deep); }
/* crop the frame so the leaderboard overlay (top left) and the minimap labels (bottom right) stay out:
   wide screens show y 37-94% (all of the round square) and the left 86%; phones x 18-85%, the lower 89% */
.g-town-media .g-zoom { aspect-ratio: 8 / 3; overflow: hidden; }
.g-town-media img { position: absolute; width: 116.5%; max-width: none; left: 0; bottom: -10%; transform-origin: 50% 100%; }
.g-town-media .g-zoom:hover img { transform: scale(1.02); }
@media (max-width: 700px) {
  .g-town-media .g-zoom { aspect-ratio: 4 / 3; }
  .g-town-media img { width: 150%; left: -27%; bottom: 0; }
}

.g-town-cols { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 980px) { .g-town-cols { grid-template-columns: 1fr 1fr; } }

.g-pitches { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.g-pitches li { display: inline-flex; align-items: baseline; gap: .45em; padding: .45em .8em; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font: 400 1.05rem/1 var(--round); color: var(--ink); }
.g-pitches li span { font: 700 .74rem/1 var(--label); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }

/* the 40-minute day */
.g-day { margin-top: 14px; }
.g-day__bar { display: flex; height: 40px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.g-day__seg { position: relative; display: flex; align-items: center; justify-content: center; font: 700 .74rem/1 var(--label); letter-spacing: .08em; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.g-day__seg--day { flex: 22; background: linear-gradient(180deg, #7FD3F5, #4FB4E0); color: #06263A; }
.g-day__seg--dusk { flex: 4; background: linear-gradient(180deg, #F7A35C, #C8603F); color: #2B1200; }
.g-day__seg--night { flex: 10; background: linear-gradient(180deg, #1A2550, #0E1530); color: #C6D1E3; }
.g-day__seg--dawn { flex: 4; background: linear-gradient(180deg, #E9A3B8, #9D6BA8); color: #2A0F2A; }
.g-day__seg--night::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1.2px 1.2px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 65%, #fff, transparent), radial-gradient(1.4px 1.4px at 85% 25%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent); opacity: .7; }
.g-day__legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; color: var(--ink-soft); }
.g-day__legend li { display: inline-flex; align-items: center; gap: .5em; }
.g-day__legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.g-day__legend b { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) { .g-day__seg { font-size: 0; } }

.g-rooms { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-top: clamp(28px, 4vw, 44px); }

/* ------------------------------------------------------------ kit */

.g-slots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.g-slot { padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.g-slot .g-slot__count { font: 400 2rem/1 var(--display); color: var(--sky); margin: 14px 0 2px; }
.g-slot__count small { font: 700 .76rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-left: .3em; }
.g-slot h3 { font-size: 1.2rem; margin: 0 0 .3em; }
.g-slot p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.g-odds { display: flex; height: 18px; border-radius: 999px; overflow: hidden; margin: 6px 0 18px; border: 1px solid var(--line); }
.g-odds span { display: block; min-width: 3px; }
.g-rarity-table .rarity { min-width: 7.6em; justify-content: center; }
.g-rarity-table td { vertical-align: middle; }
.g-rarity-table td.num, .g-rarity-table th.num { text-align: right; }
.g-rarity-row td:first-child { box-shadow: inset 3px 0 0 var(--rc); }

.g-sources td:first-child { color: var(--ink); font-weight: 600; }
.g-sources td { min-width: 9em; }

.g-kit-more { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* ------------------------------------------------------------ the daily shop */

.g-shop-split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 980px) { .g-shop-split { grid-template-columns: 1fr 1.15fr; } }

.g-shop {
  position: relative; padding: 18px; border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 34px, rgba(0, 0, 0, .18) 34px 36px),
    linear-gradient(180deg, #5A3A22, #3E2716);
  border: 1px solid #6E4A2C; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 220, 170, .15);
}
.g-shop__sign { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #22160D; border: 1px solid #7A5534; }
.g-shop__sign b { font: 400 1.15rem/1.1 var(--display); color: #FFE7B8; letter-spacing: .03em; }
.g-shop__sign span { font: 700 .74rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: #E8C996; }
.g-shop__row-label { font: 700 .7rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: #E8C996; margin: 4px 2px 8px; }
.g-shop__row { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-shop__row:last-child { margin-bottom: 0; }
.g-stand { --rc: var(--r-common); position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px 10px; border-radius: 10px; background: linear-gradient(180deg, #1F2433, #11141C); border: 1px solid color-mix(in srgb, var(--rc) 55%, #2F343C); box-shadow: 0 0 18px -8px var(--rc), inset 0 0 0 1px rgba(255, 255, 255, .03); min-width: 0; }
.g-stand__what { font: 700 .72rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.g-stand .rarity { font-size: .66rem; padding: .32em .5em; align-self: flex-start; }
.g-stand__mix { display: flex; flex-direction: column; gap: 4px; }
.g-stand__price { margin-top: auto; display: inline-flex; align-items: center; gap: .4em; font: 700 .78rem/1.2 var(--label); color: var(--gold); }
.g-stand__price::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #FFE9A6, var(--gold) 55%, var(--gold-deep)); }
.g-stand--featured { background: radial-gradient(90% 60% at 50% 0%, rgba(250, 204, 51, .16), transparent 70%), linear-gradient(180deg, #1F2433, #11141C); }
@media (max-width: 560px) {
  .g-shop { padding: 12px; }
  .g-shop__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ celebrations */

.g-celeb-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: how; }
.g-celeb-how li { counter-increment: how; position: relative; padding: 20px 20px 20px 70px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.g-celeb-how li::before {
  content: counter(how); position: absolute; left: 18px; top: 18px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font: 400 1.2rem/1 var(--display); color: var(--sky-ink); background: radial-gradient(circle at 35% 30%, #FFE9A6, var(--gold) 60%, var(--gold-deep)); box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}
.g-celeb-how h3 { font-size: 1.15rem; margin: 6px 0 .3em; }
.g-celeb-how p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.g-celebs { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-celebs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .g-celebs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-celebs__intro { grid-column: span 2; } }
.g-celeb {
  --rc: var(--r-common); position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 10px;
  padding: 20px 20px 22px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--rc) 50%, var(--line));
  background:
    radial-gradient(90% 70% at 50% -10%, color-mix(in srgb, var(--rc) 20%, transparent), transparent 70%),
    linear-gradient(180deg, #1A1E26, #11141C);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 12%, transparent) inset, 0 10px 30px -18px var(--rc);
}
.g-celeb::before { /* two soft floodlight beams, like the game's item cards */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background:
    linear-gradient(118deg, transparent 30%, color-mix(in srgb, var(--rc) 10%, transparent) 42%, transparent 54%),
    linear-gradient(62deg, transparent 46%, color-mix(in srgb, var(--rc) 8%, transparent) 58%, transparent 70%);
}
.g-celeb::after { /* the neon rim on top */
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--rc); box-shadow: 0 0 12px var(--rc);
}
.g-celeb .rarity { align-self: flex-start; }
.g-celeb h3 { margin: 0; font-size: 1.4rem; }
.g-celeb p { margin: 0; color: var(--ink-soft); font-family: var(--round); font-size: 1rem; line-height: 1.45; }
.g-celeb--uncommon { --rc: var(--r-uncommon); }
.g-celeb--rare { --rc: var(--r-rare); }
.g-celeb--epic { --rc: var(--r-epic); }
.g-celeb--legendary { --rc: var(--r-legendary); }
.g-celeb--legendary h3 { color: #FFF1C2; }

.g-celebs__intro { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 24px; border-radius: var(--radius); border: 1px dashed var(--line); background: rgba(21, 24, 29, .5); }
.g-celebs__intro p { margin: 0; color: var(--ink-soft); }
.g-celebs__intro .g-big { font: 400 2.4rem/1 var(--display); color: var(--gold); }
.g-celebs__intro .g-big small { font: 700 .8rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-left: .4em; }

.g-celeb-notes { margin-top: clamp(24px, 3vw, 36px); }

/* ------------------------------------------------------------ replays */

.g-keys { margin: 0; display: grid; grid-template-columns: max-content 1fr; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; background: var(--surface); }
.g-keys dt, .g-keys dd { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.g-keys dt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: rgba(0, 0, 0, .15); }
.g-keys dd { color: var(--ink-soft); display: flex; align-items: center; }
.g-keys dt:last-of-type, .g-keys dd:last-of-type { border-bottom: 0; }
.g-keys__head { margin: 0; padding: 14px 16px; font: 700 .76rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-2); }
@media (max-width: 340px) {
  .g-keys { grid-template-columns: 1fr; }
  .g-keys dt { border-bottom: 0; padding-bottom: 4px; }
  .g-keys dd { padding-top: 4px; }
}

.g-replay-facts { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 22px; }
.g-replay-facts div { padding: 16px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.g-replay-facts b { display: block; font: 400 1.7rem/1 var(--display); color: var(--sky); }
.g-replay-facts span { display: block; margin-top: 6px; font: 700 .72rem/1.3 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------ friends, profiles, flags */

.g-people { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g-person { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 26px); border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.g-person__head { display: flex; align-items: center; gap: 14px; }
.g-person__head h3 { margin: 0; font-size: 1.3rem; }
.g-person .g-person__num { margin: 0 0 0 auto; text-align: right; font: 400 1.6rem/1 var(--display); color: var(--sky); }
.g-person__num small { display: block; font: 700 .66rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.g-person p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.g-person .checks { margin-top: 2px; gap: .45em; font-size: .96rem; }
/* a party of three: the game's own tokens, in their kits */
.g-party { display: flex; align-items: center; }
.g-party img { display: block; width: 52px; height: auto; margin-left: -12px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.g-party img:first-child { margin-left: -2px; }

/* ------------------------------------------------------------ chat */

.g-chat-split { display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 980px) { .g-chat-split { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.g-tabs-demo { display: grid; gap: 12px; }
.g-tab-card { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.g-tab-card h3 { margin: 0 0 .35em; font-size: 1.2rem; display: flex; align-items: center; gap: .5em; }
.g-tab-card p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.g-tab-card p + p { margin-top: .55em; }
.g-tab-card .chip { font-size: .7rem; }

.g-qc { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-qc__group { padding: 16px 16px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); min-width: 0; }
.g-qc__group h4 { display: flex; align-items: center; gap: .55em; margin: 0 0 10px; font: 400 1.1rem/1.1 var(--round); color: var(--ink); }
.g-qc__group ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.g-qc__group li { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .95rem; min-width: 0; }
.g-qc__group li kbd { flex: none; }
/* inline in a paragraph: the bottom margin makes its line tall enough that the tail clears the next line */
.g-bubble { position: relative; display: inline-block; margin-bottom: 9px; padding: .25em .7em; border-radius: 10px; background: #F4F8FF; color: #0B1220; font: 400 .93rem/1.3 var(--round); }
.g-bubble::after { content: ""; position: absolute; left: 12px; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
@media (max-width: 340px) { .g-qc { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ round 2 */

/* row headers in the data tables */
.g-pay .table th[scope="row"], .g-rarity-table th[scope="row"] { background: transparent; font: 400 1.05rem/1.2 var(--round); letter-spacing: 0; text-transform: none; color: var(--ink); vertical-align: middle; }
.g-pay .table td { vertical-align: middle; }
.g-rarity-row th[scope="row"] { box-shadow: inset 3px 0 0 var(--rc); }
.g-rarity-row td:first-child { box-shadow: none; }
@media (max-width: 560px) {
  .g-pay .table th, .g-pay .table td, .g-rarity-table th, .g-rarity-table td { padding: 10px 9px; }
  .g-pay .table td, .g-pay .table th { white-space: normal; }
  .g-rarity-table .rarity { min-width: 0; }
}

.g-rarity-split { display: grid; gap: 24px clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1000px) { .g-rarity-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.g-rarity-split .table-wrap { margin: 0; }
.g-rarity-split > div > p { color: var(--ink-soft); }
.g-rarity-split > div > .g-small { color: var(--muted); }

/* champion title */
.g-title-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(64, 181, 227, .3); background: radial-gradient(80% 120% at 0% 0%, rgba(64, 181, 227, .1), transparent 60%), var(--surface); }
.g-title-card p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* crop a 16:9 frame to the part that matters (--cx/--cy = left/top of the crop,
   --cw/--ch = its width/height, all as fractions of the frame). The rooms use it to
   leave out the leaderboard overlay, the minimap labels and the dark margins. */
.g-crop { position: relative; overflow: hidden; aspect-ratio: calc(var(--cw) * 16) / calc(var(--ch) * 9); }
.g-crop img, .g-media-card__img.g-crop img, .feature__media .g-crop img {
  position: absolute; max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: fill;
  width: calc(100% / var(--cw)); left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%);
}

/* profile panel */
.g-profile { display: grid; gap: 18px 40px; align-items: center; }
@media (min-width: 900px) { .g-profile { grid-template-columns: 1fr 1fr; } }
.g-profile h3 { font-size: 1.3rem; display: flex; align-items: center; gap: .5em; }
.g-profile h3 .icon { color: var(--sky); width: 1.05em; height: 1.05em; }
.g-profile p { color: var(--ink-soft); margin: 0; }
.g-profile .checks { margin: 0; }

/* rules on phones: icon beside the title */
@media (max-width: 560px) {
  .g-rule { display: grid; grid-template-columns: 46px 1fr; gap: 4px 14px; align-items: center; }
  .g-rule .card__icon { margin: 0; }
  .g-rule p { grid-column: 1 / -1; }
  .g-mode__stage { max-width: 170px; }
}

/* phones: tighter cards, so the long tour stays quick to scroll */
@media (max-width: 560px) {
  .g-celebs { gap: 10px; }
  .g-celeb { padding: 16px 16px 18px; gap: 8px; }
  .g-celeb h3 { font-size: 1.25rem; }
  .g-celeb p { font-size: .95rem; }
  .g-celeb-how li { padding: 16px 16px 16px 64px; }
  .g-celeb-how li::before { left: 14px; top: 16px; }
  .g-replay-facts { gap: 8px; }
  .g-replay-facts div { padding: 14px 8px; }
  .g-replay-facts b { font-size: 1.3rem; }
  .g-replay-facts span { font-size: .66rem; }
  .g-keys dt, .g-keys dd { padding: 10px 12px; }
  .g-qc__group { padding: 12px 12px 10px; }
  .g-qc__group li { font-size: .9rem; gap: 8px; }
  .g-chal { padding: 18px 18px 4px; }
}

/* inside the lighter surface sections, lift panels and table heads a step */
.section--surface .g-panel { background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.section--surface .table th { background: var(--surface-2); }
.section--surface .g-rarity-table th[scope="row"] { background: transparent; }
.section--surface .table-wrap { background: rgba(16, 16, 14, .35); }

/* where gold and kit come from: row headers, and stacked rows on phones */
.g-sources th[scope="row"] { background: transparent; font: 700 .97rem/1.4 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); }
@media (max-width: 640px) {
  .g-sources thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .g-sources, .g-sources tbody, .g-sources tr, .g-sources th, .g-sources td { display: block; width: 100%; }
  .g-sources tr { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
  .g-sources tr:last-child { border-bottom: 0; }
  .g-sources th[scope="row"], .g-sources td { padding: 0; border: 0; min-width: 0; }
  .g-sources th[scope="row"] { margin-bottom: 4px; font-size: 1rem; }
  .g-sources td { display: grid; grid-template-columns: 44px 1fr; gap: 10px; font-size: .94rem; }
  .g-sources td + td { margin-top: 2px; }
  .g-sources td::before { content: attr(data-label); font: 700 .7rem/1.9 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .g-sources tbody tr:hover td { background: none; }
}
@media (max-width: 560px) {
  .g-hide-sm { display: none; }
  /* kit slots: icon beside the text */
  .g-slot { display: grid; grid-template-columns: 46px 1fr; gap: 0 14px; align-items: start; padding: 16px; }
  .g-slot .card__icon { grid-row: span 3; }
  .g-slot .g-slot__count { margin: 0 0 2px; font-size: 1.6rem; }
}