/* Menu v3: the top bar with the three areas, and "Entdecken" (study C, docs/design/2026-10-21-entdecken-studie.md; Alex 21.10.:
   „Variante b aber mit auslaufenden transparenten bildern von variante a und dem hintergrund von a“). Rules as in menu.css: no vertical
   accent strokes, no card bodies (a tile is its picture with name and rating as type on the room), focus = sunlight (STYLEGUIDE §5:
   --sun halo, a thin ring that breathes every 2.4 s, 8 % bigger), motion on springs, staggered text, one text family (Lexend).
   Sizes on the 1080p raster (var(--u)); phones get their own raster in menu.css and their layouts at the end of this file. */

body[data-screen="discover"] #discover,
body[data-screen="discover"] #topbar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 460ms var(--ease) 140ms, visibility 0s;
}

/* ---------- top bar: brand, the areas as words, on the right the profile picture and the settings ---------- */
#topbar .brand { margin-right: calc(var(--u) * 60); }
#top { display: flex; align-items: center; gap: calc(var(--u) * 48); margin-right: auto; }
.top-area {
  position: relative;
  display: flex;
  align-items: center;
  font-size: calc(var(--u) * 34);
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--milk-3);
  white-space: nowrap;
  cursor: pointer;
  transform-origin: left center;
  transition: color var(--t-focus) var(--ease), transform 460ms var(--spring), text-shadow var(--t-focus);
}
.top-area svg { display: none; }
.top-area.is-on { font-weight: 600; color: var(--milk); }
.top-area.is-focus { color: var(--sun); transform: scale(1.06); text-shadow: 0 0 calc(var(--u) * 26) var(--sun-glow); }
@media (hover: hover) { .top-area:not(.is-on):not(.is-focus):hover { color: var(--milk-2); } }
#top-side { display: flex; gap: calc(var(--u) * 14); }
#top-side .top-item.is-focus { background: var(--sun); color: var(--ink); box-shadow: 0 0 calc(var(--u) * 30) var(--sun-glow); }
/* the profile picture: the nickname's first letter in a circle (plain text, never a photo) */
.top-avatar { background: color-mix(in srgb, var(--sun) 22%, #16171d); }
.avatar-letter { font: 600 calc(var(--u) * 27)/1 var(--font-text); color: var(--milk); }
.top-avatar.is-focus .avatar-letter { color: var(--ink); }

/* ---------- Entdecken: the grid on the left (54 %), the preview on the right ---------- */
#discover {
  display: grid;
  grid-template-columns: 54% 1fr;
  grid-template-rows: calc(var(--u) * 96) auto auto auto minmax(0, 1fr) calc(var(--u) * 64);
  column-gap: calc(var(--u) * 40);
}
#discover > #dc-bar { grid-area: 2 / 1; }
#discover > #dc-fallback { grid-area: 3 / 1; }
#discover > #dc-quick { grid-area: 4 / 1; }
#discover > #dc-gridwrap { grid-area: 5 / 1; }
#discover.arrive #dc-bar, #discover.arrive #dc-quick { animation: dc-slide 520ms var(--spring) both; }
#discover.arrive #dc-quick { animation-delay: 40ms; }
@keyframes dc-slide { from { opacity: 0; transform: translateX(calc(var(--u) * 36)); } to { opacity: 1; transform: none; } }

/* sort words: type, no pills – the active one bright with a small sun dot, the focused one in sunlight */
#dc-bar { display: flex; align-items: center; gap: calc(var(--u) * 32); min-width: 0; }
#dc-sorts { display: flex; align-items: center; gap: calc(var(--u) * 32); min-width: 0; }
.dc-sort, .dc-q {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  white-space: nowrap;
  color: var(--milk-3);
  cursor: pointer;
  transform-origin: left center;
  transition: color var(--t-focus) var(--ease), transform 420ms var(--spring), text-shadow var(--t-focus);
}
.dc-sort { font-size: calc(var(--u) * 26); font-weight: 300; }
.dc-sort.is-on { font-weight: 600; color: var(--milk); }
.dc-sort.is-on::before { content: ''; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: var(--sun); box-shadow: 0 0 calc(var(--u) * 12) var(--sun-glow); }
.dc-sort.is-focus, .dc-q.is-focus { color: var(--sun); transform: scale(1.06); text-shadow: 0 0 calc(var(--u) * 22) var(--sun-glow); }
#dc-fallback { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 20); color: var(--nebula); }
#dc-fallback:empty { display: none; }
#dc-quick { display: flex; align-items: center; gap: calc(var(--u) * 26); margin-top: calc(var(--u) * 18); min-width: 0; }
.dc-q { font-size: calc(var(--u) * 22); }
.dc-q.is-on { color: var(--milk); font-weight: 500; }
@media (hover: hover) { .dc-sort:not(.is-on):not(.is-focus):hover, .dc-q:not(.is-on):not(.is-focus):hover { color: var(--milk-2); } }

/* the search: a quiet field of dark glass at the end of the sort line; focus = a ring of sunlight */
#dc-search {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  margin-left: auto;
  flex: 0 1 calc(var(--u) * 330);
  min-width: 0;
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 22);
  border-radius: 999px;
  background: rgba(16, 17, 22, .62);
  color: var(--milk-2);
  cursor: text;
  transition: box-shadow 220ms var(--out), background var(--t-focus);
}
#dc-search.is-focus { background: rgba(16, 17, 22, .85); box-shadow: 0 0 0 calc(var(--u) * 2) var(--sun), 0 0 calc(var(--u) * 30) calc(var(--u) * 2) var(--sun-glow); }
#dc-search svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
#dc-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  font: 400 calc(var(--u) * 23)/1.2 var(--font-text);
  color: var(--milk);
  background: none;
  border: 0;
  outline: none;
  user-select: text;
}
#dc-search input::placeholder { color: var(--milk-3); }

