/*
 * The app shell, after Kick: full width, a 60px top bar, a left rail of
 * channels, and content that runs edge to edge. Loaded last so it wins.
 *
 * Kick's own numbers: page rgb(11,11,12), surfaces rgb(23,26,28), the green
 * rgb(181,108,255), a 60px header, a rail around 300px, small radii (4px on
 * buttons, 8px on cards), Inter at 16px with 700 headings. We keep Plus
 * Jakarta Sans (the founder's choice) and the small radii; everything else
 * follows the reference, then goes one step further where it costs nothing:
 * the rail also carries your own day, and the rows carry what Kick's cannot,
 * a live faction war and the season board.
 */

:root {
  --green: #b56cff; --ok: #b56cff; --accent: #b56cff;
  --kk-bg: #0b0b0c;
  --kk-surface: #171a1c;
  --kk-surface-2: #1f2326;
  --kk-line: rgba(240, 241, 242, .08);
  --kk-line-2: rgba(240, 241, 242, .16);
  --kk-text: #f0f1f2;
  --kk-mute: #a6adb3;
  --kk-dim: #6f7780;
  --kk-green: #b56cff;
  --kk-green-ink: #ffffff;
  --kk-red: #ff4d4f;
  --kk-top: 60px;
  --kk-rail: 300px;
  --kk-rail-min: 64px;
  --ed-green: var(--kk-green);
  --ed-green-ink: var(--kk-green-ink);
  --ed-line: var(--kk-line);
  --ed-line-strong: var(--kk-line-2);
  --ed-card: var(--kk-surface);
  --ed-card-hover: var(--kk-surface-2);
  --ed-ink: var(--kk-text);
  --ed-mute: var(--kk-mute);
  --ed-dim: var(--kk-dim);
  --ed-radius: 8px;
  --ed-shadow: none;
  --panel: var(--kk-bg);
  --ground: var(--kk-bg);
}

html, body, .app { background: var(--kk-bg) !important; color: var(--kk-text); }

/* ---- full width: the floating panel becomes the page ---- */
.page-shell {
  max-width: none !important; width: 100% !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--kk-bg) !important; min-height: 100vh;
  padding-top: var(--kk-top);
}
body.kk-ready .page-shell { padding-left: var(--kk-rail); transition: padding-left 200ms ease; }
body.kk-ready.kk-collapsed .page-shell { padding-left: var(--kk-rail-min); }
@media (max-width: 900px) { body.kk-ready .page-shell, body.kk-ready.kk-collapsed .page-shell { padding-left: 0; } }

/* ---- the top bar ---- */
.kk-top {
  position: fixed; top: 0; left: 0; right: 0; height: var(--kk-top); z-index: 70;
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 16px;
  padding: 0 16px; background: var(--kk-bg); border-bottom: 1px solid var(--kk-line);
}
.kk-top .ar-top { display: contents; }
.kk-top .ar-left { display: flex; align-items: center; gap: 12px; }
.kk-top .ar-mark img, .kk-top .ar-mark { height: 30px; }
.kk-top .ar-nav { display: none; }              /* the rail carries navigation now */
.kk-top .ar-clock { display: none; }
.kk-top .gu-search { flex: 1; max-width: 560px !important; justify-self: center; margin: 0 !important; }
.kk-top .gu-search input { background: var(--kk-surface); border-color: var(--kk-line); border-radius: 4px; padding: 9px 12px 9px 34px; font-size: 14px; }
.kk-top .ar-right { display: flex; align-items: center; gap: 8px; }
.kk-top #balance.ar-bal, .kk-top #tier.ar-bal { background: var(--kk-surface); border-radius: 4px; padding: 6px 10px; font-size: 13px; }
.kk-top .ar-tag { background: transparent; border: 0; color: var(--kk-text); font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 4px; }
.kk-top .ar-tag:hover { background: var(--kk-surface); }
.kk-signup { background: var(--kk-green); color: var(--kk-green-ink); font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 4px; text-decoration: none; }
.kk-burger { width: 36px; height: 36px; border: 0; background: transparent; color: var(--kk-text); border-radius: 4px; cursor: pointer; font-size: 18px; display: grid; place-items: center; }
.kk-burger:hover { background: var(--kk-surface); }

