/*
 * Kintara — public landing page styles.
 *
 * Full-viewport mainland screenshot as the backdrop (`homepage-mainland-bg.png`),
 * with a bottom-heavy gradient scrim so headline + slogan stay readable.
 * CTAs use warm orange fills with engraved-style labels + a 1px burnt-orange rim.
 */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('/site/css/fonts/cinzel-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --orange-1: #ffaf5e;
  --orange-2: #ff8a3a;
  --orange-3: #ed6f1c;
  /* Engraved label — burnt orange, harmonizes with rim */
  --cta-text: #4f210a;
  --cta-rim: #6e3010;

  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-bg-strong: rgba(255, 255, 255, 0.16);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-border-strong: rgba(255, 255, 255, 0.32);

  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.82);
  --ink-mute: rgba(255, 255, 255, 0.58);

  --live-dot: #54e07f;

  --radius: 10px;
  --radius-lg: 12px;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font-display:
    'Cinzel', 'Trajan Pro', 'Optima', 'Iowan Old Style', 'Palatino Linotype',
    Georgia, serif;
  --font-ui:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
}

* { box-sizing: border-box; }

html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--ink);
  background-color: #5fa1cf;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/*
 * Full-viewport backdrop — cross-fading carousel (`/site/img/bg1.png` … `bg6.png`)
 * with slow Ken Burns drift per slide (`home.js`).
 */
.kn-fullbg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #5fa1cf;
  pointer-events: none;
  /* Layers use z-index; isolate keeps pseudo stacking predictable vs descendants */
  isolation: isolate;
}

.kn-fullbg__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 2.75s cubic-bezier(0.33, 0.06, 0.19, 1);
  z-index: 1;
}

.kn-fullbg__layer--on {
  opacity: 1;
  z-index: 2;
}

/*
 * Minimal overscan (~6%) — only headroom for ±~2.3% translate; avoids gaps on diagonal pans.
 */
.kn-fullbg__pan {
  position: absolute;
  width: 106%;
  height: 106%;
  left: -3%;
  top: -3%;
  will-change: transform;
  transform: translateZ(0);
}

.kn-fullbg__layer:not(.kn-fullbg__layer--on) .kn-fullbg__pan {
  animation: none !important;
  transform: none;
}

.kn-fullbg__pan img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Slow Ken Burns drift on the active carousel slide (see `splash-coming-soon/index.html`). */
@keyframes kn-splash-pan-1 {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.08) translate(-2.2%, -1.4%); }
}
@keyframes kn-splash-pan-2 {
  from { transform: scale(1.06) translate(-1.5%, 0); }
  to { transform: scale(1) translate(1.8%, 1.2%); }
}
@keyframes kn-splash-pan-3 {
  from { transform: scale(1) translate(1%, -0.5%); }
  to { transform: scale(1.07) translate(-1.5%, 0.8%); }
}
@keyframes kn-splash-pan-4 {
  from { transform: scale(1.05) translate(0, 1%); }
  to { transform: scale(1) translate(-2%, -1%); }
}
@keyframes kn-splash-pan-5 {
  from { transform: scale(1) translate(-1%, 0.5%); }
  to { transform: scale(1.09) translate(1.5%, -1.1%); }
}
@keyframes kn-splash-pan-6 {
  from { transform: scale(1.04) translate(0.8%, -0.8%); }
  to { transform: scale(1.02) translate(-1.2%, 1%); }
}

.kn-fullbg__carousel .kn-fullbg__layer:nth-child(1).kn-fullbg__layer--on .kn-fullbg__pan {
  animation: kn-splash-pan-1 11s ease-in-out infinite alternate;
}
.kn-fullbg__carousel .kn-fullbg__layer:nth-child(2).kn-fullbg__layer--on .kn-fullbg__pan {
  animation: kn-splash-pan-2 12s ease-in-out infinite alternate;
}
.kn-fullbg__carousel .kn-fullbg__layer:nth-child(3).kn-fullbg__layer--on .kn-fullbg__pan {
  animation: kn-splash-pan-3 10.5s ease-in-out infinite alternate;
}
.kn-fullbg__carousel .kn-fullbg__layer:nth-child(4).kn-fullbg__layer--on .kn-fullbg__pan {
  animation: kn-splash-pan-4 11.5s ease-in-out infinite alternate;
}
.kn-fullbg__carousel .kn-fullbg__layer:nth-child(5).kn-fullbg__layer--on .kn-fullbg__pan {
  animation: kn-splash-pan-5 10s ease-in-out infinite alternate;
}
.kn-fullbg__carousel .kn-fullbg__layer:nth-child(6).kn-fullbg__layer--on .kn-fullbg__pan {
  animation: kn-splash-pan-6 12.5s ease-in-out infinite alternate;
}

/* Uniform dim — sits above photos, below the gradient wash */
.kn-fullbg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: rgb(0 0 0 / 15%);
}

.kn-fullbg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Above photo layers + flat veil; bottom-heavy wash unchanged */
  z-index: 11;
  pointer-events: none;
  /* Stronger wash from bottom — black fade so headline + slogan read on busy tiles */
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 47%) 0%,
    rgb(0 0 0 / 36%) 28%,
    rgb(0 0 0 / 14%) 52%,
    rgb(0 0 0 / 3%) 72%,
    transparent 100%
  );
}

#kn-app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}

/*
 * News reader (`/news`): let the document scroll so content + footer aren’t clipped inside a
 * fixed-height flex column; footer sits below posts and appears when you scroll down.
 */
html.kn-body--news-shell {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100%;
}

html.kn-body--news-shell body {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100%;
  min-height: 100svh;
  max-height: none;
}

html.kn-body--news-shell #kn-app {
  display: block;
  height: auto;
  min-height: 100svh;
  max-height: none;
  overflow: visible;
}

html.kn-body--news-shell .kn-page {
  flex: none;
  height: auto;
  min-height: 100svh;
  max-height: none;
  overflow: visible;
}

html.kn-body--news-shell .kn-shell.kn-main-stage.kn-main-stage--dashboard {
  flex: 1 0 auto;
  min-height: auto;
  overflow: visible;
}

.kn-page {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/*
 * Signed-in homepage dashboard: scroll the page shell (not `main`) so the footer stays document
 * flow below `#dashboard` instead of visually covering the last cards.
 * `/news` uses `html.kn-body--news-shell` + document scroll; do not steal overflow here.
 */
html:not(.kn-body--news-shell) .kn-page.kn-page--dashboard {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: clamp(12px, 2.5vh, 24px);
  scroll-padding-bottom: clamp(28px, 4vh, 56px);
}

html:not(.kn-body--news-shell)
  .kn-page.kn-page--dashboard
  > .kn-shell.kn-main-stage.kn-main-stage--dashboard {
  flex: 0 0 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: visible;
  -webkit-overflow-scrolling: auto;
}

.kn-shell.kn-main-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.5vh, 20px) 28px clamp(6px, 1.5vh, 16px);
  box-sizing: border-box;
}

.kn-shell.kn-main-stage.kn-main-stage--dashboard {
  align-items: stretch;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: clamp(10px, 1.6vh, 20px) 28px clamp(14px, 3vh, 40px);
  scroll-padding-bottom: clamp(12px, 2.5vh, 32px);
}

.kn-shell.kn-main-stage > .kn-hero,
.kn-shell.kn-main-stage > .kn-dash,
.kn-shell.kn-main-stage > .kn-howto-page,
.kn-shell.kn-main-stage > .kn-docs-page,
.kn-shell.kn-main-stage > .kn-leaderboard-page {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

/* Signed-in: How to Play as its own main column (not stacked under dashboard cards). */
.kn-howto-page,
.kn-leaderboard-page {
  box-sizing: border-box;
}

/* Same top inset as `.kn-dash`: shell padding only — no extra band above the guide. */
.kn-shell.kn-main-stage--dashboard .kn-howto-page .kn-guide {
  margin-top: 0;
}

/* Guest landing: hero centered in the stage (between header + footer); scroll inside `main` if needed */
.kn-shell.kn-main-stage:not(.kn-main-stage--dashboard) {
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ---------- How to Play / guide ---------- */
/* Glass chrome matches `.kn-header` / `.kn-nav` (site tokens — not a separate “skin”). */

.kn-guide {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  margin-top: clamp(14px, 2.5vh, 28px);
  padding-bottom: clamp(24px, 4vh, 48px);
  scroll-margin-top: clamp(12px, 2.5vh, 24px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 18px);
}

.kn-guide__hero-band {
  padding: clamp(18px, 3vh, 28px) clamp(16px, 2.4vw, 24px);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 6px 22px rgb(0 0 0 / 4%);
}

.kn-guide__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.kn-guide__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4.2vw, 40px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}

.kn-guide__lead {
  margin: 0 0 16px;
  max-width: 52ch;
  font-size: clamp(14px, 1.9vw, 17px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-soft);
}

.kn-guide__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
  align-items: center;
}

.kn-guide__toc-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 8px;
}

/* Jump links: compact orange chips (same language as `.kn-btn`, smaller). */
.kn-guide__toc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  min-height: 30px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cta-text);
  background: linear-gradient(180deg, var(--orange-1) 0%, var(--orange-2) 48%, var(--orange-3) 100%);
  border: 1px solid var(--cta-rim);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 236, 200, 0.5),
    inset 0 -2px 8px rgba(110, 42, 10, 0.28);
  text-shadow:
    0 1px 0 rgba(255, 228, 170, 0.35),
    0 -1px 1px rgba(0, 0, 0, 0.15);
  transition:
    transform 120ms var(--ease-out),
    filter 120ms var(--ease-out),
    box-shadow 120ms var(--ease-out);
}

.kn-guide__toc-link:hover,
.kn-guide__toc-link:focus-visible {
  filter: brightness(1.06);
  outline: none;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 236, 200, 0.55),
    inset 0 -2px 8px rgba(110, 42, 10, 0.28);
}

.kn-guide__toc-link:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.35),
    0 2px 0 rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 236, 200, 0.55),
    inset 0 -2px 8px rgba(110, 42, 10, 0.28);
}

.kn-guide__toc-link:active {
  transform: translateY(2px);
  filter: brightness(0.97);
  box-shadow:
    inset 0 2px 8px rgba(90, 36, 8, 0.38),
    inset 0 -1px 0 rgba(255, 236, 200, 0.28);
}

.kn-guide__icon-strip {
  margin: 0;
  padding: 14px clamp(16px, 3vw, 28px);
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 6px 22px rgb(0 0 0 / 4%);
  box-sizing: border-box;
}

.kn-guide__icon-strip-inner {
  justify-content: center;
  gap: clamp(22px, 4vw, 36px);
}

