/* The sheet that springs out of a button (the active users and their places)
   and the little note that pops up (it says the link is copied); card.js:
   js/bar.js, js/fx.js */

/* the three lists are one, and scroll as one: who is here now, where the
   large cube was solved by hand, everyone so far */
.places .lists {
  padding-top: 0.35rem; /* the first place never cut at the top */
  max-height: min(44vh, 19rem);
  max-width: 17rem;
  margin: 0 auto;
  overflow-y: auto;
  /* only what is in front moves: the list scrolls itself, up and down, and
     never hands its scrolling on to the card behind it */
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 8%, #000 88%, transparent);
}
.places .lists::-webkit-scrollbar { display: none; }
.places .lists.short { -webkit-mask-image: none; mask-image: none; }
/* with room to spare it does not scroll, but gives a little under the
   finger and springs back (js/bar.js rubber): the finger is its own there */
.places .lists.short { touch-action: none; }
.places ul {
  margin: 0;
  padding: 0.3em 0.4rem;
  text-align: left;
  list-style: none;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--champagne);
}
/* a city on the left, how many are active there on the right; your own in gold */
.places li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; }
.places li b {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--champagne);
  opacity: 0.8;
}
.places li.mine, .places li.mine b { color: var(--gold); opacity: 1; }
/* "dein Ort": a small soft gold tag on your own place, the one on top */
.places .me {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(233, 198, 139, 0.16);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
  vertical-align: 0.1em;
}
/* below a fine line, everyone so far: calm champagne, no dot, nothing gold */
.places .ever { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.places .ever-title { margin: 0 0 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--champagne); opacity: 0.85; }
.places .ever li, .places .ever li b { color: var(--champagne); opacity: 0.72; }
.places .ever li.mine, .places .ever li.mine b { color: var(--champagne); opacity: 1; }
/* where the places come from, named; small and quiet */
.places .credit { margin: 0.7rem 0 0; font-size: 0.66rem; color: var(--ink-soft); opacity: 0.55; }
.places .credit a { color: inherit; }

.places .sheet-title .signal { margin-right: 0.45rem; transform: translateY(-0.1rem); }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: var(--sheet-bottom, calc(4.4rem + env(safe-area-inset-bottom) + 0.6rem));
  width: min(22rem, calc(100vw - 2rem));
  padding: 1rem 1rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: rgba(24, 19, 56, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.85);
  text-align: center;
  z-index: 7;
  touch-action: none; /* the sheet itself never moves the page behind it */
  /* closed: small, low, soft. It rises out of the button that called it,
     evenly and gently, and gathers back into it the same way, only quicker:
     a child's part, it bows and goes */
  opacity: 0;
  transform: translateY(1.2rem) scale(0.86);
  filter: blur(5px);
  transform-origin: var(--from, 50%) 115%;
  transition: opacity 0.3s ease, transform 0.36s cubic-bezier(.55, 0, .75, .3), filter 0.3s ease;
}
.sheet.open {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(.2, .75, .25, 1), filter 0.45s ease;
}
/* its contents, one after another as it comes, together as it goes */
.sheet > * { opacity: 0; transform: translateY(0.4rem); transition: opacity 0.22s ease, transform 0.3s ease-in; }
.sheet.open > * { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.55s cubic-bezier(.2, .75, .25, 1); }
.sheet.open > :nth-child(1) { transition-delay: 0.08s; }
.sheet.open > :nth-child(2) { transition-delay: 0.14s; }
.sheet.open > :nth-child(3) { transition-delay: 0.2s; }
.sheet.open > :nth-child(4) { transition-delay: 0.26s; }

.sheet[hidden] { display: none; }
/* the places fan out one after another when the sheet opens */
.places ul.fresh li { animation: fan 0.5s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(var(--k, 0) * 45ms + 0.18s); }
@keyframes fan { from { opacity: 0; transform: translateX(-0.7rem) scale(0.9); } }
.sheet-title { margin: 0 0 0.8rem; font-weight: 700; font-size: 1.1rem; color: var(--gold); }