/* ---- the rail ---- */
.kk-side {
  position: fixed; top: var(--kk-top); left: 0; bottom: 0; width: var(--kk-rail); z-index: 60;
  background: var(--kk-bg); border-right: 1px solid var(--kk-line); overflow-y: auto; overflow-x: hidden;
  padding: 10px 8px; display: flex; flex-direction: column; gap: 4px;
  transition: width 200ms ease;
}
body.kk-collapsed .kk-side { width: var(--kk-rail-min); }
@media (max-width: 900px) { .kk-side { display: none; } }
.kk-nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; color: var(--kk-text); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.kk-nav:hover { background: var(--kk-surface); }
.kk-nav.is-on { background: var(--kk-surface); }
.kk-nav i { width: 20px; text-align: center; font-style: normal; font-size: 16px; color: var(--kk-mute); }
.kk-nav.is-on i { color: var(--kk-green); }
.kk-sep { height: 1px; background: var(--kk-line); margin: 8px 4px; }
.kk-side-h { font-size: 13px; font-weight: 600; color: var(--kk-mute); padding: 8px 12px 4px; white-space: nowrap; }
.kk-ch { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 6px; text-decoration: none; color: var(--kk-text); }
.kk-ch:hover { background: var(--kk-surface); }
.kk-ch-av { width: 32px; height: 32px; border-radius: 50%; background: var(--kk-surface-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--kk-mute); overflow: hidden; border: 2px solid transparent; }
.kk-ch.is-live .kk-ch-av { border-color: var(--kk-green); }
.kk-ch-av img { width: 100%; height: 100%; object-fit: cover; }
.kk-ch-body { min-width: 0; display: flex; flex-direction: column; }
.kk-ch-body b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-ch-body small { font-size: 12px; color: var(--kk-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-ch-n { font-size: 12px; font-weight: 600; color: var(--kk-mute); white-space: nowrap; }
.kk-ch.is-live .kk-ch-n::before { content: '● '; color: var(--kk-green); font-size: 9px; vertical-align: 1px; }
.kk-side-more { background: none; border: 0; color: var(--kk-mute); font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 12px; text-align: left; cursor: pointer; border-radius: 6px; }
.kk-side-more:hover { background: var(--kk-surface); color: var(--kk-text); }
body.kk-collapsed .kk-side-h, body.kk-collapsed .kk-ch-body, body.kk-collapsed .kk-ch-n, body.kk-collapsed .kk-nav span, body.kk-collapsed .kk-side-more, body.kk-collapsed .kk-day { display: none; }
body.kk-collapsed .kk-ch { grid-template-columns: 32px; justify-content: center; padding: 7px 8px; }
body.kk-collapsed .kk-nav { justify-content: center; padding: 10px 8px; }

/* the rail's "better": your day, signed in */
.kk-day { margin: 4px 4px 8px; padding: 10px 12px; border-radius: 6px; background: var(--kk-surface); display: flex; flex-direction: column; gap: 6px; }
.kk-day b { font-size: 13px; font-weight: 600; }
.kk-day small { font-size: 12px; color: var(--kk-mute); }
.kk-day .kk-bar { height: 4px; border-radius: 2px; background: var(--kk-line-2); overflow: hidden; }
.kk-day .kk-bar i { display: block; height: 100%; background: var(--kk-green); }
.kk-day a { color: var(--kk-green); font-size: 12.5px; font-weight: 600; text-decoration: none; }

/* ---- content: edge to edge with Kick's gutters ---- */
.hm-body, .ar-body, .sn, .pf-body, .cr-body, .cl { max-width: none !important; padding-left: 24px !important; padding-right: 24px !important; }
.hm-hero { display: none; }                      /* Kick opens on the stream, not a slogan */
.hm-foot { padding-left: 24px; padding-right: 24px; }
.hm-head { margin: 28px 0 12px; }
.hm-head b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.hm-head span { font-size: 13px; }

/* the featured room: a 16:9 player with the rail's "day" beside it on wide screens */
#feature { margin-top: 16px; }
.hm-feature { border-radius: 8px !important; }

/* ---- rows of 16:9 channel cards ---- */
/* The live row is one line: big frames in a carousel, snapped, with arrows
   in the section head. Big enough that one room fills the eye. */
.hm-people {
  display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px;
  scrollbar-width: none;
}
.hm-people::-webkit-scrollbar { display: none; }
.hm-people .kk-card { flex: 0 0 520px; scroll-snap-align: start; }
@media (max-width: 1100px) { .hm-people .kk-card { flex-basis: 440px; } }
@media (max-width: 700px)  { .hm-people .kk-card { flex-basis: 86vw; } }
.kk-thumb { border-radius: 10px; }
.kk-meta b { font-size: 16px; }
.kk-meta small { font-size: 13.5px; }
.kk-av { width: 44px; height: 44px; }
.kk-meta { grid-template-columns: 44px 1fr; gap: 12px; }
.hm-row-nav { display: inline-flex; gap: 6px; margin-left: auto; }
.hm-row-nav button {
  width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--kk-line-2);
  background: var(--kk-surface); color: var(--kk-text); font-size: 16px; cursor: pointer; display: grid; place-items: center;
}
.hm-row-nav button:hover { background: var(--kk-surface-2); }
.hm-row-nav button:disabled { opacity: .35; cursor: default; }
.kk-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--kk-text); }
.kk-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--kk-surface); }
.kk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms ease; }
.kk-card:hover .kk-thumb img { transform: scale(1.03); }
.kk-thumb-fill { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: var(--kk-mute); background: radial-gradient(80% 80% at 50% 100%, color-mix(in srgb, var(--tint, #b56cff) 28%, transparent), transparent), var(--kk-surface); }
.kk-live { position: absolute; top: 8px; left: 8px; background: var(--kk-red); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 4px; }
.kk-count { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 4px; }
.kk-cat-pill { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 4px; }
.kk-meta { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; }
.kk-av { width: 40px; height: 40px; border-radius: 50%; background: var(--kk-surface-2); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--kk-mute); overflow: hidden; }
.kk-av img { width: 100%; height: 100%; object-fit: cover; }
.kk-meta b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-meta small { display: block; font-size: 13px; color: var(--kk-mute); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- category tiles (the arcade), portrait like Kick's ---- */
.hm-arcade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; overflow: visible; }
.hm-game { flex: none; border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; }
.hm-game:hover { transform: none; }
.hm-game-art { aspect-ratio: 3 / 4; height: auto; border-radius: 8px; overflow: hidden; background: radial-gradient(80% 80% at 50% 100%, rgba(181,108,255,.18), transparent), var(--kk-surface); transition: transform 200ms ease; }
.hm-game:hover .hm-game-art { transform: translateY(-3px); }
.hm-game-body { padding: 8px 2px 0; }
.hm-game-body b { font-size: 14px; font-weight: 600; }
.hm-game-body small { font-size: 12.5px; }
.hm-game-cta { display: none; }

/* ---- cards elsewhere: Kick's small radius and flat surfaces ---- */
.hm-lc, .hm-cc, .hm-tn, .hm-me, .hm-war, .pf-panel, .sn-pass, .hm-promo, .hm-strip, .ar-tile, .gu-ob-card, .hm-fchip {
  border-radius: 8px !important; background: var(--kk-surface) !important; border-color: var(--kk-line) !important;
}
.hm-cta, .ar-buy, .sn-pass-buy, .pf-claim, .gu-ob-next, .kk-signup { border-radius: 4px !important; }
.hm-continue { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hm-war { --lead: var(--kk-green); }
.hm-tn-clock { color: var(--kk-green); }

/* ---- store and the rest inherit the shell ---- */

/* ---- the stage: the featured room and its crowdplay panel, side by side ---- */
/*
 * The video sets the height (16:9 of its width) and the panel fills that
 * height beside it, absolutely, so the panel can scroll inside the room's
 * frame instead of stretching the room. Under 1100px the panel drops below.
 */
.hm-stage { position: relative; padding-right: 436px; min-height: 0; }
.hm-feature.is-stage { position: relative; display: block; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; height: auto; }
.hm-feature.is-stage .hm-shot { position: absolute; inset: 0; }
.hm-stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.hm-feature.is-stage .hm-feat-top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; }
.hm-feature.is-stage .hm-feat-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-decoration: none; color: inherit; padding: 18px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hm-stage-side { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; display: flex; flex-direction: column; background: var(--kk-surface); border: 1px solid var(--kk-line); border-radius: 8px; overflow: hidden; }
.hm-stage-side-head { padding: 12px 14px; border-bottom: 1px solid var(--kk-line); display: flex; flex-direction: column; gap: 2px; flex: none; }
.hm-stage-side-head b { font-size: 15px; font-weight: 700; }
.hm-stage-side-head span { font-size: 12.5px; color: var(--kk-mute); }
.hm-stage-side #crowd { position: static !important; width: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
.hm-stage-side #crowd[hidden] { display: none; }
@media (max-width: 1100px) {
  .hm-stage { padding-right: 0; }
  .hm-stage-side { position: static; width: auto; margin-top: 12px; max-height: 480px; }
}
/* The dock inside the stage panel flows and scrolls; on the watch page it floats. */
/* The dock keeps the watch page's own look (the frame carries the .watch-page scope); only its floating position is undone here. */
.hm-stage-side .crowd-dock { position: static !important; width: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; transform: none !important; bottom: auto !important; left: auto !important; right: auto !important; }
.hm-stage-side #crowd { padding: 6px 8px 10px; }
/* The watch page anchors the dock to the bottom of a flex column; here it reads from the top and scrolls. */
.hm-stage-side #crowd { display: block !important; justify-content: flex-start !important; }
/* On the home the vote leads: it is the thing a visitor is asked to try. */
.hm-stage-side .crowd-dock { display: flex !important; flex-direction: column !important; height: auto !important; }
.hm-stage-side .crowd-dock #crowd-poll { order: -1; }
.hm-stage-side .crowd-dock .crowd-head { order: -2; }

/* The stage sits right under the bar: no hero, no slack above the room. */
.hm-body { padding-top: 12px !important; }
#feature { margin-top: 0 !important; }
.hm-hero { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; }
.hm-stage { margin-top: 0; }
/* Tighter still: the stage touches the bar. */
.hm-body { padding-top: 0 !important; }
.page-shell { padding-top: calc(var(--kk-top) + 4px); }
#feature, .hm-stage { margin-top: 0 !important; }
/* The old floating-panel design padded the body by 28px on every side; the
   shell has no panel to float, so the body has no padding at all. */
body.app, .app { padding: 0 !important; margin: 0 !important; }
.page-shell { padding-top: calc(var(--kk-top) + 12px) !important; }

/* ---- the nudge above the panel ---- */
.hm-try { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--kk-line); background: rgba(181,108,255,.06); flex: none; }
.hm-try[hidden] { display: none; }
.hm-try-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kk-green); flex: none; box-shadow: 0 0 0 0 rgba(181,108,255,.6); animation: try-ping 1.6s ease-out infinite; }
.hm-try-text { font-size: 13px; color: var(--kk-text); line-height: 1.35; }
.hm-try-cta { margin-left: auto; flex: none; background: var(--kk-green); color: var(--kk-green-ink); font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 4px; text-decoration: none; }
.hm-try-cta[hidden] { display: none; }
@keyframes try-ping { 0% { box-shadow: 0 0 0 0 rgba(181,108,255,.55); } 100% { box-shadow: 0 0 0 10px rgba(181,108,255,0); } }
/* While a vote is open and unanswered, the options ask for it. */
.hm-stage-side.is-nudging #crowd-poll button:not(:disabled) { animation: try-glow 1.6s ease-in-out infinite; border-color: rgba(181,108,255,.5) !important; }
.hm-stage-side.is-nudging #crowd-poll button:not(:disabled):nth-child(2) { animation-delay: .2s; }
.hm-stage-side.is-nudging #crowd-poll button:not(:disabled):nth-child(3) { animation-delay: .4s; }
@keyframes try-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(181,108,255,0); } 50% { box-shadow: 0 0 0 3px rgba(181,108,255,.25); } }
@media (prefers-reduced-motion: reduce) { .hm-try-dot, .hm-stage-side.is-nudging #crowd-poll button { animation: none; } }

/* ---- the spotlight ---- */
.hm-spot { position: fixed; inset: 0; z-index: 88; pointer-events: none; opacity: 1; }
.hm-spot:not(.is-on) { opacity: 0; }
.hm-spot.is-on { animation: spot-in 320ms ease; }
@keyframes spot-in { from { opacity: 0; } to { opacity: 1; } }
.hm-spot.is-on { opacity: 1; }
.hm-spot-hole {
  position: fixed; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(5, 6, 8, .82), 0 0 0 2px rgba(181,108,255,.9), 0 0 40px rgba(181,108,255,.25);
  transition: top 200ms ease, left 200ms ease, width 200ms ease, height 200ms ease;
}
.hm-spot-tip {
  position: fixed; width: 300px; pointer-events: auto;
  background: var(--kk-surface); border: 1px solid var(--kk-line-2); border-radius: 10px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.hm-spot-tip b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.hm-spot-tip span { font-size: 13.5px; color: var(--kk-mute); line-height: 1.45; }
.hm-spot-tip button { align-self: flex-start; margin-top: 4px; background: var(--kk-green); color: var(--kk-green-ink); border: 0; border-radius: 4px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
@media (max-width: 1100px) { .hm-spot-tip { width: min(300px, 90vw); } }
@media (prefers-reduced-motion: reduce) { .hm-spot, .hm-spot-hole { transition: none; } }
.hm-spot-step { font-size: 11px; font-weight: 600; color: var(--kk-mute); letter-spacing: .04em; }
/* The frame borrows .watch-page for the dock's look, not for the page's size. */
.hm-stage-side.watch-page { min-height: 0 !important; background: var(--kk-surface) !important; }
.hm-stage-side.watch-page #crowd { overflow-y: auto !important; inset: auto !important; }

/* ---- the tournament banner ---- */
.hm-tb {
  display: grid; grid-template-columns: 1.3fr auto 1fr; align-items: center; gap: 28px;
  background: linear-gradient(90deg, rgba(181,108,255,.10), var(--kk-surface) 55%); border: 1px solid var(--kk-line); border-radius: 10px; padding: 24px 28px;
}
.hm-tb.is-live { background: linear-gradient(90deg, rgba(255,77,79,.14), var(--kk-surface) 55%); border-color: rgba(255,77,79,.4); }
.hm-tb-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hm-tb-game { font-size: 13px; font-weight: 600; color: var(--kk-mute); }
.hm-tb-name { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.hm-tb-blurb { font-size: 14px; color: var(--kk-mute); }
.hm-tb-clock { font-size: 44px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--kk-green); white-space: nowrap; }
.hm-tb.is-live .hm-tb-clock { color: var(--kk-red); }
.hm-tb-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hm-tb-prize { font-size: 22px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 6px; }
.hm-tb-prize small { font-size: 12.5px; font-weight: 600; color: var(--kk-mute); letter-spacing: 0; }
.hm-tb-ent { font-size: 12.5px; color: var(--kk-mute); }
.hm-tb-right .hm-cta { margin-top: 4px; padding: 10px 22px !important; font-size: 14px !important; }
.hm-tb-more { display: flex; gap: 12px; margin-top: 12px; overflow-x: auto; }
.hm-tb-chip { flex: 1 1 260px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--kk-surface); border: 1px solid var(--kk-line); border-radius: 8px; padding: 12px 14px; }
.hm-tb-chip span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-tb-chip b { font-size: 14px; font-weight: 700; }
.hm-tb-chip small { font-size: 12px; color: var(--kk-mute); white-space: nowrap; }
.hm-tb-chip-btn { flex: none; background: transparent; border: 1px solid var(--kk-line-2); color: var(--kk-text); font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 4px; cursor: pointer; }
.hm-tb-chip-btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 900px) { .hm-tb { grid-template-columns: 1fr; gap: 14px; } .hm-tb-right { align-items: flex-start; } .hm-tb-clock { font-size: 34px; } }

/* ---- the arcade: the live row's frames ---- */
#arcade.hm-arcade { display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; }
#arcade.hm-arcade::-webkit-scrollbar { display: none; }
.kk-thumb-game .kk-thumb-fill { font-size: 56px; }

/* ---- the rail as a drawer on a phone ---- */
.kk-veil { display: none; }
@media (max-width: 900px) {
  body.kk-drawer .kk-side { display: flex; width: 280px; z-index: 82; box-shadow: 20px 0 60px rgba(0,0,0,.6); }
  body.kk-drawer .kk-veil { display: block; position: fixed; inset: 0; top: var(--kk-top); background: rgba(0,0,0,.55); z-index: 81; }
  .kk-top { grid-template-columns: auto auto 1fr auto; gap: 8px; padding: 0 10px; }
  .kk-top .ar-right { gap: 4px; }
  .kk-top #tier.ar-bal { display: none; }
  .kk-signup { padding: 7px 10px; font-size: 13px; }
  .hm-body, .ar-body, .sn, .pf-body, .cr-body, .cl { padding-left: 14px !important; padding-right: 14px !important; }
  .hm-stage { padding-right: 0; }
  .hm-stage-side { position: static; width: auto; margin-top: 12px; max-height: 70vh; }
  .hm-people .kk-card { flex-basis: 86vw; }
  .hm-lobby { grid-auto-columns: 82%; }
}

/* ---- the watch page inside the shell ---- */
.watch-page .shell { padding-top: var(--kk-top); }
body.kk-ready.watch-page .shell { padding-left: var(--kk-rail); transition: padding-left 200ms ease; }
body.kk-ready.kk-collapsed.watch-page .shell { padding-left: var(--kk-rail-min); }
@media (max-width: 900px) { body.kk-ready.watch-page .shell, body.kk-ready.kk-collapsed.watch-page .shell { padding-left: 0; } }
.kk-top .lv-head { display: contents; }
.kk-top .lv-left { display: flex; align-items: center; gap: 12px; }
.kk-top .lv-mark img { height: 30px; }
.kk-top .lv-status { display: flex; align-items: center; gap: 8px; }
.kk-top .lv-right { display: flex; align-items: center; gap: 10px; }
.kk-top .lv-right > * { margin: 0; }

/* Home sections flow normally: one after the other, their own height. */
.hm-sec-stage #feature { margin-bottom: 16px; }
.hm-sec-promo .hm-promo { margin: 0; }

/* ---- the watch page's header pieces, tamed inside the bar ---- */
body.watch-page .kk-top .ar-nav { display: none !important; }
body.watch-page .kk-top .lv-left { flex-direction: row !important; align-items: center !important; height: auto !important; gap: 12px; }
body.watch-page .kk-top .lv-mark img { height: 30px !important; width: auto !important; }
body.watch-page .kk-top .lv-right { flex-direction: row !important; align-items: center !important; height: auto !important; gap: 10px; }
body.watch-page .kk-top .lv-status { margin: 0; }
body.watch-page .kk-top .lv-watching { margin: 0; }
/* The stage sits under the bar, not behind it, and fills the rest. */
body.watch-page .shell { padding-top: var(--kk-top) !important; }
body.watch-page .player-frame { height: calc(100vh - var(--kk-top)) !important; max-height: calc(100vh - var(--kk-top)) !important; }
body.watch-page #video { height: 100% !important; max-height: 100% !important; }

/* The watch page on a phone: a 16:9 player at the top, the dock and the chat
   under it, and a bar that keeps only what fits. */
@media (max-width: 900px) {
  body.watch-page .player-frame { height: auto !important; max-height: none !important; aspect-ratio: 16 / 9; }
  body.watch-page #video { height: 100% !important; }
  body.watch-page .kk-top .lv-status, body.watch-page .kk-top .lv-watching, body.watch-page .kk-top .ar-bal-label { display: none !important; }
  body.watch-page .kk-top .lv-mark img { height: 26px !important; }
  body.watch-page .kk-top .lv-right { gap: 6px; }
  body.watch-page .kk-top .ar-tag { padding: 6px 8px; font-size: 13px; }
}
/* live-v2.css loads after this sheet on the watch page; these win regardless. */
body.watch-page .kk-top .lv-head { display: contents !important; }
body.watch-page .kk-top .lv-left, body.watch-page .kk-top .lv-right { display: flex !important; flex-direction: row !important; align-items: center !important; }

/* ---- the glass pill: the visitor's one door in the bar ---- */
.kk-top .ar-tag.kk-glass {
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: #3a3a40 !important;
  padding: 9px 20px; border-radius: 999px;
  background: linear-gradient(180deg, #f6f6f8 0%, #e6e6ea 55%, #d6d6dc 100%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.35),
    0 8px 20px rgba(0,0,0,.45);
  text-decoration: none; transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.kk-top .ar-tag.kk-glass:hover { filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.35), 0 10px 26px rgba(0,0,0,.5); background: linear-gradient(180deg, #f6f6f8 0%, #e6e6ea 55%, #d6d6dc 100%); }
.kk-top .ar-tag.kk-glass:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.45); }
.kk-signup { display: none; }

/* ---- no jump on arrival ----
   The page's own header is lifted into the fixed bar by script, a beat after
   the first paint. Until then it is taken out of the flow and hidden, so the
   content starts where it will end up. The rail's padding is on the body
   class the boot script sets before paint. */
body.kk-ready:not(.kk-mounted) .ar-top { position: fixed !important; top: 0; left: 0; right: 0; height: var(--kk-top); visibility: hidden; margin: 0; }
body.kk-ready:not(.kk-mounted) .lv-footer { visibility: hidden; }
.gu-search { display: none !important; }

/* ---- Astral Sever: the flagship banner, big ---- */
.hm-promo { height: auto !important; min-height: 420px; padding: 40px 44px !important; }
.hm-promo-art { width: 56% !important; }
.hm-promo-name { font-size: 56px !important; }
.hm-promo-line { font-size: 16px !important; max-width: 40ch; }
.hm-promo-go { font-size: 15px !important; padding: 12px 22px !important; margin-top: 18px; }
@media (max-width: 900px) { .hm-promo { min-height: 320px; padding: 24px !important; } .hm-promo-name { font-size: 36px !important; } .hm-promo-art { width: 100% !important; opacity: .35; } }

/* ---- the tournament banner, the flagship's size ---- */
.hm-tb { min-height: 420px; padding: 40px 44px; align-content: center; }
.hm-tb-name { font-size: 48px; }
.hm-tb-blurb { font-size: 16px; max-width: 40ch; }
.hm-tb-clock { font-size: 72px; }
.hm-tb-prize { font-size: 30px; }
.hm-tb-game { font-size: 14px; }
@media (max-width: 900px) { .hm-tb { min-height: 320px; padding: 24px; } .hm-tb-name { font-size: 32px; } .hm-tb-clock { font-size: 40px; } }

/* ---- how it works: the walkthrough banner, the flagship's size ---- */
.hm-how-card { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; min-height: 420px; padding: 40px 44px; background: linear-gradient(90deg, rgba(181,108,255,.08), var(--kk-surface) 60%); border: 1px solid var(--kk-line); border-radius: 10px; }
.hm-how-left { display: flex; flex-direction: column; gap: 10px; }
.hm-how-dots { display: flex; gap: 8px; margin-bottom: 6px; }
.hm-how-dots i { width: 28px; height: 4px; border-radius: 2px; background: var(--kk-line-2); transition: background 300ms var(--ease); }
.hm-how-dots i.is-on { background: var(--kk-green); }
.hm-how-dots i.is-done { background: rgba(181,108,255,.45); }
.hm-how-kicker { font-size: 13px; font-weight: 600; color: var(--kk-mute); }
.hm-how-title { font-size: 48px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.hm-how-text { font-size: 17px; color: var(--kk-mute); max-width: 36ch; line-height: 1.45; }
.hm-how-next { align-self: flex-start; margin-top: 10px; padding: 12px 26px !important; font-size: 15px !important; }
.hm-how-stage { display: grid; place-items: center; min-height: 260px; }
.hm-how-card[data-step] .hm-how-stage > * { animation: how-in 420ms var(--ease) both; }
@keyframes how-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
/* step 1: a room */
.hm-how-room { width: 100%; max-width: 440px; aspect-ratio: 16 / 9; border-radius: 12px; position: relative; overflow: hidden; background: radial-gradient(80% 90% at 30% 100%, rgba(139,92,246,.5), transparent), radial-gradient(70% 80% at 90% 10%, rgba(181,108,255,.25), transparent), #15121c; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; gap: 4px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.hm-how-live { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 700; color: var(--kk-red); }
.hm-how-live::before { content: ''; }
.hm-how-room-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.hm-how-room-sub { font-size: 13px; color: var(--kk-mute); }
/* step 2: a vote */
.hm-how-vote { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 10px; background: rgba(6,6,9,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px; }
.hm-how-q { font-size: 15px; font-weight: 700; }
.hm-how-q span { font-size: 11px; font-weight: 700; color: var(--kk-green); background: rgba(181,108,255,.12); padding: 3px 8px; border-radius: 6px; margin-right: 8px; }
.hm-how-opt { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.04); color: #fff; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; transition: border-color 160ms var(--ease), transform 120ms var(--ease); }
.hm-how-opt:hover:not(:disabled) { border-color: rgba(255,255,255,.55); }
.hm-how-opt:active:not(:disabled) { transform: scale(.985); }
.hm-how-opt span, .hm-how-opt em { position: relative; z-index: 1; font-style: normal; }
.hm-how-opt i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(181,108,255,.22); transition: width 600ms var(--ease); }
.hm-how-opt.is-mine { border-color: var(--kk-green); box-shadow: 0 0 0 1px var(--kk-green), 0 0 24px rgba(181,108,255,.25); }
.hm-how-opt:disabled { cursor: default; }
.hm-how-hint { font-size: 12.5px; color: var(--kk-mute); }
/* step 3: the counter */
.hm-how-earn { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hm-how-coin { font-size: 64px; line-height: 1; animation: coin-float 2.4s ease-in-out infinite; }
.hm-how-coin .ar-coin { transform: scale(3); display: inline-block; }
@keyframes coin-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hm-how-count { font-size: 88px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--kk-green); }
.hm-how-earn-sub { font-size: 14px; color: var(--kk-mute); }
@media (max-width: 900px) { .hm-how-card { grid-template-columns: 1fr; min-height: 0; padding: 24px; gap: 20px; } .hm-how-title { font-size: 34px; } .hm-how-stage { min-height: 0; } .hm-how-count { font-size: 64px; } }
@media (prefers-reduced-motion: reduce) { .hm-how-card[data-step] .hm-how-stage > * { animation: none; } .hm-how-coin { animation: none; } }

/* ---- rail icons as line SVGs, and a bigger logo ---- */
.kk-nav i { width: 22px; height: 22px; display: grid; place-items: center; font-size: 0; }
.kk-nav i svg { width: 20px; height: 20px; display: block; }
.kk-nav.is-on i svg { stroke: var(--kk-green); }
.kk-top .ar-mark img, .kk-top .ar-mark, body.watch-page .kk-top .lv-mark img { height: 48px !important; }
.kk-top .ar-mark { display: flex; align-items: center; }
@media (max-width: 900px) { .kk-top .ar-mark img, .kk-top .ar-mark, body.watch-page .kk-top .lv-mark img { height: 36px !important; } }

/* ---- the login page: the bar, no rail, one clean card ---- */
body.auth-page .kk-side, body.auth-page .kk-veil { display: none !important; }
body.kk-ready.auth-page .page-shell { padding-left: 0 !important; }
body.auth-page .au-body { min-height: calc(100vh - var(--kk-top)); display: grid; place-items: center; padding: 24px; }
body.auth-page .au-card { width: min(440px, 100%); background: var(--kk-surface); border: 1px solid var(--kk-line); border-radius: 12px; padding: 32px 32px 28px; box-shadow: none; display: flex; flex-direction: column; gap: 18px; }
body.auth-page .au-kicker { font-size: 13px; font-weight: 600; color: var(--kk-mute); letter-spacing: 0; }
body.auth-page .au-title { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 0; }
body.auth-page .au-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--kk-bg); border: 1px solid var(--kk-line); border-radius: 8px; padding: 4px; }
body.auth-page .au-tab { border: 0; border-radius: 6px; padding: 9px 10px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--kk-mute); background: transparent; cursor: pointer; letter-spacing: 0; text-transform: none; }
body.auth-page .au-tab.is-on { background: var(--kk-surface-2); color: var(--kk-text); }
body.auth-page .au-providers { display: flex; flex-direction: column; gap: 8px; }
body.auth-page .au-providers a, body.auth-page .au-providers button { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--kk-line-2); background: var(--kk-bg); color: var(--kk-text); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; letter-spacing: 0; text-transform: none; }
body.auth-page .au-providers a:hover, body.auth-page .au-providers button:hover { background: var(--kk-surface-2); }
body.auth-page .au-or { display: flex; align-items: center; gap: 10px; color: var(--kk-dim); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
body.auth-page .au-or i { flex: 1; height: 1px; background: var(--kk-line); }
body.auth-page .au-form { display: flex; flex-direction: column; gap: 12px; }
body.auth-page .au-field { display: flex; flex-direction: column; gap: 6px; }
body.auth-page .au-field label { font-size: 12.5px; font-weight: 600; color: var(--kk-mute); letter-spacing: 0; text-transform: none; }
body.auth-page .au-field input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--kk-text); background: var(--kk-bg); border: 1px solid var(--kk-line-2); border-radius: 8px; padding: 11px 12px; outline: none; transition: border-color 160ms ease; }
body.auth-page .au-field input:focus { border-color: var(--kk-green); }
body.auth-page .au-field input::placeholder { color: var(--kk-dim); }
body.auth-page .au-go { width: 100%; border: 0; border-radius: 8px; padding: 13px 16px; font: inherit; font-size: 15px; font-weight: 700; color: var(--kk-green-ink); background: var(--kk-green); cursor: pointer; letter-spacing: 0; text-transform: none; transition: filter 160ms ease, transform 120ms ease; }
body.auth-page .au-go:hover { filter: brightness(1.05); }
body.auth-page .au-go:active { transform: scale(.985); }
body.auth-page .au-note, body.auth-page .au-perk, body.auth-page .au-foot-line { font-size: 13px; color: var(--kk-mute); letter-spacing: 0; text-transform: none; }
body.auth-page .au-perk { color: var(--kk-green); }
body.auth-page .au-foot { color: var(--kk-dim); font-size: 12.5px; text-align: center; padding: 20px; }
body.auth-page .au-foot a { color: var(--kk-mute); }
body.auth-page .kk-top .ar-tag, body.auth-page .kk-top .ar-right { display: none !important; }


