/* The TELL room: a panel from the Fialta dinner seen through the cafe's wet
   window, the line she is answering under it, the game's paper and pencil,
   and the case book at the right that opens TELL itself.

   Everything here is scoped under html[data-room='tell']. js/rooms/tell.js
   writes html[data-lay] (wide: the dark glass either side of the panel holds
   the slip and the book; narrow: the panel covers the window and they lie on
   it) and --pl / --pw / --pr, the panel's left, width and right in px.

   Motion. Calm (the system asked for less) keeps what a locked camera would
   see: the candle's light breathing slowly, a car's lamps passing across the
   wet glass now and then, and drops running down it (fewer and slower; the
   canvas in the module). Only a reader who lets everything move gets the
   candle's flicker and the full run of drops.
   Still stops it all (room.css pauses every animation). The ring grows out of
   the mark only when everything may move; otherwise it is simply there. */

@font-face {
  font-family: 'Caveat';
  src: url(/art/rooms/tell/caveat-v1.woff2) format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html[data-room='tell'] {
  --tl-paper: #ede6d6;
  --tl-ink: #22242b;
  --tl-pencil: #3a3f45;
  --tl-lead: rgb(176 184 190 / 0.9);
  --tl-gold: #a3843f;
  --tl-stamp: #d4b673;
  --tl-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --tl-type: 'Courier Prime', 'Courier New', Courier, monospace;
  --tl-say: Georgia, 'Times New Roman', serif;
  --tl-foot: max(4.5cqh, 24px);
}

/* ------------------------------------------------------------ the place */

html[data-room='tell'] .tl-place {
  position: absolute;
  inset: 0;
  overflow: clip;
  isolation: isolate;
  /* the backdrop the glass is laid on in screen: without it the glass's
     black would be the room's */
  background: var(--ground);
}
/* The window's top corners, where the y and the bell hang, are in shadow:
   the brightest of the rain plate is up there, and the way back to the
   street must not be lost in it. */
html[data-room='tell'] .tl-place::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(230px 190px at 0 0, rgb(3 9 11 / 0.92), rgb(3 9 11 / 0.72) 38%, transparent),
    radial-gradient(230px 150px at 100% 0, rgb(3 9 11 / 0.85), rgb(3 9 11 / 0.55) 40%, transparent);
}
/* and the y itself carries a little of the dark with it */
html[data-room='tell'] .brush .mark {
  filter: drop-shadow(0 0 5px rgb(2 7 9 / 0.95)) drop-shadow(0 0 12px rgb(2 7 9 / 0.8)) drop-shadow(0 1px 2px rgb(0 0 0 / 0.6));
}

/* The cafe out of focus behind the glass on a wide window: the panel's own
   painting, blurred and taken down into the dark, so the sides of the window
   are more of the same room rather than two black strips. */
html[data-room='tell'] .tl-back {
  position: absolute;
  inset: -6%;
  z-index: 0;
  display: none;
  pointer-events: none;
  background: 50% 42% / cover no-repeat;
  filter: blur(22px) brightness(0.55) saturate(0.8);
}
html[data-room='tell'][data-lay='wide'] .tl-back { display: block; }

/* ------------------------------------------------------------ the panel */

