@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
/* the church's letters: Cinzel, cut like an inscription in stone, for names and headings; EB Garamond, an old book's
   type, for the words (both SIL OFL, fonts/OFL.txt; Latin and Latin Extended, so Polish, German and Spanish too) */
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-ext.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; src: url("fonts/garamond.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; src: url("fonts/garamond-ext.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The whole skin: pale plaster by day, a dark chapel at night, one emerald accent. light-dark(day, night).
   The light itself (glass, shafts, floor) is not here: light.js works it out from the sun's hour. */
:root {
  color-scheme: light dark;

  --bg: light-dark(#F4F3EF, #0E1211);
  --surface: light-dark(#FCFBF8, #161C1A);   /* sheets, the mode switch */
  --line: light-dark(#E0DDD5, #27302C);
  --ink: light-dark(#141816, #EEF2EE);
  --muted: light-dark(#59615C, #9DA8A2);
  --accent: light-dark(#12A874, #22C389);     /* emerald: fills */
  --accent-ink: light-dark(#0B7A51, #3DDC97); /* emerald for text, AA on the background */
  --on-accent: #04130C;
  --focus: light-dark(#0B7A51, #3DDC97);
  --lead: light-dark(#1F2523, #2A322F);       /* the window's lead and frame */
  --stone: light-dark(#E4E0D6, #151B19);      /* the floor between and around the light */
  --shadow: light-dark(rgba(20, 30, 25, .16), rgba(0, 0, 0, .6));
  --sun: #FFFBF4;                              /* white sunlight at this hour, set by app.js */

  --font: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --r: 999px;
  --r-s: 12px;
  --r-l: 22px;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --cell: clamp(15px, 4.6vw, 24px);            /* a glass square in the tray */
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { margin: 0 0 16px; padding: 14px 16px; border: 2px dashed var(--line); border-radius: var(--r-s); }
.muted { color: var(--muted); }
.small { font-size: 14px; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  /* the room takes a breath of the hour's sunlight */
  background: color-mix(in oklab, var(--bg) 94%, var(--sun));
  color: var(--ink);
  font: 400 16px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-ink); }
h1, h2, p { margin: 0; }

.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
  overflow: clip;
}

/* ----- the bar: logo, Daily / Levels, pop out, sound, menu */
.bar {
  display: flex; align-items: center; gap: 8px;
  width: min(100%, 560px); margin: 0 auto;
  height: calc(56px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin-left: -4px; padding: 4px 8px 4px 4px; border-radius: var(--r-s);
  font-size: 22px; font-weight: 700; letter-spacing: -0.035em; text-decoration: none;
}
.brand:hover { color: inherit; }
.brand img { display: block; transition: transform .3s var(--pop); }
.brand:hover img { transform: rotate(-10deg) scale(1.06); }
.modes { display: flex; gap: 2px; margin: 0 auto; padding: 2px; border-radius: var(--r); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.modes button {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r); background: transparent; color: var(--muted);
  font: 600 15px/1 var(--font); letter-spacing: -0.01em; cursor: pointer; position: relative;
}
.modes button[aria-pressed="true"] { background: light-dark(var(--surface), color-mix(in srgb, var(--ink) 16%, var(--surface))); color: var(--ink); box-shadow: 0 1px 3px var(--shadow); }
/* a dot until today's window is lit, clear of the word */
.modes button.new { padding-right: 20px; }
.modes button.new::after { content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tools { display: flex; gap: 0; margin-right: -6px; }
@media (max-width: 560px) {
  #popout { display: none; }
  .bar { gap: 4px; }
  .brand { font-size: 20px; gap: 6px; }
  .modes button { padding: 0 11px; font-size: 14px; }
}
@media (max-width: 370px) { .brand span { display: none; } }
.ib {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--ink);
  cursor: pointer;
}
.ib:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ib:disabled { opacity: .3; cursor: default; background: transparent; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ----- the game: the title, one sentence, the board, the glass tray and the buttons */
.play {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "status" "say" "stage" "dock";
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 560px);
  min-height: 0;
  margin: 0 auto;
  row-gap: 4px;
}
.status { grid-area: status; display: flex; align-items: center; gap: 2px; min-height: 44px; }
.title { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step { width: 44px; height: 44px; }
.step .ico { width: 20px; height: 20px; }
.count { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.count b { color: var(--ink); font-weight: 700; }
.say { grid-area: say; min-height: 2.7em; display: grid; align-content: center; justify-items: center; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.3; text-wrap: balance; }
.say b { color: var(--accent-ink); }

.stage { grid-area: stage; position: relative; min-height: 0; display: grid; }
.board { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
.app.dragging .stage .board { z-index: 3; }
/* set glass can be lifted again: a hand over it, a closed one while it moves */
.board .glass.grab { cursor: grab; }
.board .leads, .board .marks, .board .frame { pointer-events: none; }
.app.dragging, .app.dragging * { cursor: grabbing !important; }
.grid { position: absolute; display: grid; pointer-events: none; }
.grid [role="row"] { display: contents; }
.grid [role="gridcell"] { outline: none; }

/* the board: lead, glass, shafts of light, the floor (colours come from app.js) */
.board .frame-back { fill: var(--lead); }
.board .frame { fill: none; stroke: var(--lead); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
/* the lead came: dark behind the glass and a thin line around each pane */
.came { fill: var(--lead); }
.board .lead, .pane .lead { fill: none; stroke: var(--lead); stroke-width: .9; stroke-linecap: round; }
.board.ready .glass { transition: fill .3s; }
.beams polygon { opacity: .45; }
.board.ready .floor .tile { transition: fill .35s; }
.floor-glow { opacity: 0; }
.inlay { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: .3; stroke-linejoin: round; }
.board.ready .inlay { transition: opacity .35s, fill .35s; }
.inlay.done { opacity: 0; }
/* the inlays' outlines over the floor: the first lesson points them out, a tile that comes right flashes */
.pings { pointer-events: none; }
.ping { fill: none; stroke: #FFF6DC; stroke-width: .5; stroke-linejoin: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.board.teach .ping:not(.ok) { animation: point 1.6s ease-in-out infinite; }
.ping.hit { animation: hit .9s ease-out .25s both; }
@keyframes point { 50% { opacity: .9; transform: scale(1.18); } }
@keyframes hit { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; stroke-width: .9; } 100% { opacity: 0; transform: scale(1.7); stroke-width: .2; } }
.ghost { fill: none; stroke: var(--accent-ink); stroke-width: .9; stroke-dasharray: 1.8 1.4; stroke-linecap: round; pointer-events: none; }
.cursor { fill: none; stroke: var(--focus); stroke-width: 1.3; pointer-events: none; }
.board .floor-base { fill: var(--stone); }
/* dark glass and dark tiles are as dark as the lead and the stone: a thin rim of the sun's light keeps them glass */
.board .glass.dim, .board .tile.dim { stroke: color-mix(in srgb, var(--sun) 35%, transparent); stroke-width: .45; }
.board .held { pointer-events: none; }
.board .held .glass { opacity: .9; }
/* the night (app.js sets .night): the floor glows and the shafts of light add up */
.beams { opacity: .6; }
.night .beams { opacity: 1; mix-blend-mode: screen; }
/* plain sunlight in the air does not show by day and only faintly at night; coloured light does */
:root:not(.night) .beams polygon[fill="url(#beam-7)"] { opacity: 0; }
.night .beams polygon[fill="url(#beam-7)"] { opacity: .2; }
.night .floor-glow { opacity: .4; }

/* the light scene (scene.js): a WebGL canvas behind the whole app, so the church's stone wall and floor are its
   background everywhere (the scene places the window where the board's SVG is). Once it has drawn (.gl) it paints the
   room, the glass, the air and the floor, and the SVG keeps the lead, the frame, the marks, the ghost, the cursor and
   the pane in hand. Without it the SVG is the whole board, on a dark stone colour. */
canvas.scene { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: -1; display: block; opacity: 0; transition: opacity .7s ease-out; pointer-events: none; }
/* over the scene, under the words: shade at the top and the foot of the screen, so the words always read */
.stage::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(6 7 6 / .62), rgb(6 7 6 / .18) calc(env(safe-area-inset-top) + 130px), transparent 30%, transparent 72%, rgb(6 7 6 / .5));
}
.stage .board { position: relative; }
.say { position: relative; z-index: 1; }
.stage.gl canvas.scene { opacity: 1; }
.board .beams, .board .floor, .board .frame-back { transition: opacity .7s ease-out; }
.board.ready .window > .glass { transition: fill .3s, fill-opacity .7s; }
.stage.gl .board .beams, .stage.gl .board .floor, .stage.gl .board .frame-back { opacity: 0; }
.stage.gl .board .window > .glass { fill-opacity: 0; stroke: none; }
.stage.gl .board .gl-only { display: inline; }
/* lead seen against the light: a nearly black core (the scene gives it its glowing edges), a dull warm edge on top */
.stage.gl .board .lead { stroke: #0B0C0B; stroke-width: .56; }
.stage.gl .board .frame { stroke: #0B0C0B; stroke-width: .85; }
.board .bars { fill: none; stroke: #121312; stroke-width: .6; stroke-linecap: butt; }
/* the lead's dull edge: a faint, thin copy of the line, up and left toward the light */
.board .bevel, .board .bevel path { fill: none; stroke: rgb(226 214 196 / .14); stroke-width: .17; stroke-linecap: round; }
.board .bevel path { transform: translate(-.12px, -.17px); }
.board path.bevel.f { transform: translate(-.22px, -.3px); stroke-width: .16; }
.board .solder { fill: #2A2724; }
/* the pane in hand: the same glass, held up in front of the light, see-through */
.stage.gl .board .held .glass { opacity: .72; }
/* where it would land: a mid green, seen on dark glass and on white */
.stage.gl .board .ghost { stroke: #12A874; stroke-width: 1; }
.stage.gl .board .held .came { fill: #0B0C0B; fill-opacity: .5; }
.stage.gl .board .held .lead { stroke: #0B0C0B; }

/* ----- the opening: the chapel in near darkness with only the name and Play, whatever the theme. Play lets the sun
   out behind the window (app.js: the glass, the shafts, the pools), then the page comes in. The name and Play take
   the places of the title and the dock, so nothing moves when they go. */
.intro { display: none; }
:root.starting .intro, :root.rising .intro { display: contents; }
:root.starting body { background: #050606; }
:root.starting :is(.bar, .status, .say, .dock, .end, .foot) { opacity: 0; }
.intro > * { position: relative; z-index: 4; color-scheme: dark; }
.intro-name {
  grid-row: status-start / say-end; grid-column: status; align-self: center; justify-self: center;
  display: inline-flex; align-items: center; gap: 12px;
  color: #EEF2EE; font-size: clamp(34px, 9vw, 44px); font-weight: 700; letter-spacing: -0.035em; line-height: 1;
}
.intro-name img { width: 1em; height: 1em; }
.btn.intro-play { grid-area: dock; align-self: center; justify-self: center; min-height: 60px; padding: 0 40px 0 32px; font-size: 20px; gap: 10px; }
.btn.intro-play .ico { width: 22px; height: 22px; fill: currentColor; stroke: none; }

/* colour marks: ○ □ △, the target's as outlines, the light's filled */
.pips .on, .pips .off { stroke-linejoin: round; }
.pane .pips *, .board .held .pips * { fill: rgb(255 255 255 / .92); stroke: rgb(0 0 0 / .55); }
.sockets .off:not(.lit) { display: none; }
.sockets .on { fill: none; stroke: rgb(0 0 0 / .7); }
.sockets .on.lit { fill: #fff; }
.sockets .off.lit { fill: rgb(0 0 0 / .78); stroke: #fff; }
.sockets.ok .on { stroke: rgb(0 0 0 / .45); }
/* on dark and deep blue glass the same marks, drawn light */
.sockets.dark .on { stroke: rgb(255 255 255 / .85); }
.sockets.dark .on.lit { fill: #fff; stroke: #fff; }

/* solved: the light runs over the floor, tile by tile */
.board.solved .tile, .board.solved .glass { animation: shine 1.1s ease-out var(--d) both; }
.board.solved .beams { animation: swell 1.6s ease-out both; }
:root:not(.night) .board.solved .tile, :root:not(.night) .board.solved .glass { animation-name: shine-day; }
@keyframes shine { 35% { filter: brightness(1.45) saturate(1.2); } }
@keyframes shine-day { 35% { filter: saturate(1.5) brightness(1.08); } }
@keyframes swell { 30% { opacity: 1; } }

/* ----- the dock: the glass not set yet, and undo, start over, hint */
/* never shorter than the end panel that takes its place (115 px), so the board keeps its size at the win */
.dock { grid-area: dock; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 115px; padding: 4px 0 8px; }
.dock[hidden] { display: grid !important; visibility: hidden; }
.tray {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px;
  min-height: calc(var(--cell) * 2 + 20px); margin: 0; padding: 0; list-style: none;
}
.tray button {
  display: grid; place-items: center; padding: 6px; border: 0; border-radius: var(--r-s); background: transparent;
  cursor: grab; touch-action: none; transition: transform .2s var(--pop), opacity .2s;
}
.tray button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); transform: translateY(-2px); }
.tray button:active { cursor: grabbing; }
/* one row: on a narrow screen the panes shrink a little rather than wrap and squeeze the board */
.tray { flex-wrap: nowrap; }
.tray li { flex: 0 1 auto; min-width: 0; }
.tray button { max-width: 100%; min-width: 44px; min-height: 44px; }
.tray .pane { width: calc(var(--w) * var(--cell) + 3px); height: auto; max-width: 100%; }
.tray li.out button { opacity: .13; filter: grayscale(1); pointer-events: none; }
.tray li.held button { opacity: .25; }
.pane { display: block; overflow: visible; filter: drop-shadow(0 1px 2px var(--shadow)); }
.acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.act {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--r); background: transparent; color: var(--ink);
  font: 600 14px/1 var(--font); cursor: pointer; touch-action: manipulation;
}
.act:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.act:disabled { opacity: .35; cursor: default; background: transparent; }
.act .ico { width: 18px; height: 18px; }
@media (max-width: 400px) {
  .acts { gap: 6px; }
  .act { padding: 0 10px; gap: 4px; }
  .tray { gap: 6px 4px; }
}
/* the smallest phones: the words alone, so the three buttons keep to one row */
@media (max-width: 340px) {
  .act .ico { display: none; }
  /* the title keeps its words: par waits for the end line */
  .count { font-size: 12.5px; }
  .count .par { display: none; }
  .title { font-size: 18px; }
  .say { font-size: 14px; }
}

/* ----- the end of a window: lit, stars, next or share */
.end { grid-area: dock; display: grid; gap: 4px; align-content: center; justify-items: center; padding: 0 0 6px; text-align: center; }
.end-head { display: flex; align-items: center; gap: 12px; line-height: 1.2; }
.end-head b { font-size: 26px; letter-spacing: -0.04em; }
.stars { display: inline-flex; gap: 4px; }
.stars svg { width: 24px; height: 24px; }
.stars .on { fill: var(--accent); stroke: var(--accent-ink); }
.stars .off { fill: none; stroke: color-mix(in srgb, var(--muted) 60%, transparent); }
.stars svg { stroke-width: 1.4; stroke-linejoin: round; }
.end-line { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.streak { color: var(--accent-ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.end .row { width: min(100%, 380px); }
/* the words keep to one line: the buttons share the row by their words, and on a phone they drop the arrow */
.end .row .btn { flex: 1 1 auto; min-width: 0; padding-inline: 16px; white-space: nowrap; }
@media (max-width: 420px) { .end .row .btn .ico { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 1.5px solid var(--ink); border-radius: var(--r);
  background: transparent; color: var(--ink);
  font: 700 16px/1 var(--font); letter-spacing: -0.01em; text-decoration: none;
  cursor: pointer; touch-action: manipulation;
  transition: transform .12s, background .2s;
}
.btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
.btn:active { transform: scale(.97); }
.btn .ico { width: 20px; height: 20px; }
.row { display: flex; gap: 10px; justify-content: center; }
.row .btn { flex: 1; }

.flash { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 5; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--r-s); background: var(--ink); color: var(--bg); font-weight: 600; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.flash.on { transform: translate(-50%, 0); opacity: 1; }

/* ----- the footer, under the game on the web; gone in the installed app and the pop-out window */
.foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 34px; padding-bottom: 4px; color: var(--muted); font-size: 14px; line-height: 1.3; }
.foot > * { margin: 0 4px; white-space: nowrap; }
.foot a { text-decoration: none; display: inline-block; padding-block: 3px; }
.foot a:hover { text-decoration: underline; }
/* on a short phone every pixel goes to the board; the menu has the same links */
@media (max-width: 560px) and (max-height: 760px) {
  .app .foot { display: none; }
  .app { grid-template-rows: auto minmax(0, 1fr) 0; }
}
.link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.link:hover { color: var(--accent-ink); }
:root.game-only .foot { display: none; }
:root.game-only .app { grid-template-rows: auto minmax(0, 1fr) 0; }

/* ----- sheets: the menu and the picture to share, native dialogs */
.sheet {
  width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px var(--shadow);
  transition: opacity .25s, translate .45s cubic-bezier(.2, .9, .3, 1), display .45s allow-discrete, overlay .45s allow-discrete;
}
.sheet:not([open]) { opacity: 0; translate: 0 18px; }
@starting-style { .sheet[open] { opacity: 0; translate: 0 18px; } }
.sheet::backdrop { background: rgb(8 12 10 / .45); backdrop-filter: blur(4px); transition: background .3s, backdrop-filter .3s, display .3s allow-discrete, overlay .3s allow-discrete; }
.sheet:not([open])::backdrop { background: transparent; backdrop-filter: none; }
@starting-style { .sheet[open]::backdrop { background: transparent; backdrop-filter: none; } }
@media (max-width: 560px) {
  .sheet { width: 100%; max-width: 100%; max-height: min(88dvh, calc(100dvh - 40px)); margin: auto 0 0; border-width: 1px 0 0; border-radius: var(--r-l) var(--r-l) 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .sheet form::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 10px; border-radius: 2px; background: var(--line); }
  .sheet:not([open]) { opacity: 1; translate: 0 100%; }
  @starting-style { .sheet[open] { opacity: 1; translate: 0 100%; } }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sheet h2 { font-size: 22px; letter-spacing: -0.025em; }
.how { margin: 0 0 10px; padding-left: 22px; }
.how li { margin: 6px 0; }
/* the keys for a keyboard, the taps for a touch screen */
.how li[data-t="howTap"] { display: none; }
@media (hover: none) and (pointer: coarse) {
  .how li[data-t="how4"] { display: none; }
  .how li[data-t="howTap"] { display: list-item; }
}
.how li::marker { color: var(--accent-ink); font-weight: 700; }
.how li.how-pic { display: block; margin: 2px 0 8px; color: var(--muted); }   /* (block: not counted in the numbers) */
.how-pic svg { width: 132px; height: 44px; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend svg { width: 36px; height: 36px; overflow: visible; }
fieldset { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); }
legend { float: left; width: 100%; margin-bottom: 4px; padding: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
fieldset label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
/* a mouse needs less room than a finger (still well over 24 px), so the menu fits a laptop screen */
@media (pointer: fine) {
  fieldset label { min-height: 34px; }
  .how li { margin: 4px 0; }
}
/* ○ □ △ from one symbol font, so the square is not a small fallback glyph */
.glyphs { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", system-ui, sans-serif; }
input[type="radio"], input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent-ink); }
.card { display: block; width: auto; max-width: 100%; height: auto; max-height: min(58dvh, 560px); margin: 6px auto 16px; border-radius: var(--r-s); box-shadow: 0 10px 30px -14px var(--shadow); }

/* ----- pop out: the page left behind */
.popped { display: grid; place-content: center; justify-items: center; gap: 16px; min-height: 100dvh; padding: 24px; text-align: center; }
.pip .app { height: 100vh; }

/* ----- plain pages: privacy, 404, questions */
.doc { width: min(100% - 32px, 700px); margin: 0 auto; padding: 28px 0 40px; line-height: 1.6; font-size: 17px; }
.doc-home { display: inline-flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 700; letter-spacing: -0.035em; text-decoration: none; }
.doc h1 { margin: 30px 0 8px; font-size: clamp(32px, 7vw, 46px); line-height: 1.05; letter-spacing: -0.035em; }
.doc h2 { margin: 30px 0 6px; font-size: 21px; letter-spacing: -0.015em; }
.doc .lede { font-size: 20px; font-weight: 600; }
.doc p, .doc li { margin: 6px 0; }
.doc .btn { margin-top: 18px; }

/* ----- the church: every word and button of the game belongs to the same stone, brass, lead and glass as the window.
   Names and headings are cut in Cinzel, words read in EB Garamond; buttons are stone tablets in a brass rim (8-sided,
   like a cut stone), the first among them a pane of emerald glass in lead; the round buttons are brass roundels; the
   tray is a stone sill; the menu is a page of an old book. The scene behind is dark stone by night, pale limestone by
   day, so the words are always light, with a shadow. */
body:has(> .app) { background: #0B0C0B; }
.app {
  --ink: #EFE6D2; --muted: #BDB29B; --line: rgb(201 168 104 / .38); --gold: #D9B45A; --gold-hi: #F3D99A;
  --accent: #1CB97C; --accent-ink: #5FE3AA; --focus: #F3D99A; --on-accent: #04130C; --shadow: rgba(0, 0, 0, .6);
  --stone-plaque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='a' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234b443b'/%3E%3Cstop offset='.55' stop-color='%23332e28'/%3E%3Cstop offset='1' stop-color='%23221f1b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7.5 1h33L47 7.5v33L40.5 47h-33L1 40.5v-33z' fill='url%28%23a%29' stroke='%23a3885a' stroke-width='1.6'/%3E%3Cpath d='M8.4 3.3h31.2l5.1 5.1' fill='none' stroke='%23fff3d6' stroke-opacity='.24'/%3E%3Cpath d='M44.7 39.6l-5.1 5.1H8.4' fill='none' stroke='%23000' stroke-opacity='.4'/%3E%3C/svg%3E");
  --glass-plaque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236ff2bd'/%3E%3Cstop offset='.45' stop-color='%231cb97c'/%3E%3Cstop offset='1' stop-color='%230a6544'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7.5 1h33L47 7.5v33L40.5 47h-33L1 40.5v-33z' fill='url%28%23a%29' stroke='%23120f0b' stroke-width='3'/%3E%3Cpath d='M9 5.2h30l3.8 3.8' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M4 31c12-5 26 4 40-7' fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='3'/%3E%3Cpath d='M8.9 4.2h30.2L43.8 8.9v30.2l-4.7 4.7H8.9l-4.7-4.7V8.9z' fill='none' stroke='%23d8b66a' stroke-opacity='.75' stroke-width='.8'/%3E%3C/svg%3E");
  color: var(--ink); font-size: 17px;
  text-shadow: 0 1px 2px rgb(0 0 0 / .7), 0 0 12px rgb(0 0 0 / .45);
}
.app :focus-visible { outline-color: var(--focus); }
/* the name over the door */
.brand { font: 600 23px/1 var(--display); letter-spacing: .06em; color: #F2E6C8; }
.brand img { filter: drop-shadow(0 0 6px rgb(255 230 150 / .35)); }
/* Today / Levels: two round-headed windows in the wall, the chosen one lit */
.modes { gap: 6px; padding: 0; background: none; }
.modes button {
  min-height: 42px; padding: 4px 14px 0; border: 1.5px solid #8F7648; border-bottom-width: 2.5px;
  border-radius: 50% 50% 3px 3px / 16px 16px 3px 3px;
  background: linear-gradient(#2a2622, #1a1815); color: #B9AD94;
  font: 600 14px/1 var(--display); letter-spacing: .08em; text-shadow: 0 1px 1px #000;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / .7);
}
.modes button[aria-pressed="true"] {
  background: radial-gradient(120% 90% at 50% 20%, #FFF3C8, #F2C35E 45%, #B9792A 100%); color: #2A1C08; border-color: #6E5428;
  text-shadow: 0 1px 0 rgb(255 245 210 / .6); box-shadow: 0 0 14px rgb(255 200 90 / .45), inset 0 -3px 6px rgb(120 70 10 / .45);
}
.modes button.new::after { top: 9px; right: 7px; background: #5FE3AA; box-shadow: 0 0 6px #5FE3AA; }
/* round brass roundels with engraved marks */
.ib {
  width: 44px; height: 44px; border-radius: 50%; color: #F1DCA6;
  background: radial-gradient(circle at 34% 28%, #6A5638, #34291B 62%, #1E1810);
  border: 1.5px solid #A3885A; box-shadow: inset 0 1px 0 rgb(255 240 200 / .28), inset 0 -2px 4px rgb(0 0 0 / .5), 0 2px 5px rgb(0 0 0 / .55);
}
.ib:hover { background: radial-gradient(circle at 34% 28%, #82693F, #3E3120 62%, #221B12); }
.tools { gap: 6px; }
.ico { stroke-width: 1.8; }
/* the window's name, cut in the stone, and the count on a small brass plate */
.title { font: 600 21px/1.15 var(--display); letter-spacing: .04em; color: #F4E9CE; }
.count { padding: 4px 10px; border: 1px solid rgb(201 168 104 / .55); border-radius: 3px; background: rgb(20 16 11 / .55); color: #E6D5AE; font: italic 500 15px/1 var(--font); }
.step { color: #E6D5AE; background: none; border: 0; box-shadow: none; }
.step:hover { background: rgb(255 240 200 / .08); }
.say { color: #E9DFC8; font-size: 18px; line-height: 1.28; }
.say b { color: var(--accent-ink); font-weight: 600; }
/* stone tablets in a brass rim; the first one a pane of emerald glass in lead */
.act, .btn {
  border: 1px solid transparent; border-image: var(--stone-plaque) 12 fill / 12px / 0 stretch; border-radius: 0;
  background: none; color: #F1E4C4; font-family: var(--display); font-weight: 600; letter-spacing: .05em;
  text-shadow: 0 1px 1px #000; box-shadow: none;
}
.act { min-height: 46px; padding: 0 16px; font-size: 13px; }
.act .ico, .btn .ico { color: var(--gold-hi); }
.act:hover, .btn:hover { background: none; filter: brightness(1.18); }
.act:disabled { opacity: .45; filter: grayscale(.4); }
.btn { min-height: 50px; padding: 0 22px; font-size: 15px; }
.btn.primary { border-image-source: var(--glass-plaque); background: none; color: #F6FFF9; text-shadow: 0 1px 2px rgb(0 40 20 / .9), 0 0 8px rgb(0 60 30 / .6); }
.btn.primary .ico { color: #F6FFF9; }
.btn.primary:hover { background: none; filter: brightness(1.12) saturate(1.1); }
/* the tray: a stone sill the panes rest on, as long as they need */
.tray {
  justify-self: center; width: max-content; max-width: 100%;
  padding: 8px 16px 10px; border-radius: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url%28%23n%29'/%3E%3C/svg%3E"), linear-gradient(#5E564B, #3E3831 9px, #2E2A25 calc(100% - 7px), #191714);
  box-shadow: inset 0 1px 0 rgb(255 240 210 / .28), inset 0 -2px 0 rgb(0 0 0 / .5), 0 8px 16px -6px rgb(0 0 0 / .8);
}
.tray button:hover { background: rgb(255 240 200 / .07); }
.pane { filter: drop-shadow(0 2px 2px rgb(0 0 0 / .7)); }
/* the end: the name of the result in gold leaf, the stars as glass diamonds */
.end-head b {
  font: 700 30px/1.1 var(--display); letter-spacing: .03em;
  background: linear-gradient(#FFF1C2, #E6B958 55%, #A9741F); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .8)) drop-shadow(0 0 10px rgb(255 200 90 / .3));
}
.stars .on { fill: #3DDC97; stroke: #0B3A24; }
.stars .off { stroke: rgb(220 200 160 / .55); }
.end-line { color: #DCCFB2; font-style: italic; font-size: 17px; }
.streak { color: #F3D99A; font: 600 14px/1 var(--display); letter-spacing: .04em; }
.flash { border: 1px solid transparent; border-image: var(--stone-plaque) 12 fill / 12px / 0 stretch; border-radius: 0; background: none; color: #F1E4C4; font-family: var(--display); letter-spacing: .04em; }
.foot { color: #A99E87; font-style: italic; font-size: 15px; }
/* the opening: the name cut in gold over the dark */
.intro-name { font: 700 clamp(36px, 10vw, 54px)/1 var(--display); letter-spacing: .08em; color: transparent; background: linear-gradient(#FFF1C2, #E2B24E 60%, #9C6A1C); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .9)) drop-shadow(0 0 18px rgb(255 200 90 / .35)); }
.intro-name img { filter: drop-shadow(0 0 10px rgb(255 230 150 / .4)); }
/* a tablet or a pane has a cut outline: its focus is a gold glow round that shape, not a box */
:is(.act, .btn):focus-visible { outline: none; filter: drop-shadow(0 0 2px #FFE7A8) drop-shadow(0 0 7px rgb(243 217 154 / .85)); }
.btn.intro-play:focus-visible { outline: none; }
.btn.intro-play { min-height: 62px; padding: 0 40px 0 32px; font-size: 21px; letter-spacing: .12em; }
/* the menu and the picture: a page of an old book */
.sheet {
  --ink: #2B2118; --muted: #6B5A43; --line: rgb(110 84 46 / .35); --accent-ink: #0B6E47; --focus: #8A5A12;
  color: var(--ink); text-shadow: none; color-scheme: light;   /* (native radios and boxes light on the page) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url%28%23n%29'/%3E%3C/svg%3E"), radial-gradient(130% 90% at 50% 0%, #FBF3DF, #EADCB9 68%, #D9C394);
  border: 2px solid #8A6D3B; box-shadow: inset 0 0 0 4px #F7EED8, inset 0 0 0 5px rgb(138 109 59 / .6), inset 0 0 50px rgb(130 90 30 / .22), 0 24px 60px rgb(0 0 0 / .6);
}
.sheet h2 { font: 600 24px/1.1 var(--display); letter-spacing: .04em; }
.sheet .ib { color: #3A2A14; background: none; border: 0; box-shadow: none; }
.sheet .ib:hover { background: rgb(110 84 46 / .12); }
.sheet legend { font-family: var(--display); letter-spacing: .05em; }
.how li::marker { font-family: var(--display); color: #8A5A12; }
.sheet .btn { color: #F1E4C4; }
.sheet::backdrop { background: rgb(4 4 3 / .55); }
@media (max-width: 560px) { .sheet form::before { background: rgb(110 84 46 / .4); } }
@media (max-width: 400px) { .act { font-size: 12px; padding: 0 11px; letter-spacing: .03em; } }
@media (max-width: 560px) {
  .brand span { display: none; }
  .modes button { padding: 4px 11px 0; font-size: 13px; letter-spacing: .06em; }
  .modes button.new { padding-right: 17px; }
  .ib { width: 42px; height: 42px; }
}

/* ----- wide screens, and phones held sideways: the board on the left, the rest beside it */
@media (min-aspect-ratio: 6/5) and (min-width: 640px) {
  .play {
    width: min(100%, 1320px);
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "stage ." "stage status" "stage say" "stage dock" "stage .";
    column-gap: clamp(20px, 4vw, 56px);
    padding-bottom: 12px;
  }
  .bar { width: min(100%, 1320px); }
  .title { font-size: clamp(20px, 1.7vw, 28px); }
  .say { justify-items: start; text-align: left; font-size: clamp(18px, 1.35vw, 22px); }
  .tray { justify-self: start; }
  .count { font-size: clamp(14px, 1vw, 16px); }
  .tray { justify-content: flex-start; flex-wrap: wrap; }
  .acts { justify-content: flex-start; }
  .end { justify-items: start; text-align: left; }
  .end .row { justify-content: flex-start; }
  .intro-name, .intro-play { justify-self: start; }
  :root { --cell: clamp(16px, 2.2vw, 34px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .app .foot { display: none; }
  .app, :root.game-only .app {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    grid-template-areas: "stage bar" "stage status" "stage say" "stage dock" "stage .";
    column-gap: 24px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .play { display: contents; }
  .bar { grid-area: bar; width: 100%; height: calc(48px + env(safe-area-inset-top)); }
  .brand span { display: none; }
  .card-sheet { width: min(560px, calc(100vw - 24px)); }
  /* the picture takes the whole height, the title and the buttons stand beside it */
  .card-sheet form { display: grid; grid-template-columns: auto minmax(180px, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "img head" "img row"; column-gap: 20px; }
  .card-sheet form::before { display: none; }
  .card-sheet .sheet-head { grid-area: head; }
  .card { grid-area: img; max-height: calc(100dvh - 66px); margin: 0; }
  .card-sheet .row { grid-area: row; flex-direction: column; align-self: center; }
  :root { --cell: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .board.teach .ping:not(.ok) { opacity: .8; }
}