/* ---- the login page, in the same clean voice ---- */
.au-body { display: grid; place-items: center; min-height: calc(100vh - var(--kk-top) - 40px); padding: 24px !important; }
.au-card { width: min(460px, 100%); background: var(--kk-surface) !important; border: 1px solid var(--kk-line) !important; border-radius: 14px !important; box-shadow: 0 30px 80px rgba(0,0,0,.5) !important; padding: 32px 32px 28px !important; }
.au-kicker { font-size: 13px !important; font-weight: 600 !important; color: var(--kk-mute) !important; letter-spacing: 0 !important; text-transform: none !important; }
.au-title { font-size: 34px !important; font-weight: 800 !important; letter-spacing: -.03em !important; text-transform: none !important; margin: 4px 0 18px !important; }
.au-tabs { display: flex; gap: 6px; background: var(--kk-bg); border: 1px solid var(--kk-line); border-radius: 10px; padding: 4px; margin-bottom: 18px; }
.au-tab { flex: 1; border: 0 !important; border-radius: 8px !important; padding: 9px 12px !important; font: inherit !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--kk-mute) !important; background: transparent !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease); }
.au-tab.is-on, .au-tab[aria-selected="true"] { background: var(--kk-surface-2) !important; color: var(--kk-text) !important; }
.au-providers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.au-pv { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--kk-line-2) !important; background: var(--kk-bg) !important; color: var(--kk-text) !important; border-radius: 10px !important; padding: 11px 14px !important; font: inherit !important; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
.au-pv:hover { background: var(--kk-surface-2) !important; }
.au-or { display: flex; align-items: center; gap: 12px; color: var(--kk-dim); font-size: 12.5px; margin: 6px 0 12px; text-transform: none !important; letter-spacing: 0 !important; }
.au-or::before, .au-or::after { content: ''; flex: 1; height: 1px; background: var(--kk-line); }
.au-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.au-field label { font-size: 12.5px !important; font-weight: 600 !important; color: var(--kk-mute) !important; text-transform: none !important; letter-spacing: 0 !important; }
.au-field input { width: 100%; box-sizing: border-box; font: inherit !important; font-size: 15px !important; color: var(--kk-text) !important; background: var(--kk-bg) !important; border: 1px solid var(--kk-line-2) !important; border-radius: 10px !important; padding: 12px 14px !important; outline: none; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.au-field input:focus { border-color: var(--kk-green) !important; box-shadow: 0 0 0 3px rgba(181,108,255,.18); }
.au-go { width: 100%; margin-top: 6px; border: 0 !important; border-radius: 10px !important; padding: 13px 16px !important; font: inherit !important; font-size: 15px !important; font-weight: 700 !important; color: var(--kk-green-ink) !important; background: var(--kk-green) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; box-shadow: none !important; transition: transform 120ms var(--ease), filter 160ms var(--ease); }
.au-go:hover { filter: brightness(1.06); }
.au-go:active { transform: translateY(1px); }
.au-note, .au-foot, .au-foot-line, .au-perk { color: var(--kk-mute) !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; }
.au-foot a { color: var(--kk-text); }
.au-foot *, .au-note *, .au-or *, .au-foot-line * { text-transform: none !important; letter-spacing: 0 !important; }
.au-foot a, .au-note a, .au-foot-line a { color: var(--kk-green) !important; font-weight: 600; }

/* ---- the creator's three-step start ---- */
.cr-start { margin: 0 0 22px; padding: 22px 24px; background: var(--kk-surface); border: 1px solid var(--kk-line); border-radius: 12px; }
.cr-start-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.cr-start-head b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.cr-start-head span { font-size: 13px; color: var(--kk-mute); }
.cr-start-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .cr-start-steps { grid-template-columns: 1fr; } }
.cr-step { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--kk-bg); border: 1px solid var(--kk-line); border-radius: 10px; }
.cr-step-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--kk-green-ink); background: var(--kk-green); }
.cr-step b { font-size: 15px; font-weight: 700; }
.cr-step > span { font-size: 13px; color: var(--kk-mute); line-height: 1.4; }
.cr-step-row { display: flex; gap: 8px; }
.cr-step-row .cr-input { flex: 1; min-width: 0; font-size: 12.5px; }
.cr-step-link { font-size: 13px; color: var(--kk-green); text-decoration: none; font-weight: 600; }
.cr-toggle { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; background: var(--kk-surface-2); border: 1px solid var(--kk-line-2); color: var(--kk-text); border-radius: 999px; padding: 6px 12px 6px 6px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cr-toggle i { width: 34px; height: 20px; border-radius: 10px; background: var(--kk-line-2); position: relative; transition: background 200ms var(--ease); }
.cr-toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 200ms var(--ease); }
.cr-toggle.is-on i { background: var(--kk-green); }
.cr-toggle.is-on i::after { transform: translateX(14px); }
.cr-step > span.cr-step-n { color: #fff !important; }

/* ---- multistream panel ---- */
.cr-multi-body { display: grid; gap: 14px; }
.cr-multi-list { display: grid; gap: 8px; }
.cr-multi-empty { font-size: 13px; color: var(--kk-mute); padding: 12px 14px; border: 1px dashed var(--kk-line); border-radius: 10px; }
.cr-multi-row { display: grid; grid-template-columns: 10px auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--kk-line); border-radius: 10px; background: rgba(255,255,255,.02); }
.cr-multi-row.is-off { opacity: .55; }
.cr-multi-row b { font-size: 14px; font-weight: 700; }
.cr-multi-meta { font-size: 12px; color: var(--kk-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-multi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kk-line); }
.cr-multi-dot.is-live { background: #e5343f; box-shadow: 0 0 0 3px rgba(229,52,63,.25); }
.cr-multi-add { display: grid; grid-template-columns: 150px 1fr 1fr auto; gap: 8px; }
.cr-danger { color: #ff7b85; }
@media (max-width: 1000px) { .cr-multi-add { grid-template-columns: 1fr; } .cr-multi-row { grid-template-columns: 10px auto 1fr; } .cr-multi-row .cr-copy { grid-column: 2 / -1; } }

/* ---- game sense panel ---- */
.cr-sense-body { display: grid; gap: 14px; }
.cr-sense-games { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cr-sense-game { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border: 1px solid var(--kk-line); border-radius: 10px; background: rgba(255,255,255,.02); }
.cr-sense-game > b { font-size: 15px; font-weight: 800; }
.cr-sense-game > span { font-size: 13px; color: var(--kk-mute); }
.cr-sense-game .cr-copy { justify-self: start; text-decoration: none; }
.cr-sense-game code { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--kk-text); word-break: break-all; }
.cr-sense-status { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--kk-mute); }
@media (max-width: 1000px) { .cr-sense-games { grid-template-columns: 1fr; } }

/* ---- challenge panel ---- */
.cr-challenge-body { display: grid; gap: 12px; }
.cr-challenge-add { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; }
.cr-challenge-now { display: grid; grid-template-columns: 10px auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--kk-line); border-radius: 10px; background: rgba(255,255,255,.02); }
.cr-challenge-now b { font-size: 14px; font-weight: 700; }
@media (max-width: 1000px) { .cr-challenge-add { grid-template-columns: 1fr; } .cr-challenge-now { grid-template-columns: 10px auto 1fr; } .cr-challenge-now .cr-copy { grid-column: 2 / -1; } }

