:root {
  color-scheme: light;
  --page: #f4efe5;
  --page-warm: #fbf7ef;
  --panel: rgba(251, 247, 239, 0.88);
  --panel-solid: #fbf7ef;
  --panel-deep: #1c2221;
  --panel-deep-2: #252a28;
  --charcoal: #202624;
  --charcoal-soft: #303532;
  --ink: #1d2020;
  --muted: #827e73;
  --muted-dark: #b9b1a3;
  --line: #ded6c6;
  --line-strong: #cfc4b1;
  --sage: #586c54;
  --sage-dark: #40533f;
  --sage-soft: #dfe6d7;
  --amber: #f4ba62;
  --amber-soft: #ffe3a6;
  --amber-deep: #b86d1f;
  --violet: #9a87ad;
  --shadow: 0 24px 58px rgba(65, 58, 45, 0.12);
  --shadow-soft: 0 14px 32px rgba(65, 58, 45, 0.085);
  --shadow-panel: 0 18px 42px rgba(65, 58, 45, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui:      "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* aliases so existing var(--serif) / var(--sans) usages pick up the new fonts */
  --serif: var(--font-heading);
  --sans:  var(--font-ui);
  --footer-height: 41px;
  --title-fs: clamp(3.2rem, 5.6vw, 4.9rem);
  --app-top-space: clamp(4px, 0.4vw, 8px);
  --app-bottom-space: clamp(26px, 3vw, 36px);
  --hero-bottom-space: clamp(0px, 0.1vw, 1px);
  --action-button-height: clamp(52px, 4.1vw, 60px);
  --option-button-height: clamp(42px, 3vw, 50px);
  --control-gap: clamp(10px, 1vw, 14px);
  --art-bamboo-top-left: url("./assets/theme-zen/art/bamboo-top-left.webp");
  --art-bamboo-small-left: url("./assets/theme-zen/art/bamboo-small-left.webp");
  --art-mountain-mist-left: url("./assets/theme-zen/art/mountain-mist-left.webp");
  --art-mountain-mist-right: url("./assets/theme-zen/art/mountain-mist-right.webp");
  --art-shore-stones-bottom-left: url("./assets/theme-zen/art/2shore-stones-bottom-left.webp");
  --art-mist-bottom-left: url("./assets/theme-zen/art/mist-bottom-left.webp");
  --art-waterline-bottom-left: url("./assets/theme-zen/art/mist-bottom-left-o.webp");
  --art-stats-stones-corner: url("./assets/theme-zen/art/stats-stones-corner.webp");
  --art-lotus-ornament: url("./assets/theme-zen/art/lotus-ornament.webp");
  --art-brand-top-ring: url("./assets/theme-zen/art/brand-top-ring.webp");
  --art-paper-grain: url("./assets/theme-zen/art/paper-grain-overlay.webp");
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  overflow-x: hidden; /* prevent horizontal scroll without making body a scroll container */
  scrollbar-gutter: stable;
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  padding-bottom: var(--footer-height);
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 255, 255, 0.76), transparent 32rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(244, 239, 229, 0.28) 42%, rgba(235, 227, 214, 0.76)),
    var(--page);
  color: var(--ink);
  font-family: var(--sans);
}

body.is-about-open {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 72% 13%, rgba(121, 127, 119, 0.1), transparent 18rem),
    radial-gradient(ellipse at 19% 88%, rgba(84, 91, 86, 0.11), transparent 22rem),
    linear-gradient(90deg, rgba(88, 108, 84, 0.07), transparent 18%, transparent 82%, rgba(88, 108, 84, 0.06));
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--art-paper-grain);
  background-repeat: repeat;
  background-size: 512px 512px;
  opacity: 0.055;
  mix-blend-mode: multiply;
  z-index: 1;
}

button {
  font: inherit;
}

button:focus-visible,
.board-cell:focus-visible {
  outline: 3px solid rgba(88, 108, 84, 0.86);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.app-shell {
  position: relative;
  z-index: 2;
  width: min(1340px, calc(100% - 48px));
  min-height: calc(100vh - var(--footer-height));
  margin: 0 auto;
  padding: var(--app-top-space) 0 var(--app-bottom-space);
}

.decor {
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

.decor-bamboo {
  top: -36px;
  left: -42px;
  width: min(38vw, 500px);
  height: min(50vw, 640px);
  opacity: 0.74;
  background-image:
    var(--art-bamboo-top-left),
    radial-gradient(ellipse at 12% 8%, rgba(73, 91, 69, 0.18), transparent 16rem);
  background-repeat: no-repeat;
  background-position: left top, left top;
  background-size: contain, auto;
}

.decor-bamboo::before {
  content: none;
}

.decor-bamboo::after {
  content: "";
  position: absolute;
  left: 8%;
  bottom: 8%;
  width: 42%;
  height: 42%;
  background-image: var(--art-bamboo-small-left);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  opacity: 0.72;
  pointer-events: none;
}

.decor-mist-left,
.decor-mist-right {
  top: 0;
  height: min(44vw, 560px);
  opacity: 0.58;
  background-repeat: no-repeat;
  background-size: contain;
  filter: blur(0.3px) saturate(0.88) contrast(1.06);
}

.decor-mist-left {
  left: 0;
  width: min(58vw, 800px);
  opacity: 0.62;
  background-image:
    var(--art-mountain-mist-left),
    radial-gradient(ellipse at 8% 72%, rgba(91, 99, 92, 0.18), transparent 22rem);
  background-position: left bottom, left bottom;
}

.decor-mist-right {
  right: 0;
  width: min(60vw, 840px);
  opacity: 0.52;
  background-image:
    var(--art-mountain-mist-right),
    radial-gradient(ellipse at 92% 26%, rgba(91, 99, 92, 0.14), transparent 22rem);
  background-position: right top, right top;
}

.decor-stones-bottom-left {
  left: clamp(-40px, -1.5vw, -10px);
  bottom: -5px;
  width: clamp(540px, 50vw, 760px);
  height: clamp(420px, 40vw, 580px);
  opacity: 0.95;
  background-image:
    var(--art-shore-stones-bottom-left),
    var(--art-waterline-bottom-left),
    var(--art-mist-bottom-left),
    radial-gradient(ellipse at 18% 84%, rgba(41, 45, 42, 0.14), transparent 14rem);
  background-repeat: no-repeat;
  /* stones flush at bottom so water reflection at base is fully visible */
  background-position: left bottom, left bottom, left top, left bottom;
  background-size: 82% auto, 100% auto, contain, auto;
}


.hero {
  display: grid;
  justify-items: center;
  gap: 0px;
  margin-bottom: var(--hero-bottom-space);
  text-align: center;
}

.hero-ornament {
  position: relative;
  width: clamp(105px, 9.5vw, 130px);   /* +25% of original clamp(84px, 7.6vw, 104px) */
  height: clamp(75px, 7.0vw, 100px);   /* +25% of original clamp(60px, 5.6vw, 80px) */
  margin-bottom: clamp(-14px, -1.5vw, -10px); /* pull h1 up ~75%; ring stays in place */
  /* shift left so the enso centre sits over the 'k' stem of "Darkenn" (0.26 x title size) */
  transform: translateX(calc(-0.26 * var(--title-fs) + 5px));
  background-image: var(--art-brand-top-ring);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
}

.hero-ornament::before {
  content: none;
  display: none;
}

.hero-ornament::after {
  content: none;
  display: none;
}

.hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--title-fs);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 0.9;
}

