:root {
  --bg: #010810;
  --bg-deep: #000308;
  --panel: rgba(1, 9, 16, 0.97);
  --panel-strong: rgba(2, 14, 24, 0.99);
  --panel-soft: rgba(4, 23, 37, 0.9);
  --border: rgba(176, 240, 255, 0.2);
  --text: #eefbff;
  --muted: #b0d6e4;
  --gold: #f0bb59;
  --gold-strong: #f6cf7c;
  --teal: #33d6c3;
  --teal-soft: #7ceee4;
  --coral: #f47b62;
  --red: #f26452;
  --green: #1cc58b;
  --blue: #4caeff;
  --blue-deep: #0b4f7a;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --fk-logo-mark: url("assets/runtime/brand/FKLogo3.0.png");
  --fk-logo-text: url("assets/runtime/brand/FKLogoText3.0.png");
  --fk-equipped-card-back: url("/assets/card-backs/captains-anchor.png");
}

.fk-account-entry {
  width: 100%;
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(104, 232, 255, .35);
  border-radius: .75rem;
  color: #e9fbff;
  background: rgba(21, 106, 132, .24);
  cursor: pointer;
}

.fk-account-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(2, 13, 22, .78);
}

.fk-account-modal.hidden,
.fk-account-form.hidden,
.fk-account-signed-in.hidden { display: none; }

.fk-account-card {
  position: relative;
  width: min(100%, 28rem);
  padding: 1.5rem;
  border: 1px solid rgba(104, 232, 255, .28);
  border-radius: 1rem;
  color: #e9fbff;
  background: #092334;
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .45);
}

.fk-account-close { position: absolute; top: .65rem; right: .8rem; border: 0; color: inherit; background: none; font-size: 1.6rem; cursor: pointer; }
.fk-account-tabs { display: flex; gap: .5rem; margin: 1rem 0; }
.fk-account-tabs button, .fk-account-link, .fk-account-signed-in button { padding: .6rem .8rem; border: 1px solid rgba(104,232,255,.25); border-radius: .6rem; color: inherit; background: rgba(255,255,255,.05); cursor: pointer; }
.fk-account-form { display: grid; gap: .85rem; }
.fk-account-form label { display: grid; gap: .35rem; font-size: .9rem; }
/* font-size: 1rem is deliberate, not inherited from the .9rem label above it -- iOS Safari
   auto-zooms the whole page on focusing any input computing under 16px, and every account-form
   field (sign-up/sign-in/password change/account deletion) was inheriting the label's .9rem
   (14.4px), confirmed via direct computed-style query against the live app. */
.fk-account-form input { padding: .7rem .8rem; border: 1px solid rgba(104,232,255,.25); border-radius: .6rem; color: #fff; background: rgba(0,0,0,.25); font-size: 1rem; }
.fk-account-status { min-height: 1.25rem; color: #a9ddea; }
.fk-account-signed-in { display: grid; gap: .75rem; }
.fk-auth-page { min-height: 100dvh; display: grid; place-items: center; margin: 0; padding: 1rem; background: #041923; }


* {
  box-sizing: border-box;
}

/* Generic visually-hidden utility (screen-reader-only content) -- .coach-input .sr-only nearby is
   the same technique but scoped to one component; this is the unscoped version other features
   (e.g. the XP/rating graph's text summary, work order 4 item 4) can use directly. */
.fk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

/* Item 7 (2026-08-10 work order 3): applied while any full-screen sheet (avatar/card-back picker,
   more later) is open, so the page behind it can't be scrolled by a touch drag through the
   backdrop. */
body.modal-scroll-locked {
  overflow: hidden;
}

/* The default translucent grey/blue tap-highlight box iOS Safari and Chrome for Android draw on
   any tap target looks unfinished against this project's own custom pressed/focus treatments
   (below, and the many rules already gated behind @media (hover: hover) and (pointer: fine)) --
   turned off globally rather than per-component, since it's a browser chrome default with no
   equivalent on desktop to preserve. */
html {
  -webkit-tap-highlight-color: transparent;
}

/* A real pressed-state on touch, since the (hover: hover) and (pointer: fine) guard above now
   correctly keeps :hover rules from latching after a tap -- without this, tapping a button on a
   touch device gave no visual feedback at all between touchstart and the eventual click result.
   Scoped to (hover: none) so it never fires on a desktop mouse click (:active already behaves
   correctly there, including wherever a component defines its own more specific :active rule --
   this generic one loses to any of those on specificity or, being unscoped by class, source
   order). Deliberately a subtle, universal dim rather than per-component colors/transforms, which
   would be a real visual-design pass warranting its own owner sign-off, not a one-line default. */
@media (hover: none), (pointer: coarse) {
  button:not(:disabled):active,
  a:active,
  [role="button"]:active {
    opacity: 0.82;
  }
}

body {
  position: relative;
  font-family: "Aptos", "Segoe UI Variable Text", "Trebuchet MS", sans-serif;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(1, 13, 23, 0.97), rgba(0, 3, 8, 1)),
    #000308;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 100%, rgba(156, 222, 242, 0.075) 0 18%, transparent 19%),
    radial-gradient(circle at 0 100%, rgba(156, 222, 242, 0.04) 0 16%, transparent 17%);
  background-size: 72px 42px;
  opacity: 0.26;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 82%, transparent);
}

button,
input,
select {
  font: inherit;
}

/* Every interactive control in this codebase is a real <button> (142 in index.html, more created
   in app.js -- no role="button" div pattern anywhere), so this one rule reaches virtually all of
   them: removes the ~300ms delay before a tap registers (the browser no longer has to wait to see
   whether a second tap is coming to double-tap-zoom) and stops an accidental double-tap on a
   button zooming the page instead of double-firing the button. Links get the same treatment for
   the same reason (the account modal's tab links, the splash screen's "Sign in"/"Skip intro"). */
button,
a {
  touch-action: manipulation;
}

.fk-asset-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.fk-frame-panel {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.fk-frame-panel-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.fk-frame-panel-content {
  min-width: 0;
}

.ambient {
  display: none;
}

.splash-active {
  overflow: hidden;
}

.splash-active .app-shell,
.splash-active .modal,
.splash-active .toast-stack {
  visibility: hidden;
}

.app-launching .app-shell {
  animation: homeReveal 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2.4rem;
  min-height: 100dvh;
  padding: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 44%, rgba(51, 214, 195, 0.14), transparent 20%),
    radial-gradient(circle at 50% 52%, rgba(76, 174, 255, 0.11), transparent 32%),
    linear-gradient(180deg, #000103 0%, #01060d 52%, #000000 100%);
  transition:
    opacity 420ms ease,
    transform 420ms ease,
    visibility 420ms ease;
}

.splash-screen.hidden {
  display: none;
}

.splash-screen.splash-exiting {
  opacity: 0;
  transform: scale(1.018);
  visibility: hidden;
}

.splash-screen.splash-pressed .splash-mark {
  animation: launchMark 760ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.splash-screen.splash-pressed .splash-start {
  animation: powerLaunch 760ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.splash-screen.splash-pressed .splash-start::after {
  animation: powerRing 760ms ease-out forwards;
}

.splash-mark {
  display: grid;
  justify-items: center;
  gap: 1.15rem;
}

.fk-brand-logo {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 26px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 18px rgba(240, 187, 89, 0.12));
}

.fk-brand-logo--splash {
  width: clamp(15rem, 38vw, 30rem);
  height: auto;
}

.splash-mark h1 {
  margin: 0;
  font-family: "Rockwell", "Georgia", serif;
  font-size: clamp(2.8rem, 9vw, 7.2rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #f4fcff;
  text-shadow:
    0 0 22px rgba(124, 238, 228, 0.32),
    0 0 52px rgba(76, 174, 255, 0.26);
}

.splash-fish {
  position: relative;
  width: clamp(8.5rem, 20vw, 12rem);
  height: clamp(4.2rem, 10vw, 6rem);
  filter:
    drop-shadow(0 18px 34px rgba(20, 185, 216, 0.34))
    drop-shadow(0 0 18px rgba(124, 238, 228, 0.2));
}

.fish-body,
.fish-tail,
.fish-eye {
  position: absolute;
  display: block;
}

.fish-body {
  inset: 0 0 0 22%;
  border-radius: 72% 46% 46% 72%;
  background: linear-gradient(135deg, #7ceee4 0%, #4caeff 45%, #176b98 100%);
}

.fish-body::before {
  content: "";
  position: absolute;
  left: 20%;
  top: 15%;
  width: 32%;
  height: 70%;
  border-radius: 50%;
  border-left: 2px solid rgba(244, 252, 255, 0.32);
  transform: rotate(-7deg);
}

.fish-body::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: -12%;
  width: 34%;
  height: 34%;
  border-radius: 0 0 80% 40%;
  background: rgba(51, 214, 195, 0.48);
  transform: rotate(-12deg);
}

.fish-tail {
  left: 0;
  top: 12%;
  width: 38%;
  height: 76%;
  clip-path: polygon(100% 50%, 0 0, 22% 50%, 0 100%);
  background: linear-gradient(135deg, #2bbfc6, #4caeff);
}

.fish-eye {
  right: 20%;
  top: 27%;
  z-index: 2;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  color: #03101a;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.45rem;
  text-align: center;
  transform: rotate(7deg);
}

.splash-start {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(4.6rem, 11vw, 5.6rem);
  height: clamp(4.6rem, 11vw, 5.6rem);
  border: 1px solid rgba(168, 235, 255, 0.42);
  border-radius: 999px;
  color: #dff8ff;
  background:
    linear-gradient(180deg, rgba(244, 252, 255, 0.1), rgba(244, 252, 255, 0.02)),
    rgba(2, 11, 19, 0.86);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.splash-start::before {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border: 1px solid rgba(76, 174, 255, 0.2);
  border-radius: inherit;
}

.splash-start::after {
  content: "";
  position: absolute;
  inset: -1.15rem;
  border: 1px solid rgba(124, 238, 228, 0);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}@media (hover: hover) and (pointer: fine) {
  .splash-start:hover {
  border-color: rgba(124, 238, 228, 0.66);
  background:
    linear-gradient(180deg, rgba(124, 238, 228, 0.16), rgba(76, 174, 255, 0.06)),
    rgba(6, 24, 38, 0.88);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(76, 174, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
  outline: none;
}
}

.splash-start:focus-visible {
  border-color: rgba(124, 238, 228, 0.66);
  background:
    linear-gradient(180deg, rgba(124, 238, 228, 0.16), rgba(76, 174, 255, 0.06)),
    rgba(6, 24, 38, 0.88);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(76, 174, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
  outline: none;
}

.splash-start:active {
  transform: translateY(0) scale(0.98);
}

.splash-start:disabled {
  cursor: default;
}

.power-icon {
  position: relative;
  width: 2rem;
  height: 2rem;
  border: 3px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
}

.power-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.72rem;
  width: 3px;
  height: 1.35rem;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

@keyframes powerLaunch {
  0% {
    transform: scale(1);
    color: #dff8ff;
  }

  18% {
    transform: scale(0.88);
    color: #7ceee4;
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.58),
      0 0 44px rgba(124, 238, 228, 0.48),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  55% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(0.82);
    opacity: 0;
  }
}

@keyframes powerRing {
  0% {
    opacity: 0;
    transform: scale(0.7);
    border-color: rgba(124, 238, 228, 0);
  }

  18% {
    opacity: 1;
    border-color: rgba(124, 238, 228, 0.9);
  }

  100% {
    opacity: 0;
    transform: scale(2.35);
    border-color: rgba(76, 174, 255, 0);
  }
}

@keyframes launchMark {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  36% {
    opacity: 1;
    transform: translateY(-0.25rem) scale(1.01);
  }

  100% {
    opacity: 0;
    transform: translateY(-1.8rem) scale(0.985);
    filter: blur(7px);
  }
}

@keyframes homeReveal {
  0% {
    opacity: 0;
    transform: translateY(1.2rem) scale(0.985);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes fkPortraitFloat {
  0%,
  100% {
    transform: translateY(8%);
  }

  50% {
    transform: translateY(5%);
  }
}

.ambient-one {
  width: 22rem;
  height: 22rem;
  top: -6rem;
  right: -5rem;
  background: radial-gradient(circle, rgba(76, 174, 255, 0.24), transparent 70%);
  animation: drift 16s ease-in-out infinite;
}

.ambient-two {
  width: 20rem;
  height: 20rem;
  bottom: 10%;
  left: -6rem;
  background: radial-gradient(circle, rgba(51, 214, 195, 0.2), transparent 68%);
  animation: drift 18s ease-in-out infinite reverse;
}

.ambient-three {
  width: 14rem;
  height: 14rem;
  bottom: 12%;
  right: 18%;
  background: radial-gradient(circle, rgba(111, 183, 255, 0.16), transparent 68%);
  animation: drift 12s ease-in-out infinite;
}

.app-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  width: min(1280px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0 1.5rem;
  transition: width 180ms ease, margin 180ms ease;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.6rem;
  padding: 0.85rem 1rem 1.05rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  isolation: isolate;
}

.app-topbar::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: calc(100% + 2.35rem);
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 4, 8, 0.34) 56%, rgba(0, 4, 8, 0));
  -webkit-mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%);
}

.app-topbar > * {
  position: relative;
  z-index: 1;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.brand-lockup:focus-visible {
  outline: 2px solid rgba(124, 238, 228, 0.72);
  outline-offset: 3px;
  border-radius: 8px;
}

.fk-brand-logo--topbar {
  width: 3.25rem;
  height: 3.25rem;
  object-position: center;
}

.brand-copy strong {
  display: block;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 760;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  line-height: 1;
  color: #f4fcff;
  white-space: nowrap;
  text-shadow:
    0 1px 12px rgba(0, 0, 0, 0.86),
    0 0 22px rgba(76, 174, 255, 0.24);
}

.brand-copy span {
  display: block;
  margin-top: 0.18rem;
  color: rgba(230, 173, 88, 0.78);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.82);
}

.brand-fish {
  position: relative;
  flex: 0 0 auto;
  width: 3.9rem;
  height: 2.35rem;
  filter:
    drop-shadow(0 0 16px rgba(124, 238, 228, 0.2))
    drop-shadow(0 10px 22px rgba(20, 185, 216, 0.2));
}

.brand-fish .fish-body::before {
  border-left-width: 1px;
}

.brand-fish .fish-eye {
  right: 10%;
  top: 28%;
  width: 0.58rem;
  height: 0.58rem;
  font-size: 0.5rem;
  letter-spacing: 0;
  line-height: 0.58rem;
  text-transform: none;
}

.profile-button {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 9rem);
  align-items: center;
  gap: 0.72rem;
  min-width: min(16rem, 48vw);
  padding: 0.58rem 0.68rem;
  border: 1px solid rgba(176, 240, 255, 0.18);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}@media (hover: hover) and (pointer: fine) {
  .profile-button:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 238, 228, 0.46);
  background: rgba(76, 174, 255, 0.09);
  outline: none;
}
}

.profile-button:focus-visible,
.profile-button[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: rgba(124, 238, 228, 0.46);
  background: rgba(76, 174, 255, 0.09);
  outline: none;
}

.view-options {
  position: relative;
  margin-left: auto;
}

.view-options-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 2.15rem;
  padding: 0.34rem 0.68rem;
  border: 1px solid rgba(218, 167, 88, 0.28);
  border-radius: 999px;
  color: rgba(239, 210, 157, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    rgba(0, 9, 14, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.view-options-button__icon {
  position: relative;
  width: 0.92rem;
  height: 0.64rem;
  flex: 0 0 auto;
  opacity: 0.94;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
}

.view-options-button__text {
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}@media (hover: hover) and (pointer: fine) {
  .view-options-button:hover {
  transform: translateY(-1px);
  border-color: rgba(231, 181, 100, 0.48);
  color: rgba(255, 226, 172, 0.98);
  background:
    linear-gradient(180deg, rgba(84, 224, 218, 0.07), rgba(255, 224, 158, 0.025)),
    rgba(0, 10, 15, 0.78);
  box-shadow:
    0 0 0 3px rgba(213, 160, 82, 0.12),
    0 0 20px rgba(53, 210, 199, 0.1),
    0 12px 28px rgba(0, 0, 0, 0.28);
  outline: none;
}
}

.view-options-button:focus-visible,
.view-options-button[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: rgba(231, 181, 100, 0.48);
  color: rgba(255, 226, 172, 0.98);
  background:
    linear-gradient(180deg, rgba(84, 224, 218, 0.07), rgba(255, 224, 158, 0.025)),
    rgba(0, 10, 15, 0.78);
  box-shadow:
    0 0 0 3px rgba(213, 160, 82, 0.12),
    0 0 20px rgba(53, 210, 199, 0.1),
    0 12px 28px rgba(0, 0, 0, 0.28);
  outline: none;
}

.view-options-menu {
  position: absolute;
  top: calc(100% + 0.52rem);
  right: 0;
  z-index: 45;
  display: grid;
  gap: 0.42rem;
  width: min(15rem, calc(100vw - 1.25rem));
  padding: 0.5rem;
  border: 1px solid rgba(203, 153, 78, 0.26);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(9, 31, 39, 0.9), rgba(1, 9, 14, 0.94)),
    rgba(0, 8, 12, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 38px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(13px);
}

.view-options-menu::before {
  content: none;
}

.view-options-menu > * {
  position: relative;
  z-index: 1;
}

.view-options-menu__section {
  display: grid;
  gap: 0.32rem;
  padding-top: 0.48rem;
  border-top: 1px solid rgba(203, 153, 78, 0.18);
}

.view-options-menu__kicker {
  padding: 0.1rem 0.38rem 0.18rem;
  color: rgba(119, 228, 221, 0.72);
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72);
}

.view-options-dashboard-button {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  width: 100%;
  min-height: 2.28rem;
  padding: 0.46rem 0.52rem;
  border: 0;
  border-radius: 10px;
  color: rgba(238, 201, 139, 0.94);
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.view-options-dashboard-button__icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  color: rgba(242, 207, 151, 0.92);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.62));
  overflow: visible;
}

.view-options-dashboard-button__icon circle,
.view-options-dashboard-button__icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.view-options-dashboard-button__icon .view-options-dashboard-button__needle {
  fill: rgba(238, 201, 139, 0.42);
  stroke: rgba(238, 201, 139, 0.95);
}@media (hover: hover) and (pointer: fine) {
  .view-options-dashboard-button:hover {
  color: rgba(255, 224, 170, 0.98);
  background: rgba(235, 183, 101, 0.08);
  box-shadow: 0 0 0 2px rgba(213, 160, 82, 0.12);
  outline: none;
}
}

.view-options-dashboard-button:focus-visible {
  color: rgba(255, 224, 170, 0.98);
  background: rgba(235, 183, 101, 0.08);
  box-shadow: 0 0 0 2px rgba(213, 160, 82, 0.12);
  outline: none;
}

.view-options-menu label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.18rem;
  padding: 0.38rem 0.44rem;
  border-radius: 9px;
  color: rgba(224, 237, 238, 0.86);
  font-size: 0.82rem;
  font-weight: 620;
  line-height: 1.25;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}@media (hover: hover) and (pointer: fine) {
  .view-options-menu label:hover {
  color: rgba(244, 250, 248, 0.94);
  background: rgba(116, 229, 219, 0.055);
}
}

.view-options-menu label:focus-within {
  color: rgba(244, 250, 248, 0.94);
  background: rgba(116, 229, 219, 0.055);
}

.view-options-menu label span {
  order: 1;
  min-width: 0;
}

.view-options-menu label input {
  order: 2;
}

.view-options-menu input {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid rgba(213, 160, 82, 0.56);
  border-radius: 4px;
  appearance: none;
  background: rgba(2, 13, 18, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.view-options-menu input::after {
  content: "";
  width: 0.46rem;
  height: 0.26rem;
  border-bottom: 2px solid #071316;
  border-left: 2px solid #071316;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.view-options-menu input:checked {
  border-color: rgba(238, 190, 104, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 231, 177, 0.94), rgba(213, 164, 83, 0.86));
}

.view-options-menu input:checked::after {
  opacity: 1;
}

.view-options-menu input:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(84, 229, 221, 0.2),
    0 0 0 5px rgba(213, 160, 82, 0.12);
}

.animation-speed-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  height: 2.66rem;
  padding: 0.12rem;
  overflow: hidden;
  border: 1px solid rgba(211, 174, 101, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(8, 31, 43, 0.78), rgba(1, 12, 19, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(91, 222, 216, 0.08),
    inset 0 0 16px rgba(54, 205, 203, 0.055),
    0 7px 15px rgba(0, 0, 0, 0.12);
}

.animation-speed-toggle::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  bottom: 0.12rem;
  left: 0.12rem;
  width: calc((100% - 0.24rem) / 3);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(210, 169, 94, 0.9), rgba(137, 93, 39, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 177, 0.24),
    inset 0 -1px 0 rgba(59, 35, 15, 0.24),
    0 0 12px rgba(211, 164, 82, 0.16),
    0 0 8px rgba(78, 211, 204, 0.07);
  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    background 170ms ease;
  transform: translateX(0);
  z-index: 0;
}

.animation-speed-toggle:has(input[value="1.5"]:checked)::after {
  transform: translateX(100%);
}

.animation-speed-toggle:has(input[value="2"]:checked)::after {
  transform: translateX(200%);
}

.view-options-menu .animation-speed-toggle label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  border-radius: 999px;
  color: rgba(214, 233, 233, 0.68);
  font-size: 0.76rem;
  font-weight: 740;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.view-options-menu .animation-speed-toggle label + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  bottom: 0.62rem;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(98, 225, 219, 0.13),
    rgba(211, 174, 101, 0.06),
    transparent
  );
  transition: opacity 140ms ease;
}@media (hover: hover) and (pointer: fine) {
  .view-options-menu .animation-speed-toggle label:hover {
  color: rgba(238, 247, 245, 0.92);
  background-color: rgba(91, 222, 216, 0.035);
}
}

.view-options-menu .animation-speed-toggle label:focus-within {
  color: rgba(238, 247, 245, 0.92);
  background-color: rgba(91, 222, 216, 0.035);
}

.view-options-menu .animation-speed-toggle label:has(input:checked) {
  color: #101915;
  background-color: transparent;
}

.view-options-menu .animation-speed-toggle label:has(input:checked)::before,
.view-options-menu .animation-speed-toggle label:has(input:checked) + label::before {
  opacity: 0;
}

.view-options-menu .animation-speed-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.view-options-menu .animation-speed-toggle input::after {
  content: none;
}

.view-options-menu .animation-speed-toggle span {
  position: relative;
  z-index: 1;
  order: 0;
  display: block;
  justify-self: center;
  align-self: center;
  min-width: 0;
  pointer-events: none;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  color: #03101a;
  background: linear-gradient(135deg, var(--teal-soft), var(--blue));
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(76, 174, 255, 0.18);
}

.profile-avatar.large {
  width: 3.2rem;
  height: 3.2rem;
}

.profile-avatar.asset-backed {
  overflow: hidden;
  color: transparent;
  border: 1px solid rgba(240, 187, 89, 0.34);
  background:
    radial-gradient(circle at 52% 30%, rgba(240, 187, 89, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(4, 18, 28, 0.96), rgba(0, 4, 8, 0.98));
  box-shadow:
    0 0 22px rgba(240, 187, 89, 0.13),
    0 10px 22px rgba(0, 0, 0, 0.3);
}

.fk-character-portrait {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.fk-character-portrait-image {
  width: 138%;
  height: 138%;
  transform: translateY(8%);
  filter:
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.36))
    drop-shadow(0 0 10px rgba(240, 187, 89, 0.12));
  transition: transform 220ms ease, filter 220ms ease;
}@media (hover: hover) and (pointer: fine) {
  .profile-button:hover .fk-character-portrait-image {
  transform: translateY(7%) scale(1.06);
  filter:
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 14px rgba(240, 187, 89, 0.2));
}
}

.profile-button:focus-visible .fk-character-portrait-image {
  transform: translateY(7%) scale(1.06);
  filter:
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 14px rgba(240, 187, 89, 0.2));
}

.profile-avatar.large .fk-character-portrait-image {
  animation: fkPortraitFloat 4.8s ease-in-out infinite;
}

.profile-summary {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
  text-align: left;
}

.profile-summary > span:first-child {
  color: var(--text);
  font-size: 0.82rem;
}

.profile-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.profile-xp-text {
  color: var(--muted);
  font-size: 0.74rem;
}

.profile-xp-remaining {
  display: block;
  overflow: hidden;
  color: rgba(176, 214, 228, 0.62);
  font-size: 0.61rem;
  font-weight: 720;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-xp-track {
  display: block;
  height: 0.36rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.profile-xp-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue), var(--gold));
  transition: width 220ms ease;
}

.profile-menu {
  position: fixed;
  top: 5.95rem;
  right: max(1rem, calc((100vw - 1280px) / 2), env(safe-area-inset-right));
  z-index: 30;
  display: grid;
  gap: 1rem;
  width: min(440px, calc(100vw - 2rem));
  max-height: calc(100svh - 7rem);
  padding: 1.1rem;
  overflow: auto;
}

.profile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.profile-menu-head h2 {
  margin: 0.45rem 0 0;
  font-family: "Georgia", "Cambria", serif;
  font-size: 1.3rem;
}

.profile-menu-title {
  display: block;
  margin-top: 0.25rem;
  color: rgba(246, 207, 124, 0.88);
  font-size: 0.72rem;
  font-weight: 760;
}

.profile-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.menu-mode .trainer-grid,
.session-mode .home-menu {
  display: none;
}

.panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 28%),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.sidebar {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.brand-block {
  position: relative;
  padding: 1rem 0.2rem 0.4rem;
}

.brand-block::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  right: 0.35rem;
  width: 58px;
  height: 30px;
  border-radius: 70% 40% 40% 70%;
  background:
    radial-gradient(circle at 72% 42%, #02101a 0 7%, transparent 8%),
    linear-gradient(135deg, rgba(124, 238, 228, 0.94), rgba(76, 174, 255, 0.82));
  box-shadow: 0 10px 26px rgba(76, 174, 255, 0.28);
}

.brand-block::before {
  content: "";
  position: absolute;
  top: 1.27rem;
  right: 3.42rem;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-right: 20px solid rgba(76, 174, 255, 0.78);
}

.brand-kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: rgba(76, 174, 255, 0.14);
  color: #a8e8ff;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-block h1 {
  margin: 0.85rem 0 0.4rem;
  font-family: "Rockwell", "Georgia", serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: 0.01em;
  color: #dff8ff;
  text-shadow: 0 0 22px rgba(76, 174, 255, 0.32);
}

.brand-block p,
.scenario-copy,
#hero-subtitle,
#modal-copy,
#last-note,
.drill-guide,
.pill-sub,
.metric-subtext {
  color: var(--muted);
  line-height: 1.55;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.metric-card {
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.metric-label,
.pill-label,
.feedback-label,
.result-item span,
.modal-stat span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.metric-value,
.pill-value {
  display: block;
  margin-top: 0.45rem;
  font-size: 1.55rem;
}

.pill-value.has-fk-asset {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.fk-chip,
.fk-chip-stack {
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 8px rgba(240, 187, 89, 0.12));
  transition: transform 180ms ease, filter 180ms ease;
}

.resource-chip-icon {
  width: 1.45rem;
  height: 1.45rem;
}

.section-block {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.section-head h2,
.section-head h3,
#scenario-title,
#modal-title,
#hero-title {
  margin: 0;
  font-family: "Georgia", "Cambria", serif;
  font-weight: 700;
}

.section-badge,
.session-chip,
.scenario-meta span,
.table-pill,
.quest-reward,
.table-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.78rem;
}

.fk-reward-display {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-width: 0;
}@media (hover: hover) and (pointer: fine) {


.quest-card:hover .fk-chip,
.quest-card:hover .fk-chip-stack,
.reward-card:hover .reward-chip-stack {
  transform: translateY(-1px) scale(1.05);
  filter:
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 12px rgba(240, 187, 89, 0.2));
}
}

.table-size-list,
.quest-list,
.mode-list {
  display: grid;
  gap: 0.8rem;
}

.reward-list {
  display: grid;
  gap: 0.75rem;
}

.table-size-card,
.quest-card,
.mode-card,
.reward-card {
  position: relative;
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%),
    rgba(255, 255, 255, 0.025);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}@media (hover: hover) and (pointer: fine) {
  .table-size-card:hover,
  .mode-card:hover,
  .answer-button:hover,
  .primary-button:hover,
  .secondary-button:hover {
  transform: translateY(-2px);
}
}

.table-size-card:focus-visible,
.mode-card:focus-visible,
.answer-button:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible {
  transform: translateY(-2px);
}

.table-size-card.active {
  border-color: rgba(76, 174, 255, 0.52);
  box-shadow: 0 0 0 1px rgba(76, 174, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mode-card {
  width: 100%;
  color: var(--text);
  text-align: left;
}

.mode-card.active {
  border-color: rgba(51, 214, 195, 0.54);
  background:
    linear-gradient(180deg, rgba(51, 214, 195, 0.13), transparent 70%),
    rgba(255, 255, 255, 0.035);
}

.mode-card strong,
.mode-card span {
  display: block;
}

.mode-card span {
  margin-top: 0.28rem;
  color: var(--muted);
  line-height: 1.4;
}

.mode-card em {
  display: inline-flex;
  margin-top: 0.65rem;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  color: #b8d9e7;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-style: normal;
}

.mode-card.disabled {
  opacity: 0.58;
  cursor: not-allowed;
}@media (hover: hover) and (pointer: fine) {
  .mode-card.disabled:hover {
  transform: none;
}
}

.mode-card.disabled:focus-visible {
  transform: none;
}

.reward-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  color: var(--text);
  text-align: left;
}

.reward-card.locked {
  opacity: 0.62;
}

.reward-card.active {
  border-color: rgba(240, 187, 89, 0.55);
}

.reward-preview-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 66px;
}

.reward-preview {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 58px;
  border-radius: 10px;
  color: #162129;
  font-family: "Georgia", "Times New Roman", serif;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.22);
}

.reward-chip-stack {
  position: absolute;
  right: -0.1rem;
  bottom: -0.05rem;
  z-index: 3;
  width: 1.85rem;
  height: 1.85rem;
}

.reward-preview span:first-child {
  font-weight: 800;
  font-size: 1.05rem;
}

.reward-preview span:last-child {
  font-size: 1rem;
}

.reward-copy {
  min-width: 0;
}

.reward-copy strong,
.reward-copy span {
  display: block;
}

.reward-copy span {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.reward-state {
  font-size: 0.75rem;
  color: var(--gold-strong);
}

.reward-progress {
  height: 0.42rem;
  margin-top: 0.55rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.reward-progress div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue), var(--gold));
}

.table-size-card h3,
.quest-card h3 {
  margin: 0;
  font-size: 1rem;
}

.table-size-card p,
.quest-card p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.table-card-top,
.quest-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.8rem;
}

.table-card-bottom,
.quest-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.progress-mini,
.quest-progress-bar,
.progress-track {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.progress-mini,
.quest-progress-bar {
  height: 0.55rem;
}

.progress-track {
  height: 0.7rem;
}

.progress-mini-fill,
.quest-progress-fill,
.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue), var(--gold));
  width: 0;
  transition: width 220ms ease;
}

.workspace {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.home-menu {
  display: grid;
  gap: 1.35rem;
  min-height: min(680px, calc(100dvh - 7rem));
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  background:
    radial-gradient(circle at 16% 0%, rgba(76, 174, 255, 0.13), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(51, 214, 195, 0.1), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 32%),
    var(--panel);
}

.home-menu-head {
  max-width: 760px;
}

.home-menu-head h2 {
  margin: 0.85rem 0 0.45rem;
  font-family: "Georgia", "Cambria", serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
  color: #f4fcff;
}

.home-menu-head p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.home-menu .table-size-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.home-menu .table-size-card {
  display: grid;
  align-content: space-between;
  min-height: 15rem;
  padding: 1.1rem;
  background:
    radial-gradient(circle at 82% 0%, rgba(124, 238, 228, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(0, 8, 15, 0.72);
}

.home-menu .table-size-card h3 {
  font-size: 1.35rem;
  color: var(--gold-strong);
  text-shadow: 0 0 18px rgba(240, 187, 89, 0.18);
}

.home-menu .table-size-card p {
  min-height: 4.2rem;
}

.home-menu .table-size-card.active {
  border-color: rgba(124, 238, 228, 0.66);
  box-shadow:
    0 0 0 1px rgba(124, 238, 228, 0.18),
    0 22px 54px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-menu-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
  gap: 1rem;
  align-items: stretch;
}

.mode-panel,
.launch-panel {
  padding: 1rem;
  border: 1px solid rgba(176, 240, 255, 0.11);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
}

.launch-panel {
  display: grid;
  align-content: center;
  gap: 0.9rem;
}

.launch-kicker {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.launch-panel .primary-button {
  width: 100%;
}

.menu-mode {
  --menu-abyss: #00040a;
  --menu-navy: #031423;
  --menu-navy-glass: rgba(2, 16, 29, 0.78);
  --menu-navy-glass-strong: rgba(1, 11, 20, 0.9);
  --menu-border: rgba(137, 216, 232, 0.18);
  --menu-border-strong: rgba(137, 216, 232, 0.3);
  --menu-gold: #e6ad58;
  --menu-gold-bright: #ffd98a;
  --menu-teal: #36d7dd;
  --menu-teal-soft: #83f0ec;
  --menu-muted: rgba(205, 226, 235, 0.68);
  --menu-dim: rgba(205, 226, 235, 0.5);
  --menu-shadow: 0 24px 68px rgba(0, 0, 0, 0.42);
  --menu-dashboard-background: url("FKMenuBack3.0.png");
  --menu-card-preflop-scene: url("FKPreflop3.4.png");
  --menu-card-headsup-scene: url("FKHeads3.1.png");
  --menu-daily-scene: url("FKDailyBack.png");
  min-height: 100dvh;
  background: var(--menu-abyss);
}

.menu-mode::before {
  opacity: 0.18;
}

.menu-mode .app-topbar {
  display: none;
}

.menu-mode .app-shell {
  width: 100%;
  min-height: 100dvh;
  padding: 0;
}

.menu-mode .workspace {
  min-height: 100dvh;
}

.home-menu.fk-dashboard {
  position: relative;
  display: grid;
  grid-template-columns: clamp(250px, 16vw, 300px) minmax(0, 1fr);
  gap: 0;
  width: 100%;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(3, 20, 35, 0.96) 0%, rgba(1, 11, 22, 0.98) 48%, rgba(0, 4, 10, 1) 100%),
    linear-gradient(90deg, rgba(0, 3, 8, 0.94) 0%, rgba(0, 5, 11, 0.78) 24%, rgba(0, 6, 13, 0.64) 58%, rgba(0, 4, 9, 0.82) 100%),
    var(--menu-abyss);
  box-shadow: none;
  backdrop-filter: none;
}

@media (min-width: 1181px) {
  html.dashboard-subview-active,
  body.dashboard-subview-active {
    height: 100dvh;
    overflow: hidden;
  }

  body.dashboard-subview-active.menu-mode .app-shell,
  body.dashboard-subview-active.menu-mode .workspace,
  body.dashboard-subview-active.menu-mode .home-menu.fk-dashboard {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body.dashboard-subview-active .fk-menu-rail {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }
}

.fk-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--menu-dashboard-background) center 36% / cover no-repeat;
  opacity: 0.64;
}

.fk-dashboard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 8, 14, 0.28) 0%, rgba(0, 8, 14, 0.35) 48%, rgba(0, 3, 8, 0.52) 100%),
    linear-gradient(90deg, rgba(0, 2, 7, 0.72) 0%, rgba(0, 2, 7, 0.38) 18%, rgba(0, 2, 7, 0.08) 38%, transparent 62%),
    radial-gradient(ellipse at 50% 52%, transparent 44%, rgba(0, 0, 0, 0.46) 100%);
  opacity: 1;
}

.fk-menu-rail,
.fk-dashboard-main {
  position: relative;
  z-index: 1;
}

.fk-menu-rail {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: clamp(1.22rem, 1.48vw, 1.58rem) 1.3rem;
  border-right: 1px solid rgba(118, 190, 208, 0.14);
  background:
    linear-gradient(180deg, rgba(2, 18, 31, 0.9) 0%, rgba(0, 8, 17, 0.95) 52%, rgba(0, 3, 9, 0.98) 100%),
    rgba(0, 7, 13, 0.86);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.035),
    inset -1px 0 0 rgba(230, 173, 88, 0.055),
    16px 0 40px rgba(0, 0, 0, 0.18);
}

.fk-menu-brand {
  display: flex;
  align-items: center;
  gap: 0.82rem;
  width: 100%;
  min-height: 4.05rem;
  padding: 0 0.22rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fk-menu-brand:focus-visible {
  outline: 2px solid rgba(124, 238, 228, 0.72);
  outline-offset: 2px;
  border-radius: 8px;
}

.fk-brand-logo--rail {
  width: 3.25rem;
  height: 3.25rem;
  object-position: center;
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 12px rgba(240, 187, 89, 0.12));
}

.fk-menu-brand strong {
  display: block;
  color: #f4fcff;
  font-size: 0.9rem;
  font-weight: 760;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fk-menu-brand span {
  display: block;
  margin-top: 0.18rem;
  color: rgba(230, 173, 88, 0.78);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fk-menu-fish {
  position: relative;
  width: 2.86rem;
  height: 1.6rem;
  border-radius: 60% 48% 48% 60%;
  background:
    radial-gradient(circle at 75% 42%, #000812 0 6%, transparent 7%),
    linear-gradient(135deg, #ffe3a4, #d49a4f);
  box-shadow: 0 0 22px rgba(240, 187, 89, 0.18);
}

.fk-menu-fish::before {
  content: "";
  position: absolute;
  left: -0.66rem;
  top: 0.27rem;
  width: 0;
  height: 0;
  border-top: 0.52rem solid transparent;
  border-bottom: 0.52rem solid transparent;
  border-right: 0.78rem solid rgba(230, 173, 88, 0.92);
}

.fk-menu-nav {
  display: grid;
  gap: 0.4rem;
  margin-top: 1.58rem;
}

/* Only ever shown below 760px (see .fk-menu-nav-toggle's max-width:760px override) -- the rail
   nav stays permanently visible in its normal grid layout above that, where this dropdown
   mechanism doesn't apply at all. */
.fk-menu-nav-toggle {
  display: none;
}

.fk-menu-nav-item {
  display: grid;
  grid-template-columns: 1.42rem minmax(0, 1fr);
  align-items: center;
  gap: 0.82rem;
  min-height: 3.92rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: rgba(199, 224, 232, 0.62);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.145em;
  text-align: left;
  text-transform: uppercase;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

/* .fk-menu-nav-item's own `display: grid` has the same specificity as the UA stylesheet's
   `[hidden] { display: none }` and wins on source order alone -- this override is required for
   the native `hidden` attribute (used by #moderator-nav-item) to actually hide the element. */
.fk-menu-nav-item[hidden] {
  display: none;
}

.fk-menu-nav-icon {
  display: grid;
  place-items: center;
  width: 1.42rem;
  height: 1.42rem;
  color: rgba(142, 181, 197, 0.74);
  line-height: 1;
  opacity: 0.68;
  transition: color 160ms ease, filter 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.dashboard-nav-icon {
  display: block;
  width: 1.22rem;
  height: 1.22rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fk-menu-nav-item.active {
  border-color: rgba(230, 173, 88, 0.38);
  background: linear-gradient(90deg, rgba(230, 173, 88, 0.12), rgba(5, 33, 46, 0.72) 72%);
  color: rgba(255, 221, 154, 0.96);
  box-shadow: inset 3px 0 0 rgba(230, 173, 88, 0.72);
}

.fk-menu-nav-item.active .fk-menu-nav-icon {
  color: rgba(232, 181, 101, 0.98);
  opacity: 1;
  filter: none;
}

.fk-menu-nav-item:last-child {
  margin-top: 0.58rem;
  color: rgba(194, 219, 229, 0.52);
}@media (hover: hover) and (pointer: fine) {
  .fk-menu-nav-item:hover {
  color: rgba(233, 247, 250, 0.88);
  border-color: rgba(118, 190, 208, 0.22);
  background:
    linear-gradient(90deg, rgba(54, 215, 221, 0.055), transparent 82%),
    rgba(8, 34, 48, 0.38);
  outline: none;
}
}

.fk-menu-nav-item:focus-visible {
  color: rgba(233, 247, 250, 0.88);
  border-color: rgba(118, 190, 208, 0.22);
  background:
    linear-gradient(90deg, rgba(54, 215, 221, 0.055), transparent 82%),
    rgba(8, 34, 48, 0.38);
  outline: none;
}@media (hover: hover) and (pointer: fine) {
  .fk-menu-nav-item:hover .fk-menu-nav-icon {
  color: rgba(116, 226, 221, 0.86);
  opacity: 0.94;
  filter: drop-shadow(0 0 5px rgba(54, 215, 221, 0.14));
}
}

.fk-menu-nav-item:focus-visible .fk-menu-nav-icon {
  color: rgba(116, 226, 221, 0.86);
  opacity: 0.94;
  filter: drop-shadow(0 0 5px rgba(54, 215, 221, 0.14));
}@media (hover: hover) and (pointer: fine) {
  .fk-menu-nav-item.active:hover .fk-menu-nav-icon {
  color: rgba(244, 199, 120, 1);
  opacity: 1;
  filter: none;
}
}

.fk-menu-nav-item.active:focus-visible .fk-menu-nav-icon {
  color: rgba(244, 199, 120, 1);
  opacity: 1;
  filter: none;
}

.fk-menu-nav-item:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(124, 238, 228, 0.28),
    0 0 0 3px rgba(54, 215, 221, 0.14);
}

.fk-menu-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  margin-top: auto;
  padding: 0.88rem 0.78rem;
  border: 1px solid rgba(137, 216, 232, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008)),
    rgba(0, 11, 18, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 14px 30px rgba(0, 0, 0, 0.18);
}

/* Only ever shown below 760px (see .fk-menu-profile-extra:not(.hidden), which switches this to
   display:contents so its children become direct grid items of .fk-menu-profile itself) -- above
   that the header's own .fk-dashboard-profile-pill carries streak/goal/premium instead. */
.fk-menu-profile-extra {
  display: none;
}

.fk-menu-profile strong,
.fk-menu-profile span {
  display: block;
}

.fk-menu-profile strong {
  color: #f4fcff;
  font-size: 0.82rem;
  font-weight: 720;
  white-space: nowrap;
}

.fk-menu-profile #dashboard-side-level {
  display: inline;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.fk-menu-profile span {
  color: rgba(176, 214, 228, 0.76);
  font-size: 0.74rem;
}

.fk-menu-profile .fk-dashboard-progress {
  width: min(8.8rem, 100%);
  height: 0.22rem;
  margin-top: 0.28rem;
  background: rgba(176, 240, 255, 0.07);
}

.fk-menu-profile .fk-dashboard-xp-remaining {
  margin-top: 0.38rem;
  line-height: 1.15;
}

.fk-menu-profile .fk-dashboard-progress span {
  background: linear-gradient(90deg, rgba(48, 207, 216, 0.98), rgba(128, 239, 224, 0.86));
  box-shadow: 0 0 12px rgba(54, 215, 221, 0.28);
}

.fk-dashboard-avatar {
  display: grid;
  place-items: center;
  width: 2.62rem;
  height: 2.62rem;
  overflow: hidden;
  border: 1px solid rgba(240, 187, 89, 0.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at 55% 34%, rgba(124, 238, 228, 0.26), transparent 30%),
    radial-gradient(circle at 50% 56%, rgba(12, 53, 80, 0.95), rgba(0, 6, 12, 0.98));
  box-shadow: 0 0 24px rgba(76, 174, 255, 0.14);
}

.fk-dashboard-avatar--large {
  width: 3.18rem;
  height: 3.18rem;
}

.fk-dashboard-avatar.asset-backed {
  color: transparent;
}

.fk-dashboard-avatar .fk-character-portrait {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.fk-dashboard-avatar .fk-character-portrait-image {
  width: 138%;
  height: 138%;
  transform: translateY(8%);
}

.avatar-picker-trigger {
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}@media (hover: hover) and (pointer: fine) {


.fk-menu-profile.avatar-picker-trigger:hover,
.fk-dashboard-profile-pill.avatar-picker-trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 238, 228, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 38px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(240, 187, 89, 0.08);
}
}

.avatar-picker-trigger:focus-visible {
  outline: none;
  border-color: rgba(124, 238, 228, 0.48);
  box-shadow:
    inset 0 0 0 1px rgba(124, 238, 228, 0.18),
    0 0 0 3px rgba(54, 215, 221, 0.16),
    0 0 0 5px rgba(240, 187, 89, 0.09);
}

.fk-dashboard-main {
  display: grid;
  /* The header stays content-sized; whichever content section is actually showing
     (#dashboard-normal-content or #daily-session-screen -- only one is ever display:none, so only
     one occupies this track) takes all remaining height instead of sizing to its own content and
     leaving empty space below it. */
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: clamp(0.85rem, 1.1vw, 1.15rem);
  min-height: 100dvh;
  padding: clamp(1.1rem, 1.7vw, 1.7rem);
}

.fk-dashboard-head {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(34rem, 0.76fr);
  align-items: center;
  gap: 1.35rem;
  min-height: clamp(5rem, 8.2vh, 5.85rem);
}

.fk-dashboard-head-actions {
  display: grid;
  justify-items: end;
  gap: 0.42rem;
  width: min(42rem, 100%);
  justify-self: end;
}

.fk-dashboard-auth {
  position: relative;
  z-index: 4;
}

.fk-dashboard-auth:has(.fk-dashboard-auth-signed-out.hidden) {
  display: none;
}

.fk-dashboard-auth-signed-out,
.fk-dashboard-auth-signed-in {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.fk-dashboard-auth-button,
.fk-dashboard-account-trigger,
.fk-dashboard-account-menu button {
  border: 1px solid rgba(137, 216, 232, 0.24);
  border-radius: 0.62rem;
  color: #e9faff;
  background: rgba(0, 11, 19, 0.82);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  cursor: pointer;
}

.fk-dashboard-auth-button {
  min-height: 2rem;
  padding: 0.42rem 0.78rem;
}

.fk-dashboard-auth-button--primary {
  border-color: rgba(230, 173, 88, 0.72);
  color: #ffe0a3;
  /* Was 0.42 -- noticeably washed-out/hard-to-read next to its 0.82-opacity "Sign in" sibling
     (field feedback). Raised toward that same solidity, same hue, no other change. */
  background: rgba(117, 75, 24, 0.68);
}@media (hover: hover) and (pointer: fine) {


.fk-dashboard-auth-button:hover,
.fk-dashboard-account-trigger:hover,
.fk-dashboard-account-menu button:hover {
  border-color: rgba(131, 240, 236, 0.56);
  color: #fff;
}
}

.fk-dashboard-account-trigger {
  display: grid;
  grid-template-columns: auto max-content auto;
  align-items: center;
  gap: 0.48rem;
  min-height: 2.15rem;
  padding: 0.26rem 0.62rem 0.26rem 0.32rem;
}

.fk-dashboard-account-copy {
  display: grid;
  gap: 0.08rem;
  text-align: left;
}

.fk-dashboard-account-copy > span,
.fk-dashboard-account-copy > small {
  display: block;
  line-height: 1.05;
}

.fk-dashboard-account-copy > small {
  color: rgba(246, 207, 124, 0.72);
  font-size: 0.6rem;
  font-weight: 680;
}

.fk-dashboard-account-avatar {
  width: 1.62rem;
  height: 1.62rem;
}

.fk-profile-account-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.fk-profile-account-card .fk-profile-card-head {
  margin-bottom: 0.24rem;
}

.fk-profile-account-control {
  display: flex;
  min-height: 0;
  padding-bottom: 0.38rem;
}

.fk-profile-account-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.3rem;
  width: 100%;
  min-height: 0;
}

.fk-profile-account-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  align-content: center;
  gap: 0.48rem;
  min-width: 0;
  flex: 1;
  padding: 0.38rem 0.48rem;
  border: 1px solid rgba(137, 216, 232, 0.2);
  border-radius: 0.72rem;
  background: rgba(0, 11, 19, 0.58);
}

.fk-profile-account-avatar {
  width: 3.4rem;
  height: 3.4rem;
}

.fk-profile-account-copy {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

.fk-profile-account-copy strong,
.fk-profile-account-copy small,
.fk-profile-account-copy > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-profile-account-copy strong {
  color: #f4fcff;
  font-size: 1.1rem;
  font-weight: 780;
}

.fk-profile-account-copy small {
  color: rgba(246, 207, 124, 0.86);
  font-size: 0.8rem;
  font-weight: 720;
}

.fk-profile-account-copy > span {
  color: rgba(176, 214, 228, 0.68);
  font-size: 0.72rem;
}

.fk-profile-account-badge {
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(124, 238, 228, 0.24);
  border-radius: 999px;
  color: rgba(155, 241, 224, 0.88);
  background: rgba(38, 126, 115, 0.14);
  font-size: 0.64rem;
  font-weight: 760;
  white-space: normal;
  text-align: center;
  max-width: 5.6rem;
}

.fk-profile-account-badge.pending {
  border-color: rgba(246, 207, 124, 0.28);
  color: rgba(246, 207, 124, 0.86);
  background: rgba(117, 75, 24, 0.18);
}

.fk-profile-account-status {
  min-height: 0.68rem;
  margin: 0;
  color: rgba(176, 214, 228, 0.72);
  font-size: 0.62rem;
}

.fk-profile-plan-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(240, 187, 89, 0.28);
  border-radius: 0.7rem;
  background: linear-gradient(180deg, rgba(240, 187, 89, 0.1), rgba(240, 187, 89, 0.02));
}

.fk-profile-plan-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.fk-profile-plan-copy strong {
  color: var(--gold-strong);
  font-size: 0.78rem;
}

/* Same logo+wordmark lockup as the dashboard button/Premium modal badge -- swapped in over the
   plain "FishKiller Premium" text once Premium is active (app.js's renderProfilePlanSection). */
.fk-profile-plan-title--premium {
  display: flex;
  align-items: center;
  gap: 0.32rem;
}

.fk-profile-plan-badge-mark {
  width: 0.95rem;
  height: 0.95rem;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(240, 187, 89, 0.35));
}

.fk-profile-plan-badge-text {
  color: var(--gold-strong);
  font-family: Georgia, "Cambria", serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fk-profile-plan-copy small {
  color: rgba(176, 214, 228, 0.72);
  font-size: 0.64rem;
}

.fk-profile-plan-action {
  flex: none;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-strong), var(--gold));
  color: #241a08;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 720;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
}@media (hover: hover) and (pointer: fine) {
  .fk-profile-plan-action:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
}

.fk-profile-plan-action:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.fk-profile-plan-action--premium {
  border-color: rgba(124, 238, 228, 0.5);
  background: linear-gradient(180deg, var(--teal-soft), var(--teal));
  color: #04211d;
}

.fk-profile-account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.fk-profile-account-actions button,
.fk-profile-account-footer button {
  min-height: 1.78rem;
  padding: 0.32rem 0.5rem;
  border: 1px solid rgba(137, 216, 232, 0.18);
  border-radius: 0.58rem;
  color: rgba(231, 244, 248, 0.88);
  background: rgba(0, 11, 19, 0.56);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 720;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .fk-profile-account-actions button:hover,
  .fk-profile-account-footer button:hover {
  border-color: rgba(124, 238, 228, 0.42);
  color: #fff;
  background: rgba(22, 83, 91, 0.28);
}
}

.fk-profile-account-actions button:focus-visible,
.fk-profile-account-footer button:focus-visible {
  border-color: rgba(124, 238, 228, 0.42);
  color: #fff;
  background: rgba(22, 83, 91, 0.28);
}

.fk-profile-account-actions button:last-child {
  grid-column: 1 / -1;
}

.fk-profile-account-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  margin-top: 0;
  padding-top: 0.08rem;
}

.fk-profile-account-footer .fk-profile-account-signout {
  border-color: rgba(244, 123, 98, 0.28);
  color: rgba(255, 168, 154, 0.9);
}

.fk-profile-account-danger {
  border-color: rgba(244, 123, 98, 0.28) !important;
  color: rgba(255, 168, 154, 0.9) !important;
}@media (hover: hover) and (pointer: fine) {
  .fk-profile-account-danger:hover {
  border-color: rgba(244, 123, 98, 0.55) !important;
  background: rgba(91, 22, 22, 0.32) !important;
  color: #fff !important;
}
}

.fk-profile-account-danger:focus-visible {
  border-color: rgba(244, 123, 98, 0.55) !important;
  background: rgba(91, 22, 22, 0.32) !important;
  color: #fff !important;
}

.fk-profile-password-form,
.fk-profile-delete-form {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.fk-profile-password-form.hidden,
.fk-profile-delete-form.hidden {
  display: none;
}

.fk-profile-account-danger-notice {
  margin: 0;
  color: rgba(255, 168, 154, 0.9);
  font-size: 0.66rem;
  line-height: 1.4;
}

.fk-profile-main-grid:has(.fk-profile-account-card.hidden) {
  grid-template-columns: 1fr;
}

.fk-dashboard-account-menu {
  position: absolute;
  top: calc(100% + 0.42rem);
  right: 0;
  display: grid;
  gap: 0.32rem;
  width: 10.5rem;
  padding: 0.48rem;
  border: 1px solid rgba(137, 216, 232, 0.22);
  border-radius: 0.72rem;
  background: rgba(0, 10, 18, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.fk-dashboard-account-menu button {
  width: 100%;
  padding: 0.56rem 0.68rem;
  text-align: left;
}

.fk-dashboard-head-actions .fk-dashboard-profile-pill {
  width: fit-content;
  max-width: 100%;
}

.fk-dashboard-greeting {
  margin: 0 0 0.42rem;
  color: var(--menu-muted);
  font-size: clamp(0.88rem, 0.95vw, 1rem);
}

.fk-dashboard-head h2 {
  margin: 0;
  font-family: "Georgia", "Cambria", serif;
  color: #fffaf0;
  font-size: clamp(2.14rem, 2.38vw, 2.72rem);
  font-weight: 600;
  letter-spacing: 0;
}

.fk-dashboard-welcome {
  position: relative;
  z-index: 0;
  width: min(100%, 44rem);
  padding: 0.35rem 0 1rem;
}

.fk-dashboard-welcome::before {
  position: absolute;
  z-index: -1;
  inset: -1rem -2.5rem -0.25rem -1.25rem;
  border-radius: 1.25rem;
  background: radial-gradient(ellipse at 28% 45%, rgba(2, 12, 18, 0.76) 0%, rgba(2, 12, 18, 0.42) 48%, transparent 76%);
  content: "";
  pointer-events: none;
}

.fk-dashboard-welcome-copy {
  color: #fffaf0;
}

.fk-dashboard-welcome-name {
  color: #c58c3a;
  font-family: "Aptos", "Segoe UI Variable Text", "Trebuchet MS", sans-serif;
  font-weight: 800;
}

.fk-dashboard-subtitle {
  max-width: 42rem;
  margin: 0.6rem 0 0;
  color: rgba(237, 247, 251, 0.94);
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.42;
}

.fk-dashboard-profile-pill {
  display: grid;
  /* The last track is a real, reserved column for the Premium button -- sized to its own
     max-content (like the avatar column's "auto") rather than a fixed rem width left over from
     the old decorative icon, which is what let the button's real content spill out past the
     panel's right edge instead of laying out inside it. */
  grid-template-columns: auto 8.75rem 4.5rem 4.5rem max-content;
  align-items: center;
  justify-self: end;
  width: fit-content;
  max-width: 100%;
  gap: 0.5rem;
  min-height: 4.55rem;
  padding: 0.58rem 0.75rem;
  border: 1px solid var(--menu-border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.01)),
    rgba(0, 11, 19, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 16px 42px rgba(0, 0, 0, 0.28);
}

.fk-dashboard-pill-level,
.fk-dashboard-pill-stat {
  display: grid;
  gap: 0.16rem;
}

.fk-dashboard-pill-level {
  width: max-content;
  max-width: 100%;
  justify-self: start;
}

.fk-dashboard-pill-level strong,
.fk-dashboard-pill-stat strong {
  color: #f4fcff;
  font-size: 0.8rem;
}

.fk-dashboard-pill-level span,
.fk-dashboard-pill-stat small {
  color: rgba(176, 214, 228, 0.68);
  font-size: 0.7rem;
}

.fk-dashboard-pill-level #dashboard-level {
  display: inline;
  color: #f4fcff;
  font: inherit;
}

.fk-dashboard-xp-remaining {
  display: block;
  overflow: hidden;
  color: rgba(176, 214, 228, 0.55);
  font-size: 0.61rem;
  font-weight: 720;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-dashboard-pill-stat {
  justify-items: center;
  min-width: 4.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(156, 222, 242, 0.1);
  text-align: center;
}

.fk-dashboard-pill-stat > .fk-dashboard-pill-stat-icon {
  font-size: 1.3125rem;
  line-height: 1;
}

.fk-dashboard-pill-stat strong {
  font-size: 0.95rem;
  line-height: 1.1;
}

/* Compact Premium entry point: the FishKiller logo mark stacked above "Premium", nothing else
   visible -- "Unlimited Coach and no ads" lives only in the title/aria-label tooltip (set in
   index.html and kept current by app.js's renderDashboardPremiumButton). No pill: the logo mark
   and label sit directly on the panel background, no border/fill/shadow of their own -- a soft
   brightening on hover/focus is the only container-like feedback. No absolute positioning or
   negative offsets: it lays out as a normal grid item in .fk-dashboard-profile-pill's reserved
   last column, fully inside the panel at every width this component supports. (An earlier crown-
   icon/pill style was dev-toggleable alongside this one; the owner settled on this logo style, so
   the toggle and the crown icon markup were both removed.) */
.fk-dashboard-premium-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  align-self: center;
  flex: none;
  max-width: 100%;
  padding: 0.15rem 0.3rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--gold-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, padding 140ms ease;
}@media (hover: hover) and (pointer: fine) {


.fk-dashboard-premium-button:hover {
  filter: brightness(1.08);
  box-shadow: none;
  background: rgba(240, 187, 89, 0.08);
  transform: translateY(-1px);
}
}

.fk-dashboard-premium-button:active {
  transform: translateY(0) scale(0.97);
}

.fk-dashboard-premium-button:focus-visible {
  outline: 2px solid var(--gold-strong);
  outline-offset: 2px;
}

.fk-dashboard-premium-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.fk-dashboard-premium-icon--logo {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(240, 187, 89, 0.35));
}

.fk-dashboard-premium-label {
  color: var(--gold-strong);
  font-family: Georgia, "Cambria", serif;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  /* Owner picked this over a small-caps treatment specifically because small-caps mixes cap
     height with a shrunk x-height for the lowercase letters -- plain uppercase keeps every
     letter the same height instead. No italic (owner's other note from the first round). */
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.fk-dashboard-premium-button--active {
  border-color: rgba(240, 187, 89, 0.28);
  background: linear-gradient(180deg, rgba(240, 187, 89, 0.1), rgba(240, 187, 89, 0.02));
}

/* Narrower desktop widths (above the 1180px breakpoint where .fk-dashboard-head/
   .fk-dashboard-profile-pill restructure entirely): first tighten the button's own padding, then
   collapse to icon-only with the tooltip/aria-label carrying "Premium: Unlimited Coach and no
   ads" -- the label text is what regression-tested overflow at 1280px, so it's what has to go
   first, never the icon. */
@media (max-width: 1480px) {
  .fk-dashboard-premium-button {
    gap: 0.32rem;
    padding: 0.36rem 0.6rem;
  }
}

@media (max-width: 1320px) {
  .fk-dashboard-premium-label {
    display: none;
  }

  .fk-dashboard-premium-button {
    padding: 0.36rem 0.5rem;
  }
}

.fk-dashboard-progress {
  position: relative;
  display: block;
  height: 0.28rem;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006)),
    rgba(0, 7, 13, 0.72);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(124, 238, 228, 0.055);
}

.fk-dashboard-pill-level > .fk-dashboard-progress {
  background:
    linear-gradient(180deg, rgba(173, 232, 239, 0.12), rgba(72, 145, 158, 0.08)),
    rgba(31, 83, 94, 0.32);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(124, 238, 228, 0.2);
}

.fk-dashboard-progress span {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 48%),
    linear-gradient(90deg, rgba(34, 200, 219, 0.96), rgba(113, 239, 229, 0.9));
  box-shadow:
    0 0 8px rgba(54, 215, 221, 0.22),
    0 0 14px rgba(124, 238, 228, 0.08);
}

.fk-dashboard-progress span::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent);
  opacity: 0.46;
}

.fk-dashboard-progress--wide {
  grid-column: 1 / -1;
  order: 3;
  width: min(31rem, 100%);
  height: 0.56rem;
  margin-top: 0.5rem;
  border: 1px solid rgba(124, 238, 228, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.008)),
    rgba(0, 5, 10, 0.94);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(0, 0, 0, 0.22),
    0 0 12px rgba(54, 215, 221, 0.08);
}

.fk-dashboard-progress--wide span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 46%),
    linear-gradient(90deg, rgba(20, 188, 216, 0.96), rgba(67, 226, 236, 0.98) 72%, rgba(136, 250, 240, 0.95));
  box-shadow:
    0 0 11px rgba(54, 215, 221, 0.36),
    0 0 20px rgba(124, 238, 228, 0.14);
}

.fk-dashboard-progress--wide span::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.58rem;
  height: 140%;
  pointer-events: none;
  border-radius: 999px;
  transform: translate(22%, -50%);
  background: radial-gradient(circle, rgba(190, 255, 249, 0.92), rgba(78, 228, 234, 0.34) 42%, transparent 72%);
  filter: blur(0.2px);
}

.fk-progress-meta {
  display: block;
  grid-column: 2;
  order: 4;
  min-width: max-content;
}

.fk-progress-subtext {
  display: block;
  grid-column: 1;
  order: 4;
  max-width: 15rem;
  margin-top: 0.42rem;
  overflow: hidden;
  color: rgba(223, 236, 241, 0.78);
  font-size: clamp(0.72rem, 0.76vw, 0.82rem);
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-progress-helper {
  display: block;
  max-width: 12rem;
  margin-top: 0.42rem;
  overflow: hidden;
  color: rgba(176, 205, 216, 0.64);
  font-size: clamp(0.68rem, 0.7vw, 0.76rem);
  font-weight: 680;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* Sized and shadowed to match .fk-mode-card's own visual language below it (same border-gold,
   same gradient stops, same inset-highlight-plus-directional-shadow box-shadow shape, no extra
   ambient glow ring of its own) rather than reading as a separate, heavier decoration bolted on
   above the mode grid. Compact on purpose -- this sits above two full-height mode cards, so its
   padding/margin stay tight enough that both cards are still visible without scrolling on a
   typical laptop viewport. */
/* Author-stylesheet `display` always wins over the UA stylesheet's `[hidden] { display: none }`
   regardless of selector specificity (author origin beats user-agent origin outright) -- the same
   trap `.fk-menu-nav-item[hidden]` was already fixed for elsewhere in this file. Parked hidden
   2026-08-07 pending a decision on where it resurfaces; the underlying daily-loop/spaced-review
   logic in app.js is untouched. */
.fk-todays-drill-hero[hidden] {
  display: none;
}

.fk-todays-drill-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(0.75rem, 1.3vw, 1.1rem);
  padding: clamp(0.85rem, 1.5vh, 1.1rem) clamp(1.2rem, 2vw, 1.8rem);
  border: 1px solid rgba(230, 173, 88, 0.62);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(230, 173, 88, 0.09), rgba(255, 255, 255, 0.016) 36%, rgba(0, 0, 0, 0.12)),
    linear-gradient(135deg, rgba(4, 26, 42, 0.86), rgba(0, 9, 17, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    var(--menu-shadow);
}

.fk-todays-drill-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.fk-todays-drill-hero-label {
  color: rgba(230, 173, 88, 0.92);
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.fk-todays-drill-hero-copy h3 {
  margin: 0;
  color: #f3f4f6;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}

.fk-todays-drill-hero-reason {
  margin: 0;
  color: rgba(243, 244, 246, 0.72);
  font-size: 0.85rem;
}

.fk-todays-drill-cta {
  flex-shrink: 0;
  min-width: 11rem;
  min-height: 2.6rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(230, 173, 88, 0.92);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(230, 173, 88, 0.92), rgba(200, 143, 60, 0.92));
  color: #0a1420;
  cursor: pointer;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}@media (hover: hover) and (pointer: fine) {
  .fk-todays-drill-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34);
}
}

.fk-todays-drill-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34);
}

.fk-dashboard-secondary-label {
  margin: 0 0 0.65rem;
  color: rgba(243, 244, 246, 0.5);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Daily Session: the first-eligible-open-of-the-day screen that temporarily replaces
   #dashboard-normal-content within the same .fk-dashboard-main content area -- see CLAUDE.md's
   Daily Session feature brief. No bordered hero card/panel, and no image with visible bounds:
   #daily-session-backdrop is a single absolutely-positioned layer that fills .fk-dashboard-main's
   full box (position:absolute + inset:0 resolves against the *padding* box of the nearest
   positioned ancestor, i.e. .fk-dashboard-main -- so this deliberately extends past that element's
   own padding to the true edges: behind the header, to the viewport's right/bottom edges, up to
   the sidebar boundary on the left) with the real FKDailyBack jellyfish photo, never CSS-generated
   art. The header and #daily-session-screen's own text both sit in normal flow above it (z-index
   1) -- there is no seam, because there is no separate bounded image box for one to appear at. */
.fk-daily-session-backdrop[hidden] {
  display: none;
}

.fk-daily-session-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 4, 9, 0.8) 0%, rgba(0, 6, 12, 0.5) 24%, rgba(0, 6, 12, 0.2) 42%, transparent 58%),
    var(--menu-daily-scene) 70% 60% / cover no-repeat;
}

.fk-dashboard-head {
  position: relative;
  z-index: 1;
}

.fk-daily-session-screen[hidden] {
  display: none;
}

.fk-daily-session-screen {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  min-height: clamp(28rem, 72vh, 40rem);
  padding-top: clamp(2.25rem, 5.5vh, 3.75rem);
}

.fk-daily-session-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 37.5rem;
  padding: 0 clamp(1.6rem, 3vw, 3rem) 0 clamp(2.8rem, 4.6vw, 4.4rem);
  text-align: left;
}

.fk-daily-session-eyebrow {
  margin: 0;
  color: rgba(230, 173, 88, 0.92);
  font-size: 0.96rem;
  font-weight: 780;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.fk-daily-session-title {
  margin: 1.2rem 0 0;
  color: #f5fbff;
  font-family: "Georgia", "Cambria", serif;
  font-size: clamp(2.6rem, 3.8vw, 3.6rem);
  font-weight: 420;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.fk-daily-session-subtitle {
  margin: 1.1rem 0 0;
  max-width: 26rem;
  color: rgba(243, 244, 246, 0.76);
  font-size: 1.02rem;
  line-height: 1.45;
}

/* No outer box: this is a premium specification strip integrated into the page, not a settings/
   form panel -- no surrounding border, background, or radius. Just three unequally-proportioned
   inline groups (icon + label/value) separated by hairline dividers, matching the concept's
   MODE (widest) / TABLE SIZE (narrowest) / FOCUS (medium) column weighting. */
.fk-daily-session-meta {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 36rem;
  margin: 1.85rem 0 0;
  padding: 0.5rem 0;
}

.fk-daily-session-meta-col {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0 1.35rem;
  border-left: 1px solid rgba(230, 173, 88, 0.16);
}

.fk-daily-session-meta-col--mode {
  flex: 4 1 auto;
  padding-left: 0;
  border-left: 0;
}

.fk-daily-session-meta-col--table {
  flex: 2.5 1 auto;
}

.fk-daily-session-meta-col--time {
  flex: 2.2 1 auto;
}

.fk-daily-session-meta-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  fill: none;
  stroke: rgba(230, 173, 88, 0.85);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The Mode/Time icons are reused verbatim (same path data, recolored via currentColor) from the
   existing Stats page metric icons (app.js's renderStatsMetricIcon "crown"/"clock") rather than
   invented -- those ship on a 32-unit viewBox at a heavier relative stroke, so the width is upped
   to keep visual stroke weight consistent with the Table Size icon's 24-unit/1.5 pairing. */
.fk-daily-session-meta-icon--32 {
  stroke-width: 2;
}

.fk-daily-session-meta-text {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.fk-daily-session-meta-label {
  display: block;
  color: rgba(230, 173, 88, 0.85);
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fk-daily-session-meta-value {
  display: block;
  color: rgba(243, 244, 246, 0.92);
  font-size: 0.95rem;
  font-weight: 620;
  line-height: 1.3;
}

.fk-daily-session-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  width: 100%;
  max-width: 36rem;
  margin-top: 2rem;
}

.fk-daily-session-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(100%, 23.4rem);
  min-height: 4.4rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid rgba(54, 215, 221, 0.66);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(54, 215, 221, 0.12), rgba(54, 215, 221, 0.03)),
    rgba(0, 10, 17, 0.72);
  color: rgba(145, 240, 240, 0.96);
  cursor: pointer;
  font-weight: 680;
  font-size: 1.18rem;
  letter-spacing: 0.015em;
  box-shadow:
    inset 0 1px 0 rgba(210, 255, 252, 0.14),
    0 0 24px rgba(54, 215, 221, 0.14),
    0 16px 34px rgba(0, 0, 0, 0.3);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.fk-daily-session-cta span {
  font-size: 1.2rem;
}@media (hover: hover) and (pointer: fine) {
  .fk-daily-session-cta:hover {
  transform: translateY(-1px);
  outline: none;
  border-color: rgba(83, 233, 240, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(210, 255, 252, 0.18),
    0 0 34px rgba(54, 215, 221, 0.24),
    0 18px 38px rgba(0, 0, 0, 0.36);
}
}

.fk-daily-session-cta:focus-visible {
  transform: translateY(-1px);
  outline: none;
  border-color: rgba(83, 233, 240, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(210, 255, 252, 0.18),
    0 0 34px rgba(54, 215, 221, 0.24),
    0 18px 38px rgba(0, 0, 0, 0.36);
}

/* Same button language as .fk-daily-session-cta (bordered pill, filled, moderate radius) so the
   two read as one family -- just scaled down and in the restrained gold accent instead of cyan,
   so it stays clearly secondary and never competes with Start Session for attention. */
.fk-daily-session-skip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(230, 173, 88, 0.8);
  cursor: pointer;
  font-weight: 620;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  transition: color 160ms ease;
}

.fk-daily-session-skip span {
  font-size: 0.9rem;
}@media (hover: hover) and (pointer: fine) {
  .fk-daily-session-skip:hover {
  color: rgba(240, 187, 89, 0.95);
}
}

.fk-daily-session-skip:focus-visible {
  color: rgba(240, 187, 89, 0.95);
}

/* [hidden] must win over the explicit `display: flex` below -- an author-stylesheet `display` rule
   otherwise beats the UA stylesheet's `[hidden] { display: none }` regardless of specificity, the
   same trap already documented/fixed elsewhere in this file (.fk-menu-nav-item[hidden],
   .fk-todays-drill-hero[hidden], .fk-daily-session-screen[hidden]). Without this, toggling
   elements.dashboardNormalContent.hidden = true (app.js's syncDashboardView) stops actually hiding
   it once Daily Session is active, leaving the normal dashboard visible behind/below it. */
#dashboard-normal-content[hidden] {
  display: none;
}

/* Fills .fk-dashboard-main's 1fr row top-to-bottom: .fk-mode-grid (flex: 1 1 auto, below) grows to
   take up whatever height is available, which is what pins .fk-dashboard-stats ("YOUR PROGRESS")
   to the bottom of the page instead of it sitting right under the cards with empty space beneath. */
#dashboard-normal-content {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.1vw, 1.15rem);
  min-height: 0;
}

.fk-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr;
  gap: clamp(1.05rem, 1.95vw, 1.8rem);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.fk-mode-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: stretch;
  min-height: clamp(30rem, 56.8vh, 34rem);
  padding: clamp(3.05rem, 5.85vh, 3.9rem) clamp(1.55rem, 2.45vw, 2.7rem) clamp(2rem, 3.25vh, 2.35rem);
  overflow: hidden;
  border: 1px solid var(--menu-border);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.014) 38%, rgba(0, 0, 0, 0.1)),
    radial-gradient(circle at 77% 43%, rgba(54, 215, 221, 0.13), transparent 15rem),
    linear-gradient(135deg, rgba(3, 25, 41, 0.82), rgba(0, 9, 17, 0.78)),
    var(--menu-navy-glass);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    var(--menu-shadow);
  isolation: isolate;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.menu-art-layer {
  display: block;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
}

.fk-mode-card::before {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.fk-mode-card::after {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.fk-mode-card--primary {
  color: rgba(230, 173, 88, 0.92);
  border-color: rgba(230, 173, 88, 0.62);
  background:
    linear-gradient(180deg, rgba(230, 173, 88, 0.09), rgba(255, 255, 255, 0.016) 36%, rgba(0, 0, 0, 0.12)),
    radial-gradient(circle at 78% 48%, rgba(54, 215, 221, 0.08), transparent 13rem),
    radial-gradient(circle at 72% 44%, rgba(230, 173, 88, 0.07), transparent 14rem),
    linear-gradient(135deg, rgba(4, 26, 42, 0.84), rgba(0, 9, 17, 0.8)),
    var(--menu-navy-glass);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 198, 0.14),
    0 26px 70px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(230, 173, 88, 0.08);
}

.fk-mode-card--primary::before {
  content: "";
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border-radius: inherit;
  background: var(--menu-card-preflop-scene) 46% center / cover no-repeat;
  opacity: 0.7;
  filter: saturate(0.96) contrast(0.98);
}

.fk-mode-card--primary::after {
  content: "";
  inset: 0;
  z-index: 2;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(0, 4, 9, 0.9) 0%, rgba(0, 7, 13, 0.74) 32%, rgba(0, 8, 15, 0.32) 57%, rgba(0, 8, 15, 0.08) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.035), transparent 38%, rgba(0, 0, 0, 0.2));
  box-shadow: none;
  opacity: 1;
}

.fk-mode-card--secondary {
  color: rgba(54, 215, 221, 0.92);
  border-color: rgba(54, 215, 221, 0.4);
  background:
    linear-gradient(180deg, rgba(54, 215, 221, 0.06), rgba(255, 255, 255, 0.012) 38%, rgba(0, 0, 0, 0.12)),
    radial-gradient(circle at 77% 43%, rgba(54, 215, 221, 0.1), transparent 15rem),
    linear-gradient(135deg, rgba(3, 25, 41, 0.82), rgba(0, 9, 17, 0.78)),
    var(--menu-navy-glass);
  box-shadow:
    inset 0 1px 0 rgba(210, 255, 252, 0.1),
    0 26px 70px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(54, 215, 221, 0.07);
}

.fk-mode-card--secondary::before {
  content: "";
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border-radius: inherit;
  background: var(--menu-card-headsup-scene) 48% center / cover no-repeat;
  opacity: 0.9;
  filter: saturate(1.02) contrast(1.02);
}

.fk-mode-card--secondary::after {
  content: "";
  inset: 0;
  z-index: 2;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(0, 4, 9, 0.9) 0%, rgba(0, 7, 13, 0.74) 32%, rgba(0, 9, 16, 0.35) 57%, rgba(0, 9, 16, 0.1) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.035), transparent 38%, rgba(0, 0, 0, 0.21));
  box-shadow: none;
  opacity: 1;
}

.fk-mode-label {
  position: relative;
  z-index: 5;
  color: currentColor;
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.fk-mode-card h3 {
  position: relative;
  z-index: 5;
  display: block;
  max-width: 31rem;
  min-height: clamp(5.45rem, 6.8vw, 6.85rem);
  margin: 1.38rem 0 0.88rem;
  color: #f5fbff;
  font-family: "Georgia", "Cambria", serif;
  font-size: clamp(2.18rem, 2.82vw, 3.12rem);
  font-weight: 420;
  letter-spacing: 0.075em;
  line-height: 1.08;
  text-transform: uppercase;
}

.fk-mode-meta {
  position: relative;
  z-index: 5;
  max-width: 24rem;
  margin: 0;
  color: rgba(176, 214, 228, 0.84);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.fk-mode-card--primary h3 {
  margin-bottom: 0.42rem;
}

.fk-mode-card--primary {
  grid-template-rows: auto auto 1fr;
}

.fk-mode-cta {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-width: min(100%, 20rem);
  min-height: 3.35rem;
  margin-top: auto;
  padding: 0.72rem 1.12rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  color: currentColor;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(0, 8, 14, 0.68);
  cursor: pointer;
  font-weight: 760;
  font-size: 0.9rem;
  letter-spacing: 0.025em;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 34px rgba(0, 0, 0, 0.24);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.fk-mode-cta span {
  margin-left: 0.95rem;
  font-size: 1.24rem;
}

.fk-preflop-control-strip {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(14rem, 20rem);
  align-items: start;
  min-height: 0;
  gap: 0.72rem;
  width: min(100%, 20rem);
  margin-top: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.fk-preflop-footer-options {
  align-self: start;
  justify-self: start;
  display: grid;
  gap: 0.48rem;
  min-width: 0;
  width: 100%;
  height: auto;
}

.fk-preflop-control-row {
  display: grid;
  grid-template-columns: minmax(4.35rem, auto) minmax(0, 1fr);
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
}

.fk-preflop-control-label {
  color: rgba(255, 235, 190, 0.72);
  font-size: 0.6rem;
  font-weight: 780;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.fk-table-launch-group,
.fk-preflop-launch-group {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  min-width: 0;
  width: 100%;
  height: 1.72rem;
  min-height: 0;
  padding: 0.1rem;
  border: 1px solid rgba(112, 213, 221, 0.16);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006)),
    rgba(0, 9, 15, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

.fk-table-launch-button,
.fk-preflop-launch-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0.16rem 0.36rem;
  border: 0;
  border-left: 1px solid rgba(124, 202, 211, 0.12);
  border-radius: 4px;
  background: transparent;
  color: rgba(190, 217, 222, 0.76);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 770;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.fk-table-launch-button:first-child,
.fk-preflop-launch-button:first-child {
  border-left: 0;
}

.fk-preflop-launch-button strong {
  color: currentColor;
  font: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: nowrap;
}@media (hover: hover) and (pointer: fine) {
  .fk-table-launch-button:hover,
  .fk-preflop-launch-button:hover {
  border-color: rgba(105, 231, 235, 0.28);
  color: rgba(226, 246, 246, 0.96);
  outline: none;
  background: rgba(30, 89, 99, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
}

.fk-table-launch-button:focus-visible,
.fk-preflop-launch-button:focus-visible {
  border-color: rgba(105, 231, 235, 0.28);
  color: rgba(226, 246, 246, 0.96);
  outline: none;
  background: rgba(30, 89, 99, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.fk-table-launch-button.active,
.fk-table-launch-button[aria-pressed="true"],
.fk-preflop-launch-button.active,
.fk-preflop-launch-button[aria-pressed="true"] {
  border-color: rgba(230, 173, 88, 0.26);
  color: rgba(255, 235, 190, 0.94);
  background:
    linear-gradient(180deg, rgba(230, 173, 88, 0.12), rgba(230, 173, 88, 0.035)),
    rgba(61, 45, 24, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(230, 173, 88, 0.52),
    inset 0 1px 0 rgba(255, 235, 190, 0.1),
    0 0 14px rgba(230, 173, 88, 0.08);
}

.fk-preflop-enter-cta {
  justify-self: start;
  width: 100%;
  min-width: min(100%, 18rem);
  min-height: 3.35rem;
  margin-top: 0.1rem;
  padding: 0.72rem 1.12rem;
  color: rgba(231, 190, 118, 0.92);
  font-size: 0.9rem;
}

#dashboard-hu-cta {
  color: rgba(82, 233, 240, 0.9);
  background:
    linear-gradient(180deg, rgba(145, 255, 252, 0.055), rgba(145, 255, 252, 0.01)),
    rgba(0, 8, 14, 0.66);
}@media (hover: hover) and (pointer: fine) {
  .fk-mode-cta:hover {
  transform: translateY(-1px);
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 28px color-mix(in srgb, currentColor 18%, transparent),
    0 16px 34px rgba(0, 0, 0, 0.34);
}
}

.fk-mode-cta:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 28px color-mix(in srgb, currentColor 18%, transparent),
    0 16px 34px rgba(0, 0, 0, 0.34);
}

.fk-mode-cta:focus-visible {
  box-shadow:
    0 0 0 1px color-mix(in srgb, currentColor 64%, transparent),
    0 0 0 4px color-mix(in srgb, currentColor 18%, transparent),
    0 16px 34px rgba(0, 0, 0, 0.34);
}@media (hover: hover) and (pointer: fine) {
  #dashboard-hu-cta:hover {
  color: rgba(134, 249, 250, 0.96);
  background:
    linear-gradient(180deg, rgba(145, 255, 252, 0.1), rgba(145, 255, 252, 0.016)),
    rgba(0, 10, 18, 0.78);
}
}

#dashboard-hu-cta:focus-visible {
  color: rgba(134, 249, 250, 0.96);
  background:
    linear-gradient(180deg, rgba(145, 255, 252, 0.1), rgba(145, 255, 252, 0.016)),
    rgba(0, 10, 18, 0.78);
}

.fk-mode-card--secondary .fk-mode-cta {
  opacity: 0.86;
}@media (hover: hover) and (pointer: fine) {
  .fk-mode-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, currentColor 76%, rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 78px rgba(0, 0, 0, 0.46),
    0 0 40px color-mix(in srgb, currentColor 10%, transparent);
}
}

.fk-mode-card:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, currentColor 76%, rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 78px rgba(0, 0, 0, 0.46),
    0 0 40px color-mix(in srgb, currentColor 10%, transparent);
}

.fk-dashboard-stats {
  position: relative;
  display: grid;
  grid-template-columns: minmax(19rem, 2.65fr) minmax(10.5rem, 1.45fr) minmax(8rem, 1fr) minmax(10.5rem, 1.45fr);
  align-items: center;
  gap: 0;
  /* Stays its own natural size (never stretched) -- #dashboard-normal-content's flex column gives
     .fk-mode-grid all the growth (flex: 1 1 auto), which is what pins this to the bottom of the
     page rather than leaving empty space beneath it. */
  flex: none;
  min-height: clamp(6.55rem, 12.2vh, 7.85rem);
  padding: clamp(0.62rem, 0.98vh, 0.82rem) 0.9rem;
  overflow: hidden;
  /* Work order 6 item 1: the card-style border/background wrapper was tightened in work order 3
     rather than removed (the owner's answer at the time), then flagged again in the same shape --
     this session's owner decision reverses that and drops the wrapper entirely so the row's own
     content (icon, label, value) sits directly on the page, matching how every other dashboard
     stat row already reads. Tappability on .fk-progress-summary is unaffected: it keeps its own
     cursor:pointer and :focus-visible outline below, and its icon+label+value shape already
     reads as an interactive row without a card frame, the same visual language the rest of the
     dashboard uses. */
  border: 0;
  border-radius: 13px;
  background: none;
  box-shadow: none;
}

.fk-progress-summary,
.fk-stat-block {
  position: relative;
  min-height: 4.65rem;
  padding: 0.2rem 1rem;
}

.fk-progress-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.88rem;
  padding-left: 0.68rem;
  padding-right: 1.2rem;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.fk-progress-summary:focus-visible {
  outline: 2px solid rgba(124, 238, 228, 0.9);
  outline-offset: 2px;
  border-radius: 10px;
}

.fk-progress-summary > .fk-stat-icon {
  display: none;
}

.fk-progress-medallion {
  display: grid;
  place-items: center;
  width: clamp(3.12rem, 3.45vw, 3.62rem);
  height: clamp(3.12rem, 3.45vw, 3.62rem);
  filter:
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 12px rgba(240, 187, 89, 0.12));
}

.fk-progress-medallion img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fk-progress-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.88rem;
  min-width: 0;
}

.fk-progress-copy .fk-stat-label {
  grid-column: 1 / -1;
  order: 1;
}

.fk-stat-icon {
  display: grid;
  place-items: center;
  width: 3.65rem;
  height: 3.65rem;
  border: 1px solid rgba(230, 173, 88, 0.42);
  border-radius: 999px;
  color: rgba(230, 173, 88, 0.84);
  font-size: 1.38rem;
  background:
    radial-gradient(circle at 50% 45%, rgba(54, 215, 221, 0.09), transparent 58%),
    rgba(0, 8, 14, 0.54);
}

.fk-stat-label,
.fk-stat-block > span,
.fk-stat-block > div > span {
  display: block;
  color: rgba(154, 184, 198, 0.62);
  font-size: 0.6rem;
  font-weight: 720;
  letter-spacing: 0.115em;
  line-height: 1;
  text-transform: uppercase;
}

.fk-progress-summary strong,
.fk-stat-block strong {
  display: block;
  margin-top: 0.3rem;
  color: rgba(239, 247, 250, 0.94);
  font-size: clamp(1.28rem, 1.5vw, 1.58rem);
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0;
}

.fk-progress-summary strong {
  grid-column: 1 / -1;
  order: 2;
  margin-top: 0.34rem;
  color: rgba(245, 251, 253, 0.96);
  font-size: clamp(1.48rem, 1.88vw, 1.86rem);
  font-weight: 760;
  text-shadow:
    0 1px 8px rgba(0, 0, 0, 0.66),
    0 0 16px rgba(124, 238, 228, 0.08);
}

.fk-stat-block {
  display: grid;
  align-content: center;
  justify-items: start;
  border-left: 1px solid rgba(137, 216, 232, 0.075);
}

.fk-stat-block > div {
  min-width: 0;
}

.fk-stat-block--xp {
  grid-template-columns: max-content max-content;
  align-items: center;
  justify-content: start;
  column-gap: clamp(0.75rem, 0.9vw, 1.12rem);
}

.fk-xp-sparkline {
  display: block;
  width: min(7.35rem, 100%);
  height: 2.2rem;
  margin-top: 0;
  overflow: visible;
  justify-self: start;
}

.fk-xp-sparkline__glow,
.fk-xp-sparkline__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fk-xp-sparkline__area {
  fill: url("#dashboard-xp-sparkline-fill");
}

.fk-xp-sparkline__glow {
  stroke: rgba(54, 215, 221, 0.24);
  stroke-width: 4.9;
  filter: drop-shadow(0 0 5px rgba(54, 215, 221, 0.26));
}

.fk-xp-sparkline__line {
  stroke: rgba(91, 231, 238, 0.94);
  stroke-width: 2.15;
}

.fk-xp-sparkline__line--placeholder {
  opacity: 0.42;
}

.fk-xp-sparkline__dot {
  fill: rgba(124, 238, 228, 0.96);
  stroke: rgba(2, 10, 16, 0.92);
  stroke-width: 1.15;
  filter: drop-shadow(0 0 4px rgba(124, 238, 228, 0.45));
}

.fk-stat-rank strong {
  color: rgba(255, 226, 177, 0.94);
  font-size: clamp(1.1rem, 1.28vw, 1.36rem);
  font-weight: 720;
}

.fk-stat-rank {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  padding-left: 1.08rem;
}

.fk-stat-rank > div {
  align-self: center;
}

.fk-stat-rank .fk-rank-crest {
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 3.35vw, 3.5rem);
  height: clamp(3rem, 3.72vw, 3.86rem);
  filter:
    drop-shadow(0 10px 15px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 9px rgba(240, 187, 89, 0.15));
}

.fk-rank-crest svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fk-rank-crest__halo {
  fill: rgba(1, 9, 16, 0.92);
  stroke: rgba(240, 187, 89, 0.24);
  stroke-width: 2.2;
}

.fk-rank-crest__shield {
  fill: rgba(3, 20, 32, 0.98);
  stroke: rgba(124, 238, 228, 0.44);
  stroke-width: 2;
}

.fk-rank-crest__mark {
  fill: none;
  stroke: rgba(246, 207, 124, 0.9);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
}

.fk-rank-crest__wake {
  fill: none;
  stroke: rgba(124, 238, 228, 0.5);
  stroke-linecap: round;
  stroke-width: 1.8;
}

.fk-rank-crest__gem {
  fill: #f6cf7c;
  filter: drop-shadow(0 0 5px rgba(240, 187, 89, 0.45));
}

.fk-stat-elo {
  align-content: center;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.legacy-home-hooks {
  display: none;
}

.profile-screen-trigger {
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}@media (hover: hover) and (pointer: fine) {


.fk-menu-profile.profile-screen-trigger:hover,
.fk-dashboard-profile-pill.profile-screen-trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 238, 228, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 38px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(240, 187, 89, 0.08);
}
}

.profile-screen-trigger:focus-visible {
  outline: none;
  border-color: rgba(124, 238, 228, 0.48);
  box-shadow:
    inset 0 0 0 1px rgba(124, 238, 228, 0.18),
    0 0 0 3px rgba(54, 215, 221, 0.16),
    0 0 0 5px rgba(240, 187, 89, 0.09);
}

.fk-profile-screen,
.fk-stats-screen,
.fk-settings-screen,
.quest-v2-screen,
.fk-review-mistakes-screen {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  min-height: 100dvh;
  padding: clamp(1rem, 1.45vw, 1.65rem);
  overflow-x: hidden;
  overflow-y: hidden;
}

.fk-profile-screen[hidden],
.fk-stats-screen[hidden],
.fk-settings-screen[hidden],
.quest-v2-screen[hidden],
.fk-review-mistakes-screen[hidden] {
  display: none;
}

.fk-profile-screen {
  overflow-y: auto;
}

.quest-v2-screen {
  --quest-v2-gold: #dcb15e;
  --quest-v2-gold-strong: #edc878;
  --quest-v2-gold-muted: #bda064;
  --quest-v2-teal: #51c2be;
  --quest-v2-teal-deep: #287f81;
  --quest-v2-title: #f3ecde;
  --quest-v2-secondary: #afbec0;
  --quest-v2-muted: #84979a;
  --quest-v2-locked: #a5b1b0;
  --quest-v2-summary-value: #f6f2e9;
  --quest-v2-summary-label: #b6c3c4;
  --quest-v2-display-serif: "Iowan Old Style", Baskerville, Georgia, serif;
  height: 100dvh;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  padding: clamp(10px, 1.7vh, 18px) 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  background: radial-gradient(circle at 49% -12%, rgba(24, 91, 112, .08), transparent 38%), linear-gradient(180deg, rgba(1, 10, 17, .32), rgba(0, 6, 11, .52));
}
.quest-v2-icon { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.quest-v2-asset { fill: none; stroke: none; }
.quest-v2-raster { display: block; width: 100%; height: 100%; object-fit: contain; }
.quest-v2-header { display: grid; grid-template-columns: minmax(360px, .74fr) minmax(0, 1.26fr); align-items: center; gap: 28px; min-height: 92px; padding: 0 0 8px; }
.quest-v2-title { display: flex; align-items: center; gap: 15px; min-width: 0; }
.quest-v2-title-badge { display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 64px; color: var(--quest-v2-gold); }
.quest-v2-title-badge .quest-v2-icon { width: 49px; height: 49px; stroke-width: 1.7; }
.quest-v2-title-badge .quest-v2-header-compass { width: 64px; height: 64px; }
.quest-v2-title h2 { margin: 0; color: var(--quest-v2-gold-strong); font-family: var(--quest-v2-display-serif); font-size: clamp(2.1rem, 2.85vw, 3rem); font-weight: 500; letter-spacing: .025em; line-height: .92; text-shadow: 0 2px 14px rgba(179, 126, 47, .1); text-transform: uppercase; }
.quest-v2-title p { margin: 7px 0 0; color: var(--quest-v2-secondary); font-size: .8rem; line-height: 1.2; }
.quest-v2-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 78px; overflow: hidden; border: 1px solid rgba(151, 169, 166, .34); border-radius: 13px; background: linear-gradient(180deg, #06151e, #010910); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 30px rgba(0, 0, 0, .24); }
.quest-v2-summary-cell { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-content: center; align-items: center; column-gap: 11px; row-gap: 3px; min-width: 0; height: 78px; padding: 9px 15px; border-left: 1px solid rgba(151, 169, 166, .22); }
.quest-v2-summary-cell:first-child { border-left: 0; }
.quest-v2-summary-cell > span { grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--quest-v2-teal); }
.quest-v2-summary-cell:first-child > span, .quest-v2-summary-cell:last-child > span { color: var(--quest-v2-gold); }
.quest-v2-summary-xp-icon { fill: currentColor; stroke: currentColor; stroke-width: 0.8; }
.quest-v2-summary-cell:first-child > span { display: grid; place-items: center; width: 28px; height: 30px; margin-left: 0; }
.quest-v2-summary-cell .quest-v2-flame { width: 28px; height: 30px; max-height: 30px; filter: drop-shadow(0 2px 3px rgba(224, 151, 50, .18)); }
.quest-v2-summary-cell strong { overflow: hidden; color: var(--quest-v2-summary-value); font-size: clamp(1.08rem, 1.3vw, 1.18rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .005em; line-height: 1.02; text-overflow: ellipsis; text-shadow: 0 1px 7px rgba(0, 0, 0, .28); white-space: nowrap; }
.quest-v2-summary-cell:last-child strong { color: #e8c678; }
.quest-v2-summary-cell small { color: var(--quest-v2-summary-label); font-size: .62rem; font-weight: 600; letter-spacing: .045em; line-height: 1.12; text-transform: uppercase; white-space: nowrap; }
.quest-v2-back { display: none; }
.quest-v2-layout { display: grid; grid-template-rows: repeat(3, max-content); align-content: start; gap: clamp(7px, 1.15vh, 12px); height: auto; min-height: 0; padding: 0; }
.quest-v2-error { padding: 10px 14px; border: 1px solid rgba(77, 224, 220, .28); border-radius: 9px; background: #061b25; color: #d1e4e5; }
.quest-v2-error button { margin-left: 8px; color: #78efeb; text-decoration: underline; }
.quest-v2-error button:focus-visible, .quest-v2-tabs button:focus-visible, .quest-v2-track:focus-visible, .quest-v2-back:focus-visible { outline: 2px solid var(--quest-v2-teal); outline-offset: 3px; }
.quest-v2-section { position: relative; isolation: isolate; min-width: 0; padding: 16px; overflow: hidden; border: 1px solid rgba(193, 148, 76, .25); border-radius: 13px; background: #020b12; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018), 0 8px 22px rgba(0, 0, 0, .12); }
.quest-v2-section--daily { min-height: max-content; }
.quest-v2-section::before { position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(circle at 52% 0, rgba(22, 74, 84, .045), transparent 44%), linear-gradient(145deg, #04141d, #01080e); content: ""; pointer-events: none; }
.quest-v2-section > * { position: relative; z-index: 1; }
.quest-v2-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; margin: 0 0 9px; }
.quest-v2-section-head > div, .quest-v2-career-head > div:first-child { display: flex; align-items: center; gap: 9px; min-width: 0; }
.quest-v2-section-mark { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; color: var(--quest-v2-gold); }
.quest-v2-section-head h3, .quest-v2-career-head h3 { margin: 0; color: var(--quest-v2-gold); font-family: var(--quest-v2-display-serif); font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 600; letter-spacing: .025em; line-height: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, .3); text-transform: uppercase; white-space: nowrap; }
.quest-v2-section-head strong, .quest-v2-career-head > strong { color: #dfe8e6; font-size: .7rem; font-weight: 600; text-align: right; white-space: nowrap; }
.quest-v2-section-head time { color: var(--quest-v2-secondary); font-size: .68rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quest-v2-card-grid { display: grid; gap: 13px; }
.quest-v2-card-grid--daily { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quest-v2-card-grid--weekly { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quest-v2-empty { grid-column: 1 / -1; margin: 0; padding: 16px; color: #aebfc0; text-align: center; }
.quest-v2-card { position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 168px; padding: 15px 17px; overflow: hidden; border: 1px solid rgba(190, 148, 82, .22); border-radius: 10px; background: #061620; transition: border-color 160ms ease, box-shadow 160ms ease; }
.quest-v2-card::before { position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 12% 10%, rgba(38, 103, 111, .075), transparent 34%), linear-gradient(145deg, #071c27, #021019); content: ""; pointer-events: none; }
.quest-v2-card > * { position: relative; z-index: 1; }@media (hover: hover) and (pointer: fine) {

.quest-v2-card:hover { border-color: rgba(85, 191, 188, .42); box-shadow: inset 0 1px 0 rgba(92, 198, 194, .06), 0 8px 20px rgba(0, 0, 0, .17); }
}
.quest-v2-card--weekly { min-height: 158px; padding: 15px 20px; border-color: rgba(201, 159, 90, .2); }
.quest-v2-card--weekly::before { background: radial-gradient(circle at 20% 50%, rgba(35, 100, 107, .09), transparent 34%), linear-gradient(120deg, #071c25, #020e16 72%); }
.quest-v2-card--completed { border-color: rgba(224, 179, 91, .36); }@media (hover: hover) and (pointer: fine) {

.quest-v2-card--completed:hover { border-color: rgba(224, 179, 91, .58); }
}
.quest-v2-card--completed::before { background: radial-gradient(circle at 8% 20%, rgba(220, 166, 70, .1), transparent 34%), linear-gradient(145deg, #29271e, #06212a); }
.quest-v2-card--completed::after { position: absolute; z-index: 1; top: 47px; right: 15px; color: rgba(239, 189, 98, .1); content: "COMPLETE"; font-size: .54rem; font-weight: 800; letter-spacing: .16em; line-height: 1; pointer-events: none; transform: rotate(-5deg); }
.quest-v2-card-top { display: grid; grid-template-columns: 66px minmax(0, 1fr) max-content; align-items: start; gap: 14px; min-width: 0; }
.quest-v2-card--weekly .quest-v2-card-top { grid-template-columns: 78px minmax(0, 1fr) max-content; align-items: center; gap: 16px; }
.quest-v2-medallion { position: relative; display: grid; place-items: center; width: 62px; height: 64px; color: #50c8c4; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .3)); }
.quest-v2-medallion::before, .quest-v2-medallion::after { display: none; }
.quest-v2-medallion .quest-v2-icon { z-index: 1; width: 32px; height: 32px; stroke-width: 1.75; }
.quest-v2-medallion .quest-v2-asset { width: 100%; height: 100%; }
.quest-v2-medallion .quest-v2-raster { z-index: 1; }
.quest-v2-card--weekly .quest-v2-medallion { width: 72px; height: 74px; color: #55bbb8; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .34)); }
.quest-v2-card--weekly .quest-v2-medallion .quest-v2-icon { width: 38px; height: 38px; stroke-width: 1.65; }
.quest-v2-card--completed .quest-v2-medallion { color: var(--quest-v2-gold); }
.quest-v2-card-copy { min-width: 0; padding-top: 1px; }
.quest-v2-card-copy h4 { margin: 0; color: var(--quest-v2-title); font-family: var(--quest-v2-display-serif); font-size: 1.08rem; font-weight: 500; letter-spacing: .005em; line-height: 1.12; text-shadow: 0 1px 8px rgba(0, 0, 0, .28); }
.quest-v2-card--weekly .quest-v2-card-copy h4 { font-size: 1.12rem; }
.quest-v2-card-copy p { display: -webkit-box; margin: 7px 0 0; overflow: hidden; color: var(--quest-v2-secondary); font-size: .74rem; line-height: 1.32; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.quest-v2-card--weekly .quest-v2-card-copy p { max-width: 330px; }
.quest-v2-reward { color: var(--quest-v2-gold-muted); font-size: .69rem; font-weight: 700; white-space: nowrap; }
.quest-v2-card--weekly .quest-v2-reward { color: var(--quest-v2-gold-muted); font-size: .68rem; }
.quest-v2-card-footer { display: grid; align-self: end; gap: 6px; min-width: 0; padding-left: 80px; }
.quest-v2-card--weekly .quest-v2-card-footer { padding-left: 94px; }
.quest-v2-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--quest-v2-secondary); font-size: .65rem; font-variant-numeric: tabular-nums; }
.quest-v2-progress-meta b { color: #f2f5f2; font-size: .69rem; }
.quest-v2-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #010b11; box-shadow: inset 0 0 0 1px rgba(121, 150, 152, .25); }
.quest-v2-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--quest-v2-teal-deep), var(--quest-v2-teal)); }
.quest-v2-card--completed .quest-v2-progress > span, .quest-v2-node--completed .quest-v2-progress > span { background: linear-gradient(90deg, #bd8738, var(--quest-v2-gold)); }
.quest-v2-card--locked .quest-v2-progress > span, .quest-v2-node--locked .quest-v2-progress > span { background: #627477; }
.quest-v2-complete { position: absolute; top: 7px; left: 66px; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(239, 189, 98, .65); border-radius: 50%; color: #f0c875; background: #13242a; box-shadow: 0 0 0 2px #08212b; }
.quest-v2-complete .quest-v2-icon { width: 11px; height: 11px; stroke-width: 2; }
.quest-v2-watermark { display: none !important; }
.quest-v2-career { min-height: 234px; padding-block: 14px; border-color: rgba(201, 159, 90, .27); }
.quest-v2-career::before { background: radial-gradient(circle at 52% 48%, rgba(25, 88, 98, .07), transparent 44%), linear-gradient(145deg, #04151e, #010910); }
.quest-v2-career-head { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 15px; margin-bottom: 6px; }
.quest-v2-tabs { display: flex; justify-content: center; gap: clamp(12px, 2.1vw, 29px); min-width: 0; border-bottom: 1px solid rgba(137, 161, 163, .22); overflow: hidden; }
.quest-v2-tabs button { position: relative; padding: 4px 2px 7px; border: 0; color: var(--quest-v2-muted); background: transparent; font: inherit; font-size: .61rem; letter-spacing: .07em; line-height: 1; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.quest-v2-tabs button[aria-selected="true"] { color: var(--quest-v2-teal); }
.quest-v2-tabs button[aria-selected="true"]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--quest-v2-teal); content: ""; }
.quest-v2-track { display: flex; align-items: stretch; justify-content: safe center; width: 100%; min-width: 0; min-height: 168px; padding: 2px 2px 10px; overflow-x: auto; overflow-y: hidden; scrollbar-color: rgba(201, 159, 90, .42) transparent; scrollbar-width: thin; scroll-snap-type: x proximity; touch-action: pan-x; }
.quest-v2-track::-webkit-scrollbar { height: 4px; }
.quest-v2-track::-webkit-scrollbar-track { background: transparent; }
.quest-v2-track::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(201, 159, 90, .42); }@media (hover: hover) and (pointer: fine) {

.quest-v2-track::-webkit-scrollbar-thumb:hover { background: rgba(224, 180, 102, .58); }
}
.quest-v2-node { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; flex: 0 0 300px; min-width: 300px; max-width: 300px; gap: 6px 12px; min-height: 164px; padding: 9px 13px 23px 2px; scroll-snap-align: start; }
.quest-v2-node-badge { position: relative; z-index: 2; display: grid; place-items: center; width: 82px; height: 88px; color: #8f9fa0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .38)); }
.quest-v2-node-badge::before, .quest-v2-node-badge::after { display: none; }
.quest-v2-node-badge .quest-v2-icon { z-index: 1; width: 42px; height: 42px; stroke-width: 1.65; }
.quest-v2-node-badge .quest-v2-asset { width: 100%; height: 100%; }
.quest-v2-node-badge .quest-v2-raster { z-index: 1; }
.quest-v2-node-copy { min-width: 0; padding-top: 2px; }
.quest-v2-node-copy > span { color: var(--quest-v2-muted); font-size: .54rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.quest-v2-node-copy h4 { margin: 3px 0 0; overflow-wrap: break-word; color: var(--quest-v2-title); font-family: var(--quest-v2-display-serif); font-size: .88rem; font-weight: 500; letter-spacing: .005em; line-height: 1.18; text-wrap: balance; }
.quest-v2-node-copy p { display: -webkit-box; min-height: 2.56em; margin: 6px 0 0; overflow: hidden; overflow-wrap: break-word; color: var(--quest-v2-secondary); font-size: .65rem; line-height: 1.28; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.quest-v2-node-progress { grid-column: 2; display: grid; align-self: end; gap: 4px; min-width: 0; }
.quest-v2-node-progress b { color: #eef2ef; font-size: .64rem; font-variant-numeric: tabular-nums; }
.quest-v2-node-pin { position: absolute; z-index: 3; bottom: 3px; left: 35px; width: 14px; height: 14px; border: 2px solid #788a8d; border-radius: 50%; background: #071923; box-shadow: 0 0 0 3px #071923; }
.quest-v2-connector { position: absolute; z-index: 0; right: -30px; bottom: 10px; left: 42px; height: 2px; border-top: 2px solid rgba(117, 143, 145, .46); }
.quest-v2-node:last-child .quest-v2-connector { display: none; }
.quest-v2-node--completed .quest-v2-node-badge { color: #efbc60; filter: drop-shadow(0 0 5px rgba(222, 166, 74, .24)) drop-shadow(0 6px 8px rgba(0, 0, 0, .38)); }
.quest-v2-node--completed .quest-v2-node-badge .quest-v2-raster { filter: saturate(1.08) brightness(1.05); }
.quest-v2-node--completed .quest-v2-node-copy > span, .quest-v2-node--completed .quest-v2-node-copy h4 { color: var(--quest-v2-gold); }
.quest-v2-node--completed .quest-v2-node-pin { border-color: #f1be5e; background: #9f7428; box-shadow: 0 0 0 3px #071923, 0 0 8px rgba(239, 185, 87, .38); }
.quest-v2-node--completed .quest-v2-connector { border-color: rgba(225, 174, 78, .82); border-top-style: solid; }
.quest-v2-node--next .quest-v2-node-badge { filter: grayscale(1) saturate(0) brightness(.72) drop-shadow(0 5px 7px rgba(0, 0, 0, .34)); }
.quest-v2-node--next .quest-v2-node-copy > span, .quest-v2-node--next .quest-v2-node-copy h4 { color: #a4b0b1; }
.quest-v2-node--next .quest-v2-node-copy p, .quest-v2-node--next .quest-v2-node-progress b { color: #91a0a2; }
.quest-v2-node--next .quest-v2-progress > span { background: #718184; }
.quest-v2-node--next .quest-v2-connector, .quest-v2-node--mystery .quest-v2-connector { border-color: rgba(117, 132, 135, .4); border-top-style: dashed; }
.quest-v2-node--mystery .quest-v2-node-badge { color: #839496; filter: grayscale(.35) saturate(.42) brightness(.66) drop-shadow(0 5px 7px rgba(0, 0, 0, .34)); }
/* Work order 10 item 12: .quest-v2-node-lock/-locked-label are the mobile-only flat "?" row
   treatment (see the <=720px block below) -- hidden by default so the desktop horizontal rail
   (>=1181px, and the 721-1180px range in between) keeps its existing icon badge exactly as
   before, unchanged by this item. */
.quest-v2-node-lock, .quest-v2-node-locked-label { display: none; }
@media (min-width: 1181px) {
  .quest-v2-header { min-height: clamp(68px, 9.2vh, 92px); }
  .quest-v2-section { min-height: 0; padding: clamp(9px, 1.55vh, 16px); }
  .quest-v2-section-head { margin-bottom: clamp(5px, .9vh, 9px); }
  .quest-v2-card { min-height: clamp(116px, 18vh, 168px); padding-block: clamp(9px, 1.5vh, 15px); }
  .quest-v2-card--weekly { min-height: clamp(108px, 17vh, 158px); }
  .quest-v2-career { min-height: 0; padding-block: clamp(8px, 1.4vh, 14px); }
  .quest-v2-track { min-height: clamp(118px, 18vh, 168px); }
  .quest-v2-node { min-height: clamp(114px, 17.6vh, 164px); padding-bottom: clamp(17px, 2.5vh, 23px); }
}
@media (min-width: 1181px) and (min-height: 930px) {
  .quest-v2-header { min-height: 120px; }
  .quest-v2-card { min-height: 182px; }
  .quest-v2-card--weekly { min-height: 180px; }
  .quest-v2-career { min-height: 260px; }
  .quest-v2-track { min-height: 194px; }
  .quest-v2-node { min-height: 190px; }
}
@media (max-width: 1180px) {
  .quest-v2-screen { height: auto; min-height: 100dvh; }
  .quest-v2-header { grid-template-columns: 1fr; min-height: 0; gap: 12px; }
  .quest-v2-summary { max-width: 760px; }
  .quest-v2-card-grid--daily { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quest-v2-card-grid--daily > .quest-v2-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .quest-v2-career-head { grid-template-columns: minmax(0, 1fr) max-content; }
  .quest-v2-tabs { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; touch-action: pan-x; }
}
@media (max-width: 860px) {
  .quest-v2-card-grid--daily, .quest-v2-card-grid--weekly { grid-template-columns: 1fr; }
  .quest-v2-card-grid--daily > .quest-v2-card:last-child:nth-child(odd) { grid-column: auto; }
  .quest-v2-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quest-v2-summary-cell:nth-child(3) { border-left: 0; border-top: 1px solid rgba(139, 166, 168, .18); }
  .quest-v2-summary-cell:nth-child(4) { border-top: 1px solid rgba(139, 166, 168, .18); }
}
@media (max-width: 720px) {
  .quest-v2-screen { grid-column: 1; padding: 20px 16px 36px; }
  .quest-v2-header { display: flex; flex-direction: column; gap: 20px; padding-top: 12px; margin-bottom: 22px; }
  .quest-v2-title { display: flex; align-items: center; gap: 16px; }
  .quest-v2-title h2 { font-size: 2.1rem; line-height: 1.05; margin: 0; }
  .quest-v2-title p { font-size: .84rem; line-height: 1.3; margin-top: 4px; color: var(--quest-v2-secondary); }
  .quest-v2-title-badge { width: 54px; height: 54px; flex: 0 0 54px; }
  .quest-v2-title-badge .quest-v2-header-compass,
  .quest-v2-title-badge .quest-v2-icon { width: 54px; height: 54px; }
  .quest-v2-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  }
  .quest-v2-summary-cell {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
    height: auto;
    padding: 14px 16px;
    text-align: left;
    border-left: 1px solid rgba(151, 169, 166, .2);
  }
  .quest-v2-summary-cell:nth-child(odd) {
    border-left: 0;
  }
  .quest-v2-summary-cell:nth-child(3),
  .quest-v2-summary-cell:nth-child(4) {
    border-top: 1px solid rgba(151, 169, 166, .2);
  }
  .quest-v2-summary-cell > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
  }
  .quest-v2-summary-cell strong {
    font-size: 1.02rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .quest-v2-summary-cell small {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .quest-v2-back {
    display: none !important;
  }
  .quest-v2-layout { gap: 22px; }
  .quest-v2-section { border-radius: 14px; padding: 20px 16px; margin-bottom: 18px; }
  .quest-v2-section-head { align-items: center; margin-bottom: 16px; }
  .quest-v2-section-head > div { flex-wrap: wrap; }
  .quest-v2-section-head time { flex-basis: 100%; margin-left: 34px; }
  .quest-v2-section-head strong { font-size: .72rem; }
  .quest-v2-card { min-height: 0; padding: 16px; border-radius: 12px; }
  .quest-v2-card-top { grid-template-columns: 48px minmax(0, 1fr) max-content; gap: 9px; }
  .quest-v2-medallion { width: 46px; height: 50px; }
  .quest-v2-card--weekly .quest-v2-card-top { grid-template-columns: 48px minmax(0, 1fr) max-content; gap: 9px; }
  .quest-v2-card--weekly .quest-v2-medallion { width: 46px; height: 50px; }
  .quest-v2-card--weekly .quest-v2-medallion .quest-v2-icon { width: 25px; height: 25px; }
  .quest-v2-card-footer, .quest-v2-card--weekly .quest-v2-card-footer { padding-left: 57px; }
  .quest-v2-complete, .quest-v2-card--weekly .quest-v2-complete { left: 50px; }
  .quest-v2-career-head { align-items: center; }
  .quest-v2-tabs { margin-left: 0; }
  .quest-v2-node-badge { width: 68px; height: 74px; }

  /* Career Milestones mobile fixes -- reproduced live at ~390px, Quests page, Volume tab. Work
     order 9 part B2 restacked the horizontal desktop rail into a vertical column but never
     re-tuned the node internals for that direction, so the stack inherited geometry that only
     made sense in a 260-300px-wide horizontal card:
       1) `.quest-v2-node` kept the desktop `min-height:164px` / `grid-template-rows: 1fr auto`
          pair, so a short "next" card left a large dead gap between its copy and the progress
          bar -- there was no flexible-height row left to absorb, but the 1fr row still claimed
          it.
       2/3) `.quest-v2-node-pin` is a rail marker for the horizontal desktop track; with
          `.quest-v2-connector` already hidden below (nothing left for a pin to connect to), it
          read as a stray floating dot under every badge, and its fixed offset overlapped the
          compact mystery badge's own bottom-right corner.
       5) The grid still used the 88px desktop column width against a 68px mobile badge (44px for
          mystery), leaving a stray gutter and a different left edge per row type.
     Fixed together below: the column now matches the real mobile badge (issue 5), both node rows
     size to their own content instead of reserving a flexible first row (issue 1), and the pin is
     hidden the same way the connector already is just below -- every node's own state colouring
     (gold border/badge for completed, muted for next/mystery) already carries the sequence
     without a rail, so losing the pin costs nothing a player would notice (issues 2 and 3). Issue
     4 (bare mystery hexagons) is handled separately, in `.quest-v2-node--mystery` below, where a
     compact block already exists for it. */
  .quest-v2-node {
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 0;
    padding: 9px 13px 9px 2px;
  }

  .quest-v2-node-pin {
    display: none;
  }

  /* Work order 9 part B2: Career Milestones was a fixed-width (260px on this breakpoint, 300px
     above it) horizontal-scrolling rail -- a desktop pattern that reads badly on a phone, where a
     sideways scroller living inside a vertically-scrolling page is easy to miss and easy to
     trigger by accident. Stacked into a single vertical column instead: drop the scroll axis,
     scroll-snap, and the fixed/min/max-width lock so each node fills the column. Desktop's own
     horizontal track (min-width: 1181px and up) is untouched -- these overrides live inside this
     file's existing <=720px block, superseding (not replacing) the flex-start/260px rules just
     above, which still apply above 720px down to wherever the 1181px desktop block hands off. */
  .quest-v2-track {
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    /* The track was a horizontal scroller when `touch-action: pan-x` was added (UI polish work
       order 2's iOS platform pass); left in place on this now-vertical container it would swallow
       vertical page-scroll gestures that start on a milestone card -- worse than the bug being
       fixed here, and one that only shows up on a real touch device, not a desktop browser with a
       mouse. `pan-y` matches the column's real scroll axis (the page itself, not this element). */
    touch-action: pan-y;
  }

  .quest-v2-node, .quest-v2-track[data-node-count] .quest-v2-node {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  /* Measured before shipping the stack above, not assumed: the "study" category (7 milestones,
     this catalogue's largest -- server/quest-catalog.mjs) took the Quests page from 844px of
     content to a 2434px scroll, mostly empty "?" placeholder rows -- createCareerMilestoneMarkup's
     mystery-state markup renders only a badge/pin/connector with no copy or progress bar, yet was
     still claiming the full 164px min-height every other node uses for two lines of description
     plus a progress bar. Work order 3 already shortened this page once on the owner's own
     instruction (item 12); silently tripling it back here would undo that. Since a mystery node
     has nothing to show but "there's more ahead," collapsing it to a compact badge-only row (no
     min-height floor, a smaller badge/icon) cuts roughly 90px per hidden milestone without
     touching the one real (next/completed) card in each run, which keeps its full layout. Re-
     measured after (documentElement.scrollHeight, same 7-node "study" tab): 2434px -> 1810px --
     smaller than before this fix, but still noticeably longer than the pre-stack page (Career
     Milestones used to take a fixed ~250px regardless of node count); disclosed as a real,
     accepted tradeoff of the stacking direction itself rather than fully closed.

     Follow-up (same page-length constraint, a later fix pass on the node internals themselves):
     the real "next" card's own dead space -- the `min-height`/`1fr`-row combination just above
     this comment, on `.quest-v2-node` -- was the other big contributor to this same "study" tab's
     height, independent of the mystery-row work above. Re-measured on a fresh account
     (documentElement.scrollHeight, same 7-node "study" tab, same viewport): 1818px before that
     fix -> 1755px after -- comfortably under the 1810px figure this comment's own fix already
     established as the ceiling not to regress past.

     Second follow-up (work order 10 item 12): replaced the mystery row's own badge-icon-plus-
     surfaced-aria-label treatment (just below) with a flat tinted row and real "Locked -- reach
     X" copy per that item's specific design -- see .quest-v2-node--mystery and
     .quest-v2-node-lock/-locked-label below. Re-measured a third time on the same synthetic
     7-node "study" tab, same viewport: 1241px -- comfortably under the 1810px ceiling this
     comment already tracks, and well below the 1755px this file most recently established as
     current, since a flat row is considerably shorter than even a shrunk copy of the icon
     badge. */
  /* Work order 10 item 12: supersedes the previous mobile mystery-node treatment (a shrunk copy
     of the real icon badge, plus its aria-label surfaced via ::after) with the specific flat-row
     design this item asks for -- a full-width locked row on a faint tint, no border, a plain "?"
     glyph instead of the badge icon, and real copy (app.js's createCareerMilestoneMarkup: the row
     right after "next" names the milestone to reach; every later row just says "Locked", since
     it has no single prerequisite worth stating). The icon badge itself is hidden here rather
     than removed from the markup, since desktop's own horizontal rail still uses it unchanged
     (see the unscoped .quest-v2-node-lock/-locked-label { display:none } rule this overrides). */
  .quest-v2-node--mystery {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: 0;
    align-items: center;
    column-gap: 8px;
    /* 2px left, matching .quest-v2-node's own asymmetric 9px 13px 9px 2px base padding (above) --
       confirmed live, the "?" glyph now starts at the same x as a real card's own icon badge
       (both 2px in from the row's own left edge; an earlier 10px-all-around draft measured an 8px
       misalignment against the badge). */
    padding: 7px 10px 7px 2px;
    border-radius: 6px;
    background: rgba(143, 163, 165, .05);
  }

  .quest-v2-node--mystery + .quest-v2-node--mystery {
    margin-top: 6px;
  }

  .quest-v2-node--mystery .quest-v2-node-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
  }

  .quest-v2-node-lock {
    display: none !important;
  }

  .quest-v2-node-locked-label {
    display: block;
    color: #8fa3a5;
    font-size: .625rem;
    line-height: 1.3;
  }

  /* The connector is a short horizontal rule meant to visually link one horizontally-adjacent
     card to the next; positioned the same way in a vertical stack it would read as a stray mark
     jutting off a card's right edge rather than a connection to anything. Hidden rather than
     redrawn vertically -- purely decorative, and every node's own state colouring (gold border/
     badge for completed, muted for next/mystery) already carries the sequence without it. */
  .quest-v2-connector {
    display: none;
  }
}
.fk-dashboard-main[hidden] {
  display: none;
}

#practice-screen .fk-profile-topbar {
  display: none;
}

#practice-screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  overflow-y: auto;
}

#practice-screen[hidden] {
  display: none;
}

#practice-screen .fk-practice-layout {
  min-height: calc(100dvh - clamp(2rem, 2.9vw, 3.3rem));
  height: calc(100dvh - clamp(2rem, 2.9vw, 3.3rem));
  flex-shrink: 0;
}

.fk-practice-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.72vw, 0.82rem);
  min-width: 0;
  min-height: 0;
  width: min(100%, 86rem);
  align-self: stretch;
  color: #f5fbff;
}

.fk-practice-head {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr);
  align-items: start;
  gap: clamp(0.9rem, 1.8vw, 1.75rem);
  min-width: 0;
}

.fk-practice-head h2 {
  margin: 0;
  color: #f5fbff;
  font-family: "Georgia", "Cambria", serif;
  font-size: clamp(1.82rem, 2.45vw, 2.68rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.04;
}

.fk-practice-head p {
  max-width: 36rem;
  margin: 0.28rem 0 0;
  color: rgba(214, 232, 239, 0.82);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.4;
}

.fk-practice-mode-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(13rem, 1fr));
  gap: 0.82rem;
  align-items: stretch;
  min-width: 0;
}

.fk-practice-shortcut {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: end;
  gap: 0.42rem 0.8rem;
  min-width: 0;
  min-height: 4.9rem;
  padding: 0.72rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(54, 215, 221, 0.3);
  border-radius: 8px;
  color: rgba(54, 215, 221, 0.92);
  background:
    linear-gradient(90deg, rgba(1, 11, 20, 0.94) 0%, rgba(1, 16, 29, 0.8) 54%, rgba(1, 20, 32, 0.45) 100%),
    linear-gradient(135deg, rgba(3, 25, 41, 0.84), rgba(0, 9, 17, 0.82));
  box-shadow: inset 0 1px 0 rgba(210, 255, 252, 0.08);
  isolation: isolate;
}

.fk-practice-shortcut--preflop {
  color: var(--menu-gold-bright);
}

.fk-practice-shortcut::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--menu-card-headsup-scene) right center / auto 135% no-repeat;
  opacity: 0.5;
  filter: saturate(1.05) contrast(1.03);
  pointer-events: none;
}

.fk-practice-shortcut--preflop::before {
  background-image: var(--menu-card-preflop-scene);
}

.fk-practice-shortcut::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(0, 5, 11, 0.92) 0%, rgba(0, 8, 15, 0.8) 44%, rgba(0, 9, 16, 0.22) 100%);
  pointer-events: none;
}

.fk-practice-shortcut > * {
  position: relative;
  z-index: 5;
}

.fk-practice-shortcut p {
  grid-column: 1;
  margin: 0;
  color: rgba(221, 238, 245, 0.75);
  font-size: 0.86rem;
  line-height: 1.28;
}

.fk-practice-shortcut-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  color: currentColor;
  background: transparent;
  cursor: pointer;
  font-size: 1.55rem;
  line-height: 1;
  transition:
    transform 180ms ease,
    color 180ms ease,
    background 180ms ease;
}@media (hover: hover) and (pointer: fine) {
  .fk-practice-shortcut-button:hover {
  transform: translateX(2px);
  outline: none;
  background: rgba(255, 255, 255, 0.06);
}
}

.fk-practice-shortcut-button:focus-visible {
  transform: translateX(2px);
  outline: none;
  background: rgba(255, 255, 255, 0.06);
}

.fk-practice-tabs {
  display: flex;
  align-items: center;
  gap: clamp(1.3rem, 2vw, 2.2rem);
  min-width: 0;
  padding-bottom: 0.52rem;
  border-bottom: 1px solid rgba(137, 216, 232, 0.14);
}

.fk-practice-tabs button {
  position: relative;
  min-height: 2rem;
  padding: 0;
  border: 0;
  color: rgba(205, 226, 235, 0.62);
  background: transparent;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 780;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}@media (hover: hover) and (pointer: fine) {
  .fk-practice-tabs button:hover {
  color: rgba(245, 251, 255, 0.88);
  outline: none;
}
}

.fk-practice-tabs button:focus-visible {
  color: rgba(245, 251, 255, 0.88);
  outline: none;
}

.fk-practice-tabs button[aria-current="page"] {
  color: var(--menu-gold-bright);
}

.fk-practice-tabs button[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.72rem;
  height: 2px;
  border-radius: 999px;
  background: var(--menu-gold-bright);
  box-shadow: 0 0 18px rgba(255, 217, 138, 0.34);
}

.fk-practice-trainers-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.fk-practice-trainers-panel[hidden],
.fk-practice-hub[hidden],
.fk-practice-insight-grid[hidden],
.fk-practice-saved-panel[hidden] {
  display: none;
}

.fk-practice-saved-panel {
  display: grid;
  width: 100%;
  max-width: none;
  min-width: 0;
  align-self: stretch;
}

.fk-practice-saved-panel strong {
  color: #f7fbff;
  font-size: 1.28rem;
}

.fk-saved-sessions,
.fk-saved-sessions-content {
  display: grid;
  gap: clamp(0.82rem, 1.3vw, 1.15rem);
  min-width: 0;
  height: 100%;
}

.fk-saved-session-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  grid-auto-rows: minmax(clamp(10rem, 24vh, 18rem), 1fr);
  gap: clamp(0.82rem, 1.3vw, 1.15rem);
  min-width: 0;
}

.fk-saved-sessions-content[data-saved-count="1"] .fk-saved-session-list {
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(clamp(16rem, 45vh, 26rem), 1fr);
}

.fk-saved-sessions-content[data-saved-count="2"] .fk-saved-session-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(clamp(14rem, 38vh, 22rem), 1fr);
}

.fk-saved-session-shell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 100%;
  cursor: pointer;
}

.fk-saved-session-shell:focus-visible {
  outline: 2px solid rgba(230, 173, 88, 0.72);
  outline-offset: 3px;
}

.fk-saved-session-clone {
  width: 100%;
  height: 100%;
  min-height: clamp(10rem, 24vh, 18rem);
  pointer-events: none;
}

.fk-saved-sessions-content[data-saved-count="1"] .fk-saved-session-clone {
  min-height: clamp(16rem, 45vh, 26rem);
}

.fk-saved-sessions-content[data-saved-count="2"] .fk-saved-session-clone {
  min-height: clamp(14rem, 38vh, 22rem);
}

.fk-saved-session-clone.fk-mode-card {
  align-content: center;
  min-height: 100%;
}

.fk-saved-session-clone .fk-saved-trainer-detail {
  position: relative;
  z-index: 5;
  margin: 0.4rem 0 0;
  color: rgba(246, 207, 124, 0.78);
  font-size: clamp(0.78rem, 1vw, 0.94rem);
  font-weight: 780;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fk-saved-session-clone.fk-practice-selected-pack {
  min-height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  padding: clamp(3.05rem, 5.85vh, 3.9rem) clamp(1.55rem, 2.45vw, 2.7rem) clamp(2rem, 3.25vh, 2.35rem);
  background:
    linear-gradient(90deg, rgba(0, 4, 9, 0.9) 0%, rgba(0, 7, 13, 0.74) 34%, rgba(0, 8, 15, 0.36) 60%, rgba(0, 8, 15, 0.1) 100%),
    url("FKSpotBack.png") calc(100% + 6rem) 88% / auto 102% no-repeat,
    linear-gradient(135deg, rgba(4, 22, 35, 0.94), rgba(0, 8, 15, 0.96));
}

.fk-saved-session-clone.fk-practice-selected-pack .fk-practice-selected-copy {
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr);
  max-width: 31rem;
}

.fk-saved-session-clone.fk-practice-selected-pack .fk-practice-selected-copy h3 {
  min-height: clamp(5.45rem, 6.8vw, 6.85rem);
  margin: 1.38rem 0 0.42rem;
  font-size: clamp(2.18rem, 2.82vw, 3.12rem);
  letter-spacing: 0.075em;
  line-height: 1.08;
}

.fk-saved-session-clone.fk-practice-selected-pack .fk-saved-spot-eyebrow {
  color: rgba(230, 173, 88, 0.92);
}

.fk-saved-session-clone.fk-practice-selected-pack .fk-saved-spot-meta {
  margin: 0.4rem 0 0;
  color: rgba(246, 207, 124, 0.78);
  font-size: clamp(0.78rem, 1vw, 0.94rem);
  font-weight: 780;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.fk-saved-session-clone.fk-practice-selected-pack .fk-practice-selected-copy .fk-practice-pack-icon,
.fk-saved-session-clone.fk-practice-selected-pack .fk-practice-selected-meta,
.fk-saved-session-clone.fk-practice-selected-pack .fk-practice-focus {
  display: none;
}

.fk-saved-session-clone.fk-practice-selected-pack::before {
  background:
    radial-gradient(circle at 88% 36%, rgba(54, 215, 221, 0.08), transparent 16rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 38%, rgba(0, 0, 0, 0.22));
}

.fk-save-star--saved-panel {
  position: absolute;
  top: clamp(0.78rem, 1.25vw, 1.05rem);
  right: clamp(0.78rem, 1.25vw, 1.05rem);
  z-index: 5;
}

.fk-saved-empty {
  display: grid;
  gap: 0.82rem;
  align-content: start;
  max-width: min(44rem, 100%);
  padding: clamp(1.05rem, 1.8vw, 1.45rem);
  border: 1px solid rgba(137, 216, 232, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(6, 25, 36, 0.88), rgba(2, 10, 18, 0.92)),
    radial-gradient(circle at 86% 18%, rgba(230, 173, 88, 0.1), transparent 13rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.fk-saved-session-row {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(0.82rem, 1.4vw, 1.2rem);
  align-items: start;
  min-width: 0;
  min-height: 100%;
  padding: clamp(1.05rem, 1.7vw, 1.55rem);
  border: 1px solid rgba(230, 173, 88, 0.34);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, rgba(230, 173, 88, 0.16), transparent 12rem),
    linear-gradient(135deg, rgba(11, 34, 45, 0.92), rgba(3, 12, 19, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 48px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  isolation: isolate;
}

.fk-saved-session-row::before {
  content: "";
  position: absolute;
  inset: auto -2rem -3rem auto;
  width: clamp(8rem, 22vw, 17rem);
  height: clamp(8rem, 22vw, 17rem);
  border: 1px solid rgba(230, 173, 88, 0.28);
  border-radius: 999px;
  background:
    repeating-radial-gradient(circle, transparent 0 1.05rem, rgba(230, 173, 88, 0.2) 1.08rem 1.14rem),
    radial-gradient(circle, rgba(230, 173, 88, 0.24) 0 0.24rem, transparent 0.26rem);
  opacity: 0.52;
  pointer-events: none;
  z-index: -1;
}

.fk-saved-session-row--full-hand::before {
  border-radius: 8px;
  transform: rotate(-8deg);
}

.fk-saved-session-row--spot-drill {
  background:
    radial-gradient(circle at 82% 22%, rgba(54, 215, 221, 0.14), transparent 13rem),
    linear-gradient(135deg, rgba(3, 26, 36, 0.94), rgba(4, 11, 18, 0.97));
}@media (hover: hover) and (pointer: fine) {
  .fk-saved-session-row:hover {
  outline: none;
  border-color: rgba(230, 173, 88, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 58px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(230, 173, 88, 0.1);
}
}

.fk-saved-session-row:focus-visible {
  outline: none;
  border-color: rgba(230, 173, 88, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 58px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(230, 173, 88, 0.1);
}

.fk-saved-session-copy,
.fk-saved-manage-copy {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
}

.fk-saved-session-copy {
  gap: 0.46rem;
  padding-right: 2.4rem;
}

.fk-saved-session-copy span {
  color: rgba(246, 207, 124, 0.82);
  font-size: clamp(0.66rem, 0.9vw, 0.78rem);
  font-weight: 790;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fk-saved-manage-copy strong {
  overflow: hidden;
  color: #f7fbff;
  font-size: 1rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-saved-session-copy strong {
  max-width: min(32rem, 100%);
  color: #f7fbff;
  font-family: "Georgia", "Cambria", serif;
  font-size: clamp(2rem, 5vw, 4.1rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.96;
  text-transform: uppercase;
}

.fk-saved-manage-copy small {
  overflow: hidden;
  color: rgba(205, 226, 235, 0.62);
  font-size: 0.76rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-saved-session-copy small {
  max-width: min(26rem, 100%);
  color: rgba(205, 226, 235, 0.66);
  font-size: clamp(0.82rem, 1vw, 0.96rem);
  line-height: 1.34;
}

.fk-saved-session-actions {
  position: absolute;
  top: clamp(0.78rem, 1.25vw, 1.05rem);
  right: clamp(0.78rem, 1.25vw, 1.05rem);
  z-index: 3;
}

.fk-saved-launch-cue {
  align-self: end;
  justify-self: start;
  min-height: 2.34rem;
  padding: 0.58rem 0.86rem;
  border: 1px solid rgba(230, 173, 88, 0.5);
  border-radius: 6px;
  color: rgba(230, 173, 88, 0.9);
  background: rgba(230, 173, 88, 0.08);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.fk-saved-manage-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.72rem, 1.2vw, 0.95rem);
  width: 100%;
  min-height: clamp(4.2rem, 8vh, 5.15rem);
  padding: clamp(0.82rem, 1.35vw, 1.05rem);
  overflow: hidden;
  border: 1px solid rgba(137, 216, 232, 0.2);
  border-radius: 8px;
  color: rgba(235, 247, 250, 0.94);
  background:
    linear-gradient(90deg, rgba(8, 37, 48, 0.82), rgba(1, 13, 22, 0.88)),
    radial-gradient(circle at 90% 20%, rgba(137, 216, 232, 0.12), transparent 12rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 28px rgba(137, 216, 232, 0.035);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.fk-saved-manage-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(230, 173, 88, 0.12), transparent 22%);
  opacity: 0.72;
}@media (hover: hover) and (pointer: fine) {
  .fk-saved-manage-tile:hover {
  border-color: rgba(137, 216, 232, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 34px rgba(137, 216, 232, 0.06),
    0 12px 26px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}
}

.fk-saved-manage-tile:focus-visible {
  border-color: rgba(137, 216, 232, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 34px rgba(137, 216, 232, 0.06),
    0 12px 26px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

.fk-saved-manage-tile:focus-visible {
  outline: 2px solid rgba(230, 173, 88, 0.72);
  outline-offset: 3px;
}

.fk-saved-manage-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.16rem;
  height: 2.16rem;
  border: 1px solid rgba(230, 173, 88, 0.46);
  border-radius: 7px;
  color: rgba(246, 207, 124, 0.9);
  background: rgba(230, 173, 88, 0.08);
  font-size: 1.08rem;
  font-weight: 780;
  line-height: 1;
}

.fk-saved-manage-tile-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.24rem;
  min-width: 0;
}

.fk-saved-manage-tile-copy strong {
  overflow: hidden;
  color: rgba(246, 207, 124, 0.92);
  font-size: clamp(0.78rem, 0.92vw, 0.88rem);
  font-weight: 840;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.fk-saved-manage-tile-copy small {
  overflow: hidden;
  color: rgba(205, 226, 235, 0.68);
  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-practice-hub {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 1.35vw, 1.35rem);
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
}

.fk-practice-hub > .fk-practice-pack-column {
  flex: 1 1 24rem;
  min-width: 16rem;
  max-width: 24rem;
}

.fk-practice-hub > .fk-practice-selected-pack {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

.fk-practice-pack-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.58rem;
  min-width: 0;
  min-height: 0;
}

.fk-practice-section-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: rgba(205, 226, 235, 0.68);
  font-size: 0.78rem;
  font-weight: 780;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fk-practice-list-icon {
  width: 1.05rem;
  height: 0.82rem;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.7;
}

.fk-practice-list-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 0.28rem;
  background: currentColor;
}

.fk-practice-pack-list {
  display: grid;
  gap: 0.22rem;
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding: 0.12rem 0.45rem 0 0;
  scroll-padding-top: 0.12rem;
  scrollbar-color: rgba(157, 232, 241, 0.55) transparent;
}

.fk-practice-pack-card {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  height: 3.45rem;
  padding: 0.28rem 0.62rem;
  border: 1px solid rgba(137, 216, 232, 0.16);
  border-radius: 8px;
  color: rgba(216, 235, 242, 0.88);
  background: rgba(2, 17, 29, 0.68);
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.fk-practice-pack-card.active {
  border-color: rgba(255, 217, 138, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 217, 138, 0.08), rgba(255, 255, 255, 0.015)),
    rgba(2, 17, 29, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 22px rgba(230, 173, 88, 0.08);
}@media (hover: hover) and (pointer: fine) {
  .fk-practice-pack-card:hover {
  transform: translateY(-1px);
  outline: none;
  border-color: rgba(137, 216, 232, 0.38);
}
}

.fk-practice-pack-card:focus-visible {
  transform: translateY(-1px);
  outline: none;
  border-color: rgba(137, 216, 232, 0.38);
}

.fk-practice-pack-card.locked {
  opacity: 0.55;
  border-color: rgba(137, 216, 232, 0.08);
  box-shadow: none;
}

.fk-prereq-locked-warning {
  color: #ffb75d;
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}@media (hover: hover) and (pointer: fine) {
  .fk-practice-pack-card.locked:hover {
  transform: none;
  border-color: rgba(137, 216, 232, 0.08);
  box-shadow: none;
}
}

.fk-practice-pack-card.locked:focus-visible {
  transform: none;
  border-color: rgba(137, 216, 232, 0.08);
  box-shadow: none;
}@media (hover: hover) and (pointer: fine) {
  .fk-practice-pack-card.active:hover {
  border-color: rgba(255, 217, 138, 0.92);
}
}

.fk-practice-pack-card.active:focus-visible {
  border-color: rgba(255, 217, 138, 0.92);
}

.fk-practice-pack-card strong,
.fk-practice-pack-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-practice-pack-card strong {
  color: #f6fbff;
  font-size: 0.96rem;
  line-height: 1.18;
}

.fk-practice-pack-card small {
  margin-top: 0.12rem;
  color: rgba(205, 226, 235, 0.66);
  font-size: 0.78rem;
}

.fk-practice-recommended-badge {
  display: inline;
  color: rgba(238, 199, 122, 0.82);
  font: inherit;
}

.fk-practice-pack-card > span:last-child {
  color: rgba(205, 226, 235, 0.62);
  font-size: 1.8rem;
  line-height: 1;
  justify-self: end;
}

.fk-practice-pack-icon {
  --pack-accent: var(--menu-teal);
  --pack-rgb: 54, 215, 221;
  --pack-fill-opacity: 0.1;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(var(--pack-rgb), 0.72);
  border-radius: 999px;
  color: var(--pack-accent);
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.22), transparent 30%),
    radial-gradient(circle at center, rgba(var(--pack-rgb), 0.24), rgba(var(--pack-rgb), 0.08) 68%, rgba(var(--pack-rgb), 0.02));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 -0.35rem 0.9rem rgba(var(--pack-rgb), 0.08),
    0 0 0.85rem rgba(var(--pack-rgb), 0.18);
  isolation: isolate;
}

.fk-practice-pack-icon::before,
.fk-practice-pack-icon::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.fk-practice-pack-icon::before {
  inset: 0.22rem;
  border: 1px solid rgba(var(--pack-rgb), 0.24);
  box-shadow: inset 0 0 0.85rem rgba(var(--pack-rgb), 0.12);
}

.fk-practice-pack-icon::after {
  inset: -0.28rem;
  background: radial-gradient(circle, rgba(var(--pack-rgb), 0.2), transparent 66%);
  filter: blur(0.25rem);
  opacity: 0.72;
  z-index: -1;
}

.fk-practice-pack-card.active .fk-practice-pack-icon,
.fk-practice-pack-icon--target,
.fk-practice-pack-icon--pressure {
  --pack-accent: var(--menu-gold-bright);
  --pack-rgb: 230, 173, 88;
}

.fk-practice-pack-icon--turn {
  --pack-accent: #43d5d3;
  --pack-rgb: 67, 213, 211;
}

.fk-practice-pack-icon--aggressive {
  --pack-accent: #ff8d3c;
  --pack-rgb: 255, 141, 60;
}

.fk-practice-pack-icon--shield {
  --pack-accent: #67e2d7;
  --pack-rgb: 103, 226, 215;
}

.fk-practice-pack-icon svg {
  position: relative;
  z-index: 1;
  width: 1.38rem;
  height: 1.38rem;
  overflow: visible;
  filter:
    drop-shadow(0 0 0.22rem rgba(var(--pack-rgb), 0.48))
    drop-shadow(0 0 0.5rem rgba(var(--pack-rgb), 0.18));
}

.fk-practice-pack-icon path,
.fk-practice-pack-icon circle,
.fk-practice-pack-icon rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fk-practice-pack-icon circle,
.fk-practice-pack-icon rect {
  fill: rgba(var(--pack-rgb), var(--pack-fill-opacity));
}

.fk-practice-pack-icon .fk-practice-pack-icon-fill {
  fill: currentColor;
  stroke: none;
}

.fk-practice-pack-icon--flop svg {
  width: 1.48rem;
}

.fk-practice-pack-icon--flop rect {
  fill: rgba(var(--pack-rgb), 0.16);
}

.fk-practice-pack-icon--turn circle {
  fill: rgba(var(--pack-rgb), 0.2);
}

.fk-practice-pack-icon--river path {
  stroke-width: 2.15;
}

.fk-practice-pack-icon--shield path:first-child {
  fill: rgba(var(--pack-rgb), 0.13);
}

.fk-practice-pack-icon--pressure path,
.fk-practice-pack-icon--aggressive path {
  stroke-width: 2.8;
}

.fk-practice-pack-icon--large {
  width: clamp(4.7rem, 5.7vw, 5.8rem);
  height: clamp(4.7rem, 5.7vw, 5.8rem);
  border-color: rgba(var(--pack-rgb), 0.84);
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.24), transparent 27%),
    radial-gradient(circle at 50% 54%, rgba(var(--pack-rgb), 0.3), rgba(var(--pack-rgb), 0.1) 63%, rgba(var(--pack-rgb), 0.025));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 2.4rem rgba(var(--pack-rgb), 0.18),
    0 0 1.65rem rgba(var(--pack-rgb), 0.28);
}

.fk-practice-pack-icon--large::before {
  inset: 0.5rem;
  border-color: rgba(var(--pack-rgb), 0.26);
  box-shadow: inset 0 0 1.4rem rgba(var(--pack-rgb), 0.18);
}

.fk-practice-pack-icon--large::after {
  inset: -0.7rem;
  background: radial-gradient(circle, rgba(var(--pack-rgb), 0.28), transparent 64%);
  filter: blur(0.55rem);
  opacity: 0.86;
}

.fk-practice-pack-icon--large svg {
  width: clamp(3.05rem, 3.9vw, 3.75rem);
  height: clamp(3.05rem, 3.9vw, 3.75rem);
  filter:
    drop-shadow(0 0 0.45rem rgba(var(--pack-rgb), 0.58))
    drop-shadow(0 0 0.95rem rgba(var(--pack-rgb), 0.24));
}

.fk-practice-pack-icon--large path,
.fk-practice-pack-icon--large circle,
.fk-practice-pack-icon--large rect {
  stroke-width: 1.85;
}

.fk-practice-selected-pack {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 34%);
  grid-template-rows: auto auto auto;
  gap: clamp(0.72rem, 1.05vw, 1.05rem);
  align-items: start;
  min-width: 0;
  height: 100%;
  padding: clamp(1.05rem, 1.42vw, 1.45rem);
  border: 1px solid rgba(230, 173, 88, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 7, 14, 0.96) 0%, rgba(0, 12, 21, 0.84) 50%, rgba(0, 10, 18, 0.64) 100%),
    url("FKSpotBack.png") calc(100% + 3rem) 92% / auto 112% no-repeat,
    linear-gradient(135deg, rgba(4, 22, 35, 0.94), rgba(0, 8, 15, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 58px rgba(0, 0, 0, 0.32);
}

.fk-practice-selected-pack::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 34%, rgba(54, 215, 221, 0.16), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 38%, rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.fk-practice-selected-pack > * {
  position: relative;
  z-index: 2;
}

.fk-practice-selected-copy {
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: clamp(4.8rem, 5.7vw, 5.9rem) minmax(0, 1fr);
  gap: clamp(0.95rem, 1.35vw, 1.22rem);
  min-width: 0;
}

/* Desktop/tablet: transparent wrapper so .fk-practice-selected-meta/.fk-practice-focus stay
   direct children of the .fk-practice-selected-pack grid (their grid-column/grid-row rules
   target them as direct grid items) -- only becomes a real box at the mobile breakpoint below,
   where the collapse toggle applies. */
.fk-practice-selected-body {
  display: contents;
}

.fk-practice-selected-copy h3 {
  margin: 0.16rem 0 clamp(0.72rem, 1vw, 0.95rem);
  color: #f8fbff;
  font-family: "Georgia", "Cambria", serif;
  font-size: clamp(1.82rem, 3.35vw, 3.35rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.02;
  text-transform: uppercase;
  overflow-wrap: normal;
}

.fk-practice-difficulty-recommendation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.fk-practice-difficulty-recommendation .fk-practice-recommendation-reason {
  min-width: 0;
  max-width: none;
  margin: 0;
  color: rgba(238, 199, 122, 0.78);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.fk-practice-target-large,
.fk-practice-target-small {
  position: relative;
  display: block;
  border: 1px solid rgba(230, 173, 88, 0.52);
  border-radius: 999px;
  background:
    repeating-radial-gradient(circle, transparent 0 0.92rem, rgba(230, 173, 88, 0.58) 0.96rem 1.02rem),
    radial-gradient(circle, rgba(230, 173, 88, 0.95) 0 0.18rem, transparent 0.2rem);
  box-shadow: 0 0 24px rgba(230, 173, 88, 0.18);
}

.fk-practice-target-large {
  width: 5rem;
  height: 5rem;
}

.fk-practice-target-small {
  width: 3.3rem;
  height: 3.3rem;
  flex: 0 0 auto;
}

.fk-practice-target-large::before,
.fk-practice-target-small::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 100%;
  height: 1px;
  background: rgba(230, 173, 88, 0.64);
}

.fk-practice-target-large::after,
.fk-practice-target-small::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 50%;
  width: 1px;
  height: 100%;
  background: rgba(230, 173, 88, 0.64);
}

.fk-practice-selected-meta {
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
  gap: clamp(1.05rem, 1.75vw, 1.8rem);
  align-items: center;
  max-width: 31rem;
  padding-top: clamp(0.7rem, 0.98vw, 0.94rem);
  padding-bottom: clamp(0.7rem, 0.98vw, 0.94rem);
  border-top: 1px solid rgba(137, 216, 232, 0.16);
  border-bottom: 1px solid rgba(137, 216, 232, 0.16);
}

.fk-practice-selected-meta > div {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

.fk-practice-selected-meta span {
  color: rgba(205, 226, 235, 0.58);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fk-practice-selected-meta strong {
  color: #f7fbff;
  font-size: clamp(1.45rem, 1.82vw, 1.75rem);
  letter-spacing: 0.04em;
  line-height: 1;
}

.fk-practice-difficulty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.fk-practice-difficulty-tags span {
  min-height: 1.62rem;
  padding: 0.4rem 0.66rem;
  border: 1px solid currentColor;
  border-radius: 5px;
  color: var(--menu-gold-bright);
  background: rgba(230, 173, 88, 0.08);
  font-size: 0.68rem;
  font-weight: 780;
  text-transform: uppercase;
  line-height: 1;
}

.fk-practice-difficulty-tags span[data-practice-difficulty="easy"] {
  color: #7ce7b2;
  background: rgba(124, 231, 178, 0.09);
}

.fk-practice-difficulty-tags span[data-practice-difficulty="hard"] {
  color: #ff8d3c;
  background: rgba(255, 141, 60, 0.08);
}

.fk-practice-difficulty-tags span[data-practice-difficulty="expert"] {
  color: #ff6f4a;
  background: rgba(255, 111, 74, 0.1);
}

.fk-practice-focus {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  align-self: start;
  display: grid;
  gap: 0.46rem;
}

.fk-practice-focus .fk-mode-label {
  color: rgba(246, 207, 124, 0.84);
}

.fk-practice-focus ul {
  display: grid;
  gap: 0.46rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(218, 235, 241, 0.78);
  font-size: clamp(0.86rem, 0.94vw, 0.93rem);
}

.fk-practice-focus li {
  position: relative;
  padding-left: 1.38rem;
  line-height: 1.24;
}

.fk-practice-focus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08rem;
  width: 0.92rem;
  height: 0.92rem;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.4' stroke='%23e6ad58' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='4.6' stroke='%23ffd98a' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7' fill='%23ffd98a'/%3E%3Cpath d='M12 2.7v3M12 18.3v3M2.7 12h3M18.3 12h3' stroke='%23ffd98a' stroke-width='1.45' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 0.32rem rgba(230, 173, 88, 0.18));
}

.fk-practice-launch {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  align-self: start;
  justify-self: start;
  min-height: 2.8rem;
  padding: 0.58rem 0.95rem;
  color: var(--menu-gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.fk-save-star {
  display: inline-grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  border: 0;
  color: rgba(205, 226, 235, 0.66);
  background: transparent;
  cursor: pointer;
  font-size: 1.42rem;
  line-height: 1;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.34);
  transition: color 160ms ease, text-shadow 160ms ease, transform 160ms ease;
}@media (hover: hover) and (pointer: fine) {
  .fk-save-star:hover {
  outline: none;
  color: rgba(246, 207, 124, 0.92);
  text-shadow: 0 0 14px rgba(230, 173, 88, 0.2);
}
}

.fk-save-star:focus-visible {
  outline: none;
  color: rgba(246, 207, 124, 0.92);
  text-shadow: 0 0 14px rgba(230, 173, 88, 0.2);
}

.fk-save-star:active {
  transform: translateY(1px);
}

.fk-save-star.is-saved {
  color: rgba(230, 173, 88, 0.95);
  text-shadow: 0 0 16px rgba(230, 173, 88, 0.28);
}

.fk-save-star--card {
  position: absolute;
  top: 0.92rem;
  right: 0.92rem;
  z-index: 5;
}

.fk-save-star--selected-pack {
  position: absolute;
  top: 0.92rem;
  right: 0.92rem;
  z-index: 5;
}

.fk-practice-insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.18fr;
  gap: clamp(0.82rem, 1.25vw, 1.15rem);
  align-self: stretch;
  width: 100%;
  flex-shrink: 0;
  min-width: 0;
}

.fk-practice-insight-card {
  display: grid;
  gap: 0.48rem;
  min-width: 0;
  min-height: 6.55rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(137, 216, 232, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    rgba(2, 17, 29, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.fk-practice-insight-card p {
  margin: 0;
  color: rgba(205, 226, 235, 0.68);
  font-size: 0.82rem;
  line-height: 1.45;
}

.fk-practice-accuracy-card {
  align-content: start;
  grid-template-rows: auto auto;
  gap: clamp(1.15rem, 1.7vw, 1.8rem);
  padding: 1rem 1.15rem 1.1rem;
}

.fk-practice-ring-stat {
  display: grid;
  place-items: center;
  width: 4.7rem;
  height: 4.7rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(1, 11, 20, 0.95) 0 54%, transparent 56%),
    conic-gradient(var(--menu-teal-soft) var(--stat-value), rgba(137, 216, 232, 0.14) 0);
}

.fk-practice-ring-stat strong,
.fk-practice-streak-row strong,
.fk-practice-recommendation strong {
  color: #f7fbff;
}

.fk-practice-ring-stat strong {
  font-size: 1.45rem;
}

.fk-practice-recent-accuracy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.fk-practice-accuracy-card .fk-practice-recent-accuracy {
  grid-template-columns: minmax(5.5rem, 0.34fr) minmax(0, 1fr);
  gap: clamp(1rem, 1.5vw, 1.4rem);
  padding-inline: 0.15rem;
}

.fk-practice-accuracy-card .fk-practice-ring-stat { justify-self: center; }
.fk-practice-accuracy-card .fk-practice-accuracy-sparkline { width: min(11rem, 100%); }

.fk-practice-recent-trend {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.fk-practice-accuracy-sparkline {
  width: min(7.8rem, 100%);
  height: 2.55rem;
  filter: drop-shadow(0 0 6px rgba(70, 238, 238, 0.26));
}

.fk-practice-accuracy-sparkline__halo,
.fk-practice-accuracy-sparkline__glow,
.fk-practice-accuracy-sparkline__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fk-practice-accuracy-sparkline__halo {
  stroke: rgba(76, 233, 240, 0.13);
  stroke-width: 7.2;
  filter: drop-shadow(0 0 8px rgba(76, 233, 240, 0.36));
}

.fk-practice-accuracy-sparkline__glow {
  stroke: rgba(79, 239, 238, 0.34);
  stroke-width: 4.4;
  filter: drop-shadow(0 0 5px rgba(79, 239, 238, 0.48));
}

.fk-practice-accuracy-sparkline__line {
  stroke: rgba(118, 255, 243, 0.98);
  stroke-width: 2.45;
}

.fk-practice-accuracy-sparkline__dot {
  fill: rgb(143, 255, 244);
  stroke: rgba(2, 12, 19, 0.94);
  stroke-width: 1.25;
  filter: drop-shadow(0 0 5px rgba(118, 255, 243, 0.58));
}

.fk-practice-recent-trend small {
  color: rgba(205, 226, 235, 0.62);
  font-size: 0.72rem;
  line-height: 1.25;
}

.fk-practice-recent-trend small.is-positive {
  color: rgba(124, 238, 228, 0.9);
}

.fk-practice-recent-trend small.is-negative {
  color: rgba(255, 143, 104, 0.92);
}

.fk-practice-streak-row {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.fk-practice-streak-row strong {
  font-size: 2rem;
  line-height: 1;
}

.fk-practice-streak-panel {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.82rem;
  min-width: 0;
}

.fk-practice-streak-ring {
  display: grid;
  place-items: center;
  width: 4.7rem;
  height: 4.7rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(2, 17, 29, 0.99) 0 58%, transparent 59%),
    conic-gradient(rgba(230, 173, 88, 0.74) var(--streak-progress), rgba(79, 65, 48, 0.58) 0);
  box-shadow:
    0 0 16px rgba(230, 173, 88, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.fk-practice-streak-panel.is-frozen .fk-practice-streak-ring {
  background:
    radial-gradient(circle at center, rgba(2, 17, 29, 0.99) 0 58%, transparent 59%),
    conic-gradient(rgba(93, 205, 214, 0.72) var(--streak-progress), rgba(42, 73, 82, 0.58) 0);
  box-shadow:
    0 0 16px rgba(54, 215, 221, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.fk-practice-streak-ring span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: rgba(0, 7, 14, 0.82);
  font-size: 1.8rem;
  line-height: 1;
}

.fk-practice-streak-copy {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.fk-practice-streak-best {
  color: rgba(205, 226, 235, 0.74);
  font-size: 0.78rem;
}

.fk-practice-streak-freezes {
  color: rgba(120, 225, 236, 0.88);
  font-size: 0.74rem;
  font-weight: 760;
}

.fk-practice-week-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
}

.fk-practice-week-bar span {
  display: grid;
  place-items: center;
  width: 1.22rem;
  height: 1.22rem;
  border: 1px solid rgba(137, 216, 232, 0.28);
  border-radius: 999px;
  color: rgba(205, 226, 235, 0.66);
  background: rgba(1, 11, 20, 0.8);
  font-size: 0.62rem;
  font-weight: 780;
  line-height: 1;
}

.fk-practice-week-bar span.is-complete {
  border-color: rgba(255, 217, 138, 0.88);
  color: rgba(1, 11, 20, 0.96);
  background: var(--menu-gold-bright);
  box-shadow: 0 0 14px rgba(230, 173, 88, 0.2);
}

.fk-practice-week-bar span.is-protected {
  border-color: rgba(111, 224, 236, 0.9);
  color: rgba(225, 252, 255, 0.98);
  background: rgba(34, 124, 144, 0.72);
}

.fk-practice-week-bar span.is-repaired {
  border-color: rgba(169, 139, 255, 0.92);
  color: rgba(243, 237, 255, 0.98);
  background: rgba(91, 65, 156, 0.74);
}

.fk-practice-week-bar span.is-missed {
  border-color: rgba(255, 125, 109, 0.38);
  color: rgba(255, 171, 158, 0.72);
  background: rgba(83, 31, 31, 0.42);
}

.fk-streak-repair-button {
  margin-top: 0.72rem;
  border: 1px solid rgba(169, 139, 255, 0.62);
  border-radius: 0.62rem;
  padding: 0.55rem 0.8rem;
  color: rgba(244, 239, 255, 0.98);
  background: rgba(91, 65, 156, 0.4);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 760;
  cursor: pointer;
}

.fk-streak-repair-button:disabled { cursor: wait; opacity: 0.64; }
.fk-streak-repair-error { margin: 0.48rem 0 0; color: rgba(255, 157, 139, 0.94); font-size: 0.74rem; }

.fk-activity-calendar-card {
  display: grid;
  gap: 0.72rem;
  max-width: 100%;
  min-width: 0;
}

.fk-activity-calendar-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; min-width: 0; }
.fk-activity-calendar-toolbar > div:first-child { margin-right: auto; }
.fk-activity-calendar-toolbar strong { color: rgba(244, 250, 248, 0.96); font-size: 0.84rem; font-weight: 790; letter-spacing: 0.01em; }
.fk-activity-calendar-status { margin: 0.1rem 0 0; color: rgba(174, 202, 210, 0.52); font-size: 0.62rem; }
.fk-activity-calendar-nav { display: flex; gap: 0.24rem; }
.fk-activity-calendar-nav button {
  width: 1.52rem; height: 1.52rem; border: 1px solid rgba(112, 190, 193, 0.14); border-radius: 0.4rem;
  color: rgba(194, 226, 227, 0.76); background: rgba(3, 20, 27, 0.4); cursor: pointer;
}
.fk-activity-calendar-nav button:disabled { cursor: default; opacity: 0.35; }
.fk-activity-calendar-layout { display: grid; grid-template-columns: minmax(14rem, 1.16fr) minmax(11rem, 0.4fr); align-items: stretch; gap: 0.9rem; min-width: 0; max-width: 100%; }
.fk-activity-calendar-heatmap { display: grid; align-content: start; justify-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; }
.fk-activity-calendar-scroll { max-width: 100%; min-width: 0; overflow: hidden; padding: 0.16rem 0.22rem 0.32rem; }
.fk-activity-calendar-months { display: grid; grid-template-rows: repeat(6, 1.42rem); gap: 0.34rem; width: 1.5rem; height: 10.22rem; }
.fk-activity-calendar-months span { align-self: center; color: rgba(174, 202, 210, 0.56); font-size: 0.54rem; font-weight: 650; line-height: 1; white-space: nowrap; }
.fk-activity-calendar-body { display: flex; gap: 0.24rem; width: max-content; min-width: max-content; }
.fk-activity-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1.42rem); gap: 0.34rem; width: 11.98rem; height: 0.96rem; margin-left: 1.74rem; }
.fk-activity-calendar-weekdays span { color: rgba(174, 202, 210, 0.46); font-size: 0.52rem; line-height: 0.92rem; text-align: center; }
.fk-activity-calendar-grid { display: grid; grid-template-columns: repeat(7, 1.42rem); grid-auto-flow: row; grid-auto-rows: 1.42rem; gap: 0.34rem; }
.fk-activity-calendar-day, .fk-activity-calendar-legend-states i {
  display: block; width: 1.42rem; height: 1.42rem; padding: 0; border: 1px solid rgba(128, 199, 202, 0.07);
  border-radius: 0.28rem; background: rgba(83, 143, 148, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 2px 5px rgba(0, 0, 0, 0.14);
}
.fk-activity-calendar-day { cursor: pointer; transition: filter 120ms ease, box-shadow 120ms ease, transform 120ms ease; }@media (hover: hover) and (pointer: fine) {

.fk-activity-calendar-day:hover:not(:disabled) { filter: brightness(1.13); transform: translateY(-1px); }
}
.fk-activity-calendar-day.intensity-1, .fk-activity-calendar-legend .intensity-1 { border-color: rgba(49, 125, 134, 0.12); background: rgba(27, 91, 101, 0.5); }
.fk-activity-calendar-day.intensity-2, .fk-activity-calendar-legend .intensity-2 { border-color: rgba(50, 158, 160, 0.14); background: rgba(31, 132, 137, 0.68); }
.fk-activity-calendar-day.intensity-3, .fk-activity-calendar-legend .intensity-3 { border-color: rgba(68, 190, 181, 0.16); background: rgba(46, 172, 164, 0.84); }
.fk-activity-calendar-day.intensity-4, .fk-activity-calendar-legend .intensity-4 { border-color: rgba(224, 186, 108, 0.2); background: rgba(198, 157, 78, 0.92); }
.fk-activity-calendar-day.is-protected, .fk-activity-calendar-legend .is-protected { border-color: rgba(98, 191, 209, 0.2); background: repeating-linear-gradient(135deg, rgba(103, 205, 220, 0.72) 0 1px, rgba(25, 91, 112, 0.88) 1px 4px, rgba(44, 132, 150, 0.82) 4px 6px); }
.fk-activity-calendar-day.is-repaired, .fk-activity-calendar-legend .is-repaired { border-color: rgba(151, 127, 211, 0.18); background: linear-gradient(135deg, rgba(91, 64, 151, 0.82) 0 45%, rgba(133, 104, 201, 0.78) 45% 55%, rgba(91, 64, 151, 0.82) 55%); }
.fk-activity-calendar-day.is-missed, .fk-activity-calendar-legend .is-missed { border-color: rgba(116, 52, 63, 0.14); background: linear-gradient(45deg, transparent 44%, rgba(139, 65, 76, 0.26) 45% 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, rgba(139, 65, 76, 0.2) 45% 55%, transparent 56%), rgba(57, 20, 29, 0.9); }
.fk-activity-calendar-day.is-neutral { border-color: rgba(116, 174, 178, 0.045); background: rgba(72, 119, 125, 0.045); box-shadow: none; }
.fk-activity-calendar-day.is-future { border-color: rgba(116, 174, 178, 0.04); background: transparent; box-shadow: none; opacity: 0.34; cursor: default; }
.fk-activity-calendar-day.is-today { outline: 1px solid rgba(225, 181, 97, 0.42); outline-offset: 1px; }
.fk-activity-calendar-day[aria-pressed="true"] { border-color: transparent; box-shadow: 0 0 0 2px rgba(232, 188, 104, 0.92), 0 0 12px rgba(225, 173, 77, 0.2); }
.fk-activity-calendar-day:focus-visible, .fk-activity-calendar-nav button:focus-visible, .fk-activity-calendar-scroll:focus-visible { outline: 2px solid var(--menu-gold-bright); outline-offset: 2px; }
.fk-activity-calendar-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.38rem 0.72rem; width: 100%; color: rgba(174, 202, 210, 0.46); font-size: 0.54rem; }
.fk-activity-calendar-scale { display: grid; grid-template-columns: auto minmax(5.8rem, 1fr) auto; align-items: center; gap: 0.34rem; width: min(13rem, 100%); }
.fk-activity-calendar-scale > span { line-height: 1; }
.fk-activity-calendar-legend .fk-activity-calendar-scale-bar { display: block; width: 100%; height: 0.28rem; border: 0; border-radius: 999px; background: linear-gradient(90deg, #071820 0%, #102f39 18%, #1b5b65 36%, #1f8589 54%, #2eaca4 72%, #8f9e77 86%, #c69d4e 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 2px 7px rgba(0, 0, 0, 0.2); }
.fk-activity-calendar-legend-states { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.26rem 0.58rem; }
.fk-activity-calendar-legend-states > span { display: inline-flex; align-items: center; gap: 0.24rem; color: rgba(174, 202, 210, 0.5); white-space: nowrap; }
.fk-activity-calendar-legend-states i { flex: 0 0 auto; width: 0.48rem; height: 0.48rem; border-radius: 0.14rem; box-shadow: none; }
.fk-activity-calendar-detail { display: grid; align-content: start; gap: 0.64rem; min-width: 0; padding: 0.14rem 0 0.14rem 1rem; border: 0; border-left: 1px solid rgba(106, 178, 182, 0.11); border-radius: 0; background: transparent; }
.fk-activity-calendar-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.38rem; }
.fk-activity-calendar-detail-date { color: rgba(245, 250, 247, 0.96); font-size: 0.82rem; font-weight: 790; }
.fk-activity-calendar-detail-status { padding: 0.14rem 0.32rem; border: 0; border-radius: 999px; color: rgba(186, 215, 217, 0.7); background: rgba(104, 170, 174, 0.07); font-size: 0.54rem; font-weight: 720; text-transform: capitalize; }
.fk-activity-calendar-detail-status.is-active { border-color: rgba(92, 213, 179, 0.42); color: rgba(153, 239, 207, 0.94); }
.fk-activity-calendar-detail-status.is-protected { border-color: rgba(111, 224, 236, 0.5); color: rgba(151, 236, 244, 0.94); }
.fk-activity-calendar-detail-status.is-repaired { border-color: rgba(184, 157, 255, 0.5); color: rgba(211, 194, 255, 0.95); }
.fk-activity-calendar-detail-status.is-missed { color: rgba(193, 124, 129, 0.82); background: rgba(74, 27, 36, 0.24); }
.fk-activity-calendar-detail dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.52rem 0.72rem; margin: 0; }
.fk-activity-calendar-detail dl div { min-width: 0; padding-top: 0; border-top: 0; }
.fk-activity-calendar-detail dt { color: rgba(174, 202, 210, 0.48); font-size: 0.56rem; }
.fk-activity-calendar-detail dd { margin: 0.1rem 0 0; color: rgba(244, 249, 247, 0.96); font-size: 0.9rem; font-weight: 790; }
.fk-activity-calendar-empty { margin: 0; color: rgba(205, 226, 235, 0.66); font-size: 0.7rem; line-height: 1.45; }

@media (max-width: 820px) {
  .fk-activity-calendar-layout { grid-template-columns: minmax(0, 1fr); }
  .fk-activity-calendar-detail { width: 100%; max-width: 100%; padding: 0.78rem 0 0; border-left: 0; border-top: 1px solid rgba(106, 178, 182, 0.11); }
}

.fk-practice-week-bar span.is-today:not(.is-complete) {
  border-color: rgba(255, 217, 138, 0.7);
  color: var(--menu-gold-bright);
}

.fk-practice-streak-row span,
.fk-practice-recommendation span {
  color: rgba(205, 226, 235, 0.66);
  font-size: 0.82rem;
}

.fk-practice-recommendation {
  display: flex;
  align-items: center;
  gap: 0.82rem;
  min-width: 0;
}

.fk-practice-recommendation strong,
.fk-practice-recommendation span {
  display: block;
  overflow-wrap: anywhere;
}

.fk-practice-recommendation strong {
  color: var(--menu-gold-bright);
  font-size: 1.08rem;
}

.fk-profile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.95rem;
  min-height: 3.35rem;
  margin-bottom: clamp(0.78rem, 1.05vw, 1.05rem);
}

.fk-profile-topbar h2,
.fk-review-placeholder h2 {
  margin: 0.18rem 0 0;
  color: #f5fbff;
  font-family: "Georgia", "Cambria", serif;
  font-size: clamp(1.48rem, 1.82vw, 2rem);
  font-weight: 520;
  letter-spacing: 0;
}

.fk-profile-kicker {
  display: block;
  margin: 0;
  color: rgba(246, 207, 124, 0.84);
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.fk-profile-back,
.fk-profile-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.44rem;
  min-height: 2.5rem;
  padding: 0.54rem 0.86rem;
  border: 1px solid rgba(246, 207, 124, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(0, 10, 16, 0.68);
  color: rgba(246, 207, 124, 0.92);
  font-size: 0.78rem;
  font-weight: 790;
  letter-spacing: 0.035em;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.fk-profile-back svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}@media (hover: hover) and (pointer: fine) {
  .fk-profile-back:hover,
  .fk-profile-action:hover {
  transform: translateY(-1px);
  outline: none;
  border-color: rgba(246, 207, 124, 0.58);
  background:
    linear-gradient(180deg, rgba(240, 187, 89, 0.13), rgba(255, 255, 255, 0.016)),
    rgba(0, 12, 18, 0.78);
  box-shadow:
    0 0 0 3px rgba(240, 187, 89, 0.1),
    0 14px 28px rgba(0, 0, 0, 0.24);
}
}

.fk-profile-back:focus-visible,
.fk-profile-action:focus-visible {
  transform: translateY(-1px);
  outline: none;
  border-color: rgba(246, 207, 124, 0.58);
  background:
    linear-gradient(180deg, rgba(240, 187, 89, 0.13), rgba(255, 255, 255, 0.016)),
    rgba(0, 12, 18, 0.78);
  box-shadow:
    0 0 0 3px rgba(240, 187, 89, 0.1),
    0 14px 28px rgba(0, 0, 0, 0.24);
}

.fk-profile-action--muted {
  border-color: rgba(124, 238, 228, 0.2);
  color: rgba(196, 242, 246, 0.88);
}

.fk-settings-screen {
  grid-template-rows: auto minmax(0, 1fr);
  overflow-y: hidden;
  background:
    radial-gradient(circle at 48% -8%, rgba(84, 190, 205, 0.2), transparent 24rem),
    radial-gradient(circle at 88% 18%, rgba(23, 113, 133, 0.12), transparent 22rem),
    linear-gradient(180deg, rgba(7, 43, 59, 0.52), rgba(0, 9, 16, 0.08) 20rem);
}

.fk-settings-topbar {
  align-items: center;
  margin-inline: auto;
  width: min(100%, 72rem);
  min-height: clamp(2.2rem, 5vh, 3.1rem);
  margin-bottom: clamp(0.24rem, .8vh, 0.55rem);
}

.fk-settings-topbar h2 {
  margin: 0.08rem 0 0;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.85rem, 2.5vw, 2.45rem);
  line-height: 1;
  letter-spacing: 0;
}

.fk-settings-topbar p {
  max-width: 44rem;
  margin-top: 0.22rem;
  font-size: 0.78rem;
  line-height: 1.25;
}

.fk-settings-topbar #settings-back-dashboard {
  min-height: 2.05rem;
  padding: 0.34rem 0.82rem;
  font-size: 0.72rem;
}

.fk-settings-layout {
  display: grid;
  gap: 0;
  grid-template-rows: repeat(6, max-content);
  align-content: space-between;
  margin-inline: auto;
  width: min(100%, 72rem);
  height: 100%;
  min-height: 0;
  overflow: visible;
  padding-bottom: 0;
}

.fk-settings-form {
  display: contents;
}

.fk-settings-card {
  display: grid;
  grid-template-columns: minmax(14.25rem, 0.31fr) minmax(0, 1fr);
  gap: clamp(1rem, 1.5vw, 1.45rem);
  align-items: stretch;
  min-height: 0;
  padding: clamp(0.55rem, 1.25vh, 0.9rem) clamp(0.9rem, 1.35vw, 1.2rem);
  border: 1px solid rgba(124, 238, 228, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(10, 43, 58, 0.68), rgba(0, 13, 22, 0.74)),
    rgba(2, 18, 29, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 6px 18px rgba(0, 0, 0, 0.11);
}

.fk-settings-card-intro {
  display: grid;
  grid-template-columns: 2.55rem minmax(0, 1fr);
  gap: 0.68rem;
  align-items: center;
  padding-right: clamp(0.8rem, 1.35vw, 1.25rem);
  border-right: 1px solid rgba(124, 238, 228, 0.11);
}

.fk-settings-card-icon {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(240, 187, 89, 0.6);
  border-radius: 50%;
  color: rgba(246, 207, 124, 0.95);
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 187, 89, 0.14), transparent 66%),
    rgba(0, 12, 18, 0.56);
}

.fk-settings-card-icon svg {
  width: 1.22rem;
  height: 1.22rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Work order 7 part D (Settings visual pass, owner-approved "targeted accent pass"): every
   section icon shared one identical gold ring regardless of category -- the six `.fk-settings-
   card-icon--*` modifier classes already existed in the markup (getQuestCategoryIcon-style dead
   hooks, never wired to any CSS beyond `--danger`, which already rides the existing `.fk-settings-
   danger` card-level rule below). Reusing this project's existing category-color tokens rather
   than inventing new ones; Training keeps the pre-existing gold (it's the primary-mode settings
   group, and gold is this app's own "primary" colour everywhere else) and Account & Data keeps
   it too, deliberately -- account controls read as core/foundational, not a themed category the
   way Motion, Language, and Review are. Icon-only, per the approved scope -- the surrounding card
   background is intentionally untouched. */
.fk-settings-card-icon--motion {
  border-color: rgba(76, 174, 255, 0.6);
  color: rgba(150, 202, 255, 0.96);
  background:
    radial-gradient(circle at 50% 50%, rgba(76, 174, 255, 0.16), transparent 66%),
    rgba(0, 12, 18, 0.56);
}

.fk-settings-card-icon--language {
  border-color: rgba(51, 214, 195, 0.6);
  color: rgba(124, 238, 228, 0.96);
  background:
    radial-gradient(circle at 50% 50%, rgba(51, 214, 195, 0.16), transparent 66%),
    rgba(0, 12, 18, 0.56);
}

.fk-settings-card-icon--review {
  border-color: rgba(28, 197, 139, 0.6);
  color: rgba(120, 224, 189, 0.96);
  background:
    radial-gradient(circle at 50% 50%, rgba(28, 197, 139, 0.16), transparent 66%),
    rgba(0, 12, 18, 0.56);
}

.fk-settings-section-head {
  display: grid;
  gap: 0.18rem;
}

.fk-settings-section-head h3 {
  margin: 0;
  color: rgba(245, 249, 238, 0.96);
  font-size: 0.75rem;
  font-weight: 870;
  line-height: 1.2;
  letter-spacing: 0.12em;
}

.fk-settings-fieldset p,
.fk-settings-action small {
  margin: 0;
  color: rgba(176, 214, 228, 0.66);
  font-size: 0.68rem;
  line-height: 1.3;
}

.fk-settings-card-controls {
  display: grid;
  gap: 0.2rem;
  align-content: center;
}

.fk-settings-fieldset {
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fk-settings-row {
  display: grid;
  grid-template-columns: minmax(12rem, 0.46fr) minmax(16rem, 1fr);
  gap: 0.8rem;
  align-items: center;
  min-height: clamp(1.35rem, 2.7vh, 1.8rem);
  box-sizing: border-box;
}

.fk-settings-row > *,
.fk-settings-card-controls,
.fk-settings-action span {
  min-width: 0;
}

.fk-settings-fieldset.fk-settings-row .fk-settings-fieldset-label {
  grid-column: 1;
  align-self: center;
}

/* Work order 7 part D (Settings visual pass): the Locale row is the one fieldset whose second
   grid cell holds two stacked lines (a caption plus the segmented control) instead of the single
   control every other row has -- the shared align-self: center above then centers the label
   against the whole two-line block rather than against the row a player actually reads it next
   to, reading visibly off-balance. Scoped to this one row via a dedicated modifier rather than
   changing the shared rule, since every other .fk-settings-row genuinely wants vertical centering
   for its single-line content. */
.fk-settings-row--top-aligned {
  align-items: start;
}

.fk-settings-row--top-aligned .fk-settings-fieldset-label {
  align-self: start;
  padding-top: 0.22rem;
}

.fk-settings-fieldset.fk-settings-row > .fk-settings-segment,
.fk-settings-fieldset.fk-settings-row > div {
  grid-column: 2;
  width: min(23rem, 100%);
  justify-self: end;
}

.fk-settings-card-controls > .fk-settings-row + .fk-settings-row,
.fk-settings-action + .fk-settings-action {
  border-top: 1px solid rgba(124, 238, 228, 0.08);
  padding-top: 0.2rem;
}

.fk-settings-fieldset-label,
.fk-settings-row-label {
  padding: 0;
  color: rgba(245, 249, 238, 0.94);
  font-size: 0.72rem;
  /* Was 760 -- the root font stack (Aptos, Segoe UI Variable Text) is Windows/Office-only, so
     everywhere else (this project's own actual mobile test target, per AGENTS.md) falls through
     to the system sans-serif's static weight faces, which don't include 760 -- normalised to a
     real weight every face has. */
  font-weight: 700;
}

.fk-settings-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: min(23rem, 100%);
  justify-self: end;
  min-width: 0;
  border: 1px solid rgba(124, 238, 228, 0.18);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 14, 22, 0.46);
}

.fk-settings-segment label,
.fk-settings-toggle {
  min-height: clamp(1.3rem, 2.55vh, 1.7rem);
}

.fk-settings-segment label {
  position: relative;
  display: grid;
  cursor: pointer;
}

.fk-settings-segment input,
.fk-settings-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fk-settings-segment span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(1.3rem, 2.55vh, 1.7rem);
  padding: 0.18rem 0.5rem;
  border-left: 1px solid rgba(124, 238, 228, 0.14);
  background: rgba(0, 16, 25, 0.44);
  color: rgba(197, 224, 232, 0.82);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.1;
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.fk-settings-segment label:first-child span {
  border-left: 0;
}@media (hover: hover) and (pointer: fine) {
  .fk-settings-segment label:hover span {
  background: rgba(6, 34, 45, 0.72);
  color: rgba(232, 250, 249, 0.92);
}
}

.fk-settings-segment input:focus-visible + span {
  background: rgba(6, 34, 45, 0.72);
  color: rgba(232, 250, 249, 0.92);
}

.fk-settings-segment input:focus-visible + span {
  box-shadow: inset 0 0 0 2px rgba(54, 215, 221, 0.34);
}

.fk-settings-segment input:checked + span {
  border-color: rgba(240, 187, 89, 0.7);
  background:
    linear-gradient(180deg, rgba(240, 187, 89, 0.22), rgba(240, 187, 89, 0.07)),
    rgba(28, 31, 25, 0.78);
  color: rgba(255, 236, 180, 0.98);
  box-shadow: inset 0 0 0 1px rgba(240, 187, 89, 0.68);
}

.fk-settings-toggle {
  position: relative;
  display: grid;
  justify-self: end;
  align-self: center;
  width: 2.05rem;
  cursor: pointer;
}

.fk-settings-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.fk-settings-toggle::before {
  content: "";
  align-self: center;
  width: 1.9rem;
  height: 1rem;
  border: 1px solid rgba(124, 238, 228, 0.16);
  border-radius: 999px;
  background: rgba(54, 65, 66, 0.82);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.fk-settings-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.16rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: rgba(213, 226, 218, 0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.38);
  transform: translateY(-50%);
  transition: transform 160ms ease, background 160ms ease;
}

.fk-settings-toggle:has(input:checked)::before {
  border-color: rgba(124, 238, 228, 0.62);
  background: linear-gradient(90deg, rgba(35, 207, 213, 0.9), rgba(106, 247, 240, 0.82));
  box-shadow: 0 0 10px rgba(54, 215, 221, 0.2);
}

.fk-settings-toggle:has(input:checked)::after {
  transform: translate(0.86rem, -50%);
  background: rgba(255, 255, 238, 0.98);
}

.fk-settings-toggle input:focus-visible + span {
  outline: 3px solid rgba(54, 215, 221, 0.28);
  outline-offset: 4px;
}

.fk-settings-action,
.fk-settings-inline-action {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease, color 160ms ease;
}

.fk-settings-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  width: 100%;
  min-height: 1.95rem;
  padding: 0.24rem 0;
  border: 0;
  background: transparent;
  color: rgba(232, 250, 249, 0.92);
  text-align: left;
}

.fk-settings-action span {
  display: grid;
  gap: 0.12rem;
}

.fk-settings-action strong {
  color: rgba(245, 249, 238, 0.96);
  font-size: 0.72rem;
}

.fk-settings-action b,
.fk-settings-inline-action {
  color: rgba(246, 207, 124, 0.96);
  font-size: 0.7rem;
  font-weight: 820;
}@media (hover: hover) and (pointer: fine) {
  .fk-settings-action:hover {
  outline: none;
  color: var(--cream);
}
}

.fk-settings-action:focus-visible {
  outline: none;
  color: var(--cream);
}@media (hover: hover) and (pointer: fine) {
  .fk-settings-action:hover b {
  color: rgba(255, 226, 151, 1);
}
}

.fk-settings-action:focus-visible b {
  color: rgba(255, 226, 151, 1);
}

.fk-settings-action b {
  min-width: 8.5rem;
  padding: 0.34rem 0.68rem;
  border: 1px solid rgba(240, 187, 89, 0.5);
  border-radius: 6px;
  text-align: center;
}

/* Work order 7 part D (Settings visual pass): a resting glow on the two genuinely constructive
   actions (export, send feedback), matching the soft box-shadow .primary-button already carries
   elsewhere in this app (scaled down for a small inline pill rather than a full-width CTA) --
   scoped to these two IDs rather than the shared .fk-settings-action b rule so it can't also land
   on #settings-reset-progress, whose own more specific rule below recolours the same element red
   without touching box-shadow (a gold glow behind a red border would read as a mistake, not a
   fix). "Clear reviewed"/"Reset all settings" are administrative/destructive, not constructive,
   so they're deliberately left at the flat outline treatment. */
#settings-export-progress b,
#settings-send-feedback b {
  box-shadow: 0 6px 14px rgba(240, 187, 89, 0.14);
}

#settings-reset-progress b {
  border-color: rgba(255, 93, 88, 0.58);
  color: rgba(255, 131, 124, 0.98);
}@media (hover: hover) and (pointer: fine) {
  #settings-reset-progress:hover b {
  background: rgba(90, 28, 30, 0.24);
  color: rgba(255, 168, 160, 1);
}
}

#settings-reset-progress:focus-visible b {
  background: rgba(90, 28, 30, 0.24);
  color: rgba(255, 168, 160, 1);
}

.fk-settings-inline-action {
  justify-self: end;
  min-width: 8.5rem;
  min-height: 1.75rem;
  padding: 0.24rem 0.68rem;
  border: 1px solid rgba(240, 187, 89, 0.54);
  border-radius: 6px;
  background: rgba(0, 14, 22, 0.56);
}@media (hover: hover) and (pointer: fine) {
  .fk-settings-inline-action:hover {
  outline: none;
  border-color: rgba(255, 197, 101, 0.82);
  background: rgba(69, 44, 19, 0.34);
  box-shadow: 0 0 0 3px rgba(240, 187, 89, 0.1);
}
}

.fk-settings-inline-action:focus-visible {
  outline: none;
  border-color: rgba(255, 197, 101, 0.82);
  background: rgba(69, 44, 19, 0.34);
  box-shadow: 0 0 0 3px rgba(240, 187, 89, 0.1);
}

.fk-settings-danger {
  border-color: rgba(255, 93, 88, 0.4);
  background:
    linear-gradient(180deg, rgba(36, 22, 25, 0.46), rgba(0, 12, 19, 0.76)),
    rgba(2, 16, 24, 0.86);
}

.fk-settings-danger .fk-settings-card-icon {
  border-color: rgba(255, 93, 88, 0.72);
  color: rgba(255, 112, 106, 0.98);
  background: rgba(66, 20, 24, 0.28);
}

.fk-settings-action--danger {
  min-height: 2.1rem;
}

.fk-settings-action--danger b {
  min-width: 8.5rem;
  padding: 0.34rem 0.68rem;
  border: 1px solid rgba(255, 93, 88, 0.7);
  border-radius: 6px;
  color: rgba(255, 131, 124, 0.98);
  text-align: center;
}@media (hover: hover) and (pointer: fine) {
  .fk-settings-action--danger:hover b {
  background: rgba(90, 28, 30, 0.28);
  color: rgba(255, 168, 160, 1);
}
}

.fk-settings-action--danger:focus-visible b {
  background: rgba(90, 28, 30, 0.28);
  color: rgba(255, 168, 160, 1);
}

.fk-feedback-modal-card {
  position: relative;
  display: grid;
  gap: 0.9rem;
  width: min(480px, 100%);
  padding: clamp(1.3rem, 2.4vw, 1.7rem);
  border: 1px solid rgba(137, 216, 232, 0.24);
  background: linear-gradient(135deg, rgba(9, 28, 41, 0.97), rgba(2, 9, 15, 0.98));
}

.fk-feedback-modal-card > .fk-saved-modal-close {
  position: absolute;
  top: clamp(1.3rem, 2.4vw, 1.7rem);
  right: clamp(1.3rem, 2.4vw, 1.7rem);
}

.fk-feedback-modal-header {
  display: grid;
  gap: 0.3rem;
  padding-right: 2.6rem;
  text-align: left;
}

.fk-feedback-modal-header h2 {
  margin: 0;
  color: #f7fbff;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
}

.fk-feedback-modal-header p {
  margin: 0;
  color: rgba(205, 226, 235, 0.68);
  font-size: 0.88rem;
}

.fk-feedback-modal-textarea {
  width: 100%;
  min-height: 8rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(137, 216, 232, 0.24);
  border-radius: var(--radius-md);
  background: rgba(4, 16, 24, 0.86);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.fk-feedback-modal-textarea:focus-visible {
  outline: none;
  border-color: rgba(240, 187, 89, 0.6);
}

.fk-feedback-modal-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.fk-feedback-modal-status.hidden {
  display: none;
}

.fk-feedback-modal-status--error {
  color: var(--red);
}

.fk-feedback-modal-status--success {
  color: var(--green);
}

/* Moderator panel: a small, friends-and-owner-scale admin surface reusing the Settings screen's
   own header/back-button pattern (fk-settings-screen/fk-profile-topbar) rather than inventing a
   second layout. */
.fk-moderator-screen {
  gap: 1.1rem;
}

.fk-moderator-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(137, 216, 232, 0.18);
  padding-bottom: 0.1rem;
}

.fk-moderator-tab {
  padding: 0.55rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .fk-moderator-tab:hover {
  color: var(--text);
}
}

.fk-moderator-tab:focus-visible {
  color: var(--text);
}

.fk-moderator-tab--active {
  color: var(--gold-strong);
  border-bottom-color: var(--gold-strong);
}

.fk-moderator-panel[hidden] {
  display: none;
}

.fk-moderator-status {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.fk-moderator-status--error {
  color: var(--red);
}

.fk-moderator-table-wrap {
  overflow-x: auto;
  touch-action: pan-x;
  border: 1px solid rgba(137, 216, 232, 0.16);
  border-radius: var(--radius-md);
}

.fk-moderator-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.fk-moderator-table th,
.fk-moderator-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(137, 216, 232, 0.12);
  white-space: nowrap;
}

.fk-moderator-table th {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.fk-moderator-table tbody tr:last-child td {
  border-bottom: none;
}

.fk-moderator-table td:first-child {
  white-space: normal;
  max-width: 28rem;
}

.fk-moderator-table-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.fk-moderator-table-actions button {
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(137, 216, 232, 0.28);
  border-radius: 6px;
  background: rgba(8, 22, 31, 0.78);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .fk-moderator-table-actions button:hover {
  outline: none;
  border-color: rgba(255, 217, 138, 0.6);
  color: var(--gold-strong);
}
}

.fk-moderator-table-actions button:focus-visible {
  outline: none;
  border-color: rgba(255, 217, 138, 0.6);
  color: var(--gold-strong);
}

.fk-moderator-table-actions button.fk-moderator-action--danger {
  border-color: rgba(255, 93, 88, 0.5);
  color: rgba(255, 131, 124, 0.98);
}@media (hover: hover) and (pointer: fine) {
  .fk-moderator-table-actions button.fk-moderator-action--danger:hover {
  background: rgba(90, 28, 30, 0.28);
  color: rgba(255, 168, 160, 1);
}
}

.fk-moderator-table-actions button.fk-moderator-action--danger:focus-visible {
  background: rgba(90, 28, 30, 0.28);
  color: rgba(255, 168, 160, 1);
}

.fk-moderator-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid rgba(137, 216, 232, 0.28);
  color: var(--muted);
}

.fk-moderator-badge--on {
  border-color: rgba(28, 197, 139, 0.55);
  color: var(--green);
}

.fk-moderator-badge--banned {
  border-color: rgba(255, 93, 88, 0.55);
  color: rgba(255, 131, 124, 0.98);
}

.fk-profile-layout {
  display: grid;
  grid-template-columns: minmax(19rem, 0.86fr) minmax(0, 1.94fr);
  gap: clamp(1rem, 1.35vw, 1.42rem);
  align-items: stretch;
  width: 100%;
  min-height: 0;
}

.fk-profile-left,
.fk-profile-main,
.fk-profile-main-grid {
  display: grid;
  gap: clamp(0.78rem, 1vw, 1.02rem);
  min-width: 0;
  min-height: 0;
}

/* Item 7 (2026-08-10 work order 3): this used to be minmax(0,1fr)/minmax(0,1.34fr)/minmax(0,0.98fr)
   to proportionally match the left column's total height against the avatar grid's own former
   size. Now that the Avatar and Card Backs cards both hold a compact trigger row instead of a
   full grid, that proportional split just stretched three short cards to fill whatever height the
   viewport gave the column, leaving each one mostly empty padding -- content-sized rows read
   correctly at every width tested (confirmed live at 390px and 1440px) with no borrowed height
   left visibly broken (a shorter left column simply leaves plain background beneath it, not an
   empty bordered box). */
.fk-profile-left {
  grid-template-rows: none;
  /* .fk-profile-layout's align-items:stretch (its own default) still stretches this column to
     match .fk-profile-main's height -- harmless when the fr-split above absorbed that extra
     height on purpose, but with content-sized rows it was inflating each card's own auto row to
     fill the leftover space instead of leaving it as trailing whitespace. align-self:start scopes
     the opt-out to this column alone; .fk-profile-main's own graph card still gets the full
     stretched height it wants (confirmed live, unchanged: 646px with or without this). */
  align-self: start;
}

.fk-profile-main {
  grid-template-rows: minmax(22rem, 1fr) auto;
  align-content: stretch;
}

.fk-profile-xp-graph-shell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(11rem, 1fr);
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}

.fk-profile-view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, 1.72rem);
  gap: 0.12rem;
  padding: 0.14rem;
  border: 1px solid rgba(112, 190, 193, 0.08);
  border-radius: 8px;
  background: rgba(0, 10, 16, 0.28);
}

.fk-profile-view-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.72rem;
  height: 1.72rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(205, 191, 153, 0.72);
  background: transparent;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {


.fk-profile-view-toggle button:hover { color: rgba(214, 241, 239, 0.92); background: rgba(31, 85, 88, 0.3); }
}
.fk-profile-view-toggle button[aria-pressed="true"] { border-color: rgba(96, 190, 184, 0.3); color: rgba(231, 247, 243, 0.96); background: rgba(33, 107, 105, 0.42); }
.fk-profile-view-toggle button:focus-visible { outline: 2px solid var(--menu-gold-bright); outline-offset: 1px; }
.fk-profile-calendar-icon, .fk-profile-graph-icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.fk-profile-calendar-summary { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fk-profile-calendar-panel { grid-row: 1; min-width: 0; max-width: 100%; height: 100%; overflow: auto; }
.fk-profile-calendar-panel[hidden] { display: none; }
.fk-profile-graph-card:has(.fk-profile-calendar-button[aria-expanded="true"]) .fk-profile-xp-graph { display: none; }

.fk-profile-main-grid {
  grid-template-columns: minmax(16rem, 1.15fr) minmax(14rem, 0.85fr);
  align-items: stretch;
}

.fk-profile-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: clamp(0.86rem, 1.08vw, 1.12rem);
  overflow: hidden;
  border: 1px solid rgba(124, 238, 228, 0.14);
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 16% 0, rgba(54, 215, 221, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)),
    rgba(0, 9, 16, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -18px 32px rgba(0, 0, 0, 0.14),
    0 20px 48px rgba(0, 0, 0, 0.22);
}

.fk-profile-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.92rem;
  margin-bottom: 0.72rem;
}

.fk-profile-card-head h3 {
  margin: 0.18rem 0 0;
  color: rgba(244, 252, 255, 0.96);
  font-family: "Georgia", "Cambria", serif;
  font-size: clamp(1.08rem, 1.24vw, 1.36rem);
  font-weight: 520;
  letter-spacing: 0;
  line-height: 1.08;
}

.fk-profile-card-head--split {
  align-items: center;
}

.fk-profile-hero-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.58rem;
  border-color: rgba(246, 207, 124, 0.28);
  background:
    radial-gradient(ellipse at 22% 16%, rgba(246, 207, 124, 0.14), transparent 36%),
    radial-gradient(ellipse at 72% 0, rgba(54, 215, 221, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.014)),
    rgba(0, 9, 16, 0.82);
}

.fk-profile-avatar-grid,
.fk-profile-rank-grid,
.fk-profile-stats-grid,
.fk-profile-mistake-list {
  min-height: 0;
}

.fk-profile-card:has(.fk-profile-avatar-grid),
.fk-profile-card:has(.fk-profile-rank-grid) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.fk-profile-card:has(.fk-profile-rank-grid) {
  grid-template-rows: auto minmax(6.4rem, 1fr) auto auto;
  row-gap: 0.52rem;
  overflow: hidden;
}

.fk-profile-card:has(.fk-profile-rank-grid) .fk-profile-card-head {
  margin-bottom: 0;
}

.fk-profile-hero-avatar {
  --rank-portrait-size: 150px;
  display: grid;
  place-items: center;
  width: var(--rank-portrait-size);
  aspect-ratio: 1;
  overflow: visible;
}

.rank-portrait-frame {
  --fk-rank-ambient: rgba(161, 195, 205, 0.13);
  position: relative;
  display: block;
  width: var(--rank-portrait-size, 100%);
  height: var(--rank-portrait-size, 100%);
  aspect-ratio: 1 / 1;
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rank-portrait-frame__fallback,
.rank-portrait-frame__avatar-clip {
  position: absolute;
  top: var(--fk-rank-opening-top);
  left: var(--fk-rank-opening-left);
  display: block;
  width: var(--fk-rank-opening-size);
  height: var(--fk-rank-opening-size);
  border-radius: 50%;
}

.rank-portrait-frame__fallback {
  z-index: 0;
  background:
    radial-gradient(circle at 54% 32%, rgba(124, 238, 228, 0.27), transparent 35%),
    linear-gradient(180deg, rgba(7, 30, 42, 0.98), rgba(0, 5, 10, 0.99));
  border: 0;
  box-shadow: none;
}

.rank-portrait-frame__avatar-clip {
  z-index: 10;
  overflow: hidden;
}

.rank-portrait-frame__avatar {
  position: absolute;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: 50% 50%;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}

.rank-portrait-frame__avatar--base {
  top: var(--fk-rank-avatar-offset-y);
  left: var(--fk-rank-avatar-offset-x);
  width: var(--fk-rank-avatar-scale);
  height: var(--fk-rank-avatar-scale);
}

.rank-portrait-frame--hero > .rank-portrait-frame__avatar--popout {
  z-index: 15;
  top: var(--fk-rank-popout-top);
  left: var(--fk-rank-popout-left);
  display: none;
  width: var(--fk-rank-popout-size);
  height: var(--fk-rank-popout-size);
  clip-path: inset(0 0 48% 0);
  pointer-events: none;
}

.rank-portrait-frame--hero > .rank-portrait-frame__avatar--breakout {
  z-index: 30;
}

.rank-portrait-frame__breakout-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.rank-portrait-frame--hero[data-state="ready"] > .rank-portrait-frame__avatar--popout {
  display: block;
}

.rank-portrait-frame__art,
.rank-portrait-frame__effect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rank-portrait-frame__art {
  z-index: 20;
  display: block;
  object-fit: contain;
  opacity: 0;
  transition: opacity 160ms ease;
}

.rank-portrait-frame[data-state="ready"] .rank-portrait-frame__art {
  opacity: 1;
}

.rank-portrait-frame[data-state="ready"] .rank-portrait-frame__fallback {
  display: none;
}

.rank-portrait-frame__numeral {
  position: absolute;
  z-index: 40;
  top: var(--fk-rank-medallion-top);
  left: var(--fk-rank-medallion-left);
  min-width: 12%;
  transform: translate(-50%, -50%);
  color: #f9e1ab;
  font-family: Georgia, Cambria, serif;
  font-size: clamp(0.66rem, 0.83vw, 0.86rem);
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0.045em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
  opacity: 0;
}

.rank-portrait-frame__effect {
  z-index: 50;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

.rank-portrait-frame[data-state="ready"] .rank-portrait-frame__numeral,
.rank-portrait-frame[data-state="ready"] .rank-portrait-frame__effect {
  opacity: 1;
}

.rank-portrait-frame[data-rank-frame="Snapper"],
.rank-portrait-frame[data-rank-frame="Tuna"] {
  --fk-rank-ambient: rgba(186, 111, 68, 0.13);
}

.rank-portrait-frame[data-rank-frame="Barracuda"],
.rank-portrait-frame[data-rank-frame="Swordfish"] {
  --fk-rank-ambient: rgba(80, 171, 196, 0.12);
}

.rank-portrait-frame[data-rank-frame="Hammerhead"],
.rank-portrait-frame[data-rank-frame="Great White"] {
  --fk-rank-ambient: rgba(231, 213, 171, 0.14);
}

.rank-portrait-frame[data-rank-frame="Kraken"] {
  --fk-rank-ambient: rgba(139, 87, 169, 0.13);
}

.rank-portrait-frame[data-state="loading"] .rank-portrait-frame__art,
.rank-portrait-frame[data-state="loading"] .rank-portrait-frame__numeral,
.rank-portrait-frame[data-state="loading"] .rank-portrait-frame__effect,
.rank-portrait-frame[data-state="error"] .rank-portrait-frame__art,
.rank-portrait-frame[data-state="error"] .rank-portrait-frame__numeral,
.rank-portrait-frame[data-state="error"] .rank-portrait-frame__effect {
  display: none;
}

.fk-profile-hero-avatar.rank-frame-ready,
.fk-profile-hero-avatar:has(.rank-portrait-frame[data-state="ready"]) {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.fk-profile-hero-avatar.rank-frame-ready::before,
.fk-profile-hero-avatar.rank-frame-ready::after,
.fk-profile-hero-avatar:has(.rank-portrait-frame[data-state="ready"])::before,
.fk-profile-hero-avatar:has(.rank-portrait-frame[data-state="ready"])::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .rank-portrait-frame__art {
    transition: none;
  }
}

.fk-profile-hero-copy {
  min-width: 0;
}

.fk-profile-name {
  display: block;
  color: rgba(176, 214, 228, 0.78);
  font-size: 0.74rem;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.fk-profile-equipped-title {
  display: block;
  margin-top: 0.22rem;
  color: rgba(246, 207, 124, 0.92);
  font-size: 0.82rem;
  font-weight: 760;
}

.fk-profile-hero-copy strong {
  display: block;
  margin-top: 0.28rem;
  color: #f5fbff;
  font-size: clamp(1.72rem, 2.18vw, 2.35rem);
  font-weight: 760;
  line-height: 1;
}

.fk-profile-rank,
.fk-profile-next {
  display: block;
  margin-top: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-profile-rank {
  color: rgba(255, 226, 177, 0.96);
  font-size: clamp(1rem, 1.12vw, 1.18rem);
  font-weight: 740;
}

.fk-profile-next {
  color: rgba(176, 214, 228, 0.68);
  font-size: 0.76rem;
  font-weight: 680;
}

.fk-profile-xp-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  margin-top: 0;
  color: rgba(223, 236, 241, 0.8);
  font-size: 0.8rem;
  font-weight: 740;
}

.fk-profile-xp-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-profile-xp-track {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0;
}

.fk-profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.52rem;
}

/* Item 7 (2026-08-10 work order 3): the compact trigger row that replaces both the inline avatar
   grid and the inline card-back grid on the Profile page -- the full picker for each now lives
   only in its own overlay (the pre-existing #avatar-picker-modal, wired up for the first time
   this session, and the pre-existing #card-backs-modal). Shared between both so they read as one
   consistent affordance. */
.fk-profile-picker-trigger {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 44px;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(124, 238, 228, 0.16);
  border-radius: 10px;
  cursor: pointer;
  background: rgba(0, 8, 15, 0.4);
  transition: border-color 160ms ease, background 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .fk-profile-picker-trigger:hover {
    border-color: rgba(124, 238, 228, 0.36);
    background: rgba(0, 8, 15, 0.6);
  }
}

.fk-profile-picker-trigger:focus-visible {
  outline: 2px solid rgba(124, 238, 228, 0.72);
  outline-offset: 2px;
}

.fk-profile-picker-trigger-portrait {
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
}

img.fk-profile-picker-trigger-portrait {
  border-radius: 6px;
  object-fit: cover;
  background: rgba(0, 8, 15, 0.6);
  border: 1px solid rgba(240, 187, 89, 0.28);
}

.fk-profile-picker-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(239, 247, 250, 0.92);
  font-size: 0.9rem;
  font-weight: 650;
}

.fk-profile-picker-trigger-chevron {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  color: rgba(176, 214, 228, 0.62);
}

.fk-profile-picker-trigger-chevron svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fk-profile-card-backs-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  cursor: pointer;
}

.fk-profile-card-backs-card:focus-visible {
  outline: 2px solid rgba(124, 238, 228, 0.72);
  outline-offset: 3px;
}

/* Item 7 (2026-08-10 work order 3): was clamp(18rem, 35vh, 23rem), sized for the card's former
   full inline grid. The compact trigger row that replaced it needs a fraction of that height at
   any viewport; confirmed live this doesn't leave the card looking too short next to its
   .fk-profile-main-grid sibling next to it, since that sibling (Rating Over Time / Progress
   Current) sizes independently off its own graph content, not off this card. */
.fk-profile-main-grid .fk-profile-card-backs-card {
  height: auto;
}

.fk-profile-card-back-status {
  color: rgba(214, 236, 242, 0.72);
  font-size: 0.72rem;
  font-weight: 720;
}

.fk-profile-card-back-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 10.25rem;
  align-content: start;
  gap: 0.64rem;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 0.04rem 0.26rem 0.08rem 0.02rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(124, 238, 228, 0.36) transparent;
}

.fk-card-back-option {
  position: relative;
  display: grid;
  grid-template-rows: minmax(4.6rem, 1fr) auto auto 1.55rem;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 0;
  height: 100%;
  padding: 0.5rem;
  border: 1px solid rgba(124, 238, 228, 0.14);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(10, 35, 46, 0.58), rgba(1, 13, 21, 0.82));
}

.fk-card-back-option.is-equipped {
  border-color: rgba(246, 207, 124, 0.68);
  background: linear-gradient(180deg, rgba(70, 48, 21, 0.3), rgba(1, 13, 21, 0.86));
  box-shadow: inset 0 0 0 1px rgba(246, 207, 124, 0.12), 0 0 16px rgba(240, 187, 89, 0.1);
}

.fk-card-back-option.is-newly-unlocked {
  border-color: rgba(124, 238, 228, 0.58);
  box-shadow: inset 0 0 0 1px rgba(124, 238, 228, 0.1);
}

.fk-card-back-option.is-locked {
  border-color: rgba(124, 238, 228, 0.09);
  background: linear-gradient(180deg, rgba(7, 25, 34, 0.5), rgba(1, 10, 17, 0.82));
}

.fk-card-back-preview-shell {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(3.65rem, 100%);
  aspect-ratio: 5 / 7;
  min-height: 0;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(8, 31, 45, 0.78), rgba(1, 8, 13, 0.94));
}

.fk-card-back-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.is-locked .fk-card-back-preview {
  opacity: 0.58;
  filter: grayscale(0.55) brightness(0.76);
}

.fk-card-back-state {
  position: absolute;
  right: 0.24rem;
  bottom: 0.24rem;
  padding: 0.16rem 0.32rem;
  border-radius: 999px;
  color: #f8e7bd;
  background: rgba(0, 7, 12, 0.82);
  font-size: 0.52rem;
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-card-back-new {
  position: absolute;
  top: 0.22rem;
  left: 0.22rem;
  padding: 0.14rem 0.28rem;
  border: 1px solid rgba(124, 238, 228, 0.46);
  border-radius: 999px;
  color: rgba(202, 255, 247, 0.96);
  background: rgba(10, 74, 79, 0.88);
  font-size: 0.48rem;
  font-weight: 820;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fk-card-back-copy {
  display: grid;
  align-content: center;
  gap: 0.1rem;
  min-width: 0;
  text-align: center;
}

.fk-card-back-copy strong {
  overflow: hidden;
  color: rgba(245, 250, 251, 0.96);
  font-family: Georgia, serif;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-card-back-copy span,
.fk-card-back-copy small,
.fk-card-back-action-label {
  color: rgba(211, 232, 238, 0.68);
  font-size: 0.56rem;
  line-height: 1.2;
}

.fk-card-back-copy small {
  color: rgba(246, 207, 124, 0.82);
}

.fk-card-back-progress {
  width: 100%;
  height: 0.2rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.fk-card-back-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(54, 215, 221, 0.82), rgba(246, 207, 124, 0.9));
}

.fk-card-back-option button {
  width: 100%;
  min-height: 1.55rem;
  padding: 0.2rem 0.42rem;
  border: 1px solid rgba(246, 207, 124, 0.52);
  border-radius: 6px;
  color: rgba(255, 231, 185, 0.96);
  background: rgba(87, 57, 24, 0.3);
  font-size: 0.58rem;
  font-weight: 820;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .fk-card-back-option button:hover {
  outline: none;
  border-color: rgba(124, 238, 228, 0.72);
  box-shadow: 0 0 0 3px rgba(54, 215, 221, 0.12);
}
}

.fk-card-back-option button:focus-visible {
  outline: none;
  border-color: rgba(124, 238, 228, 0.72);
  box-shadow: 0 0 0 3px rgba(54, 215, 221, 0.12);
}

.fk-card-back-option button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.fk-card-back-action-label {
  display: grid;
  place-items: center;
  min-height: 1.55rem;
  text-align: center;
}

@media (max-width: 1600px) {
  .fk-profile-card-back-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fk-profile-avatar-option {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0.52rem 0.42rem;
  border: 1px solid rgba(124, 238, 228, 0.12);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    rgba(1, 13, 21, 0.7);
  color: rgba(221, 242, 246, 0.78);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}@media (hover: hover) and (pointer: fine) {
  .fk-profile-avatar-option:hover {
  transform: translateY(-1px);
  outline: none;
  border-color: rgba(124, 238, 228, 0.34);
  background:
    linear-gradient(180deg, rgba(124, 238, 228, 0.08), rgba(255, 255, 255, 0.012)),
    rgba(1, 13, 21, 0.82);
}
}

.fk-profile-avatar-option:focus-visible {
  transform: translateY(-1px);
  outline: none;
  border-color: rgba(124, 238, 228, 0.34);
  background:
    linear-gradient(180deg, rgba(124, 238, 228, 0.08), rgba(255, 255, 255, 0.012)),
    rgba(1, 13, 21, 0.82);
}

.fk-profile-avatar-option.selected {
  border-color: rgba(246, 207, 124, 0.62);
  color: rgba(255, 226, 177, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(124, 238, 228, 0.1),
    0 0 20px rgba(240, 187, 89, 0.13);
}

.fk-profile-avatar-option .fk-character-portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.35rem;
  height: 3.35rem;
  overflow: hidden;
  border: 1px solid rgba(124, 238, 228, 0.18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 55% 32%, rgba(124, 238, 228, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(6, 25, 35, 0.96), rgba(0, 6, 12, 0.98));
}

.fk-profile-avatar-option .fk-character-portrait-image {
  transform: translateY(0);
}

.fk-profile-avatar-option.selected .fk-character-portrait {
  border-color: rgba(246, 207, 124, 0.68);
  box-shadow: 0 0 0 2px rgba(246, 207, 124, 0.18);
}

.fk-profile-rank-grid,
.fk-profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
}

.fk-profile-rank-grid {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-content: stretch;
  gap: 0.52rem;
}

.fk-profile-rank-grid > div,
.fk-profile-stat-item {
  min-width: 0;
  padding: 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.fk-profile-rank-grid > div {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  min-height: 0;
  padding: 0.48rem 0.6rem;
}

.fk-profile-rank-grid span,
.fk-profile-stat-item span,
.fk-profile-single-xp span {
  display: block;
  color: rgba(154, 184, 198, 0.68);
  font-size: 0.58rem;
  font-weight: 760;
  letter-spacing: 0.095em;
  line-height: 1;
  text-transform: uppercase;
}

.fk-profile-rank-grid span {
  line-height: 1.2;
}

.fk-profile-rank-grid strong,
.fk-profile-stat-item strong,
.fk-profile-single-xp strong {
  display: block;
  min-width: 0;
  margin-top: 0.32rem;
  overflow: hidden;
  color: rgba(245, 251, 253, 0.96);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-profile-rank-grid strong {
  overflow: visible;
  font-size: clamp(0.82rem, 0.72vw, 0.96rem);
  line-height: 1.2;
  margin-top: 0.26rem;
  margin-bottom: 0;
  padding-bottom: 0;
}

#profile-rank-progress-track {
  margin-top: 0;
}

.fk-profile-stat-item small {
  display: block;
  margin-top: 0.32rem;
  color: rgba(176, 214, 228, 0.62);
  font-size: 0.68rem;
  line-height: 1.38;
  padding-bottom: 0.08rem;
}

.fk-profile-rank-ladder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(1.4rem, 2rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.38rem;
  min-height: 2.55rem;
  margin-top: 0;
}

.fk-profile-rank-step {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.16rem;
  min-width: 0;
  min-height: 2.45rem;
  padding: 0.34rem 0.46rem;
  border: 1px solid rgba(124, 238, 228, 0.1);
  border-radius: 10px;
  background: rgba(0, 7, 13, 0.38);
}

.fk-profile-rank-step.current {
  border-color: rgba(246, 207, 124, 0.5);
  background:
    linear-gradient(180deg, rgba(240, 187, 89, 0.12), rgba(255, 255, 255, 0.012)),
    rgba(0, 7, 13, 0.46);
}

.fk-profile-rank-connector {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(124, 238, 228, 0.12), rgba(246, 207, 124, 0.5), rgba(124, 238, 228, 0.12));
  box-shadow: 0 0 12px rgba(246, 207, 124, 0.12);
}

.fk-profile-rank-step small,
.fk-profile-rank-step strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-profile-rank-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.fk-profile-rank-card .fk-profile-card-head {
  margin-bottom: 0;
}

.fk-profile-rank-review {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: 0.72rem;
  min-height: 0;
  padding: 0.2rem 0.12rem 0;
}

.fk-profile-rank-review-labels {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.fk-profile-rank-review-endpoint {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.fk-profile-rank-review-endpoint.next {
  justify-items: end;
  text-align: right;
}

.fk-profile-rank-review-endpoint small {
  color: rgba(176, 214, 228, 0.62);
  font-size: 0.58rem;
  font-weight: 820;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.fk-profile-rank-review-endpoint strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 226, 177, 0.96);
  font-family: Georgia, Cambria, serif;
  font-size: clamp(1rem, 1.08vw, 1.24rem);
  font-weight: 720;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-profile-rank-review-endpoint.next strong {
  color: rgba(171, 235, 235, 0.9);
}

.fk-profile-rank-review #profile-rank-progress-track {
  position: relative;
  height: 0.5rem;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(176, 240, 255, 0.17);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.42);
}

.fk-profile-rank-review #profile-rank-progress-fill {
  background: linear-gradient(90deg, var(--teal), var(--teal-soft));
  box-shadow: 0 0 16px rgba(124, 238, 228, 0.38);
  transition: width 700ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.fk-profile-rank-review-meta {
  margin: 0;
  color: rgba(176, 214, 228, 0.66);
  font-size: 0.68rem;
  line-height: 1.2;
  text-align: center;
}

.fk-profile-rank-review-meta strong {
  color: rgba(246, 207, 124, 0.94);
  font-size: 0.78rem;
}

.fk-profile-rank-step small {
  color: rgba(176, 214, 228, 0.66);
  font-size: 0.54rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.fk-profile-rank-step strong {
  overflow: visible;
  color: rgba(255, 226, 177, 0.94);
  font-size: clamp(0.72rem, 0.7vw, 0.88rem);
  line-height: 1.18;
  margin-bottom: -0.1em;
  padding-bottom: 0.1em;
}

.fk-profile-graph-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
}

.fk-profile-graph-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.42rem;
}

.fk-profile-timeframes {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(2.6rem, auto));
  gap: 0.28rem;
  padding: 0.22rem;
  border: 1px solid rgba(124, 238, 228, 0.12);
  border-radius: 10px;
  background: rgba(0, 7, 13, 0.44);
}

.fk-profile-metric-toggle {
  grid-template-columns: repeat(2, minmax(2.75rem, auto));
}

.fk-stats-screen {
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  padding: clamp(0.9rem, 1.65vw, 1.7rem) clamp(1.25rem, 3vw, 3.4rem);
  overflow-y: auto;
}

.fk-stats-topbar {
  align-items: end;
  margin-bottom: clamp(0.8rem, 1.25vw, 1.2rem);
}

.fk-stats-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.2rem;
}

.fk-stats-control-group {
  display: flex;
  align-items: center;
  gap: 0.56rem;
}

.fk-stats-control-group > span {
  color: rgba(176, 214, 228, 0.7);
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fk-stats-phase-toggle {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(4.25rem, auto));
  padding: 0.18rem;
  border: 1px solid rgba(124, 238, 228, 0.13);
  border-radius: 9px;
  background: rgba(0, 8, 15, 0.5);
}

.fk-stats-phase-toggle button,
.fk-stats-control-group select {
  min-height: 2.25rem;
  border: 1px solid transparent;
  border-radius: 7px;
  color: rgba(206, 225, 234, 0.82);
  background: transparent;
  font-size: 0.74rem;
  font-weight: 800;
}

.fk-stats-phase-toggle button {
  padding: 0.34rem 0.74rem;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .fk-stats-phase-toggle button:hover {
  outline: none;
  border-color: rgba(246, 207, 124, 0.46);
  color: rgba(255, 249, 238, 0.98);
  background: linear-gradient(180deg, rgba(240, 187, 89, 0.12), rgba(255, 255, 255, 0.016));
  box-shadow: inset 0 0 16px rgba(240, 187, 89, 0.06);
}
}

.fk-stats-phase-toggle button:focus-visible,
.fk-stats-phase-toggle button.active {
  outline: none;
  border-color: rgba(246, 207, 124, 0.46);
  color: rgba(255, 249, 238, 0.98);
  background: linear-gradient(180deg, rgba(240, 187, 89, 0.12), rgba(255, 255, 255, 0.016));
  box-shadow: inset 0 0 16px rgba(240, 187, 89, 0.06);
}

.fk-stats-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.7fr) minmax(0, 1.34fr);
  grid-template-rows: minmax(0, 1fr) clamp(10rem, 18vh, 12rem);
  gap: clamp(0.9rem, 1.45vw, 1.25rem);
  height: 100%;
  min-height: 0;
}

.fk-league-card {
  width: 100%;
  margin-top: 1.15rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border-color: rgba(124, 238, 228, 0.18);
  background: radial-gradient(circle at 90% 0, rgba(240, 187, 89, 0.1), transparent 38%), rgba(0, 9, 16, 0.82);
}

.fk-practice-insight-card.fk-league-card {
  display: block;
  min-height: 12rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.fk-practice-insight-card.fk-league-card > summary {
  display: block;
  min-height: 12rem;
  padding: 0.85rem 0.95rem 0.9rem;
  cursor: pointer;
  list-style: none;
}

.fk-practice-insight-card.fk-league-card > summary::-webkit-details-marker { display: none; }
.fk-practice-insight-card.fk-league-card > summary:focus-visible { outline: 2px solid var(--menu-gold-bright); outline-offset: -3px; }
.fk-practice-insight-card.fk-league-card[open] { grid-column: 1 / -1; }
.fk-league-expanded { padding: 0 0.9rem 0.9rem; border-top: 1px solid rgba(124, 238, 228, 0.1); }

body.league-view-expanded .home-menu.fk-dashboard { grid-template-columns: minmax(0, 1fr); }
body.league-view-expanded .fk-menu-rail { display: none; }
body.league-view-expanded #practice-screen { grid-column: 1; padding: clamp(0.65rem, 1.2vw, 1.1rem); overflow-x: hidden; }
#practice-screen.league-expanded .fk-practice-layout {
  width: min(100%, 92rem);
  height: auto;
  min-height: calc(100dvh - clamp(1.6rem, 2.8vw, 2.7rem));
  margin: 0 auto;
}
#practice-screen.league-expanded .fk-practice-layout > :not(.fk-practice-insight-grid),
#practice-screen.league-expanded .fk-practice-insight-grid > :not(.fk-league-card) { display: none; }
#practice-screen.league-expanded .fk-practice-insight-grid { display: block; width: 100%; }
#practice-screen.league-expanded .fk-practice-insight-card.fk-league-card {
  width: 100%;
  min-height: calc(100dvh - clamp(1.6rem, 2.8vw, 2.7rem));
  border-color: rgba(240, 187, 89, 0.42);
  background:
    radial-gradient(ellipse at 68% -16%, rgba(25, 151, 187, 0.22), transparent 46%),
    radial-gradient(circle at 92% 0, rgba(240, 187, 89, 0.1), transparent 30%),
    rgba(0, 9, 16, 0.96);
}
#practice-screen.league-expanded .fk-practice-insight-card.fk-league-card > summary {
  min-height: 0;
  padding: clamp(0.8rem, 1.5vw, 1.15rem) clamp(0.85rem, 2vw, 1.65rem);
  border-bottom: 1px solid rgba(124, 238, 228, 0.11);
}
#practice-screen.league-expanded .fk-league-compact,
#practice-screen.league-expanded .fk-league-expand-hint { display: none; }
#practice-screen.league-expanded .fk-league-head {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) 6.25rem minmax(9rem, auto) minmax(7rem, auto);
  width: 100%;
}
#practice-screen.league-expanded .fk-league-title { font-size: clamp(1.6rem, 2.7vw, 2.35rem); }
#practice-screen.league-expanded .fk-league-meta { min-width: 7rem; padding-left: 1rem; border-left: 1px solid rgba(124, 238, 228, 0.12); }
#practice-screen.league-expanded #league-player-rank { display: none; }
#practice-screen.league-expanded .fk-league-time-label,
#practice-screen.league-expanded .fk-league-division-badge { display: block; }
#practice-screen.league-expanded .fk-league-reward-meta { display: grid; }
#practice-screen.league-expanded .fk-league-division-badge { width: 6.25rem; height: 6.25rem; }
#practice-screen.league-expanded .fk-league-meta > span { margin-top: 0.18rem; font-size: 0.86rem; font-weight: 760; }
#practice-screen.league-expanded .fk-league-expanded { padding: 0.62rem clamp(0.7rem, 1.8vw, 1.4rem) 1rem; }
.fk-league-expanded-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.42rem; }
.fk-league-expanded-head > div { display: grid; gap: 0.3rem; }
.fk-league-expanded-head strong { color: rgba(204, 220, 226, 0.7); font-size: 0.76rem; }
.fk-league-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.52rem; }
.fk-league-toolbar button {
  min-height: 2.35rem;
  padding: 0.42rem 0.78rem;
  border: 1px solid rgba(246, 207, 124, 0.58);
  border-radius: 7px;
  color: rgba(255, 226, 157, 0.96);
  background: rgba(240, 187, 89, 0.08);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .fk-league-toolbar button:hover { outline: 2px solid rgba(246, 207, 124, 0.78); outline-offset: 2px; border-color: rgba(246, 207, 124, 0.9); background: rgba(240, 187, 89, 0.16); }
}

.fk-league-toolbar button:focus-visible { outline: 2px solid rgba(246, 207, 124, 0.78); outline-offset: 2px; border-color: rgba(246, 207, 124, 0.9); background: rgba(240, 187, 89, 0.16); }

.fk-league-head,
.fk-league-meta,
.fk-league-zones,
.fk-league-standings li {
  display: flex;
  align-items: center;
}

.fk-league-head { justify-content: space-between; gap: 1rem; }
.fk-league-head > span:first-child { display: grid; align-self: start; gap: 0.26rem; }
.fk-league-title { color: rgba(246, 242, 235, 0.98); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.55rem; font-weight: 760; line-height: 1; }
.fk-league-division-badge {
  display: none;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  clip-path: polygon(50% 4%, 66% 11%, 79% 18%, 79% 30%, 81% 34%, 80% 61%, 76% 74%, 67% 85%, 50% 95%, 33% 85%, 24% 74%, 20% 61%, 19% 34%, 21% 30%, 21% 18%, 34% 11%);
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.46));
}
.fk-league-reward-meta { display: none; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; justify-content: start; min-width: 9rem; column-gap: 0.42rem; }
.fk-league-reward-meta small,
.fk-league-time-label { color: rgba(176, 214, 228, 0.6); font-size: 0.58rem; font-weight: 820; letter-spacing: 0.1em; text-transform: uppercase; }
.fk-league-reward-meta > small { grid-column: 1 / -1; }
.fk-league-reward-meta strong { display: block; margin: 0; color: rgba(255, 248, 233, 0.98); font-size: 1.42rem; line-height: 2rem; }
.fk-league-reward-meta > span { display: flex; align-items: center; gap: 0.42rem; max-width: 14rem; margin: 0; color: rgba(176, 214, 228, 0.64); line-height: 1; }
.fk-league-reward-snowflake { color: rgba(151, 224, 246, 0.96); font-size: 1.42rem; line-height: 1; }
.fk-league-reward-badge { width: 2rem; height: 2rem; object-fit: cover; clip-path: polygon(50% 4%, 66% 11%, 79% 18%, 79% 30%, 81% 34%, 80% 61%, 76% 74%, 67% 85%, 50% 95%, 33% 85%, 24% 74%, 20% 61%, 19% 34%, 21% 30%, 21% 18%, 34% 11%); }
.fk-league-time-label { display: none; }
.fk-league-meta { align-items: flex-end; flex-direction: column; }
.fk-league-meta strong { color: rgba(246, 207, 124, 0.98); font-size: 1.25rem; }
.fk-league-meta span { color: rgba(176, 214, 228, 0.68); font-size: 0.7rem; }
.fk-league-expand-hint { margin-top: 0.18rem; color: rgba(246, 207, 124, 0.82); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.fk-league-zones { gap: 0.4rem; margin: 0; }
.fk-league-zones span { display: inline-flex; align-items: center; gap: 0.38rem; min-height: 1.9rem; padding: 0.25rem 0.58rem; border: 1px solid rgba(124, 238, 228, 0.08); border-radius: 999px; color: rgba(190, 211, 221, 0.75); background: rgba(255,255,255,0.025); font-size: 0.6rem; font-weight: 800; text-transform: uppercase; }
.fk-league-zones span::before { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); content: ""; }
.fk-league-zones b { color: rgba(226, 237, 241, 0.78); font-weight: 820; }
.fk-league-zones .is-promotion { color: rgba(135, 235, 172, 0.9); background: rgba(65, 181, 115, 0.1); }
.fk-league-zones .is-safe { color: rgba(91, 194, 231, 0.9); background: rgba(45, 151, 193, 0.08); }
.fk-league-zones .is-relegation { color: rgba(255, 167, 153, 0.88); background: rgba(213, 81, 70, 0.09); }
.fk-league-standings { display: grid; gap: 0.28rem; margin: 0; padding: 0; list-style: none; }
.fk-league-standings li { min-height: 2.45rem; padding: 0.35rem 0.65rem; border: 1px solid rgba(124, 238, 228, 0.08); border-radius: 7px; background: rgba(255,255,255,0.02); }
.fk-league-standings li.is-player { border-color: rgba(246, 207, 124, 0.45); background: rgba(240, 187, 89, 0.09); box-shadow: inset 3px 0 rgba(246, 207, 124, 0.72); }
.fk-league-standings li > strong { width: 2.2rem; color: rgba(246, 207, 124, 0.88); }
.fk-league-standings li > span { display: flex; min-width: 0; align-items: center; gap: 0.55rem; flex: 1; color: rgba(226, 237, 241, 0.9); }
.fk-league-standings small { padding: 0.14rem 0.35rem; border-radius: 999px; color: rgba(140, 195, 210, 0.72); background: rgba(77, 154, 175, 0.09); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.fk-league-standings em { color: rgba(176, 214, 228, 0.72); font-size: 0.72rem; font-style: normal; font-weight: 800; }
.fk-league-reward { margin-top: 0.7rem; color: rgba(204, 220, 226, 0.72); font-size: 0.72rem; }
.fk-league-standings .is-loading { color: rgba(176, 214, 228, 0.68); }
#league-full-standings { gap: 0.12rem; }
#league-full-standings li {
  --league-zone-color: rgba(91, 194, 231, 0.78);
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) max-content;
  min-height: clamp(1.72rem, 3.2vh, 2.05rem);
  padding: 0.2rem 0.7rem 0.2rem 0.78rem;
  overflow: hidden;
  border-radius: 6px;
}
#league-full-standings li::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--league-zone-color); content: ""; }
#league-full-standings li.is-promotion-zone { --league-zone-color: rgba(61, 218, 125, 0.92); }
#league-full-standings li.is-safe-zone { --league-zone-color: rgba(67, 177, 223, 0.9); }
#league-full-standings li.is-relegation-zone { --league-zone-color: rgba(230, 80, 72, 0.92); background: rgba(127, 37, 34, 0.055); }
#league-full-standings li.is-player { border-color: rgba(246, 207, 124, 0.82); background: linear-gradient(90deg, rgba(240, 187, 89, 0.13), rgba(240, 187, 89, 0.035)); box-shadow: inset 0 0 0 1px rgba(246, 207, 124, 0.18), 0 0 12px rgba(240, 187, 89, 0.08); }
#league-full-standings li > strong { width: auto; text-align: center; font-size: 0.74rem; }
#league-full-standings li > span { overflow: hidden; font-size: 0.78rem; white-space: nowrap; }
#league-full-standings li > span small { display: none; }
#league-full-standings li > em { align-self: center; padding-left: 0.75rem; font-size: 0.72rem; }
.fk-league-compact { display: grid; margin-top: 0.75rem; }
.fk-league-compact li { min-height: 2rem; padding: 0.28rem 0.55rem; }
.fk-league-compact li > span { font-size: 0.76rem; }
.fk-league-compact li > em { font-size: 0.65rem; }
.fk-league-compact small { font-size: 0.5rem; }

@media (max-width: 680px) {
  #practice-screen.league-expanded .fk-league-head { grid-template-columns: minmax(0, 1fr) 4.4rem minmax(6.8rem, auto); gap: 0.55rem; }
  #practice-screen.league-expanded .fk-league-title { font-size: 1.45rem; }
  #practice-screen.league-expanded .fk-league-division-badge { width: 4.4rem; height: 4.4rem; }
  #practice-screen.league-expanded .fk-league-reward-meta { min-width: 0; }
  #practice-screen.league-expanded .fk-league-reward-meta > span { display: flex; gap: 0.22rem; }
  #practice-screen.league-expanded .fk-league-reward-meta strong { font-size: 1.25rem; }
  #practice-screen.league-expanded .fk-league-reward-snowflake { font-size: 1.25rem; }
  #practice-screen.league-expanded .fk-league-reward-badge { width: 1.8rem; height: 1.8rem; }
  #practice-screen.league-expanded .fk-league-meta { grid-column: 1 / -1; display: flex; align-items: center; flex-direction: row; gap: 0.4rem; min-width: 0; padding: 0.42rem 0 0; border: 0; border-top: 1px solid rgba(124, 238, 228, 0.1); }
  #practice-screen.league-expanded .fk-league-meta > span { margin: 0; }
  .fk-league-toolbar { align-items: stretch; flex-direction: column; gap: 0.45rem; }
  .fk-league-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; }
  .fk-league-zones span { justify-content: center; gap: 0.25rem; min-width: 0; padding-inline: 0.2rem; font-size: 0.5rem; }
  .fk-league-zones span::before { width: 0.36rem; height: 0.36rem; }
  .fk-league-toolbar button { width: 100%; min-height: 2rem; }
  #league-full-standings li { grid-template-columns: 1.75rem minmax(0, 1fr) max-content; padding-inline: 0.48rem; }
  #league-full-standings li > span { gap: 0.3rem; font-size: 0.7rem; }
  #league-full-standings small { padding-inline: 0.26rem; font-size: 0.45rem; }
  #league-full-standings li > em { padding-left: 0.35rem; font-size: 0.65rem; }
}

.fk-stats-rating-card,
.fk-stats-graph-card,
.fk-stats-metric-card {
  border-color: rgba(124, 238, 228, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(54, 215, 221, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.01)),
    rgba(0, 9, 16, 0.82);
}

.fk-stats-rating-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 24rem;
  padding: clamp(1.25rem, 2.45vw, 2rem);
}

.fk-stats-rating-card > strong {
  display: block;
  margin-top: 0.72rem;
  color: rgba(246, 242, 235, 0.98);
  font-family: "Inter", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(5.2rem, 8.25vw, 7.65rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 0.86;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.fk-stats-preflop-breakdown {
  width: 100%;
  margin-top: 0.62rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(124, 238, 228, 0.14);
}

.fk-stats-preflop-breakdown[hidden] {
  display: none;
}

.fk-stats-preflop-breakdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: rgba(124, 238, 228, 0.88);
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.fk-stats-preflop-breakdown summary::-webkit-details-marker {
  display: none;
}

.fk-stats-preflop-breakdown summary::after {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  margin-right: 0.18rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 140ms ease;
}

.fk-stats-preflop-breakdown[open] summary::after {
  transform: translateY(0.12rem) rotate(225deg);
}

.fk-stats-preflop-breakdown > div {
  margin-top: 0.28rem;
}

.fk-stats-preflop-breakdown table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.fk-stats-preflop-breakdown th,
.fk-stats-preflop-breakdown td {
  padding: 0.2rem 0.28rem;
  border-bottom: 1px solid rgba(124, 238, 228, 0.08);
  text-align: left;
}

.fk-stats-preflop-breakdown th {
  width: 24%;
  color: rgba(218, 235, 237, 0.58);
  font-size: 0.54rem;
  font-weight: 700;
}

.fk-stats-preflop-breakdown td strong,
.fk-stats-preflop-breakdown td small {
  display: inline;
}

.fk-stats-preflop-breakdown td small {
  margin-left: 0.3rem;
  color: rgba(218, 235, 237, 0.58);
  font-size: 0.5rem;
}

.fk-stats-preflop-breakdown td strong {
  color: #fbfbf4;
  font-size: 0.72rem;
}

.fk-stats-stability-row em {
  display: inline-grid;
  place-items: center;
  width: 1.02rem;
  height: 1.02rem;
  border: 1px solid rgba(176, 214, 228, 0.4);
  border-radius: 50%;
  color: rgba(176, 214, 228, 0.76);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 800;
}

.fk-stats-rating-divider {
  height: 1px;
  margin: 1.05rem 0 0.2rem;
  background: rgba(124, 238, 228, 0.12);
}

.fk-stats-change-row {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  margin-top: 0.9rem;
  color: rgba(102, 221, 123, 0.98);
  font-size: 1.58rem;
  font-weight: 760;
  line-height: 1;
}

.fk-stats-change-row strong {
  font-size: inherit;
  font-weight: 720;
}

.fk-stats-change-row.is-negative {
  color: rgba(242, 100, 82, 0.96);
}

.fk-stats-change-row span {
  color: rgba(176, 214, 228, 0.74);
  font-size: 0.9rem;
  font-weight: 650;
}

.fk-stats-change-arrow {
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  margin-left: 0.18rem;
  filter: drop-shadow(0 0 5px rgba(102, 221, 123, 0.3));
}

.fk-stats-change-arrow.is-up {
  transform: translateY(0.1rem) rotate(45deg);
  border-top: 2px solid rgba(102, 221, 123, 0.98);
  border-left: 2px solid rgba(102, 221, 123, 0.98);
}

.fk-stats-change-arrow.is-down {
  transform: translateY(-0.08rem) rotate(45deg);
  border-right: 2px solid rgba(242, 100, 82, 0.96);
  border-bottom: 2px solid rgba(242, 100, 82, 0.96);
  filter: drop-shadow(0 0 5px rgba(242, 100, 82, 0.24));
}

.fk-stats-stability-row {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.35rem;
  color: rgba(206, 225, 234, 0.86);
  font-size: 0.84rem;
}

.fk-stats-stability-row div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.14rem;
  min-width: 0;
}

.fk-stats-stability-row strong {
  color: rgba(238, 248, 252, 0.92);
  font-size: 0.84rem;
}

/* Owner-approved copy (work order 4, item 6): "Stability" alone, on a near-empty bar, read as
   broken with no explanation -- this names what it actually means (rating-confidence progress
   toward the 300-decision milestone) instead of leaving the number to speak for itself. */
.fk-stats-stability-row small {
  overflow: hidden;
  color: rgba(176, 214, 228, 0.6);
  font-size: 0.66rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-stats-stability-track {
  height: 0.28rem;
  margin-top: 0.68rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(124, 238, 228, 0.12);
}

.fk-stats-stability-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 226, 177, 0.98), rgba(240, 187, 89, 0.8));
  box-shadow: 0 0 12px rgba(240, 187, 89, 0.3);
}

.fk-stats-family-elos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(124, 238, 228, 0.12);
  transform: translateY(clamp(1.5rem, 3vh, 2.25rem));
}

.fk-stats-family-elos[hidden] {
  display: none;
}

.fk-stats-family-elos > div:last-child {
  text-align: right;
}

.fk-stats-family-elos span {
  display: block;
  color: rgba(176, 214, 228, 0.68);
  font-size: 0.8rem;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fk-stats-family-elos strong {
  display: block;
  margin-top: 0.38rem;
  color: rgba(246, 242, 235, 0.94);
  font-family: "Inter", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.6rem, 2.35vw, 2rem);
  font-weight: 760;
}

.fk-stats-mastery-block {
  margin-top: 0.62rem;
}

.fk-stats-mastery-block[hidden] {
  display: none;
}

.fk-stats-mastery-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(176, 214, 228, 0.76);
  font-size: 0.84rem;
}

.fk-stats-mastery-line strong {
  color: rgba(246, 207, 124, 0.96);
  font-size: 0.84rem;
}

.fk-stats-graph-card {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: clamp(26rem, 48vh, 30rem);
  padding: clamp(1.1rem, 2vw, 1.75rem);
}

.fk-stats-graph-card .fk-profile-card-head {
  margin-bottom: 0.3rem;
}

.fk-stats-graph-card .fk-profile-kicker {
  color: rgba(244, 252, 255, 0.96);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  font-weight: 720;
  letter-spacing: 0.035em;
  text-transform: none;
}

.fk-stats-graph-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  min-height: 2.2rem;
  padding: 0.34rem 0.42rem 0.34rem 0.72rem;
  border: 1px solid rgba(124, 238, 228, 0.13);
  border-radius: 7px;
  background: rgba(0, 8, 15, 0.46);
}

/* renderStatsHistorySummary() (app.js) leaves #stats-rating-summary empty until there's at least
   one rated history point -- noticed while moving the timeframe control out to its own row
   (work order 4, item 3): with nothing inside it, this badge used to just look squashed next to
   the dropdown; on its own line it reads as a stray empty pill. Hide the whole badge rather than
   the (already-empty) text node, so the empty state is a clean absence instead of a visible gap. */
.fk-stats-graph-badge:has(> div:empty) {
  display: none;
}

.fk-stats-graph-badge > div {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
}

.fk-stats-graph-badge strong {
  color: rgba(102, 221, 123, 0.98);
  font-size: 0.88rem;
  font-weight: 820;
}

.fk-stats-graph-badge span {
  color: rgba(176, 214, 228, 0.58);
  font-size: 0.72rem;
  white-space: nowrap;
}

.fk-stats-graph-card .fk-profile-xp-graph {
  min-height: 0;
  height: 100%;
  padding-bottom: 0.35rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}

.fk-stats-graph-card .fk-profile-xp-chart {
  width: 100%;
  height: 100%;
}

.fk-stats-graph-card .fk-profile-xp-area {
  fill: rgba(240, 187, 89, 0.15);
}

.fk-stats-graph-card .fk-profile-xp-line-glow {
  stroke: rgba(240, 187, 89, 0.2);
  filter: drop-shadow(0 0 10px rgba(240, 187, 89, 0.2));
}

.fk-stats-graph-card .fk-profile-xp-line {
  stroke: rgba(246, 207, 124, 0.98);
  stroke-width: 2.6;
}

.fk-stats-metric-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.45vw, 1.25rem);
}

.fk-stats-rating-metric-items {
  display: contents;
}

.fk-mastery-section {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin-top: clamp(1rem, 1.6vw, 1.4rem);
  margin-bottom: 1rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(124, 238, 228, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, #071a24 0%, #031019 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 28px rgba(0, 0, 0, 0.2);
}

.fk-mastery-section:not(.is-expanded) {
  display: none;
}

.fk-mastery-content {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid rgba(124, 238, 228, 0.12);
}

.fk-mastery-content[hidden] {
  display: none;
}

.fk-mastery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-start;
  padding-top: 0.15rem;
}

.fk-mastery-filters label {
  display: grid;
  gap: 0.22rem;
  color: rgba(176, 214, 228, 0.68);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fk-mastery-filters select {
  min-width: 7rem;
  min-height: 2rem;
  padding: 0.3rem 1.7rem 0.3rem 0.52rem;
  border: 1px solid rgba(124, 238, 228, 0.16);
  border-radius: 6px;
  color: rgba(228, 240, 245, 0.9);
  background: rgba(1, 12, 19, 0.92);
  font: inherit;
  font-size: 0.68rem;
  text-transform: none;
}

.fk-mastery-filters select:focus-visible,
.fk-mastery-tile button:focus-visible {
  outline: 2px solid rgba(246, 207, 124, 0.7);
  outline-offset: 2px;
}

.fk-mastery-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.fk-mastery-summary > div {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.68rem 0.74rem;
  border: 1px solid rgba(124, 238, 228, 0.12);
  border-radius: 6px;
  background: rgba(8, 28, 38, 0.54);
}

.fk-mastery-summary span,
.fk-mastery-tile-head span,
.fk-mastery-tile-metrics {
  color: rgba(176, 214, 228, 0.68);
  font-size: 0.68rem;
}

.fk-mastery-summary strong {
  color: rgba(246, 207, 124, 0.96);
  font-size: 1.15rem;
}

.fk-mastery-status {
  padding: 0.8rem;
  color: rgba(176, 214, 228, 0.72);
  font-size: 0.78rem;
}

.fk-mastery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
  min-width: 0;
  align-items: stretch;
}

.fk-mastery-tile {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 0.58rem;
  min-width: 0;
  min-height: 10.5rem;
  height: 100%;
  padding: 0.82rem;
  overflow: hidden;
  border: 1px solid rgba(124, 238, 228, 0.13);
  border-radius: 7px;
  background: #061721;
}

.fk-mastery-tile.is-mastered,
.fk-mastery-tile.is-proficient {
  border-color: rgba(246, 207, 124, 0.36);
}

.fk-mastery-tile.is-needsRefresh {
  border-color: rgba(230, 145, 82, 0.36);
}

.fk-mastery-tile-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.fk-mastery-tile-head strong {
  color: rgba(246, 207, 124, 0.92);
  font-size: 0.68rem;
}

.fk-mastery-tile h4 {
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(241, 247, 249, 0.94);
  font-size: 0.92rem;
  line-height: 1.3;
}

.fk-mastery-tile-metrics {
  display: grid;
  gap: 0.22rem;
}

.fk-mastery-progress,
.training-mastery-row div {
  height: 0.25rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(124, 238, 228, 0.1);
}

.fk-mastery-progress span,
.training-mastery-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(51, 214, 195, 0.82), rgba(246, 207, 124, 0.94));
}

.fk-mastery-tile button {
  align-self: end;
  justify-self: start;
  min-height: 2rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(246, 207, 124, 0.44);
  border-radius: 6px;
  color: rgba(255, 235, 198, 0.96);
  background: rgba(240, 187, 89, 0.08);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 820;
}@media (hover: hover) and (pointer: fine) {


.fk-mastery-tile button:hover {
  background: rgba(240, 187, 89, 0.15);
}
}

.fk-mastery-pagination {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding-top: 0.2rem;
}

.fk-mastery-pagination[hidden] {
  display: none;
}

.fk-mastery-pagination span {
  color: rgba(176, 214, 228, 0.68);
  font-size: 0.72rem;
}

.fk-mastery-pagination button {
  min-height: 2.15rem;
  padding: 0.38rem 0.9rem;
  border: 1px solid rgba(246, 207, 124, 0.36);
  border-radius: 6px;
  color: rgba(255, 235, 198, 0.94);
  background: #10202a;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 820;
}@media (hover: hover) and (pointer: fine) {
  .fk-mastery-pagination button:hover {
  outline: none;
  border-color: rgba(246, 207, 124, 0.7);
  background: #182b35;
}
}

.fk-mastery-pagination button:focus-visible {
  outline: none;
  border-color: rgba(246, 207, 124, 0.7);
  background: #182b35;
}

.fk-stats-metric-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: clamp(10rem, 18vh, 12rem);
  height: 100%;
  padding: 1.18rem;
  overflow: hidden;
}

/* container-type lives on the text column, not the card: the card's own inline-size includes
   the icon (a fixed ~4.4rem incl. margin), so `cqi` measured against the card overestimates the
   room actual text has by roughly 2x in this two-column layout. That mismatch left the "Strongest
   Mode"/"Weakest Mode" value ("Facing Raise" -- the longest real mode name) ellipsis-truncated to
   "Facing …" at ordinary desktop widths (~1280px, a 4-up metric grid), not just some extreme
   narrow case -- confirmed live, and this text column is exactly the box whose width already
   determines how much horizontal room the value has. */
.fk-stats-metric-card > div {
  container-type: inline-size;
  min-width: 0;
}

.fk-stats-metric-icon {
  display: grid;
  place-items: center;
  align-self: start;
  width: 3.45rem;
  height: 3.45rem;
  margin-right: 0.95rem;
  border: 1px solid rgba(240, 187, 89, 0.4);
  border-radius: 50%;
  color: rgba(246, 207, 124, 0.96);
  background:
    radial-gradient(circle at 45% 35%, rgba(255, 226, 177, 0.16), transparent 44%),
    rgba(240, 187, 89, 0.08);
  line-height: 1;
  box-shadow:
    inset 0 0 18px rgba(240, 187, 89, 0.08),
    0 0 18px rgba(240, 187, 89, 0.08);
}

.fk-stats-metric-icon svg {
  width: 1.85rem;
  height: 1.85rem;
  overflow: visible;
  fill: rgba(240, 187, 89, 0.1);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  filter: drop-shadow(0 0 5px rgba(246, 207, 124, 0.22));
}

.fk-stats-metric-card span:not(.fk-stats-metric-icon) {
  display: block;
  color: rgba(154, 184, 198, 0.78);
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.fk-stats-metric-card strong {
  display: block;
  margin-top: 0.45rem;
  overflow: hidden;
  color: rgba(246, 242, 235, 0.98);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 2.25vw, 2.15rem);
  /* Floor lowered from 1.35rem: with the container-anchor fix above, the longest real value
     ("Facing Raise") still hits this floor at ordinary metric-card widths, and 1.35rem was too
     tall to let it fit -- 0.95rem does, with room to spare, verified against the actual rendered
     text rather than guessed. Short values (percentages, seconds, Elo numbers) size up well past
     this floor via 11cqi in any container wide enough to hold them; it's only ever reached by the
     same narrow case ellipsis was previously papering over. */
  font-size: clamp(0.95rem, 11cqi, 2.15rem);
  font-weight: 760;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-stats-metric-detail {
  display: block;
  margin-top: 0.62rem;
  color: rgba(176, 214, 228, 0.68);
  font-size: 0.76rem;
  line-height: 1.35;
}

.fk-stats-metric-detail--positive {
  color: rgba(119, 226, 135, 0.86);
}

.fk-stats-metric-detail--warning {
  color: rgba(255, 203, 132, 0.82);
}

/* Work order 7 part E: replaces the old .fk-stats-mini-sparkline (deleted with its JS -- it drew
   one of two hardcoded point arrays regardless of any player's real data). Centred per the
   render-side direction settled in the mobile-optimisation work order 4 gate; reuses
   .fk-stats-change-arrow (already established by #stats-rating-change) rather than a second
   arrow treatment, but colour here is driven by weeklyChange.good, not by the raw number's own
   sign -- Average Time Taken needs a negative (faster) delta to read as the good outcome, which
   #stats-rating-change's own is-negative-means-bad convention doesn't support. */
.fk-stats-metric-weekly-change {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  margin-top: 0.5rem;
  padding-top: 0.42rem;
  border-top: 1px solid rgba(124, 238, 228, 0.08);
  color: rgba(176, 214, 228, 0.7);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}

.fk-stats-metric-weekly-change.is-positive {
  color: rgba(119, 226, 135, 0.9);
}

.fk-stats-metric-weekly-change.is-negative {
  color: rgba(242, 100, 82, 0.9);
}

/* .fk-stats-change-arrow's own is-up/is-down variants hardcode green-for-up/red-for-down, which
   is correct for #stats-rating-change (every metric there is accuracy-shaped, up is always good)
   but wrong here: Average Time Taken's "good" direction is a down arrow (faster). Overrides the
   arrow's colour to inherit from this component's own is-positive/is-negative instead, leaving
   is-up/is-down to control only the shape/rotation as they already do. */
.fk-stats-metric-weekly-change .fk-stats-change-arrow {
  border-color: currentColor;
  filter: none;
}

.fk-profile-timeframes button {
  min-height: 2rem;
  padding: 0.34rem 0.58rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(176, 214, 228, 0.76);
  font-size: 0.7rem;
  font-weight: 820;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .fk-profile-timeframes button:hover {
  outline: none;
  border-color: rgba(124, 238, 228, 0.28);
  background:
    linear-gradient(180deg, rgba(124, 238, 228, 0.12), rgba(255, 255, 255, 0.015)),
    rgba(0, 12, 18, 0.74);
  color: rgba(231, 252, 254, 0.94);
}
}

.fk-profile-timeframes button:focus-visible,
.fk-profile-timeframes button.active {
  outline: none;
  border-color: rgba(124, 238, 228, 0.28);
  background:
    linear-gradient(180deg, rgba(124, 238, 228, 0.12), rgba(255, 255, 255, 0.015)),
    rgba(0, 12, 18, 0.74);
  color: rgba(231, 252, 254, 0.94);
}

.fk-profile-timeframes button.active {
  border-color: rgba(246, 207, 124, 0.42);
  color: rgba(255, 226, 177, 0.96);
}

.fk-profile-metric-toggle button:disabled,
.fk-profile-metric-toggle button.active:disabled {
  border-color: transparent;
  background: transparent;
  color: rgba(139, 157, 163, 0.45);
  opacity: 0.62;
  cursor: not-allowed;
}

.fk-profile-graph-card .fk-profile-timeframes {
  gap: 0.16rem;
  padding: 0.14rem;
  border-color: rgba(112, 190, 193, 0.08);
  border-radius: 8px;
  background: rgba(0, 10, 16, 0.28);
}

.fk-profile-graph-card .fk-profile-timeframes button {
  min-height: 1.72rem;
  padding: 0.24rem 0.42rem;
  border-radius: 6px;
  color: rgba(174, 202, 210, 0.62);
  font-size: 0.64rem;
}@media (hover: hover) and (pointer: fine) {
  .fk-profile-graph-card .fk-profile-timeframes button:hover {
  border-color: rgba(96, 190, 184, 0.24);
  color: rgba(230, 246, 242, 0.94);
  background: rgba(33, 107, 105, 0.36);
}
}

.fk-profile-graph-card .fk-profile-timeframes button:focus-visible,
.fk-profile-graph-card .fk-profile-timeframes button.active {
  border-color: rgba(96, 190, 184, 0.24);
  color: rgba(230, 246, 242, 0.94);
  background: rgba(33, 107, 105, 0.36);
}

.fk-profile-graph-card .fk-profile-metric-toggle button:disabled,
.fk-profile-graph-card .fk-profile-metric-toggle button.active:disabled {
  border-color: transparent;
  background: transparent;
  color: rgba(139, 157, 163, 0.45);
}

.fk-profile-xp-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
  margin-bottom: 0.64rem;
}

.fk-profile-xp-summary span {
  min-width: 0;
  padding: 0.48rem 0.58rem;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(75, 136, 139, 0.07), rgba(4, 18, 25, 0.05));
  color: rgba(174, 202, 210, 0.52);
  font-size: 0.62rem;
  font-weight: 680;
  line-height: 1.15;
}

.fk-profile-xp-summary strong {
  display: block;
  margin-bottom: 0.22rem;
  color: rgba(244, 249, 247, 0.97);
  font-size: 1.06rem;
}

.fk-profile-xp-graph {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(124, 238, 228, 0.105);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008)),
    rgba(0, 5, 10, 0.48);
}

/* Scrub crosshair (UI polish work order 4, item 4): renderProfileXpGraph now wraps the <svg> in
   this div so the readout pill (an HTML sibling, not SVG text -- much simpler to size/clip than
   an SVG <text> with a hand-measured background rect) has a positioned ancestor to sit inside.
   touch-action: pan-y so a vertical drag still scrolls the page; only a horizontal drag scrubs
   (initXpGraphScrub reads clientX off pointer events, which fire regardless of touch-action --
   the property only governs the browser's own native panning, not custom JS handling). */
.fk-profile-xp-chart-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  user-select: none;
}

.fk-profile-xp-chart {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.fk-profile-xp-crosshair-line {
  stroke: rgba(246, 207, 124, 0.5);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.fk-profile-xp-crosshair-dot {
  fill: rgba(246, 207, 124, 0.98);
  stroke: rgba(2, 10, 16, 0.94);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 7px rgba(246, 207, 124, 0.55));
  pointer-events: none;
}

.fk-profile-xp-readout {
  position: absolute;
  top: 0.4rem;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.38rem;
  max-width: calc(100% - 0.8rem);
  padding: 0.28rem 0.56rem;
  border: 1px solid rgba(246, 207, 124, 0.32);
  border-radius: 999px;
  background: rgba(3, 10, 16, 0.92);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  color: rgba(255, 226, 177, 0.96);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

.fk-profile-xp-readout span {
  color: rgba(176, 214, 228, 0.72);
  font-weight: 700;
}

.fk-profile-xp-readout[hidden] {
  display: none;
}

.fk-profile-xp-grid {
  stroke: rgba(124, 238, 228, 0.09);
  stroke-width: 1;
}

.fk-profile-xp-axis,
.fk-profile-xp-tick {
  stroke: rgba(176, 214, 228, 0.18);
  stroke-width: 1;
}

.fk-profile-xp-tick {
  stroke: rgba(176, 214, 228, 0.24);
}

.fk-profile-xp-area {
  fill: url("#profile-xp-chart-fill");
}

.fk-profile-xp-line-glow,
.fk-profile-xp-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fk-profile-xp-line-glow {
  stroke: rgba(54, 215, 221, 0.24);
  stroke-width: 8;
  filter: drop-shadow(0 0 10px rgba(54, 215, 221, 0.28));
}

.fk-profile-xp-line {
  stroke: rgba(91, 231, 238, 0.96);
  stroke-width: 3;
}

.fk-profile-xp-dot {
  fill: rgba(246, 207, 124, 0.96);
  stroke: rgba(2, 10, 16, 0.94);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 6px rgba(246, 207, 124, 0.42));
}

.fk-profile-xp-axis-label,
.fk-profile-xp-y-label {
  fill: rgba(176, 214, 228, 0.58);
  font-size: 12px;
  font-weight: 700;
}

.fk-profile-xp-y-label {
  text-anchor: end;
}

.fk-profile-pill-value {
  display: inline-flex;
  align-items: center;
  min-height: 1.95rem;
  padding: 0.34rem 0.6rem;
  border: 1px solid rgba(246, 207, 124, 0.24);
  border-radius: 999px;
  color: rgba(255, 226, 177, 0.94);
  background: rgba(240, 187, 89, 0.08);
  font-size: 0.76rem;
  white-space: nowrap;
}

.fk-profile-mistakes-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  cursor: pointer;
}

.fk-profile-mistake-list {
  display: grid;
  align-content: start;
  gap: 0.24rem;
  min-height: 0;
  overflow: hidden;
}

.fk-profile-mistake-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 0.32rem 0;
  border-bottom: 1px solid rgba(118, 206, 224, 0.075);
}

.fk-profile-mistake-item:last-child {
  border-bottom: 0;
}

.fk-profile-mistake-item strong {
  display: block;
  overflow: hidden;
  color: rgba(245, 251, 253, 0.96);
  font-size: 0.84rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-profile-mistake-item span {
  display: block;
  margin-top: 0.22rem;
  overflow: hidden;
  color: rgba(176, 214, 228, 0.62);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-profile-mistake-item em {
  color: rgba(255, 226, 177, 0.9);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 740;
  white-space: nowrap;
}

.fk-profile-mistakes-card .fk-profile-action {
  width: 100%;
  min-height: 2.2rem;
  margin-top: 0.42rem;
}

.fk-profile-empty {
  margin: 0;
  padding: 0.72rem;
  border: 1px solid rgba(124, 238, 228, 0.09);
  border-radius: 10px;
  background: rgba(0, 7, 13, 0.34);
  color: rgba(176, 214, 228, 0.68);
  font-size: 0.8rem;
  line-height: 1.45;
}

.fk-profile-graph-empty {
  display: grid;
  min-height: 100%;
  place-items: center;
  text-align: center;
}

.fk-profile-single-xp {
  display: grid;
  min-height: 100%;
  place-items: center;
  align-content: center;
  gap: 0.34rem;
  text-align: center;
}

.fk-profile-single-xp strong {
  color: rgba(246, 235, 213, 0.96);
  font-size: clamp(1.35rem, 1.7vw, 1.8rem);
}

.fk-profile-single-xp small {
  color: rgba(176, 214, 228, 0.66);
  font-size: 0.8rem;
}

.fk-review-mistakes-screen {
  display: grid;
  align-content: start;
  overflow-y: auto;
  padding: clamp(1.1rem, 1.8vw, 1.9rem);
  background:
    radial-gradient(circle at 58% -10%, rgba(115, 205, 222, 0.2), transparent 30rem),
    linear-gradient(180deg, rgba(0, 26, 39, 0.18), rgba(0, 8, 14, 0.42));
}

.fk-review-topbar p {
  margin: 0.38rem 0 0;
  color: rgba(176, 214, 228, 0.74);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.35;
}

.fk-review-topbar h2 {
  margin-top: 0.22rem;
  font-size: clamp(1.9rem, 2.55vw, 2.75rem);
  line-height: 0.95;
}

.fk-review-topbar .fk-profile-kicker,
.fk-review-library .fk-profile-kicker {
  color: var(--menu-gold-bright);
}

.fk-review-topbar-actions {
  justify-content: flex-end;
  align-items: center;
}

.fk-review-topbar-actions .fk-profile-action {
  min-height: 2.8rem;
  padding: 0.58rem 0.94rem;
  border-color: rgba(240, 187, 89, 0.62);
  color: rgba(246, 207, 124, 0.96);
  background: rgba(0, 19, 26, 0.64);
}

.fk-review-topbar-actions .fk-profile-action svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fk-review-topbar-actions,
.fk-review-card-actions,
.fk-review-row-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.fk-review-card-actions {
  margin-top: auto;
  align-items: flex-end;
}

.fk-review-layout {
  display: grid;
  gap: clamp(0.82rem, 1.08vw, 1.08rem);
}

.fk-review-pack-grid {
  display: grid;
  grid-template-columns: minmax(22rem, 1.34fr) repeat(2, minmax(17rem, 0.96fr));
  gap: clamp(0.78rem, 1.1vw, 1.05rem);
}

.fk-review-pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: clamp(12.6rem, 16.2vw, 15rem);
  padding: clamp(1.08rem, 1.55vw, 1.55rem);
  border: 1px solid rgba(124, 238, 228, 0.18);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 12, 18, 0.96), rgba(2, 18, 27, 0.72) 56%, rgba(1, 10, 16, 0.38)),
    url("FKSpotBack.png") center right / auto 112% no-repeat,
    rgba(0, 10, 16, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 42px rgba(0, 0, 0, 0.26);
}

.fk-review-pack-card > * {
  position: relative;
  z-index: 1;
}

.fk-review-pack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 28%, rgba(54, 215, 221, 0.13), transparent 10rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 46%);
  pointer-events: none;
}

.fk-review-pack-card::after {
  content: "";
  position: absolute;
  inset: auto -2rem -4rem auto;
  width: 16rem;
  height: 16rem;
  border: 1px solid rgba(124, 238, 228, 0.13);
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}

.fk-review-pack-card--all {
  display: grid;
  grid-template-columns: minmax(10.5rem, 1fr) minmax(5rem, 0.34fr) clamp(4.55rem, 5vw, 5.35rem);
  grid-template-rows: auto auto minmax(0.7rem, 1fr) auto;
  align-items: center;
  column-gap: clamp(0.78rem, 1.2vw, 1.1rem);
  row-gap: 0.48rem;
  min-height: clamp(9.6rem, 12vw, 11rem);
  border-color: rgba(240, 187, 89, 0.62);
  background:
    linear-gradient(90deg, rgba(3, 13, 17, 0.94), rgba(6, 20, 23, 0.79) 44%, rgba(6, 21, 25, 0.21)),
    url("FKMistakesBack.png") center right / cover no-repeat,
    rgba(0, 10, 16, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(246, 207, 124, 0.1),
    0 20px 46px rgba(0, 0, 0, 0.3),
    0 0 34px rgba(240, 187, 89, 0.08);
}

.fk-review-pack-card--all .fk-review-card-actions {
  grid-column: 1 / 3;
  grid-row: 4;
  width: 100%;
  align-self: end;
}

.fk-review-pack-card--all > .fk-review-card-eyebrow,
.fk-review-pack-card--all > strong {
  grid-column: 1;
}

.fk-review-pack-card--all > strong {
  max-width: 10.5ch;
  font-size: clamp(2.1rem, 2.75vw, 2.6rem);
  line-height: 0.88;
}

.fk-review-pack-card--all::after {
  inset: 1.05rem 1.1rem auto auto;
  width: 13.5rem;
  height: 13.5rem;
  border-color: rgba(246, 207, 124, 0.2);
  opacity: 0.26;
  box-shadow:
    inset 0 0 0 2.1rem rgba(246, 207, 124, 0.018),
    inset 0 0 0 4.3rem rgba(246, 207, 124, 0.014);
}

.fk-review-pack-card--preflop {
  border-color: rgba(240, 187, 89, 0.62);
  background:
    linear-gradient(90deg, rgba(2, 12, 18, 0.98), rgba(2, 18, 27, 0.66) 46%, rgba(1, 10, 16, 0.12)),
    var(--menu-card-preflop-scene) 55% center / cover no-repeat,
    rgba(0, 10, 16, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(246, 207, 124, 0.1),
    0 20px 46px rgba(0, 0, 0, 0.3),
    0 0 34px rgba(240, 187, 89, 0.08);
}

.fk-review-pack-card--postflop {
  border-color: rgba(240, 187, 89, 0.62);
  background:
    linear-gradient(90deg, rgba(2, 12, 18, 0.98), rgba(2, 18, 27, 0.66) 50%, rgba(1, 10, 16, 0.16)),
    var(--menu-card-headsup-scene) 58% center / cover no-repeat,
    rgba(0, 10, 16, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(246, 207, 124, 0.1),
    0 20px 46px rgba(0, 0, 0, 0.3),
    0 0 34px rgba(240, 187, 89, 0.08);
}

.fk-review-pack-card strong {
  color: rgba(255, 252, 244, 0.98);
  max-width: 12ch;
  font-family: "Georgia", "Cambria", serif;
  font-size: clamp(1.7rem, 2.28vw, 2.45rem);
  font-weight: 560;
  line-height: 0.96;
  text-transform: uppercase;
}

.fk-review-pack-card--preflop > strong,
.fk-review-pack-card--postflop > strong {
  margin-top: 0.32rem;
}

.fk-review-pack-card small {
  color: rgba(237, 247, 249, 0.84);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
}

.fk-review-card-eyebrow {
  color: rgba(246, 207, 124, 0.9);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.fk-review-star {
  position: absolute;
  top: 0.9rem;
  right: 0.95rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: rgba(235, 247, 250, 0.78);
  font-size: 1.18rem;
  line-height: 1;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .fk-review-star:hover {
  outline: none;
  color: rgba(246, 207, 124, 0.94);
  text-shadow: 0 0 12px rgba(246, 207, 124, 0.22);
}
}

.fk-review-star:focus-visible {
  outline: none;
  color: rgba(246, 207, 124, 0.94);
  text-shadow: 0 0 12px rgba(246, 207, 124, 0.22);
}

.fk-review-card-meter {
  --fk-review-ring-size: clamp(2.8rem, 3.7vw, 3.35rem);
  grid-column: 3;
  grid-row: 4;
  position: relative;
  display: grid;
  grid-template-columns: var(--fk-review-ring-size);
  align-items: center;
  align-self: end;
  gap: 0;
  min-width: 0;
  justify-self: end;
}

.fk-review-ring {
  width: var(--fk-review-ring-size);
  aspect-ratio: 1;
  overflow: visible;
  filter:
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 4px rgba(54, 215, 221, 0.035));
  transform: rotate(-90deg);
}

.fk-review-ring-track,
.fk-review-ring-highlight,
.fk-review-ring-segment {
  fill: none;
  stroke-width: 6.5;
}

.fk-review-ring-track {
  stroke: rgba(62, 54, 31, 0.56);
}

.fk-review-ring-highlight {
  stroke: rgba(255, 252, 244, 0.3);
  stroke-dasharray: 34 255;
  stroke-linecap: round;
  stroke-width: 4.5;
  transform-origin: 56px 56px;
  transform: rotate(14deg);
  pointer-events: none;
}

.fk-review-ring-segment {
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 180ms ease, filter 180ms ease;
  pointer-events: auto;
  cursor: pointer;
}

.fk-review-ring-segment.is-ready {
  opacity: 1;
  animation: fk-review-ring-draw 520ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

.fk-review-ring-segment.is-empty {
  pointer-events: none;
}

.fk-review-ring-segment--preflop {
  stroke: rgba(54, 215, 221, 0.72);
}

.fk-review-ring-segment--postflop {
  stroke: rgba(246, 207, 124, 0.72);
}@media (hover: hover) and (pointer: fine) {


.fk-review-ring-segment--preflop:hover {
  filter: drop-shadow(0 0 6px rgba(54, 215, 221, 0.18));
}
}@media (hover: hover) and (pointer: fine) {


.fk-review-ring-segment--postflop:hover {
  filter: drop-shadow(0 0 6px rgba(246, 207, 124, 0.18));
}
}@media (hover: hover) and (pointer: fine) {
  .fk-review-card-meter:has(.fk-review-ring-legend-item--preflop:hover) .fk-review-ring-segment--preflop {
  filter: drop-shadow(0 0 6px rgba(54, 215, 221, 0.18));
}
}

.fk-review-card-meter:has(.fk-review-ring-legend-item--preflop:focus-visible) .fk-review-ring-segment--preflop {
  filter: drop-shadow(0 0 6px rgba(54, 215, 221, 0.18));
}@media (hover: hover) and (pointer: fine) {
  .fk-review-card-meter:has(.fk-review-ring-legend-item--postflop:hover) .fk-review-ring-segment--postflop {
  filter: drop-shadow(0 0 6px rgba(246, 207, 124, 0.18));
}
}

.fk-review-card-meter:has(.fk-review-ring-legend-item--postflop:focus-visible) .fk-review-ring-segment--postflop {
  filter: drop-shadow(0 0 6px rgba(246, 207, 124, 0.18));
}

.fk-review-ring-center {
  position: absolute;
  left: calc(var(--fk-review-ring-size) / 2);
  top: 50%;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fk-review-ring-center-in 520ms ease both;
}

.fk-review-ring-center b {
  color: rgba(255, 252, 244, 0.98);
  font-size: clamp(1rem, 1.18vw, 1.2rem);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
}

.fk-review-ring-legend {
  position: absolute;
  left: 50%;
  top: -1.05rem;
  display: flex;
  align-items: center;
  gap: 0.34rem;
  opacity: 0.78;
  transform: translateX(-50%);
  white-space: nowrap;
}

.fk-review-ring-legend-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.18rem;
  width: auto;
  min-height: 1rem;
  padding: 0.05rem 0.08rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: rgba(237, 247, 249, 0.84);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.fk-review-ring-marker {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  box-shadow: 0 0 4px currentColor;
}

.fk-review-ring-legend-item--preflop .fk-review-ring-marker {
  color: rgba(54, 215, 221, 0.9);
  background: currentColor;
}

.fk-review-ring-legend-item--postflop .fk-review-ring-marker {
  color: rgba(246, 207, 124, 0.9);
  background: currentColor;
}@media (hover: hover) and (pointer: fine) {
  .fk-review-ring-legend-item:hover {
  border-color: rgba(237, 247, 249, 0.14);
  background: rgba(0, 28, 36, 0.22);
  outline: none;
}
}

.fk-review-ring-legend-item:focus-visible {
  border-color: rgba(237, 247, 249, 0.14);
  background: rgba(0, 28, 36, 0.22);
  outline: none;
}@media (hover: hover) and (pointer: fine) {


.fk-review-card-meter:has(.fk-review-ring-segment--preflop:hover) .fk-review-ring-legend-item--preflop,
.fk-review-card-meter:has(.fk-review-ring-segment--postflop:hover) .fk-review-ring-legend-item--postflop {
  border-color: rgba(237, 247, 249, 0.14);
  background: rgba(0, 28, 36, 0.22);
}
}

.fk-review-ring-legend-item:focus-visible {
  box-shadow: 0 0 0 2px rgba(246, 207, 124, 0.18);
}

.fk-review-ring-legend-item:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.fk-review-card-meter:not(.has-preflop) .fk-review-ring-legend-item--preflop,
.fk-review-card-meter:not(.has-postflop) .fk-review-ring-legend-item--postflop {
  color: rgba(237, 247, 249, 0.46);
}

.fk-review-card-meter:not(.has-preflop) .fk-review-ring-legend-item--preflop .fk-review-ring-marker,
.fk-review-card-meter:not(.has-postflop) .fk-review-ring-legend-item--postflop .fk-review-ring-marker {
  opacity: 0.36;
  box-shadow: none;
}

@keyframes fk-review-ring-draw {
  from {
    stroke-dasharray: 0 289.027;
  }
  to {
    stroke-dasharray: var(--ring-length) var(--ring-rest);
  }
}

@keyframes fk-review-ring-center-in {
  from {
    opacity: 0;
    transform: translate(-50%, -46%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fk-review-ring-segment.is-ready,
  .fk-review-ring-center {
    animation: none;
    opacity: 1;
  }
}

.fk-review-pack-card .fk-profile-action {
  min-width: min(15.9rem, 100%);
  border-color: rgba(240, 187, 89, 0.54);
  background:
    linear-gradient(180deg, rgba(255, 219, 129, 0.94), rgba(191, 126, 29, 0.92)),
    rgba(240, 187, 89, 0.9);
  color: rgba(14, 10, 4, 0.96);
  font-size: 0.88rem;
  letter-spacing: 0;
}

.fk-review-pack-card .fk-profile-action--muted,
.fk-review-pack-card .fk-profile-action--teal {
  border-color: rgba(54, 215, 221, 0.58);
  background: rgba(0, 19, 26, 0.64);
  color: var(--menu-teal);
}

.fk-review-pack-card .fk-review-action--gold-outline {
  border-color: rgba(240, 187, 89, 0.62);
  background: rgba(0, 19, 26, 0.64);
  color: rgba(246, 207, 124, 0.96);
}

.fk-review-pack-card--all .fk-review-action--gold-outline {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  justify-content: center;
  white-space: nowrap;
}

.fk-review-pack-card .fk-profile-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.fk-review-library {
  display: grid;
  padding-top: 0.2rem;
  min-height: 0;
  margin-top: 0.85rem;
}

.fk-review-library .fk-profile-card-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.65rem;
}

.fk-review-library-title {
  margin: 0;
  color: #f5fbff;
  font-family: "Georgia", "Cambria", serif;
  font-size: clamp(1.2rem, 1.45vw, 1.55rem);
  font-weight: 520;
  letter-spacing: 0;
  line-height: 1.2;
}

.fk-review-log-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
}

.fk-review-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem;
  margin-bottom: 0;
}

.fk-review-filters button {
  min-height: 2rem;
  padding: 0.32rem 0.8rem;
  border: 1px solid rgba(124, 238, 228, 0.18);
  border-radius: 5px;
  background: rgba(0, 12, 18, 0.62);
  color: rgba(196, 242, 246, 0.82);
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0;
  cursor: pointer;
}

.fk-review-filters button[aria-pressed="true"] {
  border-color: rgba(246, 207, 124, 0.52);
  color: rgba(246, 207, 124, 0.96);
  background: rgba(55, 39, 12, 0.46);
}@media (hover: hover) and (pointer: fine) {
  .fk-review-filters button:hover {
  outline: none;
  border-color: rgba(124, 238, 228, 0.42);
  box-shadow: 0 0 0 3px rgba(54, 215, 221, 0.1);
}
}

.fk-review-filters button:focus-visible {
  outline: none;
  border-color: rgba(124, 238, 228, 0.42);
  box-shadow: 0 0 0 3px rgba(54, 215, 221, 0.1);
}

.fk-review-list {
  display: grid;
  gap: 0;
  min-height: 0;
  border: 1px solid rgba(124, 238, 228, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 13, 19, 0.48);
}

.fk-review-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(14rem, 1.64fr) minmax(16rem, 1.52fr) minmax(6rem, 0.42fr) auto;
  gap: 0.76rem;
  align-items: center;
  min-height: 3.88rem;
  padding: 0.62rem 0.92rem;
  border-bottom: 1px solid rgba(124, 238, 228, 0.1);
  background: linear-gradient(90deg, rgba(2, 20, 29, 0.72), rgba(2, 13, 20, 0.66));
  transition: background 180ms ease;
}

.fk-review-row:last-child {
  border-bottom: 0;
}

.fk-review-row::before {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 999px;
  background: rgba(240, 187, 89, 0.58);
  box-shadow: none;
}

.fk-review-row--postflop::before {
  background: rgba(54, 215, 221, 0.58);
}@media (hover: hover) and (pointer: fine) {
  .fk-review-row:hover {
  background: linear-gradient(90deg, rgba(4, 27, 38, 0.78), rgba(2, 15, 22, 0.7));
}
}

.fk-review-row:focus-within {
  background: linear-gradient(90deg, rgba(4, 27, 38, 0.78), rgba(2, 15, 22, 0.7));
}@media (hover: hover) and (pointer: fine) {
  .fk-review-row:hover::before {
  background: rgba(240, 187, 89, 0.76);
  box-shadow: 0 0 8px rgba(240, 187, 89, 0.16);
}
}

.fk-review-row:focus-within::before {
  background: rgba(240, 187, 89, 0.76);
  box-shadow: 0 0 8px rgba(240, 187, 89, 0.16);
}@media (hover: hover) and (pointer: fine) {
  .fk-review-row--postflop:hover::before {
  background: rgba(54, 215, 221, 0.76);
  box-shadow: 0 0 8px rgba(54, 215, 221, 0.16);
}
}

.fk-review-row--postflop:focus-within::before {
  background: rgba(54, 215, 221, 0.76);
  box-shadow: 0 0 8px rgba(54, 215, 221, 0.16);
}

.fk-review-row-main,
.fk-review-row-actions span,
.fk-review-row-meta {
  display: grid;
  gap: 0.12rem;
}

.fk-review-row-type,
.fk-review-row-actions em,
.fk-review-row small {
  color: rgba(176, 214, 228, 0.58);
  font-size: 0.67rem;
  font-style: normal;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fk-review-row strong {
  color: rgba(246, 235, 213, 0.96);
  font-size: 0.92rem;
}

.fk-review-row-main > strong {
  font-size: clamp(1.25rem, 1.28vw, 1.46rem);
  font-weight: 680;
  letter-spacing: -0.01em;
  line-height: 1.08;
  white-space: nowrap;
}

.fk-review-card-token {
  display: inline-flex;
  align-items: baseline;
  gap: 0.04rem;
  margin-right: 0.16rem;
  color: rgba(246, 235, 213, 0.98);
}

.fk-review-row-main .board-suit {
  color: rgba(224, 222, 210, 0.9);
}

.fk-review-row-main .suit-heart,
.fk-review-row-main .suit-diamond {
  color: #ff7f72;
}

.fk-review-row-street {
  color: rgba(246, 207, 124, 0.88);
  font-size: 0.68rem;
  font-weight: 680;
  letter-spacing: 0.085em;
}

.fk-review-row--postflop .fk-review-row-street {
  color: rgba(54, 215, 221, 0.88);
}

.fk-review-row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.52rem;
}

.fk-review-row-actions .fk-review-action-wrong {
  color: #ff6b5d;
}

.fk-review-row-actions .fk-review-action-best {
  color: var(--menu-teal);
}

.fk-review-row-buttons {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.44rem;
}

.fk-review-row-buttons .fk-profile-action {
  min-height: 2rem;
  padding: 0.36rem 0.72rem;
}

.fk-review-remove-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(137, 216, 232, 0.22);
  border-radius: 8px;
  color: rgba(196, 214, 220, 0.78);
  background: rgba(2, 13, 20, 0.48);
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 560;
  line-height: 1;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 120ms ease, filter 120ms ease;
}@media (hover: hover) and (pointer: fine) {
  .fk-review-remove-button:hover {
  outline: none;
  border-color: rgba(255, 107, 93, 0.68);
  color: #ff7f72;
  background: rgba(255, 107, 93, 0.08);
}
}

.fk-review-remove-button:focus-visible {
  outline: none;
  border-color: rgba(255, 107, 93, 0.68);
  color: #ff7f72;
  background: rgba(255, 107, 93, 0.08);
}

.fk-review-remove-button:active {
  transform: scale(0.96);
  filter: brightness(0.92);
}

.fk-review-empty {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  padding: 1.15rem;
  border: 1px dashed rgba(124, 238, 228, 0.22);
  border-radius: 8px;
  color: rgba(176, 214, 228, 0.76);
  background: rgba(0, 12, 18, 0.42);
}

.fk-review-empty strong {
  color: #f5fbff;
}

.fk-review-empty p {
  margin: 0;
}

@media (min-width: 1181px) and (max-height: 740px) {
  .fk-menu-rail {
    padding: 0.95rem 1.06rem;
  }

  .fk-menu-brand {
    min-height: 3.35rem;
  }

  .fk-brand-logo--rail {
    width: 2.75rem;
    height: 2.75rem;
  }

  .fk-menu-fish {
    width: 2.54rem;
    height: 1.42rem;
  }

  .fk-menu-nav {
    gap: 0.2rem;
    margin-top: 0.94rem;
  }

  .fk-menu-nav-item {
    grid-template-columns: 1.24rem minmax(0, 1fr);
    gap: 0.68rem;
    min-height: 2.78rem;
    padding: 0.44rem 0.68rem;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
  }

  .fk-menu-nav-icon {
    width: 1.24rem;
    height: 1.24rem;
  }

  .dashboard-nav-icon {
    width: 1.18rem;
    height: 1.18rem;
  }

  .fk-menu-profile {
    padding: 0.68rem;
  }

  .fk-dashboard-avatar {
    width: 2.3rem;
    height: 2.3rem;
  }

  .fk-dashboard-main {
    gap: 0.6rem;
    padding: 1rem clamp(1.55rem, 2.28vw, 2.18rem);
  }

  .fk-dashboard-head {
    min-height: 4.8rem;
  }

  .fk-dashboard-profile-pill {
    min-height: 4.2rem;
    padding: 0.5rem 0.78rem;
  }

  .fk-mode-grid {
    gap: 1.3rem;
  }

  .fk-mode-card {
    min-height: clamp(24rem, 48vh, 27rem);
    padding: clamp(1.85rem, 3.4vh, 2.15rem) clamp(1.35rem, 2.12vw, 2.18rem) 1.4rem;
  }

  .fk-mode-card h3 {
    min-height: 4.6rem;
    margin-top: 0.7rem;
    font-size: clamp(1.7rem, 2.3vw, 2.4rem);
  }

  .fk-dashboard-stats {
    min-height: 5rem;
    padding: 0.4rem 0.82rem;
  }

  .fk-progress-summary,
  .fk-stat-block {
    min-height: 4.1rem;
  }

  .fk-progress-medallion {
    width: 3.12rem;
    height: 3.12rem;
  }

  .fk-dashboard-progress--wide {
    height: 0.5rem;
    margin-top: 0.42rem;
  }

  .fk-progress-subtext,
  .fk-progress-helper {
    margin-top: 0.38rem;
  }

  .fk-stat-block--xp {
    column-gap: 0.75rem;
  }

  .fk-xp-sparkline {
    width: min(6.15rem, 100%);
    height: 1.9rem;
  }

  .fk-stat-rank .fk-rank-crest {
    width: 2.75rem;
    height: 3rem;
  }
}

.hero-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.3rem;
  padding: 1.4rem;
}

.hero-strip h2 {
  margin-top: 0.85rem;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 0.85rem;
}

.resource-pill {
  min-width: 145px;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.boost-pill {
  box-shadow: inset 0 0 0 1px rgba(111, 183, 255, 0.08);
}

.primary-button,
.secondary-button,
.answer-button {
  border: 0;
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.primary-button,
.secondary-button {
  min-height: 3.1rem;
  padding: 0.9rem 1.15rem;
  border-radius: 18px;
  font-weight: 700;
}

.primary-button {
  background: linear-gradient(135deg, var(--gold), #ffda92);
  color: #17222c;
  box-shadow: 0 18px 30px rgba(240, 187, 89, 0.2);
}

.secondary-button {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.primary-button:disabled,
.secondary-button:disabled,
.answer-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.answer-button:active:not(:disabled),
.answer-button--pressing {
  transform: translateY(1px) scale(0.99);
  transition-duration: 90ms;
}

.answer-grid--resolving .answer-button {
  pointer-events: none;
}

.answer-button.answer-button--resolved:disabled {
  opacity: 1;
  cursor: default;
}

.answer-button.answer-button--selected-correct,
.answer-button.answer-button--selected-incorrect {
  transform: translateY(-1px);
}

.answer-button.answer-button--selected-correct {
  border-color: rgba(64, 213, 177, 0.62);
  box-shadow:
    0 0 0 1px rgba(233, 185, 98, 0.12),
    inset 0 1px 0 rgba(255, 223, 160, 0.18);
}

.answer-button.answer-button--selected-incorrect {
  filter: brightness(0.9) saturate(0.9);
  border-color: rgba(202, 81, 77, 0.62);
  box-shadow:
    0 0 0 1px rgba(236, 166, 84, 0.1),
    inset 0 1px 0 rgba(255, 196, 124, 0.12);
}

.answer-button.answer-button--missed-correct {
  border-color: rgba(239, 190, 96, 0.66);
  filter: brightness(1.03) saturate(1.02);
  box-shadow:
    0 0 0 1px rgba(239, 190, 96, 0.14),
    inset 0 1px 0 rgba(255, 229, 176, 0.16);
}

.continue-button--ready {
  opacity: 1;
  border-color: rgba(239, 190, 96, 0.46);
  box-shadow:
    0 0 0 1px rgba(239, 190, 96, 0.1),
    0 12px 26px rgba(0, 0, 0, 0.24);
  animation: continue-ready-brighten 190ms ease-out;
}

.trainer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  opacity: 1;
  transition: opacity 240ms ease;
}

/* enterLessonMode() (app.js) briefly adds this to body right before the trainer grid is first
   revealed (going from display:none to display:grid via .menu-mode/.session-mode), then removes it
   a frame later -- giving the browser a beat to lay out/start fetching this subtree's images
   (rank-frame card faces, table felt, seat avatars) at opacity 0 instead of popping in fully
   painted-but-not-yet-loaded content the instant the session view appears. */
body.lesson-entering .trainer-grid {
  opacity: 0;
}

body.is-left-panel-hidden .fact-grid,
body.is-left-panel-hidden.lesson-active .scenario-meta {
  display: none;
}

.lesson-active {
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lesson-active .app-shell {
  width: min(1200px, calc(100% - 1.5rem));
  min-height: 100%;
  margin: 0 auto;
  padding: 0.75rem 0 1.25rem;
}

.lesson-active .app-topbar,
.lesson-active .profile-menu,
.lesson-active .home-menu,
.lesson-active .sidebar,
.lesson-active .side-panel {
  display: none;
}

.lesson-active .workspace {
  min-height: auto;
  gap: 0.75rem;
}

.lesson-active .hero-strip {
  padding: 0.8rem 1rem;
  border-radius: 20px;
}

.lesson-active .hero-strip h2 {
  margin-top: 0.45rem;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
}

.lesson-active #hero-subtitle,
.lesson-active .boost-pill,
.lesson-active #start-session-button {
  display: none;
}

.lesson-active .trainer-grid {
  grid-template-columns: minmax(0, 1fr);
}

.lesson-active .scenario-panel {
  gap: 0.75rem;
  min-height: 0;
  padding: 1rem;
}

.lesson-active .scenario-card {
  gap: 0.75rem;
  min-height: 0;
  padding: 1rem;
}

.lesson-active .table-visual {
  min-height: 0;
  height: clamp(360px, 56vh, 560px);
}

.lesson-active .answer-button {
  min-height: 78px;
}

.lesson-active .feedback-band {
  position: static;
  box-shadow: none;
}

.scenario-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.scenario-topline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.9rem;
  align-items: center;
}

.session-chip {
  min-width: 98px;
  background: rgba(72, 192, 168, 0.12);
  color: var(--teal-soft);
}

.session-figures {
  display: inline-flex;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.scenario-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 620px;
  padding: 1.2rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 28%),
    rgba(8, 20, 31, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.scenario-card::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.scenario-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.betting-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.betting-line span {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: 0.32rem 0.68rem;
  border-radius: 999px;
  background: rgba(76, 174, 255, 0.1);
  border: 1px solid rgba(156, 222, 242, 0.13);
  color: #d8f5ff;
  font-size: 0.82rem;
}

.cards-row {
  display: flex;
  gap: 0.9rem;
}

.hero-card {
  position: relative;
  width: 92px;
  height: 126px;
  padding: 1rem 0.9rem;
  border: 1px solid rgba(61, 48, 34, 0.58);
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), transparent 23%),
    radial-gradient(circle at 78% 18%, rgba(111, 177, 210, 0.12), transparent 27%),
    linear-gradient(180deg, #fff8df 0%, #f1e6c7 54%, #ddd0ad 100%);
  color: #12181d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -10px 18px rgba(76, 58, 32, 0.14),
    inset 0 0 0 1px rgba(255, 241, 197, 0.42),
    0 2px 0 rgba(255, 255, 255, 0.16),
    0 18px 24px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotate(-3deg);
  animation: rise-in 280ms ease;
  overflow: hidden;
}

.hero-card::before,
.table-card::before {
  content: "";
  position: absolute;
  inset: 0.22rem;
  border-radius: inherit;
  pointer-events: none;
}

.hero-card::after,
.table-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 22%),
    linear-gradient(90deg, rgba(2, 9, 13, 0.12), transparent 14%, transparent 84%, rgba(2, 9, 13, 0.1));
  pointer-events: none;
  mix-blend-mode: multiply;
}

.card-style-reef {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), transparent 23%),
    radial-gradient(circle at 78% 18%, rgba(111, 177, 210, 0.12), transparent 27%),
    linear-gradient(180deg, #fff8df 0%, #f1e6c7 54%, #ddd0ad 100%);
}

.card-style-current {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), transparent 23%),
    radial-gradient(circle at 18% 82%, rgba(51, 214, 195, 0.14), transparent 30%),
    linear-gradient(160deg, #fff6da, #d7e4d5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -10px 18px rgba(40, 75, 68, 0.13),
    inset 0 0 0 1px rgba(51, 214, 195, 0.2),
    0 18px 26px rgba(0, 0, 0, 0.42);
}

.card-style-abyss {
  color: #ecfbff;
  background:
    radial-gradient(circle at 75% 20%, rgba(76, 174, 255, 0.3), transparent 28%),
    linear-gradient(160deg, #10273a, #03101a);
  box-shadow:
    inset 0 0 0 2px rgba(156, 222, 242, 0.18),
    0 22px 34px rgba(0, 0, 0, 0.34);
}

.card-style-goldfin {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), transparent 24%),
    radial-gradient(circle at 72% 18%, rgba(255, 246, 193, 0.22), transparent 28%),
    linear-gradient(160deg, #fff4cf, #d9aa55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -10px 18px rgba(88, 53, 14, 0.15),
    inset 0 0 0 1px rgba(142, 91, 28, 0.28),
    0 18px 26px rgba(0, 0, 0, 0.38);
}

.card-style-abyss .card-suit {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.14);
}

.card-style-abyss .suit-club,
.card-style-abyss .suit-spade {
  color: #ecfbff;
}

.hero-card:last-child {
  transform: rotate(4deg);
}

.card-rank {
  position: relative;
  z-index: 1;
  font-family: "Rockwell", "Georgia", serif;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.52);
}

.card-suit {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 249, 225, 0.54);
  border: 1px solid rgba(71, 56, 35, 0.13);
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.7rem;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -4px 10px rgba(7, 38, 64, 0.09);
}

.suit-heart,
.suit-diamond {
  color: #bc2434;
}

.suit-club,
.suit-spade {
  color: #111a20;
}

#scenario-title {
  font-size: clamp(1.75rem, 3vw, 2.3rem);
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.fact-card {
  padding: 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.fact-card span {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.fact-card strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 1rem;
}

.table-visual {
  position: relative;
  width: 100%;
  min-height: 360px;
  height: clamp(360px, 34vw, 560px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: #02070d;
  border: 1px solid rgba(240, 187, 89, 0.22);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 18px 44px rgba(0, 0, 0, 0.34);
}

.table-visual::before {
  display: none;
}

/* AI Coach scaffolding: local-only UI, intentionally isolated from table state. */
.coach-teaser,
.coach-sidebar {
  --coach-gold: #d7a858;
  --coach-cream: #f4ead2;
  --coach-cyan: #43d5f2;
  --coach-surface: rgba(5, 17, 24, 0.96);
}

.coach-teaser {
  position: absolute;
  right: clamp(0.8rem, 2.4vw, 1.6rem);
  bottom: clamp(0.8rem, 2.4vw, 1.5rem);
  z-index: 8;
  display: none;
  grid-template-columns: 54px minmax(0, 1fr) 38px;
  align-items: center;
  width: min(370px, calc(100% - 1.6rem));
  min-height: 86px;
  padding: 0.65rem 0.7rem;
  border: 1px solid rgba(215, 168, 88, 0.58);
  border-radius: 21px;
  color: var(--coach-cream);
  text-align: left;
  background:
    radial-gradient(circle at 94% 50%, rgba(67, 213, 242, 0.11), transparent 30%),
    linear-gradient(140deg, rgba(15, 32, 42, 0.98), rgba(4, 14, 20, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 38px rgba(0, 0, 0, 0.46);
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.lesson-active.session-mode:not(.coach-expanded):not(.coach-disabled) .coach-teaser {
  display: grid;
}@media (hover: hover) and (pointer: fine) {
  .coach-teaser:hover {
  border-color: rgba(67, 213, 242, 0.76);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 3px rgba(67, 213, 242, 0.11),
    0 20px 42px rgba(0, 0, 0, 0.52);
  outline: none;
}
}

.coach-teaser:focus-visible {
  border-color: rgba(67, 213, 242, 0.76);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 3px rgba(67, 213, 242, 0.11),
    0 20px 42px rgba(0, 0, 0, 0.52);
  outline: none;
}

.coach-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(215, 168, 88, 0.72);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #274b55, #07141c 72%);
  box-shadow: inset 0 0 0 3px rgba(2, 9, 14, 0.75), 0 0 20px rgba(67, 213, 242, 0.12);
}

.coach-avatar .fk-character-portrait,
.coach-avatar .fk-character-portrait-image {
  display: block;
  width: 100%;
  height: 100%;
}

.coach-avatar .fk-character-portrait-image {
  object-fit: cover;
}

.coach-teaser-avatar {
  width: 50px;
  height: 50px;
}

.coach-teaser-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0 0.65rem;
}

.coach-teaser-copy strong,
.coach-eyebrow,
.coach-summary > span,
.coach-section > span,
.coach-quick-questions > span {
  color: var(--coach-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coach-teaser-copy > span {
  color: rgba(244, 234, 210, 0.88);
  font-size: 0.86rem;
  line-height: 1.35;
}

.coach-teaser-expand {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(67, 213, 242, 0.72);
  border-radius: 50%;
  color: #dffaff;
  font-family: Georgia, serif;
  font-size: 1.8rem;
  line-height: 1;
  box-shadow: 0 0 18px rgba(67, 213, 242, 0.23);
}

.coach-backdrop {
  position: fixed;
  inset: 0;
  z-index: 43;
  display: none;
  background: rgba(2, 7, 12, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 240ms ease-out, visibility 240ms ease-out;
  visibility: hidden;
}

.coach-sidebar {
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  gap: 0.78rem;
  width: 340px;
  min-width: 0;
  max-height: calc(100svh - 1.5rem);
  padding: 1.05rem;
  overflow: hidden auto;
  border: 1px solid rgba(215, 168, 88, 0.56);
  border-radius: 24px;
  color: var(--coach-cream);
  background:
    linear-gradient(135deg, rgba(215, 168, 88, 0.05), transparent 22%),
    radial-gradient(circle at 70% 9%, rgba(67, 213, 242, 0.09), transparent 28%),
    var(--coach-surface);
  box-shadow: inset 0 0 0 3px rgba(215, 168, 88, 0.06), 0 22px 55px rgba(0, 0, 0, 0.42);
  opacity: 0;
  visibility: hidden;
  transform: translateX(22px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}

.lesson-active.session-mode .coach-sidebar {
  display: flex;
}

.lesson-active.session-mode.coach-disabled .coach-sidebar {
  display: none;
}

.lesson-active .trainer-grid {
  grid-template-columns: minmax(0, 1fr) 0fr;
  column-gap: 0;
  transition: grid-template-columns 240ms ease, column-gap 240ms ease;
}

.lesson-active.coach-expanded .app-shell {
  width: min(1560px, calc(100% - 1.5rem));
}

.lesson-active.coach-expanded .trainer-grid {
  grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: 1rem;
}

.lesson-active.coach-expanded .coach-sidebar {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.coach-sidebar-head,
.coach-persona {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.coach-sidebar-head {
  position: absolute;
  top: 1.05rem;
  right: 1.05rem;
  z-index: 1;
}

.coach-sidebar-head h2 {
  margin: 0.12rem 0 0;
  color: var(--coach-cream);
  font-family: Georgia, serif;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.coach-close {
  display: grid;
  place-items: center;
  margin-left: auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(215, 168, 88, 0.36);
  border-radius: 50%;
  color: var(--coach-gold);
  background: rgba(255, 255, 255, 0.025);
  font-size: 1.45rem;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .coach-close:hover,
  .coach-quick-questions button:hover,
  .coach-input button:hover {
  border-color: rgba(67, 213, 242, 0.72);
  color: #dffaff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 213, 242, 0.09);
}
}

.coach-close:focus-visible,
.coach-quick-questions button:focus-visible,
.coach-input button:focus-visible {
  border-color: rgba(67, 213, 242, 0.72);
  color: #dffaff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 213, 242, 0.09);
}

.coach-persona {
  justify-content: flex-start;
  padding: 0.2rem 0.15rem;
}

.coach-persona-avatar {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
}

.coach-persona > div {
  display: grid;
  gap: 0.15rem;
}

.coach-persona strong {
  color: #e5bd72;
  font-family: Georgia, serif;
  font-size: 1.22rem;
}

.coach-persona span {
  color: var(--coach-gold);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.coach-persona small {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  color: rgba(244, 234, 210, 0.66);
}

.coach-persona i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coach-cyan);
  box-shadow: 0 0 11px var(--coach-cyan);
}

/* Phase X: previously this dot was a hardcoded cyan "live" glow regardless of state -- it stayed
   bright even next to a "Coach unavailable" label. Muted here whenever renderCoachContent() (app.js)
   toggles this class on for the unavailable/error statuses, so the dot's colour agrees with the
   words beside it. */
#coach-service-status.coach-status-degraded i {
  background: var(--coach-gold);
  box-shadow: 0 0 6px rgba(215, 168, 88, 0.5);
}

/* Premium: the free daily coach quota is exhausted -- still a real, usable response (deterministic
   tier), so this reuses the same gold "degraded" dot rather than a red/error one; the label text
   ("Free limit reached") is what actually distinguishes it from an ordinary unavailable state. */
#coach-service-status.coach-status-locked i {
  background: var(--coach-gold);
  box-shadow: 0 0 6px rgba(215, 168, 88, 0.5);
}

/* Premium paywall: once the free daily coach quota is exhausted, Take/Why/Quick Questions/chat
   are all paywalled content (renderCoachContent in app.js hides every one of them), so this card
   takes over the whole remaining panel height rather than sharing space as a small banner would --
   the flex:1 here is what actually claims that space inside .coach-sidebar's flex column. */
.coach-paywall {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.4rem 0;
  padding: 2rem 1.5rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(215, 168, 88, 0.45);
  background:
    radial-gradient(circle at 50% 0%, rgba(215, 168, 88, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(215, 168, 88, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(215, 168, 88, 0.12), 0 18px 40px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: coach-paywall-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.coach-paywall[hidden] {
  display: none;
}

@keyframes coach-paywall-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.coach-paywall-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 0.3rem;
  border-radius: 999px;
  background: rgba(215, 168, 88, 0.16);
  box-shadow: 0 0 0 1px rgba(215, 168, 88, 0.4), 0 0 22px rgba(215, 168, 88, 0.25);
}

.coach-paywall-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--coach-gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coach-paywall-title {
  margin: 0;
  color: var(--coach-cream);
  font-family: Georgia, serif;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
}

.coach-paywall-subtitle {
  margin: 0;
  max-width: 26rem;
  color: rgba(244, 234, 210, 0.78);
  font-size: 0.88rem;
  line-height: 1.5;
}

.coach-paywall-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.4rem 0 0.2rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: rgba(244, 234, 210, 0.92);
}

.coach-paywall-benefits li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.coach-paywall-benefits li::before {
  content: "✓";
  color: var(--coach-gold);
  font-weight: 700;
}

.coach-paywall-cta {
  margin-top: 0.6rem;
  padding: 0.75rem 2.1rem;
  border-radius: 999px;
  border: 1px solid var(--coach-gold);
  background: linear-gradient(180deg, #f0cd83, var(--coach-gold));
  color: #241a08;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(215, 168, 88, 0.35);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}@media (hover: hover) and (pointer: fine) {


.coach-paywall-cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 12px 30px rgba(215, 168, 88, 0.45);
  transform: translateY(-1px);
}
}

.coach-paywall-cta:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 6px 16px rgba(215, 168, 88, 0.35);
}

.coach-paywall-footnote {
  margin: 0.15rem 0 0;
  color: rgba(244, 234, 210, 0.55);
  font-size: 0.76rem;
}

.coach-analysis {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.coach-analysis[hidden] {
  display: none;
}

.coach-idle-message {
  margin: 0;
  padding: 0.8rem 0.85rem;
  border: 1px dashed rgba(215, 168, 88, 0.34);
  border-radius: 14px;
  color: rgba(244, 234, 210, 0.7);
  font-style: italic;
  line-height: 1.45;
}

.coach-idle-message[hidden] {
  display: none;
}

.coach-summary,
.coach-section {
  padding: 0.8rem 0.85rem;
  border: 1px solid rgba(215, 168, 88, 0.34);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.coach-summary p {
  margin: 0.45rem 0 0;
  color: rgba(244, 234, 210, 0.88);
  line-height: 1.45;
}

.coach-why {
  padding: 1rem 1rem 1.05rem;
}

.coach-why ul {
  display: grid;
  gap: 0.7rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.coach-why li {
  position: relative;
  display: block;
  padding-left: 1.35rem;
  color: rgba(244, 234, 210, 0.82);
  font-size: 0.88rem;
  line-height: 1.5;
}

.coach-why li::before {
  position: absolute;
  left: 0;
  top: 0.08em;
  content: "✓";
  color: var(--coach-cyan);
  line-height: 1;
}

.coach-analysis--thinking .coach-summary p,
.coach-thinking-placeholder,
.coach-message--thinking p {
  animation: coach-thinking-pulse 1.25s ease-in-out infinite;
}

.coach-analysis--thinking .coach-summary p::after,
.coach-thinking-placeholder::after,
.coach-message--thinking p::after {
  display: inline-block;
  width: 1.35em;
  color: var(--coach-gold);
  content: "";
  animation: coach-thinking-dots 1.2s steps(4, end) infinite;
}

.coach-why .coach-thinking-placeholder::before {
  position: absolute;
  left: 0.15rem;
  top: 0.45em;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--coach-gold);
  content: "";
  opacity: 0.68;
}

@keyframes coach-thinking-pulse {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 1; }
}

@keyframes coach-thinking-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}

.coach-chat-thread {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  flex: 1;
  min-height: 155px;
  max-height: clamp(9rem, 28vh, 16rem);
  overflow-y: auto;
}

.coach-chat-thread:empty {
  display: none;
}

.coach-chat-thread[hidden] {
  display: none;
}

.coach-message {
  max-width: 90%;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.coach-message--user {
  justify-self: end;
  background: rgba(67, 213, 242, 0.1);
  border: 1px solid rgba(67, 213, 242, 0.18);
}

.coach-message--thinking {
  border: 1px solid rgba(215, 168, 88, 0.22);
  background: rgba(215, 168, 88, 0.055);
}

.coach-message strong {
  color: var(--coach-gold);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.coach-message p {
  margin: 0.18rem 0 0;
  color: rgba(244, 234, 210, 0.86);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .coach-analysis--thinking .coach-summary p,
  .coach-thinking-placeholder,
  .coach-message--thinking p,
  .coach-analysis--thinking .coach-summary p::after,
  .coach-thinking-placeholder::after,
  .coach-message--thinking p::after {
    animation: none;
  }

  .coach-analysis--thinking .coach-summary p::after,
  .coach-thinking-placeholder::after,
  .coach-message--thinking p::after {
    content: "...";
  }
}

.coach-quick-questions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.5rem;
}

.coach-quick-questions button {
  min-height: 32px;
  padding: 0.34rem 0.62rem;
  border: 1px solid rgba(215, 168, 88, 0.4);
  border-radius: 999px;
  color: rgba(244, 234, 210, 0.82);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.76rem;
  cursor: pointer;
}

.coach-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 0.45rem;
  margin-top: auto;
  padding: 0.35rem;
  border: 1px solid rgba(215, 168, 88, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
}

.coach-input[hidden] {
  display: none;
}

.coach-input input {
  min-width: 0;
  padding: 0 0.55rem;
  border: 0;
  outline: 0;
  color: var(--coach-cream);
  background: transparent;
}

.coach-input input::placeholder {
  color: rgba(244, 234, 210, 0.4);
}

.coach-input:focus-within {
  border-color: rgba(67, 213, 242, 0.58);
  box-shadow: 0 0 0 3px rgba(67, 213, 242, 0.08);
}

.coach-input button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(215, 168, 88, 0.42);
  border-radius: 50%;
  color: var(--coach-gold);
  background: rgba(215, 168, 88, 0.11);
  cursor: pointer;
}

.coach-input .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 860px) {
  .lesson-active.coach-expanded .trainer-grid {
    grid-template-columns: minmax(0, 1fr) min(310px, 42vw);
  }

  .coach-sidebar {
    width: min(310px, 42vw);
  }
}

@media (max-width: 650px) {
  .coach-teaser {
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    min-height: 72px;
  }

  .coach-teaser-avatar {
    width: 42px;
    height: 42px;
  }

  .lesson-active.coach-expanded .trainer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Work order 8, part D2: this rule's own positioning (top/right/bottom/width) was confirmed
     dead on every real screen size -- a later, unconditional ".lesson-active .coach-sidebar,
     .lesson-active.session-mode .coach-sidebar" rule (search "docked sidebar system" further down
     this file) ties its specificity and wins on source order regardless of viewport, so none of
     the four properties that used to live here ever actually applied, --coach-dock-keyboard-inset
     included. The real mobile coach-sidebar layout (now a full-width bottom sheet) lives in that
     later block instead. Left removed rather than restored to avoid two competing definitions of
     the same thing sitting in two places in the file. */
}

@media (prefers-reduced-motion: reduce) {
  .coach-teaser,
  .coach-sidebar,
  .lesson-active .trainer-grid {
    transition-duration: 0.01ms;
  }
}

.fk2-table-scene,
.table-dom-layer {
  position: absolute;
  inset: 0;
}

.fk2-table-scene {
  z-index: 0;
}

.fk2-table-scene canvas,
.fk2-table-scene > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.fk2-table-scene > div,
.fk2-table-scene > canvas {
  position: absolute;
  inset: 0;
}

.table-dom-layer {
  z-index: 2;
  pointer-events: none;
}

/* Pluribus replay route only: dev-only mapping puts hero on any of the six
   named seats (not always the trainer's fixed bottom anchor), so a hero
   committed-chip marker can land close enough to the hole cards that the
   card layer's stacking context (a sibling of .table-dom-layer, so the
   marker's own z-index can't win against it) hides the marker underneath.
   Raise the dom layer above the card layer here only, so BB-seat-style
   markers with hero present stay visible; normal trainer stacking (below)
   is untouched. */
.pluribus-replay-active .table-dom-layer {
  z-index: 4;
}

.table-hero-card-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.table-hero-card-layer--hidden .table-hero-cards {
  visibility: visible;
  opacity: 1;
}

.table-hero-card-layer--hidden .table-card {
  padding: 0;
  border-color: transparent;
  background:
    var(--fk-equipped-card-back) center / contain no-repeat,
    linear-gradient(180deg, rgba(8, 31, 45, 0.98), rgba(2, 8, 14, 0.99));
  box-shadow: 0 9px 13px rgba(0, 0, 0, 0.42);
}

.table-hero-card-layer--hidden .table-card > span,
.table-hero-card-layer--hidden .table-card::before,
.table-hero-card-layer--hidden .table-card::after {
  visibility: hidden;
}

.table-dom-layer.pre-action-playback-active .table-hero-cards {
  visibility: hidden;
}

.pre-action-fold-flight {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  z-index: 8;
  display: flex;
  gap: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: preActionFoldFlight var(--fold-duration, 520ms) cubic-bezier(0.2, 0.72, 0.18, 1) forwards;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.28));
}

.pre-action-fold-card {
  display: block;
  width: clamp(22px, 2.45vw, 32px);
  height: clamp(31px, 3.45vw, 45px);
  border: 1px solid rgba(215, 156, 73, 0.44);
  border-radius: 5px;
  background:
    var(--fk-equipped-card-back) center / contain no-repeat,
    linear-gradient(180deg, rgba(8, 31, 45, 0.96), rgba(2, 8, 14, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 170, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.34);
}

.pre-action-fold-card--left {
  transform: rotate(-10deg);
  animation: preActionFoldCardSpinLeft var(--fold-duration, 520ms) cubic-bezier(0.22, 0.68, 0.2, 1) forwards;
}

.pre-action-fold-card--right {
  margin-left: -0.46rem;
  transform: translateY(2px) rotate(8deg);
  animation: preActionFoldCardSpinRight var(--fold-duration, 520ms) cubic-bezier(0.22, 0.68, 0.2, 1) forwards;
}

.preflop-chip-flight {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: preflopChipFlight 1100ms cubic-bezier(0.2, 0.74, 0.2, 1) forwards;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.24));
}

.preflop-chip-flight--preview {
  opacity: 0.72;
  animation-duration: 1100ms;
  filter: drop-shadow(0 0 10px rgba(105, 235, 230, 0.28));
}

.preflop-chip-flight__chip {
  display: block;
  width: clamp(12px, 1.25vw, 18px);
  height: clamp(12px, 1.25vw, 18px);
  border-radius: 999px;
  border: 1px solid rgba(237, 197, 126, 0.6);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 247, 211, 0.82), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(22, 114, 136, 0.45), transparent 46%),
    linear-gradient(145deg, rgba(218, 61, 78, 0.92), rgba(115, 23, 47, 0.96));
  box-shadow:
    inset 0 0 0 2px rgba(255, 236, 177, 0.2),
    0 5px 8px rgba(0, 0, 0, 0.2);
}

.preflop-chip-flight__chip--second {
  margin-left: -0.42rem;
  transform: translateY(0.14rem);
}

/* Pluribus replay route flop reveal: one face-down card appears at the board
   position, spreads into three face-down cards, then all three flip to show
   the real flop. Scoped to .pluribus-replay-active so normal trainer board
   reveals (which stay instant) are untouched. Positioned with the same
   top formula as .lesson-active .board-zone so the deal lands exactly where
   the real board renders once the transient node is removed. */
.pluribus-replay-active .pluribus-flop-deal {
  position: absolute;
  left: 50%;
  top: calc(53.8% - clamp(56px, 4.2vw, 78px));
  z-index: 8;
  display: flex;
  gap: clamp(0.25rem, 1vw, 0.45rem);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.pluribus-replay-active .pluribus-board-card-deal {
  --board-card-w: clamp(34px, 5.5vw, 48px);
  --board-card-gap: clamp(0.25rem, 1vw, 0.45rem);
  position: absolute;
  left: 50%;
  top: calc(53.8% - clamp(56px, 4.2vw, 78px));
  z-index: 8;
  display: flex;
  gap: var(--board-card-gap);
  pointer-events: none;
  /* Starts offset right by half a card's width so the row reads exactly where
     the real (one-card-shorter) board currently sits; the --shift phase then
     slides the whole group - the already-revealed cards plus the new empty
     slot - left into its final centered position, opening up room for the
     new card before it deals in. */
  transform: translate(calc(-50% + (var(--board-card-w) + var(--board-card-gap)) / 2), -50%);
  transition: transform var(--board-card-shift-ms, 360ms) cubic-bezier(0.2, 0.82, 0.2, 1);
}

.pluribus-replay-active .pluribus-board-card-deal--shift {
  transform: translate(-50%, -50%);
}

/* The real (pre-deal) board sits underneath this overlay and doesn't update
   until the whole animation finishes, so it must vanish the moment the
   overlay starts sliding left - otherwise the old, still-centered board
   shows through behind the moving one for the entire animation. */
.pluribus-replay-active .table-dom-layer:has(.pluribus-board-card-deal--shift) .board-cards {
  visibility: hidden;
}

.pluribus-replay-active .pluribus-flop-deal-card {
  display: block;
  width: clamp(34px, 5.5vw, 48px);
  height: clamp(48px, 7.8vw, 68px);
  perspective: 600px;
  opacity: 0;
  transform: translateX(0) scale(0.86);
  transition: none;
}

.pluribus-replay-active .pluribus-board-card-deal-slot,
.pluribus-replay-active .pluribus-board-card-deal-card {
  display: block;
  width: clamp(34px, 5.5vw, 48px);
  height: clamp(48px, 7.8vw, 68px);
}

.pluribus-replay-active .pluribus-board-card-deal-slot {
  visibility: hidden;
}

.pluribus-replay-active .pluribus-board-card-deal-card {
  perspective: 600px;
  /* Sits below the table until the --slide phase (which only starts once the
     --shift phase above has finished opening its slot) lifts it into place. */
  transform: translateY(65%) scale(0.9);
  transition: transform var(--board-card-slide-ms, 420ms) cubic-bezier(0.2, 0.82, 0.2, 1);
}

.pluribus-replay-active .pluribus-board-card-deal--slide .pluribus-board-card-deal-card,
.pluribus-replay-active .pluribus-board-card-deal--flip .pluribus-board-card-deal-card {
  transform: translateY(0) scale(1);
}

.pluribus-replay-active .pluribus-flop-deal-card--0 {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.pluribus-replay-active .pluribus-flop-deal-card--1 {
  transform: translateX(calc(-100% - clamp(0.25rem, 1vw, 0.45rem))) scale(0.94);
}

.pluribus-replay-active .pluribus-flop-deal-card--2 {
  transform: translateX(calc(-200% - (2 * clamp(0.25rem, 1vw, 0.45rem)))) scale(0.9);
}

/* Spread phase: the first card starts in the real left flop slot; cards 2 and
   3 begin stacked behind it, then slide left-to-right into the exact flex
   positions the final .board-cards render will use. */
.pluribus-replay-active .pluribus-flop-deal--spread .pluribus-flop-deal-card {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: transform var(--flop-spread-ms, 420ms) cubic-bezier(0.2, 0.82, 0.2, 1), opacity var(--flop-spread-ms, 420ms) ease-out;
}

.pluribus-replay-active .pluribus-flop-deal-card__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flop-flip-ms, 520ms) cubic-bezier(0.32, 0.1, 0.18, 1);
}

.pluribus-replay-active .pluribus-flop-deal--flip .pluribus-flop-deal-card__inner,
.pluribus-replay-active .pluribus-board-card-deal--flip .pluribus-flop-deal-card__inner {
  transform: rotateY(180deg);
}

.pluribus-replay-active .pluribus-flop-deal-card__back,
.pluribus-replay-active .pluribus-flop-deal-card__front {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0.38rem;
  border-radius: 8px;
  backface-visibility: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 18px rgba(0, 0, 0, 0.28);
}

.pluribus-replay-active .pluribus-flop-deal-card__back {
  background:
    var(--fk-equipped-card-back) center / contain no-repeat,
    linear-gradient(180deg, rgba(8, 31, 45, 0.98), rgba(2, 8, 14, 0.99));
  border: 1px solid rgba(215, 156, 73, 0.4);
}

.pluribus-replay-active .pluribus-flop-deal-card__front {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 78% 18%, rgba(76, 174, 255, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(219, 238, 245, 0.98));
  color: #162129;
  font-family: "Rockwell", "Georgia", serif;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  font-weight: 800;
  line-height: 1;
}

.pluribus-replay-active .pluribus-flop-deal-card__front .board-suit {
  align-self: end;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 0.9em;
}

#summary-modal .modal-card {
  width: min(920px, 100%);
}

.session-summary-card {
  display: flex;
  align-items: center;
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  padding: clamp(1.15rem, 2.7vw, 2rem) clamp(1.2rem, 4vw, 4rem) clamp(1rem, 2.5vw, 1.65rem);
  overflow: auto;
  gap: clamp(0.62rem, 1.4vw, 1rem);
  text-align: center;
}

.session-summary-card h3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.36rem;
  margin: 0 auto;
  padding: 0.22rem 0.72rem;
  border: 1px solid rgba(51, 214, 195, 0.26);
  border-radius: 999px;
  background: rgba(0, 24, 31, 0.58);
  color: rgba(190, 255, 248, 0.9);
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 860;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: 0 0 16px rgba(51, 214, 195, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#summary-modal .summary-status-pill,
#summary-modal .summary-hero-copy p {
  display: none;
}

.summary-hero {
  display: block;
  width: 100%;
}

.summary-hero-copy {
  display: grid;
  justify-items: center;
  gap: clamp(0.4rem, 1vw, 0.62rem);
}

.summary-grade-hero,
.summary-hero-copy .summary-grade-hero {
  display: grid;
  justify-items: center;
  min-height: 0;
  margin: 0;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 18px rgba(240, 187, 89, 0.12));
}

.summary-grade-image,
.summary-hero-copy .summary-grade-image {
  width: min(100%, clamp(9.6rem, 20vw, 13rem));
  height: auto;
  max-height: clamp(9.6rem, 20vw, 13rem);
  object-fit: contain;
}

.summary-grade-label {
  margin-top: -0.32rem;
  color: var(--teal-soft);
  font-size: 0.66rem;
  font-weight: 860;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
}

#modal-grade-name {
  display: block;
  margin-top: 0.18rem;
  color: #fbfbf4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 6.4vw, 4.15rem);
  font-weight: 760;
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow: 0 14px 30px rgba(0, 0, 0, 0.32), 0 0 24px rgba(246, 207, 124, 0.1);
}

.summary-primary-result {
  display: grid;
  justify-items: center;
  gap: 0.18rem;
  margin-top: 0.1rem;
}

.summary-primary-result::before {
  content: "";
  width: min(19rem, 58vw);
  height: 1px;
  margin-bottom: 0.36rem;
  background: linear-gradient(90deg, transparent, rgba(240, 187, 89, 0.42), transparent);
}

.summary-primary-result span {
  color: var(--teal-soft);
  font-size: 0.82rem;
  font-weight: 880;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.summary-primary-result strong {
  color: #fbfbf4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 11vw, 6.4rem);
  font-weight: 690;
  line-height: 0.92;
  letter-spacing: 0;
  text-shadow: 0 18px 34px rgba(0, 0, 0, 0.34), 0 0 22px rgba(255, 255, 255, 0.06);
}

.summary-metrics-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: auto;
  width: min(100%, 44rem);
  gap: 0;
  margin: clamp(0.3rem, 1.2vw, 0.7rem) auto 0;
}

.summary-metric-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 0.08rem clamp(1rem, 3.2vw, 2rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.summary-metric-row + .summary-metric-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: rgba(176, 240, 255, 0.22);
}

.summary-metric-icon {
  align-self: center;
  width: 2.55rem;
  height: 2.55rem;
  margin-right: 0.76rem;
}

.summary-metric-value-stack {
  justify-items: start;
  text-align: left;
}

.summary-metric-value-stack > span {
  color: var(--teal-soft);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.summary-metric-row strong {
  margin-top: 0.16rem;
  font-size: clamp(1.82rem, 4.4vw, 2.55rem);
}

.summary-metric-delta {
  margin-top: 0.2rem;
  font-size: 0.66rem;
}

.summary-rank-progress {
  width: min(100%, 58rem);
  margin-top: clamp(0.24rem, 1.2vw, 0.7rem);
}

.summary-rank-labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  color: var(--gold);
  font-size: clamp(1rem, 2vw, 1.28rem);
  font-weight: 860;
  line-height: 1;
}

.summary-rank-labels span:last-child {
  color: var(--teal-soft);
}

.summary-rank-track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(176, 240, 255, 0.17);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.42);
}

.summary-rank-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--teal-soft));
  box-shadow: 0 0 16px rgba(124, 238, 228, 0.38);
  transition: width 700ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.summary-feedback-line {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(100%, 48rem);
  gap: 0.72rem;
  margin-top: clamp(0.28rem, 1.2vw, 0.8rem);
  color: rgba(238, 251, 255, 0.88);
}

.summary-feedback-line span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(124, 238, 228, 0.6);
  border-radius: 50%;
  color: var(--teal-soft);
  font-size: 1rem;
  box-shadow: 0 0 16px rgba(124, 238, 228, 0.08);
}

.summary-feedback-line p {
  margin: 0;
  font-size: clamp(1rem, 2.1vw, 1.26rem);
  line-height: 1.25;
  text-align: left;
}

.summary-details-panel {
  display: grid;
  width: 100%;
  gap: 0.58rem;
  min-height: 0;
  margin-top: 0.22rem;
}

.summary-details-panel .summary-results-band {
  display: block;
  margin-top: 0;
}

.summary-details-panel .summary-impact-card--rating {
  grid-template-columns: minmax(0, 0.82fr) minmax(10rem, 1fr);
}

.summary-details-panel .summary-review-section {
  min-height: min(12rem, 24vh);
}

#summary-modal .modal-actions {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) minmax(10rem, 15rem);
  justify-content: center;
  width: min(100%, 34rem);
  gap: 1rem;
  margin-top: clamp(0.24rem, 1.2vw, 0.7rem);
}

#summary-modal .modal-actions .primary-button,
#summary-modal .modal-actions .secondary-button {
  min-height: 3.15rem;
  border-radius: 8px;
  font-size: 1rem;
}

#summary-modal .modal-actions .primary-button {
  color: #061016;
  background: linear-gradient(180deg, #ffd86e, #efad2f);
  border-color: rgba(255, 230, 142, 0.9);
  box-shadow:
    0 0 24px rgba(240, 187, 89, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

#summary-modal .modal-actions .secondary-button {
  color: #f4fcff;
  border-color: rgba(124, 238, 228, 0.55);
  background: rgba(0, 18, 28, 0.48);
}

#summary-modal .modal-actions .primary-button:focus-visible,
#summary-modal .modal-actions .secondary-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0, 8, 12, 0.9),
    0 0 0 5px rgba(124, 238, 228, 0.65),
    0 0 24px rgba(124, 238, 228, 0.18);
}

@media (max-width: 760px) {
  #summary-modal .modal-card,
  .session-summary-card {
    width: min(100%, calc(100vw - 24px));
  }

  .session-summary-card {
    padding: 1rem 0.86rem;
    gap: 0.64rem;
  }

  .summary-grade-image,
  .summary-hero-copy .summary-grade-image {
    width: min(100%, clamp(7.8rem, 42vw, 10rem));
    max-height: clamp(7.8rem, 42vw, 10rem);
  }

  .summary-metrics-panel {
    width: 100%;
  }

  .summary-metric-row {
    padding: 0.06rem clamp(0.48rem, 2.5vw, 0.86rem);
  }

  .summary-metric-icon {
    width: 2rem;
    height: 2rem;
    margin-right: 0.48rem;
  }

  .summary-metric-icon svg {
    width: 1.08rem;
    height: 1.08rem;
  }

  .summary-metric-value-stack > span {
    font-size: 0.52rem;
  }

  .summary-metric-row strong {
    font-size: clamp(1.3rem, 8vw, 1.72rem);
  }

  .summary-metric-delta {
    display: none;
  }

  .summary-feedback-line {
    align-items: flex-start;
  }

  .summary-feedback-line p {
    font-size: 0.94rem;
  }

  #summary-modal .modal-actions {
    grid-template-columns: 1fr;
    gap: 0.64rem;
  }

  .summary-details-panel .summary-impact-card--rating {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "value"
      "delta"
      "graph"
      "track"
      "scale";
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  .session-summary-card {
    padding-top: 0.86rem;
    padding-bottom: 0.86rem;
    gap: 0.46rem;
  }

  .summary-grade-image,
  .summary-hero-copy .summary-grade-image {
    width: min(100%, clamp(7.6rem, 15vw, 9.8rem));
    max-height: clamp(7.6rem, 15vw, 9.8rem);
  }

  #modal-grade-name {
    font-size: clamp(2.1rem, 5.2vw, 3.35rem);
  }

  .summary-primary-result strong {
    font-size: clamp(3.25rem, 8.5vw, 5rem);
  }
}

/* Final summary-review concept cascade: keep this after legacy modal rules. */
#summary-modal .modal-card {
  width: min(920px, 100%);
}

.session-summary-card {
  display: flex;
  align-items: center;
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  padding: clamp(0.95rem, 2.2vw, 1.55rem) clamp(1.2rem, 4vw, 4rem) clamp(0.9rem, 2vw, 1.35rem);
  gap: clamp(0.48rem, 1.05vw, 0.82rem);
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
}

.session-summary-card h3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.36rem;
  margin: 0 auto;
  padding: 0.22rem 0.72rem;
  border: 1px solid rgba(51, 214, 195, 0.26);
  border-radius: 999px;
  background: rgba(0, 24, 31, 0.58);
  color: rgba(190, 255, 248, 0.9);
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 860;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
}

#summary-modal .summary-status-pill,
#summary-modal .summary-hero-copy p {
  display: none;
}

.summary-hero {
  display: block;
  width: 100%;
}

.summary-hero-copy {
  display: grid;
  justify-items: center;
  gap: clamp(0.32rem, 0.86vw, 0.52rem);
}

.summary-grade-hero,
.summary-hero-copy .summary-grade-hero {
  display: grid;
  justify-items: center;
  min-height: 0;
  margin: 0;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 18px rgba(240, 187, 89, 0.12));
}

.summary-grade-image,
.summary-hero-copy .summary-grade-image {
  width: min(100%, clamp(8rem, 16vw, 10.8rem));
  height: auto;
  max-height: clamp(8rem, 16vw, 10.8rem);
  object-fit: contain;
}

.summary-grade-label {
  margin-top: -0.28rem;
  color: var(--teal-soft);
  font-size: 0.66rem;
  font-weight: 860;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
}

#modal-grade-name {
  display: block;
  margin-top: 0.14rem;
  color: #fbfbf4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 5.4vw, 3.55rem);
  font-weight: 760;
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow: 0 14px 30px rgba(0, 0, 0, 0.32), 0 0 24px rgba(246, 207, 124, 0.1);
}

.summary-primary-result {
  display: grid;
  justify-items: center;
  gap: 0.14rem;
  margin-top: 0;
}

.summary-primary-result strong {
  color: #fbfbf4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.35rem, 9vw, 5.35rem);
  font-weight: 690;
  line-height: 0.92;
  letter-spacing: 0;
}

.summary-primary-result span {
  color: var(--teal-soft);
  font-size: 0.78rem;
  font-weight: 880;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.summary-metrics-panel {
  display: flex;
  grid-column: auto;
  justify-content: center;
  align-items: center;
  width: min(100%, 42rem);
  gap: 0;
  margin: clamp(0.18rem, 0.84vw, 0.48rem) auto 0;
  padding: 0;
}

.summary-metric-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 0.04rem clamp(0.9rem, 2.7vw, 1.75rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.summary-metric-row + .summary-metric-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: rgba(176, 240, 255, 0.22);
}

.summary-metric-icon {
  align-self: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-right: 0.68rem;
}

.summary-metric-value-stack {
  justify-items: start;
  text-align: left;
}

.summary-metric-value-stack > span {
  color: var(--teal-soft);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
}

.summary-metric-row strong {
  margin-top: 0.12rem;
  font-size: clamp(1.56rem, 3.7vw, 2.18rem);
}

.summary-rank-progress {
  width: min(100%, 56rem);
  margin-top: clamp(0.16rem, 0.8vw, 0.42rem);
}

.summary-feedback-line {
  max-width: min(100%, 48rem);
  margin-top: clamp(0.18rem, 0.8vw, 0.52rem);
}

#summary-modal .modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(10rem, 15rem));
  justify-content: center;
  width: min(100%, 32rem);
  gap: 1rem;
  margin-top: clamp(0.18rem, 0.8vw, 0.52rem);
}

#summary-modal .modal-actions .primary-button,
#summary-modal .modal-actions .secondary-button {
  min-height: 3rem;
  padding: 0.62rem 0.95rem;
  border-radius: 8px;
  font-size: 1rem;
}

@media (max-width: 760px) {
  #summary-modal .modal-card,
  .session-summary-card {
    width: min(100%, calc(100vw - 24px));
  }

  .session-summary-card {
    padding: 0.86rem;
    gap: 0.5rem;
  }

  .summary-grade-image,
  .summary-hero-copy .summary-grade-image {
    width: min(100%, clamp(6.6rem, 34vw, 8.4rem));
    max-height: clamp(6.6rem, 34vw, 8.4rem);
  }

  #modal-grade-name {
    font-size: clamp(1.9rem, 9vw, 2.7rem);
  }

  .summary-primary-result strong {
    font-size: clamp(3rem, 16vw, 4.2rem);
  }

  .summary-metric-row {
    padding: 0.04rem clamp(0.38rem, 2vw, 0.72rem);
  }

  .summary-metric-icon {
    width: 1.82rem;
    height: 1.82rem;
    margin-right: 0.44rem;
  }

  .summary-metric-icon svg {
    width: 1rem;
    height: 1rem;
  }

  .summary-metric-value-stack > span {
    font-size: 0.48rem;
  }

  .summary-metric-row strong {
    font-size: clamp(1.16rem, 7vw, 1.54rem);
  }

  .summary-feedback-line p {
    font-size: 0.9rem;
  }

  #summary-modal .modal-actions {
    grid-template-columns: 1fr;
    gap: 0.58rem;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  .session-summary-card {
    padding-top: 0.74rem;
    padding-bottom: 0.74rem;
    gap: 0.38rem;
  }

  .summary-grade-image,
  .summary-hero-copy .summary-grade-image {
    width: min(100%, clamp(6.8rem, 13vw, 8.6rem));
    max-height: clamp(6.8rem, 13vw, 8.6rem);
  }

  #modal-grade-name {
    font-size: clamp(1.95rem, 4.6vw, 2.9rem);
  }

  .summary-primary-result strong {
    font-size: clamp(3rem, 7.8vw, 4.45rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pluribus-replay-active .pluribus-flop-deal,
  .pluribus-replay-active .pluribus-board-card-deal {
    display: none;
  }
}

/* Pluribus replay route "Check" feedback: a "CHECK" text stamp appears at the
   acting seat's committed-chip marker anchor. Backing reuses the exact dark
   rounded-pill tokens .blind-marker__amount already uses elsewhere in this
   file (rgba(2, 10, 14, 0.48) fill, rgba(219, 162, 82, 0.15) border) with the
   app's own --gold/--gold-strong tokens for the letterforms - no new hex
   values. The wrapper reuses the real committed-chip marker's own position
   classes untouched; only this inner stamp animates. */
.pluribus-replay-active .pluribus-check-stamp {
  display: inline-block;
  padding: 0.1rem 0.5rem 0.14rem;
  border: 1px solid rgba(219, 162, 82, 0.15);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 235, 186, 0.035), rgba(255, 235, 186, 0.008)),
    rgba(2, 10, 14, 0.48);
  color: var(--gold-strong);
  font-size: clamp(0.56rem, 0.68vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.26);
  animation: pluribusCheckStamp var(--check-stamp-duration, 900ms) ease-out both;
}

@keyframes pluribusCheckStamp {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1.6);
  }

  15% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pluribus-replay-active .pluribus-check-stamp {
    animation: none;
    opacity: 0;
  }
}

@keyframes preActionFoldFlight {
  0% {
    left: var(--start-x);
    top: var(--start-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92) rotate(-7deg);
  }

  12% {
    opacity: 0.92;
  }

  72% {
    opacity: 0.48;
  }

  84% {
    opacity: 0;
  }

  100% {
    left: var(--end-x);
    top: var(--end-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58) rotate(24deg);
  }
}

@keyframes preActionFoldCardSpinLeft {
  0% {
    transform: translateX(0) rotate(-10deg);
  }

  42% {
    transform: translateX(-0.08rem) rotate(-108deg);
  }

  82% {
    transform: translateX(0.08rem) rotate(-218deg);
  }

  100% {
    transform: translateX(0.14rem) rotate(-256deg);
  }
}

@keyframes preActionFoldCardSpinRight {
  0% {
    transform: translateY(2px) rotate(8deg);
  }

  42% {
    transform: translateY(1px) translateX(0.1rem) rotate(126deg);
  }

  82% {
    transform: translateY(0) translateX(-0.04rem) rotate(244deg);
  }

  100% {
    transform: translateY(-1px) translateX(-0.12rem) rotate(284deg);
  }
}

@keyframes preflopChipFlight {
  0% {
    left: var(--start-x);
    top: var(--start-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }

  16% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.72;
  }

  100% {
    left: var(--end-x);
    top: var(--end-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.66);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pre-action-fold-flight,
  .preflop-chip-flight {
    display: none;
  }
}

.board-zone {
  position: absolute;
  left: 50%;
  top: calc(53.8% - clamp(56px, 4.2vw, 78px));
  z-index: 2;
  transform: translate(-50%, -50%);
}

/* Sits above .board-cards, pinned to its top edge (bottom: 100%) so it never
   participates in .board-zone's own box size - growing it (to fit the result
   bar) only pushes its own content upward and never moves the cards. */
.board-topline {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  display: flex;
  width: max-content;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.board-pot-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.26rem 0.72rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(2, 14, 23, 0.88);
  border: 1px solid rgba(240, 187, 89, 0.38);
  color: var(--gold-strong);
  font-size: clamp(0.76rem, 1.4vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}

.board-pot-label span {
  color: rgba(220, 188, 132, 0.72);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board-pot-label strong {
  color: #ffe69a;
  font-size: clamp(0.82rem, 1.5vw, 0.94rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.table-pot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(3, 16, 26, 0.82);
  border: 1px solid rgba(240, 187, 89, 0.38);
  color: var(--gold-strong);
  font-size: clamp(0.78rem, 1.8vw, 0.92rem);
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
}

.table-pot-badge {
  position: absolute;
  left: 50%;
  /* Work order 10 item 8: --pot-badge-lift (app.js's placePotBadgeCollisionAware, set on
     #table-visual) replaces two separate hand-tuned mobile-viewport-width overrides that used to
     lift the badge higher unconditionally below 480/760px -- this lifts it only when it actually
     overlaps hero's own cards, at any table size or viewport, and leaves it at its normal spot
     otherwise. The clamp(56-78px) fallback is the pre-existing default position, unchanged. */
  top: calc(55.8% - var(--pot-badge-lift, clamp(56px, 4.2vw, 78px)));
  z-index: 3;
  display: grid;
  width: clamp(90px, 5.5vw, 110px);
  height: clamp(42px, 2.65vw, 52px);
  min-width: 0;
  min-height: 0;
  place-items: center;
  align-content: center;
  gap: 0.22rem;
  padding: 0.42rem 0.7rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 239, 194, 0.052), rgba(255, 239, 194, 0.012)),
    radial-gradient(circle at 50% 0%, rgba(18, 68, 86, 0.17), transparent 64%),
    rgba(1, 9, 13, 0.72);
  color: rgba(220, 188, 132, 0.78);
  font-size: clamp(0.78rem, 1.18vw, 0.92rem);
  font-weight: 580;
  line-height: 1;
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 170, 0.055),
    inset 0 -9px 16px rgba(0, 0, 0, 0.18),
    0 5px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
}

@media (max-width: 760px) {
  .table-pot-badge {
    top: calc(44% - var(--pot-badge-lift, 0px));
  }
}

.table-pot-badge__label {
  color: rgba(209, 153, 78, 0.72);
  font-size: clamp(0.62rem, 0.68vw, 0.72rem);
  font-weight: 620;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.table-pot-badge__value {
  color: rgba(231, 205, 159, 0.84);
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42);
}

/* Collapsible row between the pot label and the board cards. Animating
   grid-template-rows 0fr -> 1fr smoothly reveals the result bar and, because
   .board-topline sits above the fixed board cards, that growth reads as the
   pot label sliding up to make room rather than the board jumping. */
.board-result-slot {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  justify-items: center;
  transition: grid-template-rows 340ms cubic-bezier(0.2, 0.8, 0.24, 1);
}

.board-result-slot--active {
  grid-template-rows: 1fr;
}

.board-result-slot__inner {
  overflow: hidden;
  min-height: 0;
}

.board-result-slot--active .board-result-slot__inner {
  padding-top: 0.4rem;
}

.board-result-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.05rem 0.2rem;
  white-space: nowrap;
  pointer-events: none;
  animation: boardResultBarReveal 480ms cubic-bezier(0.2, 1.2, 0.24, 1) both;
}

.board-result-bar strong {
  font-size: clamp(0.78rem, 1vw, 0.98rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}

.board-result-bar--win {
  filter: drop-shadow(0 0 10px rgba(124, 238, 228, 0.24));
}

.board-result-bar--win strong {
  color: #ffe69a;
  text-shadow:
    0 0 7px rgba(240, 187, 89, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.78);
}

.board-result-bar--lose {
  filter: drop-shadow(0 0 10px rgba(240, 108, 92, 0.22));
}

.board-result-bar--lose strong {
  color: #f0a89c;
  text-shadow:
    0 0 7px rgba(240, 108, 92, 0.32),
    0 1px 2px rgba(0, 0, 0, 0.78);
}

.board-result-bar__rule {
  position: relative;
  display: block;
  width: clamp(28px, 2.4vw, 44px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 238, 228, 0.78));
}

.board-result-bar--lose .board-result-bar__rule {
  background: linear-gradient(90deg, transparent, rgba(240, 108, 92, 0.7));
}

.board-result-bar__rule:last-child {
  background: linear-gradient(90deg, rgba(124, 238, 228, 0.78), transparent);
}

.board-result-bar--lose .board-result-bar__rule:last-child {
  background: linear-gradient(90deg, rgba(240, 108, 92, 0.7), transparent);
}

.board-result-bar__rule::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(124, 238, 228, 0.9);
  box-shadow: 0 0 10px rgba(124, 238, 228, 0.72);
  transform: translateY(-50%);
}

.board-result-bar--lose .board-result-bar__rule::after {
  background: rgba(240, 108, 92, 0.9);
  box-shadow: 0 0 10px rgba(240, 108, 92, 0.72);
}

.board-result-bar__rule:last-child::after {
  right: auto;
  left: -2px;
}

@keyframes boardResultBarReveal {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  58% {
    opacity: 1;
    transform: scale(1.06);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.pluribus-pot-winner-trail {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 3;
  width: var(--trail-length, 18%);
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(124, 238, 228, 0), rgba(124, 238, 228, 0.5), rgba(240, 187, 89, 0));
  box-shadow: 0 0 14px rgba(124, 238, 228, 0.18);
  opacity: 0;
  transform: rotate(var(--trail-angle, 0deg)) scaleX(0);
  transform-origin: left center;
  animation: pluribusWinnerTrail 1100ms cubic-bezier(0.2, 0.72, 0.22, 1) 110ms both;
  pointer-events: none;
}

.pluribus-winner-effect {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 65%);
  z-index: 7;
  width: clamp(78px, 7.2vw, 112px);
  height: clamp(78px, 7.2vw, 112px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pluribus-winner-effect__aura {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(124, 238, 228, 0.58);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(124, 238, 228, 0.14), rgba(124, 238, 228, 0.04) 42%, transparent 68%);
  box-shadow:
    0 0 18px rgba(124, 238, 228, 0.44),
    0 0 30px rgba(240, 187, 89, 0.18),
    inset 0 0 16px rgba(240, 187, 89, 0.18);
  opacity: 0;
  animation:
    pluribusWinnerAuraIn 680ms cubic-bezier(0.18, 0.9, 0.24, 1) both,
    pluribusWinnerAuraPulse 2400ms ease-in-out 680ms infinite;
}

.pluribus-winner-effect__aura::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: inherit;
  background: conic-gradient(from 40deg, transparent, rgba(255, 230, 154, 0.48), transparent 28%, rgba(124, 238, 228, 0.34), transparent 58%);
  opacity: 0.5;
  mask: radial-gradient(circle, transparent 58%, #000 60%, #000 65%, transparent 67%);
  animation: pluribusWinnerShimmer 2800ms linear 560ms infinite;
}

.pluribus-winner-effect__gain {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0.1rem 0.32rem 0.13rem;
  border-radius: 999px;
  background: rgba(2, 10, 14, 0.58);
  color: #7ceee4;
  font-size: clamp(0.76rem, 1.2vw, 0.98rem);
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1;
  text-shadow:
    0 0 9px rgba(124, 238, 228, 0.42),
    0 1px 2px rgba(0, 0, 0, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.08),
    0 0 18px rgba(124, 238, 228, 0.14);
  opacity: 0;
  transform: translate(-142%, -20%) scale(0.92);
  animation: pluribusWinnerGain 920ms cubic-bezier(0.17, 0.82, 0.22, 1) 240ms both;
  white-space: nowrap;
}

.pluribus-winner-effect--top .pluribus-winner-effect__gain {
  transform: translate(20%, 4%) scale(0.92);
}

.pluribus-winner-effect--left .pluribus-winner-effect__gain {
  transform: translate(18%, -50%) scale(0.92);
}

.pluribus-winner-effect--right .pluribus-winner-effect__gain {
  transform: translate(-146%, -50%) scale(0.92);
}

.pluribus-winner-effect--bottom .pluribus-winner-effect__gain {
  transform: translate(-138%, 54%) scale(0.92);
}

.pluribus-winner-effect--bottom-right .pluribus-winner-effect__gain,
.pluribus-winner-effect--seat-sb .pluribus-winner-effect__gain {
  transform: translate(72%, 54%) scale(0.92);
}

.pluribus-winner-effect--bottom-left .pluribus-winner-effect__gain,
.pluribus-winner-effect--bottom-middle .pluribus-winner-effect__gain,
.pluribus-winner-effect--seat-bb .pluribus-winner-effect__gain,
.pluribus-winner-effect--seat-sb-btn .pluribus-winner-effect__gain {
  transform: translate(42%, 54%) scale(0.92);
}

@keyframes pluribusWinnerTrail {
  0% {
    opacity: 0;
    transform: rotate(var(--trail-angle, 0deg)) scaleX(0);
  }

  28% {
    opacity: 0.62;
  }

  100% {
    opacity: 0;
    transform: rotate(var(--trail-angle, 0deg)) scaleX(1);
  }
}

@keyframes pluribusWinnerAuraIn {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }

  64% {
    opacity: 0.95;
    transform: scale(1.04);
  }

  100% {
    opacity: 0.78;
    transform: scale(1);
  }
}

@keyframes pluribusWinnerAuraPulse {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(1);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.045);
  }
}

@keyframes pluribusWinnerShimmer {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pluribusWinnerGain {
  0% {
    opacity: 0;
    margin-top: 0.55rem;
  }

  52% {
    opacity: 1;
    margin-top: -0.08rem;
  }

  100% {
    opacity: 0.92;
    margin-top: 0;
  }
}

.pluribus-loser-effect {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 65%);
  z-index: 7;
  width: clamp(78px, 7.2vw, 112px);
  height: clamp(78px, 7.2vw, 112px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pluribus-loser-effect__aura {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(240, 108, 92, 0.5);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(240, 108, 92, 0.12), rgba(240, 108, 92, 0.03) 42%, transparent 68%);
  box-shadow:
    0 0 16px rgba(240, 108, 92, 0.32),
    inset 0 0 14px rgba(120, 40, 34, 0.18);
  opacity: 0;
  animation: pluribusLoserAuraIn 680ms cubic-bezier(0.18, 0.9, 0.24, 1) both;
}

.pluribus-loser-effect__gain {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0.1rem 0.32rem 0.13rem;
  border-radius: 999px;
  background: rgba(2, 10, 14, 0.58);
  color: #f0a89c;
  font-size: clamp(0.76rem, 1.2vw, 0.98rem);
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1;
  text-shadow:
    0 0 9px rgba(240, 108, 92, 0.36),
    0 1px 2px rgba(0, 0, 0, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.06),
    0 0 14px rgba(240, 108, 92, 0.12);
  opacity: 0;
  transform: translate(-142%, -20%) scale(0.92);
  animation: pluribusLoserGain 920ms cubic-bezier(0.17, 0.82, 0.22, 1) 240ms both;
  white-space: nowrap;
}

.pluribus-loser-effect--top .pluribus-loser-effect__gain {
  transform: translate(20%, 4%) scale(0.92);
}

.pluribus-loser-effect--left .pluribus-loser-effect__gain {
  transform: translate(18%, -50%) scale(0.92);
}

.pluribus-loser-effect--right .pluribus-loser-effect__gain {
  transform: translate(-146%, -50%) scale(0.92);
}

.pluribus-loser-effect--bottom .pluribus-loser-effect__gain {
  transform: translate(-138%, 54%) scale(0.92);
}

.pluribus-loser-effect--bottom-right .pluribus-loser-effect__gain,
.pluribus-loser-effect--seat-sb .pluribus-loser-effect__gain {
  transform: translate(72%, 54%) scale(0.92);
}

.pluribus-loser-effect--bottom-left .pluribus-loser-effect__gain,
.pluribus-loser-effect--bottom-middle .pluribus-loser-effect__gain,
.pluribus-loser-effect--seat-bb .pluribus-loser-effect__gain,
.pluribus-loser-effect--seat-sb-btn .pluribus-loser-effect__gain {
  transform: translate(42%, 54%) scale(0.92);
}

@keyframes pluribusLoserAuraIn {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }

  64% {
    opacity: 0.85;
    transform: scale(1.04);
  }

  100% {
    opacity: 0.68;
    transform: scale(1);
  }
}

@keyframes pluribusLoserGain {
  0% {
    opacity: 0;
    margin-top: 0.55rem;
  }

  52% {
    opacity: 1;
    margin-top: -0.08rem;
  }

  100% {
    opacity: 0.9;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pluribus-pot-winner-trail {
    display: none;
  }

  .pluribus-winner-effect__aura,
  .pluribus-winner-effect__aura::after,
  .pluribus-winner-effect__gain,
  .pluribus-loser-effect__aura,
  .pluribus-loser-effect__gain {
    animation: none;
    opacity: 0.86;
  }

  .board-result-slot {
    transition: none;
  }

  .board-result-bar {
    animation: none;
  }
}

.table-hero-cards--villain-showdown {
  opacity: 0.96;
}

.pluribus-fold-reveal {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 65%);
  z-index: 31;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.pluribus-fold-reveal__button {
  display: grid;
  place-items: center;
  width: clamp(34px, 3.8vw, 42px);
  height: clamp(28px, 3.3vw, 36px);
  border: 1px solid rgba(240, 187, 89, 0.48);
  border-radius: 999px;
  background: rgba(3, 16, 26, 0.88);
  color: rgba(246, 223, 171, 0.95);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition:
    transform 120ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}@media (hover: hover) and (pointer: fine) {
  .pluribus-fold-reveal__button:hover {
  border-color: rgba(246, 223, 171, 0.78);
  color: #fff2c9;
  box-shadow:
    0 0 0 3px rgba(240, 187, 89, 0.14),
    0 14px 24px rgba(0, 0, 0, 0.3);
}
}

.pluribus-fold-reveal__button:focus-visible {
  border-color: rgba(246, 223, 171, 0.78);
  color: #fff2c9;
  box-shadow:
    0 0 0 3px rgba(240, 187, 89, 0.14),
    0 14px 24px rgba(0, 0, 0, 0.3);
}

.pluribus-fold-reveal__button:active {
  transform: scale(0.92);
}

.pluribus-fold-reveal__eye {
  display: block;
  width: clamp(23px, 2.7vw, 30px);
  height: auto;
  pointer-events: none;
}

.pluribus-fold-reveal .pluribus-fold-reveal__cards {
  position: static;
  transform: none;
  display: none;
}

.pluribus-fold-reveal--shown .pluribus-fold-reveal__button {
  display: none;
}

.pluribus-fold-reveal--shown .pluribus-fold-reveal__cards {
  display: flex;
}

.board-cards {
  display: flex;
  gap: clamp(0.25rem, 1vw, 0.45rem);
  min-height: clamp(48px, 7.8vw, 68px);
}

.board-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: clamp(34px, 5.5vw, 48px);
  height: clamp(48px, 7.8vw, 68px);
  padding: 0.38rem;
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 18%, rgba(76, 174, 255, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(219, 238, 245, 0.98));
  color: #162129;
  font-family: "Rockwell", "Georgia", serif;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  font-weight: 800;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 18px rgba(0, 0, 0, 0.24);
}

.board-card--placeholder {
  visibility: hidden;
  pointer-events: none;
}

.board-suit {
  align-self: end;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 0.9em;
}

.villain-action-burst {
  position: absolute;
  left: 50%;
  top: 24%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: min(82%, 360px);
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: rgba(3, 16, 26, 0.86);
  border: 1px solid rgba(156, 222, 242, 0.2);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
  animation: villain-pop 520ms cubic-bezier(0.2, 1.35, 0.32, 1);
  white-space: nowrap;
}

.villain-action-burst span {
  color: var(--muted);
  font-size: clamp(0.68rem, 1.6vw, 0.76rem);
}

.villain-action-burst strong {
  color: var(--gold-strong);
  font-size: clamp(0.82rem, 2vw, 1rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

.showdown-result {
  position: absolute;
  left: 50%;
  bottom: 14%;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 0.38rem;
  min-width: min(420px, 78%);
  padding: 0.62rem 0.78rem;
  border-radius: 16px;
  background: rgba(3, 16, 26, 0.9);
  border: 1px solid rgba(156, 222, 242, 0.18);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
  transform: translateX(-50%);
  animation: villain-pop 520ms cubic-bezier(0.2, 1.35, 0.32, 1);
}

.showdown-result.fold {
  border-color: rgba(28, 197, 139, 0.34);
}

.showdown-result > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showdown-result strong {
  color: var(--gold-strong);
  font-size: clamp(0.82rem, 2vw, 1rem);
  text-align: center;
}

.showdown-cards {
  display: flex;
  gap: 0.35rem;
}

.mini-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 34px;
  height: 48px;
  padding: 0.32rem;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(219, 238, 245, 0.98));
  color: #162129;
  font-family: "Rockwell", "Georgia", serif;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 14px rgba(0, 0, 0, 0.2);
}

.mini-card .board-suit {
  font-size: 0.88em;
}

.seat-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, clamp(36px, 4.8vw, 64px));
  z-index: 6;
  display: grid;
  place-items: center;
  min-width: clamp(62px, 8.5vw, 96px);
  pointer-events: none;
}

@media (max-width: 760px) {
  .seat-node {
    transform: translate(-50%, clamp(27px, 3.8vw, 30px));
  }
}

.seat-node.hero-active .seat-status-text,
.seat-node.hero .seat-status-text,
.seat-status-text.seat-status--hero-active {
  color: #7ceee4;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 10px rgba(124, 238, 228, 0.46);
}

.seat-node.action .seat-status-text {
  color: #f3cf86;
}

.seat-node.villain-recent .seat-status-text {
  color: #f3cf86;
}

.seat-node.opener-raise .seat-status-text {
  color: #f3cf86;
}

.seat-status-text.seat-status--opener-raise {
  color: #f3cf86;
}

.seat-node.folded .seat-status-text,
.seat-status-text.seat-status--folded {
  color: rgba(245, 247, 250, 0.2);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.44);
}

.seat-status-text.seat-status--waiting {
  color: #f3cf86;
}

.seat-node.pre-action-fold-revealed .seat-status-text {
  animation: preActionFoldReveal 1100ms ease-out both;
}

.seat-node.preflop-replay-active-seat .seat-status-text {
  color: #f4d088;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 11px rgba(244, 208, 136, 0.48);
  animation: preflopReplaySeatPulse 1100ms ease-out both;
}

.seat-node.hero-action-preview .seat-status-text {
  color: rgba(124, 238, 228, 0.74);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 10px rgba(124, 238, 228, 0.28);
}

.seat-node.hero-action-preview--click .seat-status-text {
  color: #7ceee4;
}

.seat-status-text,
.seat-caption {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  max-width: clamp(60px, 9vw, 92px);
  min-height: clamp(1.3rem, 2vw, 1.65rem);
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(0.64rem, 1.35vw, 0.84rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1 !important;
  color: var(--muted);
  text-align: center;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: translate(0, 0.04em);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.52);
}

@media (max-width: 760px) {
  .seat-status-text,
  .seat-caption {
    font-size: clamp(0.54rem, 2.2vw, 0.72rem);
    max-width: clamp(68px, 16vw, 94px);
  }

  .seat-node.opener-raise .seat-status-text,
  .seat-status-text.seat-status--opener-raise {
    font-size: clamp(0.50rem, 2vw, 0.68rem);
  }
}

@keyframes preActionFoldReveal {
  from {
    opacity: 0.34;
    transform: translate(0.2em, -0.8em) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(0.2em, -0.8em) scale(1);
  }
}

@keyframes preflopReplaySeatPulse {
  from {
    opacity: 0.72;
    transform: translate(0.2em, -0.8em) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(0.2em, -0.8em) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .seat-node.pre-action-fold-revealed .seat-status-text,
  .seat-node.preflop-replay-active-seat .seat-status-text {
    animation: none;
  }
}

.blind-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 5;
  display: block;
  transform: translate(clamp(46px, 3.5vw, 58px), -42%);
  pointer-events: none;
}

.blind-marker__amount {
  display: inline-grid;
  place-items: center;
  min-width: clamp(20px, 1.9vw, 28px);
  min-height: clamp(15px, 1.35vw, 20px);
  padding: 0.06rem 0.32rem 0.08rem;
  border: 1px solid rgba(219, 162, 82, 0.15);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 235, 186, 0.035), rgba(255, 235, 186, 0.008)),
    rgba(2, 10, 14, 0.48);
  color: rgba(235, 205, 153, 0.74);
  font-size: clamp(0.58rem, 0.7vw, 0.7rem);
  font-weight: 680;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.04),
    0 4px 7px rgba(0, 0, 0, 0.12);
}

/* Work order 10 item 5: the standalone blind marker's own default (non-hero-seat) position --
   previously a fixed clamp(46-58px) push toward centre picked by quadrant class, which converges
   two nearby seats' markers into the same zone (6-max SB/BB are only 28 points apart) and needed
   its own 9-max-only override for a seat sitting dead-center (see the rule further below).
   --radial-x/--radial-y (app.js's createSeatAnchorStyle) is each seat's own position blended a
   fixed fraction of the way toward table centre -- self-scaling by construction, so no
   table-size-specific case is needed here any more. :not(.blind-marker--hero-seat) matters: these
   selectors are each only one class, lower specificity than the .blind-marker--hero-seat.* flip
   rules below, but a rule that *doesn't itself set left/top* (as those only set transform) would
   still let this one's left/top apply wherever it also matches -- excluded outright instead of
   relying on a specificity fight this rule would otherwise partially lose. */
.blind-marker--sb:not(.blind-marker--hero-seat),
.blind-marker--seat-sb:not(.blind-marker--hero-seat),
.blind-marker--bottom-right:not(.blind-marker--hero-seat),
.blind-marker--bb:not(.blind-marker--hero-seat),
.blind-marker--seat-bb:not(.blind-marker--hero-seat),
.blind-marker--bottom-left:not(.blind-marker--hero-seat),
.blind-marker--bottom-middle:not(.blind-marker--hero-seat) {
  left: var(--radial-x);
  top: var(--radial-y);
  transform: translate(-50%, -50%);
}

.blind-marker--hero-seat.blind-marker--seat-sb {
  transform: translate(clamp(46px, 3.5vw, 58px), -42%);
}

.blind-marker--hero-seat.blind-marker--seat-bb {
  transform: translate(calc(-100% - clamp(46px, 3.5vw, 58px)), -42%);
}

/* Work order 13, item 1: this push was tuned against the OLD per-seat card CSS, which always
   nudged hero's own card sideways by at least --hero-seat-offset-x (>=26px) away from the seat's
   raw anchor -- this marker's own clamp(46px...) push only had to clear THAT already-offset card.
   The new radial solver's own candidate 0 is centered exactly on the seat (no offset at all) when
   that's already clear of everything else, which it now can be for a seat sitting close to the
   table edge -- confirmed live (a real 9-max sweep, hero=BB): a 2x20px sliver, the card's own left
   edge (48px from its own centre, at this file's now-fixed 44px mobile card width) landing just
   inside the marker's old 46px clearance. Rather than move the card off its own uniform "always
   start centred, only march when something's actually in the way" construction for one marker, the
   marker -- which this rule already exists specifically to keep clear of hero's own cards -- gets
   the extra few px of push its own comment already asks for: "move to the tangential side" per this
   work order's own instruction for exactly this kind of conflict. 54px is the measured minimum
   (48px card half-width + marker width + a small buffer) plus headroom, mobile-only so desktop's
   unchanged clamp(46px, 3.5vw, 58px) -- which the old, wider card position never needed widening
   for -- is untouched. */
@media (max-width: 760px) {
  .blind-marker--hero-seat.blind-marker--seat-sb {
    transform: translate(56px, -42%);
  }

  .blind-marker--hero-seat.blind-marker--seat-bb {
    transform: translate(calc(-100% - 56px), -42%);
  }
}

/* Work order 5 item 45: 9-max's SB sits dead-center (x:50%). Work order 10 item 5's radial default
   above now centers a NON-hero SB's marker the same way this rule does, on its own, with no
   table-size-specific case needed -- but this rule's own higher specificity also beats the
   --hero-seat flip rule directly above, which the radial default does not (the flip rule still
   only sets `transform`, and wins over the base .blind-marker rule's transform, but not over a
   more-specific left/top it doesn't itself set); still needed for a non-hero-dealt 9-max SB, so
   kept rather than removed. */
.table-visual[data-table-size="nine"] .blind-marker--seat-sb {
  transform: translate(-50%, -42%);
}

/* Work order 10 item 5 (stress test finding): the centered position directly above puts the
   marker on the same horizontal anchor as hero's own hole cards, which are ALSO centered for
   9-max SB (.table-hero-cards--seat-sb, styles.css above) -- confirmed live (the overlap stress
   test caught it, 23x19px), since the horizontal centering that clears BTN's seat pill leaves no
   sideways room to also dodge hero's own cards. Extra vertical lift instead of a sideways nudge,
   since sideways is the one direction genuinely out of room here; the -25px is real measured
   clearance (hero's card group's own height) plus a small buffer, not a guess. Higher specificity
   than the plain 9-max rule above (adds --hero-seat) so it wins only for a hero-dealt SB; the
   non-hero case above is unaffected. */
.table-visual[data-table-size="nine"] .blind-marker--hero-seat.blind-marker--seat-sb {
  transform: translate(-50%, calc(-42% - 25px));
}

.committed-bet-marker {
  z-index: 6;
  transform: translate(clamp(46px, 3.45vw, 56px), 64%);
}

.committed-bet-marker__amount {
  color: rgba(235, 205, 153, 0.86);
}

.committed-bet-marker--preview .committed-bet-marker__amount {
  border-color: rgba(124, 238, 228, 0.28);
  background:
    linear-gradient(180deg, rgba(124, 238, 228, 0.09), rgba(124, 238, 228, 0.025)),
    rgba(2, 14, 18, 0.58);
  color: rgba(124, 238, 228, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(207, 255, 252, 0.08),
    0 0 12px rgba(124, 238, 228, 0.14);
}

.committed-bet-marker--preview-click .committed-bet-marker__amount {
  color: #9ff8f1;
}

.committed-bet-marker--top-left,
.committed-bet-marker--left {
  transform: translate(clamp(50px, 3.75vw, 64px), 34%);
}

.committed-bet-marker--top-right,
.committed-bet-marker--right {
  transform: translate(calc(-100% - clamp(50px, 3.75vw, 64px)), 34%);
}

.committed-bet-marker--bottom-left,
.committed-bet-marker--bottom-middle {
  transform: translate(clamp(46px, 3.45vw, 58px), -118%);
}

.committed-bet-marker--bottom-right {
  transform: translate(calc(-100% - clamp(46px, 3.45vw, 58px)), -118%);
}

/* Work order 10 item 5: same radial fix as .blind-marker's own default tier above, for a blind
   seat's committed-bet chip (the marker that visually replaces the blind marker once that seat
   acts) -- and the same reason for the three :not() exclusions: --hero-seat and
   --adjacent-hero-blind each have their own direction-flip rule further below to keep the marker
   clear of hero's own hole cards (a concern this plain toward-centre radial can't account for on
   its own, since it doesn't know where hero's cards are), and --replay-card-visible's own combo
   rule needs the same protection even though in practice it's carried by hero's own marker
   already excluded via --hero-seat -- belt and suspenders, since this rule sets left/top (not just
   transform), which a rule that only sets transform can't cleanly out-specificity on its own. */
.committed-bet-marker--blind-seat:not(.committed-bet-marker--hero-seat):not(.committed-bet-marker--adjacent-hero-blind):not(.committed-bet-marker--replay-card-visible).committed-bet-marker--seat-sb,
.committed-bet-marker--blind-seat:not(.committed-bet-marker--hero-seat):not(.committed-bet-marker--adjacent-hero-blind):not(.committed-bet-marker--replay-card-visible).committed-bet-marker--bottom-right,
.committed-bet-marker--blind-seat:not(.committed-bet-marker--hero-seat):not(.committed-bet-marker--adjacent-hero-blind):not(.committed-bet-marker--replay-card-visible).committed-bet-marker--seat-bb,
.committed-bet-marker--blind-seat:not(.committed-bet-marker--hero-seat):not(.committed-bet-marker--adjacent-hero-blind):not(.committed-bet-marker--replay-card-visible).committed-bet-marker--bottom-left,
.committed-bet-marker--blind-seat:not(.committed-bet-marker--hero-seat):not(.committed-bet-marker--adjacent-hero-blind):not(.committed-bet-marker--replay-card-visible).committed-bet-marker--bottom-middle {
  left: var(--radial-x);
  top: var(--radial-y);
  transform: translate(-50%, -50%);
}

.committed-bet-marker--hero-seat.committed-bet-marker--blind-seat.committed-bet-marker--seat-sb {
  transform: translate(clamp(46px, 3.5vw, 58px), -42%);
}

.committed-bet-marker--hero-seat.committed-bet-marker--blind-seat.committed-bet-marker--seat-bb {
  transform: translate(calc(-100% - clamp(46px, 3.5vw, 58px)), -42%);
}

/* Work order 5 item 45: the identical conflict and the identical fix as .blind-marker--seat-sb
   above, for the committed-bet chip -- createCommittedBetMarkersMarkup() marks SB (and BB) with
   `committed-bet-marker--blind-seat` for every action they take, not only a literal blind post, so
   this is not limited to the blind itself. Kept at the same -42% vertical lift the blind-seat rules
   above already use (not the plain, non-blind-seat -118% a few rules up), since a blind-seat commit
   is visually continuous with the blind marker it replaces. */
.table-visual[data-table-size="nine"] .committed-bet-marker--blind-seat.committed-bet-marker--seat-sb {
  transform: translate(-50%, -42%);
}

/* Work order 10 item 5: same fix, same reason as .blind-marker--hero-seat.blind-marker--seat-sb
   above -- centering this marker also centers it on top of hero's own (also centered) hole cards
   for a hero-dealt 9-max SB. Extra --hero-seat here beats the plain rule immediately above only
   for that case. */
.table-visual[data-table-size="nine"] .committed-bet-marker--hero-seat.committed-bet-marker--blind-seat.committed-bet-marker--seat-sb {
  transform: translate(-50%, calc(-42% - 25px));
}

/* Work order 7 item 45 (self-overlap): the 42px vertical floor here put hero's own preflop-open
   marker (--opener --hero-seat --replay-card-visible, at UTG/HJ/MP/CO/LJ/BTN) close enough to
   hero's own seat pill that the marker's top edge tucked under the seat avatar's bottom edge --
   confirmed live via pixel measurement, 3.0-13.6px vertical overlap at both iPhone SE and iPhone
   14 widths (a real fraction of the marker's own ~19px height). This selector's real preflop use
   is effectively always hero's own marker: cardVisible (app.js's visibleCardSeats) is populated
   from heroSeat unconditionally, plus villainShowdownCards, which the caller already filters to
   [] whenever a hand reaches showdown -- so a non-hero marker essentially never carries
   --replay-card-visible at this point in a hand. Raised past the measured 70px clean threshold
   with a small buffer; ceiling raised by the same 32px delta to preserve the floor-to-ceiling
   spread the vw-scaling was tuned around. Verified zero self-overlap across 30 trials (4/6/9-max
   Preflop Trainer) plus 15 real Full Hand Practice hands, and zero new collisions introduced
   against every other visible table element (seat pills, pot badge, board, hero's own cards). */
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--top-left,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--top-middle,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--left,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--seat-hj,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--seat-mp,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--seat-utg {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), calc(-50% + clamp(74px, 4.7vw, 96px)));
}

.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--top-right,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--right,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--seat-btn,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--seat-co,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--seat-lj {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), calc(-50% + clamp(74px, 4.7vw, 96px)));
}

.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--bottom-left,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--bottom-middle,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--seat-bb,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--seat-sb-btn {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), calc(-50% - clamp(52px, 5.2vw, 76px)));
}

.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--bottom-right,
.pluribus-replay-active .committed-bet-marker--replay-card-visible.committed-bet-marker--seat-sb {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), calc(-50% - clamp(52px, 5.2vw, 76px)));
}

/* Work order 7 item 45 (self-overlap): a genuine specificity tie, not a design choice. When
   hero is dealt SB or BB, their own blind-post marker carries --hero-seat, --blind-seat, AND
   --replay-card-visible (hero's own hole cards are always visible) all at once, so two rules
   above compete for it at EQUAL specificity (3 class selectors each -- .committed-bet-marker
   --hero-seat.--blind-seat.--seat-sb up at line ~13575 vs. the plain .pluribus-replay-active
   .--replay-card-visible.--seat-sb rule immediately above this comment, whose ancestor class
   counts as a third selector too) -- source order alone decides, and the later
   --replay-card-visible rule wins, silently discarding the --hero-seat-aware push direction and
   sending hero's own marker toward the table centre, straight into hero's own hole cards.
   Confirmed live: hero's own SB/BB marker sat 19-23px into hero's own card art (up to ~70% of
   the marker's own height) in 6/15 real Full Hand Practice hands. Four own-element classes plus
   the ancestor beats both 3-selector rules regardless of source order; kept at the existing
   hero-seat rule's own values (never itself in question) rather than inventing new ones.
   Verified clean (0px overlap against both hero's own cards and hero's own seat pill) across 6
   real repro hands. Deliberately narrow: this does not touch the SEPARATE, larger, still-open
   finding that the *other* bottom seat's own (non-hero) blind marker can independently overlap
   hero's card art purely from table geometry -- see V2-TRACKER.md backlog. */
.pluribus-replay-active .committed-bet-marker--hero-seat.committed-bet-marker--blind-seat.committed-bet-marker--replay-card-visible.committed-bet-marker--seat-sb {
  transform: translate(clamp(46px, 3.5vw, 58px), -42%);
}

.pluribus-replay-active .committed-bet-marker--hero-seat.committed-bet-marker--blind-seat.committed-bet-marker--replay-card-visible.committed-bet-marker--seat-bb {
  transform: translate(calc(-100% - clamp(46px, 3.5vw, 58px)), -42%);
}

/* Work order 8, part A: the OTHER blind seat's own committed-bet marker (never hero's own --
   see app.js's adjacentHeroBlindClass) reaches into hero's hole-card zone when hero occupies the
   adjacent blind seat, because both blind-seat markers above push toward the table centre -- i.e.
   toward each other -- and the two seats sit close enough together that hero's own already-pushed
   card group and the neighbour's marker land in the same band. A vertical-only lift (matching the
   -118% self-overlap fix two rules above) was tried and measured live to be insufficient: hero's
   card group is 62px tall and 90px wide, far larger than any reasonable extra lift, and the
   marker was found fully contained inside it either way. Flips the push direction outward
   (away from hero, toward this seat's own outer neighbour) instead -- kept at the existing -42%
   lift, since this is still a direction change only, not a lift change. Verified live: 8/8 trials
   (hero SB and BB both covered) clean against hero's cards, with zero new collisions introduced
   against any other visible seat pill, marker, or the pot badge. */
.pluribus-replay-active .committed-bet-marker--blind-seat.committed-bet-marker--adjacent-hero-blind.committed-bet-marker--seat-bb {
  transform: translate(calc(-100% - clamp(46px, 3.5vw, 58px)), -42%);
}

.pluribus-replay-active .committed-bet-marker--blind-seat.committed-bet-marker--adjacent-hero-blind.committed-bet-marker--seat-sb {
  transform: translate(clamp(46px, 3.5vw, 58px), -42%);
}

.committed-bet-marker--hero-facing-action.committed-bet-marker--top-left,
.committed-bet-marker--hero-facing-action.committed-bet-marker--top-middle,
.committed-bet-marker--hero-facing-action.committed-bet-marker--left,
.committed-bet-marker--hero-facing-action.committed-bet-marker--bottom-left,
.committed-bet-marker--hero-facing-action.committed-bet-marker--bottom-middle,
.committed-bet-marker--hero-facing-action.committed-bet-marker--seat-utg,
.committed-bet-marker--hero-facing-action.committed-bet-marker--seat-hj,
.committed-bet-marker--hero-facing-action.committed-bet-marker--seat-mp {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), calc(-50% + clamp(60px, 6.2vw, 86px)));
}

.committed-bet-marker--hero-facing-action.committed-bet-marker--top-right,
.committed-bet-marker--hero-facing-action.committed-bet-marker--right,
.committed-bet-marker--hero-facing-action.committed-bet-marker--bottom-right,
.committed-bet-marker--hero-facing-action.committed-bet-marker--seat-btn,
.committed-bet-marker--hero-facing-action.committed-bet-marker--seat-co,
.committed-bet-marker--hero-facing-action.committed-bet-marker--seat-lj {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), calc(-50% + clamp(60px, 6.2vw, 86px)));
}

.committed-bet-marker--hero-facing-action.committed-bet-marker--seat-bb {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), calc(-50% - clamp(22px, 2.6vw, 38px)));
}

.committed-bet-marker--hero-facing-action.committed-bet-marker--seat-sb {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), calc(-50% - clamp(22px, 2.6vw, 38px)));
}

.committed-bet-marker--preflop-side-swapped.committed-bet-marker--seat-hj {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), calc(-50% + clamp(60px, 6.2vw, 86px)));
}

.committed-bet-marker--preflop-side-swapped.committed-bet-marker--seat-utg-1 {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), calc(-50% + clamp(60px, 6.2vw, 86px)));
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.answer-grid--pre-action-playback {
  visibility: hidden;
  pointer-events: none;
}

.answer-grid--preflop-action-replay .answer-button {
  opacity: 0.62;
  pointer-events: none;
}

.single-spot-replay-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.lesson-active .single-spot-replay-controls {
  position: fixed;
  left: 50%;
  bottom: 6.55rem;
  z-index: 45;
  width: min(1320px, calc(100vw - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}

.single-spot-replay-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(240, 187, 89, 0.25);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(2, 16, 23, 0.6);
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.single-spot-replay-button[data-single-spot-replay="skip"] {
  margin-left: 0.5rem;
}

.single-spot-replay-button--subtle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(20, 42, 58, 0.82), rgba(8, 22, 32, 0.92));
  border: 1px solid rgba(246, 207, 124, 0.45);
  color: #f7d57f;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 235, 180, 0.15);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.single-spot-replay-button--subtle:hover,
.single-spot-replay-button--subtle:active {
  background: linear-gradient(180deg, rgba(26, 56, 78, 0.94), rgba(12, 30, 44, 0.98));
  border-color: rgba(246, 207, 124, 0.75);
  box-shadow: 0 4px 18px rgba(240, 187, 89, 0.3);
  transform: scale(1.06);
}

.single-spot-replay-icon {
  width: 19px;
  height: 19px;
  display: block;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .single-spot-replay-button:not(:disabled):hover {
    color: #ffffff;
    background: rgba(240, 187, 89, 0.2);
    border-color: var(--gold-strong);
  }
}

.single-spot-replay-button:focus-visible {
  color: #ffffff;
  background: rgba(240, 187, 89, 0.2);
  border-color: var(--gold-strong);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.single-spot-replay-button:disabled {
  opacity: 0.35;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(2, 16, 23, 0.25);
  border-color: rgba(255, 255, 255, 0.08);
  cursor: not-allowed;
  pointer-events: none;
}

.preflop-drill-selector {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.preflop-drill-selector--modes {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto;
  gap: 0.5rem;
}

.preflop-drill-selector > span {
  margin-right: 0.2rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.preflop-drill-option {
  min-height: 2rem;
  padding: 0.38rem 0.66rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}

.preflop-mode-option {
  width: 100%;
  min-height: 2.35rem;
  border-radius: var(--radius-sm);
}

.preflop-review-option {
  border-radius: var(--radius-sm);
}@media (hover: hover) and (pointer: fine) {
  .preflop-drill-option:hover {
  border-color: rgba(124, 238, 228, 0.62);
  background: rgba(124, 238, 228, 0.13);
}
}

.preflop-drill-option:focus-visible,
.preflop-drill-option.active {
  border-color: rgba(124, 238, 228, 0.62);
  background: rgba(124, 238, 228, 0.13);
}

.preflop-drill-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .preflop-drill-selector--modes {
    grid-template-columns: 1fr;
  }

  .preflop-drill-selector--modes > span {
    margin-right: 0;
  }
}

.answer-button {
  min-height: 92px;
  padding: 1rem;
  text-align: left;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 60%),
    rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.answer-button strong {
  display: block;
  font-size: 1rem;
}

.answer-button span {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  line-height: 1.4;
}

.answer-button.correct {
  border-color: rgba(64, 213, 177, 0.46);
}

.answer-button.wrong {
  border-color: rgba(202, 81, 77, 0.48);
}

.answer-button.mixed {
  border-color: rgba(240, 148, 59, 0.48);
}

.answer-button.locked {
  opacity: 0.7;
}

/* Work order 13, item 2 (owner-approved design, from mockups): on mobile, a small pill sitting on
   the button's own top edge replaces the .correct ring above -- a teal rectangle around a button
   whose own colour can be anything (red for Fold, say) reads as a mismatched, unrelated highlight,
   called out directly as ugly. The ring is desktop-only from here down; every rule in this block is
   additive inside the existing mobile breakpoint, never touching the un-scoped rules above, so
   desktop keeps the ring exactly as before. `position: relative` and the headroom margin apply to
   every answer button unconditionally -- reserved whether or not a pill is currently showing, so
   grading a decision never shifts the row (the brief's own explicit requirement) -- and the three
   pill spans in the markup (app.js's createAnswerButtonMarkup) are always present, with only the
   one matching class combination (.answer-button--missed-correct/--selected-incorrect/
   --selected-correct, the same three mutually-exclusive classes every grading call site already
   sets) ever made visible, so "Yours" and "Best" can never land on the same button by construction. */
/* Unscoped (not inside the mobile media query below) on purpose: without this, every pill span
   would fall through to the generic ".answer-button span" rule above (display: block, a visible
   muted-text line) on DESKTOP specifically, since desktop never reaches the mobile block that would
   otherwise hide it -- caught live comparing a real desktop render against mobile before shipping.
   Desktop is otherwise completely unaffected by this work order -- the pills stay hidden here at
   every width, and only the mobile block below ever un-hides one. */
.answer-button .answer-button__pill {
  display: none;
}

@media (max-width: 760px) {
  .answer-button {
    position: relative;
    margin-top: 0.75rem;
  }

  /* Neutralises the ring above rather than duplicating every other border-affecting rule for
     .correct -- the pill carries the meaning instead. */
  .answer-button.correct {
    border-color: rgba(255, 255, 255, 0.08);
  }

  .lesson-active .answer-button.answer-button--resolved.correct {
    transform: none;
  }

  /* The themed "asset shell" button variant (Preflop Trainer's real default skin) clips its own
     content to the button's own box (overflow: hidden) -- confirmed live this was clipping the
     pill's own top half where it overhangs the border, per the design's own "overlapping its
     border" instruction. border-radius on this variant is already 0 (no corner-rounding for the
     hidden overflow to protect), and this only opens up once a decision is actually graded
     (.answer-button--resolved is added at that point and never before), so this can't affect the
     pre-grading button. Verified live: the button's own themed art (background image, overlays)
     renders identically with this on -- nothing about it depended on the clip, since none of those
     layers exceed the button's own box in the first place. */
  .answer-button--asset-shell.answer-button--resolved {
    overflow: visible;
  }

  /* Work order 16: the pill used to overhang the button's own top border (top: 0, translateY
     -50%), on the premise that .answer-grid/.answer-button reserve enough headroom above it to
     contain the overhang. Measured live (webkit, 375x667 and 390x844) that premise doesn't hold:
     #answer-grid and #feedback-band ("View Range Table"/"Continue") are two independently
     bottom-anchored fixed elements -- the grid's offset is a fixed rem, feedback-band's is a dvh
     percentage (13.7dvh, tuned across several prior work orders to clear hero's cards and seat
     pills, and deliberately not touched here) -- so the gap between them shrinks as the viewport
     gets shorter and had already closed to ~10px raw box overlap at 375x667, before any pill
     overhang is even added. Reserving MORE space above the button (padding-top on the grid, or
     the button's own already-present-but-dead margin-top: 0.75rem, overridden to 0 by
     `.lesson-active .answer-button--asset-shell`'s `margin: 0 auto` on the real default button
     skin -- a separate, non-symptomatic bug, left alone) cannot fix this: both grid and
     feedback-band are bottom-anchored with height:auto, so growing empty space above the content
     just moves the container's own (invisible) top edge further up without moving the button --
     confirmed by the unchanged button top-edge measurement before/after test edits. The only
     thing that actually changes the pill's on-screen position is where within the (fixed-position)
  /* Work order 17: with #lesson-bottom-stack reserving a real flex `gap` between #feedback-band
     (which contains #single-spot-replay-controls) and #answer-grid below 760px, the pill sits
     safely ABOVE the button's top border (bottom: calc(100% + 0.25rem)). It no longer lives inside
     .answer-button__content's text flow, so the button's title/subtitle remain perfectly centred inside
     the button box, identical pre- and post-grading with zero vertical drift or label crowding. */
  .answer-button .answer-button__pill {
    position: absolute;
    bottom: calc(100% + 0.25rem);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    color: inherit;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
  }

  .answer-button--missed-correct .answer-button__pill--best,
  .answer-button--selected-correct .answer-button__pill--mine-correct {
    display: inline-block;
    background: var(--teal, #33d6c3);
    color: #062420;
  }

  .answer-button--selected-incorrect .answer-button__pill--yours {
    display: inline-block;
    background: #f0554a;
    color: #2a0705;
  }

  /* The rule this actually needs to beat: `.lesson-active .answer-button.answer-button--resolved
     .correct` (styles.css, "the correct button itself" -- work order 10 item 7) is what real
     gameplay renders, not the plainer `.answer-button.correct` rule above -- confirmed live, a
     screenshot with the pill already showing still had a visible teal outline. That rule is (0,4,0)
     specificity and physically later in the file, so an equal-specificity override here would lose
     on both counts; `.correct.correct` (a legal, harmless repeated class) pushes this to (0,5,0),
     winning regardless of position. Border/box-shadow only -- the green-tinted background and the
     ~6% scale-lift are the existing contrast hierarchy the brief says to keep, not the ring. */
  .lesson-active .answer-button.answer-button--resolved.correct.correct {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4);
  }

  /* ------------------------------------------------------------------------------------------
     Hero card row (Q1). Nine previous attempts placed the hole cards *relative to the hero's
     seat* -- radial offsets, quadrant classes, a per-seat clearance solver -- and every one of
     them still overlapped something, because the felt has no gap large enough for a ~135x88px
     card pair at 390px. Measured, not assumed: the band above the felt is occupied by the Coach
     bubble, and the strip between the bottom seat plates and the replay controls is ~40px tall.
     There is no empty space to find, so this reserves some instead.

     .fk2-table-scene (the rendered felt) and .table-dom-layer (seats, plates, markers, cards)
     are both `position:absolute; inset:0` inside .table-visual, and every seat is positioned as
     a percentage of that layer. Pulling both layers' bottom edge up by --fk-hero-row therefore
     shifts the whole table up *and* reserves the vacated strip in one move -- no seat coordinate
     changes, no JS, and nothing else can drift into the strip because no element is laid out
     against .table-visual's own bottom edge. .table-visual gains the same amount of height so
     the felt itself doesn't shrink.
     ------------------------------------------------------------------------------------------ */
  .table-visual {
    --fk-hero-row: 96px;
    min-height: calc(360px + var(--fk-hero-row));
    height: calc(clamp(360px, 34vw, 560px) + var(--fk-hero-row));
    aspect-ratio: auto;
  }

  /* .lesson-active .table-visual (further up this file, unconditional, no media query) beats the
     bare rule above on specificity and sets height:100dvh during real gameplay -- so the 96px
     default, sized for the shorter clamp(360px, 34vw, 560px) box the bare rule assumes, no longer
     reserves enough. What actually needs clearing: two fixed-position elements entirely
     independent of .table-visual's own box -- #answer-grid (always present once a decision is
     live) and #feedback-band (sitting ABOVE #answer-grid).

     Work order 15, item 4: the original 170px value here was sized against #feedback-band's own
     documented `max-height: 5.5rem` (88px) worst case -- but a real graded decision was measured
     live this session (not assumed) at a rendered height of 32px, not 88px, because
     `.lesson-active .feedback-band > div:first-child { display: none; }` (this file, further
     down) already hides the only element that could have grown the band past its collapsed
     button-row height, for every verdict state tested (correct/incorrect/neutral). That div-hiding
     rule predates this one (see this file's own dated history), so the 88px worst case this
     comment used to defend against has been structurally unreachable the whole time this value
     shipped at 170px -- confirmed live again this session, not merely re-read from an old note.
     Shrunk to the smallest value that still clears the two things that actually render:
     hero's own card row (bottom: 12px, ~68px tall -- see the layer rule below) and the
     collapsed 32px feedback-band, each with a small live-measured margin, re-verified against a
     real graded decision (correct, incorrect, and the terminal replay-again state) at both
     390x844 and 375x667 -- table-overlap-stress-test.mjs and manual live capture, not arithmetic
     alone. Seat pills (`.seat-node`, the other historical constraint here) sit far above either
     of these edges even at this smaller reservation -- the mobile hero-seat rotation (this file's
     `getTableLayout`, app.js) caps every non-hero seat at a lower ring position than the old
     unrotated SB/BB max, widening that margin rather than narrowing it. */
  .lesson-active .table-visual {
    --fk-hero-row: 125px;
  }

  /* .table-hero-card-layer (app.js's ensureTableVisualShell) is a THIRD sibling layer, not a
     descendant of .table-dom-layer -- it's where every hero-card render actually lands
     (updateTableHeroCards is always called with shell.heroCardLayer), in every mode. Missing it
     here left it at its default inset:0 (full, un-shifted .table-visual height) while
     .table-hero-cards below computes its `bottom` offset against THIS layer as its containing
     block -- so hero's own cards landed entirely outside .table-visual's own overflow:hidden
     clip and were invisible in every real dealt hand tested (Preflop Trainer and Full Hand
     Practice, mobile, verified live via direct getBoundingClientRect() measurement: cards
     rendered at rect.bottom 928 against a 844px-tall clipped container). Both layers inherit
     whichever --fk-hero-row value actually won above -- no separate lesson-active-scoped copy of
     this rule is needed, since the custom property resolves once, on .table-visual itself, and
     every descendant reads that single resolved value. */
  .table-visual .fk2-table-scene,
  .table-visual .table-dom-layer,
  .table-visual .table-hero-card-layer {
    bottom: var(--fk-hero-row);
  }

  /* Hero cards only -- villain showdown pairs and fold-reveals keep their seat anchoring, since
     several can be on screen at once and they belong to their own seats.

     !important is load-bearing here, not laziness: placeSeatCardSlotRadially (app.js:2814) writes
     `transform` directly to the element's style attribute on every render, and an inline style
     beats any selector specificity. The declarations below are the only way a stylesheet can win
     without deleting that JS -- which is deliberately left in place, because it still positions
     every villain slot. A plain `bottom: 12px` (not `-1 * var(--fk-hero-row) + 12px`, the original
     shape) is deliberate: subtracting --fk-hero-row again here would cancel the very shift the
     layer above it just received, pinning hero's cards to `.table-visual`'s own bottom edge
     regardless of --fk-hero-row's value -- confirmed live, the first fix attempt at this exact
     line increased --fk-hero-row and saw hero's cards not move at all. Anchored to the layer's own
     (already correctly shifted) bottom edge with a small positive offset instead, so the pair sits
     just inside the vacated strip rather than reaching below the layer to find it. */
  .table-visual .table-hero-cards:not(.table-hero-cards--villain-showdown) {
    top: auto !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Spot-drill replay transport controls (back/pause/play/forward/skip) on mobile:
     centered compact bar, transparent container clear of hero cards and answer buttons. */
  .single-spot-replay-controls:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
}

.feedback-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: end;
}

.feedback-band p {
  margin: 0.32rem 0 0;
  line-height: 1.5;
}

.feedback-band.correct {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(28, 197, 139, 0.38);
}

.feedback-band.wrong {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(242, 100, 82, 0.34);
}

.feedback-band.mixed {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(240, 148, 59, 0.4);
}

.feedback-band.neutral {
  background: rgba(255, 255, 255, 0.04);
}

.feedback-panel--revealed {
  animation: answer-feedback-enter 210ms ease-out both;
}

.feedback-band.feedback-panel--correct {
  border-color: rgba(64, 213, 177, 0.42);
  box-shadow:
    inset 0 2px 0 rgba(64, 213, 177, 0.32),
    0 0 0 1px rgba(239, 190, 96, 0.08);
}

.feedback-band.feedback-panel--incorrect {
  border-color: rgba(190, 75, 76, 0.42);
  box-shadow:
    inset 0 2px 0 rgba(190, 75, 76, 0.32),
    0 0 0 1px rgba(236, 166, 84, 0.1);
}

@keyframes answer-feedback-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lesson-answer-feedback-enter {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes continue-ready-brighten {
  from {
    opacity: 0.68;
    filter: brightness(0.9);
  }

  to {
    opacity: 1;
    filter: brightness(1);
  }
}

.table-hero-cards {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 65%);
  z-index: 7;
  display: flex;
  gap: clamp(0.24rem, 0.72vw, 0.48rem);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.32));
  pointer-events: none;
}

.table-hand-strength {
  position: absolute;
  top: calc(100% + clamp(0.55rem, 1vw, 0.75rem));
  left: 50%;
  width: max-content;
  max-width: min(210px, 42vw);
  color: rgba(222, 220, 214, 0.76);
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(0.52rem, 0.86vw, 0.68rem);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: 0.015em;
  text-align: center;
  white-space: normal;
  transform: translateX(-50%);
}

.table-hero-cards--villain-showdown .table-hand-strength {
  color: rgba(222, 220, 214, 0.68);
}

/* Pluribus replay route only: hero's own hole cards live in a separate DOM
   layer from the seat-node frame/text, so the existing seat-node.folded fade
   (color: rgba(245, 247, 250, 0.2), the only folded-state dim value in this
   file) never reached them. Reuse that same 0.2 alpha here instead of a new
   value, with a brief transition matching the fold reveal's own timing. */
.pluribus-replay-active .table-hero-cards--folded {
  opacity: 0.2;
  transition: opacity 420ms ease-out;
}

/* --hero-seat-offset-x (set in app.js from #table-visual's own measured width, on load and on
   ResizeObserver) replaces this file's one shared clamp(42px, 3.6vw, 60px) horizontal seat-anchor
   push, used identically at 25 call sites across .table-hero-cards/.pluribus-fold-reveal/
   .committed-bet-marker. Mobile field report: at a full-viewport table width (.lesson-active
   .table-visual is 100vw), 3.6vw of a 390px phone is ~14px, but the clamp's own 42px floor forced
   it up anyway -- confirmed live, hero's own hole cards overlapping the seat's avatar/status badge
   and the feedback-band "Continue" control on an iPhone-14-width viewport. The measured version
   keeps the same 60px ceiling and preferred slope (so desktop is unaffected) but drops the floor
   to 26px, since the floor -- not the slope -- was the only broken part. The clamp() fallback
   after the comma is what every rule already had; it only applies before first measurement runs
   or if ResizeObserver is unavailable, so this is additive, not a behavior change on its own. */
.table-hero-cards--seat-utg,
.table-hero-cards--left {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), -50%);
}

.table-hero-cards--seat-btn,
.table-hero-cards--right {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), -50%);
}

.table-hero-cards--seat-hj,
.table-hero-cards--seat-mp,
.table-hero-cards--top {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), -50%);
}

.table-hero-cards--seat-co,
.table-hero-cards--seat-lj {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), -50%);
}

.table-hero-cards--seat-bb,
.table-hero-cards--seat-sb-btn,
.table-hero-cards--bottom {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), calc(-50% - clamp(28px, 3.5vw, 46px)));
}

.table-hero-cards--seat-sb {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), calc(-50% - clamp(28px, 3.5vw, 46px)));
}

/* UI polish work order 4, item 2: 6-max's SB sits at x:64%, with room to spare on both sides, so
   the rule above (push left, toward table center) has always worked fine there. 9-max's SB sits
   dead-center at x:50%, exactly between BB and BTN with a roughly equal ~20%-of-table-width gap
   to each -- the two hole cards (about 90px wide together at a full-viewport mobile table) don't
   fit that gap with a sideways push in EITHER direction; whichever way this pushed, it collided
   with one neighbour's seat pill. Centering instead of pushing clears both, confirmed by direct
   measurement against the live app: roughly 4px to spare on each side, with no new overlap with
   SB's own pill either (that already sits below the card row's vertical band regardless of
   horizontal offset -- the collision was always with a neighbour, never with SB's own seat).
   Higher specificity than the rule above so it wins regardless of source order; excludes
   villain-showdown so it can't interfere with that mode's own narrower, already-correct fix
   below. Safe for 6-max too -- centering only moves the cards closer to the anchor than the old
   push did, and 6-max already had room to spare either way. */
.table-hero-cards--seat-sb:not(.table-hero-cards--villain-showdown) {
  transform: translate(-50%, calc(-50% - clamp(28px, 3.5vw, 46px)));
}

/* Retired by work order 13, item 1: this used to shrink villain-showdown cards specifically below
   480px (and zero the SB/BB/BTN center-push, hand-tuned per seat) because several villains
   revealing at once could converge into each other with no room to spare. app.js's
   placeAllVillainCardSlotsCollisionAware/placeSeatCardSlotRadially now solves that generally --
   every villain's card slot is placed by the same per-seat radial march hero's own cards use,
   stepping outboard from its own seat until it clears every other slot already placed this render,
   rather than shrinking the cards to make convergence less likely. "Same dimensions, same
   construction" for every seat's slot (this work order's own design) also meant retiring the
   villain-only downsize -- see the uniform .table-card sizing in the ≤760px block below instead. */

.table-hero-cards--top-left {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), -50%);
}

.table-hero-cards--top-right {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), -50%);
}

.table-hero-cards--top-middle {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), -50%);
}

.table-hero-cards--bottom-left,
.table-hero-cards--bottom-middle {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), calc(-50% - clamp(28px, 3.5vw, 46px)));
}

.table-hero-cards--bottom-right {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), calc(-50% - clamp(28px, 3.5vw, 46px)));
}

.pluribus-fold-reveal--seat-utg,
.pluribus-fold-reveal--left,
.pluribus-fold-reveal--seat-hj,
.pluribus-fold-reveal--seat-mp,
.pluribus-fold-reveal--top,
.pluribus-fold-reveal--top-left,
.pluribus-fold-reveal--top-middle,
.pluribus-fold-reveal--bottom-left,
.pluribus-fold-reveal--bottom-middle,
.pluribus-fold-reveal--seat-bb,
.pluribus-fold-reveal--seat-sb-btn,
.pluribus-fold-reveal--bottom {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), -50%);
}

.pluribus-fold-reveal--seat-btn,
.pluribus-fold-reveal--right,
.pluribus-fold-reveal--seat-co,
.pluribus-fold-reveal--seat-lj,
.pluribus-fold-reveal--seat-sb,
.pluribus-fold-reveal--top-right,
.pluribus-fold-reveal--bottom-right {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), -50%);
}

.table-hero-cards--preflop-side-swapped.table-hero-cards--seat-hj {
  transform: translate(var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px)), -50%);
}

/* UI polish work order 4, item 2: 6-max's HJ sits at x:35.5%, with wide gaps to its neighbours
   (its nearest same-row seat, CO, is 29% of the table away), where the existing --seat-hj/--top
   rule above (grouped with --seat-mp) has always worked fine -- left untouched here, and this
   selector only ever matches when data-table-size="nine" (set in app.js's renderTableVisual) so
   it can't affect 6-max regardless. 9-max's HJ sits at x:76%, only 15% (~58px at a full-viewport
   mobile width) from its immediate neighbour LJ -- narrower than the ~90px hole-card pair itself,
   so no purely-sideways push clears LJ by itself (confirmed by direct measurement: even a
   perfectly centered card group still overlapped LJ's own seat pill by ~16px, versus ~58px
   before). Nudging back toward HJ's own anchor point clears LJ's pill with a few px to spare,
   measured directly against the live app -- safe because HJ has no OTHER seat at the same row on
   its own side to collide with instead, and cards already sit clear of HJ's own seat pill
   vertically regardless of horizontal offset (the same reason the SB fix above works). Excludes
   the swapped case, whose own rule immediately above already solves this exact HJ-vs-LJ-open
   matchup with the correct direction for its own (narrower) trigger condition. */
.table-visual[data-table-size="nine"] .table-hero-cards--seat-hj:not(.table-hero-cards--preflop-side-swapped) {
  transform: translate(calc(-50% + 20px), -50%);
}

.table-hero-cards--preflop-side-swapped.table-hero-cards--seat-utg-1 {
  transform: translate(calc(-100% - var(--hero-seat-offset-x, clamp(42px, 3.6vw, 60px))), -50%);
}

.table-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: clamp(44px, 5vw, 62px);
  height: clamp(62px, 7vw, 88px);
  padding: 0.44rem;
  border: 1px solid rgba(45, 37, 29, 0.66);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.52), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(99, 156, 182, 0.1), transparent 30%),
    linear-gradient(180deg, #fff8df 0%, #f0e4c6 58%, #dacead 100%);
  color: #11181d;
  font-family: "Rockwell", "Georgia", serif;
  font-size: clamp(1.15rem, 2vw, 1.58rem);
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -8px 14px rgba(70, 52, 27, 0.15),
    inset 0 0 0 1px rgba(255, 240, 196, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.13),
    0 9px 13px rgba(0, 0, 0, 0.42);
}

.table-card + .table-card {
  margin-left: -0.1rem;
}

.table-card > span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.5);
}

.table-card .board-suit {
  align-self: flex-end;
  font-size: 0.95em;
  line-height: 0.95;
  text-shadow: none;
}

/* Work order 13, item 1 (owner-approved design, from mockups): every seat's card slot is now
   placed by app.js's radial solver rather than this file's 25 hand-tuned per-seat translate rules
   above (those stay as the pre-JS fallback position -- candidate 0 before the solver runs, and the
   only position used if matchMedia/ResizeObserver are unavailable -- and are untouched here, since
   they still govern desktop in full). This block is what makes every seat's slot actually the same
   *size*: a fixed (not vw-clamped) card size shared by hero's own cards and every villain reveal,
   and a padded outline reading as one reserved slot -- gold for hero's own cards, the muted teal
   already used for secondary chrome elsewhere for a villain reveal, same padding/radius either way,
   only the outline colour differing. The old ≤480px villain-only downsize this replaced is gone
   (see the retired-block comment further up), since uniform sizing plus the radial solver's own
   room-finding replaces "make the cards smaller so they're less likely to collide." */
@media (max-width: 760px) {
  .table-card {
    width: 44px;
    height: 62px;
    padding: 0.34rem;
  }

  .table-hero-cards {
    gap: 0.22rem;
    padding: 0.2rem;
    border-radius: 10px;
  }

  /* Work order 15, item 3: the gold outline this rule used to draw around hero's own card pair
     was chrome for a state that no longer exists -- it marked hero's cards as "the same reserved
     slot shape as everyone else's" back when hero's cards sat on the felt among the other seats'.
     Since work order 14 gave hero cards their own dedicated row directly below the hero seat
     (the reserved --fk-hero-row strip, further up this file), the pair already reads as bare
     cards in their own space; the outline was redundant. Villain showdown/fold-reveal cards keep
     their own outline below, unaffected -- they still share the felt with other seats. */

  .table-hero-cards--villain-showdown {
    outline: 1.5px solid rgba(124, 238, 228, 0.55);
    outline-offset: 1px;
  }

  .table-hero-cards--villain-showdown .table-hand-strength {
    max-width: 68px;
    font-size: 0.56rem;
  }
}

.lesson-active {
  background: #000;
}

.lesson-active .app-shell {
  width: 100%;
  margin: 0;
  padding: 0;
}

.lesson-active .app-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 35;
  display: flex;
  min-height: 5rem;
  padding: max(0.8rem, env(safe-area-inset-top)) max(1.2rem, env(safe-area-inset-right)) 1.15rem
    max(1.2rem, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.lesson-active .app-topbar::before {
  top: 0;
  height: calc(100% + 2.7rem);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(0, 4, 8, 0.26) 58%, rgba(0, 4, 8, 0));
  -webkit-mask-image: linear-gradient(180deg, #000 0 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 68%, transparent 100%);
}

.lesson-active .brand-copy span {
  color: rgba(230, 173, 88, 0.78);
  white-space: nowrap;
}

.lesson-active .brand-copy strong {
  margin-top: 0;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lesson-active .profile-button {
  display: none;
}

.lesson-active .view-options {
  margin-left: auto;
}

.lesson-active .view-options-menu {
  right: 0;
  left: auto;
}

.lesson-active .workspace,
.lesson-active .trainer-grid,
.lesson-active .scenario-panel {
  min-height: 100dvh;
}

.lesson-active .trainer-grid {
  display: block;
}

.lesson-active .scenario-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lesson-active .scenario-topline {
  display: none;
}

.lesson-active .scenario-card {
  position: fixed;
  inset: 0;
  display: block;
  min-height: 100dvh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
}

.lesson-active .scenario-card::after {
  display: none;
}

.lesson-active .table-visual {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}

.lesson-active .scenario-meta {
  display: none;
}

.lesson-active .betting-line {
  display: none;
}

.lesson-active .cards-row,
.lesson-active #scenario-title,
.lesson-active .scenario-copy {
  display: none;
}

.lesson-active .fact-grid {
  position: fixed;
  top: 5.65rem;
  left: max(1rem, env(safe-area-inset-left));
  bottom: auto;
  z-index: 26;
  display: grid;
  grid-template-columns: 1fr;
  width: min(260px, 20vw);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(181, 117, 45, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 22, 28, 0.9), rgba(3, 9, 13, 0.94)),
    rgba(0, 8, 12, 0.88);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 216, 139, 0.08),
    inset 0 -20px 34px rgba(0, 0, 0, 0.28),
    0 18px 36px rgba(0, 0, 0, 0.3);
}

.lesson-active .fact-grid--training-status {
  padding: 0;
}

.training-status-panel {
  display: grid;
  gap: 0;
  padding: 0;
}

.training-status-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.35rem;
  padding: 0 1rem;
  color: #e2a44f;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.training-status-header::after,
.training-status-row::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  bottom: 0;
  left: 1.15rem;
  height: 1px;
  background: rgba(181, 117, 45, 0.18);
  pointer-events: none;
}

.training-status-anchor {
  color: rgba(181, 117, 45, 0.72);
  font-size: 1.12rem;
  font-family: "Times New Roman", Georgia, serif;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-1px);
}

.training-status-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(6.2rem, 0.82fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  min-height: 1.86rem;
  padding: 0.36rem 1rem;
}

.training-status-row:last-child::after {
  content: none;
}

.training-status-row span {
  color: rgba(205, 180, 154, 0.78);
  font-size: 0.74rem;
  line-height: 1.25;
}

.training-status-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #eeb457;
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.3;
  text-align: right;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.74);
}

.training-mastery-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(6.2rem, 0.82fr) minmax(0, 1fr);
  gap: 0.24rem 0.75rem;
  padding: 0.48rem 1rem 0.56rem;
}

.training-mastery-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 1.15rem;
  left: 1.15rem;
  height: 1px;
  background: rgba(181, 117, 45, 0.18);
}

.training-mastery-row > span,
.training-mastery-row small {
  color: rgba(205, 180, 154, 0.78);
  font-size: 0.7rem;
}

.training-mastery-row > strong {
  color: #eeb457;
  font-size: 0.82rem;
  text-align: right;
}

.training-mastery-row small,
.training-mastery-row div {
  grid-column: 1 / -1;
}

.training-mastery-row i {
  font-style: normal;
}

.pluribus-hand-info-details {
  position: relative;
  padding: 0.42rem 1rem 0.5rem;
}

.pluribus-hand-info-details::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  top: 0;
  left: 1.15rem;
  height: 1px;
  background: rgba(181, 117, 45, 0.18);
  pointer-events: none;
}

.pluribus-hand-info-details summary {
  color: rgba(124, 238, 228, 0.74);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.04em;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}

.pluribus-hand-info-details summary::-webkit-details-marker {
  display: none;
}

.pluribus-hand-info-details summary::after {
  content: " +";
  color: rgba(226, 164, 79, 0.9);
  font-weight: 900;
}

.pluribus-hand-info-details[open] summary::after {
  content: " -";
}

.pluribus-hand-info-details__body {
  display: grid;
  gap: 0.42rem;
  padding-top: 0.5rem;
}

.pluribus-hand-info-details__body > span,
.pluribus-hand-info-details__body > em {
  color: rgba(205, 180, 154, 0.72);
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.35;
}

.pluribus-hand-info-details__body strong {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.pluribus-hand-info-details__body strong em {
  padding: 0.12rem 0.36rem;
  border: 1px solid rgba(124, 238, 228, 0.1);
  border-radius: 999px;
  color: rgba(210, 236, 238, 0.78);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 720;
  line-height: 1.25;
}

.lesson-active .fact-card {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}

.lesson-active .fact-card:last-child {
  border-bottom: 0;
}

.lesson-active .table-pot-badge {
  top: calc(55.8% - var(--pot-badge-lift, clamp(56px, 4.2vw, 78px)));
}

@media (max-width: 760px) {
  .lesson-active .table-pot-badge {
    top: calc(44% - var(--pot-badge-lift, 0px));
  }
}

.lesson-active .board-zone {
  top: calc(53.8% - clamp(56px, 4.2vw, 78px));
}

.lesson-active .board-card,
.lesson-active .table-card {
  border-radius: 7px;
}

.lesson-active .seat-status-text,
.lesson-active .seat-caption {
  color: #f3cf86;
}

.lesson-active .seat-node.folded .seat-status-text,
.lesson-active .seat-status-text.seat-status--folded {
  color: rgba(245, 247, 250, 0.2);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.44);
}

.lesson-active .seat-node.hero-active .seat-status-text,
.lesson-active .seat-node.hero .seat-status-text,
.lesson-active .seat-status-text.seat-status--hero-active {
  color: #7ceee4;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 10px rgba(124, 238, 228, 0.46);
}

.lesson-active .seat-node.action:not(.opener-raise) .seat-status-text {
  color: #f3cf86;
}

.lesson-active .seat-node.opener-raise .seat-status-text {
  color: #f3cf86;
}

.lesson-active .seat-status-text.seat-status--opener-raise {
  color: #f3cf86;
}

.seat-node.folded .seat-status-text,
.seat-node.action.folded .seat-status-text,
.seat-status-text.seat-status--folded,
.lesson-active .seat-node.folded .seat-status-text,
.lesson-active .seat-node.action.folded .seat-status-text,
.lesson-active .seat-status-text.seat-status--folded {
  color: rgba(245, 247, 250, 0.2);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.44);
}

.lesson-active .answer-grid {
  position: fixed;
  left: 50%;
  /* Additive, not max() -- these are the Fold/Call/Raise decision buttons, the single most
     important interactive control in the trainer. On a device with a home-indicator inset, a
     plain max(1.25rem, inset) would sit the row flush against the indicator with no clearance;
     adding the inset on top of the existing offset keeps the same 1.25rem breathing room above it
     that non-notched devices already get. */
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  width: min(920px, 56vw);
  gap: 1.125rem;
  transform: translateX(-50%);
  pointer-events: auto;
}

.lesson-active .answer-grid--preflop-range.answer-grid--three-actions,
.lesson-active .answer-grid--pluribus-replay.answer-grid--three-actions,
.lesson-active .answer-grid.answer-grid--three-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1320px, calc(100vw - 2rem));
}

.lesson-active .answer-grid--preflop-range.answer-grid--four-actions,
.lesson-active .answer-grid--pluribus-replay.answer-grid--four-actions,
.lesson-active .answer-grid.answer-grid--four-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1320px, calc(100vw - 2rem));
}

.lesson-active .feedback-band--pluribus-terminal > div:first-child {
  display: none;
}

/* Deliberately no "bottom" override here - the terminal band keeps the same
   anchor as every other state so "Next hand" never moves from where "Deal
   Flop" sat. The replay button is positioned absolutely below it (see next
   rule) instead of adding a second row to the flex flow, which would grow
   the band and shift its anchored content upward. */
.lesson-active .feedback-band--pluribus-terminal .feedback-actions {
  position: relative;
}

.lesson-active .feedback-band--pluribus-terminal #pluribus-replay-again-button {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 0.5rem;
  transform: translateX(-50%);
}

.lesson-active .preflop-drill-selector {
  display: none;
}

.lesson-active .answer-button {
  min-height: 5rem;
  padding: 0.95rem 1.1rem;
  border-radius: 8px;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 16px 30px rgba(0, 0, 0, 0.34);
}

.lesson-active .answer-button[data-action="fold"] {
  background:
    linear-gradient(180deg, rgba(120, 20, 20, 0.96), rgba(52, 3, 5, 0.98));
  border-color: rgba(255, 100, 84, 0.62);
}

.lesson-active .answer-button[data-action="call"] {
  background:
    linear-gradient(180deg, rgba(20, 104, 58, 0.96), rgba(2, 46, 24, 0.98));
  border-color: rgba(89, 222, 144, 0.58);
}

.lesson-active .answer-button[data-action="raise"] {
  background:
    linear-gradient(180deg, rgba(16, 74, 128, 0.96), rgba(2, 25, 54, 0.98));
  border-color: rgba(92, 174, 255, 0.62);
}

.lesson-active .answer-button.answer-button--pressing {
  transform: translateY(2px) scale(0.985);
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 184, 0.16),
    0 9px 18px rgba(0, 0, 0, 0.3);
}

.pluribus-replay-active .answer-button,
.pluribus-replay-active .answer-button__art,
.pluribus-replay-active .answer-button__dim {
  transition-duration: 520ms;
}

.pluribus-replay-active .answer-button.answer-button--pressing,
.pluribus-replay-active .answer-button--asset-shell.answer-button--pressing {
  transition-duration: 360ms;
}

.pluribus-replay-active .feedback-panel--revealed {
  animation-duration: 720ms;
}

.pluribus-replay-active .preflop-chip-flight {
  animation-duration: 2200ms;
}

.lesson-active .answer-button.answer-button--selected-correct {
  border-color: transparent;
  box-shadow:
    inset 0 2px 0 rgba(255, 223, 154, 0.14),
    0 18px 30px rgba(0, 0, 0, 0.34);
}

/* Work order 10 item 7: the only previous signal for the correct answer was this border-color
   change -- next to indistinguishable from the other two buttons' own fold/call/raise action
   colors (confirmed against the reported Q9h screenshot). Recesses the non-answers instead of
   just brightening the answer, so the contrast carries the signal rather than a subtle color
   shift: every resolved button that ISN'T the correct one drops its action-themed
   background/border ([data-action="fold|call|raise"] below) and its label color, losing red/
   green/blue identity entirely; .correct gets a solid border and a physical scale so the
   distinction doesn't depend on color perception at all (checked against a greyscale render and
   a simulated deuteranopia/protanopia filter). Excludes .answer-button--missed-correct, a
   different, pre-existing state (a legitimate secondary-good answer on a *mixed* grade) this item
   isn't about -- its own gold highlight two rules below is unaffected. Muted via explicit color,
   not opacity (the previous .locked treatment), so the label stays legible rather than reading as
   disabled -- checked directly against the "must not look broken" instruction below. */
.lesson-active .answer-button.answer-button--resolved:not(.correct):not(.answer-button--missed-correct) {
  background: linear-gradient(180deg, rgba(18, 22, 24, 0.94), rgba(6, 9, 10, 0.96));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  filter: none;
}

.lesson-active .answer-button.answer-button--resolved:not(.correct):not(.answer-button--missed-correct) .answer-button__title,
.lesson-active .answer-button.answer-button--resolved:not(.correct):not(.answer-button--missed-correct) .answer-button__subtitle {
  color: #3a4749;
}

.lesson-active .answer-button.answer-button--missed-correct {
  filter: brightness(1.03) saturate(1.02);
  border-color: rgba(239, 190, 96, 0.68);
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 184, 0.14),
    0 0 0 1px rgba(239, 190, 96, 0.12),
    0 18px 30px rgba(0, 0, 0, 0.34);
}

/* The correct button itself: full-strength label color (untouched -- only the non-answers above
   lose theirs), clean background fill highlight, and a ~6% scale so it physically lifts out of the row.
   No outer rectangular green/teal 1px outline box. */
.lesson-active .answer-button.answer-button--resolved.correct {
  background:
    linear-gradient(180deg, rgba(6, 46, 38, 0.7), rgba(2, 22, 18, 0.86)),
    linear-gradient(180deg, rgba(18, 22, 24, 0.94), rgba(6, 9, 10, 0.96));
  border: none;
  border-color: transparent;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4);
  transform: scale(1.06);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .lesson-active .answer-button.answer-button--resolved.correct {
    transform: none;
  }
}

.lesson-active .answer-button strong {
  font-family: "Georgia", "Cambria", serif;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  letter-spacing: 0.02em;
}

.lesson-active .answer-button span {
  color: rgba(245, 247, 250, 0.76);
}

.answer-button--asset-shell {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  width: 100%;
  /* A floor under the aspect-ratio below: the title/subtitle font sizes are sized off the full
     viewport width (vw-based clamps), not this button's own rendered width, so when the trainer
     play area narrows (e.g. the coach sidebar opening) without the viewport itself narrowing, a
     strict 4:1 ratio can squeeze the box shorter than the (unchanged-size) text actually needs,
     clipping/overflowing it. min-height wins over the ratio-derived height once width/4 would dip
     below this, so the box grows taller instead of the text ever having too little room. */
  min-height: 4.8rem;
  aspect-ratio: 4 / 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #f8fbff;
  line-height: 1;
  text-align: center;
  box-shadow: none !important;
  filter: none !important;
}@media (hover: hover) and (pointer: fine) {
  .answer-button--asset-shell:hover {
  outline: none;
}
}

.answer-button--asset-shell:focus-visible {
  outline: none;
}

.answer-button--asset-shell:focus-visible {
  outline: 2px solid rgba(244, 198, 101, 0.86);
  outline-offset: 3px;
}

.answer-button--asset-shell:active:not(:disabled),
.answer-button--asset-shell.answer-button--pressing {
  transform: translateY(1px) scale(0.992);
}

.answer-button--asset-shell span {
  margin-top: 0;
}

.answer-button__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  transition: filter 160ms ease, opacity 160ms ease;
}@media (hover: hover) and (pointer: fine) {
  .answer-button--asset-shell:hover .answer-button__art {
  filter: brightness(1.04) saturate(1.02);
}
}

.answer-button--asset-shell:focus-visible .answer-button__art {
  filter: brightness(1.04) saturate(1.02);
}

.answer-button__base,
.answer-button__overlay,
.answer-button__dim {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.answer-button__base {
  z-index: 0;
}

.answer-button__overlay {
  z-index: 1;
  opacity: 0;
  mix-blend-mode: screen;
}

.answer-button__overlay--gold {
  z-index: 2;
  transform: none;
  transform-origin: center;
}

.answer-button__dim {
  z-index: 3;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition: opacity 160ms ease, background 160ms ease;
}

.answer-button__content {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.5rem;
  box-sizing: border-box;
  color: #f8fbff;
  line-height: 1.1;
  text-align: center;
  transform: none;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.74),
    0 2px 7px rgba(0, 0, 0, 0.62);
}

.answer-button__title {
  display: block;
  width: 100%;
  color: #f8ead0;
  font-family: "Georgia", "Cambria", "Times New Roman", serif;
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
}

.answer-button__subtitle {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 0.15rem;
  color: rgba(248, 250, 252, 0.9);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.1;
}

.answer-button__frequency {
  position: absolute;
  right: 2.25rem;
  bottom: 1.26rem;
  z-index: 5;
  display: block;
  color: #f7d58d;
  font-family: "Georgia", "Cambria", serif;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.86),
    0 2px 5px rgba(0, 0, 0, 0.72),
    0 0 9px rgba(255, 209, 126, 0.32);
  pointer-events: none;
}

.answer-button__frequency:empty {
  display: none;
}

.answer-button--asset-shell.answer-button--resolved:disabled {
  opacity: 1;
}

.answer-button--asset-shell.answer-button--selected-correct,
.answer-button--asset-shell.answer-button--selected-incorrect,
.answer-button--asset-shell.answer-button--missed-correct {
  border-color: transparent;
  box-shadow: none !important;
  filter: none !important;
  transform: none;
}

.answer-button--asset-shell.answer-button--selected-correct .answer-button__overlay--success {
  opacity: 0.66;
}

.answer-button--asset-shell.answer-button--selected-correct .answer-button__overlay--gold {
  animation: action-button-gold-sweep 560ms ease-out 60ms both;
}

.answer-button--asset-shell.answer-button--selected-incorrect .answer-button__overlay--failure {
  opacity: 0.68;
}

.answer-button--asset-shell.answer-button--selected-incorrect .answer-button__dim {
  background: rgba(5, 4, 5, 0.18);
  opacity: 1;
}

.answer-button--asset-shell.answer-button--missed-correct .answer-button__overlay--gold {
  animation: action-button-gold-sweep 600ms ease-out 170ms both;
}

.answer-button--asset-shell.locked:not(.answer-button--missed-correct) .answer-button__dim {
  background: rgba(0, 0, 0, 0.24);
  opacity: 1;
}

.answer-button--asset-shell.locked:not(.answer-button--missed-correct) {
  opacity: 1 !important;
  filter: none !important;
}

.answer-button--asset-shell.locked:not(.answer-button--missed-correct) .answer-button__content {
  opacity: 0.82;
}

.lesson-active .answer-button--asset-shell {
  max-width: 460px;
  min-height: 4.2rem;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.lesson-active .answer-button--asset-shell[data-action="fold"],
.lesson-active .answer-button--asset-shell[data-action="call"],
.lesson-active .answer-button--asset-shell[data-action="raise"] {
  background: transparent !important;
  border-color: transparent;
  box-shadow: none !important;
  filter: none !important;
}

.lesson-active .answer-button--asset-shell .answer-button__content {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.4rem;
  transform: none;
}

.lesson-active .answer-button--asset-shell .answer-button__title {
  font-size: clamp(1.2rem, 1.28vw, 1.55rem);
  margin: 0;
  line-height: 1.1;
}

.lesson-active .answer-button--asset-shell .answer-button__subtitle {
  color: rgba(245, 247, 250, 0.88);
  font-size: clamp(0.76rem, 0.7vw, 0.86rem);
  margin-top: 0.15rem;
  line-height: 1.1;
}

/* The three/four-action grids (.answer-grid--three-actions/--four-actions) keep their
   multi-column layout at every viewport width; the default two-action grid now does too (UI
   polish work order 4, item 1 -- it used to collapse to a single full-width column below 760px,
   see the comment near .lesson-active .answer-grid's 760px rule). Below ~520px that leaves each
   asset-shell button too narrow for .answer-button__content's 1.7rem side padding, wrapping
   single-word labels like "3-bet" onto a second line, and two-word labels ("Bet Small",
   "Bet Big") always wrap onto two lines regardless. Tighter padding and a lower title-size
   floor keep single-word labels on one line down to 320px; the two-word case still needs two
   lines, so the button also gets a taller min-height here -- the existing 760px-breakpoint
   min-height (.lesson-active .answer-button) is sized for a single-line title and is too short
   once a title wraps, clipping the bet-size subtitle ($5/$8) against the button's own
   overflow: hidden. Two-action buttons are wider than three/four-action ones at every shared
   breakpoint (half the row instead of a third/quarter), so they weren't found to need the same
   treatment -- checked directly, not assumed, see the item-1 verification in the work order 4
   status report. */
@media (max-width: 520px) {
  .lesson-active .answer-grid--three-actions .answer-button--asset-shell,
  .lesson-active .answer-grid--four-actions .answer-button--asset-shell {
    min-height: 5.6rem;
  }

  .lesson-active .answer-grid--three-actions .answer-button--asset-shell .answer-button__content,
  .lesson-active .answer-grid--four-actions .answer-button--asset-shell .answer-button__content {
    padding: 0.4rem 0.2rem;
    transform: none;
  }

  .lesson-active .answer-grid--three-actions .answer-button--asset-shell .answer-button__title,
  .lesson-active .answer-grid--four-actions .answer-button--asset-shell .answer-button__title {
    font-size: clamp(1rem, 4.6vw, 1.2rem);
  }
}

@keyframes action-button-gold-sweep {
  0% {
    opacity: 0;
    filter: brightness(0.92) saturate(0.94);
  }

  34% {
    opacity: 0.82;
    filter: brightness(1.08) saturate(1.04);
  }

  100% {
    opacity: 0.62;
    filter: brightness(0.98) saturate(0.96);
  }
}

.lesson-active .feedback-band {
  position: fixed;
  left: 50%;
  bottom: calc(7.85rem + env(safe-area-inset-bottom));
  z-index: 33;
  width: min(920px, 56vw);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.lesson-active .feedback-band.feedback-band--idle {
  display: none;
}

.lesson-active .feedback-band > div:first-child {
  display: none;
}

.lesson-active .feedback-actions {
  width: 100%;
  gap: 0.34rem;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lesson-active .feedback-actions .secondary-button {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #f8ead0;
  pointer-events: auto;
}

.mini-control-button {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  overflow: visible;
  width: clamp(9.5rem, 12vw, 12rem);
  height: clamp(2rem, 2.45vw, 2.45rem);
  aspect-ratio: 5.52 / 1;
  color: #f8ead0;
  line-height: 1;
  text-align: center;
  transform: none;
  transition: filter 160ms ease, opacity 160ms ease, transform 120ms ease;
}

.mini-control-button__base {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.mini-control-button__content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-width: 0;
  max-width: 78%;
  transform: translateY(-1px);
  pointer-events: none;
}

.mini-control-button__icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.76));
  flex: 0 0 auto;
}

.mini-control-button__label {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  color: inherit;
  font-size: clamp(0.69rem, 0.7vw, 0.78rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.84),
    0 0 7px rgba(239, 190, 96, 0.22);
}

.mini-control-button--viewRange {
  opacity: 0.9;
}

.lesson-active #continue-button.continue-button--ready {
  opacity: 1;
  color: #fff3c7;
  filter: brightness(1.06) saturate(1.04);
}@media (hover: hover) and (pointer: fine) {
  .lesson-active .feedback-actions .mini-control-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08) saturate(1.04);
}
}

.lesson-active .feedback-actions .mini-control-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08) saturate(1.04);
}

.lesson-active .feedback-actions .mini-control-button:focus-visible {
  outline: 2px solid rgba(244, 198, 101, 0.76);
  outline-offset: 3px;
}

.lesson-active .feedback-actions .mini-control-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.992);
  filter: brightness(0.96);
}

.mini-control-divider {
  position: relative;
  display: block;
  overflow: hidden;
  width: clamp(1.65rem, 2.1vw, 2.35rem);
  height: clamp(1.35rem, 1.75vw, 1.9rem);
  flex: 0 0 auto;
  pointer-events: none;
}

.mini-control-divider img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 5.5rem;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.lesson-active #gto-table-button.hidden + .mini-control-divider {
  display: none;
}

.lesson-active .feedback-band.feedback-panel--revealed {
  animation: lesson-answer-feedback-enter 210ms ease-out both;
}

.lesson-active .feedback-band.feedback-panel--correct {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.lesson-active .feedback-band.feedback-panel--incorrect {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.lesson-active .side-panel {
  position: fixed;
  top: clamp(3.875rem, 7.2vh, 4.75rem);
  right: max(0.35rem, env(safe-area-inset-right));
  z-index: 27;
  display: grid;
  width: min(190px, calc(100vw - 1rem));
  max-height: calc(100svh - 12rem);
  overflow-y: auto;
}

.side-panel {
  display: grid;
  gap: 0.58rem;
  align-content: start;
  padding: 0.62rem 0.64rem;
  border: 1px solid rgba(106, 201, 222, 0.1);
  border-top-color: rgba(164, 228, 236, 0.18);
  border-right-color: rgba(164, 228, 236, 0.24);
  border-left-color: rgba(106, 201, 222, 0.06);
  border-radius: 8px 0 0 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(83, 196, 216, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(4, 18, 29, 0.88), rgba(1, 8, 14, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(231, 249, 255, 0.09),
    inset -4px 0 20px rgba(98, 213, 225, 0.055),
    -7px 12px 22px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
  scrollbar-color: rgba(118, 206, 224, 0.34) rgba(1, 9, 14, 0.18);
  scrollbar-width: thin;
}

.drill-info-card,
.weakest-spots-card,
.recent-card {
  padding: 0.26rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.side-panel .section-head {
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.44rem;
  padding: 0 0 0.34rem;
  border-bottom: 1px solid rgba(132, 211, 226, 0.08);
}

.side-panel .section-head h3 {
  margin: 0;
  color: rgba(246, 236, 210, 0.94);
  font-family: "Georgia", "Cambria", serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.1;
  text-shadow: 0 1px 10px rgba(229, 174, 91, 0.08);
}

.side-panel .section-badge {
  padding: 0.22rem 0.46rem;
  border: 1px solid rgba(224, 176, 94, 0.2);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 231, 172, 0.08), rgba(255, 231, 172, 0.015)),
    rgba(5, 19, 29, 0.56);
  color: rgba(232, 192, 126, 0.82);
  font-size: 0.58rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.drill-meta-grid {
  display: grid;
  gap: 0;
}

.drill-meta-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: baseline;
  min-width: 0;
  min-height: 1.55rem;
  padding: 0.31rem 0.04rem;
  border-bottom: 1px solid rgba(118, 206, 224, 0.065);
  background: transparent;
  box-shadow: none;
}

.drill-meta-item:last-child {
  border-bottom: 0;
}

.drill-meta-item span {
  display: block;
  color: rgba(145, 184, 201, 0.72);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.08;
  text-transform: uppercase;
}

.drill-meta-item strong {
  display: block;
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  color: rgba(246, 235, 213, 0.94);
  font-size: 0.77rem;
  font-weight: 740;
  letter-spacing: 0;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drill-guide {
  margin: 0.5rem 0 0;
  padding: 0.44rem 0.5rem;
  border: 1px solid rgba(218, 171, 94, 0.12);
  border-radius: 8px;
  background: rgba(1, 10, 16, 0.28);
  color: rgba(178, 207, 218, 0.74);
  font-size: 0.61rem;
  font-weight: 560;
  line-height: 1.34;
}

.weakest-spots-list {
  display: grid;
  gap: 0;
}

.weakest-spot-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.42rem;
  align-items: center;
  min-width: 0;
  min-height: 1.85rem;
  padding: 0.4rem 0.04rem;
  border-bottom: 1px solid rgba(118, 206, 224, 0.065);
  background: transparent;
  box-shadow: none;
}

.weakest-spot-item:last-child {
  border-bottom: 0;
}

.weakest-spot-item div {
  min-width: 0;
}

.weakest-spot-item strong {
  display: block;
  overflow: hidden;
  color: rgba(248, 242, 226, 0.94);
  font-size: 0.7rem;
  font-weight: 740;
  letter-spacing: 0;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weakest-spot-item span {
  display: block;
  margin-top: 0.18rem;
  overflow: hidden;
  color: rgba(145, 184, 201, 0.7);
  font-size: 0.53rem;
  font-weight: 620;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weakest-spot-item em {
  color: rgba(232, 192, 126, 0.86);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.weakest-spots-empty {
  margin: 0;
  padding: 0.32rem 0.04rem 0.14rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(166, 197, 210, 0.7);
  font-size: 0.62rem;
  font-weight: 560;
  line-height: 1.34;
}

.result-grid {
  display: grid;
  gap: 0;
  margin-top: 0;
}

.result-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: baseline;
  min-width: 0;
  min-height: 1.55rem;
  padding: 0.31rem 0.04rem;
  border: 0;
  border-bottom: 1px solid rgba(118, 206, 224, 0.065);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.result-item:last-child {
  border-bottom: 0;
}

.result-item span {
  display: block;
  color: rgba(145, 184, 201, 0.72);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.12;
  text-transform: uppercase;
}

.result-item strong {
  display: block;
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  color: rgba(246, 235, 213, 0.94);
  font-size: 0.77rem;
  font-weight: 740;
  letter-spacing: 0;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-card #last-note {
  margin: 0.42rem 0 0;
  padding: 0.32rem 0.04rem 0;
  border: 0;
  border-top: 1px solid rgba(119, 199, 218, 0.065);
  border-radius: 0;
  background: transparent;
  color: rgba(166, 197, 210, 0.7);
  font-size: 0.62rem;
  font-weight: 520;
  line-height: 1.42;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right))
    max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
  overflow: hidden;
  background:
    radial-gradient(ellipse at 52% 18%, rgba(42, 167, 181, 0.16), transparent 42%),
    rgba(2, 7, 12, 0.78);
  backdrop-filter: blur(2px);
}

.modal-card {
  width: min(620px, 100%);
  max-height: calc(100vh - 1rem);
  max-height: calc(100svh - 1rem);
  overflow: hidden;
  padding: 1.4rem;
  animation: review-in 300ms ease;
}

#summary-modal .modal-card {
  width: min(860px, 100%);
}

.fk-saved-manage-modal.hidden {
  display: none;
}

.fk-saved-manage-card {
  display: grid;
  gap: 1rem;
  width: min(760px, 100%);
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(137, 216, 232, 0.2);
  background:
    linear-gradient(135deg, rgba(9, 28, 41, 0.97), rgba(2, 9, 15, 0.98));
}

.fk-saved-manage-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.fk-saved-manage-header h3 {
  margin: 0.24rem 0 0.35rem;
  color: #f7fbff;
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: 0;
}

.fk-saved-manage-header p {
  margin: 0;
  color: rgba(205, 226, 235, 0.68);
  font-size: 0.9rem;
}

/* Work order 8, part E: audited every real consumer of this shared class (account prompt, card
   backs, premium, feedback, ad, saved sessions modals -- six real consumers, confirmed via grep
   before touching anything) at mobile width before changing it. All six measured an identical,
   consistent 35.83px square -- below this project's own 44px touch-target floor (work order 1) --
   so the fix is a single shared bump, not a per-consumer patch. Enlarged via width/height
   directly rather than padding, since the "x" glyph is meant to visually grow with its own
   touch target here (unlike, say, a small icon inside a larger tap zone) and every measured
   consumer had ample surrounding clearance (the tightest, the account-prompt modal, still has
   >300px of card width to spare). Both position:absolute consumers (.fk-premium-modal-card,
   .fk-feedback-modal-card, below) anchor via top+right with no explicit width, so the extra 8px
   grows toward the card's own centre, not off its edge -- reconfirmed clean at all four
   viewports after the change, no consumer's header text or card edge encroached on. */
.fk-saved-modal-close {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(137, 216, 232, 0.24);
  border-radius: 999px;
  color: rgba(230, 242, 247, 0.82);
  background: rgba(8, 22, 31, 0.78);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}@media (hover: hover) and (pointer: fine) {
  .fk-saved-modal-close:hover {
  outline: none;
  border-color: rgba(255, 217, 138, 0.72);
  color: var(--menu-gold-bright);
}
}

.fk-saved-modal-close:focus-visible {
  outline: none;
  border-color: rgba(255, 217, 138, 0.72);
  color: var(--menu-gold-bright);
}

.fk-saved-manage-list {
  display: grid;
  gap: 0.9rem;
  max-height: min(62vh, 34rem);
  overflow: auto;
  padding-right: 0.16rem;
}

/* Reusable Premium modal (item 3): one card, fixed eyebrow/headline/caption via src/premium.js's
   PREMIUM_MODAL_EYEBROW/HEADLINE/CAPTION, read by app.js's openPremiumModal(). */
.fk-premium-modal-card {
  position: relative;
  display: grid;
  gap: 0.95rem;
  width: min(440px, 100%);
  padding: clamp(1.3rem, 2.4vw, 1.7rem);
  border: 1px solid rgba(240, 187, 89, 0.32);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(240, 187, 89, 0.14), transparent 55%),
    linear-gradient(135deg, rgba(9, 28, 41, 0.97), rgba(2, 9, 15, 0.98));
}

/* Close button moves to the top-right corner, out of the grid flow, so the header below can use
   the full card width instead of reserving space for it inline. */
.fk-premium-modal-card > .fk-saved-modal-close {
  position: absolute;
  top: clamp(1.3rem, 2.4vw, 1.7rem);
  right: clamp(1.3rem, 2.4vw, 1.7rem);
}

.fk-premium-modal-header {
  display: grid;
  gap: 0.3rem;
  padding-right: 2.6rem;
  text-align: left;
}

/* The FishKiller mark sits beside the eyebrow text, inline, rather than as its own corner
   ornament or fused into a pill -- a small lockup at the top of the header, nothing more. */
.fk-premium-modal-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  margin: 0 0 0.1rem;
}

.fk-premium-modal-eyebrow-mark {
  width: 0.95rem;
  height: 0.95rem;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(240, 187, 89, 0.35));
}

.fk-premium-modal-eyebrow-text {
  color: var(--gold-strong);
  font-family: Georgia, "Cambria", serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fk-premium-modal-header h2 {
  margin: 0;
  color: var(--text);
  font-family: Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

.fk-premium-modal-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.fk-premium-modal-benefits {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fk-premium-modal-benefits li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

/* A filled tick mark -- a small, weighty premium badge rather than a bare glyph, giving each
   benefit row real visual mass without adding descriptive subtext. */
.fk-premium-modal-benefits li::before {
  content: "✓";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(240, 187, 89, 0.32), rgba(240, 187, 89, 0.14));
  box-shadow: inset 0 0 0 1px rgba(240, 187, 89, 0.4);
  color: var(--gold-strong);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.fk-premium-plan-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.fk-premium-plan-option {
  position: relative;
  display: grid;
  gap: 0.22rem;
  padding: 0.85rem 0.75rem;
  border: 1px solid rgba(176, 240, 255, 0.18);
  border-radius: 0.85rem;
  background: rgba(4, 23, 37, 0.6);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}@media (hover: hover) and (pointer: fine) {


.fk-premium-plan-option:hover {
  border-color: rgba(176, 240, 255, 0.36);
}
}

.fk-premium-plan-option:focus-visible {
  outline: 2px solid var(--teal-soft);
  outline-offset: 2px;
}

.fk-premium-plan-option--selected {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(240, 187, 89, 0.16), rgba(240, 187, 89, 0.04));
  box-shadow: inset 0 0 0 1px rgba(240, 187, 89, 0.3);
}

/* A corner tag riding the top-right edge of the card, not its own grid row -- so it never
   pushes Name/Price/Note down and both options' text lines up on the same rows regardless of
   which one carries a badge. */
.fk-premium-plan-badge {
  position: absolute;
  top: -0.5rem;
  right: 0.7rem;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(6, 14, 20, 0.5);
  background: linear-gradient(180deg, var(--gold-strong), var(--gold));
  color: #241a08;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.fk-premium-plan-badge.hidden {
  display: none;
}

.fk-premium-plan-name {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 720;
}

.fk-premium-plan-price {
  color: var(--gold-strong);
  font-size: 1.1rem;
  font-weight: 750;
}

/* Annual's honest comparison row: a crossed-out what-you'd-pay-monthly-for-a-year total next to
   the real price -- arithmetic, not a claimed former sale price (src/premium.js's
   comparisonPriceLabel comment has the derivation). The real price is the visually dominant
   figure; the comparison price is unmistakably struck through but deliberately smaller and muted
   so the eye lands on $29.99/year first. */
.fk-premium-plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.32rem;
}

.fk-premium-plan-price-row .fk-premium-plan-price {
  font-size: 1.2rem;
  font-weight: 800;
}

.fk-premium-plan-price-was {
  color: rgba(176, 214, 228, 0.62);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: rgba(176, 214, 228, 0.55);
  text-decoration-thickness: 1.2px;
}

.fk-premium-plan-note {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
}

.fk-premium-cta {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, var(--gold-strong), var(--gold));
  color: #241a08;
  font-size: 0.95rem;
  font-weight: 720;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
}@media (hover: hover) and (pointer: fine) {
  .fk-premium-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
}

.fk-premium-cta:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.fk-premium-cta:disabled {
  cursor: default;
  filter: grayscale(0.3) brightness(0.9);
  transform: none;
}

.fk-premium-checkout-status {
  margin-top: -0.5rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(124, 238, 228, 0.3);
  border-radius: 0.7rem;
  background: rgba(51, 214, 195, 0.08);
  color: var(--teal-soft);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

.fk-premium-checkout-status.hidden {
  display: none;
}

.fk-premium-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding-top: 0.2rem;
  border-top: 1px solid rgba(176, 240, 255, 0.1);
}

.fk-premium-footer-link {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(176, 214, 228, 0.68);
  font-size: 0.72rem;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .fk-premium-footer-link:hover {
  color: var(--teal-soft);
  text-decoration: underline;
}
}

.fk-premium-footer-link:focus-visible {
  color: var(--teal-soft);
  text-decoration: underline;
}

.ad-modal-card {
  display: grid;
  gap: 0.9rem;
  width: min(480px, 100%);
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(137, 216, 232, 0.2);
  background: linear-gradient(135deg, rgba(9, 28, 41, 0.97), rgba(2, 9, 15, 0.98));
}

.ad-modal-sponsored-label {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(205, 226, 235, 0.78);
}

.ad-modal-image {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
}

.ad-modal-card h3 {
  margin: 0;
  color: #f7fbff;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
}

.ad-modal-card p {
  margin: 0;
  color: rgba(205, 226, 235, 0.78);
  font-size: 0.95rem;
}

.ad-modal-link {
  text-align: center;
  text-decoration: none;
}

.fk-card-backs-modal.hidden {
  display: none;
}

.fk-card-backs-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem;
  width: min(980px, 100%);
  height: min(780px, calc(100dvh - 1rem));
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(137, 216, 232, 0.2);
  background: linear-gradient(135deg, rgba(9, 28, 41, 0.98), rgba(2, 9, 15, 0.99));
}

.fk-card-backs-modal-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 17rem;
  gap: 0.9rem;
  padding: 0.08rem 0.32rem 0.12rem 0.02rem;
}

.fk-card-backs-modal-grid .fk-card-back-option {
  grid-template-rows: minmax(8rem, 1fr) auto auto 2rem;
  gap: 0.5rem;
  padding: 0.75rem;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .fk-card-backs-modal-grid .fk-card-back-option:hover {
  outline: none;
  border-color: rgba(124, 238, 228, 0.58);
  box-shadow: inset 0 0 0 1px rgba(124, 238, 228, 0.1), 0 0 18px rgba(54, 215, 221, 0.1);
}
}

.fk-card-backs-modal-grid .fk-card-back-option:focus-visible {
  outline: none;
  border-color: rgba(124, 238, 228, 0.58);
  box-shadow: inset 0 0 0 1px rgba(124, 238, 228, 0.1), 0 0 18px rgba(54, 215, 221, 0.1);
}

.fk-card-backs-modal-grid .fk-card-back-preview-shell {
  width: min(6.2rem, 100%);
}

.fk-card-backs-modal-grid .fk-card-back-copy strong {
  font-size: 0.92rem;
}

.fk-card-backs-modal-grid .fk-card-back-copy small,
.fk-card-backs-modal-grid .fk-card-back-action-label,
.fk-card-backs-modal-grid .fk-card-back-option button {
  font-size: 0.68rem;
}

@media (max-width: 760px) {
  .fk-card-backs-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fk-saved-manage-group {
  display: grid;
  gap: 0.48rem;
}

.fk-saved-manage-group h4 {
  margin: 0;
  color: rgba(246, 207, 124, 0.82);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fk-saved-manage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  min-width: 0;
  padding: 0.72rem 0.78rem;
  border: 1px solid rgba(137, 216, 232, 0.14);
  border-radius: 8px;
  background: rgba(5, 18, 27, 0.72);
}

.session-summary-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(4.8rem, 1fr) auto auto;
  gap: clamp(0.34rem, 0.82vw, 0.58rem);
  isolation: isolate;
  width: min(860px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  height: auto;
  padding: clamp(0.76rem, 1.45vw, 1.08rem);
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 72% 16%, rgba(42, 167, 181, 0.2), transparent 34%),
    radial-gradient(circle at 88% 44%, rgba(20, 99, 119, 0.2), transparent 30%),
    repeating-radial-gradient(circle at 90% 47%, rgba(124, 238, 228, 0.045) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, rgba(3, 16, 25, 0.98), rgba(0, 7, 13, 0.98) 56%, rgba(0, 13, 22, 0.96));
  border: 1px solid rgba(124, 238, 228, 0.28);
  box-shadow:
    0 30px 78px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(240, 187, 89, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.session-summary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(124, 238, 228, 0.055), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%),
    repeating-linear-gradient(108deg, rgba(124, 238, 228, 0.035) 0 1px, transparent 1px 54px);
  opacity: 0.75;
}

.session-summary-card::after {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(124, 238, 228, 0.08), transparent 22%),
    radial-gradient(ellipse at 78% 68%, rgba(76, 174, 255, 0.07), transparent 28%),
    repeating-linear-gradient(164deg, transparent 0 28px, rgba(124, 238, 228, 0.035) 29px 30px, transparent 31px 68px);
  opacity: 0.86;
  transform: translate3d(0, 0, 0);
  animation: summary-current-drift 14s ease-in-out infinite alternate;
}

#gto-modal .modal-card {
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
}

.modal.success .modal-card {
  border-color: rgba(28, 197, 139, 0.32);
  box-shadow: 0 0 0 1px rgba(28, 197, 139, 0.12), var(--shadow);
}

.modal.failed .modal-card {
  border-color: rgba(242, 100, 82, 0.38);
  box-shadow: 0 0 0 1px rgba(242, 100, 82, 0.13), var(--shadow);
}

.modal-card h3 {
  margin: 0.85rem 0 0.45rem;
  font-size: clamp(1.8rem, 3vw, 2.25rem);
}

.session-summary-card h3 {
  margin: 0.16rem 0 0.18rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.9vw, 3.22rem);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0;
  color: #fbfbf4;
  text-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 0 24px rgba(246, 207, 124, 0.08);
}

.modal.rating-outcome-success .session-summary-card h3 {
  text-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 0 28px rgba(51, 214, 195, 0.12);
}

.modal.rating-outcome-fail .session-summary-card h3 {
  color: #fff5ef;
  text-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 0 24px rgba(242, 100, 82, 0.14);
}

.avatar-picker-modal {
  z-index: 42;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(24, 118, 126, 0.18), transparent 44%),
    rgba(0, 3, 8, 0.72);
  backdrop-filter: blur(3px);
}

.avatar-picker-card {
  width: min(430px, 100%);
  max-height: calc(100dvh - 2rem);
  padding: 1rem;
  overflow: hidden;
  border: 1px solid rgba(124, 238, 228, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(55, 159, 151, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(2, 14, 22, 0.96), rgba(0, 5, 11, 0.98));
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(51, 214, 195, 0.08),
    inset 0 1px 0 rgba(246, 207, 124, 0.08);
}

.avatar-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.avatar-picker-card h3 {
  margin: 0.24rem 0 0;
  color: #f4fcff;
  font-size: 1.32rem;
  line-height: 1.05;
  text-shadow: 0 0 18px rgba(51, 214, 195, 0.12);
}

.avatar-picker-close {
  min-height: 2rem;
  padding: 0.36rem 0.64rem;
  border: 1px solid rgba(246, 207, 124, 0.3);
  border-radius: 999px;
  background: rgba(3, 15, 22, 0.72);
  color: rgba(246, 207, 124, 0.88);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.04em;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .avatar-picker-close:hover {
  outline: none;
  border-color: rgba(246, 207, 124, 0.54);
  box-shadow:
    0 0 0 3px rgba(240, 187, 89, 0.12),
    0 0 18px rgba(240, 187, 89, 0.12);
}
}

.avatar-picker-close:focus-visible {
  outline: none;
  border-color: rgba(246, 207, 124, 0.54);
  box-shadow:
    0 0 0 3px rgba(240, 187, 89, 0.12),
    0 0 18px rgba(240, 187, 89, 0.12);
}

.avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
}

.avatar-picker-option {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.46rem;
  min-width: 0;
  padding: 0.62rem 0.4rem 0.58rem;
  border: 1px solid rgba(124, 238, 228, 0.11);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(1, 12, 20, 0.72);
  color: rgba(221, 242, 246, 0.78);
  font: inherit;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 10px 18px rgba(0, 0, 0, 0.16);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}@media (hover: hover) and (pointer: fine) {


.avatar-picker-option:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 238, 228, 0.26);
  background:
    linear-gradient(180deg, rgba(124, 238, 228, 0.08), rgba(255, 255, 255, 0.012)),
    rgba(1, 12, 20, 0.82);
}
}

.avatar-picker-option:focus-visible {
  outline: none;
  border-color: rgba(124, 238, 228, 0.52);
  box-shadow:
    inset 0 0 0 1px rgba(124, 238, 228, 0.18),
    0 0 0 3px rgba(54, 215, 221, 0.16),
    0 0 0 5px rgba(240, 187, 89, 0.08);
}

.avatar-picker-option.selected {
  border-color: rgba(246, 207, 124, 0.62);
  color: #f8d891;
  box-shadow:
    inset 0 0 0 1px rgba(124, 238, 228, 0.14),
    0 0 0 1px rgba(246, 207, 124, 0.18),
    0 0 22px rgba(240, 187, 89, 0.16);
}

.avatar-picker-option .fk-character-portrait {
  width: 4.05rem;
  height: 4.05rem;
  overflow: hidden;
  border: 1px solid rgba(124, 238, 228, 0.2);
  border-radius: 999px;
  background:
    radial-gradient(circle at 55% 32%, rgba(124, 238, 228, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(6, 25, 35, 0.96), rgba(0, 6, 12, 0.98));
}

.avatar-picker-option.selected .fk-character-portrait {
  border-color: rgba(246, 207, 124, 0.68);
  box-shadow:
    0 0 0 2px rgba(246, 207, 124, 0.2),
    0 0 0 4px rgba(54, 215, 221, 0.08),
    0 0 18px rgba(240, 187, 89, 0.18);
}

.avatar-picker-option .fk-character-portrait-image {
  width: 138%;
  height: 138%;
  transform: translateY(8%);
}

.avatar-picker-option span:not(.fk-character-portrait) {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.045em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.summary-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10.8rem, 14.75rem);
  gap: clamp(0.68rem, 1.55vw, 0.96rem);
  align-items: start;
}

.summary-hero-copy {
  min-width: 0;
}

#summary-modal .summary-status-pill,
#summary-modal .summary-hero-copy p {
  display: none;
}

.summary-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.26rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(51, 214, 195, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(51, 214, 195, 0.15), rgba(51, 214, 195, 0.055)),
    rgba(0, 24, 31, 0.72);
  color: #bffff8;
  font-size: 0.56rem;
  font-weight: 860;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(51, 214, 195, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.summary-hero-copy p {
  max-width: 680px;
  margin: 0;
  color: rgba(238, 251, 255, 0.9);
  font-size: clamp(0.86rem, 1.25vw, 1rem);
  line-height: 1.18;
}

.summary-emblem {
  justify-self: end;
  width: clamp(11.75rem, 20vw, 14.75rem);
  aspect-ratio: 1;
  opacity: 0.92;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 18px rgba(240, 187, 89, 0.16));
}

.summary-emblem-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modal.rating-outcome-success .summary-emblem-image--success,
.modal.rating-outcome-unavailable.success .summary-emblem-image--success,
.modal.rating-outcome-fail .summary-emblem-image--fail,
.modal.rating-outcome-unavailable.failed .summary-emblem-image--fail {
  display: block;
}

.modal.failed .summary-emblem {
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 16px rgba(242, 100, 82, 0.18));
}

.summary-results-band {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) max-content;
  gap: clamp(0.58rem, 1.3vw, 0.92rem);
  align-items: end;
  margin-top: -1.7rem;
}

.summary-grade-hero {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  min-width: 0;
  min-height: clamp(8.3rem, 14vh, 10.2rem);
  padding: 0;
  margin-top: -0.58rem;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.34));
  text-align: center;
}

.summary-hero-copy .summary-grade-hero {
  justify-items: start;
  min-height: 0;
  margin-top: 0.28rem;
}

.summary-hero-copy .summary-grade-image {
  width: min(100%, clamp(8.8rem, 15vw, 11rem));
  height: clamp(8.8rem, 15vw, 11rem);
}

.summary-grade-image {
  display: block;
  width: min(100%, clamp(8.7rem, 16vw, 11.5rem));
  height: clamp(8.7rem, 16vw, 11.5rem);
  object-fit: contain;
}

.summary-metric-value-stack > span,
.summary-impact-card > span,
.summary-section-head span,
.summary-coaching-card span {
  display: block;
  color: rgba(238, 251, 255, 0.84);
  font-size: 0.66rem;
  font-weight: 840;
  letter-spacing: 0.115em;
  line-height: 1.2;
  text-transform: uppercase;
}

.summary-metric-row strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 0.2rem;
  overflow: hidden;
  color: rgba(246, 242, 235, 0.98);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.42rem, 2.2vw, 1.82rem);
  font-weight: 760;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 0 18px rgba(246, 207, 124, 0.08);
  white-space: nowrap;
}

.summary-metric-row small:not(.summary-metric-delta) {
  display: inline-block;
  margin-top: 0;
  color: var(--teal-soft);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.summary-metrics-panel {
  display: grid;
  grid-column: 2;
  gap: 0.42rem;
  justify-self: end;
  width: 18.5rem;
  max-width: 100%;
  min-width: 0;
  margin-top: 0.02rem;
}

.summary-metric-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 4.35rem;
  padding: 0.58rem 0.68rem;
  overflow: hidden;
  border: 1px solid rgba(176, 240, 255, 0.13);
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 0, rgba(124, 238, 228, 0.07), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(2, 14, 23, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.summary-metric-value-stack {
  display: grid;
  justify-items: start;
  min-width: 0;
  text-align: left;
}

.summary-metric-icon {
  display: grid;
  place-items: center;
  align-self: start;
  width: 2.56rem;
  height: 2.56rem;
  margin-right: 0.66rem;
  border: 1px solid rgba(240, 187, 89, 0.36);
  border-radius: 50%;
  color: rgba(246, 207, 124, 0.96);
  background:
    radial-gradient(circle at 45% 35%, rgba(255, 226, 177, 0.16), transparent 44%),
    rgba(240, 187, 89, 0.08);
  line-height: 1;
  box-shadow:
    inset 0 0 16px rgba(240, 187, 89, 0.08),
    0 0 16px rgba(240, 187, 89, 0.08);
}

.summary-metric-icon svg {
  width: 1.38rem;
  height: 1.38rem;
  overflow: visible;
  fill: rgba(240, 187, 89, 0.1);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 5px rgba(246, 207, 124, 0.2));
}

.summary-metric-delta {
  display: block;
  justify-self: start;
  min-height: 0;
  margin-top: 0.3rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(238, 251, 255, 0.64);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.18;
}

.summary-metric-delta.is-positive {
  color: rgba(119, 226, 135, 0.86);
}

.summary-metric-delta.is-negative {
  color: #f09a88;
}

.summary-metric-delta.is-neutral {
  color: rgba(176, 214, 228, 0.68);
}

.summary-impact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.42rem, 0.9vw, 0.58rem);
  margin-top: -0.14rem;
}

.summary-impact-grid > .summary-impact-card--mode:only-child {
  grid-column: 1 / -1;
}

.summary-impact-card {
  min-width: 0;
  padding: 0.48rem 0.68rem 0.46rem;
  border-radius: 10px;
  background:
    radial-gradient(circle at 20% 0, rgba(124, 238, 228, 0.09), transparent 34%),
    rgba(1, 12, 20, 0.8);
  border: 1px solid rgba(51, 214, 195, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.summary-impact-card--rating {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(10rem, 1fr);
  grid-template-areas:
    "label graph"
    "value graph"
    "delta graph"
    "track graph"
    "scale graph";
  column-gap: 0.78rem;
  align-items: start;
  min-height: 10.4rem;
}

.summary-impact-card--rating {
  border-color: rgba(240, 187, 89, 0.52);
}

.summary-impact-card--mode {
  border-color: rgba(51, 214, 195, 0.52);
}

.summary-impact-card strong {
  display: inline-block;
  margin-top: 0.22rem;
  margin-right: 0.5rem;
  color: #fffdf5;
  font-size: clamp(1.36rem, 2.6vw, 1.86rem);
  line-height: 1;
  letter-spacing: 0;
}

.summary-impact-card--rating > span {
  grid-area: label;
}

.summary-impact-card--rating > strong {
  grid-area: value;
}

.summary-impact-card--rating > .summary-impact-delta {
  grid-area: delta;
  width: fit-content;
}

.summary-rating-graph {
  grid-area: graph;
  align-self: stretch;
  min-height: 6.2rem;
  overflow: hidden;
  border: 1px solid rgba(176, 240, 255, 0.1);
  border-radius: 9px;
  background:
    radial-gradient(circle at 72% 38%, rgba(54, 215, 221, 0.08), transparent 42%),
    rgba(0, 5, 10, 0.28);
}

.summary-rating-graph .fk-profile-xp-chart {
  height: 100%;
  min-height: 6.2rem;
}

.summary-rating-graph .fk-profile-xp-y-label,
.summary-rating-graph .fk-profile-xp-axis-label {
  font-size: 0.62rem;
}

.summary-impact-delta {
  display: inline-flex;
  align-items: center;
  min-height: 1.38rem;
  padding: 0.18rem 0.44rem;
  border-radius: 999px;
  border: 1px solid rgba(238, 251, 255, 0.16);
  background: rgba(238, 251, 255, 0.08);
  color: rgba(238, 251, 255, 0.86);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
}

.summary-impact-card--positive .summary-impact-delta {
  color: #0ff0c8;
  border-color: rgba(15, 240, 200, 0.34);
  background: rgba(15, 240, 200, 0.1);
}

.summary-impact-card--negative .summary-impact-delta {
  color: #ff8a8a;
  border-color: rgba(255, 138, 138, 0.34);
  background: rgba(255, 138, 138, 0.1);
}

.summary-impact-bucket {
  display: block;
  margin-top: 0.38rem;
  color: rgba(238, 251, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 750;
}

.summary-impact-bucket[hidden] {
  display: none;
}

.summary-impact-track {
  grid-area: track;
  height: 0.34rem;
  margin-top: 0.3rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(176, 240, 255, 0.18);
}

.summary-impact-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-strong));
  box-shadow: 0 0 12px rgba(246, 207, 124, 0.28);
  transition: width 900ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.summary-impact-card--mode .summary-impact-track span {
  width: 68%;
  background: linear-gradient(90deg, var(--teal), var(--teal-soft));
  box-shadow: 0 0 12px rgba(124, 238, 228, 0.24);
}

.summary-impact-scale {
  grid-area: scale;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.28rem;
  color: rgba(238, 251, 255, 0.8);
}

.summary-impact-scale small {
  color: inherit;
  font-size: 0.7rem;
  font-weight: 760;
}

.summary-impact-card--rating .summary-impact-scale small {
  color: var(--gold);
}

.summary-impact-card--mode .summary-impact-scale small {
  color: var(--teal-soft);
}

.summary-review-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  margin-top: -0.18rem;
}

.summary-section-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-bottom: 0.18rem;
}

.summary-section-head span {
  color: var(--teal-soft);
}

.summary-section-head small {
  color: rgba(238, 251, 255, 0.82);
  font-size: 0.74rem;
}

.review-list {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  max-height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.18rem;
  overscroll-behavior: contain;
  scrollbar-color: rgba(240, 187, 89, 0.48) rgba(176, 240, 255, 0.08);
}

.review-list--long {
  max-height: 100%;
  overflow-y: auto;
}

.review-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(120px, 1.05fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(88px, 0.7fr);
  gap: 0.68rem;
  align-items: center;
  padding: 0.58rem 0.72rem;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(5, 18, 29, 0.86);
  border: 1px solid rgba(176, 240, 255, 0.22);
}

.review-row.wrong {
  border-color: rgba(242, 100, 82, 0.3);
}

.review-row-index {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(242, 100, 82, 0.42);
  border-radius: 50%;
  color: #ff8d7a;
  font-size: 0.98rem;
  font-weight: 860;
}

.review-row strong,
.review-row span,
.review-row small {
  display: block;
}

.review-row span {
  color: rgba(238, 251, 255, 0.72);
  font-size: 0.58rem;
  font-weight: 820;
  letter-spacing: 0.095em;
  line-height: 1.1;
  text-transform: uppercase;
}

.review-row strong {
  margin-top: 0.18rem;
  color: #fffaf0;
  font-size: 0.91rem;
  line-height: 1.18;
}

.review-row small {
  margin-top: 0.16rem;
  color: rgba(238, 251, 255, 0.72);
  font-size: 0.72rem;
  line-height: 1.18;
}

.review-row p {
  grid-column: 2 / -1;
  margin: -0.08rem 0 0;
  color: rgba(238, 251, 255, 0.82);
  font-size: 0.76rem;
  line-height: 1.22;
}

.review-action-mark {
  display: inline-block;
  margin-left: 0.36rem;
  font-size: 1.15rem;
  line-height: 1;
}

.review-action-mark--wrong {
  color: var(--red);
}

.review-action-mark--best {
  color: var(--teal-soft);
}

.summary-review-empty {
  padding: 0.58rem 0.72rem;
  border: 1px solid rgba(51, 214, 195, 0.26);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 0, rgba(51, 214, 195, 0.12), transparent 32%),
    rgba(5, 18, 29, 0.78);
}

.summary-review-empty strong,
.summary-review-empty span {
  display: block;
}

.summary-review-empty strong {
  color: #f8fffb;
  font-size: 0.96rem;
}

.summary-review-empty span {
  margin-top: 0.16rem;
  color: rgba(238, 251, 255, 0.76);
  line-height: 1.25;
}

.summary-coaching-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.62rem;
  align-items: center;
  margin-top: 0;
  padding: 0.52rem 0.66rem;
  border: 1px solid rgba(240, 187, 89, 0.58);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(240, 187, 89, 0.08), rgba(240, 187, 89, 0.015)),
    rgba(2, 13, 22, 0.82);
}

.summary-coaching-icon {
  display: grid;
  place-items: center;
  width: 1.86rem;
  height: 1.86rem;
  border-radius: 50%;
  border: 1px solid rgba(240, 187, 89, 0.42);
  background: rgba(240, 187, 89, 0.12);
  color: var(--gold-strong);
  font-weight: 900;
}

.summary-coaching-card span {
  color: var(--gold-strong);
}

.summary-coaching-card p {
  margin: 0.12rem 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  line-height: 1.2;
}

.gto-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.gto-legend span {
  display: inline-flex;
  min-height: 1.8rem;
  align-items: center;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  font-size: 0.78rem;
}

.legend-raise {
  background: rgba(28, 197, 139, 0.22);
  color: #bdf7df;
}

.legend-raise-big,
.legend-bet-big {
  background: rgba(240, 187, 89, 0.24);
  color: var(--gold-strong);
}

.legend-bet-small {
  background: rgba(28, 197, 139, 0.22);
  color: #bdf7df;
}

.legend-call {
  background: rgba(76, 174, 255, 0.22);
  color: #cfeeff;
}

.legend-threebet {
  background: rgba(240, 187, 89, 0.24);
  color: var(--gold-strong);
}

.legend-check {
  background: rgba(76, 174, 255, 0.18);
  color: #cfeeff;
}

.legend-fold {
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
}

.legend-hero {
  background: rgba(240, 187, 89, 0.22);
  color: var(--gold-strong);
}

.legend-solver {
  background: rgba(85, 220, 236, 0.16);
  color: #c7fbff;
}

.legend-bluff {
  background: rgba(244, 123, 98, 0.2);
  color: #ffd0c8;
}

.legend-trap {
  background: rgba(240, 187, 89, 0.18);
  color: #ffe0a0;
}

.legend-mix {
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0 5px,
    rgba(255, 255, 255, 0.04) 5px 10px
  );
  color: rgba(255, 255, 255, 0.84);
}

.gto-matrix-wrap {
  margin-top: 0.85rem;
  overflow: auto;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  padding: 0.65rem;
  overscroll-behavior: contain;
}

#gto-modal .gto-matrix-wrap {
  flex: 1 1 auto;
  min-height: 220px;
  max-height: min(62vh, 680px);
}

#gto-modal .modal-actions {
  flex: 0 0 auto;
}

.gto-matrix {
  display: grid;
  grid-template-columns: repeat(13, minmax(42px, 1fr));
  gap: 0.28rem;
  min-width: 660px;
}

.gto-cell {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.preflop-range-matrix .gto-cell {
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 0.34rem 0.2rem 0.26rem;
  line-height: 1;
}

.preflop-range-matrix .gto-cell span {
  position: relative;
  z-index: 1;
}

.preflop-range-matrix .gto-cell em {
  position: relative;
  z-index: 1;
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.gto-empty-state {
  grid-column: 1 / -1;
  padding: 1rem;
  border-radius: var(--radius-md);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.gto-raise {
  background: linear-gradient(180deg, rgba(28, 197, 139, 0.78), rgba(11, 120, 85, 0.92));
}

.gto-raise-big,
.gto-bet-big {
  background: linear-gradient(180deg, rgba(240, 187, 89, 0.88), rgba(152, 97, 22, 0.94));
  color: #fff7dc;
}

.gto-bet-small {
  background: linear-gradient(180deg, rgba(28, 197, 139, 0.78), rgba(11, 120, 85, 0.92));
}

.gto-call {
  background: linear-gradient(180deg, rgba(76, 174, 255, 0.72), rgba(20, 87, 136, 0.92));
}

.gto-threebet {
  background: linear-gradient(180deg, rgba(240, 187, 89, 0.88), rgba(152, 97, 22, 0.94));
  color: #fff7dc;
}

.gto-check {
  background: linear-gradient(180deg, rgba(76, 174, 255, 0.48), rgba(18, 66, 105, 0.82));
}

.gto-fold {
  background: rgba(255, 255, 255, 0.055);
  color: rgba(220, 238, 245, 0.48);
}

.gto-value {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.gto-bluff {
  box-shadow: inset 0 0 0 2px rgba(244, 123, 98, 0.62);
}

.gto-trap {
  box-shadow: inset 0 0 0 2px rgba(240, 187, 89, 0.72);
}

.gto-mix::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0 5px,
    rgba(255, 255, 255, 0) 5px 10px
  );
  pointer-events: none;
}

.hero-hand {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(240, 187, 89, 0.16);
}

#gto-modal.preflop-range-modal {
  padding: clamp(0.45rem, 1.6vw, 0.8rem);
  background:
    radial-gradient(ellipse at 50% 44%, rgba(20, 96, 108, 0.2), transparent 46%),
    linear-gradient(180deg, rgba(0, 5, 10, 0.72), rgba(0, 0, 0, 0.86));
  backdrop-filter: blur(2px);
}

#gto-modal.preflop-range-modal .modal-card {
  --range-grid-gap: 4px;
  --range-chart-size: min(698px, calc(100dvw - 3rem), calc(100svh - 12rem));
  --range-cell-size: calc((var(--range-chart-size) - 48px) / 13);
  position: relative;
  width: fit-content;
  min-width: 0;
  max-width: calc(100dvw - 1rem);
  max-height: calc(100svh - 1rem);
  padding: clamp(0.68rem, 1.15vw, 0.92rem);
  overflow: hidden;
  border: 1px solid rgba(105, 212, 207, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(47, 126, 122, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(2, 13, 21, 0.9), rgba(0, 4, 10, 0.96)),
    rgba(0, 5, 10, 0.94);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.46),
    0 0 34px rgba(51, 214, 195, 0.07),
    inset 0 1px 0 rgba(246, 207, 124, 0.075);
}

#gto-modal.preflop-range-modal .modal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(51, 214, 195, 0.5), transparent 28%, transparent 76%, rgba(246, 207, 124, 0.34)) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(51, 214, 195, 0.1), transparent 22%, transparent 82%, rgba(246, 207, 124, 0.08));
  opacity: 0.8;
}

#gto-modal.preflop-range-modal #gto-kicker {
  width: fit-content;
  min-height: 1.18rem;
  padding: 0.15rem 0.44rem;
  border: 1px solid rgba(124, 238, 228, 0.16);
  border-radius: 999px;
  background: rgba(51, 214, 195, 0.075);
  color: rgba(188, 248, 244, 0.86);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

#gto-modal.preflop-range-modal #gto-title {
  margin: 0.34rem 0 0.18rem;
  color: #f3fcff;
  font-size: clamp(1.05rem, 1.55vw, 1.34rem);
  line-height: 1.08;
  text-shadow: 0 0 20px rgba(51, 214, 195, 0.14);
}

#gto-modal.preflop-range-modal #gto-copy {
  display: none;
}

#gto-modal.preflop-range-modal .gto-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
}

#gto-modal.preflop-range-modal .gto-meta[hidden] {
  display: none;
}

#gto-modal.preflop-range-modal .gto-meta span {
  display: inline-flex;
  min-height: 1.18rem;
  align-items: center;
  padding: 0.12rem 0.38rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(188, 214, 218, 0.76);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.035em;
}

#gto-modal.preflop-range-modal .gto-legend {
  align-items: center;
  gap: 0.32rem;
  margin-top: 0.42rem;
  max-width: var(--range-chart-size, 620px);
}

#gto-modal.preflop-range-modal .gto-legend span {
  min-height: 1.28rem;
  padding: 0.14rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#gto-modal.preflop-range-modal .legend-raise,
#gto-modal.preflop-range-modal .legend-bet-small {
  background: rgba(12, 105, 82, 0.34);
  color: #afe6d5;
}

#gto-modal.preflop-range-modal .legend-threebet {
  background: rgba(213, 156, 66, 0.22);
  color: #f8d891;
}

#gto-modal.preflop-range-modal .legend-call {
  background: rgba(76, 174, 255, 0.15);
  color: #c5eaff;
}

#gto-modal.preflop-range-modal .legend-fold {
  background: rgba(7, 20, 31, 0.9);
  color: rgba(188, 216, 225, 0.72);
}

#gto-modal.preflop-range-modal .legend-mix {
  background:
    linear-gradient(135deg, rgba(18, 132, 101, 0.18) 0 50%, rgba(217, 161, 74, 0.16) 51% 100%),
    rgba(7, 20, 31, 0.85);
  color: rgba(232, 246, 246, 0.82);
}

#gto-modal.preflop-range-modal .legend-hero {
  border-color: rgba(246, 207, 124, 0.36);
  background: rgba(240, 187, 89, 0.12);
  color: #f6cf7c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(240, 187, 89, 0.08);
}

#gto-modal.preflop-range-modal .gto-matrix-wrap {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(var(--range-chart-size, 700px) + 0.72rem);
  min-height: 0;
  max-height: none;
  margin-top: 0.44rem;
  padding: 0.36rem;
  overflow: hidden;
  border: 1px solid rgba(124, 238, 228, 0.105);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.01)),
    rgba(0, 7, 14, 0.72);
}

#gto-modal.preflop-range-modal .gto-matrix {
  grid-template-columns: repeat(13, var(--range-cell-size));
  grid-template-rows: repeat(13, var(--range-cell-size));
  width: var(--range-chart-size);
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  gap: var(--range-grid-gap);
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-cell {
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  row-gap: 0.11rem;
  min-width: 0;
  padding: 0.2rem 0.12rem;
  border-color: rgba(255, 255, 255, 0.045);
  border-radius: 5px;
  color: rgba(243, 252, 255, 0.92);
  aspect-ratio: auto;
  font-size: clamp(0.68rem, 1.25dvh, 0.86rem);
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -9px 18px rgba(0, 0, 0, 0.14);
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-cell:not(.gto-mix) {
  grid-template-rows: auto;
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-cell span {
  align-self: center;
  color: rgba(243, 252, 255, 0.94);
  font-weight: 850;
  line-height: 1;
  text-align: center;
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-cell em {
  align-self: center;
  margin-top: 0;
  color: rgba(228, 244, 245, 0.72);
  max-width: 92%;
  overflow: hidden;
  font-size: clamp(0.32rem, 0.66dvh, 0.44rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-raise,
#gto-modal.preflop-range-modal .preflop-range-matrix .gto-bet-small {
  background: linear-gradient(180deg, rgba(18, 119, 93, 0.9), rgba(4, 58, 51, 0.98));
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-threebet {
  background: linear-gradient(180deg, rgba(206, 150, 58, 0.88), rgba(103, 65, 18, 0.96));
  color: #fff4d4;
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-call {
  background: linear-gradient(180deg, rgba(31, 95, 128, 0.76), rgba(7, 38, 61, 0.96));
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-fold {
  background: linear-gradient(180deg, rgba(10, 22, 33, 0.94), rgba(3, 10, 18, 0.98));
  color: rgba(194, 220, 225, 0.66);
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-fold span {
  color: rgba(204, 228, 232, 0.72);
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-cell.gto-bluff {
  border-color: rgba(85, 220, 236, 0.52);
  box-shadow:
    inset 0 0 0 1px rgba(246, 207, 124, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 0 0 1px rgba(85, 220, 236, 0.16),
    0 0 12px rgba(85, 220, 236, 0.14);
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-mix {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 46%),
    linear-gradient(180deg, rgba(10, 22, 33, 0.94), rgba(3, 10, 18, 0.98));
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-mix::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: var(--range-mix-fill-width, 0%);
  background: var(--range-mix-fill-background, linear-gradient(180deg, rgba(18, 119, 93, 0.9), rgba(4, 58, 51, 0.98)));
  pointer-events: none;
}

#gto-modal.preflop-range-modal .preflop-range-matrix .gto-mix::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 46%);
  pointer-events: none;
}

#gto-modal.preflop-range-modal .preflop-range-matrix .hero-hand {
  outline: 1px solid rgba(246, 207, 124, 0.96);
  outline-offset: 1px;
  box-shadow:
    0 0 0 1px rgba(240, 187, 89, 0.18),
    0 0 15px rgba(240, 187, 89, 0.22),
    inset 0 0 0 1px rgba(255, 241, 194, 0.16);
}

#gto-modal.preflop-range-modal .modal-actions {
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

#gto-modal.preflop-range-modal #gto-close-button {
  min-height: 2.15rem;
  padding: 0.46rem 0.78rem;
  border: 1px solid rgba(246, 207, 124, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(4, 15, 21, 0.82);
  color: rgba(246, 207, 124, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 20px rgba(0, 0, 0, 0.2);
  font-size: 0.78rem;
}@media (hover: hover) and (pointer: fine) {


#gto-modal.preflop-range-modal #gto-close-button:hover {
  border-color: rgba(246, 207, 124, 0.54);
  background:
    linear-gradient(180deg, rgba(240, 187, 89, 0.12), rgba(255, 255, 255, 0.02)),
    rgba(4, 15, 21, 0.88);
  box-shadow:
    0 0 0 1px rgba(240, 187, 89, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.24);
}
}

#gto-modal.preflop-range-modal #gto-close-button:focus-visible {
  outline: 2px solid rgba(124, 238, 228, 0.92);
  outline-offset: 3px;
  box-shadow:
    0 0 0 4px rgba(51, 214, 195, 0.14),
    0 12px 22px rgba(240, 187, 89, 0.16);
}

.modal-actions {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0;
}

#summary-modal .modal-actions {
  display: grid;
  grid-template-columns: minmax(130px, 0.82fr) minmax(190px, 1.16fr) minmax(190px, 1.16fr);
  align-items: stretch;
  gap: 0.55rem;
}

#summary-modal .modal-actions .primary-button,
#summary-modal .modal-actions .secondary-button {
  min-width: 0;
  min-height: 2.35rem;
  padding: 0.52rem 0.78rem;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 840;
}

.toast-stack {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  gap: 0.75rem;
  width: min(360px, calc(100% - 2rem));
}

/* Owner field report (2026-08-17): a "Quest completed" toast arriving mid-hand landed bottom-right,
   directly over the Fold/Call/3-bet buttons -- the one part of the screen the player is actually
   using, and at this width the stack is ~343px wide, so it covers essentially the whole action row.
   Moved into the empty band at the top-left, but only during gameplay. Measured live at 375x812 in
   a real Preflop Trainer hand: .app-topbar ends at y=70 (its own min-height is 4.6rem), the coach
   teaser avatar occupies x 269-327 / y 92-150, and the topmost table content (a seat node, and the
   pot badge just right of it) starts at y~289 -- so the genuinely free region is y 70-289 by
   x 16-269. The width below lands the right edge at ~256px, clearing the avatar with ~13px to
   spare, and two toasts (the mobile cap) fit the 219px of vertical room with room over.
   Deliberately scoped to body.lesson-active: away from the table (dashboard, Quests, Review) the
   top-left corner is the brand lockup and nav toggle rather than empty space, and there are no
   action buttons to cover there, so those screens keep the default bottom-right placement. */
@media (max-width: 760px) {
  body.lesson-active .toast-stack {
    top: calc(5.25rem + env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    left: max(1rem, env(safe-area-inset-left));
    width: min(15rem, calc(100% - 7.5rem));
  }
}

.toast {
  padding: 0.95rem 1rem;
  border-radius: 18px;
  background: rgba(7, 17, 26, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
  animation: toast-in 220ms ease;
}

.toast-saved-limit {
  position: relative;
  overflow: hidden;
  padding: 0.82rem 0.92rem 0.88rem;
  border: 1px solid rgba(137, 216, 232, 0.24);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    radial-gradient(circle at 12% 0%, rgba(230, 173, 88, 0.12), transparent 8rem),
    rgba(4, 16, 25, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 22px rgba(54, 215, 221, 0.04),
    0 14px 34px rgba(0, 0, 0, 0.26);
}

.toast-saved-limit::before {
  content: "☆";
  position: absolute;
  top: 0.72rem;
  right: 0.84rem;
  color: rgba(230, 173, 88, 0.72);
  font-size: 1rem;
  line-height: 1;
  text-shadow: 0 0 12px rgba(230, 173, 88, 0.2);
}

.toast strong {
  display: block;
  margin-bottom: 0.2rem;
}

.toast-saved-limit strong {
  padding-right: 1.45rem;
  color: rgba(246, 207, 124, 0.9);
  font-size: 0.68rem;
  font-weight: 840;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.toast span {
  color: var(--muted);
  line-height: 1.45;
}

.toast-saved-limit span {
  display: block;
  max-width: 17rem;
  color: rgba(214, 233, 240, 0.78);
  font-size: 0.82rem;
  line-height: 1.34;
}

.toast small {
  display: block;
  margin-top: 0.56rem;
}

/* Dismissible toasts (owner request, 2026-08-17). Deliberately NOT inside a media query: the
   .toast--dismissible class is only ever applied by showToast when the mobile stack is active, so
   the JS gate is what scopes this, and a desktop toast never matches any rule here. That also keeps
   these rules clear of the orphaned-media-block defect in this file (V2-TRACKER item 56), which
   makes any new width-scoped rule an unreliable place to put mobile-only styling right now. */
.toast--dismissible {
  position: relative;
  /* Reserves room for the × glyph, deliberately NOT for the button's full 44px touch box. The box
     is much larger than the mark it draws, and reserving all of it narrowed the text column enough
     to add ~23px of height to the longest real toast -- which matters, because during a hand the
     stack lives in a measured ~219px band above the table. Letting the invisible edges of the box
     overlap the text costs nothing here: a tap on the text dismisses the toast too, so both
     targets do the same thing. Measured live at 375px to keep the glyph itself clear. */
  padding-right: 2.1rem;
  cursor: pointer;
}

.toast-dismiss {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  /* This project's 44px minimum touch target (the bar work order 8 applied to the shared modal
     close button). The glyph is small; the tappable box is not. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.toast-dismiss:active {
  color: rgba(255, 255, 255, 0.92);
}

/* The saved-limit toast paints a decorative ☆ at exactly the corner the close control needs. It
   carries no information the toast's own text doesn't (it is a ::before ornament), so it stands
   down when there is a real control to show instead of overlapping it. */
.toast--dismissible.toast-saved-limit::before {
  content: none;
}

.toast-saved-limit small {
  justify-self: start;
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(230, 173, 88, 0.82);
  background: transparent;
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.hidden {
  display: none !important;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px) rotate(-1deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(18px, -12px, 0) scale(1.04);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes villain-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -34%) scale(0.88);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes seat-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(240, 187, 89, 0.45);
  }

  100% {
    box-shadow: 0 0 0 12px rgba(240, 187, 89, 0);
  }
}

@keyframes review-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes summary-current-drift {
  from {
    transform: translate3d(-1.2%, -0.8%, 0) rotate(0.2deg);
  }

  to {
    transform: translate3d(1.4%, 1%, 0) rotate(-0.2deg);
  }
}

@media (max-height: 620px) {
  .session-summary-card {
    grid-template-rows: auto auto auto minmax(3.6rem, 1fr) auto auto;
    gap: 0.34rem;
    max-height: calc(100vh - 48px);
    max-height: calc(100svh - 48px);
    padding: 0.56rem;
  }

  .session-summary-card h3 {
    margin-top: 0;
    font-size: clamp(1.75rem, 5vw, 2.55rem);
  }

  .summary-hero {
    grid-template-columns: minmax(0, 1fr) minmax(6.6rem, 8.5rem);
    gap: 0.46rem;
  }

  .summary-hero-copy p {
    font-size: 0.82rem;
    line-height: 1.16;
  }

  .summary-emblem {
    width: clamp(7rem, 20vw, 9rem);
  }

  .summary-results-band {
    grid-template-columns: minmax(6rem, 0.6fr) minmax(0, 1fr);
    gap: 0.3rem;
    margin-top: -0.22rem;
  }

  .summary-metrics-panel {
    grid-column: 2;
  }

  .summary-rating-graph {
    min-height: 4.8rem;
  }

  .summary-rating-graph .fk-profile-xp-chart {
    min-height: 4.8rem;
  }

  .summary-grade-hero {
    min-height: 4.9rem;
    margin-top: -0.36rem;
  }

  .summary-metric-row span,
  .summary-impact-card > span,
  .summary-section-head span,
  .summary-coaching-card span {
    font-size: 0.5rem;
  }

  .summary-grade-image {
    width: min(100%, clamp(5.2rem, 13vw, 7rem));
    height: clamp(5.2rem, 13vw, 7rem);
  }

  .summary-metrics-panel {
    margin-top: 0;
    padding: 0.24rem 0.42rem;
  }

  .summary-metric-row {
    min-height: 1.55rem;
    padding: 0.2rem 0;
  }

  .summary-metric-row strong {
    font-size: 0.95rem;
  }

  .summary-metric-row small {
    display: none;
  }

  .summary-impact-grid {
    gap: 0.28rem;
    margin-top: -0.12rem;
  }

  .summary-impact-card {
    padding: 0.45rem 0.55rem;
  }

  .summary-impact-card strong {
    margin-top: 0.28rem;
    font-size: 1rem;
  }

  .summary-review-section {
    margin-top: -0.12rem;
  }

  .summary-section-head {
    margin-bottom: 0.14rem;
  }

  .review-row {
    grid-template-columns: 1.6rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(60px, 0.58fr);
    gap: 0.36rem;
    padding: 0.34rem 0.42rem;
  }

  .review-row-index {
    width: 1.42rem;
    height: 1.42rem;
    font-size: 0.72rem;
  }

  .review-row span {
    font-size: 0.48rem;
  }

  .review-row strong {
    margin-top: 0.12rem;
    font-size: 0.72rem;
  }

  .review-row small,
  .review-row p {
    display: none;
  }

  .summary-coaching-card {
    margin-top: 0;
    padding: 0.4rem 0.5rem;
  }

  .summary-coaching-icon {
    width: 1.55rem;
    height: 1.55rem;
  }

  .summary-coaching-card p {
    font-size: 0.74rem;
    line-height: 1.12;
  }

  #summary-modal .modal-actions {
    gap: 0.36rem;
    margin-top: 0;
  }

  #summary-modal .modal-actions .primary-button,
  #summary-modal .modal-actions .secondary-button {
    min-height: 2.1rem;
    padding: 0.32rem 0.42rem;
    font-size: 0.68rem;
  }
}

@media (max-width: 1180px) {
  .trainer-grid {
    grid-template-columns: 1fr;
  }

  .home-menu .table-size-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-menu-footer {
    grid-template-columns: 1fr;
  }

  .hero-strip {
    flex-direction: column;
    align-items: start;
  }

  .hero-actions {
    width: 100%;
    justify-content: start;
  }

  .lesson-active .scenario-topline {
    width: min(460px, 48vw);
  }

  .lesson-active .fact-grid,
  .lesson-active .side-panel {
    display: none;
  }

  .lesson-active .answer-grid,
  .lesson-active .single-spot-replay-controls,
  .lesson-active .feedback-band {
    width: min(860px, calc(100vw - 2rem));
  }
}

@media (max-width: 860px) {
  .summary-hero {
    grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 10rem);
    align-items: center;
  }

  .summary-emblem {
    width: clamp(7.5rem, 22vw, 10rem);
    opacity: 0.86;
  }

  .summary-results-band {
    grid-template-columns: 1fr;
  }

  .summary-metrics-panel {
    grid-column: 1;
    justify-self: end;
  }

  .summary-impact-grid {
    grid-template-columns: 1fr;
  }

  .summary-impact-card--rating {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "value"
      "delta"
      "graph"
      "track"
      "scale";
  }

  .review-row {
    grid-template-columns: 2.35rem minmax(0, 1fr) minmax(0, 1fr);
  }

  .review-row > div:nth-child(4),
  .review-row > div:nth-child(5) {
    grid-column: 2 / -1;
  }

  .review-row p {
    grid-column: 2 / -1;
  }

  #summary-modal .modal-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100%, calc(100% - 1rem));
    margin: 0.5rem auto;
    padding-top: 0;
  }

  .app-topbar {
    position: relative;
    top: 0;
    align-items: stretch;
    flex-direction: column;
  }

  .profile-button {
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-menu {
    position: fixed;
    top: max(0.5rem, env(safe-area-inset-top));
    right: max(0.5rem, env(safe-area-inset-right));
    left: max(0.5rem, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100svh - 1rem);
  }

  .home-menu {
    min-height: auto;
  }

  .home-menu .table-size-list,
  .profile-resource-grid {
    grid-template-columns: 1fr;
  }

  .sidebar,
  .scenario-panel,
  .drill-info-card,
  .recent-card,
  .modal-card {
    padding: 1rem;
  }

  .fk-saved-session-row {
    grid-template-columns: 1fr;
  }

  .fk-saved-session-actions {
    justify-content: space-between;
  }

  .fk-saved-session-copy strong,
  .fk-saved-session-copy small,
  .fk-saved-manage-copy strong,
  .fk-saved-manage-copy small,
  .fk-saved-manage-tile-copy strong,
  .fk-saved-manage-tile-copy small {
    white-space: normal;
  }

  .metric-row,
  .fact-grid,
  .answer-grid,
  .result-grid {
    grid-template-columns: 1fr;
  }

  .session-summary-card {
    gap: 0.74rem;
    max-height: calc(100vh - 48px);
    max-height: calc(100svh - 48px);
    padding: 0.72rem;
  }

  .summary-hero {
    grid-template-columns: 1fr;
    gap: 0.52rem;
  }

  .summary-emblem {
    justify-self: start;
    width: clamp(6.8rem, 26vw, 9rem);
  }

  .session-summary-card h3 {
    font-size: clamp(1.78rem, 8vw, 2.35rem);
  }

  .summary-hero-copy p {
    font-size: 0.82rem;
    line-height: 1.18;
  }

  .summary-results-band {
    grid-template-columns: 1fr;
    gap: 0.52rem;
  }

  .summary-metrics-panel {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
  }

  .summary-metric-row span,
  .summary-impact-card > span,
  .summary-section-head span,
  .summary-coaching-card span {
    font-size: 0.5rem;
  }

  .summary-grade-hero {
    min-height: 6.8rem;
  }

  .summary-grade-image {
    width: min(100%, clamp(7rem, 24vw, 9rem));
    height: clamp(7rem, 24vw, 9rem);
  }

  .summary-metric-row strong {
    font-size: 1.2rem;
  }

  .summary-metric-row small {
    display: none;
  }

  .summary-impact-grid {
    gap: 0.42rem;
    margin-top: 0;
  }

  .summary-impact-card {
    padding: 0.5rem 0.55rem 0.45rem;
  }

  .summary-impact-card strong {
    margin-top: 0.36rem;
    font-size: 1.02rem;
  }

  .review-row {
    grid-template-columns: 1.72rem minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.42rem;
    padding: 0.42rem 0.48rem;
  }

  .review-row-index {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.76rem;
  }

  .review-row span {
    font-size: 0.5rem;
  }

  .review-row strong {
    font-size: 0.76rem;
  }

  .review-row small,
  .review-row p {
    display: none;
  }

  .summary-coaching-card {
    padding: 0.46rem 0.54rem;
  }

  .summary-coaching-icon {
    width: 1.7rem;
    height: 1.7rem;
  }

  .summary-coaching-card p {
    font-size: 0.76rem;
    line-height: 1.16;
  }

  #summary-modal .modal-actions {
    gap: 0.34rem;
  }

  #summary-modal .modal-actions .primary-button,
  #summary-modal .modal-actions .secondary-button {
    min-height: 2.22rem;
    padding: 0.38rem 0.34rem;
    font-size: 0.68rem;
  }

  .scenario-topline {
    grid-template-columns: 1fr;
  }

  .feedback-band {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-card {
    width: 82px;
    height: 116px;
  }

  .table-visual {
    min-height: 300px;
  }

  .lesson-active .app-topbar {
    flex-direction: row;
    align-items: center;
    min-height: 4.4rem;
    padding: 0.7rem 0.85rem;
  }

  .lesson-active .brand-copy strong {
    display: block;
    color: #f4fcff;
    font-family: inherit;
    font-size: 0.90rem;
    font-weight: 760;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 0;
    white-space: nowrap;
  }

  .lesson-active .brand-copy span {
    display: block;
    color: rgba(230, 173, 88, 0.78);
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 0.22rem;
    margin-right: -0.3em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    width: auto;
    white-space: nowrap;
  }

  .lesson-active .view-options-button {
    padding: 0.38rem 0.62rem;
  }

  .lesson-active .view-options {
    margin-left: auto;
  }

  .lesson-active .scenario-topline {
    top: 4.4rem;
    right: 0.65rem;
    left: 0.65rem;
    width: auto;
  }

  .lesson-active .scenario-meta,
  .lesson-active .betting-line {
    display: none;
  }

  /* Mobile table layout: bring the pot amount panel below the community cards into the center felt space with clean clearance from cards and seats */
  .board-topline {
    bottom: auto;
    top: calc(100% + 0.95rem);
  }

  .board-zone {
    top: calc(44% - var(--board-lift, 0px));
  }

  .board-cards {
    gap: 0.22rem;
    min-height: 42px;
  }

  .board-card {
    width: clamp(26px, 7vw, 31px);
    height: clamp(38px, 10.2vw, 45px);
    padding: 0.2rem 0.22rem;
    font-size: clamp(0.82rem, 3.2vw, 0.98rem);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 12px rgba(0, 0, 0, 0.25);
  }

  .board-card .board-suit {
    font-size: 0.82em;
  }

  .seat-node {
    transform: translate(-50%, clamp(27px, 3.8vw, 30px));
    width: clamp(66px, 16vw, 76px);
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  .seat-status-text,
  .seat-caption {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 4px !important;
    margin: 0 auto !important;
    font-size: clamp(0.58rem, 1.8vw, 0.70rem);
    font-weight: 850;
    line-height: 1 !important;
    text-align: center;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  /* Work order 17: #lesson-bottom-stack becomes the single bottom-anchored container below 760px,
     holding #feedback-band (and its controls) and #answer-grid in a flex column with a real `gap`.
     This guarantees deterministic clearance between the replay controls and the answer grid regardless
     of viewport height. */
  .lesson-active .lesson-bottom-stack {
    position: fixed;
    left: 50%;
    bottom: max(0.4rem, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(860px, calc(100vw - 1.5rem));
    gap: 0.35rem;
    pointer-events: none;
  }

  .lesson-active .single-spot-replay-controls {
    position: fixed;
    top: calc(6.0rem + env(safe-area-inset-top, 0px));
    left: max(0.75rem, calc(0.75rem + env(safe-area-inset-left)));
    bottom: auto;
    right: auto;
    transform: none !important;
    z-index: 45;
    width: auto;
    pointer-events: auto;
  }

  .lesson-active .lesson-bottom-stack .answer-grid {
    order: 2;
    position: relative;
    left: auto;
    bottom: auto;
    transform: none !important;
    width: 100%;
    pointer-events: auto;
  }

  .lesson-active .lesson-bottom-stack .feedback-band {
    order: 3;
    position: relative;
    left: auto;
    bottom: auto;
    transform: none !important;
    width: 100%;
    margin: 0;
    padding: 0.25rem 0.5rem;
    pointer-events: auto;
  }

  .lesson-active .lesson-bottom-stack .feedback-band.feedback-band--idle {
    display: none !important;
  }

  .lesson-active .lesson-bottom-stack .feedback-band.feedback-panel--revealed {
    animation: none !important;
    transform: none !important;
  }

  .lesson-active .answer-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: repeat(var(--action-count, 2), minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
  }

  .lesson-active .answer-grid.answer-grid--three-actions,
  .lesson-active .answer-grid--preflop-range.answer-grid--three-actions,
  .lesson-active .answer-grid--pluribus-replay.answer-grid--three-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lesson-active .answer-grid.answer-grid--four-actions,
  .lesson-active .answer-grid--preflop-range.answer-grid--four-actions,
  .lesson-active .answer-grid--pluribus-replay.answer-grid--four-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Owner decision (2026-08-11, UI polish work order 4, item 1): two-action decision buttons
     (Fold/Raise etc.) used to stack into a single full-width column below 760px, each at least
     78-92px tall -- together tall enough to cover the bottom two seats and their bet-amount
     chips entirely. The three/four-action grids never had this problem (answer-grid--three-actions/
     --four-actions keep their multi-column layout at every width, see the comment near those
     rules) -- only the generic two-action grid collapsed. Matching that pattern (two columns,
     shorter buttons) clears the table; measured against a live iPhone-14-width capture to confirm
     the bottom seat row and its bet chips are fully visible. */
  .lesson-active .answer-button {
    min-height: 3.4rem;
  }

  .lesson-active .answer-button.answer-button--resolved.correct {
    transform: none;
  }

  /* The generic .answer-button--asset-shell content padding/title size (unconditional rules
     above, sized for the old always-full-width two-action button) don't fit the ~54px-tall,
     half-row-width box the two-action grid now renders at this breakpoint -- measured directly
     (title + subtitle content height against the box height) rather than assumed: a title plus
     amount subtitle needs ~62px including padding, more than the box's own 3.4rem/54.4px floor,
     which let the subtitle spill past the button's own bottom edge. Tighter padding and a
     shorter subtitle margin close that gap without shrinking the title (two-action buttons are
     still much wider than three/four-action ones at this width, so the title never needs the
     smaller floor those get at 520px). Scoped to two-action grids only via :not() -- the
     three/four-action rules already have their own, separately-tuned treatment below 520px and
     must not be double-affected by this one. */
  .lesson-active .answer-grid:not(.answer-grid--three-actions):not(.answer-grid--four-actions) .answer-button--asset-shell {
    min-height: 4rem;
  }

  .lesson-active .answer-button--asset-shell .answer-button__content,
  .lesson-active .answer-grid:not(.answer-grid--three-actions):not(.answer-grid--four-actions) .answer-button--asset-shell .answer-button__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.4rem;
  }

  .lesson-active .answer-grid:not(.answer-grid--three-actions):not(.answer-grid--four-actions) .answer-button--asset-shell .answer-button__subtitle {
    margin-top: 0.12rem;
  }

  .lesson-active .feedback-band {
    max-height: 5.5rem;
    overflow: auto;
  }

}

/* Below ~400px the in-trainer topbar's "FishKiller" wordmark (.brand-copy strong's
   clamp() floor, 1.35rem) plus the logo no longer leaves room for the Menu button beside
   it -- .brand-copy span is already hidden by the 760px block above, but the wordmark
   itself has no narrower floor, so the two visibly overlap at 320-375px phone widths. */
@media (max-width: 400px) {
  .lesson-active .fk-brand-logo--topbar {
    width: 2.5rem;
    height: 2.5rem;
  }

  .lesson-active .brand-lockup {
    gap: 0.5rem;
  }

  .lesson-active .brand-copy strong {
    font-size: 0.84rem;
    white-space: nowrap;
  }

  .lesson-active .brand-copy span {
    font-size: 0.58rem;
    white-space: nowrap;
  }
}

@media (max-width: 1180px) {
  .home-menu.fk-dashboard {
    grid-template-columns: 1fr;
  }

  .fk-menu-rail {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(156, 222, 242, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 14px 30px rgba(0, 0, 0, 0.16);
  }

  .fk-menu-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.28rem;
    margin-top: 0.9rem;
  }

  .fk-menu-nav-item:last-child {
    margin-top: 0;
  }

  .fk-menu-profile {
    margin-top: 0.85rem;
  }

  .fk-dashboard-head,
  .fk-mode-grid,
  .fk-dashboard-stats {
    grid-template-columns: 1fr;
  }

  /* The desktop-only "stretch to fill the viewport" behaviour (.fk-mode-grid's flex-grow +
     grid-template-rows: 1fr, added so .fk-dashboard-stats stays pinned to the bottom of the page)
     doesn't belong once the two cards stack into a single column here -- reset both back to
     natural, content-sized rows rather than stretching each stacked card to fill leftover height. */
  .fk-mode-grid {
    flex: none;
    grid-template-rows: none;
  }

  /* Work order 6 item 3: the same "fill the viewport" intent one level up, and the actual source
     of the reported no-scroll complaint. On desktop, .fk-menu-rail and .fk-dashboard-main sit
     side by side as the two columns of .home-menu.fk-dashboard's grid, so .fk-dashboard-main's own
     min-height:100dvh (base rule) is exactly right -- it's the one column that needs to span the
     full screen height. Here, .home-menu.fk-dashboard collapses to a single column just above,
     which turns .fk-menu-rail and .fk-dashboard-main into two *stacked* rows instead -- but
     .fk-dashboard-main's min-height:100dvh was never reset for that, so it still claims a full
     extra viewport height for itself underneath .fk-menu-rail's own ~135px header row, which is
     what pushed total page height to header + 100dvh and forced a scroll on content that would
     otherwise fit. .home-menu.fk-dashboard's own min-height:100dvh (unchanged) already keeps the
     page at least one viewport tall on short content, so nothing is lost by letting this inner
     row size to its own content instead of double-claiming the viewport. Measured before/after at
     390x844 and 375x667, guest and signed-in: see status-reports/status-reports.md's
     2026-08-11-work-order-6.md entry for the numbers. */
  .fk-dashboard-main {
    min-height: 0;
  }

  .fk-dashboard-head-actions {
    justify-self: stretch;
    width: 100%;
  }

  .fk-daily-session-screen {
    min-height: 26rem;
  }

  /* Work order 8, part D: the comment this replaces ("shift the focal point further right so the
     jellyfish stays clear of the now full-width text column") was real intent that was never
     actually applied -- it set background-position on .fk-daily-session-screen, which carries no
     background-image of its own anywhere in this file; the real photo/gradient lives on the
     .fk-daily-session-backdrop child underneath it, confirmed by grep (that selector has exactly
     one background declaration, its own base rule). Retargeted to the element that actually
     paints it, and widened/added stops rather than only repositioning: at full-width mobile text
     (.fk-daily-session-body's max-width:100% above), the base rule's horizontal fade going fully
     transparent at 58% left the jellyfish's bright bell directly behind the meta row and subtitle
     text on a real iPhone-14-width capture. A second, vertical wash darkens the lower two-thirds
     of the card (where the title/subtitle/meta row actually sit) independent of the horizontal
     fade's own falloff. */
  .fk-daily-session-backdrop {
    background:
      linear-gradient(180deg, rgba(0, 4, 9, 0.3) 0%, rgba(0, 4, 9, 0.5) 38%, rgba(0, 4, 9, 0.74) 100%),
      linear-gradient(90deg, rgba(0, 4, 9, 0.88) 0%, rgba(0, 6, 12, 0.62) 32%, rgba(0, 6, 12, 0.32) 56%, transparent 80%),
      var(--menu-daily-scene) 84% 60% / cover no-repeat;
  }

  .fk-daily-session-body,
  .fk-daily-session-meta {
    max-width: 100%;
  }

  /* Work order 8, part D: at this width the row wraps (three flex items, Mode's own content
     forcing it wide), but only .fk-daily-session-meta-col--mode ever zeroes its border-left/
     padding-left -- whichever column lands first on a wrapped row (Table Size or Time,
     depending on viewport width, confirmed live: Table Size wraps alone on an iPhone-14-width
     screen, both Table Size and Time wrap onto their own separate rows on an iPhone-SE-width
     one) still carries a stray divider and indent that doesn't line up with Mode's flush-left
     text above it. Detecting "first on its wrapped row" isn't reliable in CSS once a flex row
     wraps, so this stacks all three into a single column instead and drops the hairline
     dividers/padding meant for a single unbroken row -- every value's own label is directly
     above it, always flush-left, at every width, without needing to track wrap position. */
  .fk-daily-session-meta {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .fk-daily-session-meta-col {
    padding: 0;
    border-left: 0;
  }

  .fk-daily-session-title {
    font-size: clamp(2.1rem, 6vw, 2.7rem);
  }

  .fk-practice-head,
  .fk-practice-trainers-panel,
  .fk-practice-insight-grid {
    grid-template-columns: 1fr;
  }

  /* flex-grow only distributes *positive free space* -- #practice-screen .fk-practice-layout
     switches to height:auto a few lines below (needed once .fk-practice-insight-grid stacks to a
     single column and needs more than one viewport height), which makes it a shrink-to-fit
     container with no free space to hand out. .fk-practice-hub's base flex:1 1 0 (and its pack-
     column child's flex:1 1 24rem) rely entirely on that free space to size themselves -- with
     none available, both collapse toward min-height:0 while their non-shrinking sibling
     (.fk-practice-selected-pack, flex:0 0 auto) keeps its full content height and visually
     overlaps the collapsed pack list. flex:0 0 auto here makes both items size off their own
     content instead of a grow share that no longer exists, restoring normal (non-overlapping)
     block-like stacking. Confirmed via direct measurement: pre-fix the pack list's own box
     computed to ~2px tall with all 7 cards technically present but painted-over; post-fix it
     measures its full ~410px content height with zero overlap. */
  .fk-practice-hub {
    flex-direction: column;
    flex: 0 0 auto;
  }

  .fk-practice-hub > .fk-practice-pack-column {
    max-width: none;
    flex: 0 0 auto;
  }

  .fk-practice-hub > .fk-practice-selected-pack {
    flex: 0 0 auto;
    min-height: 25rem;
  }

  #practice-screen .fk-practice-layout {
    height: auto;
  }

  .fk-practice-pack-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    padding: 0.12rem 0 0;
  }

  .fk-practice-selected-pack {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    min-height: 25rem;
    background:
      linear-gradient(90deg, rgba(0, 7, 14, 0.96) 0%, rgba(0, 12, 21, 0.84) 62%, rgba(0, 10, 18, 0.62) 100%),
      url("FKSpotBack.png") calc(100% + 2.35rem) 92% / auto 102% no-repeat,
      linear-gradient(135deg, rgba(4, 22, 35, 0.94), rgba(0, 8, 15, 0.96));
  }

  .fk-practice-launch {
    grid-column: 1;
    grid-row: auto;
  }

  .fk-practice-focus {
    grid-row: auto;
    align-self: start;
  }

  .fk-dashboard-profile-pill {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .fk-dashboard-pill-stat {
    border-left: 0;
    padding-left: 0;
  }

  .fk-stat-block {
    border-left: 0;
    border-top: 1px solid rgba(156, 222, 242, 0.12);
  }

  .fk-stat-block--xp {
    grid-template-columns: max-content max-content;
  }
}

@media (max-width: 760px) {
  .menu-mode .app-shell {
    width: 100%;
    margin: 0;
  }

  .fk-menu-rail,
  .fk-dashboard-main {
    padding: 1rem;
  }

  /* .fk-menu-rail is a grid item of .home-menu.fk-dashboard (single column below 1180px) and, like
     any grid item, defaults to min-width:auto -- its own content's min-content size. min-width:0
     lets it shrink to the track's actual (viewport-constrained) width instead of being forced wide
     by a descendant's unshrunk content -- kept as standing insurance even though the dropdown below
     no longer relies on it the way the horizontal-scroll strip this replaced did. */
  .fk-menu-rail {
    min-width: 0;
  }

  .fk-menu-brand {
    min-height: auto;
  }
}

/* Field feedback: the signed-in profile card was sitting in its own full-width row below the
   Dashboard dropdown, leaving the space beside the logo/title empty. Switch the rail to a
   2-column grid so the brand (top-left) and profile card (top-right, into that empty space)
   share one row, with the nav dropdown spanning both columns on the row below -- same three
   children, same DOM order, just placed instead of stacked.

   Range-scoped rather than folded into the plain <=760px block above: at genuinely narrow
   widths (checked live at 320px and 340px) the brand's own logo+wordmark doesn't shrink, so the
   leftover column for the profile card collapses to ~95-115px -- too little for even the compact
   avatar+name+level+XP-bar content, wrapping "Level 1" across lines. Below 361px the rail simply
   doesn't switch to this grid at all, so the untouched base rule (flex-column, full-width stacked
   rows -- the same layout this whole feature had before) applies instead, same as it did for
   every width prior to this change. */
@media (max-width: 760px) and (min-width: 361px) {
  .fk-menu-rail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.6rem;
    /* center, not start: once the profile card is compacted (below) it's only a little taller
       than the brand block, and centering splits that small difference evenly above/below
       instead of leaving it all as dead space under the brand -- see the annotated field
       feedback ("I don't like the empty space beneath the logo"). */
    align-items: center;
  }

  .fk-menu-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .fk-menu-nav-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* margin-top:auto (the flex-column "push to bottom" rule) no longer applies in this grid, so
     it's reset to 0 here rather than left as dead weight. See the general <=760px block below for
     why this card no longer shows the avatar/name/level/XP-bar it used to.

     justify-self was "end" -- field feedback (mobile screenshots) showed this packs
     streak/goal/Premium into a tight cluster hard against the right edge, leaving the entire
     rest of column 2 (between the brand and that cluster) empty. "stretch" plus
     .fk-menu-profile-extra's own justify-content: space-between (below) spreads the three
     widgets across the full available width instead. */
  .fk-menu-profile,
  .fk-menu-rail .fk-menu-auth-signed-out {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
    min-width: 0;
  }

  .fk-menu-profile {
    justify-self: stretch;
  }

  .fk-menu-rail .fk-menu-auth-signed-out {
    justify-self: end;
  }
}

@media (min-width: 761px) {
  .fk-menu-rail .fk-menu-auth-signed-out {
    display: none !important;
  }
}

@media (max-width: 760px) {
  /* .fk-menu-nav's own z-index:45 only wins inside .fk-menu-rail's stacking context (z-index:1) --
     it does not let the dropdown escape and beat the *sibling* .fk-dashboard-main stacking context
     (also z-index:1, but later in DOM so it paints on top wherever the two visually overlap). Since
     the whole point of the dropdown is to float over that sibling's content, the rail itself needs
     to outrank it while open, not just the nav panel inside it.

     Work order 12 item 2: this used to be `.fk-menu-rail:has(.fk-menu-nav-open)`, on the theory
     that a real device's page content showing through the open panel meant an older iOS WKWebView
     wasn't resolving :has() at all (leaving the rail at its default z-index:1). Investigated before
     changing anything, per the brief's own instruction: reproduced live with a real, modern,
     fully-:has()-supporting WebKit build (CSS.supports("selector(:has(*))") true, panel z-index
     correctly computed to 2, document.elementFromPoint over the panel returned the panel's own
     button, not page content underneath) -- the hypothesis didn't hold, :has() was never the
     problem. The actual defect, found by zooming into the open panel: .fk-menu-nav's own background
     (below) was only rgba(...,0.98), and that residual 2% let bright dashboard content (headings,
     "Sign in"/"Create account", mode-card titles) show through as legible ghosting against the
     panel's own very dark fill -- fixed below, at the real cause.

     Kept as an explicit class toggled by toggleDashboardNavMenu/closeDashboardNavMenu (app.js)
     rather than reverted to :has() anyway: it's strictly more robust for something this visible to
     not depend on selector support at all, regardless of whether today's failure traced there. */
  .fk-menu-rail.fk-menu-rail--nav-open {
    z-index: 2;
  }

  /* Field feedback: the DASHBOARD toggle (its own gold-bordered pill) sat inside .fk-menu-rail,
     which the <=1180px block above gives a card-like border-bottom + inset box-shadow "elevated
     panel" treatment -- redundant here, since .home-menu.panel (the whole dashboard) already
     carries its own border/shadow one level further out. Two nested boxes for one control read
     as "a box in a box." Flattened only at this narrower breakpoint (not the 761-1180px range,
     which uses a different nav layout the brief didn't ask to change) so the toggle is the one
     bordered element left. */
  .fk-menu-rail {
    border-bottom: 0;
    box-shadow: none;
  }

  /* Work order 11 item 1b: with the toggle's own boxed chrome removed (above), the row needs its
     own separator from whatever page content sits below the rail -- a single-sided hairline
     rather than a second box. Lives on the wrap (not the toggle itself) so it spans the full
     rail width consistently across every screen this rail appears on, not just the dashboard. */
  .fk-menu-nav-wrap {
    position: relative;
    margin-top: 0.9rem;
    padding-bottom: 0.62rem;
    border-bottom: 1px solid rgba(230, 173, 88, 0.22);
  }

  /* The 2-column grid this rail uses down to 1180px still stacks 7 items into 4 rows, which on a
     phone-width screen ate ~46% of the viewport before any dashboard content was visible. Below,
     the nav becomes a real dropdown: collapsed to a single "current section" toggle button by
     default, expanding into a floating panel (toggleDashboardNavMenu in app.js) that overlays the
     page instead of pushing it down, closed again on an item click, an outside click, or Escape --
     the same open/close shape .view-options-menu already uses for the in-trainer "Menu" button. */
  /* Work order 11 item 1: the gold-outlined, gold-tinted pill this rule used to draw around the
     toggle read as its own boxed control sitting on top of the rail -- exactly what the owner
     flagged. The chrome (border/radius/background) is removed outright, not restyled, leaving
     just the label + chevron on the rail's own background; a hairline divider below (see
     .fk-menu-nav-wrap, further down) replaces it as the separator from page content beneath. */
  .fk-menu-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    min-height: 44px;
    padding: 0.62rem 0.85rem;
    border: 0;
    background: none;
    color: rgba(255, 221, 154, 0.96);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 120ms ease;
  }

  /* The border used to double as the toggle's own "this is tappable" affordance -- replaced with
     a brighten-on-press cue now that there's no box to press. */
  .fk-menu-nav-toggle:active,
  .fk-menu-nav-wrap.fk-menu-nav-open .fk-menu-nav-toggle {
    color: #fff;
  }

  .fk-menu-nav-toggle:active .fk-menu-nav-toggle-chevron,
  .fk-menu-nav-wrap.fk-menu-nav-open .fk-menu-nav-toggle-chevron {
    border-color: #fff;
  }

  .fk-menu-nav-toggle-chevron {
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 150ms ease;
  }

  .fk-menu-nav-wrap.fk-menu-nav-open .fk-menu-nav-toggle-chevron {
    transform: rotate(225deg) translateY(1px);
  }

  /* Work order 12 item 2 (6b), option G1: a tight single-column list flush against the toggle
     that opened it, rather than a floating card offset below it.
     - top:100% (was +0.4rem gap): the panel starts right at .fk-menu-nav-wrap's own bottom edge,
       which is exactly where its hairline divider (below) already sits -- "flush against the
       toggle." border-radius squared off on top, rounded only where it meets open page content
       on the bottom, and border-top:0 so the panel's own border doesn't draw a second line
       directly under the wrap's hairline.
     - background is now fully opaque (was rgba(...,0.98) -- see the comment above on why that
       0.98 was a real, visible bug, not a rounding nicety). */
  .fk-menu-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 45;
    grid-template-columns: none;
    gap: 0;
    max-height: min(60vh, 26rem);
    padding: 0.5rem;
    overflow-y: auto;
    border: 1px solid rgba(118, 190, 208, 0.22);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(180deg, rgba(4, 15, 23, 1) 0%, rgba(0, 7, 13, 1) 100%);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.45);
  }

  .fk-menu-nav-wrap.fk-menu-nav-open .fk-menu-nav {
    display: flex;
    flex-direction: column;
  }

  /* Rows sit flush against each other (gap:0 above) with tighter padding than the always-visible
     rail grid's own 0.72rem/0.9rem -- min-height stays close to its prior 2.6rem so every row
     still clears a real touch target; the density comes out of the gap and padding, not the row's
     own tappable height. letter-spacing was already trimmed to 0.08em here (the base rail's own
     0.145em is what was forcing the panel wide) -- unchanged. */
  .fk-menu-nav-item {
    min-height: 2.55rem;
    padding: 0.42rem 0.72rem;
    letter-spacing: 0.08em;
  }

  .fk-menu-nav-item:last-child {
    margin-top: 0;
  }

  /* The base rule's "active" treatment (border + gradient fill + inset box-shadow bar, ~line 2086)
     is the same heavy outlined-pill chrome work order 11 item 1 already stripped off the toggle
     one row above it -- it shouldn't reappear here. Flattened to a tinted row plus a solid gold
     left bar, scoped to this dropdown only; the always-visible rail grid (>760px) keeps the
     original treatment unchanged. */
  .fk-menu-nav-item.active {
    border-color: transparent;
    border-left: 2px solid rgba(230, 173, 88, 0.92);
    background: rgba(230, 173, 88, 0.1);
    box-shadow: none;
  }

  /* Signed-in state: the header pill (avatar/level/XP/streak/goal/premium) sat directly under the
     rail's own avatar/level/XP card with nothing to visually separate them, reading as two copies
     of the same card rather than two purposeful ones -- confirmed on a real device. Below, the
     header pill is hidden outright and its unique content (streak, goal, premium -- avatar/level/
     XP were pure duplication of the rail card, dropped rather than moved) lives instead in
     .fk-menu-profile-extra, appended to the *rail's* profile card so there is exactly one summary
     card on a phone. Both this pill and that block still exist above 760px unchanged: more room
     there means two purposeful cards (persistent rail summary vs. a page-specific stats bar)
     rather than a duplicate. */
  .fk-dashboard-head-actions .fk-dashboard-profile-pill {
    display: none;
  }

  /* Field feedback: even compacted to one line, avatar/name/level/XP-bar in this corner was still
     "not ideal" -- and it's pure duplication anyway, the exact same avatar/level/XP/rank/title
     block already lives on the Profile nav page (#profile-hero-avatar and siblings in index.html).
     Drop it here entirely and let the card be just what's unique to this spot: streak, daily goal,
     Premium -- reusing .fk-dashboard-pill-stat/.fk-dashboard-premium-button verbatim, the same
     widgets the desktop header pill uses. */
  .fk-menu-profile > .fk-dashboard-avatar,
  .fk-menu-profile > div:not(#fk-menu-profile-extra) {
    display: none;
  }

  /* Guests never populate .fk-menu-profile-extra (no streak/goal/Premium to show), and with the
     identity block above gone too there's nothing left in the card -- collapse it outright rather
     than showing an empty bordered box, the same guest-hides-entirely treatment the desktop header
     pill (.fk-dashboard-profile-pill) already gets in app.js's renderDashboardAuthHeader. */
  .fk-menu-profile {
    display: none;
  }

  /* Tighter than the card's own default padding (0.88rem 0.78rem, sized for the avatar/info
     content that used to fill it): with only three small badges left, the wide 361-479px end of
     the beside-the-brand range has just ~135px to work with -- confirmed live, the default padding
     plus full-size icons overflowed left into the brand's own text.

     Work order 12 item 2's :has() audit: this used to be
     `.fk-menu-profile:has(> .fk-menu-profile-extra:not(.hidden))`. A failed/unsupported :has()
     match here is worse than the nav-dropdown case this work order was written for -- the rule
     right above sets display:none unconditionally, so a :has() that silently never matched would
     leave the whole streak/goal/Premium row invisible for a signed-in player, not just wrongly
     styled. renderDashboardAuthHeader (app.js) now toggles fk-menu-profile--has-extra directly
     from the same signedIn value that already drives fk-menu-profile-extra's own hidden class,
     rather than asking CSS to re-derive it from the DOM. */
  .fk-menu-profile.fk-menu-profile--has-extra {
    display: flex;
    padding: 0.45rem 0.55rem;
  }

  /* flex: 1 so this fills the now-stretch'd .fk-menu-profile (above) instead of shrinking to its
     own content width; justify-content: space-between spreads streak/goal/Premium across that
     full width instead of clustering them at one edge -- field feedback ("the entire left half
     of that row is empty"). */
  .fk-menu-profile-extra:not(.hidden) {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
  }

  .fk-menu-profile-extra .fk-dashboard-pill-stat {
    min-width: 0;
    padding-left: 0.35rem;
  }

  /* The pill's own left border-divider assumes something (the level block) sits to its left; the
     first stat here is the row's own first element, so that divider would just be a stray line at
     the row's leading edge. */
  .fk-menu-profile-extra .fk-dashboard-pill-stat:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .fk-menu-profile-extra .fk-dashboard-pill-stat-icon {
    font-size: 1.05rem;
  }

  .fk-menu-profile-extra .fk-dashboard-pill-stat strong {
    font-size: 0.74rem;
  }

  /* Work order 6 item 2: the gold pill border/fill added below (work order 1, for the field
     complaint that an icon-only button with no border/fill "reads as a bare unlabeled glyph on a
     phone") was itself reported as looking like a wrapper -- "why's there suddenly a wrapper round
     the logo top right." Dropped per owner decision. min-width/min-height 44px stays: that's the
     touch-target floor (this button was previously ~24x24px, padding:0 around a 1.5rem icon), an
     accessibility requirement independent of the pill styling. The original bare-glyph problem is
     handled without a container instead: this row's other two badges (streak, goal --
     .fk-dashboard-pill-stat) also carry no border/fill of their own, just an icon stacked over a
     label, so Premium now matches its neighbours' own visual language rather than standing apart
     as the one bordered item -- the grouping itself is the affordance. It also keeps its own gold
     drop-shadow glow (.fk-dashboard-premium-icon--logo, below) that streak/goal's plain icons
     don't have, a subtle distinguishing cue at rest; and every button on a touch device already
     gets a generic tap-dim on :active (this file's global `@media (hover: none), (pointer: coarse)
     button:active` rule, near the top of this file), so a tap still gives real visual feedback
     with no bordered "pill" needed to carry it. */
  .fk-menu-profile-extra .fk-dashboard-premium-button {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.2rem;
    border: 0;
    background: none;
  }

  .fk-menu-profile-extra .fk-dashboard-premium-icon--logo {
    width: 1.6rem;
    height: 1.6rem;
  }

  /* The reused .fk-dashboard-premium-label already has its own "@media (max-width:1320px)
     {display:none}" rule (icon-only below narrow-desktop widths, unchanged) -- but nested here
     inside .fk-menu-profile for the first time, it also matches that card's own generic
     ".fk-menu-profile span {display:block}" rule, which outranks it on specificity (class+type
     beats a single class) regardless of which is later in the file. This scoped selector has
     enough specificity of its own to win instead. */
  .fk-menu-profile-extra .fk-dashboard-premium-label {
    display: none;
  }
}

@media (max-width: 760px) {
  .fk-dashboard-main .fk-dashboard-auth-signed-out {
    display: none !important;
  }

  .fk-menu-rail .fk-menu-auth-signed-out {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
  }

  .fk-menu-rail .fk-menu-auth-signed-out .fk-dashboard-auth-button {
    padding: 0.36rem 0.62rem;
    font-size: 0.76rem;
    border-radius: 8px;
    white-space: nowrap;
  }

  .fk-dashboard-premium-button {
    padding: 0.36rem 0.5rem;
  }

  /* Owner-directed redesign: Primary Mode and Advanced Mode side by side instead of stacked, so
     both are visible without scrolling (the stacked layout needed ~785px for the two cards alone,
     more than a typical phone viewport has left after the header/nav/profile/welcome chrome above
     them). At roughly half the width of the old single-column card, the TABLE SIZE/SCENARIO pill
     rows and the secondary card's meta line don't fit and are dropped from this compact view --
     tapping into either mode still reaches the full picker. */
  .fk-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .fk-mode-card {
    min-height: 13rem;
    padding: 1.05rem 0.85rem 0.9rem;
  }

  /* At this card's narrow mobile proportions, the 48% desktop background-position (tuned for a
     much wider card) crops the shark down to just its nose at the card's right edge -- the rest
     of the head, jaw and dorsal fin fall outside the visible window. 74% re-centers the crop on
     the head/fin instead. */
  .fk-mode-card--secondary::before {
    background-position: 74% center;
  }

  /* Trims the welcome heading enough, together with the card min-height above, to clear the two
     cards without scrolling on shorter phones (iPhone SE-class, ~667pt tall) too, not just taller
     ones -- the base clamp() sizes these off vw, which never shrinks them for a *short* viewport.
     Sized down further per field feedback: "Welcome back, FishKiller." at 1.7rem still read as
     oversized against the rest of the mobile dashboard's type scale. */
  .fk-dashboard-head h2 {
    font-size: 1.42rem;
  }

  .fk-dashboard-subtitle {
    margin-top: 0.35rem;
  }

  .fk-dashboard-welcome {
    padding-bottom: 0.5rem;
  }

  .fk-mode-label {
    letter-spacing: 0.12em;
    font-size: 0.6rem;
  }

  .fk-mode-card h3 {
    min-height: 0;
    margin: 0.42rem 0 0.32rem;
    font-size: 1.15rem;
    line-height: 1.15;
  }

  /* Was "display: none" here -- the compact 2-column dashboard layout above dropped the
     TABLE SIZE/SCENARIO picker for space, with the comment claiming "tapping into either mode
     still reaches the full picker." That's not true: the in-lesson Menu has no such control, so
     a phone player had no way at all to reach 4-Max/9-Max or RFI/Mixed -- confirmed live, and
     matching a real field report. Restored, restyled to fit the same compact card: the label
     moves above its button row instead of beside it, and "Facing Raise" (the longest label)
     wraps onto two lines instead of nowrap-overflowing into the next pill. */
  .fk-preflop-control-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .fk-preflop-control-label {
    font-size: 0.58rem;
  }

  .fk-table-launch-group,
  .fk-preflop-launch-group {
    height: auto;
    min-height: 1.5rem;
  }

  .fk-table-launch-button,
  .fk-preflop-launch-button {
    padding: 0.14rem 0.1rem;
    font-size: 0.62rem;
  }

  .fk-preflop-launch-button strong {
    white-space: normal;
    line-height: 1.05;
  }

  .fk-mode-meta {
    display: none;
  }

  /* With .fk-mode-meta hidden just above, the secondary card is down to 3 grid children (label,
     h3, cta) against the base 5-row auto/auto/auto/1fr/auto template -- auto-placement puts the
     CTA in row 3 (also "auto") instead of the 1fr row it needs to land in row 4/5 and get pushed
     to the bottom the way .fk-mode-card--primary's own 3-row override already does. Same fix,
     applied here now that this card is also down to 3 visible children. */
  .fk-mode-card--secondary {
    grid-template-rows: auto auto 1fr;
  }

  .fk-mode-cta {
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.42rem 0.55rem;
    font-size: 0.68rem;
  }

  .fk-mode-cta span {
    margin-left: 0.4rem;
    font-size: 0.95rem;
  }

  .fk-practice-layout {
    width: 100%;
  }

  .fk-practice-head,
  .fk-practice-section-title {
    display: none !important;
  }

  .fk-practice-mode-strip,
  .fk-practice-pack-list,
  .fk-practice-selected-copy {
    grid-template-columns: 1fr;
  }

  .fk-practice-tabs {
    gap: 0.95rem;
    overflow-x: auto;
    padding-bottom: 0.8rem;
    touch-action: pan-x;
  }

  .fk-practice-tabs button {
    flex: 0 0 auto;
    font-size: 0.72rem;
  }

  /* Work order 12 item 1: the tint that used to live on .fk-practice-selected-body alone
     (below) is now the panel's own fill, layered as a flat wash over its existing photo/gradient
     background -- with .fk-practice-selected-copy hidden (below) the tiles and the launch button
     are the panel's only visible content, so tinting the panel puts everything on one surface
     with no DOM move. The panel's own gold border (base rule, ~line 5590) and its ::before
     radial highlight (~line 5601) are untouched and still apply on top of this -- both are
     translucent overlays already designed to sit over a photo background, and read fine over
     the added wash too. */
  .fk-practice-selected-pack {
    min-height: 0;
    padding: 0.95rem;
    background:
      linear-gradient(rgba(124, 238, 228, 0.06), rgba(124, 238, 228, 0.06)),
      linear-gradient(180deg, rgba(0, 7, 14, 0.95), rgba(0, 12, 21, 0.9)),
      url("FKSpotBack.png") calc(100% + 1.8rem) 7rem / auto 52% no-repeat,
      linear-gradient(135deg, rgba(4, 22, 35, 0.94), rgba(0, 8, 15, 0.96));
  }

  .fk-practice-hub > .fk-practice-selected-pack {
    min-height: 0;
  }

  /* Work order 11 item 2a: work order 10 item 3 shrank this header row down to metadata size
     instead of removing it, but the pack row immediately above it already shows the same name
     and spot count ("Flop - 2,317 spots - Easy-Medium - Recommended") -- it was still a literal
     duplicate, just a smaller one, and the owner circled both on screen. Hidden outright here
     rather than shrunk further; every rule that only ever styled this row's own contents (the
     title sizing, the icon sizing, the ::after spot-count injection, the compact 2-column grid)
     is retired below instead of left as dead weight.

     Scoped to the real panel's id, not the bare .fk-practice-selected-copy class: app.js clones
     this whole section (id stripped by sanitizeSavedSessionClone) for the unrelated "saved spot"
     panel display, which reuses .fk-practice-selected-copy for its own (non-duplicate) title and
     must keep rendering it. */
  #practice-selected-pack .fk-practice-selected-copy {
    display: none;
  }

  /* Work order 12 item 1: item 2a's own reserved clearance band above the tile strip (a
     padding-top on the panel, so the star -- appended as the panel's own last child by app.js,
     absolutely positioned against it -- wouldn't land on the tiles) is retired. With the header
     gone the tile row is the panel's first visible content either way, and the star landing
     directly over its top-right corner, on the one tinted surface, is the intended look --
     not a separate band above it. The FOCUS tile (below) is given the right padding needed to
     keep its own text clear of the star instead. */
  .fk-save-star--selected-pack {
    min-width: 44px;
    min-height: 44px;
  }

  /* Two centred tiles -- DIFFICULTY, FOCUS -- split by a hairline, replacing the old Total
     Spots/Difficulty Range row (Total Spots moved up into the header above) and folding the
     Goals list (previously up to 4 bullets, its own separate section) behind a single FOCUS
     tile showing the primary goal instead. .fk-practice-selected-body drops its desktop
     display:contents passthrough here so it can be the tiles' own 2-up grid container; its
     collapse behaviour (#practice-selected-pack[data-detail-collapsed="true"] hides it outright)
     is unaffected, since that rule only ever toggles display:none regardless of the shown value.
     No background/radius/padding of its own any more -- the panel itself carries the tint
     (above), which is what puts this row and the launch button (below) on one surface. */
  .fk-practice-selected-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .fk-practice-selected-meta {
    display: contents;
  }

  /* The Total Spots tile itself (now shown in the header instead, above). */
  .fk-practice-selected-meta > div:first-child {
    display: none;
  }

  /* Explicit grid placement: .fk-practice-focus (the right tile, below) still carries a
     desktop-only grid-column:1/grid-row:3 from its own base rule (~line 5774) that the
     <=1180px block only ever resets grid-row on, never grid-column -- left unset here it would
     still pull column 1 on this grid too, stacking both tiles into the same column and leaving
     column 2 empty, which was the "vertically-stacked, left-hugging" bug this item fixes. */
  .fk-practice-selected-meta > div:last-child {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    justify-items: center;
    align-content: center;
    gap: 0.3rem;
    padding: 0;
    text-align: center;
  }

  .fk-practice-selected-meta span {
    font-size: 8px;
  }

  .fk-practice-selected-meta strong {
    font-size: 0.85rem;
  }

  /* "Difficulty Range" is a leftover from when this tile showed a range -- it shows a single
     value now. Retitled to "Difficulty" the same ::before-content way the FOCUS label below
     does, rather than editing the HTML text (which the >760px layout still renders in full,
     unmodified, via the same span). */
  .fk-practice-selected-meta > div:last-child > span {
    font-size: 0;
  }

  .fk-practice-selected-meta > div:last-child > span::before {
    content: "Difficulty";
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Base rule lays tags/reason out as two side-by-side columns (desktop's wide card has room);
     at this tile's ~170px width that squeezed the reason text into a single-letter-wide vertical
     stack. Stacked instead. */
  .fk-practice-difficulty-recommendation {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.3rem;
  }

  .fk-practice-difficulty-tags {
    justify-content: center;
  }

  .fk-practice-difficulty-tags span {
    min-height: 1.4rem;
    padding: 0.3rem 0.52rem;
    font-size: 0.62rem;
  }

  .fk-practice-difficulty-recommendation .fk-practice-recommendation-reason {
    text-align: center;
    font-size: 0.66rem;
  }

  /* FOCUS tile: the full goals <ul> (up to 4 bullets) doesn't fit a tile -- only the first goal
     renders, unbulleted, standing in for the tile's "value" the same way the difficulty chip
     does for its own tile. The rest stay in the DOM (removing them would lose them for the
     >760px layout, which still shows the full list) but are hidden here. Marked off from the
     DIFFICULTY tile with a hairline divider; right-padded well past the save star's own 44px
     touch target (above) so its text can never run under it. */
  .fk-practice-focus {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    justify-items: center;
    align-content: center;
    gap: 0.3rem;
    padding: 0 2.1rem 0 0.85rem;
    border-left: 1px solid rgba(124, 238, 228, 0.14);
    text-align: center;
  }

  .fk-practice-focus .fk-mode-label {
    font-size: 0;
  }

  .fk-practice-focus .fk-mode-label::before {
    content: "Focus";
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .fk-practice-focus ul {
    gap: 0;
  }

  .fk-practice-focus li {
    padding-left: 0;
    font-size: 0.85rem;
  }

  .fk-practice-focus li::before {
    display: none;
  }

  .fk-practice-focus li:not(:first-child) {
    display: none;
  }

  /* Launch button: already the last grid item after the tiles (grid-column:1 from the <=1180px
     block above), so it renders full-width directly below them without needing to move in the
     DOM -- now on the same tinted surface as the tiles (the panel's own background, above)
     rather than outside it, just given room to breathe above it. */
  .fk-practice-launch {
    margin-top: 0.9rem;
  }

  /* Work order 6 item 4: the detail card's own separate collapse toggle button is gone -- the
     pack row's own trailing chevron (the plain "›" span every row already has, see
     .fk-practice-pack-card > span:last-child) is the single expand/collapse affordance now,
     rotating below when the row it belongs to is both active and collapsed. */

  /* Work order 11 item 2b: this used to hide only .fk-practice-selected-body, leaving
     #practice-single-spot-cta (a sibling, not a child of the body) visible on a collapsed panel
     -- so the Launch button rendered before the player had tapped anything. The header row
     (.fk-practice-selected-copy) is hidden unconditionally now (item 2a), but the launch button
     still needs its own gate: hide the whole panel while collapsed instead of just the body, so
     nothing of the detail card renders until a pack row is tapped. loadPracticeDetailPanelCollapsed
     (app.js) now also defaults to collapsed on a first visit, so this is the resting state. */
  #practice-selected-pack[data-detail-collapsed="true"] {
    display: none;
  }

  /* The chevron rotates to a downward-pointing arrow (standard "expanded, tap to collapse"
     accordion convention) while its own pack's detail panel is showing, driven by the same
     #practice-selected-pack[data-detail-collapsed] the body-hiding rule above reads. Collapsed --
     or any inactive row, which has no panel as a next sibling at all -- falls back to the same
     resting right-pointing "›" every row already shows, so a collapsed active row reads identically
     to an unselected one: tap to open. :has() targets the active row specifically, since
     placePracticeDetailPanel (app.js) moves the shared panel node to sit right after whichever
     card is currently selected. */
  .fk-practice-pack-card > span:last-child {
    display: inline-block;
    transition: transform 160ms ease;
  }

  .fk-practice-pack-card.active:has(+ #practice-selected-pack:not([data-detail-collapsed="true"])) > span:last-child {
    transform: rotate(90deg);
  }

  /* Accordion (<=760px, placePracticeDetailPanel in app.js): the shared detail panel is moved in
     the DOM to sit directly after whichever pack card is active, inside #practice-pack-list's own
     grid, instead of living in a separate section below the full seven-row list -- so tapping a
     pack expands its detail right there (near the tap, usually already near the top of the
     viewport) instead of requiring a scroll past every other pack first. This is purely a visual
     join for whenever that move has happened *and the panel is actually visible* -- scoped to
     :not([data-detail-collapsed="true"]) since work order 11 item 2b made the whole panel
     display:none while collapsed, and squaring off the row's bottom edge with nothing rendered
     beneath it would read as a broken join rather than a closed accordion row. It's a no-op above
     760px either way, where the panel never moves and this selector combination can't match. */
  .fk-practice-pack-card.active:has(+ #practice-selected-pack:not([data-detail-collapsed="true"])) {
    border-radius: 8px 8px 0 0;
    border-bottom-color: transparent;
  }

  #practice-pack-list > #practice-selected-pack {
    margin-top: -1px;
    border-radius: 0 0 8px 8px;
  }

  .fk-practice-target-large {
    width: 4rem;
    height: 4rem;
  }

  .fk-practice-insight-grid {
    grid-template-columns: 1fr;
  }

  .fk-preflop-control-strip {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    width: 100%;
  }

  .fk-preflop-footer-options {
    justify-self: stretch;
    width: 100%;
  }

  .fk-mode-card::before,
  .fk-mode-card::after {
    opacity: 0.16;
  }

  /* The rule above never actually applied to either mode card: both render through
     .fk-mode-card--primary/--secondary's own ::before (the background photo, opacity 0.7-0.9)
     and ::after (a left-to-right darkening gradient that fades to ~0.08-0.1 alpha on the right),
     each two classes vs. this rule's one -- so it always lost the specificity contest and did
     nothing. On a full-width phone card that photo dominates the card's empty right two-thirds
     practically undimmed, reading as a washed-out background sitting behind the text rather than
     a themed accent -- field feedback ("reduce the transparency... on all those buttons and
     background"). Dimming the photo and raising the gradient's right-edge floor keeps the same
     art and hue, just far more subdued, closer to how it already reads on the wider desktop
     layout where the card has much more room before the fade reaches empty space. */
  .fk-mode-card--primary::before,
  .fk-mode-card--secondary::before {
    opacity: 0.34;
  }

  .fk-mode-card--primary::after {
    background:
      linear-gradient(90deg, rgba(0, 4, 9, 0.94) 0%, rgba(0, 7, 13, 0.86) 32%, rgba(0, 8, 15, 0.7) 57%, rgba(0, 8, 15, 0.55) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.035), transparent 38%, rgba(0, 0, 0, 0.2));
  }

  .fk-mode-card--secondary::after {
    background:
      linear-gradient(90deg, rgba(0, 4, 9, 0.94) 0%, rgba(0, 7, 13, 0.86) 32%, rgba(0, 9, 16, 0.7) 57%, rgba(0, 9, 16, 0.55) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.035), transparent 38%, rgba(0, 0, 0, 0.21));
  }

  .fk-mode-cta {
    width: 100%;
  }

  .fk-progress-summary,
  .fk-stat-block {
    min-height: 0;
    padding: 0.4rem 0.35rem;
  }

  .fk-progress-copy {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-progress-meta,
  .fk-progress-subtext {
    grid-column: 1;
  }

  .fk-progress-helper {
    max-width: 100%;
    text-align: left;
  }

  .fk-stat-block--xp {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.26rem;
  }

  .fk-xp-sparkline {
    justify-self: start;
    width: min(7rem, 100%);
  }

  /* The helper line ("160 XP to Level 2") repeats the tail end of the subtext directly above it
     ("0 / 160 XP · 160 XP to Level 2") verbatim -- a deliberate desktop duplication (subtext is
     the compact form, the helper is a separately-positioned repeat under the wide progress bar)
     that reads as pure repetition once both are stacked in the same single mobile column. */
  .fk-progress-meta {
    display: none;
  }

  .fk-stat-block--xp {
    grid-template-columns: max-content max-content;
    justify-content: start;
    column-gap: 0.65rem;
  }

  /* Item 1+3 (2026-08-10 work order 3): "Your Progress" stacks all four blocks full-width at
     this breakpoint (.fk-dashboard-stats goes to a single grid column above), which made the
     container's own generous desktop sizing compound four times over into a ~394px-tall card.
     Roughly halved that footprint here (padding/min-height only, since work order 6 item 1
     dropped the border/background wrapper entirely at the base rule -- there's no card left to
     be "lighter", just the stacked content's own vertical rhythm). */
  .fk-dashboard-stats {
    min-height: 0;
    padding: 0.3rem 0.7rem;
  }

  .fk-progress-medallion {
    width: 2.15rem;
    height: 2.15rem;
  }

  .fk-progress-summary strong,
  .fk-stat-block strong {
    margin-top: 0.14rem;
    font-size: 1.05rem;
  }

  .fk-progress-summary strong {
    margin-top: 0.16rem;
    font-size: 1.18rem;
  }

  .fk-progress-subtext,
  .fk-progress-helper {
    margin-top: 0.18rem;
  }

  .fk-dashboard-progress--wide {
    height: 0.4rem;
    margin-top: 0.3rem;
  }

  .fk-xp-sparkline {
    height: 1.4rem;
  }
}

@media (max-width: 360px) {
  .fk-menu-rail .fk-menu-auth-signed-out {
    gap: 0.3rem;
  }

  .fk-menu-rail .fk-menu-auth-signed-out .fk-dashboard-auth-button {
    padding: 0.3rem 0.48rem;
    font-size: 0.70rem;
  }
}

@media (min-width: 1181px) and (max-height: 740px) {
  .fk-profile-screen,
  .fk-stats-screen,
  .fk-settings-screen,
  .fk-review-mistakes-screen {
    padding: 0.62rem 1rem;
  }

  .fk-profile-layout {
    grid-template-columns: minmax(15.5rem, 0.68fr) minmax(0, 1.82fr);
  }

  .fk-profile-card {
    padding: 0.58rem;
  }

  .fk-profile-topbar {
    min-height: 2.3rem;
    margin-bottom: 0.42rem;
  }

  .fk-profile-topbar h2,
  .fk-review-placeholder h2 {
    font-size: 1.22rem;
  }

  .fk-profile-left,
  .fk-profile-main,
  .fk-profile-main-grid,
  .fk-profile-layout {
    gap: 0.46rem;
  }

  .fk-profile-card-head {
    margin-bottom: 0.34rem;
  }

  .fk-profile-card-head h3 {
    font-size: 0.92rem;
  }

  .fk-profile-hero-card {
    gap: 0.55rem;
  }

  .fk-profile-hero-copy strong {
    font-size: 1.22rem;
  }

  .fk-profile-rank,
  .fk-profile-next {
    margin-top: 0.12rem;
  }

  .fk-profile-avatar-grid {
    gap: 0.28rem;
  }

  .fk-profile-avatar-option {
    min-height: 4.05rem;
    padding: 0.28rem 0.24rem;
  }

  .fk-profile-avatar-option .fk-character-portrait {
    width: 2.25rem;
    height: 2.25rem;
  }

  .fk-profile-rank-grid > div,
  .fk-profile-stat-item {
    padding: 0.32rem 0.42rem;
  }

  .fk-profile-rank-grid strong {
    margin-top: 0.22rem;
    line-height: 1.28;
  }

  .fk-profile-rank-ladder {
    min-height: 2.15rem;
    margin-top: 0.3rem;
  }

  .fk-profile-rank-step {
    gap: 0.08rem;
    min-height: 2.05rem;
    padding: 0.26rem 0.32rem;
  }

  .fk-profile-rank-step strong {
    font-size: 0.68rem;
    line-height: 1.18;
  }

  .fk-profile-graph-card {
    min-height: 15.75rem;
  }

  .fk-profile-xp-summary {
    margin-bottom: 0.36rem;
  }

  .fk-profile-xp-summary span {
    padding: 0.3rem 0.42rem;
  }

  .fk-profile-xp-graph,
  .fk-profile-xp-chart,
  .fk-profile-graph-empty,
  .fk-profile-single-xp {
    min-height: 11.35rem;
  }

  .fk-profile-mistake-item {
    padding: 0.28rem 0;
  }

  .fk-profile-mistakes-card .fk-profile-action {
    min-height: 1.9rem;
    margin-top: 0.36rem;
  }
}

@media (max-width: 1180px) {
  .fk-profile-screen,
  .fk-stats-screen,
  .fk-settings-screen,
  .quest-v2-screen,
  .fk-review-mistakes-screen {
    grid-column: 1;
    grid-row: auto;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .fk-profile-layout,
  .fk-stats-layout,
  .fk-settings-layout,
  .fk-profile-main-grid,
  .fk-review-pack-grid {
    grid-template-columns: 1fr;
  }

  .fk-profile-main {
    grid-template-rows: auto;
  }

  .fk-profile-card-back-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 28rem;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .fk-stats-layout {
    grid-template-rows: auto;
  }

  .fk-stats-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fk-mastery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fk-mastery-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fk-settings-topbar,
  .fk-settings-layout {
    width: 100%;
  }

  .fk-settings-layout,
  .fk-settings-form {
    grid-template-rows: auto;
    height: auto;
  }

  .fk-settings-card {
    grid-template-columns: minmax(13rem, 0.38fr) minmax(0, 1fr);
  }

  .fk-settings-card-intro {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.82rem;
  }

  .fk-settings-row {
    grid-template-columns: minmax(10rem, 0.42fr) minmax(14rem, 1fr);
  }

}

@media (max-width: 760px) {
  /* Mobile UI feedback fixes: Hand info toggle and redundant Dashboard back button hidden on mobile */
  .view-options-hand-info-toggle,
  .fk-profile-back {
    display: none !important;
  }

  /* Profile page layout on mobile: compact hero panel, bold name typography, progress graph second */
  .fk-profile-layout {
    display: flex;
    flex-direction: column;
  }

  .fk-profile-left {
    display: contents;
  }

  .fk-profile-hero-card {
    order: 1;
    padding: 0.65rem 0.85rem;
    gap: 0.45rem;
  }

  .fk-profile-name {
    font-weight: 800 !important;
    font-size: 1.25rem !important;
    color: #f7d57f;
    letter-spacing: 0.02em;
  }

  .fk-profile-main {
    order: 2;
  }

  .fk-profile-left > article:not(.fk-profile-hero-card) {
    order: 3;
  }

  .fk-profile-screen,
  .fk-stats-screen,
  .fk-settings-screen,
  .fk-review-mistakes-screen {
    padding: 0.35rem 1rem 1rem;
  }

  .fk-profile-topbar,
  .fk-stats-topbar {
    min-height: 0 !important;
    margin-bottom: 0.25rem !important;
    padding-bottom: 0 !important;
    align-items: center;
    flex-direction: row;
  }

  .fk-stats-topbar > div:first-child {
    display: none !important;
  }

  .fk-review-topbar,
  .fk-settings-topbar {
    display: block !important;
    min-height: 0 !important;
    margin-bottom: 0.85rem !important;
    padding-bottom: 0 !important;
    width: 100%;
  }

  /* Owner field feedback: the "Review Mistakes" heading and its "Replay missed decisions and clean
     up recurring leaks." subtitle are redundant on mobile -- the nav toggle directly above already
     reads REVIEW, and the first pack card ("ALL MISTAKES") makes the screen's purpose obvious
     without them. The Settings screen's own "Settings"/"Customize your training experience and
     manage your preferences." pair was reported the same way a session later, for the same reason
     (the toggle above it already reads SETTINGS, and the first card is plainly labelled TRAINING).
     Same treatment, and the same reasoning, as the Train/Stats page titles hidden at the end of
     this file (commit 1e5c639). The whole topbar goes rather than just its title block: each one's
     only other child is a Dashboard back button (.fk-review-topbar-actions /
     #settings-back-dashboard) that is already display:none here, so hiding the container also
     reclaims the 0.85rem margin-bottom the rule above reserves -- leaving the title's own div
     behind would hold that gap open with nothing in it.
     Settings is scoped by screen id rather than by class on purpose: #moderator-screen reuses
     .fk-settings-topbar for its own "Moderator" heading, which is a different screen and was not
     reported -- targeting the bare class would silently hide that one too. */
  .fk-review-topbar,
  #settings-screen .fk-settings-topbar {
    display: none !important;
  }

  /* Owner field report (2026-08-17), same pass: the Add / Remove Modes modal read as completely
     dead on a phone. The star is the only interactive element in each row and measured 29x29px at
     the far right of a 322px-wide, 62px-tall row -- under this project's own 44px touch-target
     floor (the bar work order 8 part E applied to .fk-saved-modal-close), and small enough that a
     missed tap lands on inert row body. handleSavedSessionsManageClick now makes the whole row
     toggle at this breakpoint; this widens the star itself to a real target for anyone who does
     aim at it. The row is 62px tall, so 44px fits without changing the row's own height. */
  .fk-save-star--manage {
    min-width: 44px;
    min-height: 44px;
  }

  .fk-settings-topbar h2,
  .fk-review-topbar h2 {
    font-size: 1.55rem;
    line-height: 1.2;
    margin: 0 0 0.35rem;
  }

  .fk-settings-topbar p,
  .fk-review-topbar p {
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(176, 214, 228, 0.82);
    margin: 0;
    max-width: none;
  }

  #settings-back-dashboard,
  #review-back-dashboard,
  #moderator-back-dashboard,
  #quests-back-dashboard,
  #practice-back-dashboard,
  #profile-back-dashboard,
  .fk-review-topbar-actions,
  .fk-profile-back {
    display: none !important;
  }

  /* Work order 11 item 3: .fk-settings-layout's own desktop `align-content: space-between`
     (styles.css ~6379) only distributes gap when the grid container has extra height beyond its
     content -- here it's `height: auto` (set above, <=1180px), so no gap was ever actually
     produced between cards at this width; they touched directly. A real gap, not a side effect
     of leftover vertical space, is needed for "space between the section cards themselves". */
  .fk-settings-layout {
    gap: 1.15rem;
  }

  .fk-settings-card {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .fk-settings-card-intro {
    border-right: 0;
    border-bottom: 1px solid rgba(124, 238, 228, 0.14);
    padding-right: 0;
    padding-bottom: 0.85rem;
  }

  .fk-settings-row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    align-items: start;
  }

  /* A visible row within a card gets real breathing room top and bottom, plus a divider from the
     row before it -- was a bare 0.2rem padding-top tuned for the desktop label|control layout,
     far too tight once the control moved onto its own line below the label. */
  .fk-settings-card-controls > .fk-settings-row {
    padding: 0.7rem 0;
  }

  .fk-settings-card-controls > .fk-settings-row:first-child {
    padding-top: 0;
  }

  .fk-settings-card-controls > .fk-settings-row:last-child {
    padding-bottom: 0;
  }

  .fk-settings-card-controls > .fk-settings-row + .fk-settings-row {
    padding-top: 0.7rem;
  }

  /* Segment options stay a horizontal bar (the base rule's repeat(3, 1fr)) -- the vertical stack
     this used to force, plus the border-top/border-left swap that went with it, is reverted along
     with the specificity fix below rather than restyled further. */
  .fk-settings-segment label,
  .fk-settings-segment span {
    min-height: 2.75rem;
  }

  .fk-settings-toggle,
  .fk-settings-inline-action {
    justify-self: start;
  }

  /* Root cause of the stacked-vertical-bars bug (work order 11 item 3): this selector's own base
     rule (styles.css ~6547, specificity 0,3,0) sets `grid-column: 2` and `justify-self: end` with
     no media-query scope at all. The <=760px block's own `.fk-settings-row { grid-template-
     columns: 1fr }` above is a lower-specificity, single-column rule -- it wins on
     grid-template-columns, but grid-column:2 still forces the segment into an *implicit* second
     column the single-track grid never intended, and .fk-settings-segment's own mobile
     grid-template-columns:1fr (previously set here) then stacked that column's options
     vertically. Matched at equal (0,3,0) specificity here, so this wins by source order --
     grid-column:1 puts the segment back in the row's one real column (auto-flowing onto its own
     row below the label, i.e. "label above, full-width control beneath"), and justify-self:stretch
     plus width:100% make it a genuine full-width bar rather than a right-aligned one. */
  .fk-settings-fieldset.fk-settings-row > .fk-settings-segment,
  .fk-settings-fieldset.fk-settings-row > div {
    grid-column: 1;
    width: 100%;
    justify-self: stretch;
  }

  .fk-settings-action {
    grid-template-columns: 1fr;
  }

  .fk-settings-action b,
  .fk-settings-action--danger b {
    justify-self: start;
  }

  .fk-review-topbar h2 {
    font-size: 1.55rem;
    line-height: 1.2;
    margin: 0 0 0.35rem;
  }

  .fk-review-topbar p {
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(176, 214, 228, 0.82);
    margin: 0;
  }

  .fk-review-pack-card {
    min-height: 12rem;
  }

  .fk-review-pack-card--all {
    grid-template-columns: minmax(0, 1fr) clamp(3rem, 18vw, 3.4rem);
    row-gap: 0.56rem;
    min-height: 10.75rem;
  }

  .fk-review-card-meter {
    --fk-review-ring-size: clamp(2.8rem, 15vw, 3.35rem);
    grid-column: 2;
    grid-row: 4;
    grid-template-columns: var(--fk-review-ring-size);
    width: auto;
    min-width: 0;
    justify-self: end;
    max-width: none;
    margin: 0;
  }

  .fk-review-pack-card--all .fk-review-card-actions {
    grid-column: 1;
    grid-row: 4;
    margin-top: 0.1rem;
  }

  .fk-review-pack-card--all > strong {
    max-width: 12ch;
    font-size: clamp(2rem, 9vw, 2.35rem);
  }

  .fk-review-library {
    margin-top: 0.85rem;
  }

  .fk-review-library-head {
    display: block !important;
    margin-bottom: 0.5rem;
    text-align: left;
  }

  .fk-review-library-title {
    font-size: 1.28rem;
    font-weight: 520;
    line-height: 1.25;
    margin: 0;
    color: #f5fbff;
    font-family: "Georgia", "Cambria", serif;
  }

  .fk-review-log-controls {
    margin-bottom: 0.75rem;
    justify-content: flex-start;
  }

  /* Field feedback: the desktop 4-column grid (.fk-review-row's own grid-template-columns)
     collapsed into ragged left-aligned rows on mobile -- hand name, a metadata line, then
     YOUR ACTION/BEST ACTION/Missed Nx stacked with no visual relationship to the rest of the
     app's card language, then a full-width Review button with a cramped x beside it. Restyled
     as a centered card matching .quest-v2-card/.fk-practice-pack-card's own
     border+radius+background treatment, with the list itself flattened (the individual cards
     carry their own chrome + a margin gap instead of the desktop hairline-row-in-a-frame look). */
  .fk-review-list {
    gap: 0.6rem;
    padding: 0.15rem;
    border-color: transparent;
    background: transparent;
  }

  .fk-review-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.55rem;
    padding: 0.85rem 0.9rem 0.9rem;
    border: 1px solid rgba(124, 238, 228, 0.16);
    border-radius: 10px;
    background: #061620;
    text-align: center;
  }

  .fk-review-row:last-child {
    border-bottom: 1px solid rgba(124, 238, 228, 0.16);
  }

  /* Keep the gold/teal preflop-vs-postflop accent bar (a real signal) but move it from a
     left-edge sliver -- which reads as a stray mark once the row's content is centered -- to a
     bar across the card's own top edge, matching how the rest of this design language marks a
     card's category (e.g. the pack cards above it). */
  .fk-review-row::before {
    left: 12%;
    right: 12%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 3px;
  }

  .fk-review-row-main {
    justify-items: center;
    width: 100%;
  }

  .fk-review-row-main > strong {
    font-size: 15px;
    font-weight: 500;
    color: #eef2ef;
    white-space: normal;
  }

  .fk-review-row-main small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: #f0bb59;
  }

  /* Brief calls for a uniform gold context line on mobile (the top accent bar above is now the
     pre/postflop signal) -- overrides the desktop rule that tints this teal for postflop rows,
     matched at the same selector specificity so source order (this comes later) decides. */
  .fk-review-row-street,
  .fk-review-row--postflop .fk-review-row-street {
    color: inherit;
  }

  /* Two-column YOURS/BEST comparison, divided from the hand/context block above -- the contrast
     between the two actions is the point of the card, so they stay side by side rather than
     stacking with the rest. */
  .fk-review-row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(124, 238, 228, 0.14);
  }

  .fk-review-row-actions span {
    justify-items: center;
    text-align: center;
  }

  .fk-review-row-actions em,
  .fk-review-row-actions strong {
    font-size: 0.72rem;
  }

  /* Work order 11 item 4: this used to collapse "Missed 1x" and a "due now"/"due in Nd" label
     onto one line -- the due label is gone (there's no real deadline in this product, so it read
     as a fake urgency cue), leaving just the single "Missed Nx" status. mistake.nextDueAt itself
     is untouched -- still drives due-mistake sorting/scheduling, just no longer rendered here. */
  .fk-review-row-meta {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.72rem;
  }

  .fk-review-row-meta strong {
    font-size: 0.72rem;
    font-weight: 620;
  }

  .fk-review-row-buttons {
    width: 100%;
    justify-content: center;
  }

  /* Review flexes to fill; the x stays a fixed, visually compact square rather than reading as
     an afterthought next to it -- both still clear a 44px tap target via an invisible expanded
     hit region (::before, negative inset) rather than growing the visible chrome to match. */
  .fk-review-row-buttons .fk-profile-action {
    position: relative;
    flex: 1 1 auto;
    min-height: 1.875rem;
  }

  .fk-review-row-buttons .fk-profile-action::before {
    content: "";
    position: absolute;
    inset: -7px;
  }

  .fk-review-remove-button {
    position: relative;
    flex: 0 0 1.875rem;
    width: 1.875rem;
    min-width: 1.875rem;
    height: 1.875rem;
    border-width: 1px;
  }

  .fk-review-remove-button::before {
    content: "";
    position: absolute;
    inset: -7px;
  }

  .fk-stats-topbar {
    flex-direction: column;
  }

  .fk-stats-controls,
  .fk-stats-control-group {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .fk-stats-phase-toggle,
  .fk-stats-metric-grid {
    width: 100%;
  }

  .fk-stats-phase-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Was a single column: with the four cards' own height now cut roughly in half (below) and the
     cqi-based value sizing already fixing text truncation, two columns halves this section's
     total scroll length again without reintroducing the "Facing Raise" ellipsis problem that
     drove the single-column change in the first place. */
  .fk-stats-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Field feedback: the Elo card, the (mostly-empty on a fresh account) Rating Over Time card,
     and four metric cards each carried desktop-tuned min-heights (24rem/26-30rem/10-12rem) that
     don't shrink for a phone screen, forcing well over two viewport-heights of scroll for a
     handful of numbers -- confirmed live (stats screen alone rendered ~1818px tall against an
     844px viewport). Every value below is a straight reduction of the existing desktop rule, not
     a new layout: same cards, same fields, just sized for how little a phone screen can show at
     once. */
  .fk-stats-rating-card {
    min-height: 0;
    padding: 1.1rem 1.25rem;
  }

  .fk-stats-rating-card > strong {
    margin-top: 0.4rem;
    font-size: clamp(2.6rem, 13vw, 3.4rem);
  }

  /* Work order 6 item 5: Stability (the row+bar below) hidden on mobile only -- stays computed and
     visible on desktop, kept purely as an internal/desktop number per owner decision. The divider
     above it existed specifically to separate the rating value from the stability row; with that
     row gone, .fk-stats-family-elos' own border-top (unchanged below) is the only divider this
     card needs, so the one above is hidden too rather than left as a stray line with nothing
     between it and the next border. This supersedes work order 4 item 6's plan to add a
     plain-language sublabel here instead -- #stats-stability-sublabel is still populated by app.js
     (used on desktop, where the row stays), just not rendered on a phone at all. */
  .fk-stats-rating-divider,
  .fk-stats-stability-row,
  .fk-stats-stability-track {
    display: none;
  }

  /* Item 5 (2026-08-10 work order 3): .fk-stats-family-elos' translateY exists to visually anchor
     the Preflop/Postflop Elo pair near the bottom of the desktop card's tall (24rem,
     justify-content:center) column -- at this breakpoint the card above already dropped its
     min-height and stopped centering, so the same push instead reads as a large dead gap before
     a pair crowded into opposite corners. Neutralized and tightened the same straight-reduction
     way the rest of this block already treats the card. */
  .fk-stats-family-elos {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    transform: none;
  }

  .fk-stats-graph-card {
    min-height: clamp(12rem, 32vh, 15rem);
    padding: 1rem 1.1rem;
  }

  .fk-stats-metric-card {
    min-height: 0;
    padding: 0.8rem 0.95rem;
  }

  .fk-stats-metric-icon {
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 0.65rem;
  }

  .fk-stats-metric-icon svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .fk-stats-metric-detail {
    margin-top: 0.32rem;
  }

  .fk-mastery-toggle-title,
  .fk-mastery-toggle-value {
    gap: 0.42rem;
  }

  .fk-mastery-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fk-mastery-filters select {
    width: 100%;
    min-width: 0;
  }

  .fk-mastery-summary,
  .fk-mastery-grid {
    grid-template-columns: 1fr;
  }

  .fk-profile-back {
    width: 100%;
  }

  .fk-profile-hero-card,
  .fk-profile-xp-row,
  .fk-profile-mistake-item {
    grid-template-columns: 1fr;
  }

  .fk-profile-hero-avatar {
    justify-self: center;
  }

  .fk-profile-hero-copy {
    text-align: center;
  }

  .fk-profile-xp-row {
    gap: 0.35rem;
  }

  .fk-profile-xp-row span,
  .fk-profile-rank,
  .fk-profile-next {
    white-space: normal;
  }

  .fk-profile-avatar-grid,
  .fk-profile-rank-grid,
  .fk-profile-stats-grid,
  .fk-profile-xp-summary {
    grid-template-columns: 1fr;
  }

  /* Single-column above turns every avatar option into its own full-width row -- on the desktop
     layout this card has a fixed height with its own internal scrollbar (.fk-profile-card:has(
     .fk-profile-avatar-grid)'s minmax(0,1fr) row against the profile screen's fixed viewport
     height), but mobile switches the whole profile screen to natural auto-height (the earlier
     <=1180px block), so this grid's full stacked height -- all 20 avatars -- was instead added
     straight into the page's own scroll length. Bounded the same way
     .fk-profile-card-back-grid already is just below, rather than a new pattern: its own internal
     scrollbar instead of ~20 extra rows of outer page scroll for a picker most players open once. */
  .fk-profile-avatar-grid {
    max-height: 14rem;
    overflow-y: auto;
  }

  .fk-profile-graph-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: auto;
  }

  .fk-profile-graph-card .fk-profile-card-head--split {
    display: contents;
  }

  .fk-profile-graph-card .fk-profile-card-head--split > div:first-child {
    order: 1;
  }

  .fk-profile-graph-card .fk-profile-xp-graph-shell {
    order: 2;
  }

  .fk-profile-graph-card .fk-profile-graph-controls {
    order: 3;
    margin-top: 0.25rem;
  }

  .fk-profile-graph-card .fk-profile-xp-summary {
    order: 4;
    margin-top: 0.15rem;
    margin-bottom: 0;
  }

  .fk-profile-card-head--split {
    align-items: stretch;
    flex-direction: column;
  }

  .fk-profile-card-back-grid {
    grid-template-columns: 1fr;
    max-height: 32rem;
  }

  .fk-profile-timeframes {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fk-profile-metric-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fk-profile-graph-controls {
    justify-content: stretch;
  }

  .fk-profile-xp-chart {
    min-width: 34rem;
  }

  .fk-profile-xp-graph {
    overflow-x: auto;
    touch-action: pan-x;
  }

  /* Item 6 (2026-08-10 work order 3): the 34rem (544px) floor two rules up exists so the Profile
     page's own XP graph stays legible and pans horizontally on a phone (the overflow-x:auto right
     above). The Stats "Rating Over Time" card shares the same .fk-profile-xp-chart class but never
     opts into that pan-x scrolling -- .fk-stats-graph-card .fk-profile-xp-graph (unconditional,
     higher specificity than the overflow-x:auto rule above) sets overflow:visible instead -- so
     the same fixed-width chart just overflowed its 358px-ish card with no way to see the rest.
     Scoped to Stats only, not touching Profile's own established pattern: let the chart actually
     shrink to fit instead. */
  .fk-stats-graph-card .fk-profile-xp-chart {
    min-width: 0;
  }
}

@media (max-height: 620px) {
  .session-summary-card {
    grid-template-rows: auto auto auto minmax(3.4rem, 1fr) auto auto;
    gap: 0.28rem;
    max-height: calc(100vh - 48px);
    max-height: calc(100svh - 48px);
    padding: 0.48rem;
  }

  .summary-hero {
    grid-template-columns: minmax(0, 1fr) minmax(5.8rem, 7.2rem);
    gap: 0.52rem;
  }

  .session-summary-card h3 {
    margin-top: 0.28rem;
    font-size: clamp(1.52rem, 4.2vw, 2.16rem);
  }

  .summary-hero-copy p {
    font-size: 0.74rem;
    line-height: 1.12;
  }

  .summary-emblem {
    width: clamp(5.8rem, 18vw, 7.2rem);
  }

  .summary-results-band {
    grid-template-columns: minmax(5.4rem, 0.6fr) minmax(0, 1fr);
    gap: 0.22rem;
    margin-top: -0.18rem;
  }

  .summary-metrics-panel {
    grid-column: 2;
  }

  .summary-rating-graph {
    min-height: 4.2rem;
  }

  .summary-rating-graph .fk-profile-xp-chart {
    min-height: 4.2rem;
  }

  .summary-metric-row span,
  .summary-impact-card > span,
  .summary-section-head span,
  .summary-coaching-card span {
    font-size: 0.46rem;
  }

  .summary-grade-hero {
    min-height: 4.3rem;
    margin-top: -0.28rem;
  }

  .summary-grade-image {
    width: min(100%, clamp(4.4rem, 12vw, 6rem));
    height: clamp(4.4rem, 12vw, 6rem);
  }

  .summary-metrics-panel {
    margin-top: 0;
    padding: 0.2rem 0.32rem;
  }

  .summary-metric-row {
    min-height: 1.35rem;
    padding: 0.14rem 0;
  }

  .summary-metric-row strong {
    font-size: 0.78rem;
  }

  .summary-metric-row small,
  .review-row small,
  .review-row p {
    display: none;
  }

  .summary-impact-grid {
    gap: 0.32rem;
    margin-top: -0.1rem;
  }

  .summary-impact-card {
    padding: 0.34rem 0.42rem;
  }

  .summary-impact-card strong {
    margin-top: 0.2rem;
    font-size: 0.88rem;
  }

  .summary-review-section {
    margin-top: -0.1rem;
  }

  .summary-section-head {
    margin-bottom: 0.12rem;
  }

  .summary-section-head small {
    font-size: 0.62rem;
  }

  .review-row {
    grid-template-columns: 1.4rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(50px, 0.55fr);
    gap: 0.28rem;
    padding: 0.28rem 0.34rem;
  }

  .review-row-index {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.64rem;
  }

  .review-row span {
    font-size: 0.44rem;
  }

  .review-row strong {
    margin-top: 0.08rem;
    font-size: 0.64rem;
  }

  .review-action-mark {
    margin-left: 0.16rem;
    font-size: 0.82rem;
  }

  .summary-coaching-card {
    margin-top: 0;
    padding: 0.32rem 0.4rem;
  }

  .summary-coaching-icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  .summary-coaching-card p {
    margin-top: 0.1rem;
    font-size: 0.66rem;
    line-height: 1.08;
  }

  #summary-modal .modal-actions {
    gap: 0.28rem;
    margin-top: 0;
  }

  #summary-modal .modal-actions .primary-button,
  #summary-modal .modal-actions .secondary-button {
    min-height: 1.82rem;
    padding: 0.24rem 0.34rem;
    font-size: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .answer-button,
  .answer-button--asset-shell .answer-button__art,
  .answer-button--asset-shell .answer-button__overlay--gold,
  .feedback-band,
  .primary-button,
  .secondary-button,
  .summary-rank-track span,
  .session-summary-card::after {
    transition-duration: 1ms;
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }

  .answer-button:active:not(:disabled),
  .answer-button.answer-button--pressing,
  .answer-button.answer-button--selected-correct,
  .answer-button.answer-button--selected-incorrect,
  .table-size-card:hover,
  .table-size-card:focus-visible,
  .mode-card:hover,
  .mode-card:focus-visible,
  .answer-button:hover,
  .answer-button:focus-visible,
  .primary-button:hover,
  .primary-button:focus-visible,
  .secondary-button:hover,
  .secondary-button:focus-visible {
    transform: none;
  }

  .answer-button.answer-button--selected-incorrect,
  .answer-button.answer-button--missed-correct,
  .answer-button--asset-shell.answer-button--selected-correct .answer-button__overlay--gold,
  .answer-button--asset-shell.answer-button--missed-correct .answer-button__overlay--gold,
  .feedback-panel--revealed,
  .lesson-active .feedback-band.feedback-panel--revealed,
  .continue-button--ready {
    animation: none;
  }

  .answer-button--asset-shell.answer-button--selected-correct .answer-button__overlay--gold,
  .answer-button--asset-shell.answer-button--missed-correct .answer-button__overlay--gold {
    opacity: 0.62;
    transform: none;
  }

  .feedback-panel--revealed {
    opacity: 1;
    transform: none;
  }

  .lesson-active .feedback-band.feedback-panel--revealed {
    transform: translateX(-50%);
  }
}

/* Summary review concept overrides: intentionally last to beat legacy modal media rules. */
#summary-modal .modal-card {
  width: min(920px, 100%);
}

#summary-modal .session-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  padding: clamp(0.95rem, 2.2vw, 1.55rem) clamp(1.2rem, 4vw, 4rem) clamp(0.9rem, 2vw, 1.35rem);
  gap: clamp(0.48rem, 1.05vw, 0.82rem);
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
}

#summary-modal .session-summary-card::before,
#summary-modal .session-summary-card::after {
  inset: 0;
}

#summary-modal .session-summary-card h3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.36rem;
  margin: 0 auto;
  padding: 0.22rem 0.72rem;
  border: 1px solid rgba(51, 214, 195, 0.26);
  border-radius: 999px;
  background: rgba(0, 24, 31, 0.58);
  color: rgba(190, 255, 248, 0.9);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
}

#summary-modal .summary-status-pill,
#summary-modal .summary-hero-copy p {
  display: none;
}

#summary-modal .summary-hero {
  position: relative;
  display: block;
  width: 100%;
}

#summary-modal .summary-hero-copy {
  display: grid;
  justify-items: center;
  gap: clamp(0.32rem, 0.86vw, 0.52rem);
}

#summary-modal .summary-grade-hero,
#summary-modal .summary-hero-copy .summary-grade-hero {
  display: grid;
  justify-items: center;
  min-height: 0;
  margin: 0;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 18px rgba(240, 187, 89, 0.12));
}

#summary-modal .summary-grade-image,
#summary-modal .summary-hero-copy .summary-grade-image {
  width: min(100%, clamp(8rem, 16vw, 10.8rem));
  height: auto;
  max-height: clamp(8rem, 16vw, 10.8rem);
  object-fit: contain;
}

#summary-modal .summary-grade-label {
  margin-top: -0.28rem;
  color: var(--teal-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

#summary-modal #modal-grade-name {
  display: block;
  margin-top: 0.14rem;
  color: #fbfbf4;
  font-family: inherit;
  font-size: clamp(3.5rem, 5.4vw, 4rem);
  font-weight: 600;
  line-height: 1.08;
  padding-bottom: 0.08em;
  overflow: visible;
  letter-spacing: 0;
  text-shadow: 0 14px 30px rgba(0, 0, 0, 0.32), 0 0 24px rgba(246, 207, 124, 0.1);
}

#summary-modal .summary-primary-result {
  display: grid;
  justify-items: center;
  gap: 0.08rem;
  margin-top: 0;
}

#summary-modal .summary-primary-result strong {
  color: #fbfbf4;
  font-family: inherit;
  font-size: clamp(5.5rem, 9vw, 6rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

#summary-modal .summary-primary-result span {
  color: var(--teal-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#summary-modal .summary-primary-result small {
  color: var(--teal-soft);
  font-size: clamp(1.15rem, 2.3vw, 1.4rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#summary-modal .summary-primary-result small.is-negative {
  color: #f09a88;
}

#summary-modal .summary-primary-result small[hidden] {
  display: none;
}

#summary-modal .summary-metrics-panel {
  display: flex;
  grid-column: auto;
  justify-content: center;
  align-items: center;
  width: min(100%, 42rem);
  gap: 0;
  margin: clamp(0.08rem, 0.48vw, 0.24rem) auto 0;
  padding: 0;
}

#summary-modal .summary-metric-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 0.04rem clamp(0.9rem, 2.7vw, 1.75rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#summary-modal .summary-metric-row + .summary-metric-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: rgba(176, 240, 255, 0.22);
}

#summary-modal .summary-metric-icon {
  align-self: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-right: 0.68rem;
}

#summary-modal .summary-metric-value-stack {
  justify-items: center;
  text-align: center;
}

#summary-modal .summary-metric-value-stack > span {
  color: var(--teal-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

#summary-modal .summary-metric-row strong {
  margin-top: 0.12rem;
  font-family: inherit;
  font-size: clamp(2.125rem, 3.7vw, 2.5rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#summary-modal .summary-metric-delta {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#summary-modal .summary-rank-progress {
  width: min(100%, 56rem);
  margin-top: clamp(0.16rem, 0.8vw, 0.42rem);
}

#summary-modal .summary-rank-labels {
  align-items: end;
}

#summary-modal .summary-rank-endpoint {
  position: relative;
  display: block;
}

#summary-modal .summary-rank-endpoint--next {
  text-align: right;
}

#summary-modal .summary-rank-frame {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.24rem);
  display: block;
  width: clamp(3.4rem, 6vw, 4.5rem);
  aspect-ratio: 1;
}

#summary-modal .summary-rank-endpoint--next .summary-rank-frame {
  right: 0;
  left: auto;
}

#summary-modal .summary-rank-frame[hidden] {
  display: none;
}

#summary-modal .summary-rank-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#summary-modal .summary-rank-frame span {
  position: absolute;
  left: 50%;
  top: 76.4%;
  transform: translate(-50%, -50%);
  color: #f9e1ab;
  font-family: Georgia, Cambria, serif;
  font-size: clamp(0.5rem, 0.82vw, 0.68rem);
  font-weight: 760;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
}

#summary-modal .summary-quest-results {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  pointer-events: none;
  text-align: left;
}

#summary-modal .summary-quest-results-body {
  position: relative;
  width: 100%;
  height: 100%;
}

#summary-modal .summary-quest-result {
  position: absolute;
  top: clamp(4.65rem, 8.5vw, 5.6rem);
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr);
  align-items: center;
  gap: 0.58rem;
  width: clamp(11rem, 22vw, 13.2rem);
  min-height: 5.4rem;
  padding: 0.68rem 0.72rem 0.62rem;
  border: 1px solid rgba(241, 197, 106, 0.58);
  border-radius: 14px 10px 15px 9px;
  background: radial-gradient(circle at 18% 12%, rgba(242, 196, 98, 0.2), transparent 42%), linear-gradient(145deg, rgba(19, 59, 63, 0.97), rgba(3, 26, 35, 0.98));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 245, 197, 0.08);
}

#summary-modal .summary-quest-result:first-child {
  left: clamp(0rem, 1.8vw, 1.4rem);
  transform: rotate(-3.5deg);
}

#summary-modal .summary-quest-result:nth-child(2) {
  right: clamp(0rem, 1.8vw, 1.4rem);
  transform: rotate(3.5deg);
}

#summary-modal .summary-quest-result-icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.35));
}

#summary-modal .summary-quest-result-icon .quest-v2-raster,
#summary-modal .summary-quest-result-icon .quest-v2-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#summary-modal .summary-quest-result-copy {
  display: grid;
  min-width: 0;
  line-height: 1.1;
}

#summary-modal .summary-quest-result-copy span {
  color: rgba(124, 238, 228, 0.88);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

#summary-modal .summary-quest-result-copy strong {
  color: #fbfbf4;
  font-size: 0.88rem;
  line-height: 1.15;
}

#summary-modal .summary-quest-result-copy small {
  color: rgba(218, 235, 237, 0.62);
  font-size: 0.62rem;
  line-height: 1.2;
}

#summary-modal .summary-quest-result > b {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: -0.18rem;
  color: rgba(238, 201, 139, 0.96);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#summary-modal .summary-quest-results-more,
#summary-modal .summary-quest-results-empty {
  position: absolute;
  right: 1.1rem;
  top: 10.4rem;
  color: rgba(238, 201, 139, 0.8);
  font-size: 0.7rem;
}

#summary-modal .summary-feedback-line {
  max-width: min(100%, 48rem);
  margin-top: clamp(0.18rem, 0.8vw, 0.52rem);
}

#summary-modal .summary-feedback-line p {
  font-size: clamp(1.125rem, 2.1vw, 1.25rem);
  font-weight: 450;
}

#summary-modal .summary-details-panel {
  display: grid;
  width: 100%;
  gap: 0.58rem;
  min-height: 0;
  margin-top: 0.22rem;
}

#summary-modal .summary-details-panel.hidden {
  display: none !important;
}

#summary-modal .summary-details-panel .summary-results-band {
  display: block;
  margin-top: 0;
}

#summary-modal .modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  width: min(100%, 32rem);
  gap: 0.72rem;
  margin-top: clamp(0.18rem, 0.8vw, 0.52rem);
}

#summary-modal .modal-actions .primary-button,
#summary-modal .modal-actions .secondary-button {
  min-height: 3rem;
  padding: 0.62rem 0.95rem;
  border-radius: 8px;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 600;
}

#summary-modal .modal-actions .primary-button {
  color: #061016;
  background: linear-gradient(180deg, #ffd86e, #efad2f);
  border-color: rgba(255, 230, 142, 0.9);
  box-shadow:
    0 0 24px rgba(240, 187, 89, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

#summary-modal .modal-actions .secondary-button {
  color: #f4fcff;
  border-color: rgba(124, 238, 228, 0.55);
  background: rgba(0, 18, 28, 0.48);
}

/* Session-complete action hierarchy (final): Keep Training is the solid-gold primary CTA.
   Dashboard is restored to its original elegant gold text-button treatment (icon + gold text,
   no border, no fill) -- the earlier "regression" reports turned out to be about this exact
   look being briefly broken by other changes, not about the look itself; a reference screenshot
   confirmed it's the intended, premium one. Retry Mistakes is now a solid cyan-blue fill,
   pairing with Keep Training's solid gold as a strong (but clearly secondary) CTA. */
#summary-modal .modal-actions #modal-dashboard-button {
  justify-content: center;
  color: rgba(238, 201, 139, 0.94);
  border: 0;
  background: transparent;
  font-weight: 700;
  text-align: center;
}/* ID-scoped, not class-scoped like the original .view-options-dashboard-button rule this
   replaces -- a plain class selector here ties in specificity with the later, unrelated
   "#summary-modal .modal-actions .secondary-button:hover" rule below, and loses to it in source
   order, silently picking up that rule's cyan border/navy fill on hover: exactly the "dark
   outlined button" look this restore exists to avoid. */
@media (hover: hover) and (pointer: fine) {
  #summary-modal .modal-actions #modal-dashboard-button:hover {
  color: rgba(255, 224, 170, 0.98);
  background: rgba(235, 183, 101, 0.08);
  box-shadow: 0 0 0 2px rgba(213, 160, 82, 0.12);
}
}

#summary-modal .modal-actions #modal-dashboard-button:focus-visible {
  color: rgba(255, 224, 170, 0.98);
  background: rgba(235, 183, 101, 0.08);
  box-shadow: 0 0 0 2px rgba(213, 160, 82, 0.12);
}

#summary-modal .modal-actions #retry-misses-button {
  color: #04141a;
  background: linear-gradient(180deg, #7ceee4, #2ba9c4);
  border-color: rgba(178, 244, 236, 0.85);
  font-weight: 700;
  box-shadow:
    0 0 16px rgba(51, 214, 195, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}@media (hover: hover) and (pointer: fine) {
  #summary-modal .modal-actions #retry-misses-button:hover {
  filter: brightness(1.05);
  border-color: rgba(212, 251, 246, 0.95);
  box-shadow:
    0 8px 18px rgba(51, 214, 195, 0.18),
    0 0 22px rgba(51, 214, 195, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
}

#summary-modal .modal-actions #retry-misses-button:focus-visible {
  filter: brightness(1.05);
  border-color: rgba(212, 251, 246, 0.95);
  box-shadow:
    0 8px 18px rgba(51, 214, 195, 0.18),
    0 0 22px rgba(51, 214, 195, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

#summary-modal.summary-modal--entering .session-summary-card {
  animation: summary-modal-card-in 200ms ease-out both;
}

#summary-modal.summary-modal--entering .session-summary-card h3,
#summary-modal.summary-modal--entering .summary-grade-image,
#summary-modal.summary-modal--entering .summary-grade-label,
#summary-modal.summary-modal--entering #modal-grade-name,
#summary-modal.summary-modal--entering .summary-metric-row,
#summary-modal.summary-modal--entering .summary-feedback-line,
#summary-modal.summary-modal--entering .modal-actions {
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
  will-change: opacity, transform;
}

#summary-modal.summary-modal--entering:not(.summary-modal--entered) .session-summary-card h3,
#summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-grade-image,
#summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-grade-label,
#summary-modal.summary-modal--entering:not(.summary-modal--entered) #modal-grade-name,
#summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-metric-row,
#summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-feedback-line,
#summary-modal.summary-modal--entering:not(.summary-modal--entered) .modal-actions {
  opacity: 0;
}

#summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-grade-image {
  transform: scale(0.92);
}

#summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-grade-label,
#summary-modal.summary-modal--entering:not(.summary-modal--entered) #modal-grade-name,
#summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-metric-row,
#summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-feedback-line,
#summary-modal.summary-modal--entering:not(.summary-modal--entered) .modal-actions {
  transform: translateY(8px);
}

#summary-modal.summary-modal--entering.summary-modal--entered .session-summary-card h3 {
  opacity: 1;
  transform: none;
  transition-duration: 180ms;
  transition-delay: 180ms;
}

#summary-modal.summary-modal--entering.summary-modal--entered .summary-grade-image {
  opacity: 1;
  transform: scale(1);
  transition-duration: 350ms;
  transition-delay: 270ms;
}

#summary-modal.summary-modal--entering.summary-modal--entered .summary-grade-label,
#summary-modal.summary-modal--entering.summary-modal--entered #modal-grade-name {
  opacity: 1;
  transform: none;
  transition-duration: 220ms;
  transition-delay: 560ms;
}

#summary-modal.summary-modal--entering.summary-modal--entered .modal-stat--accuracy {
  opacity: 1;
  transform: none;
  transition-duration: 190ms;
  transition-delay: 760ms;
}

#summary-modal.summary-modal--entering.summary-modal--entered .modal-stat--xp {
  opacity: 1;
  transform: none;
  transition-duration: 190ms;
  transition-delay: 820ms;
}

#summary-modal.summary-modal--entering.summary-modal--entered .modal-stat--time {
  opacity: 1;
  transform: none;
  transition-duration: 190ms;
  transition-delay: 880ms;
}

#summary-modal.summary-modal--entering .summary-primary-result small {
  opacity: 0;
  transform: translateY(0.2rem);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

#summary-modal.summary-modal--entering .summary-primary-result small.summary-motion-visible {
  opacity: 1;
  transform: none;
}

#summary-modal.summary-modal--entering .summary-grade-hero {
  position: relative;
  overflow: hidden;
}

#summary-modal.summary-modal--entering .summary-grade-hero::after {
  content: "";
  position: absolute;
  inset: 4% 15% 34%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-135%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
}

#summary-modal.summary-modal--entering.summary-modal--entered .summary-grade-hero::after {
  animation: summary-grade-sweep 360ms ease-out 520ms both;
}

#summary-modal.summary-modal--entering.summary-modal--entered .summary-feedback-line,
#summary-modal.summary-modal--entering.summary-modal--entered .modal-actions {
  opacity: 1;
  transform: none;
  transition-duration: 180ms;
  transition-delay: 1020ms;
}

#summary-modal .modal-actions .primary-button,
#summary-modal .modal-actions .secondary-button {
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}@media (hover: hover) and (pointer: fine) {


#summary-modal .modal-actions .primary-button:hover {
  filter: brightness(1.055);
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(240, 187, 89, 0.22),
    0 0 28px rgba(240, 187, 89, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
}@media (hover: hover) and (pointer: fine) {


#summary-modal .modal-actions .secondary-button:hover {
  border-color: rgba(176, 240, 255, 0.72);
  background: rgba(11, 38, 48, 0.62);
}
}

#summary-modal .modal-actions .primary-button:active,
#summary-modal .modal-actions .secondary-button:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

@keyframes summary-modal-card-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes summary-grade-sweep {
  0% {
    opacity: 0;
    transform: translateX(-135%) skewX(-18deg);
  }

  25%,
  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(135%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #summary-modal.summary-modal--entering .session-summary-card {
    animation: summary-modal-card-fade 120ms ease-out both;
  }

  #summary-modal.summary-modal--entering .session-summary-card h3,
  #summary-modal.summary-modal--entering .summary-grade-image,
  #summary-modal.summary-modal--entering .summary-grade-label,
  #summary-modal.summary-modal--entering #modal-grade-name,
  #summary-modal.summary-modal--entering .summary-metric-row,
  #summary-modal.summary-modal--entering .summary-feedback-line,
  #summary-modal.summary-modal--entering .modal-actions {
    transform: none !important;
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }

  #summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-grade-image,
  #summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-grade-label,
  #summary-modal.summary-modal--entering:not(.summary-modal--entered) #modal-grade-name,
  #summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-metric-row,
  #summary-modal.summary-modal--entering:not(.summary-modal--entered) .summary-feedback-line,
  #summary-modal.summary-modal--entering:not(.summary-modal--entered) .modal-actions {
    transform: none !important;
  }

  #summary-modal.summary-modal--entering.summary-modal--entered .session-summary-card h3,
  #summary-modal.summary-modal--entering.summary-modal--entered .summary-grade-image,
  #summary-modal.summary-modal--entering.summary-modal--entered .summary-grade-label,
  #summary-modal.summary-modal--entering.summary-modal--entered #modal-grade-name,
  #summary-modal.summary-modal--entering.summary-modal--entered .summary-metric-row,
  #summary-modal.summary-modal--entering.summary-modal--entered .summary-feedback-line,
  #summary-modal.summary-modal--entering.summary-modal--entered .modal-actions {
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }

  #summary-modal.summary-modal--entering .summary-grade-hero::after {
    animation: none;
    opacity: 0;
  }

  #summary-modal.summary-modal--entering .summary-rank-track span {
    transition: none;
  }
}

@keyframes summary-modal-card-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  #summary-modal .modal-card,
  #summary-modal .session-summary-card {
    width: min(100%, calc(100vw - 24px));
  }

  #summary-modal .session-summary-card {
    padding: 1.15rem 1rem 1rem;
    gap: 0.72rem;
  }

  #summary-modal .summary-hero-copy {
    gap: 0.65rem;
  }

  #summary-modal .summary-grade-image,
  #summary-modal .summary-hero-copy .summary-grade-image {
    width: min(100%, clamp(6.2rem, 30vw, 7.8rem));
    max-height: clamp(6.2rem, 30vw, 7.8rem);
  }

  #summary-modal .summary-grade-label {
    margin-top: 0.15rem;
  }

  #summary-modal #modal-grade-name {
    margin-top: 0.25rem;
    font-size: clamp(2.4rem, 8.5vw, 3.2rem);
  }

  #summary-modal .summary-primary-result {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 0.5rem;
    row-gap: 0.15rem;
    margin-top: 0.25rem;
  }

  #summary-modal .summary-primary-result span {
    flex: 0 0 100%;
    text-align: center;
  }

  #summary-modal .summary-primary-result strong {
    font-size: clamp(3.6rem, 13vw, 4.6rem);
    line-height: 1;
  }

  #summary-modal .summary-primary-result small {
    align-self: center;
    margin-top: 0;
    font-size: clamp(1.2rem, 4.2vw, 1.5rem);
    font-weight: 700;
  }

  #summary-modal .summary-metrics-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin: 0.65rem auto 0.25rem;
    padding: 0;
    box-sizing: border-box;
  }

  #summary-modal .summary-metric-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.2rem 0.25rem;
    box-sizing: border-box;
  }

  #summary-modal .summary-metric-icon {
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.35rem;
    flex-shrink: 0;
  }

  #summary-modal .summary-metric-icon svg {
    width: 0.92rem;
    height: 0.92rem;
  }

  #summary-modal .summary-metric-value-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  #summary-modal .summary-metric-value-stack > span {
    font-size: clamp(0.58rem, 2vw, 0.68rem);
    letter-spacing: 0.06em;
    white-space: nowrap;
    margin-bottom: 0.08rem;
  }

  #summary-modal .summary-metric-row strong {
    margin-top: 0.12rem;
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    line-height: 1;
    white-space: nowrap;
  }

  #summary-modal .summary-rank-progress {
    margin-top: 0.65rem;
    margin-bottom: 0.35rem;
  }

  #summary-modal .summary-rank-labels {
    margin-bottom: 0.32rem;
  }

  #summary-modal .summary-feedback-line {
    margin-top: 0.6rem;
    padding: 0.62rem 0.85rem;
  }

  #summary-modal .summary-feedback-line p {
    font-size: 1.05rem;
    line-height: 1.35;
  }

  #summary-modal .summary-quest-results {
    position: static;
    width: 100%;
    margin-top: 0.65rem;
    box-sizing: border-box;
  }

  #summary-modal .summary-quest-results-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  #summary-modal .summary-quest-result,
  #summary-modal .summary-quest-result:first-child,
  #summary-modal .summary-quest-result:nth-child(2) {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0;
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(241, 197, 106, 0.42);
    border-radius: 12px;
    background: radial-gradient(circle at 18% 12%, rgba(242, 196, 98, 0.15), transparent 42%), linear-gradient(145deg, rgba(19, 59, 63, 0.97), rgba(3, 26, 35, 0.98));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 245, 197, 0.08);
    transform: none;
    box-sizing: border-box;
  }

  #summary-modal .summary-quest-result-icon {
    width: 2.35rem;
    height: 2.35rem;
  }

  #summary-modal .summary-quest-result-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
  }

  #summary-modal .summary-quest-result-copy span {
    color: rgba(124, 238, 228, 0.92);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0.18rem;
  }

  #summary-modal .summary-quest-result-copy strong {
    color: #fbfbf4;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
  }

  #summary-modal .summary-quest-result-copy small {
    display: block !important;
    color: rgba(176, 214, 228, 0.78);
    font-size: 0.72rem;
    line-height: 1.3;
    margin-top: 0.22rem;
  }

  #summary-modal .summary-quest-result > b {
    grid-column: auto !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    color: rgba(246, 207, 124, 0.96);
    font-size: 0.92rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 8px rgba(246, 207, 124, 0.25);
    white-space: nowrap;
  }

  #summary-modal .summary-quest-results-more {
    position: static;
    justify-self: center;
  }

  #summary-modal .modal-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.65rem;
  }

  #summary-modal .modal-actions .primary-button,
  #summary-modal .modal-actions .secondary-button {
    min-height: 2.85rem;
    padding: 0.52rem 0.6rem;
    font-size: clamp(0.88rem, 3.8vw, 1rem);
  }
}

#card-back-unlock-modal {
  z-index: 31;
}

#card-back-unlock-modal .card-back-unlock-card {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  padding: clamp(1rem, 2.2vw, 1.55rem) clamp(1.2rem, 4vw, 4rem) clamp(1rem, 2vw, 1.4rem);
  gap: clamp(0.5rem, 1.1vw, 0.8rem);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(51, 214, 195, 0.3);
  background:
    radial-gradient(circle at 50% 42%, rgba(39, 151, 156, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(4, 24, 32, 0.98), rgba(1, 10, 16, 0.99));
  text-align: center;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

#card-back-unlock-modal.card-back-unlock-modal--visible .card-back-unlock-card {
  opacity: 1;
  transform: scale(1);
}

#card-back-unlock-modal.card-back-collection-preview .card-back-unlock-card {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  height: min(46rem, calc(100dvh - 48px));
  overflow: hidden;
}

#card-back-unlock-modal.card-back-collection-preview .card-back-unlock-preview {
  width: min(15rem, 38vw);
  height: 100%;
  min-height: 0;
  padding-bottom: 0.35rem;
  box-sizing: border-box;
}

#card-back-unlock-modal.card-back-collection-preview .card-back-unlock-source {
  min-height: 1.2em;
  line-height: 1.2;
}

.card-back-unlock-close {
  position: absolute;
  z-index: 3;
  top: 0.8rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid rgba(176, 240, 255, 0.22);
  border-radius: 50%;
  color: rgba(218, 240, 243, 0.8);
  background: rgba(0, 18, 28, 0.5);
  font-size: 1.25rem;
  cursor: pointer;
}

.card-back-unlock-kicker {
  display: inline-flex;
  min-height: 1.36rem;
  align-items: center;
  padding: 0.22rem 0.72rem;
  border: 1px solid rgba(51, 214, 195, 0.26);
  border-radius: 999px;
  color: rgba(190, 255, 248, 0.9);
  background: rgba(0, 24, 31, 0.58);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.card-back-unlock-heading {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
}

.card-back-unlock-heading h3 {
  margin: 0;
  color: #fbfbf4;
  font-family: var(--font-display, inherit);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.card-back-unlock-heading span {
  color: rgba(238, 201, 139, 0.95);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card-back-unlock-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: min(15rem, 38vw);
  height: min(21rem, 48vh);
  min-height: 15rem;
  overflow: hidden;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 24px rgba(240, 187, 89, 0.14));
  perspective: 900px;
}

.card-back-unlock-preview::after {
  position: absolute;
  inset: 4% -35%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.22) 49%, transparent 60%);
  content: "";
  opacity: 0;
  transform: translateX(-80%);
}

.card-back-unlock-modal--visible .card-back-unlock-preview::after {
  animation: card-back-unlock-sweep 650ms ease-out 220ms both;
}

.card-back-unlock-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotateY(-1.5deg) rotateX(0.8deg);
  transition: transform 220ms ease-out;
}@media (hover: hover) and (pointer: fine) {


.card-back-unlock-preview:hover img {
  transform: rotateY(1.5deg) rotateX(-0.8deg) scale(1.01);
}
}

.card-back-unlock-source {
  margin: 0;
  color: rgba(176, 240, 255, 0.78);
  font-size: clamp(0.88rem, 1.5vw, 1rem);
}

.card-back-unlock-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 32rem);
  gap: 0.65rem 0.72rem;
  margin-top: 0.1rem;
}

.card-back-unlock-actions .primary-button,
.card-back-unlock-actions .secondary-button {
  min-height: 3rem;
  border-radius: 8px;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 650;
}

.card-back-unlock-actions .primary-button {
  color: #061016;
  border-color: rgba(255, 230, 142, 0.9);
  background: linear-gradient(180deg, #ffd86e, #efad2f);
  box-shadow: 0 0 24px rgba(240, 187, 89, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.card-back-unlock-collection {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 0.35rem 0.75rem;
  border: 0;
  color: rgba(238, 201, 139, 0.94);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@keyframes card-back-unlock-sweep {
  0% { opacity: 0; transform: translateX(-80%); }
  35%, 65% { opacity: 1; }
  100% { opacity: 0; transform: translateX(80%); }
}

@media (max-width: 760px) {
  #card-back-unlock-modal .card-back-unlock-card {
    width: min(100%, calc(100vw - 24px));
    padding: 0.9rem;
    gap: 0.45rem;
  }

  .card-back-unlock-heading h3 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .card-back-unlock-preview { width: min(12rem, 56vw); height: min(17rem, 43vh); min-height: 12rem; }
  #card-back-unlock-modal.card-back-collection-preview .card-back-unlock-preview { width: min(12rem, 56vw); height: 100%; min-height: 0; }
  .card-back-unlock-actions { gap: 0.46rem; }
  .card-back-unlock-actions .primary-button,
  .card-back-unlock-actions .secondary-button { min-height: 2.75rem; padding: 0.5rem; font-size: 0.94rem; }
}

@media (prefers-reduced-motion: reduce) {
  #card-back-unlock-modal .card-back-unlock-card { transition: none; transform: none; }
  .card-back-unlock-preview::after { animation: none !important; opacity: 0; }
  .card-back-unlock-preview img,
  .card-back-unlock-preview:hover img { transition: none; transform: none; }
}

/* Final immersive coach geometry: this follows the fullscreen trainer rules
   so the stage, action bar, and sidebar share one layout transition. */
.coach-teaser {
  right: clamp(32px, 3vw, 48px);
  bottom: calc(5rem + 1.25rem + 24px);
  z-index: 38;
  grid-template-columns: minmax(0, 1fr) 38px;
  width: min(328px, calc(100% - 64px));
  height: 82px;
  min-height: 74px;
  max-height: 86px;
  padding: 8px 10px 8px 0;
  overflow: visible;
  border-color: rgba(215, 168, 88, 0.58);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(12, 29, 40, 0.95), rgba(4, 15, 23, 0.96)),
    rgba(4, 15, 23, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(67, 213, 242, 0.07),
    0 0 0 1px rgba(67, 213, 242, 0.025),
    0 13px 27px rgba(0, 0, 0, 0.38);
  transform: none;
  flex: none;
  isolation: isolate;
  transition: filter 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.coach-teaser::before,
.coach-teaser::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.coach-teaser::before {
  top: 15px;
  left: -15px;
  right: auto;
  bottom: auto;
  z-index: 2;
  width: 16px;
  height: 16px;
  background: rgba(215, 168, 88, 0.62);
  filter: drop-shadow(-3px 3px 4px rgba(0, 0, 0, 0.18));
}

.coach-teaser::after {
  top: 17px;
  left: -11px;
  right: auto;
  bottom: auto;
  z-index: 3;
  width: 12px;
  height: 12px;
  background: #0a202c;
}

.coach-teaser > * {
  position: relative;
  z-index: 2;
}

.lesson-active.session-mode.coach-closing .coach-teaser,
.lesson-active.session-mode.coach-expanded .coach-teaser,
.lesson-active.session-mode.coach-disabled .coach-teaser {
  display: none;
}@media (hover: hover) and (pointer: fine) {
  .coach-teaser:hover {
  border-color: rgba(215, 168, 88, 0.78);
  transform: none;
  filter: brightness(1.04);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 0 0 1px rgba(67, 213, 242, 0.055),
    0 15px 30px rgba(0, 0, 0, 0.42);
}
}

.coach-teaser:focus-visible {
  border-color: rgba(215, 168, 88, 0.78);
  transform: none;
  filter: brightness(1.04);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 0 0 1px rgba(67, 213, 242, 0.055),
    0 15px 30px rgba(0, 0, 0, 0.42);
}

.coach-teaser-avatar {
  position: absolute;
  left: -20px;
  top: 50%;
  z-index: 4;
  width: 66px;
  height: 66px;
  border-width: 2px;
  transform: translateY(-50%);
  box-shadow:
    inset 0 0 0 3px rgba(2, 9, 14, 0.72),
    0 8px 18px rgba(0, 0, 0, 0.38);
}

.coach-teaser-copy {
  align-content: center;
  gap: 4px;
  padding: 0 16px 0 58px;
}

.coach-teaser-copy strong {
  font-size: 0.72rem;
}

.coach-teaser-copy > span {
  overflow: hidden;
  color: rgba(244, 234, 210, 0.92);
  font-size: 0.88rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-teaser-expand {
  place-self: center end;
  width: 38px;
  height: 38px;
  border-color: rgba(215, 168, 88, 0.42);
  color: var(--coach-cyan);
  background: rgba(7, 23, 34, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transform: none;
  transition: transform 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}@media (hover: hover) and (pointer: fine) {
  .coach-teaser:hover .coach-teaser-expand {
  border-color: rgba(67, 213, 242, 0.64);
  transform: translateX(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 14px rgba(67, 213, 242, 0.17);
}
}

.coach-teaser:focus-visible .coach-teaser-expand {
  border-color: rgba(67, 213, 242, 0.64);
  transform: translateX(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 14px rgba(67, 213, 242, 0.17);
}

.coach-teaser:focus-visible .coach-teaser-expand {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(67, 213, 242, 0.13),
    0 0 14px rgba(67, 213, 242, 0.17);
}

.coach-teaser:active .coach-teaser-expand {
  transform: translateX(2px) scale(0.96);
}

.lesson-active {
  --coach-sidebar-width: 400px;
  --coach-sidebar-track: 412px;
}

.lesson-active .scenario-card {
  transition: right 240ms ease-out;
}

.lesson-active .trainer-stage {
  position: absolute;
  inset: 0;
  width: auto;
  min-width: 0;
  overflow: visible;
  transition: right 240ms ease-out, width 240ms ease-out;
}

.lesson-active .trainer-stage .table-visual {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Work order 9 part B: this rule had no min-width guard, so on a mobile viewport (the coach dock
   is a full-width bottom sheet there, not a docked side panel -- see the max-width:650px block
   below) it still pushed .scenario-card's right edge in by --coach-sidebar-track (392px at
   <=900px window width). With `left: 0` and no explicit width, that leaves the box's computed
   width at max(0, viewport - 0 - 392px) -- zero or negative on any phone -- collapsing
   #table-visual (which fills .scenario-card via .trainer-stage's inset:0) to zero width and
   making the entire table disappear behind solid black the instant the coach dock opened.
   Confirmed live via getBoundingClientRect() at 375px width: right:392px, width:0px. Reusing the
   exact @media (min-width: 651px) guard the .feedback-band rule below already has -- the mobile
   bottom sheet covers the table from below without needing to narrow or reposition it at all. */
@media (min-width: 651px) {
  .lesson-active.coach-expanded .scenario-card {
    right: var(--coach-sidebar-track);
  }
}

.lesson-active .coach-sidebar,
.lesson-active.session-mode .coach-sidebar {
  position: fixed;
  z-index: 44;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: flex;
  width: var(--coach-sidebar-width);
  max-height: none;
  pointer-events: none;
  transform: translateX(28px);
  transition: opacity 240ms ease-out, transform 240ms ease-out, visibility 240ms ease-out;
}

.lesson-active.coach-expanded .coach-sidebar {
  pointer-events: auto;
  transform: translateX(0);
}

.lesson-active.session-mode.coach-disabled .coach-sidebar {
  display: none;
}

.lesson-active .answer-grid {
  transition: left 240ms ease-out, width 240ms ease-out;
}

/* Same unguarded-desktop-rule bug as .scenario-card above, and the same fix: these three rules
   narrowed/recentred the answer grid using --coach-sidebar-track's docked-panel width on every
   viewport, which on a phone (where the answer grid is already full-width, and the coach dock is
   a bottom sheet rather than a side panel) squeezed it to a negative/zero width and pushed it
   off-screen -- confirmed live at 375px: left:-8.5px, width:0px. */
@media (min-width: 651px) {
  .lesson-active.coach-expanded .answer-grid {
    left: calc((100vw - var(--coach-sidebar-track)) / 2);
    width: min(920px, calc(100vw - var(--coach-sidebar-track) - 2rem));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-active.coach-expanded .answer-grid--preflop-range.answer-grid--three-actions,
  .lesson-active.coach-expanded .answer-grid--pluribus-replay.answer-grid--three-actions {
    width: min(1120px, calc(100vw - var(--coach-sidebar-track) - 2rem));
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lesson-active.coach-expanded .answer-grid--pluribus-replay.answer-grid--four-actions {
    width: min(1120px, calc(100vw - var(--coach-sidebar-track) - 2rem));
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lesson-active.coach-expanded .feedback-band {
    left: calc((100vw - var(--coach-sidebar-track)) / 2);
    width: min(920px, calc(100vw - var(--coach-sidebar-track) - 2rem));
  }
}

/* The range table (#gto-modal) is a viewport-fixed overlay with no awareness of the coach
   sidebar, which is also fixed/pinned on top (z-index 44 above the modal's 30) -- opening the
   range table while the coach sidebar is expanded left the chart's right columns and the "Back
   to Lesson" button rendered underneath the sidebar. Same fix as .feedback-band/.answer-grid
   above: re-center within the space the sidebar leaves, using the same --coach-sidebar-track.
   Work order 9 part B: also found unguarded here, same bug shape and same fix as .scenario-card/
   .answer-grid above -- .modal's own base rule is `inset: 0` (left:0 included), so on a mobile
   viewport this `right: 392px` collapsed the modal to zero width exactly the same way, making the
   range table unusable if opened while the coach dock (a bottom sheet on mobile, not a side
   panel) is expanded. Not separately field-reported, but the identical root cause found while
   fixing the other two -- guarded the same way rather than left broken next to its own fix. */
@media (min-width: 651px) {
  .lesson-active.coach-expanded #gto-modal {
    right: var(--coach-sidebar-track);
  }

  .lesson-active.coach-expanded #gto-modal.preflop-range-modal .modal-card {
    --range-chart-size: min(698px, calc(100vw - var(--coach-sidebar-track) - 3rem), calc(100svh - 12rem));
  }
}

@media (max-width: 900px) {
  .lesson-active {
    --coach-sidebar-width: 380px;
    --coach-sidebar-track: 392px;
  }
}

/* Work order 8, part D2: the real, currently-winning coach-sidebar positioning is this file's
   unconditional ".lesson-active .coach-sidebar, .lesson-active.session-mode .coach-sidebar" rule
   above (the "docked sidebar" system, `--coach-sidebar-width`/`--coach-sidebar-track`) -- traced
   live via getComputedStyle plus a full matched-rule walk before writing anything here, since an
   older, width-scoped ".coach-sidebar" block still sits in this file (search "iOS coach-dock
   keyboard hardening" further up) claiming a docked right-side panel at up to 350px wide with its
   own top+bottom positioning. That older block is dead code on every real screen size: its
   selectors tie the docked system's own specificity (three classes each), and the docked system's
   rules are declared later in the file, so cascade order always resolves in the docked system's
   favour regardless of viewport -- confirmed by asking the live browser which CSSOM rule actually
   won, not by reading source order alone. That includes --coach-dock-keyboard-inset (app.js's
   initCoachDockKeyboardOffset, work order 5 item 40): the only rule that ever referenced it was
   the dead block, so on a real phone the iOS keyboard offset it computes was never actually
   applied by any CSS -- confirmed live, the owner's own screenshot showing the input correctly
   clear of the keyboard is Safari's own newer position:fixed-vs-visual-viewport handling, not
   this app's mechanism. This block is therefore the one that must carry the fix, and is the one
   that now actually consumes --coach-dock-keyboard-inset.
   Owner-approved design (2026-08-11): a full-width bottom sheet on mobile, replacing the narrow
   right-docked panel that used to leave a ~32px sliver of the table down the left edge (350px
   panel on a 390px viewport) with seat pills squeezed unreadable behind it. Dropping `top` (rather
   than setting `top: auto` alongside a still-present `bottom`) is deliberate: this system's own
   base rule sets both `top` and `bottom` with no explicit `height`, which stretches a fixed-
   position box with `height: auto` to fill the full gap between them -- confirmed live as the
   actual cause of the near-full-height panel and the large dead gap between the quick-question
   chips and the input field the field screenshot showed (.coach-chat-thread's own `flex: 1` had
   nothing to grow against once the sheet's real content-driven height was this large). Setting
   only `bottom` here removes `top` from the box's own positioning scheme entirely, so height goes
   back to being intrinsic (sum of visible children) up to the `max-height` cap below -- the sheet
   now hugs its real content instead of always filling the screen. */
@media (max-width: 650px) {
  .lesson-active .coach-sidebar,
  .lesson-active.session-mode .coach-sidebar,
  .lesson-active.coach-expanded .coach-sidebar {
    top: auto;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom) + var(--coach-dock-keyboard-inset, 0px));
    width: 100%;
    /* Work order 9 part B: the static `min(68dvh, calc(100dvh - 4.5rem))` cap doesn't shrink for
       an open iOS keyboard (dvh reports the same value with or without one), yet `bottom` above
       already gets pushed up by the keyboard's own height via --coach-dock-keyboard-inset -- so
       on a short device with the keyboard up, the two together could ask for a sheet taller than
       the space actually left above the keyboard. --coach-dock-max-height is written by
       initCoachDockKeyboardOffset() (app.js) from window.visualViewport.height, the one API that
       reports what's actually visible with a keyboard open, reserving the same ~4.5rem this rule
       used to hardcode so the table stays visible above the sheet either way. The 68dvh cap is
       kept as the ordinary (no-keyboard) ceiling and as the pre-JS/no-visualViewport fallback. */
    max-height: min(68dvh, var(--coach-dock-max-height, calc(100dvh - 4.5rem)));
    border-radius: 20px 20px 0 0;
    transform: translateY(18px);
  }

  .lesson-active.coach-expanded .coach-sidebar {
    transform: translateY(0);
  }

  .lesson-active.coach-expanded .coach-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .lesson-active.coach-closing .coach-backdrop {
    display: block;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  /* The feedback-band's own z-index (33) sits below the coach dock's (40) by design, but nothing
     previously hid it while the dock was expanded -- its translucent background let the
     View Range Table / Next Hand buttons show through, dimmed, floating in the middle of the
     coach panel (confirmed live, the same screenshot that surfaced part D2's sizing tension).
     Hidden outright rather than just dimmed further, since it sits entirely behind the now
     full-width sheet at this width and has nothing useful to contribute while covered. */
  .lesson-active.coach-expanded .feedback-band {
    display: none;
  }

  /* Work order 9 part B: reproduced live (375x667, a real graded decision plus a real chat
     exchange) -- .coach-sidebar's content (avatar/heading, the Coach's Take and Why cards, the
     chat thread) routinely exceeds the sheet's own max-height cap well before a player ever asks
     a question, so the panel opens already scrolled to its top with the input field -- the one
     control that actually lets a player use the feature -- sitting below the fold of the panel's
     own internal `overflow: hidden auto` scroll, with no visual hint that scrolling further is
     possible. Pinning the input to the bottom of that scroll area (position: sticky, the standard
     sticky-footer pattern; .coach-sidebar is both the flex container and the nearest scrolling
     ancestor, so this works without restructuring the DOM) makes it the one thing always visible
     regardless of how much analysis/chat content is above it -- the brief's own #1 priority.
     Quick-question chips are left in normal scroll flow, immediately above the now-pinned input --
     one short scroll away rather than buried under the full analysis-plus-history, and not worth
     a second stacked sticky layer (its own height varies with chip text length/wrapping, which a
     hardcoded stacked offset can't track safely). The negative margin/matching padding bleeds the
     footer to the sheet's own edges (same 1.05rem the base .coach-sidebar rule pads with) so it
     reads as an anchored footer, not a floating control with gaps beside it. */
  .lesson-active .coach-sidebar .coach-input {
    position: sticky;
    bottom: env(safe-area-inset-bottom);
    z-index: 2;
    flex-shrink: 0;
    margin-top: 0.6rem;
  }

  /* A soft fade behind the now-pinned pill, not a hard bar -- keeps the pill's own existing
     shape/border untouched (no doubled borders) while stopping scrolled content from visibly
     cutting off flush against it. .coach-input's own `position: sticky` above already makes it
     the containing block this pseudo-element's `inset` resolves against. */
  .lesson-active .coach-sidebar .coach-input::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -0.6rem -1.05rem calc(-1 * env(safe-area-inset-bottom) - 1.05rem);
    background: linear-gradient(180deg, transparent, var(--coach-surface) 55%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-active .scenario-card,
  .lesson-active .trainer-stage,
  .lesson-active .answer-grid,
  .lesson-active .coach-sidebar,
  .coach-teaser-expand {
    transition-duration: 0.01ms;
  }
}

/* Expanded coach only: keep the established full-width plaque calibration,
   but derive its seat-label spacing from the compressed table container. */
.lesson-active.coach-expanded .table-visual {
  container-type: inline-size;
}

.lesson-active.coach-expanded .seat-node {
  transform: translate(-50%, clamp(52px, 5.1cqw, 68px));
  min-width: clamp(58px, 4.7cqw, 74px);
}

.lesson-active.coach-expanded .seat-status-text,
.lesson-active.coach-expanded .seat-caption {
  min-height: clamp(1.3rem, 1.35cqw, 1.45rem);
  font-size: clamp(0.64rem, 0.72cqw, 0.76rem);
}

/* Collapsed coach state system: portrait dock at rest, timed insight after a
   decision, and the existing sidebar when expanded. */
.coach-teaser {
  display: none;
  grid-template-columns: none;
  width: 58px;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  filter: none;
  isolation: isolate;
  transition: width 160ms ease-out, filter 160ms ease-out;
}

.coach-teaser::before,
.coach-teaser::after {
  content: none;
}

.lesson-active.session-mode:not(.coach-expanded):not(.coach-closing):not(.coach-disabled) .coach-teaser {
  display: block;
}@media (hover: hover) and (pointer: fine) {
  .coach-teaser:hover {
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  filter: none;
}
}

.coach-teaser:focus-visible {
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.coach-teaser-avatar {
  position: absolute;
  top: 50%;
  right: 0;
  left: auto;
  z-index: 4;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(215, 168, 88, 0.72);
  transform: translateY(-50%);
  box-shadow:
    inset 0 0 0 3px rgba(2, 9, 14, 0.72),
    0 7px 16px rgba(0, 0, 0, 0.36);
  transition: transform 120ms ease-out, border-color 150ms ease-out, filter 150ms ease-out, box-shadow 150ms ease-out;
}@media (hover: hover) and (pointer: fine) {


.coach-teaser:hover .coach-teaser-avatar {
  border-color: rgba(235, 194, 117, 0.9);
  filter: brightness(1.05);
}
}

.coach-teaser:focus-visible .coach-teaser-avatar {
  border-color: rgba(67, 213, 242, 0.68);
  box-shadow:
    inset 0 0 0 3px rgba(2, 9, 14, 0.72),
    0 0 0 3px rgba(67, 213, 242, 0.15),
    0 7px 16px rgba(0, 0, 0, 0.36);
}

.coach-teaser:active .coach-teaser-avatar {
  transform: translateY(-50%) scale(0.96);
}

.coach-dock-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(215, 168, 88, 0.72);
  border-radius: 50%;
  background: #071722;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.32);
}

.coach-dock-status::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #43d5f2;
  box-shadow: 0 0 7px rgba(67, 213, 242, 0.42);
}

/* Premium: the compact dock's badge mirrors the sidebar's own locked state (gold, not the
   default blue "active" dot) once the free daily limit is hit -- same signal, smaller surface. */
.coach-dock-status.coach-dock-status--locked {
  border-color: var(--coach-gold);
  background: rgba(215, 168, 88, 0.16);
}

.coach-dock-status.coach-dock-status--locked::after {
  /* A raw emoji glyph carried its own fixed colours/padding and didn't fit inside a 17px circular
     badge; a stroked outline SVG (thin paths) also didn't hold up shrunk to icon-badge size --
     blurred/clipped into a squarish blob. A single filled silhouette (Material Design's "lock"
     glyph, no strokes to distort when scaled) renders cleanly at this size instead. */
  content: "";
  width: 10px;
  height: 10px;
  background: none;
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d7a858' d='M12 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-9h-1V6a5 5 0 0 0-10 0v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zM8.9 6a3.1 3.1 0 0 1 6.2 0v2H8.9V6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.coach-teaser-copy {
  position: absolute;
  top: 50%;
  right: 48px;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 2px;
  width: 260px;
  height: 60px;
  padding: 8px 18px 8px 14px;
  overflow: hidden;
  border: 1px solid rgba(215, 168, 88, 0.48);
  border-radius: 13px 5px 5px 13px;
  background: linear-gradient(90deg, rgba(7, 23, 34, 0.96), rgba(4, 17, 26, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(67, 213, 242, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.34);
  opacity: 0;
  visibility: hidden;
  transform: translate(10px, -50%) scaleX(0.92);
  transform-origin: right center;
  transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms;
}

.coach-feedback .coach-teaser {
  width: 318px;
  transition-duration: 200ms;
}

.coach-feedback .coach-teaser-copy {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%) scaleX(1);
  transition-duration: 200ms;
}

.coach-teaser-copy strong {
  color: var(--coach-gold);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.coach-teaser-copy > span {
  color: rgba(244, 234, 210, 0.92);
  font-size: 0.86rem;
  line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  .coach-teaser,
  .coach-teaser-copy {
    transition-duration: 0.01ms;
  }

  .coach-teaser-copy,
  .coach-feedback .coach-teaser-copy {
    transform: translate(0, -50%);
  }
}

/* Below 860px the action bar (.lesson-active .answer-grid) stacks into 2-4 full-width rows
   instead of one, so the collapsed dock's fixed `bottom` offset -- sized for a single-row bar --
   lands on top of the action buttons (worst case, directly over Fold) instead of above them.
   Anchoring under the topbar instead of over the action bar sidesteps the action-row-count
   problem entirely, since the topbar's height doesn't change with how many actions are legal. */
@media (max-width: 860px) {
  .lesson-active.session-mode .coach-teaser {
    top: 5.25rem;
    bottom: auto;
  }
}

/* Today's Drill daily loop: the "Retry Mistakes" button (index.html #retry-misses-button) is
   a third modal-actions button shown only when a mistake is due (see applyRetryMissesButtonState
   in app.js). Every #summary-modal .modal-actions rule above sizes for exactly two buttons; rather
   than touch each breakpoint, this single rule (last in source order, and :has() gives it higher
   specificity than any of them) widens the row to fit a third button only when it's actually
   visible, so the two-button layout is unaffected everywhere else. */
#summary-modal .modal-actions:has(#retry-misses-button:not(.hidden)) {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 13rem));
  width: min(100%, 44rem);
}

/* ---------------------------------------------------------------------------------------------
   First-use onboarding funnel
   --------------------------------------------------------------------------------------------- */

/* #scenario-card/#feedback-band go [inert] while the onboarding table overlay is up (app.js's
   showOnboardingTableOverlay/hideOnboardingTableOverlay) -- paired with visibility here so the
   idle table's FORMAT/SESSION/ENGINE/COVERAGE fact grid and "Retry Misses"/"Format XP" answer-grid
   copy are never visible at all, rather than relying solely on the overlay's own vignette staying
   opaque all the way to the far corners at every viewport size (it doesn't, at very wide/short
   ones, letting this placeholder marketing text show through in the shadows). */
#scenario-card[inert],
#feedback-band[inert] {
  visibility: hidden;
}

/* In-table onboarding: a designed welcome card overlaying the trainer table. position: fixed
   across the whole viewport (not absolute within .scenario-panel) -- .lesson-active .feedback-band
   is itself position: fixed with z-index: 33 (it floats near the bottom of the screen independent
   of .scenario-panel's own box, by design, so the Continue pill stays reachable during ordinary
   play), so anything short of matching that positioning and outranking that z-index gets bled
   through by it, found live at a narrow viewport where the card grows tall enough to sit right
   over where that pill renders. z-index 40 clears it (and stays well under the real account
   modal's 10000, so Sign in still opens on top of this). A restrained vignette -- darkening toward
   the card, not a flat scrim or heavy blur -- keeps the felt and dealt cards genuinely visible at
   the margins instead of muddying them. */
.onboarding-table-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  overflow-y: auto;
  /* Strong enough everywhere behind the card that nothing underneath is ever legible through it,
     however tall the card gets at a narrow viewport -- the vignette only lightens toward the far
     corners, well clear of the card, which is where "keep the table visible" actually shows
     through. */
  background:
    radial-gradient(ellipse 90% 85% at 50% 50%, rgba(2, 7, 12, 0.94), rgba(2, 7, 12, 0.88) 60%, rgba(2, 7, 12, 0.6) 100%);
}

.onboarding-table-overlay.hidden {
  display: none;
}

/* Deep navy/black base with a quiet gold glow from above -- the same card language the Premium
   modal already established (radial gold wash + near-black gradient), not a second visual system.
   A soft outer glow stands in for a harsh box-shadow "browser modal" edge. */
.onboarding-table-overlay-card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.7rem;
  width: min(560px, 85vw);
  padding: 2.4rem 2.75rem;
  border: 1px solid rgba(240, 187, 89, 0.22);
  border-radius: 1.4rem;
  background:
    radial-gradient(ellipse at 50% -8%, rgba(240, 187, 89, 0.16), transparent 52%),
    radial-gradient(ellipse at 8% 100%, rgba(124, 238, 228, 0.07), transparent 45%),
    linear-gradient(160deg, rgba(10, 30, 44, 0.97), rgba(2, 8, 14, 0.99));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(2, 7, 12, 0.4);
  text-align: center;
}

.onboarding-overlay-mark {
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 0.2rem;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(240, 187, 89, 0.35));
}

.onboarding-overlay-eyebrow {
  margin: 0;
  color: var(--gold-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.onboarding-overlay-headline {
  margin: 0.25rem 0 0;
  max-width: 21ch;
  color: var(--text);
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

.onboarding-overlay-subtext {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.onboarding-overlay-actions {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  width: 100%;
  margin-top: 0.3rem;
}

/* The CTA is a supplied image asset (the mark/label/arrow/frame/glow are all baked into its
   pixels), not a CSS-built button -- this rules out redrawing/recolouring it, so the button
   element itself carries no visual styling of its own beyond being a transparent, borderless
   click target sized around the image. The asset's own canvas is far taller than its visible
   button bar (a wide soft gold-glow bloom is baked in above and below the bar by design -- see
   the status report for the measured alpha bounds), so displaying it at its natural aspect ratio
   intentionally reserves that glow space rather than cropping or squashing it away; the negative
   margins below pull the surrounding headline/subtext and Sign-in/Skip-intro row back into that
   reserved space so the card doesn't inherit the asset's own empty canvas margin twice over. */
.onboarding-overlay-primary-asset-button {
  position: relative;
  display: block;
  width: min(84%, 600px);
  margin: -5.5rem auto -6.6rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  line-height: 0;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}

.onboarding-overlay-primary-asset {
  display: block;
  width: 100%;
  height: auto;
}@media (hover: hover) and (pointer: fine) {


.onboarding-overlay-primary-asset-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
}

.onboarding-overlay-primary-asset-button:focus-visible {
  outline: none;
  filter: brightness(1.08);
}

/* A ring on the button's own box would trace the full image canvas -- mostly transparent glow
   bloom, far taller/wider than the visible plaque (see the comment above), which would overlap the
   headline and spill past the card. Instead this pseudo-element is positioned by percentage against
   the plaque's own measured bounds within that canvas (solid content spans roughly y 36%-56%,
   x 13%-87% of the source PNG), so the ring hugs the visible button rather than the asset's outer
   edge. */
.onboarding-overlay-primary-asset-button:focus-visible::after {
  content: "";
  position: absolute;
  top: 33%;
  bottom: 41%;
  left: 10%;
  right: 10%;
  border-radius: 4px;
  box-shadow:
    0 0 0 3px rgba(2, 7, 12, 0.85),
    0 0 0 5px var(--teal-soft),
    0 0 0 8px rgba(240, 187, 89, 0.55);
  pointer-events: none;
}

.onboarding-overlay-primary-asset-button:active {
  transform: translateY(1px);
  filter: brightness(0.9);
}

.onboarding-overlay-secondary-row {
  /* .onboarding-overlay-primary-asset-button's large negative margins (see its own comment above)
     deliberately let its image's bounding box -- mostly transparent glow bloom, but still a real
     hit-testable rectangle -- overlap this row so the layout reads as compact. Because that button
     is `position: relative`, it paints (and receives clicks) above this plain, non-positioned row
     regardless of DOM order, which silently ate every click on Sign in/Skip intro within the
     overlap and routed it to Start 3-Hand Intro instead. position+z-index here puts this row back
     on top without touching the button/image at all. */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.onboarding-overlay-secondary-divider {
  color: rgba(176, 214, 228, 0.4);
  font-size: 0.5rem;
}

.onboarding-skip-link {
  padding: 0.3rem 0.15rem;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 140ms ease;
}@media (hover: hover) and (pointer: fine) {


.onboarding-skip-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
}

.onboarding-skip-link:focus-visible {
  color: var(--text);
  outline: 2px solid var(--teal-soft);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .onboarding-table-overlay-card {
    padding: 2rem 1.4rem 1.6rem;
    gap: 0.6rem;
    width: min(92vw, 420px);
  }

  .onboarding-overlay-headline {
    font-size: 1.55rem;
    line-height: 1.25;
    margin-top: 0.2rem;
  }

  .onboarding-overlay-subtext {
    font-size: 0.9rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }

  .onboarding-overlay-actions {
    gap: 0.6rem;
    margin-top: 0.4rem;
  }

  .onboarding-overlay-primary-asset-button {
    margin: -1.5rem auto -1.8rem;
    width: min(92%, 340px);
  }

  .onboarding-overlay-secondary-row {
    gap: 0.75rem;
    margin-top: 0.2rem;
  }
}

/* Item 3's per-answer explanation panel -- reuses the same visual language as .feedback-band
   rather than inventing a new one, sits directly beneath it, and is only ever unhidden/populated
   by answerOnboardingIntroQuestion() in app.js. */
.onboarding-intro-explanation {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.7rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(240, 187, 89, 0.28);
  border-radius: 0.75rem;
  background: rgba(240, 187, 89, 0.07);
}

.onboarding-intro-explanation.hidden {
  display: none;
}

.onboarding-intro-explanation-label {
  color: var(--gold-strong);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#onboarding-intro-explanation-text {
  margin: 0;
  color: rgba(238, 251, 255, 0.92);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Item 3: hide normal session statistics during the intro -- Elo/XP/streak/rank in the dashboard
   header are already hidden by .lesson-active (enterLessonMode() hides .app-topbar entirely); this
   covers what's left visible inside the trainer view itself. */
body.onboarding-intro-active #mistake-counter {
  display: none;
}

/* Hand-one-only guidance (showOnboardingHandGuidance/clearOnboardingHandGuidance in app.js) --
   hands two and three get neither the prompt nor the highlight, per the "reduce guidance" rule. */
.onboarding-hand-prompt {
  margin: -0.3rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.onboarding-hand-prompt.hidden {
  display: none;
}

.answer-grid.onboarding-highlight-actions {
  animation: onboardingHighlightPulse 1.8s ease-in-out infinite;
  border-radius: 0.85rem;
}

@keyframes onboardingHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 187, 89, 0); }
  50% { box-shadow: 0 0 0 4px rgba(240, 187, 89, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  .answer-grid.onboarding-highlight-actions {
    animation: none;
    box-shadow: 0 0 0 3px rgba(240, 187, 89, 0.22);
  }
}

/* ---------------------------------------------------------------------------------------------
   Coach-guided spotlight walkthrough (3-hand intro, hands one and two only)
   --------------------------------------------------------------------------------------------- */

/* pointer-events: none on the full-viewport container itself is load-bearing -- without it, this
   box would intercept clicks over its entire inset:0 area (the default for any positioned
   element), including the "hole" where no scrim is drawn, silently blocking the very target
   elements the walkthrough is supposed to leave clickable. Only the scrims and the callout
   opt back into pointer-events: auto below. */
.walkthrough-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.walkthrough-layer.hidden {
  display: none;
}

/* Hides the Coach dock outright (not just its collapsed resting form) while the walkthrough's own
   answer-feedback callout is showing -- toggled from app.js's
   setOnboardingWalkthroughCoachDockHidden(). Without this, the dock's own auto-triggered "your
   local result is ready" pill (fired unconditionally right after every answer) pops up a second,
   redundant correct/incorrect indicator alongside the walkthrough's own explanation. !important
   because .coach-teaser already carries its own display:block/none rules keyed off
   .lesson-active/.session-mode/.coach-expanded/etc, all of which this must override regardless of
   which of those states is active underneath. */
.coach-teaser.onboarding-walkthrough-coach-dock-hidden {
  display: none !important;
}

/* Intro-only highlight on the Continue/Next Hand/See Summary button once it becomes pressable --
   teaches a brand-new player where to go next. Scoped to body.onboarding-intro-active rather than
   the general .continue-button--ready class the rest of the app also uses: a first attempt
   animated box-shadow there and it silently never rendered, traced to
   .lesson-active .feedback-actions .secondary-button's own pre-existing
   `box-shadow: none !important` (a deliberate rule for the asset-shell buttons, not something to
   fight). filter: drop-shadow() isn't touched by that rule at all, and traces the actual visible
   plaque-art pixels rather than the button's full (partly transparent-canvas) bounding box, so it
   reads correctly against the asset shell. #continue-button's own id keeps specificity high
   enough to hold against .mini-control-button's own rules too.
   No size pulsing/brightness flashing (an earlier attempt did both and read as too busy) -- a
   constant-strength glow whose light source slowly orbits the button's frame instead, calmer but
   still clearly alive.
   :not(.onboarding-walkthrough-spotlight-active) holds the glow off entirely while any spotlight
   step is still on screen -- the button can already be "ready" during hand one's own post-answer
   sequence (graded the instant an answer lands, before that sequence's own callout ever shows),
   and starting the glow then competed with the spotlight's own callout for attention. app.js
   toggles that class alongside the walkthrough layer's own hidden state
   (renderOnboardingWalkthroughSpotlight/hideOnboardingWalkthroughSpotlight), so the glow only
   ever starts once every spotlighted state for the current hand is actually gone.
   The second selector below is the one deliberate exception: once the walkthrough's own ending
   step spotlights this exact button (.onboarding-walkthrough-target-active, toggled in the same
   two functions), the glow runs *alongside* the focus ring instead of waiting for it to close --
   here the ring and the button are the same object, so the glow reinforces "click this" rather
   than competing with a separate target. */
body.onboarding-intro-active:not(.onboarding-walkthrough-spotlight-active) #continue-button.continue-button--ready,
body.onboarding-intro-active #continue-button.continue-button--ready.onboarding-walkthrough-target-active {
  animation: onboarding-continue-button-glow-orbit 2.6s linear infinite;
}

@keyframes onboarding-continue-button-glow-orbit {
  0%   { filter: drop-shadow(0 -7px 9px rgba(239, 190, 96, 0.75)); }
  25%  { filter: drop-shadow(7px 0 9px rgba(239, 190, 96, 0.75)); }
  50%  { filter: drop-shadow(0 7px 9px rgba(239, 190, 96, 0.75)); }
  75%  { filter: drop-shadow(-7px 0 9px rgba(239, 190, 96, 0.75)); }
  100% { filter: drop-shadow(0 -7px 9px rgba(239, 190, 96, 0.75)); }
}

@media (prefers-reduced-motion: reduce) {
  body.onboarding-intro-active:not(.onboarding-walkthrough-spotlight-active) #continue-button.continue-button--ready,
  body.onboarding-intro-active #continue-button.continue-button--ready.onboarding-walkthrough-target-active {
    animation: none;
    filter: drop-shadow(0 0 10px rgba(239, 190, 96, 0.65));
  }
}

/* Four fixed regions frame the spotlight "hole" rather than one giant box-shadow -- each region
   is repositioned in JS (onboarding-walkthrough glue in app.js) from the real target element's
   getBoundingClientRect() on every render/resize/scroll, so the opening always lines up exactly
   with the current target regardless of viewport size. ~55% dim, not opaque -- the table stays
   legible behind it. pointer-events: auto blocks interaction everywhere the scrim actually
   covers; the opening itself has no scrim element over it at all, so the real control underneath
   stays natively clickable/focusable with no extra wiring. */
.walkthrough-scrim {
  position: fixed;
  background: rgba(1, 4, 7, 0.55);
  pointer-events: auto;
  transition: top 160ms ease, left 160ms ease, width 160ms ease, height 160ms ease;
}

.walkthrough-focus-ring {
  position: fixed;
  border-radius: 0.85rem;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(240, 187, 89, 0.85),
    0 0 0 4px rgba(67, 213, 242, 0.28),
    0 0 26px rgba(67, 213, 242, 0.22);
  transition: top 160ms ease, left 160ms ease, width 160ms ease, height 160ms ease;
}

/* The premium Coach callout: deep navy glass, an antique-gold frame, a restrained cyan inner
   edge, and the turtle portrait overlapping the panel's top edge -- reusing the exact
   --coach-gold/--coach-cream/--coach-surface tokens and gold/cyan rgba values the real Coach
   sidebar (.coach-sidebar, .coach-teaser) already establishes, not a second visual system.
   Deliberately not a rounded white/generic tooltip pill. */
.walkthrough-callout {
  position: fixed;
  z-index: 2;
  /* Explicit, not inherited -- .walkthrough-layer above is pointer-events: none so the spotlight
     "hole" stays clickable, and pointer-events is an inherited property, so without this the
     Skip/Next buttons inside would silently inherit "none" and stop working. */
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: min(340px, calc(100vw - 24px));
  padding: 1.1rem 1.2rem 1.05rem 1.6rem;
  border: 1px solid rgba(215, 168, 88, 0.6);
  border-radius: 1.1rem;
  color: var(--coach-cream, #f4ead2);
  background:
    radial-gradient(circle at 12% 0%, rgba(67, 213, 242, 0.1), transparent 40%),
    linear-gradient(150deg, rgba(11, 30, 42, 0.98), rgba(3, 11, 17, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(67, 213, 242, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 48px rgba(0, 0, 0, 0.5);
  visibility: hidden;
}

.walkthrough-callout-portrait {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  margin: -1.55rem 0 0 -1.85rem;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}

.walkthrough-callout-body {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding-left: 0.35rem;
}

/* Only the intro's closing "ending" step ever populates this (see app.js's
   renderOnboardingWalkthroughSpotlight/opts.headline) -- every other walkthrough step leaves it
   .hidden, the same generic display:none utility class the rest of the app already uses. */
.walkthrough-callout-headline {
  display: block;
  color: var(--gold-strong, #f6cf7c);
  font-family: Georgia, serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}

.walkthrough-callout-text {
  margin: 0;
  color: var(--coach-cream, #f4ead2);
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.45;
  text-wrap: balance;
}

.walkthrough-callout-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.walkthrough-skip-button {
  padding: 0.2rem 0;
  border: none;
  background: none;
  color: rgba(244, 234, 210, 0.56);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {
  .walkthrough-skip-button:hover {
  color: rgba(244, 234, 210, 0.9);
  outline: none;
}
}

.walkthrough-skip-button:focus-visible {
  color: rgba(244, 234, 210, 0.9);
  outline: none;
}

.walkthrough-next-button {
  padding: 0.4rem 1.05rem;
  border: 1px solid rgba(240, 187, 89, 0.7);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-strong, #f6cf7c), var(--gold, #f0bb59));
  color: #1b1204;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
}

.walkthrough-next-button.hidden {
  display: none;
}@media (hover: hover) and (pointer: fine) {


.walkthrough-next-button:hover {
  filter: brightness(1.06);
}
}

.walkthrough-next-button:focus-visible,
.walkthrough-skip-button:focus-visible {
  outline: 2px solid rgba(67, 213, 242, 0.85);
  outline-offset: 2px;
}

.walkthrough-next-button:active {
  transform: translateY(1px);
}

/* Small pointer aimed at the target, rotated per placement (set as [data-placement] on the
   callout by the positioning logic in app.js). Positioned along the callout's near edge at the
   target's own on-axis center (also computed in JS), clamped so it never falls off the card. */
.walkthrough-callout-pointer {
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgb(9, 24, 34);
  border: 1px solid rgba(215, 168, 88, 0.6);
  border-right: none;
  border-bottom: none;
  pointer-events: none;
}

.walkthrough-callout[data-placement="bottom"] .walkthrough-callout-pointer {
  top: -8px;
  transform: translateX(-50%) rotate(45deg);
}

.walkthrough-callout[data-placement="top"] .walkthrough-callout-pointer {
  bottom: -8px;
  top: auto;
  transform: translateX(-50%) rotate(225deg);
}

.walkthrough-callout[data-placement="right"] .walkthrough-callout-pointer {
  left: -8px;
  transform: translateY(-50%) rotate(-45deg);
}

.walkthrough-callout[data-placement="left"] .walkthrough-callout-pointer {
  right: -8px;
  left: auto;
  transform: translateY(-50%) rotate(135deg);
}

@media (max-width: 620px) {
  .walkthrough-callout {
    padding: 1rem 1.05rem 1rem 1.5rem;
  }

  .walkthrough-callout-portrait {
    width: 46px;
    height: 46px;
    margin: -1.3rem 0 0 -1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .walkthrough-scrim,
  .walkthrough-focus-ring {
    transition: none;
  }
}

/* Work order 10 item 10: no @media (orientation: landscape) rule existed anywhere in this file
   before this block -- the whole app had only ever been laid out for portrait. Audited every
   screen at 844x390 (a landscape phone) first, per the brief's own instruction, before writing
   any of this:
   - Every dashboard subview (Dashboard/Train/Quests/Review/Settings) shares one header
     (.fk-menu-rail: brand row, a 2-row 7-item nav grid, and the signed-in profile summary card)
     that measured ~340px tall on its own -- 87% of the 390px viewport -- before any of that
     screen's own content appeared. Not a per-screen problem; one shared component eating the
     whole visible area on every screen alike.
   - The table (Preflop Trainer/Full Hand Practice) was the worst single defect: .lesson-active
     .answer-grid is position:fixed with a flat `bottom: 1.25rem` offset that doesn't reserve any
     matching space in the table's own layout, so at 390px total height the bottom-row seats'
     normal percentage-based position lands directly under the fixed decision buttons -- confirmed
     live, the buttons visibly covered BB's and SB's own seat pills and status text.
   Fixed both, matched to what the audit actually found broken rather than a full landscape
   redesign of every screen's own internal content (Quests' card grid, Review's list, etc. still
   scroll more than a landscape screen ideally would, disclosed rather than silently expanded into
   scope). max-height alongside orientation, not orientation alone: a landscape TABLET has the
   header's normal room and shouldn't be compacted just for being sideways. */
@media (orientation: landscape) and (max-height: 500px) {
  .fk-menu-rail {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .fk-menu-brand {
    min-height: 0;
  }

  /* Single row instead of the normal 2-row/7-item grid (tuned for a tall tablet/desktop rail,
     not a 390px-tall strip) -- scrolls horizontally in the rare case a narrower landscape width
     can't fit all 7 items, rather than reverting to 2 rows. */
  .fk-menu-nav {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: 0.4rem;
  }

  .fk-menu-nav-item {
    min-height: 2rem;
    padding: 0.3rem 0.6rem;
  }

  /* The signed-in summary card (avatar/level/XP bar) is real information but not essential to
     read at a glance the way the nav itself is -- hidden here rather than shrunk further, since
     shrinking it to fit was already tried mentally and still left less than half the viewport for
     actual page content. Guest sessions never render this card at all, so this is a no-op there. */
  .fk-menu-profile {
    display: none;
  }

  /* Reserves real space for the fixed decision-button row instead of letting the table's own
     seat layout run underneath it. 108px covers the button row's own measured ~77px height plus
     its 1.25rem (fixed) bottom offset and a small safety margin -- the buttons' own position is
     unchanged, this only stops the felt (and the seats positioned as a percentage of it) from
     extending into the space the buttons already occupy. Matches (not just .lesson-active
     .table-visual) .lesson-active .trainer-stage .table-visual's own 3-class specificity --
     that's the rule actually governing #table-visual's inset normally (styles.css, above), and a
     2-class override here would silently lose the cascade to it despite coming later in the
     file. aspect-ratio: auto is load-bearing, not decorative -- the base .table-visual rule's own
     16/9 aspect-ratio otherwise wins over height:auto for an abspos element with both top and
     bottom set (confirmed live: computed height came back 474.75px, exactly 844px * 9/16, not the
     282px "fill the gap between top:0 and bottom:108px" this rule is actually going for). */
  .lesson-active .trainer-stage .table-visual {
    inset: 0 0 108px 0;
    aspect-ratio: auto;
    height: auto;
  }
}

@media (max-width: 768px) {
  /* Prevent vertical scrolling on game view */
  body,
  .game-container,
  .table-view-wrapper {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  /* Ensure Quest Log and subviews explicitly allow vertical scrolling on mobile */
  body:has(.quest-v2-screen:not([hidden])),
  body:has(#quests-screen:not([hidden])),
  body.dashboard-subview-active,
  .quest-v2-screen,
  #quests-screen {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Table area flexes dynamically so it doesn't push action controls off-screen */
  .poker-table-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Ensure button title and subtitle are perfectly centered vertically and horizontally on mobile */
  .answer-button__content,
  .lesson-active .answer-button--asset-shell .answer-button__content,
  .lesson-active .answer-grid .answer-button--asset-shell .answer-button__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    padding: 0.4rem 0.4rem !important;
    transform: none !important;
  }

  .answer-button__title {
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  .answer-button__subtitle {
    margin-top: 0.18rem !important;
    line-height: 1.1 !important;
  }

  /* Remove floating pill badges on mobile */
  .answer-button .answer-button__pill,
  .pill-badge {
    display: none !important;
  }

  /* Remove outer rectangular 1px ring outline box around buttons on mobile when a choice is made */
  .answer-button,
  .answer-button--asset-shell,
  .answer-button.answer-button--resolved,
  .lesson-active .answer-button.answer-button--resolved,
  .lesson-active .answer-button.answer-button--resolved.correct,
  .lesson-active .answer-button.answer-button--missed-correct,
  .answer-button--selected-correct,
  .answer-button--selected-incorrect,
  .answer-button.correct,
  .answer-button.wrong {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Text legibility fix on resolved unselected buttons */
  .lesson-active .answer-button.answer-button--resolved:not(.correct):not(.answer-button--missed-correct) .answer-button__title,
  .lesson-active .answer-button.answer-button--resolved:not(.correct):not(.answer-button--missed-correct) .answer-button__subtitle {
    color: #8fa1a4 !important;
    opacity: 0.85 !important;
  }

  /* Session Grade Summary Modal Refactor (Mobile Only) */
  #summary-modal .modal-card.session-summary-card {
    width: calc(100% - 24px) !important;
    max-width: 400px !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px !important;
    gap: 4px !important;
    margin: auto !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
  }

  #summary-modal .summary-grade-hero {
    margin: 4px 0 !important;
  }

  #summary-modal .summary-grade-image {
    max-width: 78px !important;
    max-height: 78px !important;
  }

  #summary-modal #modal-title {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
    margin: 2px 0 !important;
  }

  #summary-modal #summary-primary-rating {
    margin: 4px 0 !important;
  }

  #summary-modal #modal-rating-value {
    font-size: 2rem !important;
    line-height: 1 !important;
  }

  /* Metrics Panel on Mobile */
  #summary-modal .summary-metrics-panel {
    width: 100% !important;
    gap: 4px !important;
    padding: 4px 0 !important;
    margin: 4px 0 !important;
  }

  #summary-modal .summary-metric-row {
    padding: 2px 4px !important;
  }

  #summary-modal .summary-metric-icon {
    width: 1.3rem !important;
    height: 1.3rem !important;
    margin-right: 0.25rem !important;
  }

  #summary-modal .summary-metric-row strong {
    font-size: 1.3rem !important;
    line-height: 1.1 !important;
  }

  /* Rank Frame Medallion positioning on Mobile - prevent overlapping top metrics */
  #summary-modal .summary-rank-progress {
    margin-top: 4px !important;
  }

  #summary-modal .summary-rank-frame {
    position: relative !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
  }

  #summary-modal .summary-rank-frame span {
    display: none !important;
  }

  #summary-modal .summary-rank-endpoint--next .summary-rank-frame {
    margin-right: 0 !important;
    margin-left: 4px !important;
  }

  /* Feedback Callout Line */
  #summary-modal .summary-feedback-line {
    margin: 4px 0 8px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
  }

  /* Session Grade Summary Modal Button Order & Layout */
  .modal-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  #modal-new-session-button {
    order: 1 !important;
    height: 46px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }

  #modal-dashboard-button {
    order: 2 !important;
    height: 44px !important;
    border: 1px solid rgba(238, 201, 139, 0.4) !important;
    background: rgba(238, 201, 139, 0.08) !important;
    border-radius: 12px !important;
    color: #fce4b8 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  #retry-misses-button {
    order: 3 !important;
    height: 46px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }


  /* Compact mobile dashboard navigation header (TRAIN / DASHBOARD nav toggle) */
  .fk-menu-nav-wrap {
    margin-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
  }

  .fk-menu-nav-toggle {
    min-height: 36px !important;
    padding: 0.3rem 0.6rem !important;
  }

  /* Mobile UI: Hide redundant page titles and subtitles on Train and Stats screens */
  .fk-practice-head,
  .fk-practice-section-title,
  .fk-stats-topbar > div:first-child {
    display: none !important;
  }
}