* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #3a3f47;
  color: #edf1f6;
  overflow: auto;
}

.game-stage {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.game {
  --nav-height: 46px;
  --nav-to-verse-gap: 64px;
  --vcb-height: 48px;
  --footer-height: 48px;
  --cat-halo-pulse-ms: 1800ms;
  --pathway-shimmer-cycle-ms: 7000ms;
  --content-top-padding: 4.875rem;
  --content-bottom-padding: 1.5rem;
  --verse-card-height: 337px;
  --cat-gap: 5px;
  --cat-row-gap: 0px;
  --cat-top-gap: 18px;
  --cat-bottom-gap: 11px;
  --cat-width-to-height: 1.48;
  --link-cat-font-size: 1.175rem;
  --link-cat-line-height: 1;
  --link-cat-letter-spacing: 0;
  --link-cat-font-stretch: 100%;
  --link-cat-label-pad-y: 0.11em;
  --link-cat-label-pad-x: 0.14em;
  --modal-body-fs: 1.375rem;
  /* Large = default zoom */
  --verse-card-fs: 1.375rem;
  /* Large = default zoom */
  --nav-title-fs: 1.375rem;
  --vcb-counter-fs: 1.21rem;
  --vcb-indicator-fs: 1.26rem;
  width: 900px;
  height: 900px;
  flex: 0 0 auto;
  background: #1b4229;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: 'Avenir', 'Avenir Next', 'Gill Sans', sans-serif;
  transform-origin: center center;
  touch-action: manipulation;
}

.game[data-modal-zoom="normal"] {
  --modal-body-fs: 1.15rem;
  --verse-card-fs: 1.15rem;
  --nav-title-fs: 1.15rem;
  --vcb-counter-fs: 1.012rem;
  --vcb-indicator-fs: 1.054rem;
}

.game[data-modal-zoom="small"] {
  --modal-body-fs: 0.925rem;
  --verse-card-fs: 0.925rem;
  --nav-title-fs: 0.925rem;
  --vcb-counter-fs: 0.814rem;
  --vcb-indicator-fs: 0.848rem;
}

.game[data-modal-zoom="xl"] {
  --modal-body-fs: 1.625rem;
  --verse-card-fs: 1.625rem;
  --nav-title-fs: 1.625rem;
  --vcb-counter-fs: 1.43rem;
  --vcb-indicator-fs: 1.489rem;
}

.game[data-button-size="normal"] {
  --object-animal-label-offset-y: 1.5px;
  --link-cat-font-size: 1.24rem;
  --link-cat-line-height: 1.07;
  --link-cat-letter-spacing: 0;
  --link-cat-font-stretch: 100%;
  --link-cat-label-pad-y: 0.11em;
  --link-cat-label-pad-x: 0.14em;
}

.game[data-button-size="large"] {
  --cat-gap: 1.35px;
  --cat-row-gap: 2px;
  --cat-top-gap: 12px;
  --cat-bottom-gap: 1px;
  --link-cat-height-trim: 0.75px;
  --object-animal-label-offset-y: 1px;
  --cat-width-to-height: 1.4;
  --link-cat-font-size: 1.335rem;
  --link-cat-line-height: 1.09;
  --link-cat-letter-spacing: -0.015em;
  --link-cat-font-stretch: 92%;
  --link-cat-label-pad-y: 0.15em;
  --link-cat-label-pad-x: 0.1em;
}

/* ── Nav bar ── */
.game-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, #e2cb86 0%, #cdb06a 48%, #b69252 100%);
  padding: 0 1rem;
  height: 46px;
  flex-shrink: 0;
  position: relative;
  font-family: 'Avenir', 'Avenir Next', 'Gill Sans', sans-serif;
  color: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.18);
}

.nav-title {
  font-size: var(--nav-title-fs);
  font-weight: normal;
  letter-spacing: 0.01em;
  color: #000;
  -webkit-user-select: none;
  user-select: none;
}

.nav-title-iron {
  font-family: 'Avenir Next Demi Bold', 'Avenir Next', 'Avenir', 'Gill Sans', sans-serif;
  font-weight: bold;
}

.nav-title-rest {
  font-family: 'Avenir Light', 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', 'Gill Sans', sans-serif;
  font-weight: normal;
}

.nav-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hamburger {
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
}

.hamburger:hover {
  opacity: 0.65;
}

.nav-refresh-btn,
.nav-fit-btn,
.nav-context-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  line-height: 0;
  transform: translateX(2px);
}

.nav-refresh-btn {
  margin-left: 0;
}

.nav-refresh-links-btn {
  margin-left: 0;
}

.nav-fit-btn {
  margin-left: 0;
  transform: translateX(3.5px);
}

.nav-context-btn {
  margin-left: 0;
  transform: translateX(3.5px);
  position: relative;
  line-height: 1;
}

.nav-refresh-btn svg {
  width: 36px;
  height: 36px;
}

.nav-refresh-btn:hover,
.nav-fit-btn:hover,
.nav-context-btn:hover:not(:disabled) {
  opacity: 0.65;
}