.subtitle {
  margin: 0;
  color: #6f6b61;
  font-size: clamp(0.54rem, 0.8vw, 0.65rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.hero-rule {
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--sage);
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(240px, 315px) minmax(360px, 1fr) minmax(260px, 330px);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

.panel-card,
.info-card {
  border: 1px solid rgba(168, 157, 138, 0.42);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(250, 246, 238, 0.82) 55%, rgba(247, 242, 233, 0.8)),
    var(--panel);
  box-shadow:
    var(--shadow-panel),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  backdrop-filter: blur(12px);
}

.control-panel {
  display: grid;
  align-content: start;
  gap: clamp(18px, 1.8vw, 22px);
  padding: clamp(22px, 2.1vw, 28px) clamp(22px, 2vw, 26px) clamp(24px, 2.25vw, 30px);
  margin-top: clamp(60px, 5.6vw, 80px);
}

.panel-block {
  display: grid;
  gap: clamp(14px, 1.5vw, 18px);
  padding-bottom: clamp(20px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
}

.panel-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Quick Actions strip + Puzzle Setup grouping are mobile-only; transparent/hidden on desktop. */
.setup-group { display: contents; }      /* desktop: no box → left rail unchanged */
.quick-actions { display: none; }        /* hidden on desktop/tablet */

/* Wrapping Grid+Difficulty makes Difficulty the :last-child of setup-group, which the generic
   .panel-block:last-child rule above would strip. Restore the divider so the desktop left rail
   keeps its Grid | Difficulty | Leaderboard separators exactly as before. */
.setup-group .panel-block:last-child {
  padding-bottom: clamp(20px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
}

.panel-block h2,
.card-heading h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.section-icon,
.card-icon {
  position: relative;
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--sage);
}

.leaf-icon::before {
  content: "";
  width: 14px;
  height: 8px;
  border: 2px solid var(--sage);
  border-left: 0;
  border-radius: 100% 0 100% 0;
  transform: rotate(-34deg);
}

.grid-icon {
  background:
    radial-gradient(circle, var(--sage) 0 2px, transparent 2.5px) 0 0 / 9px 9px;
}

.bar-icon::before {
  content: "";
  width: 14px;
  height: 14px;
  background:
    linear-gradient(to top, var(--sage) 0 35%, transparent 35%),
    linear-gradient(to top, transparent 0 24%, var(--sage) 24% 68%, transparent 68%),
    linear-gradient(to top, transparent 0 12%, var(--sage) 12% 100%);
  background-position: 1px 0, 6px 0, 11px 0;
  background-repeat: no-repeat;
  background-size: 3px 100%;
}

.trophy-icon::before {
  content: "";
  width: 12px;
  height: 9px;
  border: 2px solid var(--sage);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 5px 0 -2px var(--sage), /* stem */ 0 7px 0 -1px var(--sage); /* base */
}

/* ── Leaderboard panel block ─────────────────────────────────── */

.leaderboard-card {
  position: relative;
  color: inherit;
  border-radius: 18px;
}

.leaderboard-context {
  display: block;
  margin: -3px 0 13px;
  color: var(--sage-dark);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 2.45rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.98;
  text-transform: none;
}

.lb-microcopy {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.4;
}

.lb-microcopy--sub {
  margin-bottom: 10px;
  opacity: 0.75;
}

.leaderboard-preview {
  display: grid;
  gap: 5px;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(155, 146, 126, 0.24);
}

.leaderboard-preview-header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(62px, auto);
  gap: 8px;
  color: rgba(77, 101, 72, 0.82);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.leaderboard-preview-header span:last-child {
  text-align: right;
}

.leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
  position: relative;
  z-index: 1;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(62px, auto);
  gap: 8px;
  align-items: center;
  min-height: 23px;
  padding: 2px 0;
  color: var(--ink);
  font-size: 0.76rem;
}

.lb-rank {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 700;
}

.lb-player {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-score {
  color: var(--sage-dark);
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: right;
}

.leaderboard-placeholder {
  color: var(--muted);
  display: block;
  font-style: italic;
  font-size: 0.72rem;
  line-height: 1.35;
}

.leaderboard-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  padding: 0 14px;
  border: 1px solid rgba(77, 101, 72, 0.46);
  border-radius: 12px;
  background: rgba(77, 101, 72, 0.08);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.leaderboard-trigger:hover {
  border-color: rgba(77, 101, 72, 0.7);
  background: rgba(77, 101, 72, 0.13);
  transform: translateY(-1px);
}

.leaderboard-trigger:focus-visible {
  outline: 2px solid rgba(77, 101, 72, 0.65);
  outline-offset: 4px;
}

/* Dedicated MVP Global Leaderboard page */

.leaderboard-page {
  min-height: 100vh;
}

.leaderboard-page-shell {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) 0 clamp(68px, 8vw, 96px);
}

.leaderboard-page-hero {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  margin: 0 auto clamp(18px, 3vw, 34px);
}

.leaderboard-info {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}

.leaderboard-info summary {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(77, 101, 72, 0.38);
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.86);
  color: var(--sage-dark);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-soft);
  list-style: none;
}

.leaderboard-info summary::-webkit-details-marker {
  display: none;
}

.leaderboard-info summary:hover,
.leaderboard-info summary:focus-visible {
  border-color: rgba(77, 101, 72, 0.7);
  background: rgba(77, 101, 72, 0.1);
  outline: none;
}

.leaderboard-info-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(310px, calc(100vw - 40px));
  padding: 16px 18px;
  border: 1px solid rgba(155, 146, 126, 0.36);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.98), rgba(242, 235, 222, 0.96));
  color: var(--ink);
  box-shadow: var(--shadow);
  text-align: left;
}

.leaderboard-info-panel strong {
  display: block;
  margin-bottom: 8px;
  color: var(--sage-dark);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.leaderboard-info-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.leaderboard-info-panel p + p {
  margin-top: 8px;
}

.leaderboard-page-lotus {
  width: clamp(42px, 6vw, 72px);
  aspect-ratio: 1;
  margin-bottom: 10px;
  background-image: var(--art-lotus-ornament);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.72;
  pointer-events: none;
}

.leaderboard-page-hero h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0;
}

.leaderboard-page-subtitle {
  margin: 12px 0 0;
  color: var(--sage-dark);
  font-size: clamp(0.92rem, 1.5vw, 1.08rem);
  font-weight: 700;
}

.leaderboard-page-helper {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.leaderboard-back-link {
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  margin-top: 20px;
  padding: 0 20px;
  border: 1px solid rgba(77, 101, 72, 0.48);
  border-radius: 999px;
  background: rgba(251, 247, 239, 0.82);
  color: var(--sage-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: var(--shadow-soft);
}

.leaderboard-back-link:hover,
.leaderboard-back-link:focus-visible {
  border-color: rgba(77, 101, 72, 0.74);
  background: rgba(77, 101, 72, 0.1);
  outline: none;
}

.leaderboard-table-card {
  position: relative;
  overflow: hidden;
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid rgba(155, 146, 126, 0.34);
  border-radius: clamp(20px, 3vw, 30px);
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.96), rgba(242, 235, 222, 0.92));
  box-shadow: var(--shadow);
}

.leaderboard-page-status {
  min-height: 24px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.leaderboard-empty-state {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: clamp(28px, 6vw, 56px);
  color: var(--muted);
  text-align: center;
}

.leaderboard-empty-state[hidden] {
  display: none;
}

.leaderboard-empty-state strong {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 500;
}

.leaderboard-table-scroll {
  overflow-x: auto;
  scrollbar-color: rgba(77, 101, 72, 0.34) transparent;
}

.leaderboard-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 13px 14px;
  text-align: left;
  vertical-align: middle;
}