.kn-guide__slot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  text-align: center;
}

.kn-guide__dash-slot {
  cursor: default;
}

.kn-guide__dash-slot .kn-dash__inv-game-slot__icon {
  image-rendering: auto;
  width: 42px;
  height: 42px;
}

.kn-guide__slot-cap {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.2;
  max-width: 72px;
}

/* After `.kn-guide__slot-item` base so fixed `flex-basis` wins over `flex: 0 0 auto`. */
.kn-guide__icon-strip-inner > .kn-guide__slot-item:not(.kn-guide__slot-item--figure) {
  flex: 0 0 clamp(76px, 9.5vw, 92px);
  width: clamp(76px, 9.5vw, 92px);
  max-width: 100%;
  box-sizing: border-box;
}

.kn-guide__icon-strip-inner .kn-guide__slot-cap {
  width: 100%;
  max-width: none;
  word-break: break-word;
  hyphens: manual;
}

.kn-guide__slot-item--figure {
  max-width: 160px;
  align-items: center;
}

.kn-guide__slot-cap--fig {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  max-width: 160px;
  color: var(--ink-soft);
  line-height: 1.35;
}

.kn-guide__block {
  margin: 0;
  padding: clamp(14px, 2.2vh, 20px) clamp(12px, 2vw, 18px);
  border-radius: var(--radius);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 6px 22px rgb(0 0 0 / 4%);
}

.kn-guide__h2 {
  margin: 0 0 12px;
  scroll-margin-top: clamp(12px, 2.5vh, 24px);
  font-family: var(--font-ui);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 1.25;
}

.kn-guide__p {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-soft);
}

.kn-guide__p:last-child {
  margin-bottom: 0;
}

.kn-guide__callout {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid rgba(120, 185, 235, 0.85);
}

.kn-guide__callout--tip {
  border-left-color: rgba(130, 210, 150, 0.9);
}

.kn-guide__callout--warn {
  border-left-color: rgba(230, 160, 90, 0.95);
}

.kn-guide__figure {
  margin: 14px 0 4px;
  padding: 0;
  border: 0;
}

.kn-guide__figure-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 28px rgb(0 0 0 / 12%);
}

.kn-guide__figures {
  margin-top: 14px;
}

.kn-guide__figures.kn-dash__inv-game-strip {
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(22px, 4vw, 36px);
}

.kn-guide__list {
  margin: 12px 0 0;
  padding-left: 1.2em;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.kn-guide__li {
  margin-bottom: 8px;
}

.kn-guide__foot {
  margin-top: 0;
  padding: 14px 16px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px dashed var(--glass-border-strong);
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 6px 22px rgb(0 0 0 / 4%);
}

.kn-guide__foot-text {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--ink);
}

@media (max-width: 600px) {
  .kn-guide__toc {
    gap: 6px 6px;
  }

  .kn-guide__toc-label {
    flex-basis: 100%;
    margin-bottom: 2px;
    margin-right: 0;
  }

  .kn-guide__toc-link {
    font-size: 10px;
    padding: 5px 10px;
    min-height: 28px;
  }
}

/* ---------- Header ---------- */

.kn-header-wrap {
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  padding: clamp(8px, 1.8vh, 18px) 28px 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.kn-header {
  pointer-events: auto;
  width: 100%;
  max-width: 1180px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 14px 10px 18px;
  border-radius: var(--radius);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 6px 22px rgb(0 0 0 / 4%);
  overflow: visible;
}

.kn-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
  color: var(--ink);
  white-space: nowrap;
}
.kn-brand .kn-brand__tag {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  top: -3px;
}

.kn-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
}
.kn-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.kn-nav__link:hover,
.kn-nav__link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  outline: none;
}

.kn-header__spacer { flex: 1; }

/* Fixed “back to top” — appears after scrolling the homepage scrollport (`main` as guest, `.kn-page` when signed in). */
.kn-scroll-top-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg-strong);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 22px rgb(0 0 0 / 8%);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 200ms var(--ease-out),
    visibility 200ms,
    transform 200ms var(--ease-out);
}

.kn-scroll-top-fab:hover,
.kn-scroll-top-fab:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  outline: none;
}

.kn-scroll-top-fab:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.32);
}

.kn-scroll-top-fab--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.kn-scroll-top-fab svg {
  display: block;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kn-scroll-top-fab {
    transition: opacity 120ms ease, visibility 120ms;
    transform: none;
  }

  .kn-scroll-top-fab--visible {
    transform: none;
  }
}

.kn-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Game token balance — compact K/M/B next to wallet (must win over `display` when [hidden]) */
.kn-header-token-balance[hidden] {
  display: none !important;
}

.kn-header-token-balance {
  flex-shrink: 0;
  max-width: min(44vw, 200px);
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0;
  padding: 7px 12px;
  margin: 0;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  cursor: default;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kn-header-token-balance__amount {
  font-variant-numeric: tabular-nums;
}
.kn-header-token-balance__sym {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* ---------- Buttons (engraved gamified CTAs) ---------- */

/*
 * Orange CTAs sit in `.kn-btn-hilt`: the hilt keeps the bottom “plate” shadow fixed while
 * the button face translates on `:active`, so the press reads like physical depth.
 */
.kn-btn-hilt {
  display: inline-flex;
  vertical-align: middle;
  border-radius: var(--radius);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
}
.kn-btn-hilt--hero {
  border-radius: var(--radius-lg);
}

.kn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  min-height: 44px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 1.2;

  color: var(--cta-text);
  background: linear-gradient(180deg, var(--orange-1) 0%, var(--orange-2) 48%, var(--orange-3) 100%);

  border: 1px solid var(--cta-rim);
  border-radius: var(--radius);
  cursor: pointer;

  /* Face bevel only — outer plate shadow lives on `.kn-btn-hilt`. */
  box-shadow:
    inset 0 2px 0 rgba(255, 236, 200, 0.55),
    inset 0 -3px 10px rgba(110, 42, 10, 0.38);

  text-shadow:
    0 1px 0 rgba(255, 228, 170, 0.42),
    0 -1px 1px rgba(0, 0, 0, 0.22);

  transition:
    transform 120ms var(--ease-out),
    filter 120ms var(--ease-out),
    box-shadow 120ms var(--ease-out);
  user-select: none;
  white-space: nowrap;
}

.kn-btn:hover,
.kn-btn:focus-visible {
  transform: none;
  filter: brightness(1.05);
  outline: none;
  box-shadow:
    inset 0 2px 0 rgba(255, 236, 200, 0.55),
    inset 0 -3px 10px rgba(110, 42, 10, 0.38);
}

.kn-btn-hilt .kn-btn:active {
  transform: translateY(3px);
  filter: brightness(0.96);
  box-shadow:
    inset 0 4px 10px rgba(90, 36, 8, 0.48),
    inset 0 -1px 0 rgba(255, 236, 200, 0.32);
}

.kn-btn[disabled],
.kn-btn[aria-busy="true"] {
  cursor: progress;
  filter: grayscale(0.12) brightness(0.94);
}

/* Signed-in wallet: stay orange; hover reveals red “Disconnect” label (same width as longer label). */
.kn-btn.kn-btn--session {
  cursor: pointer;
  filter: none;
}
.kn-btn.kn-btn--session .kn-btn__wallet-stack {
  display: inline-grid;
  place-items: center;
}
.kn-btn.kn-btn--session .kn-btn__wallet-stack .kn-btn__wallet-label {
  grid-area: 1 / 1;
  display: block;
  line-height: 1.2;
  pointer-events: none;
}
.kn-btn.kn-btn--session .kn-btn__wallet-label--idle {
  opacity: 1;
}
.kn-btn.kn-btn--session .kn-btn__wallet-label--hover {
  opacity: 0;
}
.kn-btn.kn-btn--session:hover:not([aria-busy="true"]):not(:disabled) .kn-btn__wallet-label--idle,
.kn-btn.kn-btn--session:focus-visible:not([aria-busy="true"]):not(:disabled) .kn-btn__wallet-label--idle {
  opacity: 0;
}
.kn-btn.kn-btn--session:hover:not([aria-busy="true"]):not(:disabled) .kn-btn__wallet-label--hover,
.kn-btn.kn-btn--session:focus-visible:not([aria-busy="true"]):not(:disabled) .kn-btn__wallet-label--hover {
  opacity: 1;
}
.kn-btn.kn-btn--session:hover:not([aria-busy="true"]):not(:disabled),
.kn-btn.kn-btn--session:focus-visible:not([aria-busy="true"]):not(:disabled) {
  filter: none;
  color: #fff;
  border-color: #5c1515;
  background: linear-gradient(180deg, #e85a5a 0%, #c43333 48%, #8f2020 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 210, 210, 0.45),
    inset 0 -3px 12px rgba(40, 10, 10, 0.55);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 -1px 1px rgba(0, 0, 0, 0.25);
}

.kn-btn--hero-play {
  padding: clamp(14px, 2.2vh, 22px) clamp(36px, 6vw, 52px);
  min-height: clamp(52px, 8vh, 64px);
  font-size: clamp(17px, min(2.4vw, 3.6vh), 24px);
  letter-spacing: 0.06em;
  border-radius: var(--radius-lg);
}

.kn-btn--ghost {
  background: rgba(255, 255, 255, 0.10);
  color: var(--ink);
  border: 2px solid var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.12);
  font-weight: 600;
  text-shadow: none;
}
.kn-btn--ghost:hover,
.kn-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}
.kn-btn--ghost:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

/* ---------- Hero (centered on background) ---------- */

.kn-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  max-width: 720px;
}

.kn-hero__title {
  margin: 0 0 clamp(8px, 1.4vh, 16px);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, min(10vw, 11vh), 120px);
  line-height: 0.95;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-shadow:
    0 2px 4px rgb(0 0 0 / 0%),
    0 10px 36px rgba(0, 0, 0, 0.38),
    0 0 2px rgba(0, 0, 0, 0.65);
}

.kn-hero__slogan {
  margin: 0 0 clamp(14px, 2.4vh, 28px);
  max-width: 560px;
  font-size: clamp(13px, min(1.55vw, 2.2vh), 19px);
  line-height: 1.45;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 4px 18px rgba(0, 0, 0, 0.35);
}

.kn-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(10px, 2vh, 22px);
}

/* ---------- Stats ---------- */

.kn-stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(6px, 1vw, 10px);
  max-width: 100%;
}