html[data-room='tell'] .tl-plate {
  position: absolute;
  z-index: 1;
  overflow: clip;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* the reader's pencil: the circle it will leave, and nothing that aims */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='10.5' fill='none' stroke='%230c1215' stroke-opacity='.55' stroke-width='3.6'/%3E%3Ccircle cx='15' cy='15' r='10.5' fill='none' stroke='%23b6bec4' stroke-width='1.5'/%3E%3C/svg%3E") 15 15, default;
}
html[data-room='tell'] .tl-plate img {
  position: absolute;
  display: block;
  max-width: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
html[data-room='tell'] .tl-paint { inset: 0; width: 100%; height: 100%; }
/* where the glass is wide enough to show both sides of the panel, its edges
   go soft, so the cafe is behind the window rather than pinned to it */
html[data-room='tell'][data-lay='wide'] .tl-plate {
  -webkit-mask: linear-gradient(to right, transparent, #000 4.5%, #000 95.5%, transparent);
  mask: linear-gradient(to right, transparent, #000 4.5%, #000 95.5%, transparent);
}
/* the painting's edges go into the dark of the room */
html[data-room='tell'] .tl-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  box-shadow: inset 0 0 70px 26px color-mix(in oklch, var(--ground) 82%, transparent);
}
html[data-room='tell'][data-lay='narrow'] .tl-plate::after {
  box-shadow: inset 0 -120px 90px -40px color-mix(in oklch, var(--ground) 88%, transparent);
}

/* the candle on the table: its light breathes, slowly, in every mode but still */
html[data-room='tell'] .tl-candle {
  position: absolute;
  z-index: 1;
  width: 24%;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(255 196 122 / 0.3), rgb(255 168 92 / 0.1) 46%, transparent);
  animation: tl-breathe 6.8s ease-in-out infinite alternate;
}
@keyframes tl-breathe { from { opacity: 0.5; } to { opacity: 1; } }
/* and where everything may move, the flame itself */
html[data-room='tell'][data-motion='full'] .tl-candle::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 214 150 / 0.34), transparent);
  animation: tl-flicker 2.9s linear infinite;
}
@keyframes tl-flicker {
  0% { opacity: 0.55; } 9% { opacity: 0.95; } 14% { opacity: 0.4; } 23% { opacity: 0.85; }
  37% { opacity: 0.6; } 44% { opacity: 1; } 58% { opacity: 0.5; } 66% { opacity: 0.9; }
  79% { opacity: 0.45; } 88% { opacity: 0.8; } 100% { opacity: 0.55; }
}

/* the found region: its own pre-lit crop over the painting, and the rest of
   the painting stepping back around it */