.leaderboard-table th {
  color: var(--sage-dark);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.leaderboard-table tbody tr {
  background: rgba(255, 252, 244, 0.72);
  box-shadow: inset 0 0 0 1px rgba(155, 146, 126, 0.22);
}

.leaderboard-table tbody tr td:first-child {
  border-radius: 14px 0 0 14px;
}

.leaderboard-table tbody tr td:last-child {
  border-radius: 0 14px 14px 0;
}

.rank-cell,
.moves-cell,
.time-cell,
.score-cell {
  font-variant-numeric: tabular-nums;
}

.rank-cell {
  color: var(--sage-dark);
  font-weight: 900;
}

.player-cell {
  max-width: 190px;
  overflow: hidden;
  color: var(--ink);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-cell,
.grid-cell,
.difficulty-cell,
.moves-cell,
.time-cell {
  color: var(--muted);
  font-weight: 700;
}

.score-column,
.score-cell {
  text-align: right;
}

.score-cell {
  color: var(--sage-dark);
  font-weight: 900;
}

.score-cell::before {
  content: "";
}

.leaderboard-table tbody .score-cell {
  background: linear-gradient(135deg, rgba(244, 186, 98, 0.28), rgba(88, 108, 84, 0.13));
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.28);
}

.leaderboard-back-link--bottom {
  display: flex;
  width: fit-content;
  margin: clamp(18px, 3vw, 28px) auto 0;
}

@media (max-width: 620px) {
  .leaderboard-page-shell {
    width: min(100% - 18px, 1120px);
    padding-top: 22px;
  }

  .leaderboard-table-card {
    padding: 10px;
    border-radius: 22px;
  }

  .leaderboard-table {
    min-width: 740px;
  }

  .leaderboard-table th,
  .leaderboard-table td {
    padding: 11px 12px;
  }
}

.action-stack,
.option-grid {
  display: grid;
  gap: var(--control-gap);
}

.primary-button,
.ghost-button,
.option-button {
  min-height: var(--option-button-height);
  border: 1px solid rgba(152, 146, 130, 0.4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.primary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.1vw, 14px);
  width: 100%;
  height: var(--action-button-height);
  padding: 0 clamp(18px, 2vw, 28px);
}

.primary-button {
  border-color: rgba(64, 83, 63, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(180deg, #6c7e65, var(--sage-dark));
  color: #fbf7ee;
  box-shadow:
    0 16px 30px rgba(64, 83, 63, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.ghost-button,
.option-button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(252, 249, 242, 0.82));
  color: var(--ink);
  box-shadow: 0 8px 16px rgba(65, 58, 45, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.primary-button:hover,
.ghost-button:hover,
.option-button:hover {
  transform: translateY(-1px);
  border-color: var(--sage);
}

.primary-button:hover {
  box-shadow: 0 17px 30px rgba(64, 83, 63, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.ghost-button:hover,
.option-button:hover {
  background: rgba(255, 254, 249, 0.78);
  box-shadow: 0 12px 22px rgba(65, 58, 45, 0.085), inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.primary-button:active,
.ghost-button:active,
.option-button:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 8px rgba(45, 41, 33, 0.16);
}

.button-icon {
  display: inline-grid;
  width: clamp(22px, 2vw, 28px);
  height: clamp(22px, 2vw, 28px);
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 1.05rem;
  letter-spacing: 0;
  line-height: 1;
}

.option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.option-grid--difficulty {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.option-grid--difficulty .option-button:last-child {
  grid-column: 2;
}

.option-button {
  min-width: 0;
  min-height: var(--option-button-height);
  padding: 0 clamp(6px, 0.85vw, 10px);
  overflow: hidden;
  font-size: clamp(0.74rem, 0.78vw, 0.82rem);
  letter-spacing: 0.06em;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.option-button.is-active {
  border-color: var(--sage-dark);
  background: linear-gradient(180deg, rgba(235, 241, 227, 0.88), rgba(218, 228, 207, 0.78));
  color: var(--sage-dark);
  box-shadow:
    inset 0 0 0 1px rgba(64, 83, 63, 0.18),
    0 9px 18px rgba(64, 83, 63, 0.11);
}

.board-zone {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 0;
}

.board-meta {
  display: flex;
  gap: 10px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
}

.board-meta span {
  border: 1px solid rgba(88, 108, 84, 0.25);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255, 252, 245, 0.54);
  color: var(--sage-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.board-frame {
  width: min(100%, 582px);
  margin-top: 13px;
  padding: clamp(11px, 2vw, 20px);
  border: 1px solid rgba(98, 105, 100, 0.7);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 20%),
    radial-gradient(circle at 52% 38%, rgba(255, 255, 255, 0.06), transparent 58%),
    radial-gradient(circle at 12% 8%, rgba(244, 186, 98, 0.09), transparent 22rem),
    radial-gradient(circle at 50% 120%, rgba(0, 0, 0, 0.34), transparent 60%),
    var(--charcoal);
  box-shadow:
    0 34px 64px rgba(65, 58, 45, 0.26),
    0 12px 20px rgba(32, 38, 36, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 0 0 5px rgba(9, 12, 12, 0.34),
    inset 0 2px 26px rgba(255, 255, 255, 0.08),
    inset 0 -18px 40px rgba(0, 0, 0, 0.32);
}

.board-placeholder {
  display: grid;
  min-height: min(62vw, 520px);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(16, 20, 20, 0.46);
  color: var(--muted-dark);
}

.board-grid {
  --grid-size: 3;
  display: grid;
  grid-template-columns: repeat(var(--grid-size), minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 1;
}

.board-cell {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(117, 124, 119, 0.3);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 42%),
    #1c2221;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.board-cell::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 23%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 22%, transparent 40%),
    radial-gradient(circle at 50% 50%, #3c423f, #20262400 70%),
    linear-gradient(150deg, #424a46, #1a201f);
  box-shadow:
    inset 4px 5px 12px rgba(255, 255, 255, 0.055),
    inset -10px -12px 20px rgba(0, 0, 0, 0.46),
    inset 0 0 1px rgba(255, 255, 255, 0.12),
    0 5px 11px rgba(0, 0, 0, 0.4);
}

.board-cell:hover {
  transform: translateY(-1px);
  border-color: rgba(244, 186, 98, 0.36);
}

.board-cell:active {
  transform: translateY(0);
}

.board-cell:active::before {
  transform: scale(0.97);
}

.board-cell.is-on {
  border-color: rgba(244, 186, 98, 0.58);
  box-shadow:
    inset 0 0 28px rgba(244, 186, 98, 0.2),
    0 0 30px rgba(244, 186, 98, 0.18);
}

.board-cell.is-on::before {
  background:
    radial-gradient(circle at 36% 27%, #ffffff 0 6%, #fff6cf 14%, #ffe09f 34%, #f4ba62 64%, #c47a24 90%, #9a5a16 100%);
  box-shadow:
    0 0 20px rgba(244, 186, 98, 0.82),
    0 0 50px rgba(244, 186, 98, 0.42),
    0 0 88px rgba(244, 186, 98, 0.18),
    inset 0 2px 14px rgba(255, 255, 255, 0.66),
    inset -10px -13px 22px rgba(150, 80, 16, 0.22);
}

/* Tight specular glint on lit cells for a glossy, premium read.
   Excluded when hinted so the hint outline (also ::after) stays visible. */
.board-cell.is-on:not(.is-hinted)::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.9) 0 4%, rgba(255, 255, 255, 0.28) 9%, transparent 16%);
}

.board-cell.is-hinted {
  border-width: 2px;
  border-color: rgba(154, 135, 173, 1);
  outline: 4px solid rgba(154, 135, 173, 0.82);
  outline-offset: 3px;
  box-shadow:
    0 0 0 7px rgba(133, 110, 156, 0.24),
    0 0 18px rgba(133, 110, 156, 0.55),
    0 0 44px rgba(133, 110, 156, 0.65);
  animation: hint-glow 1.8s ease-in-out infinite;
}

.board-cell.is-hinted::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid rgba(210, 190, 230, 0.6);
  border-radius: 8px;
  pointer-events: none;
}

@keyframes hint-glow {
  0%, 100% {
    box-shadow:
      0 0 0 7px rgba(133, 110, 156, 0.18),
      0 0 16px rgba(133, 110, 156, 0.48),
      0 0 36px rgba(133, 110, 156, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 7px rgba(133, 110, 156, 0.34),
      0 0 26px rgba(133, 110, 156, 0.75),
      0 0 58px rgba(133, 110, 156, 0.82);
  }
}

.board-caption {
  margin: 2px 0 0;
  color: #969084;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-align: center;
  text-transform: uppercase;
}

.decor-lotus {
  width: clamp(58px, 4.46vw, 76px);
  height: clamp(32px, 2.45vw, 41px);
  margin-top: 0;
  margin-bottom: clamp(3px, 0.35vw, 5px);
  opacity: 1;
  filter: contrast(1.71) saturate(2.5) brightness(0.80);
  mix-blend-mode: multiply;
  background-image: var(--art-lotus-ornament);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.decor-lotus::before,
.decor-lotus::after {
  content: none;
  display: none;
}

.info-panel {
  display: grid;
  gap: 14px;
  margin-top: clamp(60px, 5.6vw, 80px);
}

.info-card {
  position: relative;
  overflow: hidden;
  min-height: clamp(156px, 12.6vw, 178px);
  padding: clamp(22px, 2vw, 26px) clamp(22px, 2vw, 26px) clamp(22px, 1.9vw, 24px);
}

.info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.32), transparent 44%);
}

.card-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
}

.card-icon {
  border: 1px solid currentColor;
  border-radius: 50%;
}

.play-icon::before {
  content: "";
  margin-left: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
}

.sun-icon::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow:
    0 -11px 0 -5px currentColor,
    0 11px 0 -5px currentColor,
    11px 0 0 -5px currentColor,
    -11px 0 0 -5px currentColor;
}

.stats-icon {
  border: 0;
}

.stats-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  background:
    linear-gradient(135deg, transparent 0 45%, currentColor 46% 54%, transparent 55%),
    radial-gradient(circle at 22% 72%, currentColor 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 44%, currentColor 0 2px, transparent 2.5px),
    radial-gradient(circle at 77% 24%, currentColor 0 2px, transparent 2.5px);
}

.decor-sprig::before {
  content: none;
}

.stats-card {
  overflow: hidden;
  color: var(--ink);
  border-color: var(--line);
  background:
    radial-gradient(circle at 94% 94%, rgba(223, 230, 215, 0.36), transparent 8rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(249, 244, 235, 0.76)),
    var(--panel);
  box-shadow:
    var(--shadow-panel);
}

.stats-card .card-heading h2,
.stats-card .card-icon {
  color: var(--ink);
}

.stats-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  margin: 0;
}

.stats-list div:not(.stats-divider) {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: baseline;
}

.stats-list dt {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  font-size: 1rem;
}

.stats-list dt::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 1px solid rgba(88, 108, 84, 0.64);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(88, 108, 84, 0.06);
}

.stats-list dd {
  margin: 0;
  color: var(--sage-dark);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.hint-used-label {
  display: inline;
  margin-right: 6px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d96a6a;
}

.stats-divider {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 4px;
}

.stats-divider::before,
.stats-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 35%, var(--line) 65%, transparent);
}

.stats-divider-label {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 0.94rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.decor-stats-stones {
  position: absolute;
  left: clamp(6px, 1.4vw, 18px);
  bottom: 3px;                 /* rock base sits 3px above the card's bottom line */
  z-index: 0;
  width: clamp(176px, 56%, 232px);
  aspect-ratio: 549 / 380;     /* cropped asset: actual rock base = its bottom edge */
  opacity: 0.5;
  mix-blend-mode: multiply;    /* white margins fade out -> soft background watermark */
  background-image: var(--art-stats-stones-corner);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  pointer-events: none;
}

.footer-band {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: grid;
  height: var(--footer-height);
  min-height: 0;
  place-items: center;
  gap: 4px;
  overflow: hidden;
  padding: 10px 20px 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    #1a2120;
  color: rgba(245, 239, 228, 0.68);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-align: center;
  text-transform: uppercase;
}

.footer-ornament {
  display: block;
  width: 48px;
  height: 2px;
  margin: 1px 0 0;
  border-radius: 999px;
  opacity: 0.58;
  background: rgba(244, 186, 98, 0.42);
  pointer-events: none;
}

.footer-ornament::before,
.footer-ornament::after {
  content: none;
  display: none;
}


#ink-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  pointer-events: none;
  visibility: hidden;
}

/* Lightweight mobile/tablet win bloom: a single transform-scaled radial gradient
   (no SVG filters, no backdrop-filter, no animated blur). Same z-index as the SVG
   overlay (below the modal at z:35); only one path runs per device. */
.ink-overlay-fast {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.ink-overlay-fast::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200vmax;
  height: 200vmax;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  /* Solid charcoal core to ~58% then a soft ink edge. 58% of a 200vmax circle
     (radius 58vmax) exceeds the worst-case half-diagonal (~52vmax on a tall
     phone), so corners stay fully covered behind the modal. */
  background: radial-gradient(circle,
    rgba(22, 27, 26, 1) 0%,
    rgba(22, 27, 26, 1) 58%,
    rgba(28, 34, 33, 0.92) 70%,
    rgba(28, 34, 33, 0.6) 82%,
    rgba(28, 34, 33, 0) 100%);
  will-change: transform;
}

.ink-overlay-fast.is-active {
  opacity: 1;
  visibility: visible;
}

.ink-overlay-fast.is-active::before {
  animation: fast-ink-bloom 1152ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes fast-ink-bloom {
  from { transform: translate(-50%, -50%) scale(0); }
  to   { transform: translate(-50%, -50%) scale(1); }
}

/* While the mobile bloom plays, dim the heaviest decorative layers (they're
   covered by the dark bloom anyway). Class is added only on the fast path, so
   desktop is never affected. Restored by resetInkTransition() on New Puzzle/Reset. */
body.is-solving-transition .decor,
body.is-solving-transition .decor-lotus,
body.is-solving-transition::before,
body.is-solving-transition::after {
  opacity: 0;
  transition: opacity 200ms ease;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;        /* above #ink-overlay at z:30 */
  display: grid;
  place-items: center;
  padding: 20px;
  /* no background/backdrop — the ink spread IS the visual backdrop */
  opacity: 0;
  visibility: hidden;
}

.modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.win-modal {
  width: min(460px, 100%);
  opacity: 0;
  transform: scale(0.95);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  background: linear-gradient(160deg, #1a2120 0%, #101918 100%);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(201, 168, 76, 0.07),
    inset 0 1px 0 rgba(201, 168, 76, 0.14);
  text-align: center;
}

.modal-overlay.is-visible .win-modal {
  opacity: 1;
  transform: scale(1);
  transition: transform 320ms ease-out, opacity 320ms ease-out;
}

/* Gold enso ring ornament at top of win modal */
.modal-ornament {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: url('./assets/theme-zen/art/brand-top-ring.webp') center / contain no-repeat;
  filter: brightness(1.1) sepia(0.3) saturate(1.8);
  opacity: 0.9;
}

.modal-copy {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
  text-align: center;
}

.eyebrow {
  margin: 0;
  color: var(--sage);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Gold overrides scoped to win modal */
.win-modal .eyebrow {
  color: #c9a84c;
  letter-spacing: 0.26em;
}

.modal-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 500;
  line-height: 1.05;
}

.win-modal .modal-copy h2 {
  color: #e8d9b0;
}

.modal-copy p {
  margin: 0;
  color: var(--muted);
}

.win-modal .modal-copy p {
  color: rgba(201, 168, 76, 0.55);
}

/* Stats: vertical list with gold hairline dividers */
.modal-stat-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(201, 168, 76, 0.14);
  border-bottom: 1px solid rgba(201, 168, 76, 0.14);
  margin: 20px 0 0;
}

.modal-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: auto;
  border: none;
  border-bottom: 1px solid rgba(201, 168, 76, 0.1);
  border-radius: 0;
  padding: 13px 2px;
  background: transparent;
  box-shadow: none;
}

.modal-stat:last-child {
  border-bottom: none;
}

.modal-stat span {
  color: rgba(201, 168, 76, 0.6);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.modal-stat strong {
  color: #e8c97a;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
}

.modal-stat strong .hint-used-label {
  color: #d96a6a;
}

/* Lotus divider between stats and action button.
   Transparent padding is now only 6px (image cropped) — no negative margins needed. */
.modal-lotus-divider {
  width: 158px;
  height: 58px;
  margin: 0 auto;
  background: url('./assets/theme-zen/art/lotus-ornament.webp') center / contain no-repeat;
  opacity: 0.55;
  filter: sepia(1) saturate(2.5) brightness(1.3);
}

.daily-submit-panel {
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 251, 238, 0.08), rgba(201, 168, 76, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.daily-submit-panel[hidden] {
  display: none;
}

.daily-submit-eyebrow {
  margin: 0 0 6px;
  color: #e8c97a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.daily-submit-message {
  margin: 0;
  color: rgba(245, 237, 211, 0.76);
  font-size: 0.9rem;
  line-height: 1.45;
}

.daily-submit-panel[data-status="accepted"] .daily-submit-eyebrow,
.daily-submit-panel[data-status="already-accepted"] .daily-submit-eyebrow {
  color: #b7c29a;
}

.daily-submit-panel[data-status="retryable-error"] .daily-submit-eyebrow {
  color: #f0c36a;
}

.daily-submit-panel[data-status="rejected"] .daily-submit-eyebrow {
  color: #e29c86;
}

.daily-submit-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 168, 76, 0.12);
}

.daily-submit-result[hidden] {
  display: none;
}

.daily-submit-result div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.daily-submit-result span {
  color: rgba(201, 168, 76, 0.58);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.daily-submit-result strong {
  color: #f2dfaa;
  font-size: 1rem;
  font-weight: 650;
}

.daily-submit-result .daily-submit-score strong {
  color: rgba(245, 237, 211, 0.74);
  font-size: 0.92rem;
}

.daily-submit-retry {
  width: 100%;
  min-height: 42px;
  margin-top: 14px;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
}

.win-modal .modal-actions .primary-button {
  background: linear-gradient(135deg, #c9a84c 0%, #a67e28 100%);
  color: #0f1514;
  border-color: #c9a84c;
  font-weight: 700;
  min-width: 180px;
  width: auto;
  padding: 0 28px;
}

.win-modal .modal-actions .primary-button:hover {
  background: linear-gradient(135deg, #e0be64 0%, #c9a84c 100%);
  border-color: #e0be64;
}

/* Daily forfeit confirmation: "Continue Challenge" inherits the prominent gold
   primary; "Forfeit Daily" is a restrained amber-outline secondary (no red). */
.forfeit-modal .modal-actions {
  flex-wrap: wrap;
}

.forfeit-modal .modal-actions .ghost-button {
  min-width: 150px;
  width: auto;
  padding: 0 24px;
  background: transparent;
  border-color: rgba(244, 186, 98, 0.5);
  color: var(--amber);
  box-shadow: none;
}

.forfeit-modal .modal-actions .ghost-button:hover {
  transform: translateY(-1px);
  background: rgba(244, 186, 98, 0.08);
  border-color: var(--amber);
}

@media (max-width: 1120px) {
  :root {
    --app-top-space: clamp(12px, 2vw, 18px);
    --hero-bottom-space: clamp(22px, 3vw, 30px);
    --action-button-height: clamp(52px, 5vw, 58px);
    --option-button-height: clamp(42px, 4.1vw, 48px);
  }

  .game-layout {
    grid-template-columns: minmax(240px, 0.8fr) minmax(340px, 1.2fr);
  }

  .info-panel {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

}


@media (max-width: 820px) {
  :root {
    --app-top-space: 16px;
    --app-bottom-space: 30px;
    --hero-bottom-space: 24px;
  }

  /* Mobile: footer joins normal flow so it never overlaps scrolling content.
     Flex column keeps it at the bottom on short pages without position:fixed. */
  body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;        /* dvh avoids the address-bar resize jump */
    padding-bottom: 0;         /* no longer reserving space for a fixed footer */
  }

  .footer-band {
    position: static;
    height: auto;
    z-index: auto;
    margin-top: var(--app-bottom-space);
    /* honor iOS/Android home-indicator safe area under the black band */
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .app-shell {
    width: min(100% - 28px, 1340px);
    flex: 1 0 auto;            /* fill remaining height, push footer down */
    min-height: auto;          /* drop the calc(100vh - footer) trap */
  }

  .hero {
    gap: 6px;
  }

  .subtitle,
  .board-caption,
  .footer-band {
    letter-spacing: 0.22em;
  }

  /* Mobile single column. Flatten the panel wrappers with display:contents so every leaf
     card (setup-group, leaderboard, stats) becomes a flex item of game-layout and can be
     freely reordered — needed because Leaderboard (in control-panel) must follow Stats
     (in info-panel), which plain `order` cannot do across separate parents. */
  .game-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* override base align-items:start so cards fill the column width */
    gap: clamp(16px, 4vw, 22px);
  }

  .control-panel,
  .info-panel {
    display: contents;
  }

  /* The compact lotus no longer needs the old large-image padding correction. */
  .decor-lotus {
    margin-bottom: 0;
  }

  /* Target order: Board(+Quick Actions) -> Puzzle Setup -> Stats -> Leaderboard */
  .board-zone {
    order: 1;
    margin-top: 0;
  }

  .setup-group {
    order: 2;
  }

  .stats-card {
    order: 3;
    grid-column: auto;
  }

  .panel-block--leaderboard {
    order: 4;
  }

  /* Controls card is replaced by the Quick Actions strip on mobile. */
  .actions-card {
    display: none;
  }

  /* setup-group + leaderboard lose control-panel's card surface when it goes display:contents,
     so give them their own premium card surface to stay on-theme. */
  .setup-group,
  .panel-block--leaderboard {
    border: 1px solid rgba(168, 157, 138, 0.42);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(250, 246, 238, 0.82) 55%, rgba(247, 242, 233, 0.8)),
      var(--panel);
    box-shadow:
      var(--shadow-panel),
      0 1px 0 rgba(255, 255, 255, 0.6) inset;
    padding: clamp(18px, 5vw, 24px);
  }

  .setup-group {
    display: grid;                 /* override the desktop display:contents */
    gap: clamp(14px, 3vw, 18px);
  }

  .panel-block--leaderboard {
    border-bottom: 1px solid rgba(168, 157, 138, 0.42);
  }

  /* No trailing divider inside the combined setup card. */
  .setup-group .panel-block:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  /* Quick Actions strip: single row, New Puzzle emphasized, width matches the board. */
  .quick-actions {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--control-gap);
    width: min(100%, 582px);
    margin-top: clamp(10px, 2vw, 14px);
  }

  .quick-actions .primary-button,
  .quick-actions .ghost-button {
    height: var(--option-button-height);   /* compact, not the tall action height */
    padding: 0 clamp(8px, 2vw, 14px);
  }

  .board-frame {
    width: min(100%, 582px);
  }

  .decor-bamboo {
    width: 250px;
    height: 330px;
    opacity: 0.44;
  }

  .decor-mist-left,
  .decor-mist-right {
    height: 250px;
    opacity: 0.18;
    /* drop the blur+saturate+contrast filter layer — imperceptible at this
       opacity but removes a composited filter pass on mobile */
    filter: none;
  }

  .decor-mist-left {
    width: 62vw;
  }

  .decor-mist-right {
    width: 64vw;
  }

  .decor-stones-bottom-left {
    left: -42px;
    bottom: -5px;
    width: 380px;
    height: 280px;
    opacity: 0.38;
  }

  body::after {
    opacity: 0.04;
  }
}

@media (max-width: 560px) {
  :root {
    --app-top-space: 12px;
    --hero-bottom-space: 20px;
    --action-button-height: 52px;
    --option-button-height: 44px;
    --control-gap: 11px;
    --title-fs: clamp(2.5rem, 15vw, 3.4rem);
  }

  .app-shell {
    width: min(100% - 20px, 1340px);
  }

  .hero-ornament {
    width: 72px;
    height: 54px;
  }

  .control-panel,
  .info-card {
    padding: 20px;
  }

  /* Grid Size keeps 3 columns on phones (5 buttons -> 2 rows, not 3) to cut card height;
     labels are short ("3×3"…"7×7") so they stay legible even at 360px. Difficulty stays
     2 columns so "MEDIUM"/"EXPERT" never clip. */
  #grid-size-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .option-grid--difficulty {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .option-grid--difficulty .option-button:last-child {
    grid-column: auto;
  }

  /* Quick Actions wrap to 2 rows on the narrowest phones so nothing cramps at 360px:
     New Puzzle spans the top, Reset | Hint sit below. Text-only to save width. */
  .quick-actions {
    grid-template-columns: 1fr 1fr;
  }

  .quick-actions .primary-button {
    grid-column: 1 / -1;
  }

  .quick-actions .button-icon {
    display: none;
  }

  /* Compact Puzzle Setup + Leaderboard cards: trim padding/gaps (tap targets stay >=44px). */
  .setup-group,
  .panel-block--leaderboard {
    padding: 14px;
  }

  .setup-group {
    gap: 8px;
  }

  .panel-block {
    gap: 8px;
    padding-bottom: 10px;
  }

  .board-frame {
    padding: 11px;
    border-radius: 16px;
  }

  .board-grid {
    gap: 0;
  }

  .board-cell,
  .board-cell.is-hinted::after {
    border-radius: 8px;
  }

  /* Light glow trim on phones: drop only the widest 0 0 88px halo; keep the warm
     20px + 50px glow. Fewer large blur layers to composite when many bulbs are lit. */
  .board-cell.is-on::before {
    box-shadow:
      0 0 20px rgba(244, 186, 98, 0.82),
      0 0 50px rgba(244, 186, 98, 0.42),
      inset 0 2px 14px rgba(255, 255, 255, 0.66),
      inset -10px -13px 22px rgba(150, 80, 16, 0.22);
  }

  .board-caption {
    font-size: 0.68rem;
  }

  .decor-bamboo {
    width: 185px;
    height: 250px;
    opacity: 0.2;
  }

  .decor-mist-left,
  .decor-mist-right {
    opacity: 0.1;
  }

  .decor-stones-bottom-left {
    display: none;
  }

  .decor-sprig,
  .decor-stats-stones {
    opacity: 0.28;
  }

  .info-panel {
    grid-template-columns: 1fr;
  }

  .stats-card {
    grid-column: auto;
  }

  /* Both modal buttons share the row equally on narrow screens */
  .win-modal .modal-actions .primary-button,
  .win-modal .modal-actions #modal-share {
    flex: 1;
    min-width: 0;
  }
}

/* Transient status toast — bottom-centre pill, sits above the win modal */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(24px, 6vh, 48px);
  transform: translate(-50%, 8px);
  z-index: 50;                        /* above .modal-overlay (35) and ink (30) */
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.30);
  background: rgba(26, 33, 32, 0.96); /* same dark as .win-modal */
  color: #fbf7ee;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 220ms ease, transform 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .board-cell {
    transition: none;
  }

  .board-cell.is-hinted {
    animation: none;
  }

  .modal-overlay.is-visible .win-modal {
    transition: none;
  }

  /* Defense-in-depth: JS already short-circuits the transition under reduced
     motion (modal fires immediately, overlay never activates). */
  .ink-overlay-fast.is-active::before {
    animation: none;
    transform: translate(-50%, -50%) scale(1);
  }

  /* Toast keeps its fade but drops the slide */
  .toast {
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }

  .toast.is-visible {
    transition: opacity 220ms ease;
  }
}