.toast {
  position: fixed;
  left: 50%;
  /* just above the buttons, which it never covers */
  bottom: var(--sheet-bottom, calc(4.4rem + env(safe-area-inset-bottom) + 0.6rem));
  transform: translate(-50%, 1rem) scale(0.7);
  /* as wide as its words, not half the screen (left: 50%): a note of two
     lines stays two lines */
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: rgba(24, 19, 56, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--champagne);
  text-align: center;
  white-space: pre-line; /* a note of two lines: the puzzle, then the way taken */
  opacity: 0;
  pointer-events: none;
  /* it pops up with a little bounce, and floats away upwards */
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(.3, 1.6, .5, 1);
  z-index: 8;
}

.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* in the large cube, the first times, quietly where the notes appear: what
   the button now inviting does (the dial's: whoever mixes here mixes for
   everyone playing). Fixed beside the notes, not inside the card: there
   Safari left it unpainted. It rises softly with its button's wackel and
   goes at once, and never shows once the cube is small again */
.sync {
  position: fixed;
  left: 50%;
  bottom: var(--sheet-bottom, calc(4.4rem + env(safe-area-inset-bottom) + 0.6rem));
  transform: translate(-50%, 0.4rem);
  width: max-content;
  max-width: calc(100vw - 2rem);
  text-align: center;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--champagne);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  z-index: 6;
}
.card.stage ~ .sync.on {
  opacity: 0.85;
  transform: translate(-50%, 0);
  transition: opacity calc(var(--beat, 1.2s) * 0.7) ease-out, transform calc(var(--beat, 1.2s) * 0.9) cubic-bezier(.2, .8, .3, 1);
}

/* a mix from elsewhere, offered: where it comes from, a way to decline, and
   a thin line running out over the four seconds */