.nav-refresh-btn svg,
.nav-fit-btn svg,
.nav-context-btn svg {
  display: block;
  width: 36px;
  height: 36px;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.nav-context-btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.nav-context-btn:disabled:hover {
  opacity: 0.42;
}

.nav-context-emoji {
  display: block;
  width: 36px;
  height: 36px;
  font-size: 33px;
  line-height: 1;
  text-align: center;
  transform: translateY(1px);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.nav-context-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
}

.nav-context-overlay span {
  color: #000;
  font-family: 'Avenir Next Demi Bold', 'Avenir Next', 'Avenir', 'Gill Sans', sans-serif;
  font-weight: 700;
  font-size: 8.3px;
  line-height: 0.95;
  letter-spacing: 0.16px;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 1px rgba(255, 255, 255, 0.34);
}

.hamburger span {
  display: block;
  width: 28px;
  height: 2.1px;
  background: #000;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 1px rgba(0, 0, 0, 0.3);
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #e4e7eb;
  border-radius: 4px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  width: max-content;
  min-width: max-content;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 100;
}

.nav-dropdown.open {
  display: block;
}

.nav-dropdown-item {
  background: none;
  border: none;
  color: #000;
  font-family: 'Avenir', 'Avenir Next', 'Gill Sans', sans-serif;
  font-size: var(--modal-body-fs);
  padding: 0.5rem 1rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.nav-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* ── Game content ── */
.game-content {
  padding: var(--content-top-padding) 16px var(--content-bottom-padding);
  flex: 1;
  overflow: auto;
}

.game-footer-bar {
  height: 48px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, #923022 0%, #6b1f19 58%, #380d0e 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

/* ── Verse change bar ── */
.vcb {
  height: 48px;
  box-sizing: border-box;
  padding: 7px 12px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, #7b8390 0%, #646c79 46%, #4d545f 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 2px 4px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 12px;
}

.vcb-left,
.vcb-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

.vcb-counter {
  color: #ffd95c;
  font-size: var(--vcb-counter-fs);
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.02em;
  /* text-shadow: .015px 0 0 #fbf8ef, -.015px 0 0 #fbf8ef, 0 .015px 0 #fbf8ef, 0 -.015px 0 #fbf8ef; */
}

.vcb-indicator {
  color: #e8c24a;
  font-size: var(--vcb-indicator-fs);
  font-weight: normal;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.01em;
  flex: 0 1 auto;
}

.vcb-indicator-left {
  text-align: left;
}

.vcb-counter-left {
  width: 60px;
  flex: 0 0 60px;
  text-align: right;
}

.vcb-counter-right {
  width: 60px;
  flex: 0 0 60px;
  text-align: right;
}

.vcb-track {
  width: 420px;
  flex-shrink: 0;
  height: 34px;
  background: #bcc3cb;
  border-radius: 17px;
  position: relative;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.vcb-thumb {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  background: linear-gradient(to bottom, #7b8390 0%, #5d6470 58%, #4d545f 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.22);
  cursor: grab;
  min-width: 24px;
  will-change: left;
  touch-action: none;
}

.vcb-thumb::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -4px;
  right: -4px;
  border-radius: inherit;
}

.vcb-thumb.vcb-thumb-animate {
  transition: left 0.14s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vcb-thumb.vcb-grabbing {
  cursor: grabbing;
}

.game-footer-text {
  color: #fefdf7;
  font-size: calc(var(--modal-body-fs) * 0.863636);
  line-height: 1;
  white-space: nowrap;
}

.game-footer-left {
  text-align: left;
}

.game-footer-right {
  text-align: right;
}

/* ── Modal ── */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 95px;
  z-index: 200;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-popup {
  width: 83%;
  height: auto;
  max-width: 600px;
  max-height: min(88%, 710px);
  background: #4a525d;
  border-radius: 8px;
  padding: 2rem 1.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-popup,
.round-setup-body {
  scrollbar-color: #9aa6b5 #727d8c;
}

.modal-popup::-webkit-scrollbar,
.round-setup-body::-webkit-scrollbar {
  width: 10px;
}

.modal-popup::-webkit-scrollbar-track,
.round-setup-body::-webkit-scrollbar-track {
  background: #727d8c;
  border-radius: 999px;
}

.modal-popup::-webkit-scrollbar-thumb,
.round-setup-body::-webkit-scrollbar-thumb {
  background: #9aa6b5;
  border-radius: 999px;
  border: 2px solid #727d8c;
}

.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  background: none;
  border: none;
  color: #edf1f6;
  font-size: 1.43rem;
  cursor: pointer;
  line-height: 1;
  z-index: 10;
}

.modal-close:hover {
  color: #fff;
}

/* ── Modal zoom controls ── */
.modal-zoom-controls {
  position: absolute;
  top: 0.8rem;
  left: 1.0rem;
  display: flex;
  align-items: center;
  gap: 0.18rem;
  z-index: 10;
}

.modal-zoom-btn {
  background: none;
  border: none;
  color: #edf1f6;
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  border-radius: 4px;
  opacity: 0.85;
}

.modal-zoom-btn:hover:not(:disabled) {
  opacity: 1;
}

.modal-zoom-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.modal-zoom-btn svg {
  display: block;
  width: 25px;
  height: 25px;
}

.verse-context-popup .modal-zoom-btn {
  color: #fbf8ef;
}

.modal-body {
  color: #e2e7ee;
  line-height: 1.45;
  font-size: var(--modal-body-fs);
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-body .about-use-notice {
  font-size: var(--modal-body-fs);
  line-height: 1.45;
}

.about-copy {
  display: block;
  margin: 0;
  color: #e7ebf0;
}

.about-copy-intro {
  display: block;
  text-align: center;
  margin-bottom: 0;
}

.about-copy-travel {
  display: block;
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
}

.about-divider {
  border: none;
  border-top: 1px solid #6b7787;
  margin: 0.25rem 0;
  width: 100%;
}

.about-kjv-notice {
  text-align: center;
  font-size: 0.9em;
  opacity: 0.75;
}

.about-use-notice {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  font-size: 1.25rem;
  line-height: 1.58;
  color: #e7ebf0;
}

.about-use-notice p {
  margin: 0;
}

.about-use-notice-centered {
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}

.about-use-notice strong {
  font-weight: 700;
}

.about-use-notice em {
  font-style: italic;
}

.about-inline-link {
  color: #fbf8ef;
  text-decoration: underline;
  text-underline-offset: 0.1em;
  font-weight: 700;
}

.about-inline-link:hover {
  color: #fbf8ef;
}

.about-inline-link:focus-visible {
  outline: 2px solid #e8c24a;
  outline-offset: 2px;
  border-radius: 2px;
}

.about-title {
  display: block;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.3;
  color: #fbf8ef;
  margin: 0;
}

.about-decor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: #edd8a6;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.about-decor::before,
.about-decor::after {
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  background: linear-gradient(to right, rgba(237, 216, 166, 0.1), rgba(237, 216, 166, 0.8), rgba(237, 216, 166, 0.1));
}

.round-setup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 70px;
  z-index: 240;
}

.round-setup-overlay[hidden] {
  display: none;
}

.round-setup-popup {
  width: 83%;
  height: auto;
  min-height: 62%;
  max-width: 707px;
  max-height: min(88%, 710px);
  background: #4a525d;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  position: relative;
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
}

.options-popup {
  width: 747px;
  height: auto;
  min-height: 0;
  max-height: 760px;
  background: #4a525d;
}

.verse-context-popup {
  width: 747px;
  height: auto;
  min-height: 0;
  max-height: 760px;
  background: linear-gradient(to bottom, #5a3518 0%, #4a2c14 100%);
  border: 2px solid #6e3f1d;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px #8a5529,
    inset 0 1px 0 rgba(240, 206, 156, 0.18);
}

.verse-context-popup .round-setup-close {
  color: #fbf8ef;
}

.verse-context-popup .round-setup-close:hover {
  color: #fff;
}

.verse-context-body {
  padding-right: 0;
  font-size: var(--verse-card-fs);
}

.verse-context-title {
  text-align: center;
  margin-bottom: 0.2rem;
}

.verse-context-card {
  flex: 1 1 auto;
  min-height: 0;
  background-color: #fbf8ef;
  border: 1px solid #d2c6a5;
  border-radius: 1.62rem;
  padding: 1rem;
  color: #000;
  font-size: var(--verse-card-fs);
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-color: #bcbcbc #faf6ed;
}

.verse-context-card::-webkit-scrollbar {
  width: 10px;
}

.verse-context-card::-webkit-scrollbar-track {
  background: #faf6ed;
  border-radius: 999px;
}

.verse-context-card::-webkit-scrollbar-thumb {
  background: #bcbcbc;
  border-radius: 999px;
  border: 2px solid #faf6ed;
}

.verse-context-line {
  margin: 0;
}

.verse-context-line+.verse-context-line {
  margin-top: 0.62rem;
}

.verse-context-line-current {
  font-weight: 700;
}

.round-setup-close {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  background: none;
  border: none;
  color: #edf1f6;
  font-size: 1.43rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
}

.round-setup-close:hover {
  color: #fff;
}

.round-setup-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  color: #e2e7ee;
  padding-right: 0.25rem;
  font-size: var(--modal-body-fs);
  line-height: 1.58;
}

.round-setup-title-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 2.6rem;
}

.round-setup-title {
  margin: 0;
  color: #fbf8ef;
  font-size: 1.1em;
  line-height: 1.2;
}

/* Keep Use Notice title color aligned with the Options modal title color. */
.use-notice-body .use-notice-title {
  color: #fbf8ef;
}

.round-setup-auto-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #949aa1;
  background: linear-gradient(to bottom, #515a65 0%, #464f5a 100%);
  color: #fbf8ef;
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-family: inherit;
  font-size: 1em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.round-setup-auto-btn:hover {
  filter: brightness(1.08);
}

.round-setup-auto-btn:focus-visible {
  outline: 2px solid #e8c24a;
  outline-offset: 2px;
}

.round-setup-step {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  padding: 0.45rem 0.55rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(243, 236, 216, 0.28);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.16);
}

.round-setup-step-title {
  margin: 0;
  color: #fbf8ef;
  font-size: 1em;
  line-height: 1.2;
}

.round-setup-subtitle {
  margin: 0;
  color: #e8c24a;
  font-size: 0.9em;
}

.round-setup-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1em;
  color: #e7ebf0;
}

.round-inline-grid,
.round-hop-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}

.round-hop-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0;
}

.round-hop-wrap .round-setup-subtitle {
  line-height: 1.1;
  white-space: nowrap;
}

.round-hop-grid {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
}

.round-hop-grid .round-setup-choice {
  white-space: nowrap;
}

.round-hop-wrap[hidden] {
  display: none;
}

.round-hop-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.round-player-row {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.9rem;
  flex-wrap: wrap;
}

.round-player-choice-max {
  position: relative;
  margin-left: 0.48rem;
}

.round-player-max-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 1.88rem;
  border-radius: 999px;
  border: 1px solid #949aa1;
  background: linear-gradient(to bottom, #515a65 0%, #464f5a 100%);
  padding: 0 0.7rem;
  line-height: 1.2;
  cursor: pointer;
  font-size: 1em;
}

.round-player-max-label.round-player-max-label-compact {
  padding: 0;
  width: 1.88rem;
}

.round-player-max-label.round-player-max-label-compact[data-digit-count="2"] {
  width: 2.42rem;
}

.round-player-max-label-text {
  color: #f2f6fb;
  font-size: 1em;
}

.round-player-choice-max input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.round-player-choice-max input:checked+.round-player-max-label {
  filter: brightness(1.06);
  border-color: #a7aab0;
  box-shadow: 0 0 0 1px rgba(167, 170, 176, 0.26);
}

.round-player-choice-max input:focus-visible+.round-player-max-label {
  outline: 2px solid #e8c24a;
  outline-offset: 2px;
}

.round-player-count-menu {
  position: absolute;
  top: calc(100% + 0.36rem);
  left: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.32rem 0.62rem;
  min-width: 15.2rem;
  padding: 0.5rem 0.58rem;
  border-radius: 8px;
  border: 1px solid rgba(243, 236, 216, 0.18);
  background: #3f4650;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
}

.round-player-count-menu[hidden] {
  display: none;
}

.round-book-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.28rem 0.7rem;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(243, 236, 216, 0.12);
}

