/* ==========================================================================
   Play-screen layout and the garden menu (owner mobile playtest, 2026-09-28).

   Phones, portrait:  story stage on top, then the garden bar (place, garden
   name, Menu), then the board low in thumb reach with its guidance and the
   Start again / A little nudge / Next garden row at the very bottom.
   Landscape phones, and tablets/desktops once the stage has a picture: two
   columns, the stage and garden bar on the left, the board on the right.
   The board is sized once by fitBoard (main.ts) from the space left over, and
   nothing on the screen changes size when a garden blooms.
   ========================================================================== */

main {
  /* The story stage (filled by stage.ts) takes the room above the board. */
  --stage-height: clamp(
    100px,
    calc(100svh - min(100vw - 24px, 520px) - 236px),
    260px
  );
  --bar-gap: 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  height: 100svh;
  min-height: 460px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 12px
    max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Stacked: the stage and the garden bar share the board's edges. */
#story-stage,
.garden-bar {
  width: 100%;
  max-width: var(--board-side, 100%);
  margin-inline: auto;
}
#story-stage {
  flex: none;
  height: var(--stage-height);
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Garden bar: where you are, and the menu ---------- */
.garden-bar {
  flex: 1 1 auto;
  /* Room for a two-line garden name, so the board keeps one place from
     garden to garden and Next garden stays under the thumb. */
  min-height: 76px;
  display: flex;
  /* Spare height gathers above the name, so the name stays with its board
     and the top of the screen is left open for the story. */
  align-items: flex-end;
  padding-bottom: 2px;
  gap: var(--bar-gap);
  padding-inline: 4px 0;
}
.intro {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.intro h1 {
  margin-top: 4px;
  font-size: clamp(24px, 3.2vw + 12px, 32px);
  line-height: 1.12;
  letter-spacing: -0.3px;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
#menu-open {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-width: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid color-mix(in srgb, var(--world-edge, #50694e) 80%, #c5cf9d);
  border-radius: 22px;
  color: #e3e8cf;
  background: #0f231d99;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font:
    15px Georgia,
    serif;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}
#menu-open svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #d8d49a;
  stroke-width: 1.6;
  stroke-linecap: round;
}
#menu-open .menu-leaf {
  fill: color-mix(in srgb, var(--world-accent, #c5cf9d) 55%, transparent);
  stroke-width: 1.1;
}
#menu-open:hover {
  border-color: #c5cf9d;
  background: #17332acc;
}
@media (max-width: 379px) {
  /* The narrowest phones: the glyph alone, still labelled "Menu". */
  #menu-open {
    width: 44px;
    padding: 0;
  }
  #menu-open span {
    display: none;
  }
}

/* ---------- The board and its controls, low in thumb reach ---------- */
.play {
  flex: none;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#message {
  height: 40px;
  font-size: 13px;
}
.tools {
  height: 48px;
}
.tools button {
  height: 48px;
  min-height: 48px;
  font-size: 13px;
  border-radius: 24px;
}
.tools #reset,
.tools #hint {
  border: 1px solid #50694e66;
  background: #0f231d66;
}
.tools #reset:hover,
.tools #hint:hover {
  border-color: #6f8a78;
}

/* Notices (a first home-screen welcome, an expired sign-in link) rest at the
   top of the screen, over the stage; they never cover the board or controls. */
main > footer {
  position: absolute;
  z-index: 20;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  height: 0;
  pointer-events: none;
}
main > footer .garden-companion-invite {
  inset: 0 0 auto;
  pointer-events: auto;
}
main {
  position: relative;
}

/* Tablets and larger screens, portrait: a larger board and stage. */
@media (min-width: 600px) {
  main {
    max-width: 600px;
    padding-inline: 20px;
    gap: 12px;
  }
  #story-stage {
    border-radius: 22px;
  }
}