/* ===== Page-header ritual menu + sound controls ===== */
/*
 * The controls are siblings anchored to the page rather than the viewport.
 * They scroll away with the header and never float over lower gameplay UI.
 */
.corner-tools {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 20;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ritual-menu {
  position: relative;
}

.ritual-menu-button,
.sound-toggle {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.ritual-menu-button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 0;
  border: 1px solid rgba(92, 82, 66, 0.2);
  border-radius: 14px;
  background: rgba(251, 247, 239, 0.88);
  box-shadow: 0 7px 18px rgba(65, 58, 45, 0.1);
  color: var(--sage-dark);
}

.ritual-menu-button span {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform 180ms ease, opacity 180ms ease;
}

.ritual-menu-button[aria-expanded="true"] span:first-child {
  transform: translateY(5.5px) rotate(45deg);
}

.ritual-menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.ritual-menu-button[aria-expanded="true"] span:last-child {
  transform: translateY(-5.5px) rotate(-45deg);
}

.ritual-menu-button:hover,
.sound-toggle:hover {
  transform: translateY(-1px) scale(1.04);
}

.ritual-menu-button:active,
.sound-toggle:active {
  transform: scale(0.95);
}

.ritual-menu-button:focus-visible,
.sound-toggle:focus-visible {
  outline: 2px solid rgba(88, 108, 84, 0.78);
  outline-offset: 3px;
}

.ritual-menu-popover {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: min(250px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid rgba(92, 82, 66, 0.18);
  border-radius: 14px;
  padding: 8px;
  background: rgba(251, 247, 239, 0.97);
  box-shadow: 0 20px 46px rgba(65, 58, 45, 0.2);
  backdrop-filter: blur(12px);
}

.ritual-menu-popover[hidden] {
  display: none;
}

.ritual-menu-heading {
  margin: 5px 9px 7px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.ritual-menu-action {
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 11px 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
}

.ritual-menu-action:hover,
.ritual-menu-action:focus-visible {
  background: rgba(88, 108, 84, 0.1);
}

.ritual-menu-action.is-disabled {
  color: rgba(29, 32, 32, 0.43);
  cursor: not-allowed;
}

.ritual-menu-account {
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px solid rgba(92, 82, 66, 0.14);
}

.ritual-menu-account-status {
  margin: 4px 12px 2px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.sound-toggle {
  position: relative;
  padding: 0;
  background: none;
  border: none;
  border-radius: 14px;          /* matches the icon PNG's own rounded-square corners */
  overflow: hidden;             /* clips the ::after cross to the button's shape */
}

.sound-icon-img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px;
  user-select: none;
  -webkit-user-drag: none;
}

/* Diagonal amber cross — hidden by default, fades in when muted */
.sound-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  /*
   * Single diagonal line from top-left to bottom-right using a gradient.
   * Gives a clean anti-aliased 3px stroke without any extra element.
   */
  background: linear-gradient(
    135deg,
    transparent                calc(50% - 1.5px),
    rgba(201, 168, 76, 0.88)   calc(50% - 1.5px),
    rgba(201, 168, 76, 0.88)   calc(50% + 1.5px),
    transparent                calc(50% + 1.5px)
  );
  border-radius: 14px;
}

/* Muted state: dim icon + show cross */
.sound-toggle.is-muted {
  opacity: 0.65;
}

.sound-toggle.is-muted::after {
  opacity: 1;
}

/* ===== About Darkenn dialog ===== */

.about-darkenn-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(28, 34, 33, 0.62);
  backdrop-filter: blur(7px);
}

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

.about-darkenn-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100dvh - clamp(24px, 6vw, 56px));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(92, 82, 66, 0.2);
  border-radius: 22px;
  padding: clamp(28px, 5vw, 54px) clamp(22px, 5vw, 58px) 0;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.82), transparent 20rem),
    var(--panel-solid);
  box-shadow: 0 36px 90px rgba(26, 29, 28, 0.35);
  scrollbar-color: rgba(88, 108, 84, 0.45) transparent;
  text-align: left;
}