.round-book-list[hidden] {
  display: none;
}

.round-setup-alert {
  position: sticky;
  top: 0;
  z-index: 8;
  box-sizing: border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(120, 82, 34, 0.28);
  margin: 0;
  padding: 0.4rem 0.56rem;
  border-radius: 7px;
  color: #7d2123;
  background: #f8dddd;
  border: 1px solid #e7bcbc;
  font-size: 1em;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-text-fill-color: currentColor;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  opacity: 1;
  transition: opacity 240ms ease;
}

.round-setup-alert[hidden] {
  display: none;
}

.round-setup-alert-hiding {
  opacity: 0;
}

.round-setup-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.15rem;
  padding: 0 0.05rem 0.08rem;
}

.round-setup-go-btn {
  min-width: 78px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #3d634d;
  border-bottom: 2px solid #345542;
  background: linear-gradient(to bottom, #6f9a77 0%, #5f8a68 52%, #50795a 100%);
  color: #f2f7ef;
  font-family: inherit;
  font-size: 1.08em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 5px rgba(0, 0, 0, 0.26);
  cursor: pointer;
  transform: translateY(0);
  transition: transform 90ms ease, filter 90ms ease, box-shadow 90ms ease;
}

.round-setup-go-btn:hover {
  filter: brightness(1.04);
}

.round-setup-go-btn:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.22);
}

.round-setup-go-btn.round-setup-go-btn-key-press {
  transform: translateY(1px);
  border-bottom-width: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.22);
}

.round-setup-go-btn:focus-visible {
  outline: 2px solid #a7ccb0;
  outline-offset: 2px;
}

.use-notice-body {
  padding-right: 0.25rem;
  color: #e7ebf0;
  font-size: var(--modal-body-fs);
  line-height: 1.45;
}

.use-notice-body::-webkit-scrollbar {
  width: 10px;
}

.use-notice-body::-webkit-scrollbar-track {
  background: #727d8c;
  border-radius: 999px;
}

.use-notice-body::-webkit-scrollbar-thumb {
  background: #9aa6b5;
  border-radius: 999px;
  border: 2px solid #727d8c;
}

.use-notice-body .about-use-notice {
  gap: 0;
  font-size: var(--modal-body-fs);
  line-height: 1.45;
}

.use-notice-body .use-notice-title {
  margin: 0;
  font-size: 1.1em;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
}

.use-notice-body .about-use-notice>*+* {
  margin-top: 0.7rem;
}

.use-notice-body .about-use-notice>.about-decor-close {
  margin-top: 0.35rem;
}

.use-notice-body .about-decor::before,
.use-notice-body .about-decor::after {
  width: 54px;
}

.beliefs-body {
  padding-right: 0.25rem;
  color: #e7ebf0;
  font-size: var(--modal-body-fs);
  line-height: 1.45;
}

.beliefs-body::-webkit-scrollbar {
  width: 10px;
}

.beliefs-body::-webkit-scrollbar-track {
  background: #727d8c;
  border-radius: 999px;
}

.beliefs-body::-webkit-scrollbar-thumb {
  background: #9aa6b5;
  border-radius: 999px;
  border: 2px solid #727d8c;
}

.beliefs-body .about-use-notice {
  gap: 0;
  font-size: var(--modal-body-fs);
  line-height: 1.45;
}

.beliefs-body .beliefs-creed-dropdown {
  margin: 0;
}

.beliefs-body .beliefs-creed-button {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 1.95rem;
  border-radius: 6px;
  border: 1px solid #949aa1;
  background: linear-gradient(to bottom, #515a65 0%, #464f5a 100%);
  color: #f2f6fb;
  padding: 0.35rem 0.7rem;
  line-height: 1.2;
  cursor: pointer;
}

.beliefs-body .beliefs-creed-button::-webkit-details-marker {
  display: none;
}

.beliefs-body .beliefs-creed-button::after {
  content: "▾";
  color: #f2f6fb;
  margin-left: 0.7rem;
  transition: transform 120ms ease;
}

.beliefs-body .beliefs-creed-dropdown[open] .beliefs-creed-button {
  filter: brightness(1.06);
  border-color: #a7aab0;
  box-shadow: 0 0 0 1px rgba(167, 170, 176, 0.26);
}

.beliefs-body .beliefs-creed-dropdown[open] .beliefs-creed-button::after {
  transform: rotate(180deg);
}

.beliefs-body .beliefs-creed-button:focus-visible {
  outline: 2px solid #e8c24a;
  outline-offset: 2px;
}

.beliefs-body .beliefs-creed-text {
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.58rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(243, 236, 216, 0.12);
  line-height: 1.45;
}

.beliefs-body .about-use-notice>*+* {
  margin-top: 0.7rem;
}

.beliefs-body .about-use-notice>.about-decor-close {
  margin-top: 0.35rem;
}

.beliefs-body .about-decor::before,
.beliefs-body .about-decor::after {
  width: 54px;
}

.player-turn-indicator {
  position: absolute;
  left: 15.5px;
  bottom: 115px;
  width: auto;
  margin: 0;
  text-align: left;
  color: #ffffff;
  font-family: 'Avenir Light', 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', 'Gill Sans', sans-serif;
  font-size: var(--modal-body-fs);
  line-height: 1.18;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.36);
  pointer-events: none;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.player-turn-player-label {
  font-size: 1.09em;
  font-style: italic;
  margin-bottom: 4px;
  line-height: 1.1;
}

.player-turn-link-label {
  font-size: 1.06em;
  font-style: italic;
  line-height: 1.18;
}

.player-turn-link-label-linked-emoji {
  font-style: normal;
}

.player-turn-indicator:empty {
  display: none;
}

#start-round-button {
  --start-round-ring: #7a2b1a;
  --start-round-fill-top: #c38c33;
  --start-round-fill-mid: #e6c66f;
  --start-round-fill-bottom: #c38c33;
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 232, 166, 0.26) 0%, rgba(255, 232, 166, 0) 56%),
    radial-gradient(120% 90% at 100% 0%, rgba(255, 232, 166, 0.26) 0%, rgba(255, 232, 166, 0) 56%),
    radial-gradient(120% 90% at 0% 100%, rgba(255, 232, 166, 0.26) 0%, rgba(255, 232, 166, 0) 56%),
    radial-gradient(120% 90% at 100% 100%, rgba(255, 232, 166, 0.26) 0%, rgba(255, 232, 166, 0) 56%),
    linear-gradient(to bottom,
      var(--start-round-fill-top) 0%,
      var(--start-round-fill-top) 34%,
      var(--start-round-fill-mid) 50%,
      var(--start-round-fill-bottom) 70%,
      var(--start-round-fill-bottom) 100%);
  color: #fffefc;
  padding: 0;
  border-radius: 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  font-size: 1.25rem;
  font-weight: normal;
  font-family: 'Avenir Light', 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', 'Gill Sans', sans-serif;
  text-shadow: -0.7px 0.8px 0.8px rgba(0, 0, 0, 0.78);
  -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.22);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  letter-spacing: 0.08em;
  line-height: 1.024;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  z-index: 80;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.32);
  box-shadow:
    inset 0 0 0 5px var(--start-round-ring),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 2px 4px rgba(0, 0, 0, 0.24);
  transition: transform 90ms ease, filter 90ms ease;
}