/* ---------- Two columns: landscape phones; wide screens with a stage ---------- */
/* Short landscape screens: always side by side. */
@media (orientation: landscape) and (min-width: 500px) and (max-height: 560px) {
  main {
    --play-w: min(520px, calc(100svh - 124px), 58vw);
    --stage-height: clamp(96px, calc(100svh - 150px), 240px);
    max-width: 1000px;
    min-height: 300px;
    padding: max(12px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--play-w);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-areas:
      ". play"
      "stage play"
      "bar play"
      ". play";
    column-gap: clamp(16px, 4vw, 40px);
    row-gap: 10px;
  }
  #story-stage {
    grid-area: stage;
  }
  #story-stage,
  .garden-bar {
    max-width: none;
  }
  .garden-bar {
    grid-area: bar;
    align-self: start;
  }
  .play {
    grid-area: play;
    height: 100%;
    justify-content: center;
  }
  .intro h1 {
    font-size: clamp(21px, 2.4vw + 9px, 30px);
  }
  #chapter {
    white-space: normal;
  }
}
/* A narrow left column: the Menu glyph alone leaves the garden's name room. */
@media (orientation: landscape) and (min-width: 500px) and (max-width: 740px) and (max-height: 560px) {
  #menu-open {
    width: 44px;
    padding: 0;
  }
  #menu-open span {
    display: none;
  }
}
/* Tablets in landscape and desktops: side by side once the stage has a
   picture; without one, the stacked layout keeps the title over the board. */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 561px) {
  main:has(> #story-stage:not(:empty)) {
    --play-w: min(520px, calc(100svh - 132px), 52vw);
    --stage-height: clamp(160px, calc(100svh - 300px), 320px);
    max-width: 1160px;
    padding: 20px 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--play-w);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-areas:
      ". play"
      "stage play"
      "bar play"
      ". play";
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: 16px;
  }
  main:has(> #story-stage:not(:empty)) #story-stage {
    grid-area: stage;
    border-radius: 24px;
  }
  main:has(> #story-stage:not(:empty)) :is(#story-stage, .garden-bar) {
    max-width: none;
  }
  main:has(> #story-stage:not(:empty)) .garden-bar {
    grid-area: bar;
    align-self: start;
  }
  main:has(> #story-stage:not(:empty)) .play {
    grid-area: play;
    height: 100%;
    justify-content: center;
  }
}
/* Desktops without a stage: the stacked layout, centred as a whole. */
@media (min-width: 768px) and (min-height: 740px) {
  main:has(> #story-stage:empty) {
    height: min(100svh, 940px);
    margin-block: max(0px, calc((100svh - 940px) / 2));
  }
}

/* ==========================================================================
   The garden menu
   ========================================================================== */
#menu-dialog {
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100svh - 32px);
  padding: 0 0 12px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #60735a;
  border-radius: 24px;
  color: #e9eddf;
  background:
    radial-gradient(ellipse at 50% 0%, #2c4a3a55, transparent 60%), #142b24;
  box-shadow: 0 28px 100px #0008;
}
#menu-dialog::backdrop {
  background: #061710b0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.menu-art {
  position: relative;
  height: 96px;
  background:
    radial-gradient(ellipse 70% 90% at 50% 100%, #2e4d3b, transparent 75%),
    #0f231d;
  border-bottom: 1px solid #60735a55;
  overflow: hidden;
}
.menu-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.menu-art .v-hill {
  fill: #0b1b16;
}
/* The menu's picture is the story stage as it stands: same place, lights
   and time of day (stage.ts stageSnapshot). */