.kn-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(5px, 1vh, 8px) clamp(10px, 2vw, 14px);
  border-radius: 999px;
  background: rgba(8, 22, 38, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: clamp(11px, min(1.4vw, 1.8vh), 13px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.kn-stat__body {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.kn-stat__value {
  font-variant-numeric: tabular-nums;
}
.kn-stat__label {
  color: var(--ink-soft);
  font-weight: 500;
}
.kn-stat__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live-dot);
  box-shadow: 0 0 0 3px rgba(84, 224, 127, 0.18);
}

/* ---------- Footer ---------- */

.kn-foot {
  flex-shrink: 0;
  margin-top: auto;
  padding: clamp(8px, 1.5vh, 14px) 28px clamp(10px, 2vh, 18px);
  text-align: center;
  font-size: clamp(10px, 1.3vh, 12px);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.kn-foot__x {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.kn-foot__x:hover {
  color: var(--ink-soft, #e8eef5);
}

/* ---------- Entrance reveals ---------- */

.kn-reveal {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 480ms var(--ease-out),
    transform 480ms var(--ease-out);
}
.kn-reveal.kn-reveal--in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---------- Signed-in dashboard (sans-serif panel — Cinzel reserved for header wordmark) ---------- */

.kn-dash {
  width: 100%;
  font-family: var(--font-ui);
  outline: none;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 20px);
}

/* Profile + three inventory cards (same column flex + gap rhythm as `.kn-dash`). */
.kn-dash__top-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(10px, 1.6vh, 20px);
  width: 100%;
  min-width: 0;
}

.kn-dash__top-row > .kn-dash__shell,
.kn-dash__top-row > .kn-dash__inv-column {
  flex: 1 1 0;
  min-width: 0;
}

/* Events (⅓) + Recent updates (⅔); same width + gap rhythm as `.kn-dash__top-row`. */
.kn-dash__bottom-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(10px, 1.6vh, 20px);
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

.kn-dash__bottom-row > .kn-dash__shell {
  min-width: 0;
}

.kn-dash__inv-column {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 20px);
  min-height: 0;
  align-items: stretch;
}

.kn-dash:focus-visible {
  outline: none;
}

.kn-dash__shell {
  width: 100%;
  padding: 9px 12px 10px;
  border-radius: var(--radius);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 6px 22px rgb(0 0 0 / 4%);
  box-sizing: border-box;
}

.kn-dash__shell:focus-visible {
  outline: none;
}

/* Inventory trio + inner tiles: lighter frost than profile/updates; stroke matches site glass. */
.kn-dash__shell.kn-dash__shell--inv-slot {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.kn-dash__profile-stack,
.kn-dash__inv-slot-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: stretch;
}

.kn-dash__profile-stack > .kn-dash__section-title,
.kn-dash__profile-stack > .kn-dash__profile-title-row,
.kn-dash__inv-slot-stack > .kn-dash__section-title {
  margin-bottom: 6px;
}

.kn-dash__shell--inv-slot {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}

.kn-dash__shell--inv-slot .kn-dash__inv-slot-stack {
  flex: 1 1 auto;
  min-height: 0;
}

.kn-dash__inv-slot-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kn-dash__inv-block-fill {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kn-dash__inv-block-fill--materials,
.kn-dash__inv-block-fill--gold-mats {
  padding: 4px 0;
  justify-content: flex-start;
  align-items: flex-start;
}

.kn-dash__inv-cos-scroll {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  cursor: grab;
  overscroll-behavior-x: contain;
  user-select: none;
  /* Native bars hidden — use click-and-drag to pan (see `attachDashDragScroll`). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kn-dash__inv-cos-scroll::-webkit-scrollbar {
  display: none;
}

.kn-dash__inv-cos-scroll--dragging {
  cursor: grabbing;
}

.kn-dash__inv-scroll-wrap {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Right gutter for the “next” control; left gutter only while “back” is meaningful (avoids a permanent left gap). */
.kn-dash__inv-scroll-wrap[data-has-overflow='1'] {
  padding-right: 34px;
}

.kn-dash__inv-scroll-wrap[data-has-overflow='1'][data-can-scroll-left='1'] {
  padding-left: 34px;
}

/*
 * True edge fade: mask alpha goes to fully transparent (no dark overlay).
 * Black = visible pixels, transparent = fully hidden.
 */
.kn-dash__inv-scroll-wrap[data-has-overflow='1'] .kn-dash__inv-cos-scroll {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* At start: only fade the right edge. */
.kn-dash__inv-scroll-wrap[data-has-overflow='1']:not([data-can-scroll-left='1'])[data-can-scroll-right='1']
  .kn-dash__inv-cos-scroll {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 44px), transparent 100%);
}

/* At end: only fade the left edge. */
.kn-dash__inv-scroll-wrap[data-has-overflow='1'][data-can-scroll-left='1']:not([data-can-scroll-right='1'])
  .kn-dash__inv-cos-scroll {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 44px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 44px, #000 100%);
}

/* Middle: fade both edges. */
.kn-dash__inv-scroll-wrap[data-has-overflow='1'][data-can-scroll-left='1'][data-can-scroll-right='1']
  .kn-dash__inv-cos-scroll {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 44px,
    #000 calc(100% - 44px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 44px,
    #000 calc(100% - 44px),
    transparent 100%
  );
}

.kn-dash__inv-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--ink-soft);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    filter 0.12s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Only show arrows that are actually usable (not at that scroll bound). */
.kn-dash__inv-scroll-wrap[data-has-overflow='1'] .kn-dash__inv-scroll-arrow:not(:disabled) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.kn-dash__inv-scroll-wrap[data-has-overflow='1'] .kn-dash__inv-scroll-arrow:disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.kn-dash__inv-scroll-arrow:not(:disabled):hover {
  filter: brightness(1.08);
}

.kn-dash__inv-scroll-arrow--next {
  right: 2px;
}

.kn-dash__inv-scroll-arrow--prev {
  left: 2px;
}

/* Matches `game.js` `#kintara-item-tooltip` (inventory hover — black 50%, light text). */
.kn-dash__item-tooltip-root {
  position: fixed;
  z-index: 13060;
  pointer-events: none;
  display: none;
  box-sizing: border-box;
  max-width: min(280px, 92vw);
  padding: 0;
}

.kn-dash__item-tooltip-inner {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 7px 11px;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 650;
  color: #f2f4f8;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}

/* Gold & items: single horizontal row; outer well scrolls left–right. */
.kn-dash__inv-game-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

.kn-dash__inv-game-strip--scroll {
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
}

/* Guide hero row: `.kn-dash__inv-game-strip` sets `justify-content: flex-start` — re-center after that rule. */
.kn-guide__icon-strip-inner.kn-dash__inv-game-strip {
  justify-content: center;
}

.kn-dash__inv-game-slot {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  contain: paint;
  cursor: default;
  touch-action: manipulation;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}

.kn-dash__inv-game-slot:hover {
  filter: brightness(1.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.kn-dash__inv-game-slot--empty {
  background: rgba(255, 255, 255, 0.04);
  border-style: dashed;
  opacity: 0.82;
  pointer-events: none;
}

.kn-dash__inv-game-slot--empty:hover {
  filter: none;
  box-shadow: none;
}

.kn-dash__inv-game-slot__iconWrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: none;
}

.kn-dash__inv-game-slot__icon {
  width: 37px;
  height: 37px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  filter: none;
  box-shadow: none;
}

/* Top-right stack count — same as in-game HUD stacks (white on icon). */
.kn-dash__inv-game-slot__count {
  position: absolute;
  top: 2px;
  right: 4px;
  z-index: 1;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 1px 2px rgba(0, 0, 0, 0.55);
  line-height: 1;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  max-width: calc(100% - 6px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.kn-dash__items-pills--inv-combo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
}

/* Single horizontal row; parent scrolls left–right only. At least full row width for empty copy. */
.kn-dash__items-pills--inv-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  min-width: 100%;
  max-width: none;
  min-height: min-content;
}

.kn-dash__items-ico-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: default;
  touch-action: manipulation;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}

.kn-dash__items-ico-pill:hover {
  filter: brightness(1.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.kn-dash__items-ico-pill--empty {
  background: rgba(255, 255, 255, 0.04);
  border-style: dashed;
  opacity: 0.82;
  pointer-events: none;
}

.kn-dash__items-ico-pill--empty:hover {
  filter: none;
  box-shadow: none;
}

.kn-dash__items-ico-pill-img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.kn-dash__items-ico-pill-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  min-width: 15px;
  padding: 1px 4px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(110, 42, 10, 0.92);
  border: 1px solid rgba(255, 220, 180, 0.45);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.kn-dash__items-empty {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.42);
}

.kn-dash__profile-grid {
  display: grid;
  /* First column matches preview width so the frame stays left under PROFILE. */
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 6px 0;
  align-items: start;
}

.kn-dash__section-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.kn-dash__shell--updates > .kn-dash__section-title {
  margin-bottom: 8px;
}

/* `scrollDashToHash` / in-page nav: breathing room when scrolling panels / article deep-links */
#updates.kn-dash__shell--updates,
#events.kn-dash__shell--updates {
  scroll-margin-top: clamp(12px, 2.5vh, 24px);
}

.kn-dash__profile-grid > .kn-dash__preview-col {
  position: relative;
  justify-self: start;
  width: min(280px, 100%);
  max-width: 100%;
  /* Lets the Play CTA sit half outside the clip without colliding with the meta column */
  margin-bottom: clamp(26px, 5.5vh, 42px);
}

.kn-dash__profile-grid > .kn-dash__preview-col .kn-dash__preview-clip {
  width: 100%;
}

.kn-dash__play-anchor {
  position: absolute;
  /* Match visual center of blue + stroke (clip removes 15% from the right). */
  left: calc((100% - 15%) / 2);
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 4;
  pointer-events: auto;
  display: flex;
  justify-content: center;
}

/* ~20% smaller than homepage `.kn-btn--hero-play` (dashboard overlay only). */
.kn-dash__play-anchor .kn-btn--hero-play {
  padding: clamp(11px, 1.76vh, 18px) clamp(29px, 4.8vw, 42px);
  min-height: clamp(42px, 6.4vh, 51px);
  font-size: clamp(14px, min(1.92vw, 2.88vh), 19px);
  letter-spacing: 0.05em;
}

/* Cropped preview window; clip right only so the blue + stroke align with PROFILE (left edge of shell). */
.kn-dash__preview-clip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  aspect-ratio: 420 / 350;
  max-height: min(238px, 31vh);
  pointer-events: none;
  border: none;
  /* Solid fill inside the stroke (canvas clears transparent). */
  background-color: rgba(95, 161, 207, 0.2);
  clip-path: inset(0 15% 0 0 round var(--radius));
  -webkit-clip-path: inset(0 15% 0 0 round var(--radius));
}

.kn-dash__preview-clip::after {
  content: '';
  position: absolute;
  top: 0;
  right: 15%;
  bottom: 0;
  left: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}