html[data-room='tell'] .tl-lit {
  z-index: 2;
  opacity: 0;
  transition: opacity 520ms ease;
  /* the crop is cut square; its light is not, so it goes soft toward the cut */
  -webkit-mask: radial-gradient(farthest-side, #000 58%, transparent 100%);
  mask: radial-gradient(farthest-side, #000 58%, transparent 100%);
}
html[data-room='tell'] .tl-shade {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 min(5cqw, 60px) 200vmax rgb(2 7 9 / 0.46);
  transition: opacity 900ms ease;
}
html[data-room='tell'] .is-found .tl-lit,
html[data-room='tell'] .is-found .tl-shade { opacity: 1; }

/* ------------------------------------------------------------- the marks */

html[data-room='tell'] .tl-marks {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
/* Graphite on a dark painting is a silver line: the same circle for a miss
   and a hit, with no colour that means anything. */
html[data-room='tell'] .tl-mark {
  --m: 56px;
  position: absolute;
  width: var(--m);
  height: var(--m);
  margin: calc(var(--m) / -2) 0 0 calc(var(--m) / -2);
  border: 2px solid var(--tl-lead);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgb(8 12 14 / 0.45), inset 0 0 0 1px rgb(8 12 14 / 0.35);
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
html[data-room='tell'] .tl-mark.in { opacity: 0.88; transform: none; }
html[data-room='tell'] .tl-mark.out { opacity: 0; transition: opacity 250ms ease-in; }
html[data-room='tell'] .tl-mark.is-hit {
  --travel: 200ms;
  transition:
    opacity 120ms ease-out, transform 120ms ease-out,
    left var(--travel) cubic-bezier(0.22, 0.61, 0.36, 1),
    top var(--travel) cubic-bezier(0.22, 0.61, 0.36, 1),
    width var(--travel) cubic-bezier(0.22, 0.61, 0.36, 1),
    height var(--travel) cubic-bezier(0.22, 0.61, 0.36, 1),
    margin var(--travel) cubic-bezier(0.22, 0.61, 0.36, 1);
}
html[data-room='tell'] .tl-mark.landed { opacity: 0.95; border-width: 2.5px; }
/* with less motion the circle is put down, not drawn: it fades in and out
   and never scales; still, it simply appears and goes */
html[data-room='tell'][data-motion='calm'] .tl-mark { transform: none; }
html[data-room='tell'][data-motion='still'] .tl-mark { transform: none; transition: none; }

/* ---------------------------------------------------------- the wet glass */

html[data-room='tell'] .tl-glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  background: var(--rain) 50% 50% / cover no-repeat;
  opacity: 0.9;
}
html[data-room='tell'][data-lay='narrow'] .tl-glass { background-size: 100% 100%; opacity: 0.75; }
/* now and then a car's lamps pass outside, and the water on the glass
   catches them */
html[data-room='tell'] .tl-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: brightness(2.6);
  opacity: 0.7;
  -webkit-mask: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%) 100% 0 / 300% 100% no-repeat;
  mask: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%) 100% 0 / 300% 100% no-repeat;
  animation: tl-pass 13s linear 2s infinite;
}
@keyframes tl-pass {
  0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  46%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
html[data-room='tell'] .tl-drops {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ------------------------------------------------------ what is said */

html[data-room='tell'] .tl-words {
  position: absolute;
  z-index: 8;
  bottom: var(--tl-foot);
  left: calc(var(--pl) + var(--pw) / 2);
  translate: -50% 0;
  width: min(calc(var(--pw) - 64px), 30em);
  margin: 0;
  text-align: center;
  pointer-events: none;
}
/* a little dark behind the words, the way a subtitle sits on a film */
html[data-room='tell'] .tl-words::before {
  content: '';
  position: absolute;
  inset: -45% -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(3 8 10 / 0.62), rgb(3 8 10 / 0.3) 60%, transparent);
}
html[data-room='tell'] .tl-heard {
  font-family: var(--tl-say);
  font-size: clamp(1rem, min(0.86rem + 0.95cqw, 0.3rem + 3.1cqh), 1.55rem);
  line-height: 1.38;
  color: var(--cream);
  text-wrap: balance;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 16px rgb(0 0 0 / 0.65);
  opacity: 0.9;
  transition: opacity 240ms ease, text-shadow 600ms ease;
}
html[data-room='tell'] .tl-heard.is-narration { font-style: italic; }
/* while a line is being said it is a shade brighter */
html[data-room='tell'] .tl-heard.is-spoken {
  opacity: 1;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 16px rgb(0 0 0 / 0.65), 0 0 24px color-mix(in oklch, var(--flame) 18%, transparent);
}
html[data-room='tell'] .tl-heard.is-going { opacity: 0; }
html[data-room='tell'] .tl-ask {
  margin-top: 0.75em;
  text-wrap: balance;
  font-family: var(--tl-type);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: color-mix(in oklch, var(--cream) 78%, transparent);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9);
  opacity: 0;
  transition: opacity 900ms ease;
}
html[data-room='tell'] .is-asking .tl-ask { opacity: 1; }
html[data-room='tell'] .is-found .tl-ask { opacity: 0; transition-duration: 300ms; }

/* ------------------------------------------------- the pencilled note */