/* the grid: pictures with their name and rating as type on the room – no card body, no box around picture and text */
#dc-gridwrap {
  min-height: 0;
  margin: calc(var(--u) * 6) calc(var(--u) * -24) 0;
  padding: calc(var(--u) * 20) calc(var(--u) * 24) calc(var(--u) * 60);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 70), #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 70), #000 86%, transparent 100%);
}
#dc-gridwrap::-webkit-scrollbar { display: none; }
#dc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 28) calc(var(--u) * 22); }
.dc-day {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 14);
  margin: calc(var(--u) * 10) 0 calc(var(--u) * -12);
  font-size: calc(var(--u) * 22);
  color: var(--milk-3);
}
.dc-day:first-child { margin-top: 0; }
.dc-day b { font-weight: 600; color: var(--milk-2); }
.dc-tile { position: relative; min-width: 0; cursor: pointer; transform-origin: 50% 40%; transition: transform 260ms var(--spring); }
.dc-pic {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--u) * 6);
  background: #111318;
  filter: brightness(.72) saturate(.85);
  transition: filter 200ms var(--ease), box-shadow 240ms var(--ease);
}
.dc-name {
  display: block;
  margin-top: calc(var(--u) * 12);
  font-size: calc(var(--u) * 22);
  font-weight: 500;
  color: var(--milk-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-meta { display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; gap: calc(var(--u) * 6) calc(var(--u) * 18); margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 20); color: var(--milk-3); }
.dc-meta > span, .dc-score, .dc-pl { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); flex: none; }
.dc-meta > .dc-unrated { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-g { display: inline-flex; }
.dc-g svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.dc-g-sun { color: var(--sun); }
.dc-score { color: var(--milk-2); }
.dc-age { padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 4); background: rgba(243, 234, 216, .1); }
.num { font-variant-numeric: tabular-nums; }
/* focus = sunlight: the tile grows 8 %, a thin ring and a halo of --sun, breathing every 2.4 s; the others recede */
.dc-tile.is-current .dc-pic { filter: none; }
.dc-tile.is-focus { transform: scale(1.08); z-index: 3; }
.dc-tile.is-focus .dc-pic { box-shadow: 0 0 0 calc(var(--u) * 2) var(--sun), 0 0 calc(var(--u) * 48) calc(var(--u) * 8) var(--sun-glow); animation: dc-breathe 2.4s ease-in-out infinite; }
@keyframes dc-breathe { 50% { box-shadow: 0 0 0 calc(var(--u) * 3) var(--sun), 0 0 calc(var(--u) * 64) calc(var(--u) * 14) var(--sun-glow); } }
.dc-tile.is-focus .dc-name { color: var(--milk); font-weight: 600; }
.dc-tile.is-focus .dc-meta { color: var(--milk-2); }
#dc-grid.enter .dc-tile { animation: dc-tile-in 460ms var(--spring) both; animation-delay: calc(var(--k, 0) * 25ms); }
@keyframes dc-tile-in { from { opacity: 0; transform: translateY(calc(var(--u) * 18)); } to { opacity: 1; transform: none; } }
#dc-grid.enter .dc-tile.is-focus { animation: none; }
/* nothing found: one quiet line and "Wünsch dir eins!" in the place of the first tile (leads to Bauen) */
.dc-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--u) * 18); padding: calc(var(--u) * 26) 0; color: var(--milk-2); }
.dc-empty svg { width: calc(var(--u) * 44); height: calc(var(--u) * 44); color: var(--sun); }
.dc-empty-text { font-size: calc(var(--u) * 26); }
.dc-empty-wish { font-size: calc(var(--u) * 26); font-weight: 600; color: var(--milk); }
.dc-empty.is-focus { transform: none; }
.dc-empty.is-focus .dc-empty-wish { color: var(--sun); text-shadow: 0 0 calc(var(--u) * 22) var(--sun-glow); }