.kn-dash__preview-slot {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 420 / 500;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background-color: rgba(95, 161, 207, 0.2);
  box-sizing: border-box;
  pointer-events: none;
  /* Framing tweak: rig reads top-right in ortho embed — nudge left + down inside the blue stroke. */
  transform: translate(-8%, 9%);
}

.kn-dash__outfit-iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 168px;
  border: none;
  outline: none;
  background-color: rgba(95, 161, 207, 0.2);
  pointer-events: none;
}

.kn-dash__outfit-iframe:focus-visible {
  outline: none;
}

.kn-dash__profile-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  min-width: 0;
}

@media (min-width: 901px) {
  .kn-dash__profile-grid > .kn-dash__profile-meta {
    margin-left: -22px;
  }
}

.kn-dash__profile-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.kn-dash__profile-row--name {
  align-items: center;
}

.kn-dash__motto-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.kn-dash__profile-row--motto-label {
  width: 100%;
}

.kn-dash__profile-row--motto-label .kn-dash__profile-line--label {
  flex: 0 1 auto;
}

.kn-dash__profile-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.78);
}

.kn-dash__profile-icon-svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Heavier strokes so icons read closer to “bold” vs UI text */
.kn-dash__profile-icon-svg :is(path, circle, rect, line, polyline) {
  stroke-width: 2.35;
}

.kn-dash__motto-row {
  /* ~70% of prior width (30% shorter): still fits motto + Save within column. */
  --kn-motto-field-height: calc(1.35 * 11px + 8px + 2px);
  /* Same white opacity as `.kn-dash__motto-save` (see `var(--glass-border)` = 22%). */
  --kn-motto-outline: rgba(255, 255, 255, 0.22);
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  margin-left: calc(22px + 8px);
  width: calc(100% - 30px);
  max-width: min(calc(100% - 30px), calc(25ch + 3.55rem));
  min-width: 0;
  box-sizing: border-box;
}
.kn-dash__profile-line {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: none;
}

.kn-dash__profile-line--name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, min(3vw, 3.6vh), 24px);
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: none;
}

.kn-dash__profile-row:not(.kn-dash__profile-row--name) > .kn-dash__profile-line {
  flex: 1 1 auto;
  min-width: 0;
}

.kn-dash__profile-line--label {
  cursor: pointer;
  font-weight: 800;
}

.kn-dash__profile-line .kn-dash__profile-strong {
  font-weight: 800;
}

.kn-dash__motto-input {
  flex: 1 1 auto;
  /* ch-based min width (~70% of prior); long lines scroll horizontally. */
  min-width: min(22ch, calc(100% - 3.4rem));
  padding: 4px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--kn-motto-outline);
  background: var(--glass-bg);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  resize: none;
  height: var(--kn-motto-field-height);
  min-height: var(--kn-motto-field-height);
  max-height: var(--kn-motto-field-height);
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
  text-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.08);
}

.kn-dash__motto-input::placeholder {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
}

.kn-dash__motto-input::-webkit-scrollbar {
  height: 6px;
}

.kn-dash__motto-input::-webkit-scrollbar-track {
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
}

.kn-dash__motto-input::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.38);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.kn-dash__motto-input::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.52);
}

.kn-dash__motto-input:focus {
  outline: none;
  border-color: var(--glass-border-strong);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.kn-dash__motto-save {
  flex-shrink: 0;
  margin: 0;
  padding: 0 11px;
  min-width: 50px;
  box-sizing: border-box;
  height: var(--kn-motto-field-height);
  min-height: var(--kn-motto-field-height);
  max-height: var(--kn-motto-field-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--kn-motto-outline);
  background: var(--glass-bg);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    filter 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
  touch-action: manipulation;
}

.kn-dash__motto-save:hover:not(:disabled) {
  filter: brightness(1.08);
}

.kn-dash__motto-save:focus-visible {
  outline: none;
  border-color: var(--glass-border-strong);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.kn-dash__motto-save:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

.kn-dash__toast {
  margin-top: 2px;
  padding: 7px 10px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  border: 1px solid rgba(140, 230, 185, 0.45);
  background: rgba(95, 210, 155, 0.14);
  color: rgba(200, 245, 218, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}

.kn-dash__toast[data-kind='err'] {
  background: rgba(62, 18, 18, 0.52);
  color: #ffd6d6;
  border-color: rgba(255, 160, 160, 0.35);
}

.kn-dash__updates {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.kn-dash__updates.kn-feed-by-date {
  gap: 18px;
}

.kn-feed-date-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.kn-feed-date-heading {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.kn-dash__update-card {
  padding: 8px 9px 7px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.kn-dash__update-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.kn-dash__update-card__time {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  line-height: 1.3;
}

.kn-dash__update-body {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.42;
  color: var(--ink-soft);
}

/* Dashboard feed widgets only — full lists on /news stay uncapped */
.kn-dash__update-body.kn-dash__update-body--dash-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

@media (max-width: 900px) {
  .kn-dash__top-row {
    flex-direction: column;
  }

  .kn-dash__top-row > .kn-dash__shell,
  .kn-dash__top-row > .kn-dash__inv-column {
    width: 100%;
  }

  .kn-dash__bottom-row {
    grid-template-columns: 1fr;
  }

  .kn-dash__profile-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  .kn-header { gap: 12px; padding: 10px 12px; }
  .kn-nav { display: none; }
  .kn-shell.kn-main-stage { padding: 6px 20px 8px; }
}

@media (max-height: 640px) {
  .kn-header-wrap { padding-top: 6px; }
  .kn-hero__title { letter-spacing: 0.08em; }
}

@media (max-width: 480px) {
  .kn-shell.kn-main-stage { padding: 8px 16px 10px; }
  .kn-header-wrap { padding: 12px 16px 0; }
  .kn-header { padding: 8px 10px; flex-wrap: wrap; }
  .kn-brand { font-size: 18px; letter-spacing: 0.1em; }
  .kn-brand .kn-brand__tag { display: none; }
  .kn-header__actions { gap: 8px; }
  .kn-header-token-balance {
    max-width: min(52vw, 160px);
    padding: 6px 10px;
    font-size: 12px;
  }
  .kn-header-token-balance__sym {
    font-size: 10px;
  }
  .kn-btn {
    padding: 10px 16px;
    font-size: 13px;
    min-height: 42px;
  }
  .kn-btn--hero-play {
    padding: 18px 36px;
    min-height: 58px;
    font-size: 17px;
  }
  .kn-dash__play-anchor .kn-btn--hero-play {
    padding: 14px 29px;
    min-height: 46px;
    font-size: 14px;
  }
  .kn-hero__cta { flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .kn-reveal {
    transition: opacity 1ms linear !important;
    transform: none !important;
  }
  .kn-fullbg__layer {
    transition: opacity 220ms ease !important;
  }
  .kn-fullbg__layer .kn-fullbg__pan,
  .kn-fullbg__layer--on .kn-fullbg__pan {
    animation: none !important;
    transform: none !important;
  }
}

/*
 * --- DOM parity with current `site/index.html` (carousel wrapper, login curtain) ---
 * Original style1 assumed `.kn-fullbg__layer` was a direct child of `.kn-fullbg` and
 * used heavy z-index on ::before / ::after. Lower those so `.kn-fullbg__dash-intro`
 * can sit above photos but under the bottom scrim where needed.
 */
.kn-fullbg {
  overflow: hidden;
}

.kn-fullbg__carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Style1 veils live on ::before / ::after; mute the style2 overlay nodes from HTML */
.kn-sky-clouds,
.kn-fullbg__sky-tint {
  display: none !important;
}

.kn-fullbg::before {
  z-index: 1;
}

.kn-fullbg::after {
  z-index: 4;
}

/* Login → dashboard: darker linear gradient (same axis as `.kn-fullbg--dashboard`) for loading veil + intro handoff */
.kn-fullbg__dash-intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
  perspective: 1100px;
  perspective-origin: 50% 38%;
  background: linear-gradient(
    180deg,
    #6ba8d4 0%,
    #4d8cc4 18%,
    #3a73ad 42%,
    #2c5c87 72%,
    #1a3f5c 100%
  );
  transition: opacity 1.15s ease;
}

.kn-fullbg__dash-intro.kn-fullbg__dash-intro--on {
  opacity: 1;
}

.kn-dash-enter-curtain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
  perspective: 1100px;
  perspective-origin: 50% 38%;
  background: linear-gradient(
    180deg,
    #6ba8d4 0%,
    #4d8cc4 18%,
    #3a73ad 42%,
    #2c5c87 72%,
    #1a3f5c 100%
  );
  transition: opacity 240ms cubic-bezier(0.33, 0.06, 0.19, 1);
}

.kn-dash-enter-curtain__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100%;
  padding: min(8vh, 56px) 24px;
  text-align: center;
}

.kn-dash-enter-curtain__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, min(9vw, 12vh), 72px);
  letter-spacing: 0.16em;
  line-height: 1.02;
  color: var(--ink);
  text-transform: uppercase;
  text-shadow:
    0 2px 3px rgb(0 0 0 / 28%),
    0 12px 40px rgb(0 40 70 / 45%);
}

.kn-dash-enter-curtain__status {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.76);
  text-shadow: 0 1px 8px rgb(0 30 50 / 55%);
}

/* Depth: vignette between cloud sheet (::before) and title stack */
.kn-dash-enter-curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 96% 74% at 50% 28%,
    transparent 0%,
    rgb(0 20 40 / 50%) 100%
  );
}

.kn-dash-enter-curtain::before,
.kn-fullbg__dash-intro::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 170%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.09;
  transform-origin: 50% 36%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
  background-size:
    11% 7%,
    16% 5%,
    9% 8%,
    14% 6%,
    12% 5%,
    10% 6%,
    8% 5%,
    13% 7%,
    18% 4%,
    7% 6%,
    15% 5%,
    11% 8%,
    9% 5%;
  background-position:
    8% 22%,
    35% 18%,
    58% 28%,
    72% 20%,
    22% 38%,
    88% 32%,
    48% 8%,
    12% 48%,
    65% 44%,
    92% 18%,
    28% 12%,
    78% 52%,
    5% 32%;
  background-repeat: no-repeat;
  animation: kn-dash-portal-clouds 13s ease-in-out infinite alternate;
}

@keyframes kn-dash-portal-clouds {
  0% {
    transform: translate3d(11%, 4%, -420px) scale(0.46);
  }
  100% {
    transform: translate3d(-12%, -3%, 200px) scale(1.38);
  }
}

.kn-dash-enter-curtain.is-in {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 260ms cubic-bezier(0.33, 0.06, 0.19, 1);
}