html[data-room='tell'] .tl-show {
  position: absolute;
  z-index: 9;
  right: calc(100cqw - var(--pl) + 18px);
  bottom: calc(var(--tl-foot) + 0.4rem);
  appearance: none;
  margin: 0;
  padding: 4px 6px 2px;
  border: 0;
  background: none;
  color: #d7d0c0;
  font: 500 1.75rem/1 var(--tl-hand);
  text-align: right;
  cursor: pointer;
  rotate: -4deg;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.7);
  opacity: 0;
  transition: opacity 900ms ease, color 200ms ease;
}
html[data-room='tell'] .tl-show.is-in { opacity: 0.86; }
html[data-room='tell'][data-motion='still'] .tl-show,
html[data-room='tell'][data-motion='still'] .tl-ask,
html[data-room='tell'][data-motion='still'] .tl-heard,
html[data-room='tell'][data-motion='still'] .tl-lit,
html[data-room='tell'][data-motion='still'] .tl-shade { transition: none; }
html[data-room='tell'] .tl-show:hover,
html[data-room='tell'] .tl-show:focus-visible { opacity: 1; color: #f1ead9; }
html[data-room='tell'] .tl-show__word { display: block; padding-right: 36px; }
html[data-room='tell'] .tl-show__line {
  display: block;
  width: 150px;
  height: 26px;
  margin: -2px 0 0 auto;
  overflow: visible;
}
html[data-room='tell'] .tl-show__line path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
/* drawn as a hand draws it, where everything may move */
html[data-room='tell'][data-motion='full'] .tl-show.is-in .tl-show__stroke {
  stroke-dasharray: 160;
  animation: tl-draw 900ms ease-out both;
}
@keyframes tl-draw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------- the six places, by keyboard */

/* Out of sight until the keyboard reaches them, and then a page torn off a
   reporter's pad beside the painting, as in the game. */
html[data-room='tell'] .tl-places {
  position: absolute;
  z-index: 11;
  right: calc(100cqw - var(--pl) + 18px);
  top: 26cqh;
}
html[data-room='tell'] .tl-places:not(:focus-within) {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-room='tell'] .tl-pad {
  min-width: 13em;
  padding: 0.9em 0.5em 0.6em 1.1em;
  background-color: #f2ede1;
  background-image: linear-gradient(to right, transparent 0.6em, rgb(142 47 42 / 0.55) 0.6em, rgb(142 47 42 / 0.55) calc(0.6em + 1px), transparent calc(0.6em + 1px));
  clip-path: polygon(0 4%, 6% 0, 32% 3%, 61% 0, 100% 3%, 100% 100%, 0 100%);
  box-shadow: 3px 5px 12px rgb(0 0 0 / 0.45);
  rotate: -1deg;
}
html[data-room='tell'] .tl-place-row {
  display: block;
  width: 100%;
  min-height: 2.2em;
  margin: 0;
  padding: 0.3em 0.5em;
  border: 0;
  border-bottom: 1px solid rgb(43 58 85 / 0.28);
  border-radius: 0;
  background: none;
  color: var(--tl-pencil);
  font: 500 1.28rem/1.2 var(--tl-type);
  text-align: left;
  cursor: pointer;
}
html[data-room='tell'] .tl-place-row:last-child { border-bottom: 0; }
/* the pencil only once the page is out, so a reader who never tabs here never
   fetches the hand */
html[data-room='tell'] .tl-places:focus-within .tl-place-row { font-family: var(--tl-hand); }
html[data-room='tell'] .tl-place-row:focus-visible {
  outline: 2px solid var(--tl-pencil);
  outline-offset: -2px;
  color: var(--tl-ink);
}

/* ------------------------------------------------------------ the slip */

/* The game's own note slip, nine-sliced so its torn top and its paper
   margins keep their size however much is typed on it: the tear stays the
   tear, and the words always sit on paper. Its type follows the height of
   the room, so a short window still holds the whole slip. */
html[data-room='tell'] .tl-slip {
  --slip-w: clamp(264px, calc(var(--pl) + 22px), 372px);
  position: absolute;
  z-index: 10;
  left: max(14px, calc(var(--pl) - var(--slip-w) + 44px));
  bottom: max(4cqh, 18px);
  width: var(--slip-w);
  margin: 0;
  font-size: clamp(12px, 2.1cqh, 16px);
  padding: 0.95em 0.7em 0.4em 0.8em;
  border-style: solid;
  border-width: 46px 20px 30px 20px;
  border-image: var(--paper) 80 36 56 36 fill / 46px 20px 30px 20px stretch;
  color: var(--tl-ink);
  filter: drop-shadow(4px 8px 12px rgb(0 0 0 / 0.5));
  rotate: -1.6deg;
  translate: 0 calc(100% + 70px);
  transition: translate 620ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
html[data-room='tell'] .tl-slip.is-up { translate: 0 0; }
html[data-room='tell'] .tl-slip:focus { outline: none; }
html[data-room='tell'] .tl-slip:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
/* less motion: it is laid down rather than slid in */
html[data-room='tell'][data-motion='calm'] .tl-slip {
  translate: 0 0;
  opacity: 0;
  transition: opacity 250ms ease;
}
html[data-room='tell'][data-motion='calm'] .tl-slip.is-up { opacity: 1; }
html[data-room='tell'][data-motion='still'] .tl-slip { transition: none; }

html[data-room='tell'] .tl-slip__name {
  margin: 0 0 0.3em;
  font: 500 1.55em/1.05 var(--tl-hand);
  color: var(--tl-pencil);
}
html[data-room='tell'] .tl-slip__note {
  font-family: var(--tl-type);
  font-size: 0.86em;
  line-height: 1.46;
}
html[data-room='tell'] .tl-slip__score { margin: 0.75em 0 0.55em; line-height: 0; }
html[data-room='tell'] .tl-ticks { display: inline-flex; gap: 0.2em; }
html[data-room='tell'] .tl-tick {
  width: 1.06em;
  height: 1.06em;
  fill: none;
  stroke: rgb(34 36 43 / 0.2);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-room='tell'] .tl-tick.is-on { stroke: var(--tl-gold); }
html[data-room='tell'] .tl-slip__wrong {
  font-family: var(--tl-type);
  font-size: 0.68em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(34 36 43 / 0.72);
}
html[data-room='tell'] .tl-slip__caveat {
  margin-top: 0.3em;
  font-family: var(--tl-type);
  font-size: 0.8em;
  line-height: 1.42;
}

/* ------------------------------------------------------------ the glass */

html[data-room='tell'] .tl-lens {
  --s: 168px;
  position: absolute;
  z-index: 30;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
  filter: drop-shadow(3px 5px 10px rgb(8 12 16 / 0.55));
}
html[data-room='tell'] .tl-lens.in { opacity: 1; transform: none; }
html[data-room='tell']:not([data-motion='full']) .tl-lens { transform: none; }
html[data-room='tell'][data-motion='still'] .tl-lens { transition: none; }
html[data-room='tell'] .tl-lens__view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #0b1116;
}
html[data-room='tell'] .tl-lens__img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  -webkit-user-drag: none;
}
/* Sam's reading glass: a ground lens in a turned paper-board rim */
html[data-room='tell'] .tl-lens__rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 7px solid var(--tl-paper);
  box-shadow:
    inset 0 0 0 1px rgb(40 32 22 / 0.55),
    inset 0 0 22px 6px rgb(12 18 24 / 0.34),
    inset 2px 3px 10px rgb(255 250 232 / 0.16),
    0 0 0 1px rgb(40 32 22 / 0.4);
  background: linear-gradient(150deg, rgb(255 250 232 / 0.5), rgb(255 250 232 / 0) 38%) border-box;
}