/* the preview (from A): the picture runs to the right edge and fades into the room – no box, no hard edge */
.dc-shot {
  position: fixed;
  right: 0;
  top: calc(var(--u) * 150);
  width: 47.5vw;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  animation: dc-drift 14s linear infinite alternate;
}
@keyframes dc-drift { from { transform: scale(1.02); } to { transform: scale(1.08) translateX(-1%); } }
#dc-pic {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 58%, transparent 100%);
}
#dc-pic.swap { animation: dc-swap 340ms var(--out) both; }
@keyframes dc-swap { from { opacity: .15; filter: blur(6px); } to { opacity: 1; filter: none; } }
#dc-pv { position: absolute; left: 59%; right: 0; top: calc(var(--u) * 470); z-index: 2; }
#dc-pv.in > * { animation: dc-rise 520ms var(--spring) both; }
#dc-pv.in > *:nth-child(2) { animation-delay: 50ms; } #dc-pv.in > *:nth-child(3) { animation-delay: 100ms; }
#dc-pv.in > *:nth-child(4) { animation-delay: 150ms; } #dc-pv.in > *:nth-child(5) { animation-delay: 200ms; }
#dc-pv.in > *:nth-child(6) { animation-delay: 230ms; } #dc-pv.in > *:nth-child(7) { animation-delay: 260ms; }
@keyframes dc-rise { from { opacity: 0; transform: translateY(calc(var(--u) * 12)); filter: blur(4px); } 50% { filter: none; } to { opacity: 1; transform: none; filter: none; } }
.dc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(var(--u) * 6) calc(var(--u) * 20); }
#dc-title { font: 600 calc(var(--u) * 60)/1.05 var(--font-display); letter-spacing: -.035em; text-shadow: 0 1px calc(var(--u) * 24) rgba(7, 8, 12, .6); }
#dc-pv[data-long="1"] #dc-title { font-size: calc(var(--u) * 48); }
#dc-sub { font-size: calc(var(--u) * 30); font-weight: 300; color: var(--milk-2); }
#dc-sub:empty { display: none; }
#dc-rate { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 8) calc(var(--u) * 14); margin-top: calc(var(--u) * 20); font-size: calc(var(--u) * 28); }
#dc-rate .dc-g svg { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
#dc-rate b { font-weight: 600; }
.dc-votes { font-size: calc(var(--u) * 22); color: var(--milk-3); }
.dc-none { font-size: calc(var(--u) * 26); color: var(--milk-2); }
#dc-facts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10) calc(var(--u) * 28); margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 23); color: var(--milk-2); }
#dc-facts > span { display: flex; align-items: center; gap: calc(var(--u) * 10); }
#dc-facts svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
#dc-maker { display: flex; align-items: center; gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 23); color: var(--milk-2); }
.dc-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: 50%;
  font-size: calc(var(--u) * 19);
  font-weight: 600;
  color: var(--milk);
  background: color-mix(in srgb, var(--accent) 30%, #16171d);
}
.dc-mono .mark-glyph { font-size: calc(var(--u) * 26); }
.dc-played { margin-left: calc(var(--u) * -8); }
#dc-about { margin-top: calc(var(--u) * 14); max-width: calc(var(--u) * 700); font-size: calc(var(--u) * 23); font-weight: 300; line-height: 1.4; color: var(--milk-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#dc-about:empty, #dc-note:empty { display: none; }
#dc-note { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 22); color: var(--ember); }
#dc-actions { display: flex; gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 28); }
/* "Spielen" is the brightest surface (sunlight); focus = the ring of the main menu's buttons, in sunlight */
#discover .act-primary { background: var(--sun); color: var(--ink); box-shadow: 0 0 calc(var(--u) * 36) var(--sun-glow); }
#discover .act.is-focus { background: var(--sun); color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * 4) var(--ink), 0 0 0 calc(var(--u) * 7) var(--sun), 0 calc(var(--u) * 10) calc(var(--u) * 56) var(--sun-glow); }
#dc-mini { display: none; }