@media (prefers-reduced-motion: reduce) {
  .kn-fullbg__dash-intro {
    transition: opacity 0.22s ease !important;
  }
  .kn-dash-enter-curtain::before,
  .kn-fullbg__dash-intro::before {
    animation: none !important;
    transform: none !important;
    opacity: 0.08;
  }
}

/*
 * Signed-in dashboard: blue vertical gradient + horizontal drifting geo clouds
 * (photo carousel hidden). `.kn-fullbg--dashboard` is toggled in `home.js`.
 */
.kn-fullbg.kn-fullbg--dashboard {
  background: linear-gradient(
    180deg,
    #92cce9 0%,
    #72b4e3 18%,
    #4f95ce 42%,
    #386f9d 72%,
    #204a68 100%
  );
}

.kn-fullbg--dashboard .kn-fullbg__carousel {
  opacity: 0;
  transition: opacity 0.85s ease;
  pointer-events: none;
}

/* Cold signed-in restore (refresh): avoid ~850ms carousel fade — dashboard gradient is immediate. */
.kn-fullbg.kn-fullbg--dashboard.kn-fullbg--dash-instant .kn-fullbg__carousel {
  transition: none;
  opacity: 0;
}

.kn-fullbg--dashboard::before {
  z-index: 3;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, transparent 38%);
}

.kn-fullbg--dashboard::after {
  z-index: 4;
  background: linear-gradient(
    to top,
    rgb(8 35 65 / 0.36) 0%,
    rgb(18 55 95 / 0.15) 35%,
    transparent 62%
  );
}

.kn-fullbg--dashboard .kn-sky-clouds {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.kn-fullbg--dashboard .kn-fullbg__sky-tint {
  display: none !important;
}

.kn-fullbg--dashboard .kn-geo-puff {
  position: absolute;
  pointer-events: none;
  opacity: 0.13;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.kn-fullbg--dashboard .kn-geo-block {
  position: absolute;
  display: block;
  background: #fff;
  border-radius: 4px;
}

@keyframes kn-dash-geo-drift-ltr {
  0% {
    transform: translate3d(-38vw, 0, 0);
  }
  100% {
    transform: translate3d(138vw, 0, 0);
  }
}

@keyframes kn-dash-geo-drift-rtl {
  0% {
    transform: translate3d(138vw, 0, 0);
  }
  100% {
    transform: translate3d(-38vw, 0, 0);
  }
}

/* Top band — left → right */
.kn-fullbg--dashboard .kn-geo-puff--1 {
  top: 6%;
  width: 200px;
  height: 64px;
  animation: kn-dash-geo-drift-ltr 118s linear infinite;
  animation-delay: -18s;
}
.kn-fullbg--dashboard .kn-geo-puff--1 .kn-geo-block--a {
  width: 96px;
  height: 30px;
  left: 0;
  top: 18px;
}
.kn-fullbg--dashboard .kn-geo-puff--1 .kn-geo-block--b {
  width: 56px;
  height: 22px;
  left: 72px;
  top: 0;
}
.kn-fullbg--dashboard .kn-geo-puff--1 .kn-geo-block--c {
  width: 72px;
  height: 26px;
  left: 44px;
  top: 36px;
}

/* Top band — right → left */
.kn-fullbg--dashboard .kn-geo-puff--2 {
  top: 14%;
  width: 220px;
  height: 72px;
  animation: kn-dash-geo-drift-rtl 132s linear infinite;
  animation-delay: -44s;
}
.kn-fullbg--dashboard .kn-geo-puff--2 .kn-geo-block--a {
  width: 68px;
  height: 24px;
  left: 0;
  top: 8px;
}
.kn-fullbg--dashboard .kn-geo-puff--2 .kn-geo-block--b {
  width: 92px;
  height: 32px;
  left: 40px;
  top: 28px;
}
.kn-fullbg--dashboard .kn-geo-puff--2 .kn-geo-block--c {
  width: 48px;
  height: 20px;
  left: 120px;
  top: 0;
}
.kn-fullbg--dashboard .kn-geo-puff--2 .kn-geo-block--d {
  width: 64px;
  height: 22px;
  left: 96px;
  top: 48px;
}

/* Upper-mid — LTR */
.kn-fullbg--dashboard .kn-geo-puff--3 {
  top: 24%;
  width: 180px;
  height: 58px;
  animation: kn-dash-geo-drift-ltr 142s linear infinite;
  animation-delay: -6s;
}
.kn-fullbg--dashboard .kn-geo-puff--3 .kn-geo-block--a {
  width: 78px;
  height: 28px;
  left: 10px;
  top: 22px;
}
.kn-fullbg--dashboard .kn-geo-puff--3 .kn-geo-block--b {
  width: 52px;
  height: 20px;
  left: 0;
  top: 0;
}
.kn-fullbg--dashboard .kn-geo-puff--3 .kn-geo-block--c {
  width: 70px;
  height: 24px;
  left: 70px;
  top: 10px;
}

/* Upper-mid — RTL */
.kn-fullbg--dashboard .kn-geo-puff--4 {
  top: 32%;
  width: 240px;
  height: 80px;
  animation: kn-dash-geo-drift-rtl 105s linear infinite;
  animation-delay: -72s;
}
.kn-fullbg--dashboard .kn-geo-puff--4 .kn-geo-block--a {
  width: 110px;
  height: 34px;
  left: 0;
  top: 24px;
}
.kn-fullbg--dashboard .kn-geo-puff--4 .kn-geo-block--b {
  width: 60px;
  height: 22px;
  left: 88px;
  top: 0;
}
.kn-fullbg--dashboard .kn-geo-puff--4 .kn-geo-block--c {
  width: 84px;
  height: 28px;
  left: 64px;
  top: 50px;
}
.kn-fullbg--dashboard .kn-geo-puff--4 .kn-geo-block--d {
  width: 46px;
  height: 18px;
  left: 154px;
  top: 12px;
}

/* Screen middle — LTR */
.kn-fullbg--dashboard .kn-geo-puff--5 {
  top: 46%;
  width: 190px;
  height: 60px;
  animation: kn-dash-geo-drift-ltr 128s linear infinite;
  animation-delay: -55s;
}
.kn-fullbg--dashboard .kn-geo-puff--5 .kn-geo-block--a {
  width: 64px;
  height: 22px;
  left: 0;
  top: 6px;
}
.kn-fullbg--dashboard .kn-geo-puff--5 .kn-geo-block--b {
  width: 88px;
  height: 30px;
  left: 38px;
  top: 22px;
}
.kn-fullbg--dashboard .kn-geo-puff--5 .kn-geo-block--c {
  width: 54px;
  height: 20px;
  left: 110px;
  top: 0;
}

/* Screen middle — RTL */
.kn-fullbg--dashboard .kn-geo-puff--6 {
  top: 54%;
  width: 210px;
  height: 70px;
  animation: kn-dash-geo-drift-rtl 115s linear infinite;
  animation-delay: -22s;
}
.kn-fullbg--dashboard .kn-geo-puff--6 .kn-geo-block--a {
  width: 74px;
  height: 26px;
  left: 8px;
  top: 0;
}
.kn-fullbg--dashboard .kn-geo-puff--6 .kn-geo-block--b {
  width: 98px;
  height: 32px;
  left: 0;
  top: 30px;
}
.kn-fullbg--dashboard .kn-geo-puff--6 .kn-geo-block--c {
  width: 58px;
  height: 22px;
  left: 108px;
  top: 8px;
}
.kn-fullbg--dashboard .kn-geo-puff--6 .kn-geo-block--d {
  width: 72px;
  height: 24px;
  left: 100px;
  top: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .kn-fullbg--dashboard .kn-geo-puff {
    animation: none !important;
    opacity: 0.09;
  }
}

/* ── Dashboard feed cards (linked) & news / CMS satellites ─────────────────── */
.kn-dash__update-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.kn-dash__update-card--link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}
.kn-dash__update-card--link:focus-visible {
  outline: none;
  border-color: var(--glass-border-strong);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}
.kn-dash__feed-empty {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.45;
}
.kn-news-main {
  width: 100%;
  min-width: 0;
  padding-bottom: clamp(28px, 5vh, 56px);
}
.kn-news-panel {
  padding: 16px 18px;
  margin-bottom: 14px;
}
.kn-news-article {
  /* Breathing room when scrolling to an article (scrollIntoView / deep links). */
  scroll-margin-top: clamp(12px, 2.5vh, 24px);
  padding: 20px 18px;
  margin-bottom: 14px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.kn-news-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.kn-news-article__pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.kn-news-article__time {
  font-size: 12px;
  color: var(--ink-mute);
}
.kn-news-article__title {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.kn-news-article__body {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.kn-news-article__body p {
  margin: 0;
}

.kn-feed-md-body strong {
  font-weight: 800;
}
.kn-feed-md-body em {
  font-style: italic;
}
.kn-feed-md-body .kn-feed-md-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 12px 0;
  display: block;
}
.kn-feed-md-body .kn-feed-md-a {
  color: rgba(180, 225, 255, 0.95);
  text-decoration: underline;
  font-weight: 600;
}

.kn-cms-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 14px 36px;
  box-sizing: border-box;
}
.kn-cms-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.kn-cms-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(14px, 2.8vw, 17px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kn-cms-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition:
    background-color 140ms var(--ease-out),
    border-color 140ms var(--ease-out),
    opacity 140ms var(--ease-out),
    filter 120ms var(--ease-out),
    transform 120ms var(--ease-out);
}
.kn-cms-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--glass-border-strong);
}
.kn-cms-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}
.kn-cms-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kn-cms-btn--primary {
  color: var(--cta-text);
  background: linear-gradient(180deg, var(--orange-1) 0%, var(--orange-2) 48%, var(--orange-3) 100%);
  border: 1px solid var(--cta-rim);
  font-weight: 800;
  box-shadow:
    inset 0 2px 0 rgba(255, 236, 200, 0.55),
    inset 0 -3px 10px rgba(110, 42, 10, 0.38);
  text-shadow:
    0 1px 0 rgba(255, 228, 170, 0.42),
    0 -1px 1px rgba(0, 0, 0, 0.22);
}
.kn-cms-btn--primary:hover:not(:disabled) {
  filter: brightness(1.05);
  border-color: var(--cta-rim);
  background: linear-gradient(180deg, var(--orange-1) 0%, var(--orange-2) 48%, var(--orange-3) 100%);
}
.kn-cms-btn--primary:active:not(:disabled) {
  filter: brightness(0.96);
  transform: translateY(1px);
}
.kn-cms-btn--danger {
  color: #fff;
  border: 1px solid #5c1515;
  font-weight: 800;
  background: linear-gradient(180deg, #e85a5a 0%, #c43333 48%, #8f2020 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 210, 210, 0.45),
    inset 0 -3px 12px rgba(40, 10, 10, 0.55);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 -1px 1px rgba(0, 0, 0, 0.25);
}
.kn-cms-btn--danger:hover:not(:disabled) {
  filter: brightness(1.06);
  border-color: #5c1515;
  background: linear-gradient(180deg, #e85a5a 0%, #c43333 48%, #8f2020 100%);
}
.kn-cms-btn--danger:active:not(:disabled) {
  filter: brightness(0.96);
  transform: translateY(1px);
}
.kn-cms-btn--ghost {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.kn-cms-back {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
}
.kn-cms-panel.kn-dash__shell {
  padding: 10px 12px 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 3%);
}
.kn-cms-panel > .kn-dash__section-title:first-child {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
}
.kn-cms-lead {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.kn-cms-label {
  display: block;
  margin: 8px 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.kn-cms-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border-strong);
  background: rgba(10, 35, 60, 0.35);
  color: var(--ink);
  font-size: 13px;
}
.kn-cms-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.kn-cms-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.45;
}
.kn-cms-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}
@media (max-width: 440px) {
  .kn-cms-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.kn-cms-md-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  cursor: pointer;
}
.kn-cms-md-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.kn-cms-caption-hint {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.35;
}
.kn-cms-datetime-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.kn-cms-datetime {
  flex: 1 1 220px;
  min-width: 0;
}
.kn-cms-datetime-row .kn-cms-btn {
  flex: 0 0 auto;
}
.kn-cms-hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.kn-cms-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.kn-cms-actions .kn-cms-btn {
  width: 100%;
}
.kn-cms-panel > a.kn-cms-btn {
  width: auto;
  align-self: flex-start;
}
.kn-cms-toast {
  margin-bottom: 8px;
  padding: 8px 11px;
  border-radius: var(--radius);
  background: rgba(20, 55, 90, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.kn-cms-toast[data-kind='err'] {
  background: rgba(90, 28, 28, 0.55);
  border-color: rgba(255, 180, 180, 0.35);
}

/* ---------- Reading mode (Docs + How to Play) ---------- */

/* Strip every scrim layer site-wide — the uniform 15%-black base `::before`, the
   bottom-heavy black `::after`, and the dashboard variant top/bottom washes. No more
   black-to-transparent fade behind the header nav on any page. */
.kn-fullbg::before,
.kn-fullbg::after,
.kn-fullbg--dashboard::before,
.kn-fullbg--dashboard::after {
  background: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* `position: sticky` on the docbook sidebar resolves against its nearest scroll container.
   `.kn-main-stage--dashboard` has `overflow-x: hidden`, which makes `overflow-y: visible`
   compute to `auto` — turning the stage into a non-scrolling scroll container that traps
   sticky positioning. On reading pages, escape the stage scrollport so the sidebar sticks
   to `.kn-page--dashboard` (the actual scroller). */
html.kn-html--reading .kn-page.kn-page--dashboard > .kn-shell.kn-main-stage--dashboard {
  overflow: visible !important;
}

/* Smooth scrolling for native anchor jumps + hashchange-driven scroll. */
html { scroll-behavior: smooth; }
.kn-page.kn-page--dashboard { scroll-behavior: smooth; }
.kn-shell.kn-main-stage { scroll-behavior: smooth; }

/* Header → content gap stays at the shared `.kn-main-stage--dashboard` shell padding
   (`clamp(10px, 1.6vh, 20px)`), matching the dashboard. The docbook + guide drop their
   own top margins so the shell padding is the only inset above the content. */
.kn-shell.kn-main-stage--dashboard .kn-docs-page .kn-docbook,
.kn-shell.kn-main-stage--dashboard .kn-howto-page .kn-docbook,
.kn-shell.kn-main-stage--dashboard .kn-howto-page .kn-guide,
.kn-shell.kn-main-stage--dashboard .kn-leaderboard-page .kn-docbook {
  margin-top: 0;
}

/* How to Play now uses the docbook grid shell too (sidebar + main column). The kn-guide
   slots in as the right column; it must lose its column-width clamp inside the grid cell. */
.kn-howto-page > .kn-docbook > .kn-guide {
  max-width: none;
  margin-inline: 0;
  margin-top: 0;
}

/* Icon strip lives inside the narrower docbook right column. Force a single row + let the
   slots shrink to fit so 10 icons sit on one line (no wrap, no overflow). */
.kn-howto-page .kn-guide__icon-strip-inner {
  flex-wrap: nowrap;
  gap: clamp(4px, 0.9vw, 14px);
  justify-content: center;
}

.kn-howto-page .kn-guide__icon-strip-inner > .kn-guide__slot-item:not(.kn-guide__slot-item--figure) {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: clamp(64px, 9vw, 92px);
}

.kn-howto-page .kn-guide__icon-strip-inner .kn-guide__slot-cap {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

/* Every glass surface with `backdrop-filter: blur(14px)` + translucent background was sampling
   the dashboard sky gradient behind it; combined with the soft drop-shadow and `saturate(1.05)`,
   the blur produced a darker top edge inside every panel (most visible on the header nav).
   Strip backdrop-filter + drop-shadow and use a slightly more opaque background so the panels
   paint as clean glass with no internal dark gradient — on every page. */
.kn-header,
.kn-guide__hero-band,
.kn-guide__block,
.kn-docbook__sidebar,
.kn-docbook__article {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ---------- Themed scrollbars (matches the glass UI palette) ---------- */
/* Firefox + Chromium standard hook. */
html,
.kn-page.kn-page--dashboard,
.kn-shell.kn-main-stage,
.kn-docbook__sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.08);
}

/* Webkit/Chromium long form — match the existing `.kn-dash__motto-input` treatment so the
   page scrollbar matches the inline scrollers already in the dashboard. */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.kn-page.kn-page--dashboard::-webkit-scrollbar,
.kn-shell.kn-main-stage::-webkit-scrollbar,
.kn-docbook__sidebar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.kn-page.kn-page--dashboard::-webkit-scrollbar-track,
.kn-shell.kn-main-stage::-webkit-scrollbar-track,
.kn-docbook__sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  margin: 4px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.kn-page.kn-page--dashboard::-webkit-scrollbar-thumb,
.kn-shell.kn-main-stage::-webkit-scrollbar-thumb,
.kn-docbook__sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.26));
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.kn-page.kn-page--dashboard::-webkit-scrollbar-thumb:hover,
.kn-shell.kn-main-stage::-webkit-scrollbar-thumb:hover,
.kn-docbook__sidebar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.34));
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
.kn-page.kn-page--dashboard::-webkit-scrollbar-corner,
.kn-shell.kn-main-stage::-webkit-scrollbar-corner,
.kn-docbook__sidebar::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------- Professional guide refresh ---------- */
.kn-guide {
  max-width: 1180px;
  gap: clamp(12px, 1.8vh, 18px);
}

