/* The season as a game screen: the castle fills the window, and the HUD, the action bar and the panels
   float over it. The page is always in the dark theme; by day the sky is bright behind a dark HUD. */

html, body { height: 100%; }
body.game-page {
  margin: 0;
  overflow: hidden;
  background: #0e0b18;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.game { position: fixed; inset: 0; overflow: hidden; overflow: clip; --hud-h: 64px; --bar-h: 56px; }
#stage {
  position: absolute;
  left: 0;
  top: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  cursor: crosshair;
  border-radius: 0;
  background: #0e0b18;
  transform-origin: 0 0;
  will-change: transform;
}

/* Room names, placed from the camera each frame. */
.glabels { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.glabels span {
  position: absolute;
  transform: translate(-50%, 3px);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 2px;
  background: rgb(14 11 24 / 0.72);
  color: #e9e2ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glabels span.up { transform: translate(-50%, calc(-100% - 3px)); }
.glabels span.marked { color: #ffd0d8; box-shadow: inset 0 0 0 1px rgb(255 90 120 / 0.6); }

/* Glass panels over the castle. */
.ghud, .gbar {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  background: rgb(10 8 18 / 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--ink);
}
.ghud {
  top: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  display: grid;
  gap: 4px;
}
.ghud-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ghud .clock { gap: 8px; }
.ghud .time { font-size: 16px; min-width: 3em; }
.gctl { display: flex; gap: 6px; margin-left: auto; }
.gres-row { display: flex; align-items: center; gap: 8px; }
.gres { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: 13px; }
.gres > div { display: flex; align-items: center; gap: 5px; }
.gres dt { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.gres dd { margin: 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.gres dd .cap { color: var(--ink-3); font-size: 12px; }
.gres .pips { margin-left: 6px; }
.gres .pips i { width: 8px; height: 8px; }
/* More: a phone's HUD keeps the rest of the stores behind it; a wide screen shows them all. One speed button
   that steps 1×, 2×, 4× stands in for the three on a phone. */
.gmore, .speed1 { display: none; }
/* The weather: today's, then tomorrow's; rain, and rain coming, stand out. */
.gres .wx .fc { color: var(--ink-3); font-family: inherit; font-size: 12px; }
.gres .wx-rain b { color: #9fcfff; }
.gres .wx-fog b { color: #c9ced8; }
.gres .wx-coming .fc { color: #9fcfff; }

.gbar {
  bottom: 0;
  padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 8px) max(10px, env(safe-area-inset-left, 0px));
  border-top: 1px solid rgb(255 255 255 / 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gtools, .gmenu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gbar .btn.sm { min-height: 38px; padding-inline: 11px; }
.gmenu .btn { position: relative; }
.gmenu .dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dusk);
  box-shadow: 0 0 0 2px rgb(10 8 18 / 0.8);
}

/* Zoom, on the right edge above the bar. Pinch, the wheel and dragging do the same on the castle. */
.gzoom {
  position: absolute;
  right: calc(var(--free-right, 0px) + max(10px, env(safe-area-inset-right, 0px)));
  bottom: calc(var(--bar-h) + 64px);
  z-index: 4;
  display: grid;
  gap: 6px;
}
.gzoom .btn.sm {
  min-width: 40px;
  min-height: 40px;
  padding: 4px;
  font-size: 18px;
  line-height: 1;
  background: rgb(10 8 18 / 0.78);
  border-color: rgb(255 255 255 / 0.18);
  color: #ebe9f3;
}
.gzoom #zoom-fit { font-size: 12px; font-weight: 700; }
#stage.is-panning { cursor: grabbing; }

/* A hint above the bar about what the next tap does. */
.ghint {
  position: absolute;
  left: calc((100% - var(--free-right, 0px)) / 2);
  bottom: calc(var(--bar-h) + 10px);
  transform: translateX(-50%);
  z-index: 4;
  width: max-content;
  max-width: min(560px, calc(100% - 24px));
  margin: 0;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgb(10 8 18 / 0.78);
  color: #d8d2ee;
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}
.ghint:empty { display: none; }

/* The panel: a sheet from the bottom on phones, a drawer on the right on wide screens. */
.gsheet {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.5);
  -webkit-user-select: text;
  user-select: text;
}
.gsheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.gsheet-body { overflow: auto; overscroll-behavior: contain; padding: 12px; display: grid; gap: 14px; align-content: start; }
.gsheet .phase { border-radius: 4px; }
.gsheet .rosters { gap: 12px; }
@media (max-width: 899px) {
  .gsheet {
    left: 0;
    right: 0;
    bottom: var(--bar-h);
    /* Room above it for a guide or tutorial card, so the card never covers the panel's Close. */
    max-height: min(66vh, calc(100% - var(--hud-h) - var(--bar-h) - var(--coach-h, 0px) - 48px));
    border-radius: 12px 12px 0 0;
    border-top: 1px solid var(--line-2);
  }
}
@media (min-width: 900px) {
  .gsheet {
    top: var(--hud-h);
    bottom: var(--bar-h);
    right: 0;
    width: min(460px, 42vw);
    border-left: 1px solid var(--line-2);
  }
}

/* The main screen: over the keep as it stands, with the HUD, the bar and the room names put away under it.
   Dark at the top for the name and at the bottom for the menu, clearer between, where the keep shows. */
.gtitle {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: auto;
  overscroll-behavior: contain;
  padding: max(20px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgb(10 8 18 / 0.9) 0%, rgb(10 8 18 / 0.45) 26%, rgb(10 8 18 / 0.3) 42%, rgb(10 8 18 / 0.9) 64%, rgb(10 8 18 / 0.96) 100%);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}
.gtitle[hidden] { display: none; }
.game.is-title .ghud, .game.is-title .gbar, .game.is-title .gzoom, .game.is-title .glabels, .game.is-title .ghint, .game.is-title .gcoach { visibility: hidden; }
.title-wrap { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 100%; width: min(440px, 100%); margin: 0 auto; }
.title-top { text-align: center; padding-top: 3vh; }
.title-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(46px, 14vw, 80px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #f4dca8;
  text-shadow: 0 0 22px rgb(255 186 84 / 0.5), 0 2px 0 rgb(0 0 0 / 0.7);
}
.title-tag { margin: 10px auto 0; max-width: 32ch; color: #ddd7f0; font-size: 15px; line-height: 1.45; text-shadow: 0 1px 3px rgb(0 0 0 / 0.9); }
.title-menu { display: grid; gap: 10px; }
.title-go { display: grid; gap: 2px; justify-items: start; text-align: left; min-height: 58px; padding: 9px 14px; }
.title-go span { font-size: 17px; font-weight: 700; }
.title-go small { font-size: 12.5px; font-weight: 400; opacity: 0.85; }
.gtitle .btn.primary { background: #efc676; border-color: #efc676; color: #1d1405; }
.gtitle .btn.primary:hover:not(:disabled) { background: #f5d38e; filter: none; }
.title-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.title-row .btn { min-height: 46px; justify-content: center; padding-inline: 6px; }
.title-link { justify-self: center; background: none; border-color: transparent; color: #ddd7f0; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .title-link:hover:not(:disabled) { background: rgb(255 255 255 / 0.06); } }
.title-install { text-align: center; color: #ddd7f0; }
.title-h { margin: 0; font-family: var(--font-display); font-size: 24px; color: #f4dca8; }
.title-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: 10px; background: rgb(22 20 32 / 0.95); }
.title-card .presets { margin: 0; }
.title-card p { margin: 0; }
.title-check { display: flex; gap: 10px; align-items: flex-start; }
.title-check input { flex: none; margin: 3px 0 0; }

/* Toasts sit under the HUD, clear of the bar and the panel. */
.game .toasts { top: calc(var(--hud-h) + 10px); bottom: auto; right: calc(var(--free-right, 0px) + 12px); z-index: 8; }
.toast .row { display: flex; gap: 6px; flex-wrap: nowrap; }

/* Nothing on the game's screens is under 12 px (round seven): the shared sheet's log times, table heads and
   kind tags were 11. */
.log .when, .ledger th, .kind { font-size: 12px; }

/* Bits of the old layout the panels still use. */
.linkish {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.linkish[aria-pressed="true"] { color: var(--day-ink); text-decoration-color: currentColor; }
.prow.is-selected { background: var(--day-tint); }
.prow { grid-template-columns: minmax(6rem, 1fr) minmax(8rem, 1.2fr) minmax(0, 1.6fr); }
.question { border-color: var(--rite); background: var(--rite-tint); }
.question textarea { background: var(--box); }
details.card > summary { cursor: pointer; }
details.card .facts li { display: block; }
.scry .ways { margin: 0.5rem 0; padding-left: 1.2rem; }
.scry .ways li { margin: 0.3rem 0; }
.scry .ways li.bad { color: var(--bad); font-weight: 700; }
.scry .row { align-items: flex-start; font-size: 14px; }
.break-ask { display: grid; gap: 4px; max-width: 34rem; }
.fire .heat { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 4px 0 8px; }
.fire .heat span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bad), #ffb14a); }
.break-ask .note { margin: 0; }
table.days { min-width: 680px; }

@media (max-width: 560px) {
  .ghud { padding-block: calc(env(safe-area-inset-top, 0px) + 5px) 5px; gap: 3px; }
  .ghud-row { flex-wrap: nowrap; gap: 6px; }
  .ghud .clock { gap: 6px; min-width: 0; }
  .ghud .pill { font-size: 12px; padding: 2px 6px; }
  .ghud .time { font-size: 14px; min-width: 0; }
  .ghud .bar { display: none; }
  .gctl { gap: 4px; }
  .gctl .btn.sm { min-height: 32px; padding: 3px 8px; }
  .gctl .speeds { display: none; }
  .gctl .speed1 { display: inline-flex; align-items: center; justify-content: center; }
  .gres { gap: 0 10px; font-size: 14px; }
  .gres dt { font-size: 13px; letter-spacing: 0; text-transform: none; }
  .gres .pips { display: none; }
  .gres:not(.all) .rest { display: none; }
  .gmore { display: inline-flex; align-items: center; flex: none; }
  .gbar { gap: 6px; }
  .gtools, .gmenu { width: 100%; }
  .gmenu .btn { flex: 1; }
  .prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .game .toasts { right: 8px; width: calc(100vw - 16px); gap: 6px; }
  .toast { font-size: 13px; padding: 6px 8px 6px 10px; }
}

/* The Book of the Dead. */
.book { display: grid; gap: 8px; }
.book + .book { margin-top: 6px; }
.bookpage { border: 1px solid var(--line); background: var(--box); border-radius: 4px; padding: 10px 12px; display: grid; gap: 6px; }
.bookpage header { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.bookpage header b { font: 700 19px/1.2 var(--font-display); color: var(--ink); }
.bookpage p { font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 68ch; }
.bookpage.is-raider header b { color: var(--ink-2); }
.roster-head .btn.sm { margin-left: auto; }

/* The Hall of Keepers (round seven, phase 16): the deeds, then each keep played, opening on its card and its Book. */
.hall { display: grid; gap: 10px; }
.hall-keep { border: 1px solid var(--line-2); border-radius: 6px; padding: 10px 12px; display: grid; gap: 6px; background: var(--panel); }
.hall-keep.is-open { border-color: var(--rite); }
.hall-keep header { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; justify-content: space-between; }
.hall-keep header b { font: 700 19px/1.2 var(--font-display); color: var(--ink); }
.hall-keep p { margin: 0; }
.hall-keep .tag { color: var(--rite-ink); border-color: var(--rite); background: var(--rite-tint); }
.hall-keep .tag.bad { color: var(--bad); border-color: var(--bad); background: var(--bad-tint); }
.hall-book { display: grid; gap: 8px; }
.hall-words { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; background: var(--box); display: grid; gap: 4px; }
.deeds { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.deeds li { padding-left: 22px; position: relative; color: var(--ink-3); }
.deeds li::before { content: '○'; position: absolute; left: 2px; top: 0; color: var(--ink-3); }
.deeds li b { color: var(--ink-2); }
.deeds li.is-done b { color: var(--ink); }
.deeds li.is-done::before { content: '●'; color: var(--rite); }
.daily-past ul { margin: 4px 0 8px; padding-left: 18px; color: var(--ink-2); font-size: 14px; }

/* The guide: one card above the bar (or above an open sheet), and a pulse on what it points at. */
.gcoach {
  position: absolute;
  left: calc((100% - var(--free-right, 0px)) / 2);
  bottom: calc(var(--bar-h) + var(--sheet-h, 0px) + 10px);
  transform: translateX(-50%);
  z-index: 9; /* above the toasts: on a phone with a tall panel open, the card rises to where they are */
  width: min(460px, calc(100% - var(--free-right, 0px) - 24px));
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--day);
  background: rgb(22 18 34);
  color: #ece6ff;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.45);
}
.gcoach .row { gap: 6px; }
/* The tutorial's lessons: the same card, labelled, in the dusk colour. */
.gcoach.is-tutorial { border-color: var(--dusk, #c98bff); }
.gcoach .eyebrow { color: var(--day); }
.gcoach.is-tutorial .eyebrow { color: var(--dusk, #c98bff); }
/* The year's end: three endings, one above another. */
.ending .endings { display: grid; gap: 10px; }
.ending .endings > div { display: grid; gap: 4px; justify-items: start; }
/* The dead's requests at the rite. */
.rite-row .ask { grid-column: 1 / -1; display: grid; gap: 6px; padding: 8px; border-left: 3px solid var(--rite, #3cc9b0); background: rgb(60 201 176 / 0.07); border-radius: 0 4px 4px 0; }
.rite-row .ask p { margin: 0; }
.rite-row .ask q { font-style: italic; color: var(--ink); }
.rite-row .ask small { color: var(--ink-2); }
.rite-row .ask .bad { color: var(--bad); }
/* The night review at dawn: stills of the Tain, one above another, at up to 3x. */
.review summary { cursor: pointer; }
.review .moments { display: grid; gap: 10px; margin-top: 8px; }
.moment { margin: 0; display: grid; gap: 4px; }
.moment img { width: 100%; max-width: 336px; height: auto; image-rendering: pixelated; border-radius: 3px; background: #0b0816; }
.moment figcaption { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.moment figcaption b { font-variant-numeric: tabular-nums; color: var(--ink); margin-right: 4px; }
/* How to play: the manual in the Menu. */
.howto { display: grid; gap: 10px; }
.howto .card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 68ch; }
.is-coached { outline: 3px solid var(--day); outline-offset: 2px; animation: coach 1.2s ease-in-out infinite; }
@keyframes coach { 50% { outline-color: transparent; } }
:root[data-motion="reduce"] .is-coached { animation: none; }

/* Where to build: the bare halls and a new floor, each with where its twin stands by night. */
.places { display: grid; gap: 6px; }
.place { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.place:has(input:checked) { border-color: var(--day); background: rgb(201 138 28 / 0.08); }
.place input { margin-top: 3px; }
.place span { display: grid; gap: 2px; }
.place small, .kroom small { color: var(--ink-2); font-size: 12px; line-height: 1.35; }
/* Rearranging: the keep floor by floor, top first as the castle shows it. */
.rearrange summary { cursor: pointer; }
.kfloors, .kfloor ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kfloors { margin-top: 8px; }
.kroom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; }
.kroom > span:first-child { display: grid; gap: 2px; }
.kroom.is-moving { border-color: var(--day); }
.kroom .row { gap: 6px; flex-wrap: wrap; }
/* The build list: each room with what it does by day and by night, and its button. */
.build-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.build-row { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; padding: 0.5rem 0.6rem; border: 1px solid var(--line, #2c2640); border-radius: 8px; }
.build-row .note { margin: 0.2rem 0 0; }
.build-row .btn { flex: none; }

/* ---------- the Menu: Settings and Saves */
.menu { border: 1px solid var(--line); background: var(--box); border-radius: 6px; min-width: 0; }
.settings, .saves { display: grid; gap: 10px; min-width: 0; }
.settings h3 {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.settings h3:first-child { margin-top: 0; }
.settings fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
/* A long label wraps beside its box, not under it. */
.settings label.row { flex-wrap: nowrap; align-items: flex-start; }
.settings label.row input { flex: none; margin-top: 3px; }
.settings legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 700; }
.keys { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 13px; }
.keys div { display: contents; }
.keys dt { font-family: var(--font-num); color: var(--ink); }
.keys dd { margin: 0; color: var(--ink-2); }
.settings .slider { display: grid; gap: 2px; font-size: 14px; max-width: 26rem; }
.settings .slider input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: var(--rite); }
.hear summary { cursor: pointer; font-size: 14px; padding: 4px 0; }
.hear-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.advanced { border-top: 1px solid var(--line); padding-top: 8px; }
.advanced summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.advanced[open] summary { margin-bottom: 8px; }
.advanced .hint { margin: 8px 0 0; }
.kslots { display: grid; gap: 10px; }
.kslot { border: 1px solid var(--line-2); border-radius: 6px; padding: 10px 12px; display: grid; gap: 6px; background: var(--panel); }
.kslot.is-here { border-color: var(--rite); box-shadow: inset 3px 0 0 var(--rite); }
.kslot p { margin: 0; }
.kslot b { color: var(--ink); }
label.btn { display: inline-flex; align-items: center; }
.kslot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kslot .tag { color: var(--rite-ink); border-color: var(--rite); background: var(--rite-tint); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.visually-hidden:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The difficulty for a new keep: the chosen one shows pressed. */
.presets { border: 0; padding: 0; margin: 10px 0; }
.presets legend { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.presets .seg input:checked + label.btn,
.presets .seg input:checked + label.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--box); }

/* ---------- traits */
.ptrait { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2); }
.strait { display: block; color: var(--ink-2); }
.ptrait b, .strait b { color: var(--rite-ink); font-weight: 700; }

/* The recap card's preview, at the season's end. */
.recap { display: block; width: 100%; max-width: 380px; height: auto; margin: 4px auto 10px; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
/* The gate while the Host is at it. */
.raid .gatebar { height: 10px; border-radius: 5px; background: var(--bad-tint); overflow: hidden; margin: 4px 0 8px; box-shadow: inset 0 0 0 1px var(--line); }
.raid .gatebar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a6a4a, #c9a27a); }

/* The crusade: each mirror, who's in it, and hiding it. */
.facts.hides li { align-items: center; }

/* The tide clock (round six): the night from dusk to dawn, a mark for each tide, Maw, the Hollow, each of the
   Drowned and a sleepwalker's hour. Marks differ in height as well as colour: tides full, Maws and the Hollow
   taller, the rest short. */
.tide { display: flex; align-items: center; gap: 10px; }
.tide .tclock { flex: 1; min-width: 0; }
.tnext { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.tnext:empty { display: none; }
.tclock { position: relative; height: 8px; margin: 3px 0 1px; background: var(--box-2, #1a1622); border: 1px solid var(--line, #3a3446); border-radius: 3px; }
.tclock .tfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgb(255 255 255 / 0.14); border-radius: 2px; }
.tclock .mk { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; border-radius: 1px; }
.tclock .mk-tide { background: #e0524f; }
.tclock .mk-maw { background: #f0a040; top: -3px; bottom: -3px; }
.tclock .mk-hollow { background: #b98cff; top: -3px; bottom: -3px; width: 4px; }
.tclock .mk-great { background: #ff3b3b; top: -4px; bottom: -4px; width: 5px; }
.tclock .mk-drowned { background: #6fb6ff; top: 3px; }
.tclock .mk-sleeper { background: #e8e2d0; top: 3px; }
.tclock .mk-dawn { background: #f2c14e; margin-left: -3px; }
.tclock .mk-sun { background: #f2c14e; margin-left: -3px; }
.tclock.eclipse { border-color: #6a4fc0; }
/* Tonight's omen at dusk, and the two to choose between. */
.omen .k { font-weight: 700; }
.omen-pick { display: grid; gap: 6px; margin-top: 6px; }
.omen-btn { text-align: left; white-space: normal; line-height: 1.35; }
.omen-btn[aria-pressed="true"] { outline: 2px solid #f2c14e; }

/* The playtest kit (round six): the tester's note and questions, and the card that points to them. */
.card.test { border-color: var(--rite); background: var(--rite-tint); display: grid; gap: 8px; }
.card.test h2 { margin: 0; }
.card.test p { margin: 0; }
.card.test label { display: block; margin-top: 4px; color: var(--ink); font-size: 14px; }
.card.test textarea { background: var(--box); font-size: 14px; }
.card.test textarea#test-text { font-family: var(--font-num); font-size: 12px; }
.test-menu { border-color: var(--rite); margin-bottom: 10px; }
.test-menu p { margin: 0 0 6px; }

/* The replay viewer (round six's playtest kit): the timeline, the controls under it, and the session. */
.pill.watching { background: #6fb6ff; color: #0e0b18; font-weight: 700; }
.wbar { width: 100%; display: grid; gap: 6px; }
.wline {
  position: relative;
  height: 28px;
  background: var(--box-2, #1a1622);
  border: 1px solid var(--line, #3a3446);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  touch-action: none;
}
.wline:focus-visible { outline: 2px solid #6fb6ff; outline-offset: 2px; }
.wsegs, .wmarks { position: absolute; inset: 0; pointer-events: none; }
.wseg { position: absolute; top: 0; bottom: 0; }
.ws-day { background: rgb(242 193 78 / 0.16); }
.ws-night { background: rgb(92 70 160 / 0.42); }
.ws-dusk, .ws-dawn, .ws-end, .ws-over { background: rgb(255 255 255 / 0.07); }
.wfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgb(255 255 255 / 0.07); border-right: 2px solid #fff; pointer-events: none; }
/* The game's moments in the upper half, the tester's in the lower: told apart by place as well as colour. */
.wm { position: absolute; width: 3px; margin-left: -1px; border-radius: 1px; }
.wm.wl-game { top: 2px; height: 11px; }
.wm.wl-you { bottom: 2px; height: 11px; }
.wm-death, .wm-fell { background: #ff5a5f; width: 4px; }
.wm-crack { background: #ff8a8a; }
.wm-caught { background: #f0a040; }
.wm-visit { background: #e8c060; }
.wm-bad { background: rgb(240 160 64 / 0.35); width: 2px; }
.wm-good { background: rgb(140 220 140 / 0.3); width: 2px; }
.wm-pause { background: #6fb6ff; }
.wm-idle, .wm-away { background: #b98cff; width: 4px; }
.wm-refused { background: #ffd0d8; }
.wm-panel, .wm-lesson, .wm-skip { background: rgb(111 182 255 / 0.45); width: 2px; }
.wrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.wctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.watch .wans { display: grid; gap: 4px; margin: 0; }
.watch .wans dt { color: var(--ink-2); font-size: 13px; }
.watch .wans dd { margin: 0 0 6px; }
.wlist { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; font-size: 13px; }
.wlist .linkish { font-family: var(--font-num); font-size: 12px; }
.wk { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.wk-death, .wk-fell { background: #ff5a5f; }
.wk-crack { background: #ff8a8a; }
.wk-caught { background: #f0a040; }
.wk-visit { background: #e8c060; }
.wk-pause { background: #6fb6ff; }
.wk-idle, .wk-away { background: #b98cff; }
.wk-refused { background: #ffd0d8; }
.wk-panel, .wk-lesson, .wk-skip { background: rgb(111 182 255 / 0.45); }
.watch-load { margin-top: 12px; }
.wpaste summary { cursor: pointer; margin: 6px 0; }
@media (max-width: 560px) {
  .wctl { width: 100%; }
  .wbar .gmenu { width: 100%; }
}

/* Visitors at the gate (round six): the answers, each with what it costs, and the time left to answer. */
.card.visit { border-color: var(--day); }
.card.visit .answers { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.card.visit .answers li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
.card.visit .answers small { color: var(--ink-2); line-height: 1.3; }
.card.visit .answers small .why { display: block; color: var(--bad); }
.card.visit .note { margin-bottom: 4px; }
.card.visit .waitbar { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.card.visit .waitbar i { display: block; height: 100%; background: var(--day); }
.toast.visit { --tone: var(--day); }
.log .visit { color: var(--day-ink); }
@media (max-width: 420px) { .card.visit .answers li { grid-template-columns: 1fr; } }

/* The Library's studies and the Hall's decrees (round six): a row each, the words and then the button. */
.card .studies { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.card .studies li { display: flex; justify-content: space-between; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.card .studies li > div { flex: 1 1 14em; }
.card .studies li small { color: var(--ink-2); }
.card .studies .row { display: flex; gap: 6px; align-items: center; }
.card .studies select { font: inherit; font-size: 13px; }

/* Something went wrong (round seven): over everything, the game stopped, and what can still be done. */
.crash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgb(8 7 12 / 0.72); }
.crash-card { max-width: 30rem; width: 100%; max-height: 100%; overflow: auto; padding: 18px; border-radius: 10px; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 10px 40px rgb(0 0 0 / 0.5); }
.crash-card h2 { margin: 0 0 10px; font-size: 20px; }
.crash-card p { margin: 0 0 10px; }
.crash-card .row { flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.crash-card pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; color: var(--ink-2); max-height: 12rem; overflow: auto; }
.settings .build { margin-top: 18px; }

/* Custom rules at New game (round seven, phase 2). */
details.custom { margin: 10px 0 4px; }
details.custom > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
details.custom .custom-num { display: grid; gap: 4px; margin: 10px 0; }
details.custom .custom-num input { width: 100%; }
details.custom .custom-parts { margin: 12px 0 8px; border: 0; padding: 0; }
details.custom .custom-parts legend { font-weight: 700; margin-bottom: 4px; }
/* The keyboard's keys are for a keyboard: not on a touch screen that has none. */
@media (hover: none) and (pointer: coarse) {
  .settings .keys-h, .settings .keys { display: none; }
}
details.custom .custom-parts .row { flex-wrap: nowrap; align-items: flex-start; }
details.custom .custom-parts .row input { flex: none; margin-top: 0.25em; }

/* Round seven, phase 3: on a touch screen every control is at least 44 px each way, the least a fingertip
   should be asked to hit (the audit found 1,925 of the phone's 1,949 under it). Selectors match the ones
   they outgrow. */
@media (pointer: coarse) {
  .btn, .btn.sm, .gbar .btn.sm, .gctl .btn.sm, .gzoom .btn.sm, .title-row .btn { min-height: 44px; min-width: 44px; }
  .btn.sm { padding-inline: 12px; }
  .tab { min-height: 44px; min-width: 44px; }
  .toast button { min-height: 44px; min-width: 44px; }
  .linkish { min-height: 44px; }
  select, input[type="text"], input[type="number"] { min-height: 44px; }
  input[type="range"], .settings .slider input[type="range"] { height: 44px; }
  summary, .hear summary, .advanced summary, details.custom > summary { padding-block: 12px; }
  label.row, .settings label.row, .title-check, .place, details.custom .custom-parts .row { min-height: 44px; align-items: center; }
  .settings label.row input, .title-check input, details.custom .custom-parts .row input, .place input { margin-top: 0; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
}

/* The Dusk panel on a phone: half the free height, so the Tain shows above it while the black mirror is
   read (round seven, phase 3). Its lines are taps that bring their spot into view. */
@media (max-width: 899px) {
  .gsheet.is-half { max-height: calc((100% - var(--hud-h) - var(--bar-h)) * 0.5); }
}
.scry .ways .way {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; width: 100%;
  margin: 0 -8px; padding: 6px 8px; border: 0; border-radius: 4px; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.scry .ways .way:hover { background: rgb(255 255 255 / 0.05); }
.scry .ways .way:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.scry .ways .go { flex: none; padding-top: 1px; font-size: 12px; font-weight: 400; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }

/* The emergency strip, under the HUD's stores (round seven, phase 3). */
.estrip { display: grid; gap: 5px; margin-top: 2px; padding: 6px 8px; border: 1px solid var(--bad); border-radius: 6px; background: rgb(96 24 34 / 0.55); }
.estrip.is-visit { border-color: var(--day); background: rgb(96 70 14 / 0.5); }
.estrip.is-road { border-color: var(--day); background: rgb(96 70 14 / 0.5); }
.estrip .etext { margin: 0; font-size: 13px; line-height: 1.35; color: var(--ink); }
.estrip .emore { color: var(--ink-2); }
.estrip .ebar { display: block; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.12); overflow: hidden; }
.estrip .ebar i { display: block; height: 100%; width: 0; background: #ff8a6a; }
.estrip.is-visit .ebar i { background: var(--day); }
.estrip .ehead { display: flex; align-items: flex-start; gap: 8px; }
.estrip .ehead .etext { flex: 1; min-width: 0; }
.estrip .eacts { gap: 6px; flex-wrap: nowrap; }
.estrip .eacts .btn { flex: 1 1 0; min-width: 0; }
@media (pointer: coarse) { .scry .ways .way { min-height: 44px; } }
@media (min-width: 561px) {
  .estrip { max-width: 44rem; }
  .estrip .eacts .btn { flex: 0 1 auto; }
}

/* Standing explanations, folded (round seven, phase 4): a "?" and a few words, opened in place. */
details.why { margin: 0; }
details.why > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 2px 0; font-size: 13px; color: var(--ink-3); }
details.why > summary::-webkit-details-marker { display: none; }
details.why .q { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--ink-2); }
details.why[open] > summary { color: var(--ink-2); }
details.why .why-body { display: grid; gap: 4px; margin: 2px 0 6px; }
details.why .why-more { margin: 0; font-size: 13px; }
@media (pointer: coarse) { details.why > summary { min-height: 44px; padding-block: 0; } }

/* Round seven, phase 5: the glass test, a still of the Tain as large as the sheet allows, and one thing to tap. */
.quiz h2 .count { margin-left: 6px; font-size: 14px; color: var(--ink-3); }
.quiz-cam { margin: 0; font-size: 13px; color: var(--ink-3); }
.quiz-ask { margin: 2px 0 0; font-size: 18px; font-weight: 700; }
.quiz-still { display: grid; place-items: center; }
.quiz-still img { width: 100%; max-width: 448px; height: auto; image-rendering: pixelated; border-radius: 3px; background: #0b0816; cursor: crosshair; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.quiz-count .btn { min-width: 48px; }
.quiz-fb { min-height: 1.4em; margin: 0; font-weight: 700; }
.quiz-fb.good { color: var(--good); }
.quiz-fb.bad { color: var(--bad); }

/* A newer build is ready (round seven, phase 19): on the main screen and at the top of the Menu. */
.card.update { border-color: var(--day); box-shadow: inset 3px 0 0 var(--day); }
.card.update p { margin: 0 0 6px; }