/* VIBE/CLUB — rave-flyer front-end. Tokens, layout, rows, tiles, players. */
:root {
  --bg: #0b0b0a;
  --acid: #d4ff00;
  --heat: #ff4f1a;
  --fg: #f4f1ea;
  --dim: #8b887f;
  --line: 2px;
  --gut: 22px;           /* page side gutter */
  --gap: 16px;           /* gap between tiles */
  --nav-h: 58px;
  /* fixed frames per row (desktop): the width is fractional of the viewport so the next tile always peeks */
  --vw: clamp(200px, calc((100vw - var(--gut)) / 5.6 - var(--gap)), 240px);   /* 9:16 clips (200px floor: YouTube's player minimum) */
  --sw: clamp(300px, calc((100vw - var(--gut)) / 3.15 - var(--gap)), 440px);  /* 16:9 screenings */
  --gw: var(--sw);                                                           /* game card */
  --cap-h: 118px;        /* caption block under video tiles (fixed so rows stay even) */
  --foot-h: 212px;       /* game card footer: 2-line title, by-line, tags, PLAY, domain line */
  --disp: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text: "Archivo Narrow", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); overflow-x: clip; scroll-padding-top: calc(var(--nav-h) + 8px); }
body { background: var(--bg); color: var(--fg); font: 17px/1.4 var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
img { display: block; }
.disp { font-family: var(--disp); font-weight: 900; text-transform: uppercase; line-height: .84; letter-spacing: -.01em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
nav :focus-visible { outline-color: var(--bg); }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--acid); color: var(--bg); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 8px; }