.offer {
  position: fixed;
  left: 50%;
  bottom: var(--sheet-bottom, calc(4.4rem + env(safe-area-inset-bottom) + 0.6rem));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  overflow: hidden;
  padding: 0.45rem 0.5rem 0.45rem 1.1rem;
  border: 1px solid rgba(255, 210, 140, 0.6);
  border-radius: 2rem;
  background: rgba(24, 19, 56, 0.92);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--champagne);
  white-space: nowrap;
  z-index: 9;
  animation: popin 0.5s cubic-bezier(.3, 1.6, .5, 1) both;
}
.offer[hidden] { display: none; }
.offer p { margin: 0; display: grid; gap: 0.05rem; line-height: 1.2; }
/* who sent it, large with its seal; what it does, small below */
.offer .who { font-size: 0.95rem; font-weight: 600; }
.offer .who svg { vertical-align: -0.18em; margin-right: 0.3em; }
.offer .what { font-size: 0.72rem; opacity: 0.75; letter-spacing: 0.02em; }
.offer button {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: rgba(233, 198, 139, 0.12);
  color: var(--gold);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.offer i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform-origin: 0 50%;
  animation: offer-runs var(--offer, 4s) linear both;
}
@keyframes offer-runs { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast.gone { opacity: 0; transform: translate(-50%, -1.2rem) scale(0.9); transition: opacity 0.5s ease, transform 0.6s ease; }


@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet > *, .toast { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .places ul.fresh li { animation: none; }
}

/* a new version deployed: a small gold pill in the bar's free middle
   (js/update.js places it), offered and never forced; it fades in softly and
   steps back while the large cube plays */
.update {
  position: fixed;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem 0.32rem 0.6rem;
  border: 1px solid rgba(255, 210, 140, 0.45);
  border-radius: 2rem;
  background: rgba(24, 19, 56, 0.55);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity var(--glide, 2.4s) var(--soft), transform var(--glide, 2.4s) var(--soft);
}
.update svg { width: 0.85rem; height: 0.85rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.update[hidden] { display: none; }
.update.on { opacity: 0.9; transform: translate(-50%, -50%); }
.card.stage ~ .update.on { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .update { transition: opacity 0.3s; } }

/* a game played together, in the large cube (js/together.js): gold on the
   night sky, as everything written in the large cube, small and quiet, never
   over the turns to go or the buttons. Upper left the places taking part;
   upper right the stopwatch, the chiffre's code under it. They come with the
   game and go with the large cube; the stopwatch alone shows also after a
   mix played alone. Fixed beside the notes, not in the card (see .sync) */
.playing, .watch {
  /* both columns begin at the same height, so they stand level */
  --corner-top: max(1rem, calc(env(safe-area-inset-top) + 0.4rem));
  position: fixed;
  top: var(--corner-top);
  z-index: 5;
  color: var(--gold);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--glide, 2.4s) var(--soft);
  /* a soft dark halo behind the words, so they read over the coloured glass
     of the large cube too (the list may grow over it) */
  --halo: 0 0 2px rgba(12, 9, 34, 0.95), 0 0 6px rgba(12, 9, 34, 0.8), 0 0 12px rgba(12, 9, 34, 0.55);
}
.card.stage ~ .playing.on, .card.stage ~ .watch.on { opacity: 1; }
.card.stage ~ .watch.on.out { opacity: 0.4; }
/* the places, beside the turns to go: as wide as their names, at most the
   room left of the turns to go */
.playing {
  left: max(0.75rem, calc(env(safe-area-inset-left) + 0.5rem));
  max-width: min(15rem, calc(50vw - 4.9rem));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
/* on a phone both columns begin below the turns to go, where the large
   cube, low and wide, leaves room, level with each other: the number on top,
   the places and the stopwatch below it on either side, one calm arc (the
   human, 2026-10-19); the places as wide as half the screen */
@media (max-width: 699.98px) {
  /* one clean top line: the players on the left, the turns in the middle and
     the stopwatch on the right all start where the number starts, wherever
     the screen's top bar puts it (js/scene.js --togo-top; the human) */
  .playing, .watch { --corner-top: var(--togo-top, 1rem); }
  .playing { max-width: calc(50vw - 1rem); }
}
/* the chiffre's short code under the stopwatch, the same on every coupled
   card; it glows once as they are coupled, and once as the round is over */
.playing .code:empty { display: none; }
.playing .code.lit, .playing.over .code { animation: corner-lit calc(var(--beat) * 2) ease-out; }
.playing .code {
  position: fixed;
  top: calc(var(--corner-top) + 1.9rem);
  right: max(0.75rem, calc(env(safe-area-inset-right) + 0.5rem));
  margin: 0;
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 200, 130, 0.35);
}
/* over the places: who is there, or how far one's own chiffre reached */
.playing .roster { min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 0.25rem; }
.playing .head {
  margin: 0 0 0.1rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gold);
  text-shadow: var(--halo), 0 0 8px rgba(255, 200, 130, 0.3);
}
.playing .head:empty { display: none; }
/* the marks that say what a value is: the players, the turns to go, the
   stopwatch, a solved player's time; tiny, in the same gold line */
.playing .unit, .watch .unit {
  width: 0.78em;
  height: 0.78em;
  margin-right: 0.28em;
  vertical-align: -0.06em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}
.watch .unit { width: 0.85em; height: 0.85em; vertical-align: -0.08em; }
.playing ol {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 0 0 1.04rem; /* the places under the header's words, past its mark */
  list-style: none;
  display: grid;
  gap: 0.2rem;
}
/* longer than its room: it scrolls within itself, gliding slowly down and
   back until a finger is on it (js/together.js), soft at its edges */