.kn-guide__hero-band {
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 6px 22px rgb(0 0 0 / 4%);
}

.kn-guide__title {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kn-guide__lead {
  max-width: 52ch;
  color: var(--ink-soft);
}

.kn-guide__toc-link {
  color: var(--cta-text);
  background: linear-gradient(180deg, var(--orange-1) 0%, var(--orange-2) 48%, var(--orange-3) 100%);
  border: 1px solid var(--cta-rim);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 236, 200, 0.5),
    inset 0 -2px 8px rgba(110, 42, 10, 0.28);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kn-guide__toc-link:hover,
.kn-guide__toc-link:focus-visible {
  filter: brightness(1.06);
}

.kn-guide__toc-link:active {
  transform: translateY(2px);
}

.kn-guide__block {
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  box-shadow: 0 6px 22px rgb(0 0 0 / 4%);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

.kn-guide__p,
.kn-guide__li {
  font-size: 14px;
  line-height: 1.6;
}

.kn-guide__h2 {
  margin-bottom: 10px;
  font-size: clamp(17px, 2.2vw, 21px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- GitBook-style docs ---------- */
.kn-docbook {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  margin-top: clamp(14px, 2.5vh, 28px);
  padding-bottom: clamp(24px, 4vh, 48px);
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.kn-docbook__sidebar {
  position: sticky;
  top: clamp(10px, 1.6vh, 20px);
  align-self: start;
  max-height: calc(100svh - clamp(20px, 3.2vh, 40px));
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  padding: 12px;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

.kn-docbook__sideLabel {
  margin: 2px 0 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-mute);
}

.kn-docbook__navGroup {
  display: flex;
  flex-direction: column;
}

.kn-docbook__navGroup + .kn-docbook__navGroup {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}

.kn-docbook__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kn-docbook__navLink {
  display: block;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid transparent;
}

.kn-docbook__navLink:hover,
.kn-docbook__navLink:focus-visible {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  outline: none;
}

.kn-docbook__article {
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  padding: clamp(16px, 2.2vh, 22px);
  box-shadow: 0 6px 22px rgb(0 0 0 / 4%);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

.kn-docbook__header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}

.kn-docbook__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.kn-docbook__h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.1;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kn-docbook__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-soft);
}

.kn-docbook__section {
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border);
}

.kn-docbook__section:last-child {
  border-bottom: 0;
}

.kn-docbook__h2 {
  margin: 0 0 10px;
  font-size: clamp(20px, 2.2vw, 24px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  scroll-margin-top: clamp(16px, 3vh, 28px);
}

.kn-docbook__h3 {
  margin: 14px 0 8px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.kn-docbook__section {
  scroll-margin-top: clamp(16px, 3vh, 28px);
}

.kn-docbook__p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-soft);
}

.kn-docbook__ul {
  margin: 0 0 10px;
  padding-left: 1.2em;
}

.kn-docbook__li {
  margin-bottom: 7px;
  font-size: 15px;
  line-height: 1.66;
  color: var(--ink-soft);
}

.kn-docbook__imgPh {
  margin: 14px 0 16px;
  padding: 18px 16px;
  border: 1px dashed rgba(120, 100, 70, 0.45);
  border-radius: 10px;
  background: rgba(28, 24, 18, 0.35);
  text-align: center;
}

.kn-docbook__imgPh-label {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.kn-docbook__imgPh-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
}

.kn-docbook__figure {
  margin: 14px 0 4px;
  padding: 0;
  border: 0;
}

.kn-docbook__figure-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 28px rgb(0 0 0 / 12%);
}

@media (max-width: 980px) {
  .kn-docbook {
    grid-template-columns: 1fr;
  }

  .kn-docbook__sidebar {
    position: static;
  }
}

/* ============================================================================
   Mobile responsive pass
   ----------------------------------------------------------------------------
   Everything below targets phones + small tablets. The header mobile drawer,
   sidebar disclosures, and dashboard/news tightening all live here so the
   intent is easy to find and override.
   ============================================================================ */

/* ---------- Header: hamburger button (desktop hidden by default) ---------- */

.kn-header__menu-btn {
  display: none; /* desktop: nav links handle navigation, no hamburger needed */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}

.kn-header__menu-btn:hover,
.kn-header__menu-btn:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.kn-header__menu-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.32);
}