.menu-art .stage-scene {
  position: absolute;
  inset: 0;
}
.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 16px 0 22px;
}
.menu-top .eyebrow {
  min-width: 0;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #ced8b4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-art:not([hidden]) + .menu-top #menu-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #0f231dcc;
}
#menu-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid #5e7254aa;
  border-radius: 50%;
  background: transparent;
  color: #d0dbc4;
  font: 27px/1 Georgia;
  cursor: pointer;
}
#menu-close:hover {
  border-color: #b8c7ad;
}
#menu-title {
  margin: 4px 22px 0;
  font:
    normal 26px Georgia,
    serif;
  letter-spacing: -0.4px;
  color: #f0eacc;
}
.menu-detail {
  margin: 2px 22px 10px;
  font:
    italic 14px Georgia,
    serif;
  color: #ddd8af;
}
.menu-list {
  display: flex;
  flex-direction: column;
}
.menu-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 8px 20px 8px 20px;
  border: 0;
  border-top: 1px solid #60735a33;
  background: transparent;
  color: #e9eddf;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.menu-item:hover {
  background: #ffffff08;
}
.menu-item::after {
  content: "›";
  font: 22px/1 Georgia;
  color: #8fa488;
}
#daily-open.menu-item::after {
  display: none;
}
.menu-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #60735a88;
  background: #0f231d88;
}
.menu-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #d6d69d;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#daily-open .menu-icon svg {
  stroke: #e6d28a;
}
#daily-open[data-state="locked"] .menu-icon svg {
  stroke: #aebca3;
}
.menu-label {
  display: block;
  min-width: 0;
  font:
    17px Georgia,
    serif;
  color: #f0eacc;
}
.menu-label small {
  display: block;
  margin-top: 2px;
  font:
    12.5px/1.35 ui-sans-serif,
    system-ui,
    sans-serif;
  color: #b5c9b6;
}
#daily-open .daily-lock {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #aebca3;
  stroke-width: 1.4;
}
#daily-open .daily-dot {
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-radius: 50%;
  background: #e6d28a;
  box-shadow: 0 0 8px #e6d28a88;
}
#daily-open .daily-dot.done {
  background: #9dbb8a;
  box-shadow: none;
}
.menu-switches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 20px 4px;
  border-top: 1px solid #60735a33;
}
.menu-switches[hidden] {
  display: none;
}
.menu-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 6px 12px 6px 14px;
  border: 1px solid #60735a55;
  border-radius: 16px;
  background: #0f231d66;
  color: #e9eddf;
  font:
    14px ui-sans-serif,
    system-ui,
    sans-serif;
  cursor: pointer;
}
.menu-switch[aria-checked="true"] .switch-track {
  background: #e6d28a;
  border-color: #e6d28a;
}
.menu-switch[aria-checked="true"] .switch-thumb {
  transform: translateX(18px);
  background: #233529;
}
.menu-quiet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 6px;
  margin: 6px 20px 0;
  font-size: 12px;
  color: #b5c9b6;
  text-align: center;
}
.menu-quiet a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 6px;
  color: #d3ddcc;
  text-underline-offset: 3px;
}
.menu-quiet small {
  font-size: 12px;
}
.menu-audio[hidden] {
  display: none;
}
#menu-dialog button:focus-visible,
#menu-dialog a:focus-visible,
#menu-open:focus-visible {
  outline: 2px solid #f2d88d;
  outline-offset: -2px;
}
#menu-open:focus-visible {
  outline-offset: 3px;
}

/* Phones: a bottom sheet, in thumb reach, rising from the controls. */
@media (max-width: 599px) and (min-height: 561px) {
  #menu-dialog {
    width: 100%;
    max-height: min(92svh, 100svh - 24px);
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 26px 26px 0 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  #menu-dialog[open] {
    animation: menu-rise 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  #menu-dialog::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: #c5cf9d55;
    z-index: 1;
  }
}
/* Short screens: no picture, tighter rows, so everything fits unscrolled. */
@media (max-height: 700px) {
  .menu-art {
    display: none;
  }
  .menu-art + .menu-top #menu-close {
    position: static;
    background: transparent;
  }
  .menu-top {
    margin-top: 12px;
  }
  #menu-title {
    font-size: 23px;
    margin-top: 0;
  }
  .menu-detail {
    margin-bottom: 6px;
  }
  .menu-item {
    min-height: 54px;
    padding-block: 5px;
  }
}
@media (max-height: 560px) and (min-width: 500px) {
  #menu-dialog {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100svh - 16px);
    padding-bottom: 4px;
  }
  .menu-top {
    margin-top: 8px;
  }
  #menu-title {
    font-size: 21px;
  }
  .menu-detail {
    margin-bottom: 6px;
    font-size: 13px;
  }
  .menu-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .menu-item {
    min-height: 50px;
    padding: 4px 14px 4px 16px;
    column-gap: 10px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }
  .menu-icon {
    width: 34px;
    height: 34px;
  }
  .menu-icon svg {
    width: 20px;
    height: 20px;
  }
  .menu-label {
    font-size: 15.5px;
  }
  .menu-label small {
    font-size: 11.5px;
  }
  .menu-item:nth-child(odd) {
    border-right: 1px solid #60735a33;
  }
  .menu-switches {
    padding: 6px 16px 0;
  }
  .menu-switch {
    min-height: 44px;
  }
  .menu-quiet {
    margin-top: 0;
  }
}
/* The sheet stays on its own compositor layer. Without this, Android Chrome
   drops the layer when the rise animation ends and repaints the whole sheet,
   which shows as a one-frame blank flash (seen in an owner screen recording). */