.playing ol.long {
  overflow-y: auto;
  pointer-events: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 0.5rem, #000 calc(100% - 0.8rem), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 0.5rem, #000 calc(100% - 0.8rem), transparent);
}
.playing ol.long::-webkit-scrollbar { display: none; }
/* a place that comes fades in; one beside the game, quietly below it */
.playing li.fresh { animation: corner-in 0.8s ease-out both; }
@keyframes corner-in { from { opacity: 0; transform: translateX(-0.4rem); } }
.playing li.aside { opacity: 0.62; }
.playing li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--gold);
  text-shadow: var(--halo), 0 0 8px rgba(255, 200, 130, 0.3);
  transition: opacity 0.8s ease;
}
.playing li svg { filter: drop-shadow(0 0 1.5px rgba(12, 9, 34, 0.95)); }
.playing .city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playing li.mine .city { color: #ffe3b0; }
/* one's own place says so: two Berlins are told apart at a glance */
.playing li.mine .city::after { content: " · du"; font-size: 0.82em; opacity: 0.7; }
/* the player's seal and name, quietly under its city (js/player.js) */
.playing small { display: block; font-size: 0.7rem; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; }
.playing small svg { vertical-align: -0.14em; margin-right: 0.22em; }
.playing li b {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}
.playing li.solved b { color: #ffe0a8; }
/* the handshake under way: three gold ticks, sent, seen, taken over; the
   newest lights as it comes */
.playing b.steps { display: inline-flex; gap: 0.25rem; align-self: center; padding-right: 0.1rem; }
.playing b.steps i { width: 0.3rem; height: 0.56rem; border: solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: translateY(-0.12rem) rotate(40deg); opacity: 0.22; }
.playing b.steps i.lit { opacity: 1; }
.playing b.steps i.new { animation: tick-in var(--beat) ease-out; }
@keyframes tick-in {
  0% { opacity: 0; transform: translateY(-0.12rem) rotate(40deg) scale(1.9); filter: drop-shadow(0 0 4px #ffd79a); }
  100% { opacity: 1; transform: translateY(-0.12rem) rotate(40deg); filter: none; }
}
.playing li.left { opacity: 0.38; }
.playing li.wand { opacity: 0.6; }
/* a turn there lights its number; a solve lights the whole line */
.playing li.tick b { animation: corner-lit calc(var(--beat) * 1.2) ease-out; }
.playing li.won { animation: corner-lit calc(var(--beat) * 2) ease-out; }
@keyframes corner-lit {
  0% { text-shadow: var(--halo), 0 0 14px rgba(255, 215, 150, 0.95); }
  100% { text-shadow: var(--halo), 0 0 8px rgba(255, 200, 130, 0.3); }
}
/* the stopwatch: calm serif digits in gold, a second at a time */
.watch {
  right: max(0.75rem, calc(env(safe-area-inset-right) + 0.5rem));
  font-family: var(--serif);
  font-size: 1.2rem; /* a third larger than at first, still calmer than the turns to go */
  line-height: 1.2;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 0 9px rgba(255, 200, 130, 0.35);
}
.watch.lit span { animation: corner-lit calc(var(--beat) * 1.6) ease-out; }
.watch.done span { color: #ffe0a8; text-shadow: 0 0 10px rgba(255, 215, 150, 0.55); }
/* wide screens: more room, the player's name beside its city */
@media (min-width: 700px) {
  .playing { max-width: min(21rem, calc(50vw - 7rem)); }
  .playing li { font-size: 0.84rem; }
  .playing li b { font-size: 0.9rem; }
  .playing small { display: inline; margin-left: 0.45em; }
}

/* a game played together: coupled, the chiffre's key presses in once, a
   soft gold glow spreading from it (js/scene.js) */
/* one round, then a breather (js/together.js): the key rests, softly, while
   a round is under way or one was sent within thirty seconds */
.card.stage .dial.round, .card.stage .dial.resting { opacity: 0.55; filter: saturate(0.6); transition: opacity 1.2s ease, filter 1.2s ease, transform 0.5s cubic-bezier(.3, 1.6, .5, 1); }
.card.stage .dial.coupled { animation: lock-in calc(var(--beat) * 1.4) cubic-bezier(.3, .7, .4, 1) both; }
@keyframes lock-in {
  0% { transform: none; box-shadow: 0 0 18px rgba(255, 200, 130, 0.25), 0 0 0 0 rgba(255, 215, 150, 0); }
  22% { transform: scale(0.8); box-shadow: 0 0 8px rgba(255, 200, 130, 0.5), 0 0 0 0 rgba(255, 215, 150, 0.7); }
  60% { transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 210, 140, 0.8), 0 0 0 14px rgba(255, 215, 150, 0); }
  100% { transform: none; box-shadow: 0 0 18px rgba(255, 200, 130, 0.25), 0 0 0 0 rgba(255, 215, 150, 0); }
}
/* in the large cube everything written is gold on the night sky: the notes
   and the chiffre offered too */
.card.stage ~ .toast, .offer { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .playing li.tick b, .playing li.won, .watch.lit span, .card.stage .dial.coupled,
  .playing b.steps i.new, .playing .code.lit, .playing.over .code, .playing li.fresh { animation: none; }
}

/* what is new: release by release, newest first, each line marked new or
   fixed in gold; the list scrolls within itself */
.news .lists {
  max-height: min(52vh, 24rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
  text-align: left;
  -webkit-mask-image: linear-gradient(#000 88%, transparent);
  mask-image: linear-gradient(#000 88%, transparent);
}
.news .lists::-webkit-scrollbar { display: none; }
.news ul { margin: 0; padding: 0; list-style: none; }
.news .lists > ul { padding: 0 0.3rem 1.2rem; }
.news .release { padding: 0.55rem 0 0.2rem; border-top: 1px solid rgba(233, 198, 139, 0.14); }
.news .release:first-child { border-top: 0; }
.news .release small { display: block; margin-bottom: 0.25rem; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--gold); opacity: 0.8; }
.news .release li { display: grid; grid-template-columns: 3.9rem minmax(0, 1fr); align-items: baseline; padding: 0.22rem 0; font-size: 0.88rem; line-height: 1.4; color: var(--champagne); }
.news .release li b { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.05em; color: var(--gold); }

/* the board in the user history: a seal, the name and city, the points; one's
   own in gold. And this device's key, with a field to take in another */
.places .board { margin: 0; padding: 0; list-style: none; }
.places .board li { display: grid; grid-template-columns: 1.15rem minmax(0, 1.15fr) minmax(0, 1fr) auto; align-items: center; column-gap: 0.55rem; }
.places .board .sealcell { display: grid; place-items: center; }
.places .board li em { font-style: normal; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.places .board li small { font-size: 0.78rem; opacity: 0.6; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.places .seal { flex: none; color: var(--gold); }
.places .keybox .mykey { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--gold); }
.places .keyform { display: flex; gap: 0.4rem; margin: 0 0 0.4rem; }
.places .keybox { padding-bottom: 1.4rem; } /* clear of the list's fading edge when scrolled to the end */
.places .keyform input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(233, 198, 139, 0.35);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--champagne);
  font: inherit;
  font-size: 16px; /* iOS zooms into anything smaller */
}
.places .keyform input::placeholder { color: var(--champagne); opacity: 0.45; font-size: 0.8rem; }
.places .keyform button {
  flex: none;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 210, 140, 0.55);
  border-radius: 1rem;
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

/* what is new, opened from its round button in play mode: it unrolls right
   above the button, from the button up, like a scroll, and rolls back into it
   at a second tap (js/bar.js places it) */
.news.roll { left: auto; right: var(--roll-right, 1rem); bottom: var(--roll-bottom, 9rem); margin: 0; width: min(21rem, calc(100vw - 2rem)); transform-origin: calc(100% - var(--roll-x, 1.4rem)) 100%; transform: scale(0.3, 0.02); filter: blur(3px); }
.news.roll.open { transform: none; filter: none; transition: opacity 0.35s ease, transform 0.55s cubic-bezier(.2, .9, .25, 1.05), filter 0.35s ease; }
.news.roll:not(.open) { transition: opacity 0.3s ease 0.1s, transform 0.4s cubic-bezier(.6, 0, .8, .3), filter 0.3s ease; }