/* ---------------------------------------------------------- the case book */

/* The door out is TELL's own case book, lying at the right of the room. It
   lifts when a hand or the keyboard comes to it, says what it does, and goes
   straight into the game. Where it lies is kept on the root, because the line
   typed under it goes by the same measures. Its foot is never lower than
   72 px, so its words and that line both fit under it on a short window, and
   on a phone turned on its side it lies higher again by the home bar's strip,
   so a tap on that line is never taken for a reach for the bar. */
html[data-room='tell'] {
  --tl-bw: clamp(62px, min(8.2vw, 14vh), 128px);
  --tl-book-r: calc(var(--edge-w) + clamp(24px, 3.4vw, 60px));
  --tl-book-b: calc(clamp(72px, 9vh, 104px) + env(safe-area-inset-bottom));
}
html[data-room='tell'] .door-out {
  --bw: var(--tl-bw);
  right: var(--tl-book-r);
  bottom: var(--tl-book-b);
  width: var(--bw);
  aspect-ratio: 300 / 491;
  border-radius: 0;
  background: url(/art/rooms/tell/book-v1.webp) 50% 50% / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(3px 9px 10px rgb(0 0 0 / 0.6));
  rotate: -4deg;
  transition: translate 380ms cubic-bezier(0.3, 0.7, 0.3, 1), rotate 380ms cubic-bezier(0.3, 0.7, 0.3, 1), filter 380ms ease;
}
/* its name stamped in gold on the cloth */
html[data-room='tell'] .door-out::before {
  content: 'TELL';
  content: 'TELL' / '';
  position: absolute;
  left: 11%;
  right: 5%;
  top: 17%;
  text-align: center;
  font-family: var(--tl-type);
  font-size: calc(var(--bw) * 0.135);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--tl-stamp);
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.55), 0 -1px 0 rgb(255 240 200 / 0.12);
  opacity: 0.9;
}
html[data-room='tell'] a.door-out:hover,
html[data-room='tell'] a.door-out:focus-visible {
  translate: 0 -12px;
  rotate: -1.5deg;
  box-shadow: none;
  filter: drop-shadow(6px 20px 18px rgb(0 0 0 / 0.62)) brightness(1.07);
}
html[data-room='tell'][data-motion='still'] .door-out { transition: none; }
html[data-room='tell'] .door-out__label {
  top: calc(100% + 14px);
  right: 50%;
  translate: 50% 0;
  font-family: var(--tl-type);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
/* Where a hand rests on a mouse the shared frame keeps a door's words down
   until it is pointed at. Here they stay up, a shade dim, so the words under
   the book are never only the line about TELL, which a reader would take for
   the book's own. */
@media (hover: hover) and (pointer: fine) {
  html[data-room='tell'] .door-out__label { opacity: 0.85; }
}
/* shut: the same book, in the dark, and not to be lifted */
html[data-room='tell'] .door-out[data-shut] {
  background: url(/art/rooms/tell/book-v1.webp) 50% 50% / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(3px 9px 10px rgb(0 0 0 / 0.6)) brightness(0.5) saturate(0.6);
}

/* ------------------------------------------------ the pages about TELL */

/* The site's own pages about the game go by one line typed small under the
   book, below the book's own words. It is dimmer than those words
   and underlined in pencil, so the book stays the way in. It sits on the
   book's middle, and above the warm edge beside it, so the edge's reach
   never takes a tap meant for it. Shut, it goes with the book (css/room.css). */
html[data-room='tell'] .more-out {
  z-index: 16;
  right: calc(var(--tl-book-r) + var(--tl-bw) / 2);
  bottom: calc(var(--tl-book-b) - 66px);
  translate: 50% 0;
  min-height: 26px;
  padding: 0 4px;
  white-space: nowrap;
  font-family: var(--tl-type);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: color-mix(in oklch, var(--cream) 68%, transparent);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 10px rgb(2 7 9 / 0.8);
}
html[data-room='tell'] .more-out__label {
  text-decoration-color: color-mix(in srgb, var(--tl-lead) 45%, transparent);
  text-underline-offset: 0.3em;
}
html[data-room='tell'] a.more-out:hover,
html[data-room='tell'] a.more-out:focus-visible { color: var(--cream); }
html[data-room='tell'] a.more-out:hover .more-out__label,
html[data-room='tell'] a.more-out:focus-visible .more-out__label { text-decoration-color: var(--tl-lead); }
html[data-room='tell'][data-motion='still'] .more-out,
html[data-room='tell'][data-motion='still'] .more-out__label { transition: none; }

/* ------------------------------------------------ the narrow window */

/* The panel covers the window. The words sit on the painted floor above the
   book, the note in the margin becomes a note beside the book, and the slip
   comes up over the foot of the painting while the narrator's words go up to
   its head. The book lies 22 px up from the foot so the line about TELL fits
   under it, in the book's own column, clear of the slip; the words above it
   and the note beside it sit the same 22 px higher. */
html[data-room='tell'][data-lay='narrow'] {
  --tl-foot: calc(max(12px, env(safe-area-inset-bottom)) + 172px);
  --tl-bw: 60px;
  --tl-book-r: calc(var(--edge-w) + 12px);
  --tl-book-b: calc(max(12px, env(safe-area-inset-bottom)) + 30px);
}
html[data-room='tell'][data-lay='narrow'] .tl-words {
  left: 50%;
  width: min(calc(100cqw - 44px), 28em);
}
html[data-room='tell'][data-lay='narrow'] .tl-place[data-slip='bottom'] .tl-words.is-after {
  bottom: auto;
  top: calc(var(--inset-t) + 74px);
}
html[data-room='tell'][data-lay='narrow'] .tl-show {
  right: calc(var(--edge-w) + 86px);
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px);
  font-size: 1.6rem;
}
html[data-room='tell'][data-lay='narrow'] .tl-show__head { display: none; }
html[data-room='tell'][data-lay='narrow'] .tl-show__word { padding-right: 10px; }
html[data-room='tell'][data-lay='narrow'] .tl-show__line { width: 120px; }
html[data-room='tell'][data-lay='narrow'] .tl-places {
  right: auto;
  left: 14px;
  top: calc(var(--inset-t) + 76px);
}
html[data-room='tell'][data-lay='narrow'] .tl-slip {
  --slip-w: auto;
  left: 10px;
  right: calc(var(--edge-w) + 80px);
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 4px);
  width: auto;
  max-width: 26rem;
  font-size: 13.5px;
  rotate: -1deg;
}
/* a cue low in the painting keeps its ground: the slip comes down from the
   head of the window instead, and the narrator stays at its foot */