.kn-header__menu-icon {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 14px;
}

.kn-header__menu-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 200ms var(--ease-out),
    opacity 150ms var(--ease-out);
  transform-origin: center;
}

.kn-header__menu-btn--open .kn-header__menu-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.kn-header__menu-btn--open .kn-header__menu-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
.kn-header__menu-btn--open .kn-header__menu-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .kn-header__menu-bar { transition: none; }
}

/* ---------- Header: mobile slide-down drawer (desktop hidden) ---------- */

.kn-mobile-drawer {
  /* Positioned to line up exactly with the header (which is inset by the same
     `.kn-header-wrap` horizontal padding); both adjust together on phones. */
  position: absolute;
  top: calc(100% + 6px);
  left: 28px;
  right: 28px;
  margin-inline: auto;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 12px 36px rgb(0 0 0 / 24%);
  pointer-events: auto;
  z-index: 25;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 200ms var(--ease-out),
    transform 220ms var(--ease-out);
  visibility: hidden;
}

.kn-mobile-drawer[hidden] {
  display: none !important;
}

.kn-mobile-drawer.kn-mobile-drawer--open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.kn-mobile-drawer__link {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}

.kn-mobile-drawer__link:hover,
.kn-mobile-drawer__link:focus-visible {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
  outline: none;
}

/* Show the drawer's affordance only under the nav-fit breakpoint. */
@media (min-width: 881px) {
  .kn-mobile-drawer,
  .kn-header__menu-btn {
    display: none !important;
  }
}

@media (max-width: 880px) {
  .kn-header__menu-btn {
    display: inline-flex;
  }
  /* .kn-nav already hidden at this breakpoint (see ~line 2008). The token pill
     loses room beside the hamburger + connect button on phones, so drop it
     entirely; the dashboard's profile card already surfaces the same balance. */
  .kn-header-token-balance { display: none !important; }
}

/* ---------- Header: tightening for very narrow phones (<=480 / <=360) ---------- */

@media (max-width: 480px) {
  .kn-header-wrap {
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) 0
             max(12px, env(safe-area-inset-left, 0px));
  }
  .kn-header {
    gap: 8px;
    padding: 6px 8px;
    /* keep one-line layout: brand left, actions/hamburger right; no flex-wrap */
    flex-wrap: nowrap;
  }
  .kn-header__menu-btn {
    width: 38px;
    height: 38px;
  }
  .kn-header__actions { gap: 6px; }
  .kn-mobile-drawer {
    left: 12px;
    right: 12px;
    padding: 10px;
  }
  .kn-mobile-drawer__link {
    padding: 11px 12px;
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .kn-header-wrap { padding-left: 8px; padding-right: 8px; }
  .kn-header { gap: 6px; padding: 6px 6px; }
  .kn-brand { font-size: 16px; letter-spacing: 0.08em; }
  .kn-header__menu-btn { width: 36px; height: 36px; }
  .kn-btn {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 38px;
  }
  .kn-mobile-drawer { left: 8px; right: 8px; }
}

/* ---------- Shell padding: shrink the 28px side padding on small viewports ---------- */