.game[data-button-size="normal"] #start-round-button {
  width: 85px;
  height: 97px;
  right: 21px;
  bottom: 115px;
  font-size: var(--link-cat-font-size);
}

.game[data-button-size="large"] #start-round-button {
  width: 89.5px;
  height: 101px;
  right: 19px;
  bottom: 113px;
  font-size: var(--link-cat-font-size);
}

#start-round-button::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(85% 85% at 0% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 100% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 0% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 100% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%);
}

#start-round-button::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 14px;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transform: scale(0.976);
  background: radial-gradient(ellipse at center,
      rgba(246, 236, 206, 0.84) 0%,
      rgba(243, 231, 198, 0.66) 42%,
      rgba(239, 224, 182, 0.36) 62%,
      rgba(239, 224, 182, 0.16) 76%,
      rgba(239, 224, 182, 0) 88%);
  will-change: opacity, transform;
}

#start-round-button:hover:not([disabled]) {
  filter: brightness(0.97);
}

#start-round-button:not([disabled]):not(.start-round-key-press):not(:active) {
  text-shadow:
    -0.7px 0.8px 0.8px rgba(0, 0, 0, 0.78),
    -1.7px 2px 2px rgba(0, 0, 0, 0.28);
}

#start-round-button[disabled] {
  display: none;
}

#start-round-button.start-round-start-halo:not([disabled])::after {
  inset: unset;
  width: 220%;
  height: 220%;
  top: -60%;
  left: -60%;
  border-radius: 0;
  opacity: 0.96;
  transform: translate3d(-104%, 104%, 0) rotate(-29deg);
  background: linear-gradient(135deg,
      rgba(250, 224, 150, 0) 42%,
      rgba(255, 247, 220, 0.72) 47%,
      rgba(255, 234, 162, 0.98) 50%,
      rgba(255, 247, 220, 0.72) 53%,
      rgba(250, 224, 150, 0) 58%);
  box-shadow: 0 0 18px rgba(255, 234, 162, 0.58);
  animation: pathway-gold-shimmer-10s var(--pathway-shimmer-cycle-ms) linear infinite;
  z-index: 3;
}

#start-round-button.start-round-key-press:not([disabled]),
#start-round-button:active:not([disabled]) {
  transform: translateY(1px);
  filter: none;
  border-top: 1px solid rgba(0, 0, 0, 0.24);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 0 0 5px #6d2617,
    inset 0 2px 5px rgba(0, 0, 0, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 1px rgba(0, 0, 0, 0.16);
}



.start-round-btn-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.start-round-btn-main.start-round-btn-main-cross-mode {
  gap: 0;
}

.start-round-btn-main.start-round-btn-main-cross-mode .start-round-start-text {
  letter-spacing: 0;
  font-size: 1.92rem;
  line-height: 1;
}

.start-round-btn-main.start-round-btn-main-cross-mode .start-round-round-text {
  display: none;
}

.start-round-cross-text {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-family: inherit;
  letter-spacing: 0;
  text-shadow: none;
  -webkit-text-stroke: 0;
  pointer-events: none;
  z-index: 1;
}

.start-round-cross-icon {
  width: 54px;
  height: 62px;
  display: block;
}


#start-round-button.start-round-crosses-on[disabled] .start-round-btn-main {
  visibility: hidden;
}

#start-round-button.start-round-crosses-on[disabled] .start-round-cross-text {
  display: flex;
}

.start-round-start-text {
  letter-spacing: 0.115em;
}

.start-round-round-text {
  letter-spacing: 0.04em;
}

.start-round-btn-divider {
  display: none;
}

.start-round-btn-label {
  display: none;
}

.start-round-limit-message {
  position: absolute;
  right: 20px;
  bottom: 100px;
  width: 85px;
  margin: 0;
  text-align: center;
  color: #faf7ee;
  font-family: 'Avenir Light', 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', 'Gill Sans', sans-serif;
  font-size: 0.8rem;
  line-height: 1;
  z-index: 80;
}

.status {
  margin: 0;
}

.link-cat-categories {
  --cat-btn-width: calc((100% - (7 * var(--cat-gap))) / 8);
  --context-btn-slot-width: calc((var(--cat-btn-width) - (3 * var(--cat-gap))) / 2);
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(var(--nav-height) + var(--content-top-padding) + var(--verse-card-height) + var(--cat-top-gap));
  bottom: calc(var(--vcb-height) + var(--footer-height) + var(--cat-bottom-gap));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  z-index: 50;
}

.game[data-button-size="large"] .link-cat-categories {
  justify-content: flex-start;
  gap: var(--cat-row-gap);
}

.game[data-button-size="large"] .link-cat-row {
  height: calc((100% - (3 * var(--cat-row-gap))) / 4);
}

/* Normal mode: use explicit row heights instead of aspect-ratio to avoid
   iOS Safari/WebKit bug where aspect-ratio on flex children fails to
   recompute after a DOM attribute change on a scaled container. */
.game[data-button-size="normal"] .link-cat-row {
  height: calc((100% - (3 * var(--cat-row-gap))) / 4);
}

.round-selection-summary-wrap {
  position: absolute;
  right: 21px;
  bottom: 115px;
  z-index: 82;
}

.round-selection-summary-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 85px;
  height: 85px;
  border: 1px solid #3a6b4a;
  border-radius: 0;
  background: linear-gradient(to bottom, #1e4a2e 0%, #163521 100%);
  color: #f0ede3;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  position: relative;
  z-index: 1;
  font-family: 'Avenir Light', 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', 'Gill Sans', sans-serif;
  font-size: var(--link-cat-font-size);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-align: center;
  box-shadow: 0 2px 0.5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.game[data-button-size="large"] .round-selection-summary-btn {
  width: 88px;
  height: 92px;
}

.game[data-button-size="large"] .round-selection-summary-btn::after {
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 7.5px solid #666666;
}

.rsb-round {
  position: relative;
  z-index: 1;
}

.rsb-info {
  position: relative;
  z-index: 1;
}

.round-selection-summary-btn::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 5px solid #666666;
}