#menu-dialog {
  will-change: transform;
  backface-visibility: hidden;
}
/* Transform only: fading opacity over the blurred backdrop flickers on mobile
   Chrome while the blur is recomputed every frame. */
@keyframes menu-rise {
  from {
    transform: translateY(24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #menu-dialog[open] {
    animation: none;
  }
}

/* ==========================================================================
   Daily tracker: a month of days (Monday first) in a fixed 7-column grid.
   Bloomed: a small flower with a ✓. Missed since you began: the date under a
   soft ✕ (muted, never alarm red). Today: an open ring until it blooms.
   Still to come: faint. Before you began: plain.
   ========================================================================== */
.daily-calendar-wrap {
  width: min(100%, 308px);
  margin: 2px auto 0;
}
.daily-month {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  margin-bottom: 2px;
}
.daily-month .month-name {
  text-align: center;
  font:
    italic 15px Georgia,
    serif;
  color: #ddd8af;
}
#daily-dialog .month-step {
  width: 44px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #d8d49a;
  font:
    24px/1 Georgia,
    serif;
  cursor: pointer;
}
#daily-dialog .month-step:disabled {
  color: #d8d49a33;
  cursor: default;
}
#daily-dialog .month-step:not(:disabled):hover {
  background: #ffffff0d;
}
.daily-weekdays,
.daily-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-items: center;
  column-gap: 4px;
}
.daily-weekdays {
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #98ae99;
}
.daily-calendar {
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: 6px;
}
.daily-calendar li {
  display: block;
}
.daily-calendar .day {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #b5c9b6;
  background: #0f231d88;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.daily-calendar .day > svg:not(.mark) {
  width: 28px;
  height: 28px;
}
.daily-calendar .done .day {
  background: #2c4633;
  border-color: #9dbb8a55;
}
/* ✓: a small moss-green badge tucked at the flower's shoulder. */
.daily-calendar .mark.tick {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
}
.daily-calendar .mark.tick circle {
  fill: #cfe3a4;
  stroke: #142b24;
  stroke-width: 1.2;
}
.daily-calendar .mark.tick path {
  fill: none;
  stroke: #1d3a2b;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ✕: clear but gentle, drawn over the dimmed date. */
.daily-calendar .missed .day {
  background: transparent;
  border: 1px solid #60735a55;
  color: #8fa48877;
}
.daily-calendar .mark.cross {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.daily-calendar .mark.cross path {
  fill: none;
  stroke: #b7a98e;
  stroke-opacity: 0.75;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.daily-calendar .future .day {
  background: transparent;
  color: #6f8471;
}
.daily-calendar .before .day {
  background: transparent;
  color: #8a9d8b;
}
.daily-calendar .today .day {
  outline: 1.5px solid #e6d28a;
  outline-offset: 2px;
  color: #f6e4a0;
}
.daily-calendar .open .day {
  background: #3a3a26;
}
.daily-calendar .blank {
  visibility: hidden;
}
.daily-streak .streak-best {
  display: block;
  margin-top: 2px;
  font:
    13px ui-sans-serif,
    system-ui,
    sans-serif;
  color: #b9c8b3;
}
.daily-rank {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #d9dcc3;
}
@media (max-width: 340px), (max-height: 640px) {
  .daily-calendar .day {
    width: 32px;
    height: 32px;
  }
  .daily-calendar {
    row-gap: 4px;
  }
  .daily-calendar .day > svg:not(.mark) {
    width: 24px;
    height: 24px;
  }
}

/* Invite a friend: in the daily dialog, and in the garden bar while a daily
   garden is being played. */
#daily-dialog .daily-invite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #e6d28a66;
  background: transparent;
  color: #f0e3a8;
}
#daily-dialog .daily-invite[hidden] {
  display: none;
}
.daily-invite svg,
#daily-invite-bar svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.daily-share-status {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #e6d28a;
  text-align: center;
  overflow-wrap: anywhere;
}
.daily-share-status:empty {
  display: none;
}
#daily-invite-bar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  min-width: 44px;
  padding: 0 15px 0 12px;
  border: 1px solid color-mix(in srgb, var(--world-edge, #50694e) 80%, #c5cf9d);
  border-radius: 22px;
  color: #f0e3a8;
  background: #0f231d99;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font:
    15px Georgia,
    serif;
  cursor: pointer;
}
#daily-invite-bar[hidden] {
  display: none;
}
#daily-invite-bar:hover {
  border-color: #c5cf9d;
  background: #17332acc;
}
#daily-invite-bar:focus-visible {
  outline: 2px solid #f2d88d;
  outline-offset: 3px;
}
@media (max-width: 419px) {
  /* Phones: the glyph alone, still named "Invite a friend to this garden". */
  #daily-invite-bar {
    width: 44px;
    padding: 0;
  }
  #daily-invite-bar span {
    display: none;
  }
}
@media (orientation: landscape) and (min-width: 500px) and (max-width: 740px) and (max-height: 560px) {
  #daily-invite-bar {
    width: 44px;
    padding: 0;
  }
  #daily-invite-bar span {
    display: none;
  }
}
.invite-toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  margin: 0;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid #60735a;
  background: #142b24f2;
  box-shadow: 0 12px 40px #0008;
  color: #f0e3a8;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
  transform: translate(-50%, -8px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.invite-toast.shown {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .invite-toast {
    transition: none;
  }
}
.daily-locked {
  display: grid;
  grid-template-columns: repeat(var(--columns, 6), 14px);
  gap: 10px;
  width: max-content;
  margin: 6px auto 2px;
  padding: 14px 18px;
  border: 1px solid #60735a44;
  border-radius: 16px;
  background: #0f231d66;
}
.daily-locked span {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid #91aa75;
}
.daily-locked span.on {
  background: #e6d28a;
  border-color: #e6d28a;
  box-shadow: 0 0 6px #e6d28a66;
}

/* Rows that don't apply (no email saving, already installed) take no space. */
.menu-item[hidden] {
  display: none;
}
/* Save your progress: gently highlighted until the player has saved. */
#menu-dialog .menu-save:not(.saved) .menu-icon {
  border-color: #e6d28a99;
  color: #f2d88d;
}
#menu-dialog .menu-save:not(.saved) [data-save-label] {
  color: #f4e7b3;
}
/* Very short screens: titles only, so every entry fits without scrolling. */
@media (max-height: 640px) {
  #menu-dialog .menu-label small {
    display: none;
  }
  #menu-dialog .menu-item {
    min-height: 46px;
  }
  #menu-dialog .menu-icon {
    width: 32px;
    height: 32px;
  }
}