.about-darkenn-close {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  float: right;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: calc(clamp(28px, 5vw, 54px) * -0.65) calc(clamp(22px, 5vw, 58px) * -0.55) 0 0;
  border: 1px solid rgba(92, 82, 66, 0.2);
  border-radius: 50%;
  background: rgba(251, 247, 239, 0.92);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
}

.about-darkenn-close:hover {
  background: var(--sage-soft);
}

.about-darkenn-enso {
  width: clamp(62px, 9vw, 84px);
  aspect-ratio: 1;
  margin: 0 auto 4px;
  background: var(--art-brand-top-ring) center / contain no-repeat;
  opacity: 0.84;
}

.about-darkenn-eyebrow {
  margin: 0 0 clamp(25px, 4vw, 36px);
  color: var(--sage);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
}

.about-darkenn-dialog > h2 {
  margin: 0 0 7px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.98;
  text-align: center;
}

.about-darkenn-content {
  clear: both;
}

.about-darkenn-content section {
  padding: 21px 0;
  border-top: 1px solid rgba(92, 82, 66, 0.16);
}

.about-darkenn-content h3 {
  margin: 0 0 11px;
  color: var(--sage-dark);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 1.8rem);
  font-weight: 600;
  line-height: 1.1;
}

.about-darkenn-content p {
  margin: 0 0 12px;
  color: #56534c;
  font-size: clamp(0.91rem, 1.7vw, 0.98rem);
  line-height: 1.72;
}