.round-selection-summary-btn:hover,
.round-selection-summary-btn:focus-visible {
  filter: brightness(0.975);
  outline: none;
}

.round-selection-summary-dropdown {
  position: absolute;
  bottom: calc(100% + 5px);
  right: 0;
  left: auto;
  background: #163521;
  color: #f0ede3;
  border-radius: 0;
  padding: 5px 13px 6px;
  width: max-content;
  font-family: 'Avenir Light', 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', 'Gill Sans', sans-serif;
  font-size: var(--modal-body-fs);
  line-height: 1.45;
  min-width: 148px;
  pointer-events: auto;
  -webkit-user-select: text;
  user-select: text;
  z-index: 83;
  padding-right: 56px;
}

.round-selection-summary-text {
  white-space: pre-line;
}

.round-selection-summary-dropdown .round-selection-summary-zoom-controls {
  left: auto;
  right: 7px;
  top: 6px;
  gap: 0.08rem;
}

.round-selection-summary-dropdown .round-selection-summary-zoom-controls .modal-zoom-btn {
  padding: 3px;
}

.round-selection-summary-dropdown .round-selection-summary-zoom-controls .modal-zoom-btn svg {
  width: 27px;
  height: 27px;
}

.link-cat-row {
  display: flex;
  justify-content: center;
  gap: var(--cat-gap);
}

.context-window-btn {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
  color: #2a2114;
  font-family: 'Avenir Light', 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', 'Gill Sans', sans-serif;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: none;
  transition: filter 90ms ease, opacity 90ms ease;
  z-index: 2;
}

.context-window-btn-left {
  right: calc(100% + 8px);
}

.context-window-btn-right {
  left: calc(100% + 8px);
}

.context-window-glyph {
  display: block;
  font-size: 2.95rem;
  line-height: 1;
  transform: translateX(var(--context-glyph-nudge, 0px));
}

.context-window-btn:hover:not(:disabled) {
  filter: brightness(0.93);
}

.context-window-btn:disabled {
  color: #2a2114;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.context-window-btn:disabled:hover {
  filter: none;
}

.context-window-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.link-cat-btn {
  --link-cat-ring: #67acd9;
  --link-cat-fill-top: #b9e4ff;
  --link-cat-fill-mid: #a2dcff;
  --link-cat-fill-bottom: #8fc4e2;
  -webkit-appearance: none;
  appearance: none;
  width: var(--cat-btn-width);
  aspect-ratio: var(--cat-width-to-height) / 1;
  height: auto;
  border: none;
  border-radius: 24px;
  background: linear-gradient(to bottom, var(--link-cat-fill-top) 0%, var(--link-cat-fill-mid) 58%, var(--link-cat-fill-bottom) 100%);
  color: #000;
  box-shadow: inset 0 0 0 5px #67acd9;
  /* default; overridden by btn-* color classes */
  font-family: 'Avenir Light', 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', 'Gill Sans', sans-serif;
  font-size: var(--link-cat-font-size);
  font-weight: 300;
  font-stretch: var(--link-cat-font-stretch);
  letter-spacing: var(--link-cat-letter-spacing);
  text-align: center;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: var(--link-cat-line-height);
  padding: var(--link-cat-label-pad-y) var(--link-cat-label-pad-x);
  max-width: 100%;
  cursor: pointer;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 0 0 5px var(--link-cat-ring),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.22);
}

.game[data-button-size="large"] .link-cat-btn {
  aspect-ratio: auto;
  height: calc(100% - var(--link-cat-height-trim));
}

.game[data-button-size="normal"] .link-cat-btn {
  aspect-ratio: auto;
  height: 100%;
}

.game[data-button-size="large"] .link-cat-btn.link-cat-btn-object-animal {
  padding-top: calc(var(--link-cat-label-pad-y) + var(--object-animal-label-offset-y));
  padding-bottom: calc(var(--link-cat-label-pad-y) - var(--object-animal-label-offset-y));
}

.game[data-button-size="normal"] .link-cat-btn.link-cat-btn-object-animal {
  padding-top: calc(var(--link-cat-label-pad-y) + var(--object-animal-label-offset-y));
  padding-bottom: calc(var(--link-cat-label-pad-y) - var(--object-animal-label-offset-y));
}

.link-cat-btn.btn-blue {
  --link-cat-fill-top: #caeeff;
  --link-cat-fill-mid: #bee7ff;
  --link-cat-fill-bottom: #a8d4ee;
  --link-cat-ring: #86b7d8;
}

.link-cat-btn.btn-teal {
  --link-cat-fill-top: #bceeea;
  --link-cat-fill-mid: #b0e8e4;
  --link-cat-fill-bottom: #9ad3cf;
  --link-cat-ring: #73b8b4;
}

.link-cat-btn.btn-magenta {
  --link-cat-fill-top: #fcc9ce;
  --link-cat-fill-mid: #f9bcc3;
  --link-cat-fill-bottom: #e4a8af;
  --link-cat-ring: #a95660;
}

.link-cat-btn.btn-green {
  --link-cat-fill-top: #a0d2bd;
  --link-cat-fill-mid: #93cab2;
  --link-cat-fill-bottom: #80b39e;
  --link-cat-ring: #5f927b;
}

.link-cat-btn.btn-orange {
  --link-cat-fill-top: #fbd2a2;
  --link-cat-fill-mid: #f9c78f;
  --link-cat-fill-bottom: #e3b37d;
  --link-cat-ring: #c98d53;
}

.link-cat-btn:hover {
  filter: brightness(0.97);
}

.link-cat-btn:disabled,
.link-cat-btn.link-cat-btn-disabled {
  background: linear-gradient(to bottom, #e2e2e2 0%, #d3d3d3 100%);
  color: #969696;
  box-shadow: inset 0 0 0 5px #c6c6c6;
  cursor: not-allowed;
  filter: none;
}

.link-cat-btn:disabled:hover,
.link-cat-btn.link-cat-btn-disabled:hover {
  filter: none;
}

.link-cat-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.game[data-pre-round] .link-cat-btn {
  cursor: not-allowed;
}

.game[data-pre-round] .context-window-btn {
  visibility: hidden;
  pointer-events: none;
}

.game[data-pre-round] #refresh-links-btn {
  cursor: not-allowed;
}

.game[data-pre-round] .verses .verse[data-slot] {
  cursor: not-allowed;
}

.game[data-pre-round] .vcb-thumb {
  cursor: not-allowed;
}

.verses {
  --card-gap: 14px;
  --verse-card-radius: 1.62rem;
  display: flex;
  gap: var(--card-gap);
  width: calc(100% + 4px);
  padding: 0;
  margin-left: -2px;
  margin-top: calc(var(--nav-to-verse-gap) - var(--content-top-padding) + 2px);
  position: relative;
}

.lock-button {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  width: 108px;
  height: 54px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 7px;
  background:
    linear-gradient(to top, #1a5c38, #5cb87a) left / 50% 100% no-repeat,
    linear-gradient(to top, #1a4a7a, #5bb8e8) right / 50% 100% no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 2px 4px rgba(0, 0, 0, 0.24);
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  isolation: isolate;
  z-index: 65;
}

.lock-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 232, 166, 0.26) 0%, rgba(255, 232, 166, 0) 56%),
    radial-gradient(120% 90% at 100% 0%, rgba(255, 232, 166, 0.26) 0%, rgba(255, 232, 166, 0) 56%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 24%);
  z-index: 0;
}