/* The menu picture is a still of the current scene: its living motion would
   start all at once during the sheet's rise, and it is only a small preview. */
#menu-art,
#menu-art * {
  animation: none !important;
  transition: none !important;
}

/* Short phones (320 × 568 and similar): the tracker, the run and all three
   actions fit without scrolling. */
@media (max-height: 640px) and (max-width: 599px) {
  #daily-dialog {
    padding: 8px 16px 12px;
  }
  #daily-dialog .daily-top .eyebrow {
    display: none;
  }
  #daily-dialog .daily-top {
    position: absolute;
    top: 8px;
    right: 10px;
  }
  #daily-title {
    font-size: 24px;
    margin: 6px 0 0;
  }
  #daily-dialog .daily-lede {
    display: none;
  }
  .daily-month {
    margin-bottom: 0;
  }
  #daily-dialog .month-step {
    height: 30px;
  }
  .daily-calendar .day {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .daily-calendar .day > svg:not(.mark) {
    width: 22px;
    height: 22px;
  }
  .daily-calendar .mark.tick {
    width: 13px;
    height: 13px;
  }
  .daily-calendar {
    row-gap: 3px;
  }
  #daily-dialog .daily-streak {
    margin-top: 8px;
  }
  #daily-dialog .daily-actions {
    margin-top: 10px;
    gap: 2px;
  }
  #daily-dialog .daily-actions button {
    min-height: 44px;
  }
}
@media (max-width: 379px) {
  #chapter .chapter-extra {
    display: none;
  }
}