.about-darkenn-content p:last-child {
  margin-bottom: 0;
}

.about-darkenn-content a {
  color: var(--sage-dark);
  font-weight: 700;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.about-darkenn-lotus {
  width: clamp(110px, 22vw, 170px);
  height: clamp(58px, 11vw, 86px);
  margin: 5px auto 0;
  /* The source has generous transparent margins; zooming it creates the
     intended cropped ornament without editing or duplicating the art asset. */
  background: var(--art-lotus-ornament) center / 230% auto no-repeat;
  opacity: 0.76;
}

@media (max-width: 560px) {
  .corner-tools {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    gap: 6px;
  }

  .ritual-menu-popover {
    position: fixed;
    top: calc(max(8px, env(safe-area-inset-top)) + 52px);
    right: max(8px, env(safe-area-inset-right));
  }

  .about-darkenn-dialog {
    border-radius: 18px;
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ritual-menu-button,
  .ritual-menu-button span,
  .sound-toggle {
    transition: none;
  }
}

/* ===== Onboarding (first-run tutorial inside the board frame) ===== */

/* While onboarding owns the frame, fully hide the real board. The id+attr
   selector outranks .board-grid's display:grid so [hidden] is honoured. */
#board[hidden] {
  display: none;
}

.onboarding {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(16, 20, 20, 0.46);
  color: #fbf7ee;
  overflow: hidden;
}

.onboarding-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3.4%, 26px);
  width: 100%;
  height: 100%;
  padding: clamp(18px, 6%, 40px);
  text-align: center;
}

.onboarding-skip {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(28, 34, 33, 0.42);
  color: rgba(251, 247, 238, 0.66);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.onboarding-skip:hover {
  color: #fbf7ee;
  border-color: rgba(244, 186, 98, 0.6);
  background: rgba(40, 47, 45, 0.6);
}

/* display:grid above would otherwise defeat the [hidden] attribute. */
.onboarding-skip[hidden] {
  display: none;
}

.onboarding-heading {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 2.15rem);
  line-height: 1.22;
  color: #fbf7ee;
  letter-spacing: 0.005em;
}

.onboarding-heading--done {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.onboarding-sub {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.82rem, 1.2vw, 0.95rem);
  letter-spacing: 0.05em;
  color: rgba(251, 247, 238, 0.72);
}

/* The "Tap your first light" CTA — reads like a lit board cell. */
.onboarding-light-button {
  margin-top: 4px;
  padding: clamp(13px, 1.6vw, 16px) clamp(26px, 3vw, 36px);
  border: 1px solid rgba(244, 186, 98, 0.6);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 46%),
    radial-gradient(circle at 38% 28%, #fff6cf, #ffe09f 36%, #f4ba62 72%, #d68a30 100%);
  color: #4a2f0e;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 20px rgba(244, 186, 98, 0.6),
    0 0 50px rgba(244, 186, 98, 0.28),
    inset 0 2px 12px rgba(255, 255, 255, 0.6),
    inset -8px -10px 18px rgba(150, 80, 16, 0.22);
  animation: onboarding-light-glow 2.6s ease-in-out infinite;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.onboarding-light-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 26px rgba(244, 186, 98, 0.74),
    0 0 64px rgba(244, 186, 98, 0.36),
    inset 0 2px 12px rgba(255, 255, 255, 0.68),
    inset -8px -10px 18px rgba(150, 80, 16, 0.24);
}

.onboarding-light-button:active {
  transform: translateY(0);
}

@keyframes onboarding-light-glow {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(244, 186, 98, 0.5),
      0 0 44px rgba(244, 186, 98, 0.22),
      inset 0 2px 12px rgba(255, 255, 255, 0.6),
      inset -8px -10px 18px rgba(150, 80, 16, 0.22);
  }
  50% {
    box-shadow:
      0 0 28px rgba(244, 186, 98, 0.78),
      0 0 68px rgba(244, 186, 98, 0.4),
      inset 0 2px 14px rgba(255, 255, 255, 0.72),
      inset -8px -10px 18px rgba(150, 80, 16, 0.24);
  }
}

/* Smaller 3x3 tutorial board, centred in the same frame. */
.tutorial-board {
  --grid-size: 3;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-size), minmax(0, 1fr));
  gap: 0;
  width: min(64%, 320px);
  aspect-ratio: 1;
  margin: 0 auto;
}

.tutorial-board .board-cell.is-teach-neighbor {
  box-shadow:
    0 0 0 2px rgba(223, 230, 215, 0.5),
    0 0 14px rgba(88, 108, 84, 0.34);
  animation: onboarding-teach-neighbor 2.2s ease-in-out infinite;
}

/* Lit neighbours keep their warm glow and gain the sage teaching ring. */
.tutorial-board .board-cell.is-on.is-teach-neighbor {
  box-shadow:
    0 0 0 2px rgba(223, 230, 215, 0.5),
    inset 0 0 28px rgba(244, 186, 98, 0.2),
    0 0 30px rgba(244, 186, 98, 0.18);
}

@keyframes onboarding-teach-neighbor {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.03); filter: brightness(1.2); }
}

/* Soft plus-shaped teaching wash over centre + four neighbours. */
.teach-plus {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.72;
  animation: onboarding-teach-plus 2.2s ease-in-out infinite;
}

.teach-plus::before,
.teach-plus::after {
  content: "";
  position: absolute;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 186, 98, 0.22), rgba(88, 108, 84, 0.12) 60%, transparent 80%);
  filter: blur(3px);
}

.teach-plus::before {
  left: 5%;
  right: 5%;
  top: 33.333%;
  height: 33.333%;
}

.teach-plus::after {
  top: 5%;
  bottom: 5%;
  left: 33.333%;
  width: 33.333%;
}

@keyframes onboarding-teach-plus {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.95; }
}

/* Transient directional arrows (built in JS) showing how lights toggle.
   The wrapper is positioned + rotated; the inner glyph carries the flow. */