/* ---------- reduced motion: no drift, no breathing, no flights – only fades ---------- */
body.reduced .dc-shot, body.reduced .dc-tile.is-focus .dc-pic { animation: none; }
body.reduced #dc-grid.enter .dc-tile, body.reduced #dc-pv.in > *, body.reduced #discover.arrive #dc-bar, body.reduced #discover.arrive #dc-quick { animation: fade 220ms var(--out) both; }
body.reduced .dc-tile, body.reduced .top-area, body.reduced .dc-sort, body.reduced .dc-q { transition-property: color, opacity; }
body.reduced .dc-tile.is-focus, body.reduced .top-area.is-focus, body.reduced .dc-sort.is-focus, body.reduced .dc-q.is-focus { transform: none; }

/* ---------- phones (menu.css sets the phone raster: --u, --safe-*, --bar, --tap) ---------- */
@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 600px) {
  .top-area { min-height: 44px; }
  .dc-sort, .dc-q { min-height: 44px; }
  #dc-search input { font-size: 16px; } /* below 16 px Safari zooms into the field */
  .dc-tile.is-focus .dc-pic { animation: none; }
}

/* Upright phone: the areas are a bar at the bottom (thumb), each word with its glyph; the preview sits above the grid, the grid
   scrolls with the page, and once the preview has scrolled away a small line with "Spielen" stays on top (study C). */