html[data-room='tell'][data-lay='narrow'] .tl-place[data-slip='top'] .tl-slip {
  top: calc(var(--inset-t) + 64px);
  bottom: auto;
  right: calc(var(--edge-w) + 10px);
  translate: 0 calc(-100% - 90px);
}
html[data-room='tell'][data-lay='narrow'] .tl-place[data-slip='top'] .tl-slip.is-up { translate: 0 0; }
html[data-room='tell'][data-lay='narrow'][data-motion='calm'] .tl-place[data-slip='top'] .tl-slip { translate: 0 0; }
/* the slip's ring is drawn a little inside its box, still clear of the
   paper, so it never runs through the line about TELL beside it */
html[data-room='tell'][data-lay='narrow'] .tl-slip:focus-visible { outline-offset: -2px; }
/* the line about TELL under the book, a touch smaller and set close, so it
   stays inside the book's column between the slip and the warm edge */
html[data-room='tell'][data-lay='narrow'] .more-out {
  bottom: calc(max(12px, env(safe-area-inset-bottom)) - 5px);
  padding: 0 2px;
  font-size: 0.68rem;
  letter-spacing: 0;
}
html[data-room='tell'][data-lay='narrow'] .door-out__label {
  top: auto;
  bottom: calc(100% + 8px);
  right: 0;
  translate: none;
  font-size: 0.74rem;
  transition: opacity 300ms ease;
}
/* once the slip is out the book keeps its name on the cloth, and its words
   make room for the narrator and the slip */
html[data-room='tell'][data-lay='narrow'][data-found] .door-out__label { opacity: 0; }
/* With the question answered the narrator can sit lower, on the floor under
   the ring, where it sat before the book was lifted. That is as low as the
   top of the book, so the words keep to the width left of the book's column
   and never rise onto what the ring is round. The question under them has
   faded by then; it leaves the line as well, since at that width it would
   take two lines and lift the words by one. */
html[data-room='tell'][data-lay='narrow'] .tl-place[data-slip='top'] { --tl-foot: calc(max(12px, env(safe-area-inset-bottom)) + 124px); }
html[data-room='tell'][data-lay='narrow'] .tl-place[data-slip='top'] .tl-words.is-after {
  left: calc(50% - (var(--tl-book-r) + var(--tl-bw)) / 2);
  width: min(calc(100cqw - 44px - var(--tl-book-r) - var(--tl-bw)), 28em);
}
html[data-room='tell'][data-lay='narrow'] .tl-place[data-slip='top'] .tl-words.is-after .tl-ask { display: none; }