/* ---------------------------------------------------------------- nav */
nav.top {
  position: sticky; top: 0; z-index: 20; height: var(--nav-h);
  display: flex; align-items: center; gap: 22px; padding: 0 var(--gut);
  background: var(--acid); color: var(--bg); border-bottom: var(--line) solid var(--bg);
  font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 14px;
}
nav.top .logo { font: 900 28px/1 var(--disp); letter-spacing: 0; margin-right: auto; padding: 10px 0; }
nav.top .links { display: flex; gap: 22px; }
nav.top .links a { padding: 6px 0; border-bottom: var(--line) solid transparent; }
nav.top .links a:hover, nav.top .links a[aria-current="true"] { border-bottom-color: var(--bg); }
.motion {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  border: var(--line) solid var(--bg); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 13px;
}
.motion i { width: 9px; height: 9px; border-radius: 50%; background: var(--heat); animation: blink 1s steps(2) infinite; }
.motion[aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 2px var(--bg); animation: none; }
.submit {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  background: var(--bg); color: var(--acid); font-weight: 700; letter-spacing: .07em; white-space: nowrap;
}
.submit:hover { background: var(--heat); color: var(--bg); }
nav.top .links a, .motion { white-space: nowrap; }
/* four links: just above the phone layout the bar is tight, so close the gaps and drop the word "Motion" */
@media (min-width: 761px) and (max-width: 880px) {
  nav.top, nav.top .links { gap: 14px; }
  .motion .lbl-word { display: none; }
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------------------------------------------------------------- header (a slim band on black) */
/* a 2x2 grid: wordmark | quality seal, then tagline | "updated" slug */
.head {
  position: relative; padding: 10px var(--gut) 9px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 28px; row-gap: 5px; align-items: center;
}
/* the wordmark's caps are 86% of the seal's height (caps are 0.81em in the display face) and centred on it — at a
   true 100% the block of letters reads taller than the round seal:
   the letters sit 0.028em above the middle of their own line box, hence the nudge */
.head { --seal: clamp(64px, 6.4vw, 86px); }
.head h1 { grid-column: 1; grid-row: 1; align-self: center; position: relative; top: .028em; font-size: calc(var(--seal) * .86 / .81); white-space: nowrap; }
.head h1 .o { color: var(--acid); }   /* solid lime against the solid white CLUB */
.head h1 .s { color: var(--heat); }
.head .tag { grid-column: 1; grid-row: 2; align-self: baseline; font-size: clamp(15px, 1.67vw, 21.85px); line-height: 1.2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the stamp's two parts sit straight on the header grid: the seal beside the wordmark (row 1), the "updated" slug
   beside the tagline (row 2), both on the tagline's baseline */
.stamp { display: contents; }
.seal { grid-column: 2; grid-row: 1; justify-self: center; }
.head .counts { grid-column: 2; grid-row: 2; align-self: baseline; justify-self: center; }
.seal { display: block; width: var(--seal); aspect-ratio: 1; animation: rot 14s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.seal text { fill: var(--bg); text-transform: uppercase; }
.seal .arc { font: 700 23px var(--text); letter-spacing: .13em; }   /* both arcs the same size */
.seal .pct { font: 900 58px var(--disp); letter-spacing: 0; }
.counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.counts span { white-space: nowrap; }
.counts span:not(:last-child)::after { content: "·"; margin: 0 .7em; }   /* trailing: a wrapped line never starts with a dot */
.counts .upd { color: var(--dim); }

/* ---------------------------------------------------------------- tickers */
.tick { overflow: hidden; white-space: nowrap; border-block: var(--line) solid var(--fg); }
/* every band is the same height: one line of the display face at a fixed line height, whatever glyphs it carries */
.tick > div { display: inline-block; font-size: clamp(22.5px, 3.15vw, 42px); line-height: 1; height: calc(1em + 9px); padding: 6px 0 3px; animation: go 40s linear infinite; will-change: transform; }
.tick > div > * { line-height: 1; }
.tick.rev > div { animation-direction: reverse; }   /* same solid type as the others, just running the other way */
.tick span { margin: 0 .35em; }
.tick b { color: var(--acid); }
.tick .name { background: var(--acid); color: var(--bg); padding: 0 .3em; }   /* the chart's name, once per lap */
.tick .n { color: var(--dim); }
.tick em { font-style: normal; color: var(--acid); -webkit-text-stroke: 0; font-variant-emoji: text; }
@keyframes go { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- rows */
.row { padding: 18px 0 36px; }
.row + .row { border-top: var(--line) solid var(--fg); }
.row-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 10px 20px;
  padding: 0 var(--gut); margin-bottom: 10px;
}
.row-head h2 { font-size: clamp(48px, 6vw, 104px); }
.row-head .kick { display: block; font: 700 14px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; color: var(--dim); }
.row-info { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.fchip { border: var(--line) solid currentColor; padding: 4px 8px; font-weight: 700; }
.row-info .n { color: var(--dim); }
.row-ctl { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.seeall { min-height: 44px; padding: 0 14px; border: var(--line) solid currentColor; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; white-space: nowrap; }
.seeall:hover { background: var(--fg); color: var(--bg); }
.arrow { width: 48px; height: 48px; border-radius: 50%; border: var(--line) solid currentColor; font: 700 20px/1 var(--text); transition: opacity .15s; }
.arrow:hover:not(:disabled) { background: var(--acid); border-color: var(--acid); color: var(--bg); }
.arrow:disabled { opacity: .2; cursor: default; }
.row.is-grid .arrow { display: none; }
/* per-row keyboard escape: hidden until focused, then a flyer tag at the rail's left edge */
.skip-row { position: absolute; left: var(--gut); top: 100%; z-index: 8; transform: translateY(-120%); opacity: 0; pointer-events: none;
  background: var(--acid); color: var(--bg); padding: 8px 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 13px; }
.skip-row:focus { opacity: 1; pointer-events: auto; transform: none; outline-color: var(--bg); }
.row-head { position: relative; }

.rail {
  display: flex; align-items: flex-start; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gut); padding: 4px var(--gut) 14px;
  scrollbar-width: thin; scrollbar-color: var(--dim) transparent;
}
.rail > li { flex: none; scroll-snap-align: start; }
.row.is-grid .rail { display: grid; grid-template-columns: repeat(auto-fill, var(--tw)); justify-content: start; overflow: visible; row-gap: 26px; }
.row-v { --tw: var(--vw); --fh: calc(var(--vw) * 16 / 9); }
.row-s { --tw: var(--sw); --fh: calc(var(--sw) * 9 / 16); }
.row-g { --tw: var(--gw); --fh: calc(var(--gw) * 9 / 16); }
/* Daily Vibes runs small: tiles at about 80% the size of Screenings, heading at two-thirds, captions at three-quarters */
.daily { padding-bottom: 8px; --tw: calc(var(--sw) * .7935); --cap-h: 74px; --fh: calc(var(--tw) * 9 / 16); --dh: clamp(32px, 4vw, 69px); --ctl: min(44px, calc(var(--dh) * .81)); }
.daily .row-head h2 { font-size: var(--dh); }
.daily .rail { padding-bottom: 8px; }
/* no format chip / count in the middle column: the controls keep the right edge. They are never taller than the
   heading's caps (0.81em in the display face) and sit on its baseline (0.043em above the heading box) */
.daily .row-ctl { grid-column: 3; gap: 6px; padding-bottom: calc(var(--dh) * .043); }
.daily .seeall { position: relative; min-height: 0; height: var(--ctl); padding: 0 calc(var(--ctl) * .32); font-size: clamp(10px, calc(var(--ctl) * .3), 13px); }
.daily .arrow { width: var(--ctl); height: var(--ctl); font-size: clamp(12px, calc(var(--ctl) * .42), 20px); }
.daily .cap { height: auto; padding-top: 8px; gap: 2px; }   /* as tall as its text: no reserved space under short captions */
.daily .cap .who { font-size: 16.5px; }
.daily .cap .ttl { font-size: 11.25px; }
.daily .meta { font-size: 10px; }
.daily .meta .src { width: 13px; height: 13px; }
.daily .credit { font-size: 9px; }
/* Top Vertical Vibes: the same chart row in the 9:16 frame, kept as a sideways rail at every width */
.vdaily { --tw: calc(var(--vw) * .75); --fh: calc(var(--tw) * 16 / 9); }
/* hover preview of a YouTube / TikTok tile in the chart rows: the official player, muted behind the tile's own
   hit area. The tile keeps its size (YouTube asks for players of at least 200x200; the vertical tiles are narrower). */
.frame > iframe.peek { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; pointer-events: none; background: #000; }
/* a row on lime (like the arcade): dark type, and the acid accents swap to black */
.lime { background: var(--acid); color: var(--bg); }
.lime .seeall:hover { background: var(--bg); color: var(--acid); }
.lime .arrow:hover:not(:disabled) { background: var(--bg); border-color: var(--bg); color: var(--acid); }
.lime .rail { scrollbar-color: var(--bg) transparent; }
.lime .cap .who { color: var(--bg); }
.lime .cap .who:hover { color: var(--heat); }
.lime .meta { color: rgba(11, 11, 10, .62); }
.lime .meta .src { color: var(--bg); }
.lime .meta .src:hover, .lime .meta .src:focus-visible { color: var(--heat); }
.lime .chip.rank { background: var(--bg); color: var(--acid); }
.lime .drop-here { color: var(--bg); }
.lime .drop-here b { color: var(--bg); }
.lime .drop-here:hover { background: var(--bg); color: var(--acid); }
.lime .drop-here:hover b { color: var(--acid); }
.lime .skip-row { background: var(--bg); color: var(--acid); outline-color: var(--acid); }
.lime :focus-visible { outline-color: var(--bg); }
.meta .srcs { display: inline-flex; align-items: center; gap: 7px; }
.daily .glyph { display: none; }   /* no play mark over Daily Vibes posters: the whole tile is the button */
.daily .chip.plat, .arcade .chip.plat { display: none; }   /* nor platform chips (the mark is in the caption) */

/* ---------------------------------------------------------------- frame (shared by every tile) */
.tile { width: var(--tw); }
.frame { position: relative; width: 100%; height: var(--fh); overflow: hidden; background: #000; isolation: isolate; }
.frame > img, .frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame > .bg { filter: blur(18px) brightness(.42) saturate(1.2); transform: scale(1.2); }
.frame > .poster.contain, .frame > video.contain { object-fit: contain; }
.frame > video { z-index: 1; opacity: 0; transition: opacity .25s; }
.frame > video.on { opacity: 1; }
.hit { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; }
/* the frame clips overflow, so the ring is drawn INSIDE it: acid ring + a dark band so it reads on any poster */
.frame > .hit:focus-visible { outline: 3px solid var(--acid); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--bg); }
.chip {
  position: absolute; z-index: 4; pointer-events: none; background: var(--bg); color: var(--acid);
  padding: 4px 7px 3px; font: 700 12px/1.1 var(--text); letter-spacing: .08em; text-transform: uppercase;
}
.chip.plat { left: 8px; top: 8px; width: 23px; height: 23px; padding: 5px; }
.chip.plat .ico { width: 13px; height: 13px; }
.chip.dur { right: 8px; bottom: 8px; color: var(--fg); }
/* ranked tiles, top-right: places moved in 24 hours (▲ up, ▼ down, – unmoved) or NEW — the rank mark's twin: same
   type, size and padding, in the opposite corner */
.chip.move { right: 0; top: 0; padding: 5px 8px 3px; font: 600 17px/22px var(--text); letter-spacing: .02em; white-space: nowrap; text-align: center; min-width: 38px; }   /* the rank mark's box, in the lighter text face so it reads second */
.chip.move.up { background: var(--acid); color: var(--bg); }
.chip.move.down { background: var(--bg); color: var(--heat); }
.chip.move.new { background: var(--heat); color: var(--bg); }
.chip.move.same { background: var(--bg); color: var(--fg); }
.lime .chip.move.up { background: var(--bg); color: var(--acid); }
.chip.rank { left: 0; top: 0; padding: 5px 8px 3px; background: var(--acid); color: var(--bg); font: 900 22px/1 var(--disp); letter-spacing: 0; }   /* Top Vibes Today: #1, #2 … */
.glyph {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; pointer-events: none;
  background: var(--bg); display: grid; place-items: center; transition: transform .15s, background .15s;
}
.glyph::before { content: ""; margin-left: 4px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--acid); }
.tile:hover .glyph, .frame:has(> .hit:focus-visible) .glyph { background: var(--acid); }
.tile:hover .glyph::before, .frame:has(> .hit:focus-visible) .glyph::before { border-left-color: var(--bg); }
/* vertical clips carry their hook caption across the middle: keep the play glyph in the bottom-left corner */
.row-v .glyph { left: 8px; top: auto; bottom: 8px; margin: 0; width: 44px; height: 44px; }
.row-v .glyph::before { margin-left: 3px; border-width: 9px 0 9px 14px; }
.frame.live .glyph { display: none; }
.frame.loud { outline: 3px solid var(--acid); outline-offset: -3px; }

/* typographic flyer for items without a poster (and posters that fail to load) */
.flyer {
  position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 44px 12px 14px; background: var(--acid); color: var(--bg); overflow: hidden; container-type: inline-size;
  --slash: var(--heat);
}
.flyer.v1 { background: var(--heat); --slash: var(--bg); }
.flyer.v2 { background: var(--fg); --slash: var(--acid); }
.flyer::before { /* halftone-free flyer rule: big slash */
  content: "/"; position: absolute; right: -6%; top: -18%; font: 900 clamp(160px, 26vw, 320px)/1 var(--disp); color: var(--slash); opacity: .9;
}
.flyer.v1::before { opacity: .22; }
.flyer .lbl { position: relative; align-self: flex-start; background: var(--bg); color: var(--fg); padding: 3px 6px 2px; font: 700 11px/1.1 var(--text); letter-spacing: .1em; text-transform: uppercase; }
.flyer .what { position: relative; font: 900 clamp(22px, 12.5cqw, 44px)/.9 var(--disp); text-transform: uppercase; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.row-s .flyer .what, .row-g .flyer .what { font-size: clamp(24px, 8cqw, 52px); -webkit-line-clamp: 3; }
.row-v .flyer { padding-bottom: 62px; }   /* clear the bottom-left play glyph */
.frame.no-poster .chip.plat { background: var(--bg); }
.frame.no-poster .glyph { background: var(--bg); }

/* mounted third-party player: nothing is drawn over it, and it is never smaller than YouTube's 200x200 minimum.
   Landscape grows to 356x200 when the screen allows (else as wide as it can, and at least 200 tall); the rest of
   the row just shifts along. */
.tile.playing { --pw: max(var(--tw), min(356px, calc(100vw - 20px))); width: var(--pw); scroll-margin-inline: 10px; }
.row-v .tile.playing { --pw: max(var(--tw), 200px); }
.tile.playing .frame { height: max(var(--fh), calc(var(--pw) * var(--fa-h, 9) / var(--fa-w, 16)), 200px); }
.row-v .tile.playing .frame { --fa-h: 16; --fa-w: 9; }
.frame.mounted > :not(.player) { display: none !important; }
.frame .player { position: absolute; inset: 0; z-index: 5; background: #000; }
.frame .player iframe { width: 100%; height: 100%; border: 0; display: block; }
.fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; padding: 16px; text-align: center; background: var(--bg); }
.fallback p { color: var(--dim); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.fallback a { display: inline-block; background: var(--acid); color: var(--bg); padding: 12px 16px; font: 900 22px/1 var(--disp); text-transform: uppercase; }
.frame.mounted + .cap .close-player { display: inline-block; }

/* ---------------------------------------------------------------- caption block under video tiles */
/* the caption bleeds 6px into the tile gap on both sides (same text column) so focus rings and the icon's hit area aren't clipped */
.cap { height: var(--cap-h); padding: 10px 6px 0; margin-inline: -6px; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.cap .who { font: 900 22px/1 var(--disp); text-transform: uppercase; letter-spacing: .01em; color: var(--acid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; max-width: 100%; }
.cap .who:hover { color: var(--fg); }
.cap .ttl { font-size: 15px; line-height: 1.28; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.56em; flex: none; }   /* always two lines tall, so the icon · date · views line sits at the same height in every tile of a row */
/* one line: platform icon · date · duration. Not clipped (the .cap is), so the icon's hit area can spill past the line */
.meta { display: flex; align-items: center; min-width: 0; font-size: 13px; color: var(--dim); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.meta .dot { margin: 0 .4em; }
/* platform mark linking to the original post: 17px glyph, hit area ≥ 32px (44px on touch) drawn by ::after,
   reaching 6px left (into the caption bleed) and the rest over the dot, so the line's layout doesn't move */
.meta .src { position: relative; flex: none; display: grid; place-items: center; width: 17px; height: 17px; padding: 0; margin: 0; color: var(--fg); transition: color .12s; }
.meta .src::after { content: ""; position: absolute; left: -6px; top: 50%; width: 32px; height: 32px; transform: translateY(-50%); }
.meta .src:hover, .meta .src:focus-visible { color: var(--acid); }
.meta .src:focus-visible { outline-offset: 3px; }
.meta .site { flex: none; color: var(--fg); text-decoration: underline; text-underline-offset: 2px; transition: color .12s; }   /* a game site's name, where a post's platform mark would be */
.meta .site:hover, .meta .site:focus-visible { color: var(--acid); }
.ico { display: block; width: 100%; height: 100%; fill: currentColor; }
.credit { position: relative; }   /* paints over the icon's spilled hit area, so its own link keeps its taps */
.credit { font-size: 12px; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.credit a { color: var(--fg); }
.caprow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.close-player { display: none; flex: none; min-height: 32px; font: 700 12px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--bg); background: var(--acid); padding: 6px 10px 5px; align-self: center; }
.close-player:hover { background: var(--heat); }

/* ---------------------------------------------------------------- arcade (games) */
/* Vibe Games sits on black, like Top Vibes Today (the lime band between them is the vertical chart) */
.arcade { background: var(--bg); color: var(--fg); }
/* a game tile is a frame (the PLAY link) over the same caption video tiles have */
.game .frame .glyph::before { border-left-color: var(--heat); }
.arcade .cap { height: auto; padding-top: 8px; gap: 2px; }
.arcade .cap .ttl { -webkit-line-clamp: 1; min-height: 0; }
.chip.go { right: 8px; bottom: 8px; background: var(--heat); color: var(--bg); }
.arcade .chip.dur { display: none; }   /* the length is in the caption; its corner carries the PLAY mark */
.cap .who, .credit a { padding-block: 10px; margin-block: -10px; } /* taller touch targets, same layout */

/* #1: as tall as the 2x2 grid beside it — the frame takes what the caption leaves */
.game.feat { display: flex; flex-direction: column; }
.game.feat .frame { flex: 1; min-height: 0; height: auto; outline: var(--line) solid var(--acid); outline-offset: calc(var(--line) * -1); }
.game.feat .cap { flex: none; }

/* the dashed "+ YOUR DROP HERE" tile */
.drop-here {
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px;
  border: var(--line) dashed currentColor; height: calc(var(--fh) + var(--cap-h)); color: var(--dim);
  transition: color .15s, border-color .15s, background .15s;
}
.row-g .drop-here { height: calc(var(--fh) + var(--foot-h)); }
.drop-here b { font: 900 clamp(34px, 3.4vw, 50px)/.86 var(--disp); text-transform: uppercase; color: var(--fg); }
.drop-here span { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.drop-here:hover { color: var(--acid); border-style: solid; }
.row-v .drop-here b, .daily .drop-here b { font-size: clamp(30px, 2.6vw, 40px); }

/* ---------------------------------------------------------------- Top Creators (the board under the games) */
.board { padding: 18px 0 30px; }
.board .row-head { margin-bottom: 14px; }
.board .row-head .kick { margin: 10px 0 0; color: rgba(11, 11, 10, .62); }
.lb-tabs { grid-column: 3; display: flex; padding-bottom: 4px; }
.lb-tabs button { min-height: 44px; padding: 0 16px; border: var(--line) solid currentColor; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; white-space: nowrap; }
.lb-tabs button + button { margin-left: calc(var(--line) * -1); }
.lb-tabs button:hover { color: var(--heat); }
.lb-tabs button[aria-pressed="true"] { background: var(--bg); border-color: var(--bg); color: var(--acid); }
/* ten rows read down two columns: #1–#5, then #6–#10 */
.lb { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: calc(var(--gap) * 2); padding: 0 var(--gut); }
.lb > li { min-width: 0; }   /* a long name or a big count shortens the name; the row never grows past its column */
.lb-row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 8px 0; border-top: var(--line) solid var(--bg); }
.lb-rank { flex: none; width: 1.9em; font-size: 40px; line-height: 1; }
.lb-who { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 5px; }
.lb-name { font-size: 30px; line-height: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row:hover .lb-name { color: var(--heat); }
.lb-sub { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(11, 11, 10, .62); white-space: nowrap; }
.lb-sub .ico { flex: none; width: 13px; height: 13px; color: var(--bg); }
.lb-views { flex: none; font-size: 40px; line-height: 1; }
.lb-none { grid-column: 1 / -1; padding: 18px 0; border-top: var(--line) solid var(--bg); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 760px) {
  .lb-tabs { grid-column: 1 / -1; }
  .lb-tabs button { flex: 1; padding: 0 6px; font-size: 12px; letter-spacing: .04em; }
  .lb { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .lb-row { gap: 10px; min-height: 60px; }
  .lb-rank, .lb-views { font-size: 30px; }
  .lb-name { font-size: 24px; }
}
@media (max-width: 380px) {
  .lb-row { gap: 8px; }
  .lb-rank, .lb-views { font-size: 26px; }
  .lb-rank { width: 1.7em; }
  .lb-name { font-size: 21px; }
  .lb-sub { font-size: 11.5px; gap: 5px; }
}

/* ---------------------------------------------------------------- empty state */
.empty { padding: 60px var(--gut) 80px; border-top: var(--line) solid var(--fg); }
.empty h2 { font-size: clamp(60px, 10vw, 160px); color: var(--acid); }
.empty p { margin-top: 18px; font-size: 20px; font-weight: 600; }
.empty code { background: var(--acid); color: var(--bg); padding: 2px 8px; font: 700 18px ui-monospace, Menlo, monospace; }

/* ---------------------------------------------------------------- footer CTA */
.foot-cta { background: var(--heat); color: var(--bg); padding: 56px var(--gut) 40px; border-top: var(--line) solid var(--fg); }
.foot-cta h2 { font-size: clamp(56px, 10vw, 170px); }
.foot-cta p { max-width: 52ch; margin-top: 18px; font-size: 19px; font-weight: 600; }
.foot-cta .big {
  display: inline-flex; align-items: center; min-height: 64px; margin-top: 24px; padding: 0 26px;
  background: var(--bg); color: var(--acid); font: 900 34px/1 var(--disp); text-transform: uppercase;
}
.foot-cta .big:hover { background: var(--acid); color: var(--bg); }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 22px var(--gut) 40px; color: var(--dim); text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: .07em; }

/* ---------------------------------------------------------------- viewer (a clicked video takes the screen) */
dialog.theater {
  margin: 0; padding: 0; border: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  background: var(--bg); color: var(--fg); overflow: hidden;
}
dialog.theater::backdrop { background: var(--bg); }
dialog.theater .in { display: flex; flex-direction: column; height: 100%; }
dialog.theater header { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px var(--gut); border-bottom: var(--line) solid var(--fg); }
.th-what { flex: 1; min-width: 0; }
.th-who { font: 900 22px/1 var(--disp); text-transform: uppercase; color: var(--acid); }
.th-who:hover { color: var(--fg); }
dialog.theater h2 { margin-top: 3px; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-src { flex: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.th-src:hover { color: var(--acid); }
dialog.theater .x { width: 44px; height: 44px; flex: none; border: var(--line) solid var(--fg); font: 700 22px/1 var(--text); }
dialog.theater .x:hover { background: var(--acid); color: var(--bg); border-color: var(--acid); }
/* the stage takes whatever height the header and the strip leave; the video keeps its shape inside it */
.th-stage { flex: 1; min-height: 0; display: grid; place-items: center; background: #000; container-type: size; }
.th-stage > video, .th-stage > iframe { display: block; border: 0; background: #000; width: 100%; height: 100%; }
.th-stage > video { object-fit: contain; }
/* players are fitted to the stage by its own size (container units): the largest 16:9 or 9:16 box that fits */
.th-stage > iframe { width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, 100cqw * 9 / 16); }
.th-stage.tall > iframe { width: min(100cqw, 100cqh * 9 / 16); height: min(100cqh, 100cqw * 16 / 9); }
.th-more { flex: none; padding: 10px 0 12px; border-top: var(--line) solid var(--fg); }
.th-more h3 { padding: 0 var(--gut); font-size: 22px; margin-bottom: 8px; }
.th-strip { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px var(--gut) 6px; scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
.th-strip > li { flex: none; }
.th-item { display: block; width: 168px; text-align: left; }
.th-strip.tall .th-item { width: 76px; }
.th-thumb { display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; outline: var(--line) solid transparent; outline-offset: -2px; }
.th-strip.tall .th-thumb { aspect-ratio: 9 / 16; }
.th-thumb img { width: 100%; height: 100%; object-fit: cover; }
.th-item:hover .th-thumb, .th-item:focus-visible .th-thumb { outline-color: var(--acid); }
.th-item b { display: block; margin-top: 5px; font: 900 14px/1 var(--disp); text-transform: uppercase; color: var(--acid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-item .th-ttl { display: block; margin-top: 2px; font-size: 11px; line-height: 1.25; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-strip.tall .th-ttl { display: none; }
@media (max-width: 760px) {
  .th-src { display: none; }
  .th-item { width: 132px; }
}

/* ---------------------------------------------------------------- Instagram dialog */
dialog.ig {
  margin: auto; padding: 0; border: var(--line) solid var(--acid); background: var(--bg); color: var(--fg);
  width: max(326px, min(540px, 92vw)); max-width: 100vw; max-height: 92vh; overflow: hidden;
}
dialog.ig::backdrop { background: rgba(11, 11, 10, .88); }
dialog.ig .in { display: flex; flex-direction: column; max-height: calc(92vh - 4px); }
dialog.ig header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border-bottom: var(--line) solid var(--fg); }
dialog.ig header h2 { font: 900 26px/1 var(--disp); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
dialog.ig .x { width: 44px; height: 44px; flex: none; border: var(--line) solid var(--fg); font: 700 22px/1 var(--text); }
dialog.ig .x:hover { background: var(--acid); color: var(--bg); border-color: var(--acid); }
dialog.ig .body { overflow-y: auto; overscroll-behavior: contain; background: #fff; min-height: 200px; }
dialog.ig iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
dialog.ig footer { padding: 12px 14px 14px; border-top: var(--line) solid var(--fg); }
dialog.ig footer a { display: flex; align-items: center; justify-content: center; min-height: 50px; background: var(--acid); color: var(--bg); font: 900 26px/1 var(--disp); text-transform: uppercase; }
dialog.ig footer a:hover { background: var(--heat); }
dialog.ig footer p { margin-top: 8px; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; text-align: center; }

/* ---------------------------------------------------------------- motion off */
html.still .tick > div, html.still .seal, html.still .motion i { animation-play-state: paused; }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 760px) {
  :root {
    --gut: 16px; --gap: 12px; --nav-h: 54px;
    --vw: max(200px, 42vw);    /* 200px floor: YouTube players must be at least 200x200 */
    --sw: 84vw; --gw: 84vw;
    --foot-h: 200px;
  }
  nav.top { gap: 8px; }
  nav.top .logo { font-size: 24px; }
  nav.top .links { display: none; }
  .motion { min-height: 44px; padding: 0 8px; gap: 6px; font-size: 12px; letter-spacing: .04em; }
  .motion i { width: 8px; height: 8px; }
  .submit { min-height: 44px; padding: 0 10px; font-size: 12px; letter-spacing: .04em; }
  /* phone: three rows on one two-column grid — wordmark | seal (centred on each other), then the tagline across the
     full width (it may wrap, at a readable size), then the "updated" slug under it */
  .head { padding: 12px var(--gut) 10px; column-gap: 12px; row-gap: 8px; --seal: clamp(44px, 13.8vw, 58px); }   /* small enough for both to fit a phone's width */
  .head h1 { top: 0; align-self: center; }
  .seal { align-self: center; justify-self: end; }
  .head .tag { grid-column: 1 / -1; grid-row: 2; font-size: 14px; line-height: 1.25; white-space: normal; overflow: visible; text-wrap: balance; }
  .head .counts { grid-column: 1 / -1; grid-row: 3; justify-self: start; justify-content: flex-start; }
  .counts { font-size: 8.5px; }
  .row { padding: 16px 0 28px; }
  .row-head { grid-template-columns: minmax(0, 1fr) auto; }
  .row-head h2 { font-size: clamp(48px, 14vw, 72px); }
  .daily { --dh: clamp(32px, 9.3vw, 48px); --tw: calc(100vw - 2 * var(--gut)); --cap-h: auto; }
  /* phone: Top Vibes Today is a list down the screen, full-width tiles; the one in focus previews with sound (club.js) */
  .daily .rail { flex-direction: column; overflow: visible; gap: 18px; scroll-snap-type: none; }
  .daily .seeall { display: none; }                      /* everything is already listed */
  .daily .cap { padding-bottom: 2px; }
  .daily .cap .who { font-size: 22px; }
  .daily:not(.vdaily) .cap .ttl { min-height: 0; }       /* a list down the screen: nothing beside it to line up with */
  .daily .cap .ttl { font-size: 15px; }
  .daily .meta { font-size: 13px; }
  .daily .meta .src { width: 17px; height: 17px; }
  .daily .drop-here { height: auto; min-height: 120px; }
  /* …but the vertical chart stays a sideways rail on phones (a stack of full-width 9:16 tiles would be endless) */
  .vdaily { --tw: max(150px, 31.5vw); --fh: calc(var(--tw) * 16 / 9); }
  .vdaily .rail { flex-direction: row; overflow-x: auto; gap: var(--gap); scroll-snap-type: x proximity; }
  .vdaily .seeall { display: inline-block; }
  .vdaily .cap .who { font-size: 16.5px; }
  .vdaily .cap .ttl { font-size: 11.25px; }
  .vdaily .meta { font-size: 10px; }
  .vdaily .meta .src { width: 13px; height: 13px; }
  .vdaily .drop-here { height: calc(var(--fh) + 74px); }
  .daily .row-ctl { grid-column: 2; grid-row: 1; }
  .row-info { grid-column: 1; grid-row: 2; padding: 0; }
  .row-ctl { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .arrow { display: none; }
  .row.is-grid .rail { grid-template-columns: repeat(auto-fill, var(--tw)); justify-content: center; }
  .foot-cta .big { font-size: 28px; }
}
@media (max-width: 380px) {
  nav.top .logo { font-size: 21px; }
  .motion, .submit { padding: 0 7px; letter-spacing: .02em; }
}
@media (max-width: 340px) {
  .motion .lbl-word { display: none; }
}
@media (pointer: coarse) {
  .close-player { min-height: 36px; }
  .meta .src::after { width: 44px; height: 44px; }
  .daily .seeall::after { content: ""; position: absolute; inset: calc((var(--ctl) - 44px) / 2 - var(--line)) 0; }   /* small button, 44px tap target */
}
@media (hover: none) {
  .tile:hover .glyph { background: var(--bg); }
  .tile:hover .glyph::before { border-left-color: var(--acid); }
}
@media (prefers-reduced-motion: reduce) {
  .frame > video, .play, .arrow, .drop-here { transition: none; }
}

/* ---------------------------------------------------------------- arcade: featured + hot grid + two shelves */
.arcade { --mw: clamp(200px, 17.5vw, 280px); }
.arc-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); padding: 4px var(--gut) 0; }
.arc-top ol { list-style: none; margin: 0; padding: 0; }
.arc-feat { display: grid; }
.arc-feat .game.feat { width: 100%; height: 100%; min-height: 0; }
.game.feat .chip.rank, .game.feat .chip.move { font-size: 34px; padding: 7px 11px 4px; }
.game.feat .chip.move { font-size: 25px; line-height: 34px; min-width: 56px; }
/* #2–#5: a 2x2 grid of 16:9 tiles; it sets the height and the #1 card beside it stretches to match */
.arc-hot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-content: start; }
.arc-hot .game.mini { width: 100%; }
.game.mini { width: var(--mw); }
.game.mini .frame { height: auto; aspect-ratio: 16 / 9; outline: var(--line) solid var(--fg); outline-offset: calc(var(--line) * -1); }
.game.mini:hover .frame, .game.mini:focus-within .frame { outline-color: var(--acid); }
.game.mini .frame > img.poster { transition: transform .25s; }
.game.mini:hover .frame > img.poster { transform: scale(1.05); }
/* small tiles, small captions (the sizes Top Vibes Today uses) */
.game.mini .cap .who { font-size: 16.5px; }
.game.mini .cap .ttl { font-size: 11.25px; }
.game.mini .meta { font-size: 10px; }
.game.mini .meta .src { width: 13px; height: 13px; }
.game.mini .chip.go { font-size: 10px; padding: 3px 6px 2px; }
.shelf { margin-top: 22px; }
.shelf-head { display: flex; align-items: baseline; gap: 14px; padding: 0 var(--gut); margin-bottom: 6px; }
.shelf-head h3 { font-size: clamp(30px, 3.2vw, 46px); }
.shelf-head .n { font-weight: 700; font-size: 14px; letter-spacing: .08em; }
.shelf-head .row-ctl { margin-left: auto; }
.shelf .rail > li.tile:not(.game) { width: var(--mw); }
.shelf .drop-here { height: auto; aspect-ratio: 16 / 9; }
.arcade.is-grid .shelf .rail { grid-template-columns: repeat(auto-fill, minmax(var(--mw), 1fr)); row-gap: var(--gap); }
.arcade.is-grid .shelf .rail > li { width: 100%; }
/* More Vibes Games is two rows deep: the list reads along the top row, then carries on along the second (club.js
   sets --cols to half the tiles, rounded up); the two scroll sideways together */
@media (min-width: 761px) {
  .arcade:not(.is-grid) .shelf .rail { display: grid; grid-template-columns: repeat(var(--cols, 1), var(--mw)); row-gap: 18px; }
}
@media (max-width: 760px) {
  /* phone: games are a list down the screen like Top Vibes Today — one full-width tile a row, the one in focus
     previews with sound (club.js) */
  .arcade { --mw: calc(100vw - 2 * var(--gut)); }
  .arc-hot { grid-template-columns: 1fr; gap: 18px; }
  .arc-top { gap: 18px; }
  .shelf .rail { flex-direction: column; overflow: visible; gap: 18px; scroll-snap-type: none; }
  .game.mini .cap .who { font-size: 22px; }
  .game.mini .cap .ttl { font-size: 15px; }
  .game.mini .meta { font-size: 13px; }
  .game.mini .meta .src { width: 17px; height: 17px; }
  .game.mini .chip.go { font-size: 12px; padding: 4px 7px 3px; }
  .arc-top { grid-template-columns: 1fr; }
  .arc-feat { --gw: calc(100vw - 2 * var(--gut)); }
  .arc-feat .game.feat { width: 100%; height: auto; min-height: 0; }
  .game.feat .frame { flex: none; aspect-ratio: 16 / 9; }
  .shelf-head .row-ctl { display: none; }
  .arcade.is-grid .shelf .rail { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- switched off for now
   The top bar (logo, section links, Motion toggle, Submit a drop) and every row's "See all" button are hidden
   until there are subpages for them to lead to. The markup and the script behind them are untouched: delete this
   rule to bring them back. Motion still follows the visitor's reduced-motion / data-saver settings. */
nav.top, .seeall { display: none !important; }
html { scroll-padding-top: 8px; }

/* ---------------------------------------------------------------- Vibe Craft: one heading over two rows */
/* the heading (with the first row's arrows beside it) belongs to the vertical row; the landscape row follows with
   only its arrows, in the gap between the two */
.row.craft + .row.craft { border-top: 0; padding-top: 0; }
.craft .row-ctl { grid-column: 3; }
.craft .row-head .kick { grid-column: 1 / -1; margin: 0; }
#screenings .row-head { margin-bottom: 4px; }
/* like the charts: tiles preview in place, so no play mark or platform chip over them (the mark is in the caption) */
.craft .glyph, .craft .chip.plat { display: none; }
/* tiles and captions at the charts' sizes: landscape as Top Vibes Today, vertical as Top Vertical Vibes */
#screenings { --tw: calc(var(--sw) * .7935); --fh: calc(var(--tw) * 9 / 16); }
#clips { --tw: calc(var(--vw) * .75); --fh: calc(var(--tw) * 16 / 9); }
.craft .cap { height: auto; padding-top: 8px; gap: 2px; }
.craft .cap .who { font-size: 16.5px; }
.craft .cap .ttl { font-size: 11.25px; }
.craft .meta { font-size: 10px; }
.craft .meta .src { width: 13px; height: 13px; }
.craft .credit { font-size: 9px; }
.craft .drop-here { height: var(--fh); }
.craft .drop-here b { font-size: clamp(30px, 2.6vw, 40px); }
/* the two rows sit close: no reserved caption height, row padding or rail padding between them */
#clips { padding-bottom: 0; }
#clips .rail { padding-bottom: 28px; }
#clips .cap { height: auto; }
#clips .drop-here { height: var(--fh); }
@media (max-width: 760px) {
  .craft .row-ctl { grid-column: 2; }
  #screenings .row-head { margin: 0; }   /* arrows are hidden on phones: nothing left in the head */
  #clips .rail { padding-bottom: 28px; }
  /* phone: the vertical row at the vertical chart's phone size; the landscape row stays a sideways rail of big
     tiles (the landscape chart is a list down the screen there) with full-size captions */
  #clips { --tw: max(150px, 31.5vw); --fh: calc(var(--tw) * 16 / 9); }
  #screenings { --tw: var(--sw); --fh: calc(var(--sw) * 9 / 16); }
  #screenings .cap .who { font-size: 22px; }
  #screenings .cap .ttl { font-size: 15px; }
  #screenings .meta { font-size: 13px; }
  #screenings .meta .src { width: 17px; height: 17px; }
}

/* ---------------------------------------------------------------- creator page (creator.html) */
.chead { padding: 14px var(--gut) 18px; border-bottom: var(--line) solid var(--fg); }
.back { display: inline-block; padding: 6px 0; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.back:hover { color: var(--acid); }
.chead h1 { margin-top: 6px; font-size: clamp(56px, 9vw, 150px); color: var(--acid); overflow-wrap: anywhere; }
/* always one row: when the handles don't fit beside the sort they shorten (…), down to the platform marks alone */
.cr-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 14px; }
.cr-links { display: flex; gap: 8px; flex: 0 1 auto; min-width: 0; }
.cr-links li { flex: 0 1 auto; min-width: 39px; }
.cr-links a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: var(--line) solid var(--fg); font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.cr-links a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sort { flex: none; }
.cr-links a:hover { background: var(--acid); border-color: var(--acid); color: var(--bg); }
.cr-links .ico { flex: none; width: 15px; height: 15px; }
.cr-stats { display: flex; flex-wrap: wrap; margin-top: 12px; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.cr-stats span:not(:last-child)::after { content: "·"; margin: 0 .7em; color: var(--dim); }
/* the library: one ranked grid of 16:9 frames (a vertical video sits whole inside its frame, over its own blur) */
.row.creator.is-grid .rail { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); justify-content: stretch; }
.creator .tile { width: auto; min-width: 0; }
.creator .frame { height: auto; aspect-ratio: 16 / 9; }
.creator .cap { height: auto; padding-top: 8px; }
.creator .caprow:empty, .creator .close-player { display: none; }
.creator .chip.plat, .creator .glyph { display: none; }   /* the platform marks are in the caption, one per copy of the video */
.sort { display: flex; }
.sort[hidden] { display: none; }
.sort button { min-height: 40px; padding: 0 14px; border: var(--line) solid var(--fg); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sort button + button { border-left: 0; }
.sort button:hover { color: var(--acid); }
.sort button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.empty .back { margin-top: 8px; font-size: 16px; }
@media (max-width: 760px) {
  .chead h1 { font-size: clamp(48px, 15vw, 84px); }
  /* phone: the profiles shrink to their platform marks and the sort to "Popular | Newest", so both share one row */
  .cr-bar { gap: 8px; }
  .cr-links { gap: 5px; }
  .cr-links li { min-width: 0; }
  .cr-links a { width: 38px; min-height: 38px; padding: 0; justify-content: center; }
  .cr-links a span, .sort .wide { display: none; }
  .cr-links .ico { width: 16px; height: 16px; }
  .sort { flex: none; }
  .sort button { min-height: 38px; padding: 0 9px; font-size: 11.5px; letter-spacing: .06em; }
}
@media (max-width: 380px) {
  .cr-links { gap: 4px; }
  .cr-links a { width: 32px; min-height: 34px; }
  .sort button { min-height: 34px; padding: 0 6px; font-size: 10.5px; letter-spacing: .04em; }
}