@media (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  #top {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9;
    gap: 0;
    margin: 0;
    height: calc(var(--bar) + var(--safe-b));
    padding: 4px 8px var(--safe-b);
    background: #0a0b0f;
  }
  body:not([data-screen="home"]):not([data-screen="discover"]) #top { display: none; }
  body[data-screen="home"] #hints, body[data-screen="discover"] #hints { display: none; }
  .top-area { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; min-height: 48px; font-size: 13px; font-weight: 500; transform-origin: 50% 50%; }
  .top-area svg { display: block; width: 22px; height: 22px; }
  .top-area.is-on { color: var(--sun); font-weight: 600; }
  .top-area.is-focus { transform: none; }
  #topbar .brand { margin-right: auto; }

  #discover {
    display: flex;
    flex-direction: column;
    padding-top: 52px;
    margin: 0 calc(-1 * var(--safe-r)) 0 calc(-1 * var(--safe-l));
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
  }
  #discover > * { flex: none; }
  .dc-shot { order: 1; position: relative; right: auto; top: auto; width: auto; margin: 0 calc(-1 * var(--safe-r)) 0 calc(-1 * var(--safe-l)); -webkit-mask-image: none; mask-image: none; animation: none; }
  #dc-pic { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 64%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 64%, transparent 100%); }
  #dc-pv { order: 2; position: relative; left: auto; right: auto; top: auto; margin-top: -46px; }
  #dc-title, #dc-pv[data-long="1"] #dc-title { font-size: 26px; }
  #dc-sub { font-size: 16px; }
  .dc-head { gap: 2px 10px; }
  #dc-rate { margin-top: 8px; gap: 4px 10px; font-size: 16px; }
  #dc-rate .dc-g svg { width: 20px; height: 20px; }
  .dc-votes { font-size: 14px; }
  .dc-none { font-size: 15px; }
  #dc-facts { margin-top: 8px; gap: 6px 16px; font-size: 14px; }
  #dc-facts svg { width: 18px; height: 18px; }
  #dc-maker { margin-top: 8px; gap: 8px; font-size: 14px; }
  .dc-mono { width: 26px; height: 26px; font-size: 13px; }
  .dc-mono .mark-glyph { font-size: 15px; }
  #dc-about { display: none; }
  #dc-note { font-size: 14px; }
  #dc-actions { margin-top: 14px; gap: 10px; }
  #discover .act { height: 48px; padding: 0 20px; gap: 8px; font-size: 16px; justify-content: center; }
  #discover .act svg { width: 18px; height: 18px; }
  #dc-actions .act-primary { flex: 1 1 auto; }
  #discover .act:not(.act-primary) { width: auto; padding: 0 20px; }
  #discover .act:not(.act-primary) .act-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  #discover .act.is-focus { transform: none; box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--sun); }

  #dc-bar { order: 3; flex-wrap: wrap; gap: 4px 20px; margin-top: 20px; }
  #dc-search { order: -1; flex: 1 1 100%; height: 44px; margin: 0 0 6px; padding: 0 16px; gap: 10px; }
  #dc-search svg { width: 20px; height: 20px; }
  #dc-sorts { gap: 18px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .dc-sort { font-size: 15px; gap: 6px; }
  .dc-sort.is-on::before { width: 6px; height: 6px; }
  #dc-fallback { order: 4; font-size: 13px; margin-top: 2px; }
  #dc-quick { order: 5; gap: 18px; margin-top: 2px; overflow-x: auto; scrollbar-width: none; }
  .dc-q { font-size: 14px; }
  #dc-gridwrap { order: 6; overflow: visible; margin: 6px 0 0; padding: 0 0 16px; -webkit-mask-image: none; mask-image: none; }
  #dc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .dc-day { font-size: 14px; margin: 6px 0 -8px; gap: 8px; }
  .dc-pic { border-radius: 4px; }
  .dc-name { margin-top: 6px; font-size: 14px; }
  .dc-meta { gap: 4px 12px; font-size: 14px; }
  .dc-g svg { width: 15px; height: 15px; }
  .dc-tile.is-focus { transform: scale(1.03); }
  .dc-tile.is-focus .dc-pic { box-shadow: 0 0 0 2px var(--sun), 0 0 24px 4px var(--sun-glow); }
  .dc-empty svg { width: 30px; height: 30px; }
  .dc-empty-text, .dc-empty-wish { font-size: 16px; }

  #dc-mini {
    display: flex;
    position: fixed;
    left: 0; right: 0; top: 0;
    z-index: 8;
    align-items: center;
    gap: 12px;
    padding: calc(8px + env(safe-area-inset-top)) var(--safe-r) 8px var(--safe-l);
    background: #0a0b0f;
    transform: translateY(-110%);
    transition: transform 280ms var(--spring);
  }
  #dc-mini.on { transform: none; }
  body:not([data-screen="discover"]) #dc-mini { display: none; }
  .dc-mini-pic { width: 72px; height: auto; aspect-ratio: 16 / 9; border-radius: 3px; flex: none; }
  .dc-mini-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .dc-mini-text b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dc-mini-text span { font-size: 14px; color: var(--milk-2); }
  #dc-mini .act { height: 44px; padding: 0 18px; flex: none; }
}