@media (max-width: 640px) {
  .kn-shell.kn-main-stage {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
  .kn-shell.kn-main-stage.kn-main-stage--dashboard {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
  .kn-foot {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 380px) {
  .kn-shell.kn-main-stage { padding-left: 10px; padding-right: 10px; }
  .kn-shell.kn-main-stage.kn-main-stage--dashboard { padding-left: 10px; padding-right: 10px; }
}

/* ---------- Hero + stats: wrap stats, never overflow on phones ---------- */

@media (max-width: 640px) {
  .kn-stats {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

@media (max-width: 480px) {
  .kn-hero {
    padding: 0 6px;
  }
  .kn-hero__title {
    letter-spacing: 0.08em;
  }
  .kn-hero__slogan {
    max-width: 100%;
  }
  .kn-stat {
    /* a touch smaller so two pills fit on one line on most phones, with wrap as fallback */
    padding: 5px 10px;
    font-size: 11.5px;
  }
}

/* ---------- Scroll-to-top FAB: keep clear of mobile chrome ---------- */

@media (max-width: 480px) {
  .kn-scroll-top-fab {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    width: 40px;
    height: 40px;
  }
}

/* ---------- How to Play: icon strip wraps gracefully on phones ---------- */

@media (max-width: 780px) {
  /* Once we drop below desktop widths the 10-across forced layout cramps caption
     text into ellipsis-only blobs. Let them wrap into 5×2 / 4×3 grids instead. */
  .kn-howto-page .kn-guide__icon-strip-inner {
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: clamp(8px, 2.4vw, 16px);
    justify-content: center;
  }
  .kn-howto-page .kn-guide__icon-strip-inner > .kn-guide__slot-item:not(.kn-guide__slot-item--figure) {
    flex: 0 0 calc(20% - 12px);   /* 5 per row at 780px */
    max-width: calc(20% - 12px);
  }
}

@media (max-width: 560px) {
  .kn-howto-page .kn-guide__icon-strip-inner > .kn-guide__slot-item:not(.kn-guide__slot-item--figure) {
    flex: 0 0 calc(25% - 12px);   /* 4 per row */
    max-width: calc(25% - 12px);
  }
  .kn-howto-page .kn-guide__icon-strip-inner .kn-guide__slot-cap {
    white-space: normal;          /* let captions breathe once they have a real cell */
    text-overflow: clip;
  }
}

@media (max-width: 380px) {
  .kn-howto-page .kn-guide__icon-strip-inner > .kn-guide__slot-item:not(.kn-guide__slot-item--figure) {
    flex: 0 0 calc(33.3333% - 10px); /* 3 per row */
    max-width: calc(33.3333% - 10px);
  }
}

/* ---------- Docbook + Guide sidebars: collapse on tablet/phone ---------- */

/* Toggle button lives inside the sidebar; hidden by default (desktop). */
.kn-docbook__sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  font: 600 13px/1.2 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kn-docbook__sidebar-toggle__caret {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms var(--ease-out);
  margin-left: 12px;
  margin-bottom: 2px;
}

.kn-docbook__sidebar--open .kn-docbook__sidebar-toggle__caret {
  transform: rotate(-135deg);
  margin-bottom: -2px;
}

.kn-docbook__sidebar-body {
  display: contents; /* desktop: children render at sidebar level, no extra wrapper box */
}

@media (max-width: 980px) {
  /* Reset sidebar to "looks like the disclosure target" — gap above content,
     constrained max-height so users can still scroll long nav lists. */
  .kn-docbook__sidebar {
    overflow: visible;
    max-height: none;
    padding: 10px;
  }
  .kn-docbook__sidebar-toggle {
    display: flex;
  }
  .kn-docbook__sidebar-body {
    display: none;
    margin-top: 10px;
    max-height: calc(100svh - 200px);
    overflow: auto;
    padding-right: 4px;
  }
  .kn-docbook__sidebar--open .kn-docbook__sidebar-body {
    display: block;
  }
}

/* ---------- Dashboard: tighten cards + stacks on phones ---------- */

@media (max-width: 880px) {
  /* The inventory column (Gold & Items / Cosmetics / Mounts trio) doesn't render
     usefully on phones — the slot grid is shrunk to the point of being unreadable
     and the same data is reachable in-game. Hide the whole column on mobile. */
  .kn-dash__inv-column { display: none !important; }
}

@media (max-width: 900px) {
  /* When `.kn-dash__profile-grid` collapses to a single column (see existing
     `@media (max-width: 900px)`), the preview column defaults to `justify-self:
     start` and a 280px width cap which leaves the character viewport tiny and
     flush-left at the top of the card. On phones we stretch the column to the
     full card width and grow the clip so the character + window dominate the
     top half of the card, with a bigger Play CTA sitting half-outside the
     bottom edge. The desktop design also clips 15% off the right of the
     preview to make the CTA "spill" out; on mobile we drop that crop so the
     preview reads as a centered window. */
  .kn-dash__profile-grid > .kn-dash__preview-col {
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    margin-bottom: clamp(36px, 6vh, 56px);
  }
  .kn-dash__preview-clip {
    max-height: min(360px, 44vh);
    clip-path: inset(0 round var(--radius));
    -webkit-clip-path: inset(0 round var(--radius));
  }
  .kn-dash__preview-clip::after {
    right: 0;
  }
  /* `.kn-dash__preview-slot` has a desktop-tuned `transform: translate(-8%, 9%)`
     that re-centers the iframe inside the cropped-on-the-right preview. With
     the crop removed on mobile, that translate just shoves the character left
     and leaves an uncovered strip on the right of the clip. Reset to a small
     downward nudge only so the character sits visually centered (rig is a
     touch top-heavy and reads better with a few % of vertical offset). */
  .kn-dash__preview-slot {
    transform: translate(0, 6%);
  }
  .kn-dash__play-anchor {
    /* No more 15% right-side clip on phones, so center the CTA at exactly 50%. */
    left: 50%;
  }
  /* ~25% bigger Play Now CTA on mobile — padding, min-height, and font scale
     together so the proportions stay consistent with the desktop pill. */
  .kn-dash__play-anchor .kn-btn--hero-play {
    padding: 16px 36px;
    min-height: 56px;
    font-size: 17px;
    letter-spacing: 0.06em;
  }
}

@media (max-width: 600px) {
  /* All dashboard cards share `.kn-dash__shell`; tighten padding to give the content
     more horizontal room on phones. */
  .kn-dash__shell {
    padding: 10px 12px;
    border-radius: 14px;
  }
  /* Profile card display name (`.kn-dash__profile-line--name`) — keep readable at 320px. */
  .kn-dash__profile-line--name {
    font-size: clamp(16px, 5vw, 22px);
  }
  .kn-dash__inv-game-strip {
    scroll-padding-inline: 8px;
  }
  /* NOTE: `.kn-dash__play-anchor .kn-btn--hero-play` sizing is handled in the
     `@media (max-width: 900px)` block above (the 25%-bigger mobile pill).
     Don't redefine it here or it will shrink the button back down on phones. */
}

@media (max-width: 420px) {
  .kn-dash__shell {
    padding: 9px 10px;
    border-radius: 12px;
  }
  /* Tighter motto row and meta lines so they don't truncate. */
  .kn-dash__profile-meta { gap: 8px; }
}

/* ---------- News article + feed cards: phone-friendly ---------- */

@media (max-width: 600px) {
  .kn-news-article {
    padding: 14px;
  }
  .kn-news-article__title {
    font-size: clamp(20px, 5vw, 26px);
    line-height: 1.2;
  }
  .kn-news-article__body { font-size: 14px; }
  .kn-feed-md-body .kn-feed-md-img {
    border-radius: 10px;
  }
  /* Pill row should wrap rather than truncate. */
  .kn-news-article__meta { gap: 6px 8px; }
}

/* ---------- Toasts: tuck below header + respect safe area ---------- */

/* `home.js` and `news-app.js` set the toast host inline with `top: 92px` (sized
   for the desktop header). Pull it in tighter on phones so the toast lands just
   below the compact header chrome and clears the notch; let the toast itself
   stretch edge-to-edge so long error messages don't overflow on small screens. */
@media (max-width: 480px) {
  #kn-toast-host {
    top: max(72px, calc(env(safe-area-inset-top, 0px) + 64px)) !important;
    left: 8px !important;
    right: 8px !important;
  }
  #kn-toast-host > * {
    max-width: none !important;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ---------- Reading pages: keep header drawer above article scrollers ---------- */

/* When the mobile drawer is open we want it to clearly float over scroll
   contents. Bumping z-index on the wrap guarantees that for both `.kn-page`
   (signed-in scroll container) and `main` (guest scroll container). */
html.kn-html--drawer-open .kn-header-wrap {
  z-index: 40;
}

/* ---------- Modals (display-name gate, wallet connect): safe-area aware ---------- */

/* `style2/kintara-modal-shared.css` already caps `width: min(440px|470px, 100vw - 16px)`
   and `max-height: min(500px, 96vh)`. On very small phones we also want to respect the
   bottom safe-area inset and let the panel use the full visible height if the keyboard
   pushes content. */
@media (max-width: 480px) {
  .kintara-auth__backdrop {
    padding: max(10px, env(safe-area-inset-top, 0px))
             max(10px, env(safe-area-inset-right, 0px))
             max(10px, env(safe-area-inset-bottom, 0px))
             max(10px, env(safe-area-inset-left, 0px));
  }
  .kintara-auth__panel.kintara-trade__panel {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }
  .kintara-trade__panel {
    max-height: min(500px, 92svh);
  }
}

/* ---------- Final safety net: prevent horizontal page scroll ---------- */

/* `100%` rather than `100vw` so the value doesn't include the (desktop) scrollbar
   gutter, which would otherwise leave a thin lighter strip on the right of the
   page when previewing at phone widths inside a desktop browser. */
html, body { max-width: 100%; overflow-x: hidden; }
.kn-header-wrap,
.kn-shell.kn-main-stage,
.kn-page { max-width: 100%; }

/* Decorative sky / cloud puffs inside `.kn-fullbg--dashboard` are absolutely
   positioned with hand-tuned pixel widths (200–250px each). On a 400px-wide
   phone they can extend past the viewport and even briefly poke beyond the
   parent's `overflow: hidden` clip during transforms. Force-clip the backdrop
   so no decorative layer can ever bleed into the page edge. */
.kn-fullbg { overflow: hidden !important; }

/* ---------- Leaderboard page ---------- */

/* Reuse the docbook grid + sticky-sidebar pattern from Docs / How to Play so
   readers see one consistent reading shell across the three reference pages.
   The leaderboard itself is intentionally chrome-less: no card container,
   no nested dark window — just typography + hairline row dividers so the
   table reads as the page content (matching the blue dashboard backdrop). */
/* Categories swap one-at-a-time (only one section is visible; the rest carry
   the `hidden` attribute). The shared `.kn-docbook__section` adds both
   `padding: 12px 0` and `border-bottom` so every reading article gets the
   stacked-section rhythm Docs uses — but a single-section-visible UI doesn't
   want either of those: the padding wastes vertical space above the title,
   and the bottom border paints a stray hairline below the only visible
   panel. Override both for the leaderboard's panel sections so each category
   sits flush at the top of the article and ends with the "Load more" button. */
.kn-lb__section.kn-docbook__section {
  padding: 0;
  border-bottom: 0;
}

/* Docs / How-to-Play fill the top of the article with an eyebrow + lede block
   so the default `clamp(16px, 2.2vh, 22px)` article padding feels balanced.
   The leaderboard hides its page heading (sr-only) and jumps straight to the
   category H2 + table, so the same padding reads as a "weird big space" above
   the first row. Trim the article top padding (and tighten the header
   margin) so the active category title sits closer to the article edge. */
.kn-lb__article.kn-docbook__article {
  padding-top: clamp(6px, 0.8vh, 10px);
}

.kn-lb .kn-lb__header {
  margin-bottom: clamp(6px, 1vh, 10px);
}

.kn-lb__header {
  margin-bottom: clamp(8px, 1.4vh, 14px);
}

.kn-lb__table {
  display: block;
  /* No background / border / radius — the table flows directly on the page. */
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.kn-lb__row {
  display: grid;
  /* Two anchored columns (rank + player) followed by N value columns. The
     stat count comes from `--lb-value-cols` set per-category by JS, with a
     stylesheet fallback for the rare cold-mount case. */
  grid-template-columns: 72px minmax(0, 1.6fr) repeat(var(--lb-value-cols, 1), minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kn-lb__row:first-child { border-top: 0; }

.kn-lb__row--head {
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 6px 10px;
}

.kn-lb__rows .kn-lb__row:hover {
  /* Soft hover hint — keeps the page-themed feel but signals row affordance. */
  background: rgba(255, 255, 255, 0.04);
}

.kn-lb__cellHead {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(196, 214, 240, 0.85);
}

.kn-lb__cellHead--rank,
.kn-lb__cell--rank {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.kn-lb__cellHead--value,
.kn-lb__cell--value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Private rows: the server swaps the player's display name for the
   `***** (Hidden)` placeholder so the leaderboard still shows their rank
   + stats without leaking identity. Dim the name cell so the row visually
   reads as "redacted" without disappearing entirely. */
.kn-lb__cell--name--hidden {
  color: rgba(220, 230, 245, 0.55);
  font-style: italic;
  letter-spacing: 0.04em;
}

.kn-lb__cell {
  font-size: 14px;
  color: rgba(232, 240, 252, 0.96);
}

.kn-lb__cell--rank {
  font-weight: 700;
  color: rgba(255, 215, 130, 0.95);
  letter-spacing: 0.02em;
}

.kn-lb__cell--name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-category column count: JS sets `--lb-value-cols` on each section AND
   adds these attribute/class hooks as belt-and-suspenders so the right grid
   template is applied even if the inline custom property is ever stripped. */
.kn-lb__section[data-cols="1"],
.kn-lb__section--cols-1 { --lb-value-cols: 1; }
.kn-lb__section[data-cols="2"],
.kn-lb__section--cols-2 { --lb-value-cols: 2; }
.kn-lb__section[data-cols="3"],
.kn-lb__section--cols-3 { --lb-value-cols: 3; }

.kn-lb__status {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(220, 230, 246, 0.72);
}

.kn-lb__moreRow {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.kn-lb__more {
  min-width: 160px;
}

.kn-lb__more[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

/* Tighter spacing on phones so 3-column Materials rows still fit comfortably. */
@media (max-width: 720px) {
  .kn-lb__row {
    grid-template-columns: 50px minmax(0, 1.3fr) repeat(var(--lb-value-cols, 1), minmax(0, 1fr));
    gap: 8px;
    padding: 9px 4px;
  }
  .kn-lb__row--head { padding: 4px 4px 8px; }
  .kn-lb__cell { font-size: 13px; }
  .kn-lb__cell--name { font-size: 13px; }
  .kn-lb__cellHead { font-size: 10.5px; letter-spacing: 0.06em; }
}

/* ---------- Dashboard profile card: leaderboard privacy cog ---------- */

.kn-dash__profile-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kn-dash__profile-title-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Cog button mirrors the `.kn-dash__motto-save` styling so the profile card
   reads as a coherent pair of actions (Save + privacy cog). Same glass
   background, same outline token, same focus ring + hover treatment. The
   only deviation is shape: the cog is an icon-only square sized to the motto
   field height instead of a 50px-wide text pill. */
.kn-dash__profile-cog {
  appearance: none;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: var(--kn-motto-field-height);
  height: var(--kn-motto-field-height);
  min-height: var(--kn-motto-field-height);
  max-height: var(--kn-motto-field-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--kn-motto-outline);
  background: var(--glass-bg);
  color: var(--ink-soft);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    filter 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
  touch-action: manipulation;
}

.kn-dash__profile-cog svg {
  width: 16px;
  height: 16px;
}

.kn-dash__profile-cog:hover:not(:disabled) {
  filter: brightness(1.08);
}

.kn-dash__profile-cog:focus-visible {
  outline: none;
  border-color: var(--glass-border-strong);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.kn-dash__profile-cog--open {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
}

/* The cog used to swap to a red-tinted outline + icon while stats were
   private — but the toggle inside the popover already conveys state, and the
   red tint read as an "error" indicator rather than a status hint. Keep the
   cog visually identical regardless of privacy state. */

.kn-dash__privacy-popover[hidden] { display: none; }

.kn-dash__privacy-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 32, 56, 0.96), rgba(12, 22, 40, 0.96));
  border: 1px solid rgba(120, 170, 240, 0.32);
  z-index: 12;
  color: rgba(232, 240, 252, 0.96);
  font-size: 13px;
}

.kn-dash__privacy-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.kn-dash__privacy-descr {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(216, 224, 240, 0.78);
}

.kn-dash__privacy-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.kn-dash__privacy-toggle-label {
  font-size: 13px;
  font-weight: 600;
}

.kn-dash__privacy-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(60, 70, 90, 0.65);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
  padding: 0;
}

.kn-dash__privacy-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}

.kn-dash__privacy-switch--on {
  background: rgba(60, 140, 220, 0.85);
  border-color: rgba(120, 180, 240, 0.6);
}

.kn-dash__privacy-switch--on .kn-dash__privacy-switch-thumb {
  transform: translateX(20px);
}

.kn-dash__privacy-status {
  margin: 0;
  font-size: 12px;
  color: rgba(196, 210, 230, 0.78);
  min-height: 1.2em;
}

/* On narrow viewports anchor the popover to the right edge of the dashboard
   card so it never overflows the screen. The cog still lives in the title row. */
@media (max-width: 540px) {
  .kn-dash__privacy-popover {
    right: -4px;
    width: min(300px, calc(100vw - 32px));
  }
}