.lock-button::before {
  content: "";
  position: absolute;
  inset: 4.5px;
  border-radius: 4px;
  background: linear-gradient(to top, #906b46 0%, #a07953 6%, #b58e6a 16%);
  z-index: 0;
}

.lock-button-hidden {
  opacity: 0;
  pointer-events: none;
}

.lock-button:disabled {
  cursor: default;
}

.lock-button-idle {
  background: #666666;
  opacity: 1;
}

.lock-button-idle:disabled {
  cursor: not-allowed;
}

.lock-button-idle::before {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(85% 85% at 0% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 100% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 0% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 100% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    linear-gradient(to bottom, #d3d3d3 0%, #b5b5b5 100%);
}

.lock-button-idle .lock-glyph {
  filter: grayscale(1) brightness(0.95);
  opacity: 0.9;
}

.lock-button-unlocked::before {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(85% 85% at 0% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 100% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 0% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 100% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    linear-gradient(to bottom, #d3d3d3 0%, #b5b5b5 100%);
}

.lock-button-unlocked::after {
  background: none;
}

.lock-button-preview::before {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(85% 85% at 0% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 100% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 0% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    radial-gradient(85% 85% at 100% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%),
    linear-gradient(to bottom, #d3d3d3 0%, #b5b5b5 100%);
}

.lock-button-preview .lock-glyph {
  filter: none;
  opacity: 1;
}

.lock-glyph {
  display: block;
  width: 60px;
  height: auto;
  max-width: calc(100% - 8px);
  max-height: calc(100% - 8px);
  flex: 0 0 auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.lock-button-solid {
  background: linear-gradient(to bottom, #f6e39a 0%, #ddb955 52%, #b8862f 100%);
}

.lock-button-locked::before {
  background:
    linear-gradient(to top, #1a5c38, #5cb87a) left / 50% 100% no-repeat,
    linear-gradient(to top, #1a4a7a, #5bb8e8) right / 50% 100% no-repeat;
}

.lock-button-half-border-left {
  background:
    linear-gradient(to top, #b8862f 0%, #ddb955 52%, #f6e39a 100%) left / 50% 100% no-repeat,
    linear-gradient(to top, #1a4a7a, #5bb8e8) right / 50% 100% no-repeat;
}

.lock-button-half-border-left::before {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 62%) right / 50% 100% no-repeat,
    radial-gradient(85% 85% at 0% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%) right / 50% 100% no-repeat,
    radial-gradient(85% 85% at 100% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%) right / 50% 100% no-repeat,
    radial-gradient(85% 85% at 0% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%) right / 50% 100% no-repeat,
    radial-gradient(85% 85% at 100% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%) right / 50% 100% no-repeat,
    linear-gradient(to bottom, #d3d3d3 0%, #b5b5b5 100%) right / 50% 100% no-repeat,
    linear-gradient(to top, #1a5c38, #5cb87a) left / 50% 100% no-repeat;
}

.lock-button-half-border-right {
  background:
    linear-gradient(to top, #1a5c38, #5cb87a) left / 50% 100% no-repeat,
    linear-gradient(to top, #b8862f 0%, #ddb955 52%, #f6e39a 100%) right / 50% 100% no-repeat;
}

.lock-button-half-border-right::before {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 62%) left / 50% 100% no-repeat,
    radial-gradient(85% 85% at 0% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%) left / 50% 100% no-repeat,
    radial-gradient(85% 85% at 100% 0%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%) left / 50% 100% no-repeat,
    radial-gradient(85% 85% at 0% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%) left / 50% 100% no-repeat,
    radial-gradient(85% 85% at 100% 100%, rgba(255, 240, 194, 0.34) 0%, rgba(255, 240, 194, 0) 44%) left / 50% 100% no-repeat,
    linear-gradient(to bottom, #d3d3d3 0%, #b5b5b5 100%) left / 50% 100% no-repeat,
    linear-gradient(to top, #1a4a7a, #5bb8e8) right / 50% 100% no-repeat;
}

.lock-button-half-border-left::after,
.lock-button-half-border-right::after {
  background: none;
}

.verse-slot {
  width: calc((100% - var(--card-gap)) / 2);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.verse-click-toast {
  --verse-click-toast-height: calc(2.34rem + 10px);
  --verse-click-toast-tip-depth: calc(var(--verse-click-toast-height) / 2);
  position: absolute;
  top: 1.12rem;
  width: 16.5rem;
  min-height: var(--verse-click-toast-height);
  padding: 0.45rem 0.92rem;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #4b3b24;
  text-shadow: 0 1px 0 rgba(255, 252, 242, 0.28);
  background: linear-gradient(to bottom, #c9b58a 0%, #d9caab 54%, #e9dec7 100%);
  border-top: 1px solid rgba(255, 251, 241, 0.44);
  border-bottom: 1px solid rgba(119, 99, 68, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(86, 69, 41, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  z-index: 6;
}

.verse-click-toast-left {
  left: 20px;
  padding-left: 1.16rem;
  padding-right: 0.78rem;
  clip-path: polygon(0 50%, var(--verse-click-toast-tip-depth) 0, 100% 0, 100% 100%, var(--verse-click-toast-tip-depth) 100%);
}

.verse-click-toast-right {
  right: 20px;
  padding-left: 0.78rem;
  padding-right: 1.16rem;
  clip-path: polygon(0 0, calc(100% - var(--verse-click-toast-tip-depth)) 0, 100% 50%, calc(100% - var(--verse-click-toast-tip-depth)) 100%, 0 100%);
}

.verse-click-toast-text {
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.verse-click-toast::after {
  content: "";
  position: absolute;
  width: 220%;
  height: 220%;
  top: -60%;
  left: -60%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg,
      rgba(250, 224, 150, 0) 42%,
      rgba(255, 247, 220, 0.72) 47%,
      rgba(255, 234, 162, 0.98) 50%,
      rgba(255, 247, 220, 0.72) 53%,
      rgba(250, 224, 150, 0) 58%);
  box-shadow: 0 0 16px rgba(255, 234, 162, 0.58);
  z-index: 1;
}

.verse-click-toast-enabled.verse-click-toast-burst {
  display: flex;
}

.verse-click-toast-enabled.verse-click-toast-preshow {
  display: flex;
}

.verse-click-toast-left.verse-click-toast-burst::after {
  opacity: 0.96;
  animation: verse-click-toast-shimmer-ltr 4700ms linear 1;
}

.verse-click-toast-right.verse-click-toast-burst::after {
  opacity: 0.96;
  animation: verse-click-toast-shimmer-rtl 4700ms linear 1;
}

.game.shimmer-suppressed .verse-click-toast-burst {
  display: none;
}

.vcvr-btn-wrap {
  --vcvr-wrap-pad: 4px;
  --mini-connector-vcvr-color: #c79c34;
  position: absolute;
  bottom: 100%;
  margin-bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--vcvr-wrap-pad);
  border-radius: 7px;
  line-height: 0;
}

.vcvr-mini-cat-btn {
  --mini-connector-thickness: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  cursor: default;
  z-index: 1;
}

.vcvr-mini-cat-btn::after,
.vcvr-mini-cat-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--mini-to-wrap-gap, 11px) + var(--vcvr-wrap-pad) - 2px);
  height: var(--mini-connector-thickness);
  border-radius: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.vcvr-mini-cat-btn::before {
  display: none;
}

/* P1 locked (armed or complete): show inner connector on the P1 badge side */
#verses:has(.lock-button-half-border-left) .vcvr-mini-cat-btn-left::before {
  display: block;
}

#verses:has(.lock-button-half-border-right) .vcvr-mini-cat-btn-right::before {
  display: block;
}

/* Both locked: show inner connectors on all badges */
#verses:has(.lock-button-locked) .vcvr-mini-cat-btn::before {
  display: block;
}

.vcvr-mini-cat-btn-left {
  --mini-to-wrap-gap: 11px;
  left: calc(100% + var(--mini-to-wrap-gap));
}

.vcvr-mini-cat-btn-left::after {
  right: calc(100% - 2px);
  background: linear-gradient(to left,
      var(--mini-ring) 0%,
      var(--mini-ring) 50%,
      var(--mini-connector-vcvr-color) 50%,
      var(--mini-connector-vcvr-color) 100%);
}

.vcvr-mini-cat-btn-left::before {
  left: calc(100% - 2px);
  background: linear-gradient(to right,
      var(--mini-ring) 0%,
      var(--mini-ring) 50%,
      var(--mini-connector-vcvr-color) 50%,
      var(--mini-connector-vcvr-color) 100%);
}

.vcvr-mini-cat-btn-right {
  --mini-to-wrap-gap: 11px;
  right: calc(100% + var(--mini-to-wrap-gap));
}

.vcvr-mini-cat-btn-right::after {
  left: calc(100% - 2px);
  background: linear-gradient(to right,
      var(--mini-ring) 0%,
      var(--mini-ring) 50%,
      var(--mini-connector-vcvr-color) 50%,
      var(--mini-connector-vcvr-color) 100%);
}

.vcvr-mini-cat-btn-right::before {
  right: calc(100% - 2px);
  background: linear-gradient(to left,
      var(--mini-ring) 0%,
      var(--mini-ring) 50%,
      var(--mini-connector-vcvr-color) 50%,
      var(--mini-connector-vcvr-color) 100%);
}

.vcvr-mini-cat-btn-hidden {
  opacity: 0;
  pointer-events: none;
}

.vcvr-mini-cat-btn.link-cat-btn {
  --mini-ring: #95c4e4;
  --mini-fill-top: #caeeff;
  --mini-fill-mid: #bee7ff;
  --mini-fill-bottom: #a8d4ee;
  /* Mini badges are hard-coded and independent from category button colors. */
  background: linear-gradient(to bottom, var(--mini-fill-top) 0%, var(--mini-fill-mid) 58%, var(--mini-fill-bottom) 100%);
  color: #111;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 0 0 4px var(--mini-ring),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

.vcvr-mini-cat-btn.vcvr-mini-color-blue {
  --mini-fill-top: #caeeff;
  --mini-fill-mid: #bee7ff;
  --mini-fill-bottom: #a8d4ee;
  --mini-ring: #95c4e4;
}

.vcvr-mini-cat-btn.vcvr-mini-color-teal {
  --mini-fill-top: #bceeea;
  --mini-fill-mid: #b0e8e4;
  --mini-fill-bottom: #9ad3cf;
  --mini-ring: #81cac6;
}

.vcvr-mini-cat-btn.vcvr-mini-color-magenta {
  --mini-fill-top: #fcc9ce;
  --mini-fill-mid: #f9bcc3;
  --mini-fill-bottom: #e4a8af;
  --mini-ring: #b7666f;
}

.vcvr-mini-cat-btn.vcvr-mini-color-green {
  --mini-fill-top: #a0d2bd;
  --mini-fill-mid: #93cab2;
  --mini-fill-bottom: #80b39e;
  --mini-ring: #6ea98f;
}

.vcvr-mini-cat-btn.vcvr-mini-color-orange {
  --mini-fill-top: #fbd2a2;
  --mini-fill-mid: #f9c78f;
  --mini-fill-bottom: #e3b37d;
  --mini-ring: #e1a05f;
}

.game[data-button-size="normal"] .vcvr-btn-wrap-left:has(.vcvr-mini-cat-btn:not(.vcvr-mini-cat-btn-hidden)) {
  transform: translateX(calc(-50% - 51px));
}

.game[data-button-size="normal"] .vcvr-btn-wrap-right:has(.vcvr-mini-cat-btn:not(.vcvr-mini-cat-btn-hidden)) {
  transform: translateX(calc(-50% + 51px));
}

.vcvr-btn-wrap-left {
  background: linear-gradient(to right, #5cb87a, #1a5c38);
}

.vcvr-btn-wrap-left:has(.vcvr-mini-cat-btn:not(.vcvr-mini-cat-btn-hidden)) {
  transform: translateX(calc(-50% - 57px));
}

.vcvr-btn-wrap-right {
  background: linear-gradient(to right, #5bb8e8, #1a4a7a);
}

.vcvr-btn-wrap-right:has(.vcvr-mini-cat-btn:not(.vcvr-mini-cat-btn-hidden)) {
  transform: translateX(calc(-50% + 57px));
}

.vcvr-btn-wrap:has(.vcvr-btn-active) {
  background: linear-gradient(to bottom, #f6e39a 0%, #ddb955 52%, #b8862f 100%);
}

.vcvr-btn-wrap:has(.vcvr-btn:disabled) {
  opacity: 0;
  pointer-events: none;
}

.vcvr-btn {
  --vcvr-ring: #dbc393;
  --vcvr-fill-top: #fffefe;
  --vcvr-fill-mid: #fffefc;
  --vcvr-fill-bottom: #fdfaf4;
  color: #000;
  font-size: calc(var(--modal-body-fs) * 0.975);
  font-weight: normal;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(to bottom, var(--vcvr-fill-top) 0%, var(--vcvr-fill-mid) 68%, var(--vcvr-fill-bottom) 100%);
  border: 1px solid var(--vcvr-ring);
  border-radius: 0;
  box-sizing: border-box;
  height: 41.12px;
  padding: 2px 13px 0;
  cursor: pointer;
  font-family: inherit;
  width: 180.65px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.11);
}

.vcvr-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0));
}

.vcvr-btn:not(:disabled):hover {
  filter: brightness(0.985);
}

.vcvr-btn-hold-primed:not(:disabled) {
  --vcvr-fill-top: #ffffff;
  --vcvr-fill-mid: #fffefd;
  --vcvr-fill-bottom: #fefbf5;
  --vcvr-ring: #dcc396;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.085);
  filter: brightness(0.985);
}

.vcvr-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

.vcvr-btn-active {
  --vcvr-fill-top: #fefdf8;
  --vcvr-fill-mid: #fcfaf5;
  --vcvr-fill-bottom: #faf6ec;
  --vcvr-ring: #c79c34;
}

.verse-card-halo {
  box-shadow: inset 0 0 0 4px #d7ae43 !important;
}

.link-cat-btn-halo {
  box-shadow: inset 0 0 0 5px #d7ae43 !important;
}

.pathway-shimmer-10s {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
}

/* Keep VCVR wrappers anchored above cards when shimmer is active. */
.vcvr-btn-wrap.pathway-shimmer-10s {
  position: absolute;
}

/* Wrapper shimmer is redundant because the child button already shimmers. */
.vcvr-btn-wrap.pathway-shimmer-10s::after {
  content: none;
}

/* Keep lock button anchored when shimmer is active. */
.lock-button.pathway-shimmer-10s {
  position: absolute;
}

.pathway-shimmer-10s::after,
.pathway-shimmer-10s-card::after {
  content: "";
  position: absolute;
  width: 168%;
  height: 168%;
  top: -34%;
  left: -34%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.9;
  transform: translate3d(-104%, 104%, 0) rotate(-29deg);
  background: linear-gradient(135deg,
      rgba(250, 224, 150, 0) 43%,
      rgba(255, 247, 220, 0.6) 48%,
      rgba(255, 234, 162, 0.88) 50%,
      rgba(255, 247, 220, 0.6) 52%,
      rgba(250, 224, 150, 0) 57%);
  animation: pathway-gold-shimmer-10s var(--pathway-shimmer-cycle-ms) linear infinite;
  will-change: transform, opacity;
  z-index: 3;
}

.pathway-shimmer-10s-card {
  position: relative;
  isolation: isolate;
  contain: paint;
}

.pathway-shimmer-10s-card::after {
  box-shadow: inset 0 0 0 1px rgba(255, 234, 176, 0.55);
}

/* Pause shimmer during verse navigation for better scroll/click performance */
.game.shimmer-suppressed .pathway-shimmer-10s::after,
.game.shimmer-suppressed .pathway-shimmer-10s-card::after {
  animation: none;
  opacity: 0;
}

.link-cat-btn-2x {
  position: relative;
}

.link-cat-btn-2x::after {
  content: "2x";
  position: absolute;
  right: 6px;
  bottom: 1px;
  color: #6fa85a;
  font-size: 1.2184rem;
  font-weight: 700;
  line-height: 1;
  text-shadow:
    1px 0 0 #fbf8ef,
    -1px 0 0 #fbf8ef,
    0 1px 0 #fbf8ef,
    0 -1px 0 #fbf8ef,
    1px 1px 0 #fbf8ef,
    1px -1px 0 #fbf8ef,
    -1px 1px 0 #fbf8ef,
    -1px -1px 0 #fbf8ef;
}

@keyframes cat-halo-pulse-soft {

  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(239, 224, 182, 0.82)) drop-shadow(0 0 1px rgba(239, 224, 182, 0.56));
  }

  50% {
    filter: drop-shadow(0 0 7px rgba(243, 231, 198, 0.9)) drop-shadow(0 0 1px rgba(239, 224, 182, 0.64));
  }
}

@keyframes pathway-gold-shimmer-10s {

  0% {
    opacity: 0;
    transform: translate3d(-104%, 104%, 0) rotate(-29deg);
  }

  4% {
    opacity: 1;
  }

  18% {
    opacity: 1;
    transform: translate3d(104%, -104%, 0) rotate(-29deg);
  }

  24%,
  100% {
    opacity: 0;
    transform: translate3d(104%, -104%, 0) rotate(-29deg);
  }
}

@keyframes verse-click-toast-shimmer-ltr {
  0% {
    opacity: 1;
    transform: translate3d(-74%, 0, 0) rotate(-29deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(104%, 0, 0) rotate(-29deg);
  }
}

@keyframes verse-click-toast-shimmer-rtl {
  0% {
    opacity: 1;
    transform: translate3d(74%, 0, 0) rotate(-29deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(-104%, 0, 0) rotate(-29deg);
  }
}

@keyframes start-round-halo-pulse {

  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(216, 166, 62, 0.9)) drop-shadow(0 0 2px rgba(216, 166, 62, 0.7));
  }

  50% {
    filter: drop-shadow(0 0 9px rgba(216, 166, 62, 0.9)) drop-shadow(0 0 4px rgba(216, 166, 62, 0.62));
  }
}

@keyframes start-round-button-halo-pulse {

  0%,
  100% {
    opacity: 0.46;
    transform: scale(0.976);
  }

  10% {
    opacity: 0.54;
    transform: scale(0.986);
  }

  20% {
    opacity: 0.64;
    transform: scale(0.996);
  }

  30% {
    opacity: 0.74;
    transform: scale(1.006);
  }

  40% {
    opacity: 0.84;
    transform: scale(1.016);
  }

  50% {
    opacity: 0.92;
    transform: scale(1.026);
  }

  60% {
    opacity: 0.84;
    transform: scale(1.016);
  }

  70% {
    opacity: 0.74;
    transform: scale(1.006);
  }

  80% {
    opacity: 0.64;
    transform: scale(0.996);
  }

  90% {
    opacity: 0.54;
    transform: scale(0.986);
  }
}

.verses .verse {
  --verse-ring: #ddd2b5;
  --verse-fill-top: #fffefd;
  --verse-fill-mid: #fefdf9;
  --verse-fill-bottom: #fcf9f0;
  width: 100%;
  height: 359px;
  flex: 0 0 auto;
  background: linear-gradient(to bottom, var(--verse-fill-top) 0%, var(--verse-fill-mid) 70%, var(--verse-fill-bottom) 100%);
  border: 1px solid var(--verse-ring);
  border-radius: var(--verse-card-radius);
  padding: 1rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
  font-size: var(--modal-body-fs);
  color: #000;
  overflow-x: hidden;
  overflow-y: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.11);
}

.verses .verse::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0));
}

.verses .verse.verse-overflowing {
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.verses .verse[data-slot] {
  cursor: pointer;
}

.verses .verse[data-slot]:hover {
  filter: brightness(0.988);
}

.verses.vc-hover-disabled .verse[data-slot]:hover {
  filter: none;
}

.verse-edge-toast {
  position: absolute;
  z-index: 95;
  pointer-events: none;
  color: #1f1a12;
  font-size: 1.03rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: none;
  opacity: 0;
  white-space: nowrap;
  background: #f3eddf;
  border: 1px solid #cfbf99;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 500;
}

.verse-edge-toast[data-side="left"] {
  transform: translateX(0);
}

.verse-edge-toast[data-side="right"] {
  transform: translateX(0);
}

.verse-edge-toast.show {
  animation: verse-edge-toast-fade 0.9s ease-out forwards;
}

@keyframes verse-edge-toast-fade {
  0% {
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ── Button-size cluster toggle ── */
.dev-btn-size-cluster {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 5px;
  line-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: 5px;
  opacity: 0.85;
}

.dev-btn-size-cluster:hover {
  opacity: 1;
}

.dev-btn-size-mini-row {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
  justify-content: center;
}

.dev-btn-size-mini-rect {
  display: block;
  width: 13px;
  height: 8px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.link-cat-btn-size-cluster {
  --btn-size-toggle-width: 73px;
  --btn-size-toggle-top: 678px;
  --btn-size-left-shift: 20px;
  position: absolute;
  left: calc(8px + 50% - ((6 * var(--cat-btn-width)) + (5 * var(--cat-gap))) / 2 - var(--cat-gap) - var(--btn-size-toggle-width) - var(--btn-size-left-shift));
  top: var(--btn-size-toggle-top);
  width: var(--btn-size-toggle-width);
  min-width: var(--btn-size-toggle-width);
  min-height: 46px;
  padding: 11px 12px;
  border-radius: 11px;
  margin-left: 23px;
  transform: translateY(-50%);
  z-index: 56;
}

.link-cat-btn-size-cluster::before {
  content: "";
  position: absolute;
  inset: -12px -2px -12px -14px;
}

.link-cat-btn-size-cluster .dev-btn-size-mini-row {
  gap: 4px;
}

.link-cat-btn-size-cluster .dev-btn-size-mini-rect {
  width: 19px;
  height: 12px;
  border-radius: 5px;
}

.dev-btn-size-mini-teal {
  background: #b0e8e4;
}

.dev-btn-size-mini-blue {
  background: #bee7ff;
}

.dev-btn-size-mini-red {
  background: #f9bcc3;
}

.dev-btn-size-mini-orange {
  background: #f9c78f;
}

.dev-btn-size-mini-green {
  background: #93cab2;
}

/* ── Nav: Text-size button & dropdown ── */
.nav-text-size-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-text-size-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  line-height: 1;
}

.nav-text-size-btn:hover {
  opacity: 0.65;
}

.nav-text-size-icon {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: 'Avenir Next Demi Bold', 'Avenir Next', 'Avenir', 'Gill Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nav-text-size-a-big {
  font-size: 22px;
  line-height: 1;
}

.nav-text-size-a-small {
  font-size: 13px;
  line-height: 1;
}

.nav-text-size-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #4a525d;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: var(--modal-body-fs);
}

.nav-text-size-dropdown[hidden] {
  display: none;
}