/* Phone on its side: the TV layout, small – the areas stay in the top bar, the grid scrolls on the left, the preview on the right. */
@media (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
  #topbar { height: 40px; }
  #topbar .brand { display: none; }
  #top { gap: 22px; }
  .top-area { font-size: 17px; }
  #discover { grid-template-columns: 52% 1fr; grid-template-rows: 44px auto auto auto minmax(0, 1fr) 0; column-gap: 16px; }
  #dc-bar { gap: 14px; }
  #dc-sorts { gap: 14px; }
  .dc-sort { font-size: 14px; gap: 5px; }
  .dc-sort.is-on::before { width: 6px; height: 6px; }
  #dc-search { flex: 0 1 150px; height: 36px; padding: 0 12px; gap: 6px; }
  #dc-search svg { width: 16px; height: 16px; }
  #dc-fallback { font-size: 12px; margin-top: 0; }
  #dc-quick { gap: 16px; margin-top: 0; }
  .dc-q { font-size: 13px; }
  #discover { overflow: visible; } /* the grid scrolls in its own box; the layer must not cut the focused tile's light at the left */
  #dc-gridwrap { margin: 2px -18px 0; padding: 10px 18px 24px; }
  #dc-grid { gap: 12px 8px; }
  .dc-day { font-size: 13px; margin: 0 0 -6px; }
  .dc-pic { border-radius: 3px; }
  .dc-name { margin-top: 4px; font-size: 13px; }
  .dc-meta { gap: 2px 8px; font-size: 13px; }
  .dc-g svg { width: 13px; height: 13px; }
  .dc-age { display: none; }
  .dc-tile.is-focus { transform: scale(1.05); }
  .dc-tile.is-focus .dc-pic { box-shadow: 0 0 0 2px var(--sun), 0 0 20px 4px var(--sun-glow); }
  .dc-shot { top: 0; width: 50vw; animation: none; }
  #dc-pic { -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 80%); mask-image: linear-gradient(180deg, #000 30%, transparent 80%); }
  #dc-pv { left: 56%; top: 132px; text-shadow: 0 1px 12px rgba(7, 8, 12, .85); }
  #dc-title, #dc-pv[data-long="1"] #dc-title { font-size: 22px; }
  #dc-sub, #dc-facts, #dc-about { display: none; }
  #dc-rate { margin-top: 6px; gap: 6px; font-size: 15px; }
  #dc-rate .dc-g svg { width: 18px; height: 18px; }
  .dc-votes { font-size: 13px; }
  .dc-none { font-size: 14px; }
  #dc-maker { margin-top: 4px; gap: 8px; font-size: 13px; }
  .dc-mono { width: 22px; height: 22px; font-size: 12px; }
  .dc-mono .mark-glyph { font-size: 13px; }
  #dc-actions { margin-top: 10px; gap: 8px; }
  #discover .act { height: 44px; padding: 0 16px 0 12px; gap: 6px; font-size: 15px; }
  #discover .act svg { width: 16px; height: 16px; }
  #discover .act.is-focus { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--sun); }
}