/* ---- stake sense panel ---- */
.cr-stake-add { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.cr-stake-add [hidden] { display: none; }
@media (max-width: 1000px) { .cr-stake-add { grid-template-columns: 1fr; } }

/* ---- embedded over the live: the page alone ---- */
html.is-embed .kk-top, html.is-embed .kk-side, html.is-embed .ar-top, html.is-embed .kk-drawer, html.is-embed .kk-burger { display: none !important; }
html.is-embed body, html.is-embed .page-shell, html.is-embed main { padding-top: 0 !important; margin-left: 0 !important; padding-left: 16px !important; padding-right: 16px !important; max-width: none !important; }
/* The panel behind the frame paints the surface, and it is the Play along
   card: nothing in here draws its own background over it. The scrollbar
   goes with the chrome — a frame this narrow cannot spare the width, and
   the panel is a card, not a window. */
html.is-embed body { background: transparent !important; }
html.is-embed { scrollbar-width: none; }
html.is-embed ::-webkit-scrollbar { width: 0; height: 0; }
html.is-embed body, html.is-embed .page-shell, html.is-embed main { overflow-x: hidden !important; }
/* One 16px gutter, not three stacked: the body keeps it and the shell and
   the page inside it give theirs up. A flex item's min-width is auto, so a
   page carrying anything wide — the season road is 2230px — refuses to
   shrink to the frame and hangs its whole text off the right edge. */
html.is-embed .page-shell { padding: 0 !important; }
html.is-embed .page-shell > *, html.is-embed main { min-width: 0 !important; }
html.is-embed main { padding: 0 0 20px !important; }