.teach-arrow {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  /* Warm cream so the arrow reads on both dark cells and lit golden bulbs. */
  color: #fff3cf;
}

.teach-arrow-glyph {
  display: block;
  filter: drop-shadow(0 0 5px rgba(244, 186, 98, 0.9))
          drop-shadow(0 0 12px rgba(244, 186, 98, 0.5))
          drop-shadow(0 1px 1.5px rgba(40, 26, 8, 0.55));
  /* Visible by default so reduced-motion shows arrows statically; the beat
     reveals below drive the looping appearance, synced with the flip discs. */
}

/* Sequenced reveal: lit-cell arrows open on beat 1, unlit-cell arrows on beat 3,
   matching their cells' dim/glow. The glyph fades in with a small settle along
   the arrow's local (rotated) axis, holds, then fades at the shared reset. */
.teach-arrow--dim .teach-arrow-glyph {
  animation: teach-arrow-reveal-lit-neighbor 4s ease-in-out infinite;
}

.teach-arrow--glow .teach-arrow-glyph {
  animation: teach-arrow-reveal-unlit-neighbor 4s ease-in-out infinite;
}

@keyframes teach-arrow-reveal-lit-neighbor {
  0%, 35%   { opacity: 0; transform: translateY(5px); }
  45%       { opacity: 1; transform: translateY(0); }
  75%       { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0; transform: translateY(5px); }
}

@keyframes teach-arrow-reveal-unlit-neighbor {
  0%, 45%   { opacity: 0; transform: translateY(5px); }
  55%       { opacity: 1; transform: translateY(0); }
  75%       { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0; transform: translateY(5px); }
}

/* ===== First Light "show me" toggle preview =====================================
   A calm, looping demo layered over the firstTap board. Pure CSS so the JS never
   animates per-frame; pointer-events:none keeps the centre tile clickable. The
   base (un-animated) styles below are authored to read as a complete static
   highlight, so the prefers-reduced-motion block (further down) just needs
   `animation: none` to give reduced-motion users a still explanation. */
.tutorial-preview {
  position: absolute;
  inset: 0;
  z-index: 1;                 /* above cells + teach-plus(1); below arrows(2) */
  pointer-events: none;       /* clicks fall through to the real board cells */
}

.tutorial-preview-cell {
  position: absolute;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Warm gold glow over the target tile — rises, then depresses for the "press".
   Base opacity is visible so reduced-motion shows it; the keyframe hides it until
   the press beat during the loop. */
.tutorial-preview-target {
  opacity: 0.9;
  background:
    radial-gradient(circle, rgba(255, 224, 159, 0.92), rgba(244, 186, 98, 0.5) 45%, rgba(244, 186, 98, 0) 72%);
  box-shadow: 0 0 22px rgba(244, 186, 98, 0.5);
  animation: tutorial-preview-target-pulse 4s ease-in-out infinite;
}

/* Flip discs sit over each affected bulb and reveal its toggled state during the
   demo, then fade back at the shared reset — showing the actual toggle without
   touching state. Sized to cover the real bulb (cell minus its 7% inset). Hidden
   at rest; the beat classes below time each disc, so prefers-reduced-motion just
   needs `animation: none`. */
.tutorial-flip {
  position: absolute;
  width: 29%;
  height: 29%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

/* Sequence beats: target presses and dims first, then lit neighbours dim, then
   unlit neighbours illuminate. All hold through 75% and reset together. */
.tutorial-flip-target { animation: tutorial-flip-reveal-target 4s ease-in-out infinite; }
.tutorial-flip-lit-neighbor { animation: tutorial-flip-reveal-lit-neighbor 4s ease-in-out infinite; }
.tutorial-flip-unlit-neighbor { animation: tutorial-flip-reveal-unlit-neighbor 4s ease-in-out infinite; }

/* Unlit cell lighting up — reuses the lit-bulb look from .board-cell.is-on::before. */
.tutorial-flip-on {
  background:
    radial-gradient(circle at 36% 27%, #ffffff 0 6%, #fff6cf 14%, #ffe09f 34%, #f4ba62 64%, #c47a24 90%, #9a5a16 100%);
  box-shadow:
    0 0 20px rgba(244, 186, 98, 0.82),
    0 0 50px rgba(244, 186, 98, 0.42),
    inset 0 2px 14px rgba(255, 255, 255, 0.66);
}

/* Lit cell going dark — reuses the dark-bulb look from .board-cell::before. */
.tutorial-flip-off {
  background:
    radial-gradient(circle at 33% 23%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 22%, transparent 40%),
    radial-gradient(circle at 50% 50%, #3c423f, rgba(32, 38, 36, 0) 70%),
    linear-gradient(150deg, #424a46, #1a201f);
  box-shadow:
    inset 4px 5px 12px rgba(255, 255, 255, 0.055),
    inset -10px -12px 20px rgba(0, 0, 0, 0.46);
}

/* Soft ink-wash plus over centre + four neighbours (mirrors .teach-plus bars). */
.tutorial-plus-preview {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  animation: tutorial-plus-preview-pulse 4s ease-in-out infinite;
}

.tutorial-plus-preview::before,
.tutorial-plus-preview::after {
  content: "";
  position: absolute;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 186, 98, 0.2), rgba(88, 108, 84, 0.1) 60%, transparent 80%);
  filter: blur(3px);
}

.tutorial-plus-preview::before {   /* horizontal bar */
  left: 5%;
  right: 5%;
  top: 33.333%;
  height: 33.333%;
}

.tutorial-plus-preview::after {    /* vertical bar */
  top: 5%;
  bottom: 5%;
  left: 33.333%;
  width: 33.333%;
}

/* The 4s loop begins with a 0.5s untouched-board hold. The target then
   emphasizes, presses, and dims before the neighbour beats begin. */
@keyframes tutorial-preview-target-pulse {
  0%, 12.5% { opacity: 0;    transform: translate(-50%, -50%) scale(0.92); }
  20%       { opacity: 0.9;  transform: translate(-50%, -50%) scale(1); }
  27.5%     { opacity: 1;    transform: translate(-50%, -50%) scale(0.8); }
  35%       { opacity: 0.25; transform: translate(-50%, -50%) scale(0.9); }
  75%       { opacity: 0.25; transform: translate(-50%, -50%) scale(0.92); }
  85%, 100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.92); }
}

@keyframes tutorial-flip-reveal-target {
  0%, 27.5% { opacity: 0; }
  35%       { opacity: 1; }
  75%       { opacity: 1; }
  85%, 100% { opacity: 0; }
}

@keyframes tutorial-flip-reveal-lit-neighbor {
  0%, 35%   { opacity: 0; }
  45%       { opacity: 1; }
  75%       { opacity: 1; }
  85%, 100% { opacity: 0; }
}

@keyframes tutorial-flip-reveal-unlit-neighbor {
  0%, 45%   { opacity: 0; }
  55%       { opacity: 1; }
  75%       { opacity: 1; }
  85%, 100% { opacity: 0; }
}

@keyframes tutorial-plus-preview-pulse {
  0%, 12.5% { opacity: 0.28; }
  20%       { opacity: 0.5; }
  35%       { opacity: 0.7; }
  75%       { opacity: 0.5; }
  85%       { opacity: 0.35; }
  100%      { opacity: 0.28; }
}

/* "Tap" copy over the target — appears on beat 2 as the press happens. Base
   opacity stays visible so reduced-motion shows a static cue; the keyframe hides
   it until the press during the loop. */
.tutorial-tap-label {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  font-family: var(--font-ui);
  font-size: clamp(0.62rem, 1.5vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff3cf;
  text-shadow:
    0 1px 2px rgba(40, 26, 8, 0.6),
    0 0 9px rgba(244, 186, 98, 0.5);
  opacity: 0.92;
  animation: tutorial-tap-label 4s ease-in-out infinite;
}

@keyframes tutorial-tap-label {
  0%, 20%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  27.5%     { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75%       { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
}

.onboarding-hint {
  margin: 0;
  min-height: 1.3em;
  font-family: var(--font-ui);
  font-size: clamp(0.78rem, 1.1vw, 0.88rem);
  letter-spacing: 0.04em;
  color: #ecd9a6;
  opacity: 0;
  transition: opacity 200ms ease;
}

.onboarding-hint.is-visible {
  opacity: 1;
}

/* "Start Darkenn" reuses .onboarding-light-button; just give it a little air. */
.onboarding-start-button {
  margin-top: 8px;
}

.onboarding-tip {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: rgba(251, 247, 238, 0.42);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-light-button,
  .tutorial-board .board-cell.is-teach-neighbor,
  .teach-plus,
  .teach-arrow-glyph,
  .teach-arrow--dim .teach-arrow-glyph,
  .teach-arrow--glow .teach-arrow-glyph,
  .tutorial-preview-target,
  .tutorial-flip,
  .tutorial-flip-target,
  .tutorial-flip-lit-neighbor,
  .tutorial-flip-unlit-neighbor,
  .tutorial-tap-label,
  .tutorial-plus-preview {
    animation: none;
  }
}

/* ===== Daily Challenge — lotus mode control (segmented toggle below board) ===== */

.lotus-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.lotus-container[hidden] {
  display: none;
}

/* Equal 6px gap above the lotus-container, matching the board-zone grid gap. */
.lotus-container.is-shifted {
  margin-top: 0;
}

/* The lotus is purely decorative — no longer interactive. */
.lotus-ornament {
  display: block;
  line-height: 0;
}

.lotus-ornament .decor-lotus {
  display: block;
  transition: filter 320ms ease;
}

/* Committed Daily run — deep shadow grounds the lotus, conveying an active attempt. */
.lotus-ornament.is-committed .decor-lotus {
  filter: contrast(1.3) brightness(0.76)
    drop-shadow(0 0 5px rgba(20, 28, 26, 0.72))
    drop-shadow(0 3px 10px rgba(20, 28, 26, 0.48));
}

/* Slider track — ivory pill with a calm border. Thin and symmetrical:
   fixed width, both slots flex to equal size. Position relative anchors the
   sliding thumb. */
.lotus-mode-control {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 340px;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 242, 233, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px rgba(65, 58, 45, 0.06);
}

/* Sliding pill — absolutely positioned, transitions between left and right slot. */
.toggle-slider {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 5px);
  background: linear-gradient(180deg, #6c7e65, var(--sage-dark));
  border-radius: calc(var(--radius-md) - 5px);
  border: 1px solid rgba(64, 83, 63, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 10px rgba(64, 83, 63, 0.2);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

/* Slide the pill to the right slot. */
.lotus-mode-control[data-selected="right"] .toggle-slider {
  transform: translateX(calc(100% + 4px));
}

.lotus-mode-option {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 8px;
  border: none;
  border-radius: calc(var(--radius-md) - 5px);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 150ms ease;
}

/* Selected slot (under the pill): ivory text, non-interactive. */
.lotus-mode-control[data-selected="left"] #mode-option-1,
.lotus-mode-control[data-selected="right"] #mode-option-2 {
  color: #fbf7ee;
  cursor: default;
}

/* Non-selected slot: dark ink so both options are clearly readable. */
.lotus-mode-control[data-selected="left"] #mode-option-2,
.lotus-mode-control[data-selected="right"] #mode-option-1 {
  color: var(--ink);
  cursor: pointer;
}

/* Forfeit action: amber text overrides the muted default. */
.lotus-mode-option.is-forfeit {
  color: var(--amber);
  cursor: pointer;
}

.lotus-mode-option.is-forfeit:hover {
  color: var(--amber-deep);
}

.lotus-mode-option:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* New Puzzle relabeled to "Forfeit Daily" during a running Daily attempt:
   dark sage/charcoal base with warm amber text — deliberately not red. */
.primary-button.daily-forfeit-action {
  background: linear-gradient(180deg, #34403a, var(--charcoal));
  border-color: rgba(244, 186, 98, 0.45);
  color: var(--amber);
  box-shadow: 0 12px 24px rgba(32, 38, 36, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.primary-button.daily-forfeit-action:hover {
  border-color: var(--amber);
  box-shadow: 0 14px 26px rgba(32, 38, 36, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Controls locked out by Daily: Reset & Hint while running, and the sub-minimum
   setup options (3×3 grid, 4×4 Easy). Shown elegantly disabled, still clickable
   so a click can explain why via a toast. */
.ghost-button.daily-control-locked,
.option-button.daily-control-locked {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.ghost-button.daily-control-locked:hover {
  transform: none;
  border-color: rgba(152, 146, 130, 0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(252, 249, 242, 0.82));
}

.option-button.daily-control-locked:hover {
  transform: none;
  border-color: rgba(152, 146, 130, 0.4);
}

/* ===== Daily Challenge — pre-start board overlay ===== */

.daily-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(16, 20, 20, 0.82);
  padding: clamp(24px, 5vw, 44px) clamp(20px, 4vw, 36px);
  box-sizing: border-box;
  text-align: center;
}

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

.daily-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 320px;
}

/* Reuse the brand enso ring from the win modal */
.daily-overlay-ring {
  width: 58px;
  height: 58px;
  background: url('./assets/theme-zen/art/brand-top-ring.webp') center / contain no-repeat;
  filter: brightness(1.1) sepia(0.25) saturate(1.6);
  opacity: 0.88;
  flex-shrink: 0;
}

.daily-overlay-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 4.5vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #f5f0e8;
  line-height: 1.1;
}

.daily-overlay-copy {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 1.45vw, 0.8rem);
  line-height: 1.55;
  color: var(--muted-dark);
  letter-spacing: 0.01em;
}

/* "Completed today" summary — shown above Start when this setup is already done */
.daily-overlay-result {
  margin: 2px 0 0;
  font-family: var(--font-ui);
  font-size: clamp(0.74rem, 1.6vw, 0.82rem);
  color: var(--amber);
  letter-spacing: 0.02em;
}

.daily-overlay-auth {
  margin: 2px 0 0;
  max-width: 43ch;
  color: rgba(245, 240, 232, 0.78);
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 1.45vw, 0.8rem);
  line-height: 1.45;
}

/* "Start Challenge" — amber outline button matching the mockup */
.daily-auth-options,
.daily-profile-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(280px, 100%);
}

.daily-auth-options[hidden],
.daily-profile-form[hidden],
.daily-profile-error[hidden] {
  display: none;
}

.google-signin-button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  width: min(260px, 100%);
}

.daily-provider-btn {
  width: min(260px, 100%);
  min-height: 42px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 12px;
  background: rgba(16, 20, 20, 0.18);
  color: var(--amber);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.daily-provider-btn:hover,
.daily-provider-btn:focus-visible {
  border-color: rgba(255, 207, 125, 0.78);
  background: rgba(201, 168, 76, 0.12);
}

.daily-provider-btn:active {
  transform: translateY(1px);
}

.daily-provider-btn--twitch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 16px);
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #a658ff 0%, #9146ff 55%, #772ce8 100%);
  color: #fff;
  box-shadow:
    inset 0 2px 0 rgba(219, 192, 255, 0.42),
    inset 0 -2px 0 rgba(70, 15, 143, 0.34);
  font-size: clamp(0.83rem, 2.4vw, 0.95rem);
  letter-spacing: -0.01em;
  text-transform: none;
}

.daily-provider-btn--twitch:hover,
.daily-provider-btn--twitch:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #ad68ff 0%, #9952ff 55%, #7d35eb 100%);
}

.twitch-provider-mark {
  width: clamp(23px, 7vw, 32px);
  height: clamp(23px, 7vw, 32px);
  fill: #fff;
  filter: drop-shadow(0 5px 0 rgba(95, 32, 184, 0.42));
}

.twitch-provider-cutout {
  fill: #9146ff;
}

.twitch-provider-copy {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35em;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(83, 24, 165, 0.36);
}

.twitch-wordmark {
  font-size: 1.24em;
  font-weight: 900;
  letter-spacing: -0.055em;
}

.daily-profile-form label {
  color: #f5f0e8;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.18rem);
  letter-spacing: 0.03em;
}

.daily-profile-form input {
  width: min(260px, 100%);
  min-height: 42px;
  border: 1px solid rgba(245, 240, 232, 0.28);
  border-radius: 12px;
  padding: 0 14px;
  background: rgba(245, 240, 232, 0.08);
  color: #f5f0e8;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  text-align: center;
  outline: none;
}

.daily-profile-form input:focus {
  border-color: rgba(255, 207, 125, 0.78);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

.daily-profile-form p {
  margin: 0;
  max-width: 30ch;
  color: rgba(245, 240, 232, 0.62);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  line-height: 1.4;
}

.daily-profile-error {
  color: #ffcf7d !important;
}

.daily-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 11px 26px;
  border: 1px solid rgba(244, 186, 98, 0.48);
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--amber);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.daily-start-btn:hover {
  background: rgba(244, 186, 98, 0.07);
  border-color: rgba(244, 186, 98, 0.75);
}

.daily-start-btn[hidden] {
  display: none;
}

.daily-start-btn:active {
  background: rgba(244, 186, 98, 0.12);
  border-color: var(--amber);
}

.daily-start-btn.is-disabled {
  border-color: rgba(245, 240, 232, 0.2);
  color: rgba(245, 240, 232, 0.42);
  cursor: not-allowed;
}

.daily-start-btn.is-disabled:hover {
  border-color: rgba(245, 240, 232, 0.2);
  background: transparent;
}

.auth-callback-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 18%, rgba(201, 168, 76, 0.16), transparent 34%),
    var(--paper);
  color: var(--ink);
}

.auth-callback-card {
  width: min(420px, 100%);
  padding: 40px 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(250, 247, 239, 0.92);
  box-shadow: var(--shadow-panel);
  text-align: center;
}

.auth-callback-card h1 {
  margin: 14px 0 8px;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 8vw, 2.35rem);
  font-weight: 400;
}

.auth-callback-card p {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--muted);
}

@media (max-width: 480px) {
  .daily-overlay-title {
    font-size: 1.4rem;
  }

  .daily-overlay-copy {
    font-size: 0.72rem;
  }
}