/* Киноархив — «Расклейка»: a concrete wall at night under a streetlamp.
   Toned to RudyOS so the window does not stand apart from the desktop: the
   concrete takes the OS's dark violet, the spray paint is the OS pink, the
   neon's glow washes the right edge. Paper is cream, tape is masking tape.
   Type: Rubik Wet Paint for sprayed tags, Dela Gothic One for printed
   headlines, Roboto Condensed for flyer text, Caveat for marker. */
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/roboto-condensed-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/roboto-condensed-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@property --reveal { syntax: '<percentage>'; inherits: false; initial-value: 100%; }

/* ── the frame: loading and errors ─────────────────────── */
.ax { container-type: inline-size; height: 100%; display: grid; background: #151016; }
.ax-body { position: relative; min-height: 0; overflow: hidden; }
.ax-style { height: 100%; }
.ax-loading { height: 100%; display: grid; place-content: center; justify-items: center; gap: 18px; font: 700 26px/1 var(--font-hand); color: var(--text-2); }
.ax-error { display: grid; justify-items: center; gap: 8px; padding: 60px 20px; text-align: center; color: var(--text-2); }
.ax-error .ico { font-size: 40px; color: var(--text-3); }
.ax-error h3 { margin: 0; color: var(--text); }
.props { container-type: inline-size; height: 100%; }

/* ── the wall ──────────────────────────────────────────── */
.sw {
  --sw-c0: #151016;
  --sw-c1: #1d1720;
  --sw-c2: #2a2230;
  --sw-paper: #efe9e1;
  --sw-ink: #151016;
  --sw-pink: var(--accent);
  --sw-pink-2: var(--accent-2);
  --sw-tape: #e6dcb0;
  --sw-text: #efe8ee;
  --sw-text-2: #b9aebb;
  --sw-text-3: #85798a;
  --sw-tag: 'Rubik Wet Paint', 'Dela Gothic One', sans-serif;
  --sw-print: 'Dela Gothic One', 'Geologica', sans-serif;
  --sw-cond: 'Roboto Condensed', 'Geologica', sans-serif;
  --sw-hand: 'Caveat', cursive;
  --sw-pad: clamp(14px, 3cqw, 38px);
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  color: var(--sw-text); font: 400 15px/1.45 var(--sw-cond);
  background: var(--sw-c0);
}
:where(.sw) :where(p, h2, h3, h4) { margin: 0; font-weight: 400; }
:where(.sw) button { font: inherit; }
.sw :focus-visible { outline: 3px solid var(--sw-pink); outline-offset: 3px; }

/* concrete: seams, stains, grain, the streetlamp and the neon's glow — all on
   a layer that does not scroll */
.sw-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(45% 60% at 100% 10%, rgba(255, 61, 147, 0.09), transparent 70%),
    radial-gradient(40% 30% at 80% 75%, rgba(0, 0, 0, 0.3), transparent 70%),
    radial-gradient(30% 25% at 12% 88%, rgba(70, 40, 70, 0.28), transparent 70%),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(0, 0, 0, 0.3) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 460px 100%,
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(0, 0, 0, 0.24) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 100% 340px,
    linear-gradient(180deg, #221b25, #1a151d 60%, #141016);
}
.sw-bg::after { content: ''; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.sw-lamp { position: absolute; left: -14%; top: -45%; width: 78%; height: 125%; background: radial-gradient(closest-side, rgba(255, 179, 71, 0.15), rgba(255, 179, 71, 0.05) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) { .sw-lamp { animation: sw-lamp 23s linear infinite; } }
@keyframes sw-lamp { 0%, 61%, 64.5%, 100% { opacity: 1; } 62% { opacity: 0.35; } 63% { opacity: 0.9; } 63.6% { opacity: 0.5; } }

.sw-scroll { position: absolute; inset: 0; z-index: 1; container-type: size; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-color: #4a3d4f transparent; }

/* ── the top: masking-tape labels ──────────────────────── */
.sw-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px var(--sw-pad) 2px; }
.sw-tapes { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.sw-tapes button {
  position: relative; padding: 6px 15px 5px; border: 0; font: 700 21px/1 var(--sw-hand); color: var(--sw-ink);
  background: var(--sw-tape); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 2%, 100% 0, 97% 12%, 100% 25%, 98% 40%, 100% 58%, 97% 74%, 100% 100%, 94% 92%, 90% 100%, 0 100%, 3% 86%, 0 70%, 2% 50%, 0 30%);
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.sw-tapes button:nth-child(1) { transform: rotate(-2deg); }
.sw-tapes button:nth-child(2) { transform: rotate(1.5deg) translateY(2px); }
.sw-tapes button:nth-child(3) { transform: rotate(-1deg); }
.sw-tapes button:nth-child(4) { transform: rotate(2.4deg) translateY(-1px); }
.sw-tapes button:nth-child(5) { transform: rotate(-2.6deg) translateY(2px); }
.sw-tapes button.is-on { background: var(--sw-pink); }
.sw-tapes button:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .sw-tapes button:not(.is-on):hover { background: #f3ead0; } }
.sw-onair { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 9px; border: 2px solid #fff; background: #0e0b10; font: 700 13px/1 var(--sw-cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sw-text-3); transform: rotate(3deg); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); transition: transform 160ms var(--ease-out); }
.sw-onair i { width: 8px; height: 8px; border-radius: 50%; background: #4a4450; }
.sw-onair[data-state='live'] { color: #fff; }
.sw-onair[data-state='live'] i { background: #ff3040; box-shadow: 0 0 10px #ff3040; }
@media (prefers-reduced-motion: no-preference) { .sw-onair[data-state='live'] i { animation: sw-blink 1.4s steps(2, jump-none) infinite; } }
@keyframes sw-blink { 50% { opacity: 0.3; } }
@media (hover: hover) and (pointer: fine) { .sw-onair:hover { transform: rotate(0deg) translateY(-2px); } }

/* ── sticker buttons ───────────────────────────────────── */
.sw-btn { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 19px; border-radius: 11px; border: 3px solid #fff; background: var(--sw-ink); color: #fff; font: 700 16px/1 var(--sw-cond); text-decoration: none; white-space: nowrap; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45); transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease; }
.sw-btn .ico { font-size: 17px; }
.sw-btn.pink { background: var(--sw-pink); color: var(--sw-ink); }
.sw-btn.sm { height: 36px; padding: 0 12px; font-size: 14px; border-width: 2.5px; border-radius: 9px; gap: 7px; }
.sw-btn:disabled { opacity: 0.4; cursor: default; }
.sw-btn:active:not(:disabled) { transform: scale(0.96) rotate(-1deg); }
@media (hover: hover) and (pointer: fine) { .sw-btn:hover:not(:disabled) { transform: rotate(-2deg) translateY(-2px); } }
.sw-mini-can { position: relative; display: inline-block; flex: none; width: 13px; height: 24px; border-radius: 4px 4px 3px 3px; background: linear-gradient(90deg, #111, #444 40%, #111); box-shadow: inset 0 -8px 0 var(--sw-pink, var(--accent)); margin-top: 4px; }
.sw-btn.pink .sw-mini-can { box-shadow: inset 0 -8px 0 #fff; }
.sw-mini-can::before { content: ''; position: absolute; left: 3px; right: 3px; top: -5px; height: 6px; border-radius: 2px 2px 0 0; background: #ddd; }
.sw-mini-can.is-big { width: 34px; height: 64px; border-radius: 8px 8px 6px 6px; box-shadow: inset 0 -20px 0 var(--accent); }
.sw-mini-can.is-big::before { left: 8px; right: 8px; top: -12px; height: 13px; }
@media (prefers-reduced-motion: no-preference) { .ax-loading .sw-mini-can { animation: sw-rattle 0.5s ease-in-out infinite; } }
@keyframes sw-rattle { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg) translateY(-4px); } }
.sw-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--sw-pink); cursor: pointer; }
.sw-marker { display: inline-block; margin-top: 14px; padding: 0; border: 0; background: none; font: 700 27px/1 var(--sw-hand); color: var(--sw-pink-2); transform: rotate(-2deg); transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sw-marker:hover { transform: rotate(-2deg) translateY(3px); } }

/* ── masking tape pieces ───────────────────────────────── */
.sw-tape { position: absolute; z-index: 3; width: 36%; height: 24px; background: rgba(233, 222, 176, 0.74); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); pointer-events: none;
  clip-path: polygon(0 12%, 4% 0, 7% 14%, 11% 2%, 15% 10%, 100% 0, 96% 20%, 100% 40%, 97% 62%, 100% 82%, 96% 100%, 0 100%, 4% 80%, 0 60%, 3% 36%); }
.sw-tape.t-1 { left: -8%; top: 2%; transform: rotate(-38deg); }
.sw-tape.t-2 { left: 32%; top: -11px; transform: rotate(-3deg); }
.sw-tape.t-3 { right: -8%; top: 2%; transform: rotate(36deg); }

/* ── a poster on the wall ──────────────────────────────── */
.sw-cell { position: relative; display: grid; align-content: start; gap: 7px; min-width: 0; }
.sw-bill { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(var(--tilt, 0deg)); transition: transform 220ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.sw-paper { position: absolute; inset: 0; overflow: hidden; background: var(--sw-paper); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5); transition: box-shadow 220ms ease; }
.sw-img { width: 100%; height: 100%; object-fit: cover; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.sw-paste { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 22px rgba(20, 16, 10, 0.4);
  background:
    linear-gradient(103deg, transparent 31%, rgba(255, 255, 255, 0.12) 32.5%, transparent 34.5%),
    linear-gradient(-78deg, transparent 56%, rgba(0, 0, 0, 0.14) 57.5%, transparent 59.5%),
    linear-gradient(172deg, transparent 71%, rgba(255, 255, 255, 0.1) 72.5%, transparent 74%),
    linear-gradient(8deg, transparent 20%, rgba(0, 0, 0, 0.08) 21%, transparent 23%),
    radial-gradient(130% 90% at 25% 15%, rgba(255, 250, 235, 0.12), transparent 60%); }
.sw-bill.torn-1 .sw-paper { clip-path: polygon(0 0, 78% 0, 82% 3%, 86% 1%, 90% 6%, 94% 5%, 97% 11%, 100% 14%, 100% 100%, 0 100%); }
.sw-bill.torn-2 .sw-paper { clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 18% 97%, 13% 99%, 9% 94%, 5% 95%, 2% 89%, 0 86%); }
.sw-bill.torn-3 .sw-paper { clip-path: polygon(0 0, 100% 0, 100% 96%, 92% 98%, 84% 95%, 75% 99%, 66% 96%, 57% 100%, 48% 96%, 38% 99%, 29% 95%, 19% 99%, 10% 96%, 0 99%); }
.sw-curl { position: absolute; right: 0; bottom: 0; z-index: 2; width: 30%; aspect-ratio: 1; pointer-events: none; transform: scale(0); transform-origin: 100% 100%; transition: transform 260ms var(--ease-out);
  background: linear-gradient(315deg, var(--sw-c1) 0 49%, rgba(0, 0, 0, 0.35) 49.5%, #d8d2c4 52%, #f6f3ec 68%, #c7c0b0 100%);
  box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.25); }
.sw-seen { position: absolute; left: -6px; top: 10px; z-index: 4; padding: 4px 8px 5px; border: 2px solid #fff; border-radius: 999px; background: var(--sw-pink); color: var(--sw-ink); font: 700 12px/1 var(--sw-cond); transform: rotate(-8deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); }
.sw-scrawl { padding-left: 5px; font: 700 19px/1 var(--sw-hand); color: rgba(239, 232, 238, 0.58); transform: rotate(-1.5deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-scrawl em { font-style: normal; color: var(--sw-pink-2); }
.sw-bill.is-gone { visibility: hidden; }
.sw-bill:focus-visible { outline: none; }
.sw-bill:focus-visible .sw-paper { box-shadow: 0 0 0 4px var(--sw-pink), 0 5px 10px rgba(0, 0, 0, 0.5); }
@media (hover: hover) and (pointer: fine) {
  .sw-bill:hover { transform: rotate(var(--tilt, 0deg)) translateY(-5px) scale(1.025); }
  .sw-bill:hover .sw-curl { transform: scale(1); }
  .sw-bill:hover .sw-paper { box-shadow: 0 16px 26px -6px rgba(0, 0, 0, 0.6), 0 0 46px -14px var(--sw-pink); }
}
.sw-bill:active { transform: rotate(var(--tilt, 0deg)) scale(0.98); }
/* no poster: the title printed on the paper */
.sw-printed { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 12% 10%; background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 79, 154, 0.07) 14px 28px), var(--sw-paper); color: var(--sw-ink); text-align: left; }
.sw-printed b { font: 400 clamp(16px, 2cqw, 26px)/1 var(--sw-print); text-transform: uppercase; overflow-wrap: anywhere; }
.sw-printed small { font: 700 13px/1 var(--sw-cond); letter-spacing: 0.08em; text-transform: uppercase; color: #8a2555; }

/* ── the street: the sprayed tag and the flyer ─────────── */
.sw-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(12px, 3cqw, 48px); padding: clamp(18px, 3cqw, 34px) var(--sw-pad) 10px; overflow-x: clip; }
.sw-spray-wrap { position: relative; justify-self: center; }
.sw-spray { font: 400 clamp(96px, 17cqw, 270px)/0.95 var(--sw-tag); color: var(--sw-pink); transform: rotate(-7deg); padding: 0.1em 0.12em 0.2em;
  text-shadow: 0 0 3px var(--sw-pink), 0 0 18px rgba(255, 61, 147, 0.5), 0 0 60px rgba(255, 61, 147, 0.26);
  -webkit-mask-image: linear-gradient(95deg, #000 var(--reveal), transparent calc(var(--reveal) + 14%)); mask-image: linear-gradient(95deg, #000 var(--reveal), transparent calc(var(--reveal) + 14%)); }
.sw-can { position: absolute; left: 0; top: 20%; width: 38px; height: 86px; pointer-events: none; opacity: 0; }
.sw-can-body { position: absolute; left: 0; right: 0; top: 16px; bottom: 0; border-radius: 10px 10px 7px 7px; background: linear-gradient(90deg, #0d0d0d, #4a4a4a 35%, #1b1b1b 70%, #0d0d0d); box-shadow: inset 0 -28px 0 var(--sw-pink), 0 8px 14px rgba(0, 0, 0, 0.5); }
.sw-can-cap { position: absolute; left: 9px; right: 9px; top: 2px; height: 16px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, #aaa, #eee 45%, #999); }
.sw-can-cap::after { content: ''; position: absolute; right: -8px; top: 3px; width: 10px; height: 5px; border-radius: 2px; background: #222; }
.sw-flyer { position: relative; justify-self: start; max-width: 480px; padding: 30px 30px 26px; background: var(--sw-paper); color: var(--sw-ink); transform: rotate(2deg); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  background-image: linear-gradient(103deg, transparent 31%, rgba(0, 0, 0, 0.05) 32.5%, transparent 34.5%), linear-gradient(-78deg, transparent 56%, rgba(0, 0, 0, 0.06) 57.5%, transparent 59.5%); }
.sw-kicker { font: 700 24px/1 var(--sw-hand); color: #c2185f; transform: rotate(-2deg); }
.sw-flyer-title { margin-top: 10px; font: 400 clamp(38px, 5cqw, 68px)/0.95 var(--sw-print); text-transform: uppercase; letter-spacing: -0.01em; }
.sw-flyer-text { margin-top: 16px; font-size: 17px; line-height: 1.45; max-width: 34ch; }
.sw-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sw-flyer-mine { margin-top: 16px; font: 700 20px/1.2 var(--sw-hand); color: #3d3542; }
.sw-flyer-mine .sw-link { color: #c2185f; }
.sw-flyer-weather { margin-top: 6px; font: 700 20px/1.2 var(--sw-hand); color: #6d6470; }
.sw-flyer-weather:empty, .sw-flyer-mine:empty { display: none; }

/* ── «Свежак» ──────────────────────────────────────────── */
.sw-fresh { padding: 34px var(--sw-pad) 10px; }
.sw-stencil, .sw-drip { font: 400 clamp(46px, 6.4cqw, 96px)/0.9 var(--sw-tag); color: var(--sw-text); text-shadow: 0 0 2px rgba(239, 232, 238, 0.6), 0 0 16px rgba(239, 232, 238, 0.16); transform: rotate(-2deg); }
.sw-stencil { margin-bottom: 24px; }
.sw-collage { display: flex; align-items: flex-start; flex-wrap: wrap; padding: 10px 10px 0 30px; }
.sw-collage .sw-cell { width: clamp(130px, 13cqw, 200px); margin: 0 0 26px -22px; }
.sw-collage .sw-cell.is-big { width: clamp(180px, 19cqw, 290px); }
.sw-collage .sw-cell:nth-child(2n) { margin-top: 36px; }
.sw-collage .sw-cell:nth-child(3n) { margin-top: 12px; }
/* six fresh posters in a normal window, ten when it is maximised on a big screen */
.sw-collage .sw-cell:nth-child(n+7) { display: none; }
@container (min-width: 1600px) {
  .sw-collage .sw-cell:nth-child(n+7) { display: grid; }
  .sw-collage .sw-cell { width: 210px; }
  .sw-collage .sw-cell.is-big { width: 300px; }
  .sw-flyer { max-width: 600px; padding: 38px 40px 32px; }
  .sw-flyer-text { font-size: 19px; }
}

/* ── the wall and its sticky bar ───────────────────────── */
.sw-wallsec { min-height: 100cqh; padding-top: 30px; }
.sw-wallhead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 26px; padding: 0 var(--sw-pad); margin-bottom: 10px; }
.sw-drip.is-small { font-size: 72px; }
.sw-count { padding-bottom: 10px; font: 700 24px/1.2 var(--sw-hand); color: var(--sw-text-2); max-width: 52ch; }
.sw-bar { position: sticky; top: 0; z-index: 5; display: grid; gap: 6px; padding: 10px var(--sw-pad) 14px; margin-bottom: 4px;
  background: linear-gradient(180deg, rgba(31, 25, 34, 0.97) 80%, rgba(31, 25, 34, 0)); }
.sw-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 0 var(--sw-pad); margin-bottom: 26px; }
.sw-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sw-bar-can { margin-left: auto; }
.sw-search { position: relative; display: block; flex: 1 1 260px; max-width: 400px; }
.sw-search .ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--sw-ink); z-index: 1; font-size: 18px; }
.sw-search input { width: 100%; height: 44px; padding: 0 16px 0 42px; border: 0; background: var(--sw-tape); color: var(--sw-ink); font: 700 22px/1 var(--sw-hand); outline: none; clip-path: polygon(0 6%, 2% 0, 100% 0, 99% 30%, 100% 60%, 98% 100%, 0 100%, 1% 60%); }
.sw-search input::placeholder { color: rgba(21, 16, 22, 0.5); }
.sw-search input:focus { background: #f3ead0; }
.sw-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.sw-chips, .sw-moods { display: flex; flex-wrap: wrap; gap: 7px; }
.sw-chip { height: 36px; padding: 0 13px; border: 2px solid rgba(239, 232, 238, 0.38); border-radius: 4px; background: transparent; color: var(--sw-text); font: 700 15px/1 var(--sw-cond); letter-spacing: 0.02em; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out); }
.sw-chip.is-on { background: var(--sw-text); border-color: var(--sw-text); color: var(--sw-ink); }
.sw-mood { height: 34px; padding: 0 12px; border: 2.5px solid #fff; border-radius: 999px; background: #2a2230; color: #fff; font: 700 14px/1 var(--sw-cond); white-space: nowrap; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); transition: transform 140ms var(--ease-out), background-color 160ms ease, color 160ms ease; }
.sw-moods .sw-mood:nth-child(odd) { transform: rotate(-2deg); }
.sw-moods .sw-mood:nth-child(even) { transform: rotate(2deg); }
.sw-mood.is-on { background: var(--sw-pink); color: var(--sw-ink); }
.sw-chip:active, .sw-mood:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .sw-chip:not(.is-on):hover { border-color: var(--sw-text); } .sw-mood:not(.is-on):hover { background: #3a2f41; } }
.sw-selects { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-left: auto; }
/* filter menus: a masking-tape label that opens a notebook slip */
.sw-drop { position: relative; }
.sw-drop-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 32px 0 12px; border: 0; background: var(--sw-tape); color: var(--sw-ink); cursor: pointer; transform: rotate(var(--r, -1deg)); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  clip-path: polygon(0 8%, 3% 0, 100% 0, 98% 35%, 100% 70%, 97% 100%, 0 100%, 2% 60%); transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.sw-drop:nth-child(2) .sw-drop-btn { --r: 1.2deg; }
.sw-drop:nth-child(3) .sw-drop-btn { --r: -0.6deg; }
.sw-drop:nth-child(4) .sw-drop-btn { --r: 1.6deg; }
.sw-drop-btn small { font: 700 11px/1 var(--sw-cond); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(21, 16, 22, 0.55); }
.sw-drop-btn b { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 22px/1 var(--sw-hand); }
.sw-drop-btn i { position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2.5px solid var(--sw-ink); border-bottom: 2.5px solid var(--sw-ink); transform: rotate(45deg); transition: transform 220ms var(--ease-out); }
.sw-drop.is-open .sw-drop-btn i { transform: translateY(4px) rotate(225deg); }
.sw-drop.is-set .sw-drop-btn { background: var(--sw-pink); }
.sw-drop.is-set .sw-drop-btn small { color: rgba(21, 16, 22, 0.7); }
.sw-drop-btn:active { transform: rotate(var(--r, -1deg)) scale(0.96); }
.sw-drop-btn:focus-visible { outline: 3px solid var(--sw-pink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .sw-drop:not(.is-set) .sw-drop-btn:hover { background: #f3ead0; }
  .sw-drop.is-set .sw-drop-btn:hover { background: var(--sw-pink-2); }
}
.sw-drop-list { position: absolute; z-index: 40; top: calc(100% + 10px); left: -6px; min-width: 230px; max-height: 360px; margin: 0; padding: 20px 12px 12px 38px; overflow-y: auto; overscroll-behavior: contain; list-style: none; color: #1d1a23; transform: rotate(-1deg); box-shadow: 0 18px 34px -8px rgba(0, 0, 0, 0.75);
  background: linear-gradient(90deg, transparent 26px, rgba(220, 60, 80, 0.5) 26px 28px, transparent 28px), repeating-linear-gradient(180deg, #f7f4ec 0 33px, rgba(80, 120, 200, 0.28) 33px 34px), #f7f4ec; background-attachment: local;
  clip-path: polygon(0 6px, 6% 0, 14% 5px, 23% 1px, 31% 6px, 40% 0, 49% 5px, 58% 1px, 67% 6px, 76% 0, 85% 5px, 93% 1px, 100% 5px, 100% 100%, 0 100%);
  scrollbar-width: thin; scrollbar-color: #c9bfb4 transparent; }
.sw-drop:nth-child(n+3) .sw-drop-list { left: auto; right: -6px; transform: rotate(1deg); }
.sw-drop-list[hidden] { display: none; }
.sw-drop-list li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 34px; padding: 3px 10px; font: 700 22px/28px var(--sw-hand); white-space: nowrap; cursor: pointer; outline: none; }
.sw-drop-list li span::first-letter { text-transform: uppercase; }
.sw-drop-list li em { font: 700 13px/1 var(--sw-cond); font-style: normal; color: #7a7368; }
.sw-drop-list li:focus-visible, .sw-drop-list li:hover { background: linear-gradient(transparent 52%, rgba(255, 79, 154, 0.42) 52% 88%, transparent 88%); }
.sw-drop-list li[aria-selected="true"] { color: #b3134f; }
.sw-drop-list li[aria-selected="true"]::before { content: '✓'; position: absolute; left: -26px; top: 2px; font: 700 24px/28px var(--sw-hand); color: #e0266e; }
.sw-active { font: 700 20px/1.2 var(--sw-hand); color: var(--sw-text-2); }
.sw-active b { color: var(--sw-pink-2); font-weight: 700; }
.sw-active .sw-link { margin-left: 8px; color: var(--sw-text); }

.sw-wall { display: grid; gap: 44px; padding: 0 var(--sw-pad) 50px; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(112px, 10.6cqw, 180px), 1fr)); gap: 40px 26px; grid-auto-flow: dense; }
.sw-grid .sw-cell.is-big { grid-column: span 2; grid-row: span 2; }
.sw-yeartag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 16px; }
.sw-yeartag b { font: 400 clamp(50px, 6.6cqw, 104px)/0.9 var(--sw-print); color: var(--sw-pink); text-shadow: 0 0 3px var(--sw-pink), 0 0 26px rgba(255, 61, 147, 0.42); transform: rotate(-2deg); }
.sw-yeartag.is-label b { font-size: clamp(32px, 4cqw, 58px); }
.sw-yeartag span { font: 700 26px/1 var(--sw-hand); color: var(--sw-text-2); }
.sw-empty { grid-column: 1 / -1; display: grid; justify-items: start; gap: 14px; padding: 20px 0 40px; font-size: 18px; color: var(--sw-text-2); max-width: 48ch; }
/* «Кинуть банку»: a spray-painted ring around the lucky poster */
/* «Кинуть банку»: the splash of fresh paint and the can that sprays it */
.sw-paint { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sw-paint svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; filter: drop-shadow(0 0 14px rgba(255, 61, 147, 0.45)); }
.sw-paint-stroke { fill: none; stroke: var(--sw-pink); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.86; }
.sw-paint-stroke.is-haze { opacity: 0.22; filter: blur(14px); }
.sw-paint-dot { fill: var(--sw-pink); opacity: 0.85; }
.sw-paint-drip { fill: var(--sw-pink); opacity: 0.94; transform-box: fill-box; transform-origin: top; transform: scaleY(0); }
.sw-paint-can { position: absolute; left: 0; top: 0; width: 40px; height: 90px; margin: -86px 0 0 -6px; transform-origin: 30% 10%; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.55)); }
.sw-paint-can .sw-can-body, .sw-paint-can .sw-can-cap { display: block; }
.sw-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 16px var(--sw-pad) 30px; font: 700 19px/1.2 var(--sw-hand); color: var(--sw-text-3); }

/* ── torn off the wall: the poster and the note ────────── */
.sw-layer { position: absolute; inset: 0; z-index: 20; }
.sw-layer[hidden] { display: none; }
.sw-rip { position: absolute; inset: 0; container-type: size; }
.sw-scrim { position: absolute; inset: 0; background: radial-gradient(60% 70% at 40% 40%, rgba(255, 179, 71, 0.08), transparent 70%), rgba(13, 9, 14, 0.93); }
.sw-rip-body { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: auto minmax(0, 450px); gap: clamp(22px, 4cqw, 60px); align-items: center; justify-content: center; align-content: center; align-content: safe center; padding: 46px 84px; }
.sw-rip-poster { position: relative; margin: 0; height: min(76cqh, 640px); aspect-ratio: 2 / 3; transform: rotate(-1.5deg); }
.sw-rip-poster .sw-paper { box-shadow: 0 30px 60px -16px rgba(0, 0, 0, 0.85), 0 0 90px -24px var(--sw-pink);
  clip-path: polygon(0 1.2%, 4% 0.2%, 8% 1.4%, 13% 0.3%, 18% 1.1%, 24% 0, 29% 1.3%, 35% 0.4%, 41% 1.2%, 47% 0.1%, 53% 1%, 59% 0.2%, 65% 1.4%, 71% 0.3%, 77% 1.1%, 83% 0, 89% 1.2%, 94% 0.3%, 100% 1%, 100% 100%, 0 100%); }
.sw-rip-poster .sw-printed b { font-size: clamp(26px, 4cqw, 44px); }
.sw-note { position: relative; display: grid; gap: 8px; padding: 36px 26px 24px 58px; color: #1d1a23; transform: rotate(1.2deg); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
  background: linear-gradient(90deg, transparent 42px, rgba(220, 60, 80, 0.5) 42px 44px, transparent 44px), repeating-linear-gradient(180deg, #f7f4ec 0 31px, rgba(80, 120, 200, 0.28) 31px 32px), #f7f4ec; }
.sw-note .sw-tape.t-2 { top: -13px; }
.sw-note-no { font: 700 20px/1 var(--sw-hand); color: #7a7368; }
.sw-note-title { font: 700 clamp(32px, 3.3cqw, 46px)/1 var(--sw-hand); color: #111; overflow-wrap: anywhere; }
.sw-note-orig { font: 700 20px/1.1 var(--sw-hand); color: #6b6459; }
.sw-note-line { font: 700 23px/1.3 var(--sw-hand); color: #25306b; }
.sw-note-x { color: #b3134f; }
.sw-note-scores { display: flex; flex-wrap: wrap; gap: 6px 22px; font: 700 23px/1.35 var(--sw-hand); color: #25306b; }
.sw-note-scores .is-rudy { color: #b3134f; }
.sw-note-scores b { font-weight: 700; color: #111; }
.sw-circled { position: relative; display: inline-block; padding: 0 6px; margin-left: 8px; }
.sw-circled svg { position: absolute; inset: -6px -8px; width: calc(100% + 16px); max-width: none; height: calc(100% + 12px); overflow: visible; }
.sw-circled path { fill: none; stroke: #e0266e; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; vector-effect: non-scaling-stroke; }
.sw-nil { margin-left: 8px; color: #8b8390; }
.sw-note-genres:empty { display: none; }
.sw-genre { padding: 0 2px; border: 0; background: linear-gradient(transparent 62%, rgba(255, 79, 154, 0.35) 62%); color: inherit; font: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .sw-genre:hover { background: linear-gradient(transparent 40%, rgba(255, 79, 154, 0.5) 40%); } }
.sw-note-moods { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.sw-mood.is-mini { height: 28px; padding: 0 10px; font-size: 13px; border-width: 2px; background: #2a2230; }
.sw-note-moods .sw-mood:nth-child(odd) { transform: rotate(-2deg); }
.sw-note-moods .sw-mood:nth-child(even) { transform: rotate(1.5deg); }
.sw-note-words { font: 700 25px/1.2 var(--sw-hand); color: #b3134f; }
.sw-note-words span { display: block; font-size: 19px; color: #7a7368; }
.sw-note-desc { font: 400 15px/1.5 var(--sw-cond); color: #34303a; max-height: 11em; overflow: auto; }
.sw-note-desc:empty { display: none; }
.sw-note-log { margin: 0; padding: 0; list-style: none; font: 700 20px/1.3 var(--sw-hand); color: #25306b; }
.sw-note-log a { color: #b3134f; }
.sw-note-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sw-note .sw-btn.sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.sw-mine.is-on { background: var(--sw-pink); color: var(--sw-ink); }
.sw-ctl { position: absolute; z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; background: var(--sw-ink); color: #fff; display: grid; place-items: center; font-size: 20px; transition: transform 140ms var(--ease-out), background-color 140ms ease, color 140ms ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); }
.sw-ctl:active { transform: scale(0.93); }
@media (hover: hover) and (pointer: fine) { .sw-ctl:hover { background: var(--sw-pink); color: var(--sw-ink); } }
.sw-x { top: 14px; right: 18px; }
.sw-prev, .sw-next { top: 50%; margin-top: -23px; }
.sw-prev { left: 16px; }
.sw-next { right: 18px; }

/* the Карточка window */
.sw-card .sw-scroll { container-type: size; }
.sw-card .sw-rip-body { position: relative; inset: auto; min-height: 100%; overflow: visible; padding: 34px 30px 40px; }
.sw-card .sw-rip-poster { height: min(78cqh, 600px); }

/* ── «Значки»: stickers on an electrical box ───────────── */
.sw-panel { padding: 22px 0 10px; }
.sw-box { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 20px; margin: 16px var(--sw-pad) 20px; padding: 70px clamp(16px, 3cqw, 50px) 50px; border-radius: 10px;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 6px), linear-gradient(135deg, #5f5a66, #47424e 50%, #57525e); box-shadow: inset 0 0 0 4px #34303a, inset 0 0 50px rgba(0, 0, 0, 0.35), 0 24px 50px rgba(0, 0, 0, 0.5); }
.sw-bolt { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ddd, #444); }
.sw-bolt.b1 { left: 16px; top: 16px; } .sw-bolt.b2 { right: 16px; top: 16px; } .sw-bolt.b3 { left: 16px; bottom: 16px; } .sw-bolt.b4 { right: 16px; bottom: 16px; }
.sw-warn { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); padding: 6px 14px; background: #ffd83a; color: var(--sw-ink); font: 700 15px/1 var(--sw-cond); text-transform: uppercase; letter-spacing: 0.06em; border: 3px solid var(--sw-ink); white-space: nowrap; }
.sw-badge { --b: #3a3440; --bt: #fff; position: relative; display: flex; align-items: center; gap: 12px; max-width: 290px; padding: 14px 20px 14px 14px; background: var(--b); color: var(--bt); border: 5px solid #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45); transform: rotate(var(--tilt, 0deg)); overflow: hidden; transition: transform 220ms var(--ease-out), box-shadow 220ms ease; }
.sw-badge.c-pink { --b: var(--sw-pink); --bt: var(--sw-ink); }
.sw-badge.c-cream { --b: var(--sw-paper); --bt: var(--sw-ink); }
.sw-badge.c-violet { --b: #8d6cff; --bt: #fff; }
.sw-badge.c-yellow { --b: #ffd83a; --bt: var(--sw-ink); }
.sw-badge.c-mint { --b: #7ee2b4; --bt: var(--sw-ink); }
.sw-badge.c-white { --b: #ffffff; --bt: var(--sw-ink); }
.sw-badge.s-round { flex-direction: column; justify-content: center; width: 196px; height: 196px; padding: 16px; border-radius: 50%; text-align: center; gap: 3px; }
.sw-badge.s-pill { border-radius: 999px; padding-right: 26px; }
.sw-badge.s-rect { border-radius: 14px; }
/* not earned yet: a dashed outline of where the sticker will go */
.sw-badge:not(.is-done) { --b: rgba(20, 16, 22, 0.35); --bt: rgba(239, 232, 238, 0.72); border: 3px dashed rgba(239, 232, 238, 0.4); box-shadow: none; }
.sw-badge-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, 0.16); font-size: 26px; line-height: 1; }
/* v100: drawn stickers instead of emoji — a white die-cut edge and a soft shadow */
.sw-badge-ico:has(.badge-art) { width: 58px; height: 58px; background: none; }
.sw-badge.s-round .sw-badge-ico:has(.badge-art) { width: 48px; height: 48px; }
/* v101: a round sticker keeps everything inside the circle */
.sw-badge.s-round .sw-badge-text { justify-items: center; max-width: 100%; }
.sw-badge.s-round .sw-badge-text b { font-size: 16px; }
.sw-badge.s-round .sw-badge-text span { font-size: 12.5px; line-height: 1.15; }
.sw-badge.s-round .sw-badge-text small { font-size: 15px; }
.sw-badge-ico .badge-art { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35)); }
.sw-badge:not(.is-done) .sw-badge-ico { filter: grayscale(1); opacity: 0.55; }
.sw-badge-text { display: grid; gap: 1px; min-width: 0; }
.sw-badge-text b { font: 400 18px/1.05 var(--sw-print); text-transform: uppercase; }
.sw-badge-text span { font-size: 14px; line-height: 1.25; opacity: 0.92; }
.sw-badge-text small { font: 700 17px/1.1 var(--sw-hand); opacity: 0.8; }
.sw-badge-bar { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 5px; border-radius: 3px; background: rgba(239, 232, 238, 0.14); overflow: hidden; }
/* the progress line goes under the numbers, not over them */
.sw-badge.s-round .sw-badge-bar { position: relative; left: auto; right: auto; bottom: auto; flex: none; width: 56%; margin-top: 3px; }
.sw-badge-bar s { display: block; height: 100%; background: var(--sw-pink); transform-origin: left; transform: scaleX(var(--p, 0)); text-decoration: none; }
.sw-badge .sw-curl { width: 24%; background: linear-gradient(315deg, #4d4854 0 49%, rgba(0, 0, 0, 0.35) 49.5%, #e6e6e6 52%, #fff 70%, #ccc 100%); }
@media (hover: hover) and (pointer: fine) {
  .sw-badge.is-done:hover { transform: rotate(calc(var(--tilt, 0deg) * 0.3)) translateY(-5px) scale(1.04); box-shadow: 0 14px 24px rgba(0, 0, 0, 0.5); }
  .sw-badge.is-done:hover .sw-curl { transform: scale(1); }
}

/* ── «Календарь»: a pasted schedule, days circled in marker ── */
.sw-sched { position: relative; margin: 20px var(--sw-pad) 24px; padding: 30px clamp(16px, 2.6cqw, 34px) 22px; background: var(--sw-paper); color: var(--sw-ink); transform: rotate(var(--tilt, 0deg)); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  background-image: linear-gradient(103deg, transparent 31%, rgba(0, 0, 0, 0.04) 32.5%, transparent 34.5%), linear-gradient(-78deg, transparent 56%, rgba(0, 0, 0, 0.05) 57.5%, transparent 59.5%); }
.sw-sched .sw-tape, .sw-fight .sw-tape { width: 150px; }
.sw-fight .sw-tape.t-2 { left: calc(50% - 75px); }
.sw-sched .sw-tape.t-1 { left: -34px; top: 10px; }
.sw-sched .sw-tape.t-3 { right: -34px; top: 10px; }
.sw-sched-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.sw-sched-head h3 { font: 400 clamp(26px, 3.6cqw, 48px)/1 var(--sw-print); text-transform: uppercase; }
.sw-years { display: flex; align-items: center; gap: 12px; }
.sw-years b { font: 400 34px/1 var(--sw-print); color: #c2185f; }
.sw-heat-scroll { overflow-x: auto; padding-bottom: 6px; }
.sw-heat { display: grid; grid-template-columns: 26px repeat(var(--weeks, 53), minmax(11px, 1fr)); grid-template-rows: 18px repeat(7, auto); gap: 4px; min-width: 700px; grid-auto-flow: row; }
.sw-hm { font: 700 15px/18px var(--sw-hand); color: #6d6470; white-space: nowrap; overflow: visible; }
.sw-hw { font: 700 13px/1 var(--sw-cond); color: #8a8190; align-self: center; }
.sw-hd { display: block; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: rgba(21, 16, 22, 0.08); }
.sw-hd.is-out { background: transparent; }
button.sw-hd { cursor: pointer; background: var(--sw-pink); box-shadow: 0 0 0 2px var(--sw-paper), 0 0 0 3px rgba(194, 24, 95, 0.4); transition: transform 140ms var(--ease-out); }
.sw-hd.l1 { opacity: 0.45; }
.sw-hd.l2 { opacity: 0.7; }
.sw-hd.l3 { opacity: 0.9; }
.sw-hd.l4 { opacity: 1; box-shadow: 0 0 0 2px var(--sw-paper), 0 0 0 4px #c2185f; }
@media (hover: hover) and (pointer: fine) { button.sw-hd:hover { transform: scale(1.5); opacity: 1; } }
.sw-legend { margin-top: 14px; font: 700 20px/1.25 var(--sw-hand); color: #5b5360; }

/* ── «Спор»: a fight poster, Rudy against Кинопоиск ────── */
.sw-fight { position: relative; margin: 20px var(--sw-pad) 24px; padding: 34px clamp(18px, 3cqw, 40px) 26px; background: var(--sw-pink); color: var(--sw-ink); transform: rotate(var(--tilt, 0deg)); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55); overflow: visible; }
.sw-fight-halftone { position: absolute; right: 0; bottom: 0; width: 60%; height: 60%; pointer-events: none; opacity: 0.3; background: radial-gradient(circle, var(--sw-ink) 1.6px, transparent 2px) 0 0 / 10px 10px; -webkit-mask: linear-gradient(135deg, transparent 20%, #000); mask: linear-gradient(135deg, transparent 20%, #000); }
.sw-fight-top { position: relative; font: 700 24px/1 var(--sw-hand); }
.sw-fight-title { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 18px; margin: 10px 0 20px; font: 400 clamp(40px, 6.4cqw, 96px)/0.92 var(--sw-print); text-transform: uppercase; letter-spacing: -0.01em; }
.sw-fight-title em { font: 700 0.6em/1 var(--sw-hand); font-style: normal; color: #fff; text-transform: none; transform: rotate(-6deg); }
.sw-vs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 34px; }
.sw-vs-col h4 { margin-bottom: 8px; font: 400 22px/1 var(--sw-print); text-transform: uppercase; }
.sw-vs-col ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; background: var(--sw-paper); padding: 8px 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); }
.sw-vs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: baseline; gap: 12px; width: 100%; padding: 5px 2px; border: 0; border-bottom: 1px dashed rgba(21, 16, 22, 0.2); background: none; color: var(--sw-ink); text-align: left; cursor: pointer; }
.sw-vs-col li:last-child .sw-vs-row { border-bottom: 0; }
.sw-vs-title { font: 700 16px/1.2 var(--sw-cond); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-vs-a { font: 700 22px/1 var(--sw-hand); color: #b3134f; }
.sw-vs-b { font: 700 20px/1 var(--sw-hand); color: #6d6470; text-decoration-color: #b3134f; text-decoration-thickness: 2px; }
.sw-vs-d { min-width: 3.2em; font: 400 15px/1 var(--sw-print); text-align: right; }
.sw-vs-none { padding: 6px 2px; font: 700 20px/1 var(--sw-hand); color: #6d6470; }
@media (hover: hover) and (pointer: fine) { .sw-vs-row:hover .sw-vs-title { text-decoration: underline; text-decoration-color: #b3134f; text-decoration-thickness: 2px; } }
.sw-fight-foot { position: relative; margin-top: 16px; font: 700 20px/1.2 var(--sw-hand); }

/* ── narrow windows and phones ─────────────────────────── */
@container (max-width: 1000px) {
  .sw-bar-can { margin-left: 0; }
  .sw-selects { margin-left: 0; }
}
@container (max-width: 820px) {
  .sw-rip-body { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 70px 22px 80px; }
  .sw-rip-poster { height: min(56cqh, 480px); }
  .sw-note { width: min(100%, 520px); }
  .sw-prev, .sw-next { top: auto; bottom: 14px; margin: 0; }
  .sw-card .sw-rip-body { padding: 26px 18px 36px; }
  .sw-card .sw-rip-poster { height: min(62cqh, 460px); }
}
@container (max-width: 760px) {
  .sw-top { padding-top: 12px; }
  .sw-tapes { flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 8px; margin: -4px 0 -8px; scrollbar-width: none; }
  .sw-tapes button { flex: none; font-size: 19px; }
  .sw-onair { display: none; }
  .sw-hero { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 8px; }
  .sw-spray { font-size: 30cqw; }
  .sw-flyer { padding: 24px 20px 22px; transform: rotate(1deg); }
  .sw-collage { padding-left: 22px; }
  .sw-collage .sw-cell { width: 38cqw; margin-left: -16px; }
  .sw-collage .sw-cell.is-big { width: 52cqw; }
  .sw-bar { position: static; background: none; }
  .sw-filters { gap: 8px; }
  .sw-chips, .sw-moods { flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; width: 100%; }
  .sw-chips > *, .sw-moods > * { flex: none; }
  .sw-search { flex-basis: 100%; max-width: none; }
  .sw-selects { width: 100%; }
  .sw-drop { flex: 1 1 40%; }
  .sw-drop-btn { width: 100%; }
  .sw-drop-btn b { max-width: none; }
  .sw-drop-list, .sw-drop:nth-child(n+3) .sw-drop-list { left: 0; right: auto; min-width: 100%; }
  .sw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .sw-grid .sw-cell.is-big { grid-row: span 1; grid-column: span 2; width: 72%; justify-self: center; }
  .sw-count { font-size: 21px; }
  .sw-note { padding: 32px 18px 22px 50px; background: linear-gradient(90deg, transparent 34px, rgba(220, 60, 80, 0.5) 34px 36px, transparent 36px), repeating-linear-gradient(180deg, #f7f4ec 0 31px, rgba(80, 120, 200, 0.28) 31px 32px), #f7f4ec; }
  .sw-x { top: 10px; right: 10px; }
  .sw-box { padding: 64px 12px 36px; gap: 16px 12px; }
  .sw-badge { max-width: 100%; }
  .sw-badge.s-round { width: 176px; height: 176px; padding: 14px; gap: 2px; }
  .sw-badge.s-round .sw-badge-ico:has(.badge-art) { width: 42px; height: 42px; }
  .sw-badge.s-round .sw-badge-text b { font-size: 15px; }
  .sw-badge.s-round .sw-badge-text span { font-size: 12px; }
  .sw-badge.s-round .sw-badge-text small { font-size: 14px; }
  .sw-vs { grid-template-columns: minmax(0, 1fr); }
  .sw-foot { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-bill, .sw-curl, .sw-badge, .sw-tapes button, .sw-btn { transition: none; }
}

/* ═══ v73 ═══ */
/* the filter tapes: words fit, descenders are not cut */
.sw-drop-btn b { max-width: 210px; line-height: 1.3; padding-right: 3px; }
/* the order can be flipped: a small tape with an arrow */
.sw-dir { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border: 0; background: var(--sw-tape); color: var(--sw-ink); font: 700 21px/1.3 var(--sw-hand); white-space: nowrap; cursor: pointer; transform: rotate(-1.4deg); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35); transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.sw-dir i { width: 9px; height: 9px; border-right: 2.5px solid var(--sw-ink); border-bottom: 2.5px solid var(--sw-ink); transform: translateY(-2px) rotate(45deg); transition: transform 220ms var(--ease-out); }
.sw-dir.is-asc i { transform: translateY(3px) rotate(225deg); }
.sw-dir:active { transform: rotate(-1.4deg) scale(0.96); }
.sw-dir:focus-visible { outline: 3px solid var(--sw-pink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .sw-dir:hover { background: #f3ead0; } }
/* «Мне повезёт»: the random pick, loud and clear */
.sw-lucky-ico { display: inline-block; font-size: 22px; line-height: 1; }
.sw-bar-can.sw-lucky { height: 52px; padding: 0 18px 0 14px; gap: 10px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 79, 154, 0.45); }
.sw-lucky-text { display: grid; gap: 3px; text-align: left; }
.sw-lucky-text b { font: 700 17px/1 var(--sw-cond); }
.sw-lucky-text small { font: 700 12px/1 var(--sw-cond); opacity: 0.72; }
@media (prefers-reduced-motion: no-preference) {
  .sw-bar-can.sw-lucky .sw-lucky-ico { animation: sw-dice 7s ease-in-out 2s infinite; }
  @keyframes sw-dice { 0%, 88%, 100% { transform: none; } 90% { transform: rotate(-22deg) scale(1.18); } 93% { transform: rotate(20deg) scale(1.18); } 96% { transform: rotate(-8deg); } }
}
/* «Ещё раз» on top of a random pick */
.sw-again { position: absolute; z-index: 3; top: 14px; left: 0; right: 0; width: max-content; margin-inline: auto; height: 50px; padding: 0 20px; font-size: 17px; transform: rotate(-2deg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 79, 154, 0.5); }
.sw-again span { font-size: 22px; }
.sw-again:active { transform: rotate(-2deg) scale(0.95); }

/* ── v75: Rudy's polaroid taped to a poster ─────────────── */
/* Sizes inside are in cqi of the polaroid itself, so it looks the same on a
   wall tile and on a ripped-off poster; the caption hides when too small. */
.sw-pol { position: absolute; z-index: 3; width: 38%; container-type: inline-size; pointer-events: none; transform: rotate(var(--pr, -6deg)); transition: transform 260ms var(--ease-out); }
.sw-pol.c-br { right: -5%; bottom: 3%; --pr: -6deg; }
.sw-pol.c-bl { left: -5%; bottom: 3%; --pr: 6deg; }
.sw-pol.c-tr { right: -5%; top: 6%; --pr: 7deg; }
.sw-pol.c-tl { left: -5%; top: 6%; --pr: -7deg; }
.sw-pol-in { position: relative; display: block; padding: 6cqi 6cqi 0; background: #fbf8f1; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3); }
.sw-pol-in::before { content: ''; position: absolute; left: 27cqi; top: -5cqi; width: 46cqi; height: 12cqi; background: rgba(233, 222, 176, 0.82); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transform: rotate(-4deg); }
.sw-pol-in img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #d9d2c6; -webkit-user-select: none; user-select: none; }
.sw-pol-in b { display: block; height: 22cqi; overflow: hidden; color: #e0457b; font: 700 11cqi/2 var(--sw-hand); text-align: center; white-space: nowrap; }
@container (max-width: 90px) { .sw-pol-in b { font-size: 0; } }
.sw-bill:has(.sw-pol.c-br) .sw-curl { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sw-bill:hover .sw-pol { transform: rotate(calc(var(--pr, -6deg) * 1.8)) translateY(-3%); }
}
@media (prefers-reduced-motion: reduce) { .sw-pol { transition: none; } }

/* ═══ v83: «Марафон Marvel» ═══ */
/* the red sticker next to «Мне повезёт» */
.sw-bar-mv { margin-left: auto; height: 52px; padding: 0 16px 0 10px; gap: 10px; border-radius: 12px; background: #e62429; color: #fff; transform: rotate(1.5deg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), 0 0 24px rgba(230, 36, 41, 0.4); }
.sw-bar-mv + .sw-bar-can { margin-left: 0; }
.sw-bar-mv-logo { display: grid; place-items: center; height: 30px; padding: 1px 7px 0; border-radius: 3px; background: #fff; color: #e62429; font: 400 15px/1 var(--sw-print); text-transform: uppercase; letter-spacing: -0.02em; }
.sw-bar-mv:active:not(:disabled) { transform: rotate(1.5deg) scale(0.96); }
@container (max-width: 1000px) { .sw-bar-mv { margin-left: 0; } }

/* the panel keeps a readable width and sits in the middle of a wide window */
.sw-panel.sw-mv { max-width: 1440px; margin-inline: auto; }
/* the poster on top: Rudy's score and a bar per phase */
.sw-mv-sheet { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px clamp(22px, 4cqw, 60px); margin: 18px var(--sw-pad) 26px; padding: 30px clamp(18px, 3cqw, 42px) 26px; background: #e62429; color: #fff; transform: rotate(var(--tilt, 0deg)); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55); }
.sw-mv-sheet .sw-tape { width: 140px; }
.sw-mv-sheet .sw-tape.t-1 { left: -30px; top: 8px; }
.sw-mv-sheet .sw-tape.t-3 { right: -30px; top: 8px; }
.sw-mv-dots { position: absolute; right: 0; bottom: 0; width: 55%; height: 75%; pointer-events: none; opacity: 0.2; background: radial-gradient(circle, #fff 1.6px, transparent 2px) 0 0 / 10px 10px; -webkit-mask: linear-gradient(135deg, transparent 25%, #000); mask: linear-gradient(135deg, transparent 25%, #000); }
.sw-mv-score, .sw-mv-meter { position: relative; }
.sw-mv-kicker { font: 700 26px/1 var(--sw-hand); color: #ffe1e3; transform: rotate(-3deg); }
.sw-mv-big { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.sw-mv-big b { font: 400 clamp(68px, 9cqw, 120px)/0.9 var(--sw-print); font-variant-numeric: tabular-nums; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18); }
.sw-mv-big span { font: 400 clamp(24px, 2.8cqw, 36px)/1 var(--sw-print); }
.sw-mv-sub { margin-top: 8px; font: 700 14px/1 var(--sw-cond); letter-spacing: 0.08em; text-transform: uppercase; }
.sw-mv-phases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sw-mv-phases li { display: grid; gap: 5px; min-width: 0; }
.sw-mv-phases i { display: block; height: 16px; border-radius: 3px; overflow: hidden; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.sw-mv-phases s { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); text-decoration: none; }
.sw-mv-phases b { font: 400 14px/1 var(--sw-print); }
.sw-mv-phases b::before { content: 'фаза '; font: 700 12px/1 var(--sw-cond); text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.sw-mv-phases small { font: 700 13px/1 var(--sw-cond); opacity: 0.85; }
.sw-mv-next { margin-top: 18px; font: 700 23px/1.25 var(--sw-hand); }
.sw-mv-next .sw-link { color: #fff; text-decoration-color: #fff; font-weight: 700; }
.sw-mv-me { margin-top: 6px; font: 700 21px/1.25 var(--sw-hand); color: #ffe1e3; }
.sw-mv-me b { color: #fff; font-size: 1.15em; }

/* filters of the panel */
.sw-mv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 0 var(--sw-pad); margin-bottom: 16px; }
.sw-chip em { margin-left: 3px; font-style: normal; opacity: 0.6; }
.sw-mv-back { margin: 0 0 0 auto; font-size: 25px; }
@media (hover: hover) and (pointer: fine) { .sw-mv-back:hover { transform: rotate(-2deg) translateX(-4px); } }

/* the list: a timeline of numbered circles, phase by phase */
.sw-mv-list { display: grid; gap: 26px; padding: 0 var(--sw-pad) 20px; }
.sw-mv-ph { display: flex; align-items: baseline; gap: 6px 14px; margin-bottom: 6px; }
.sw-mv-ph h3 { font: 400 clamp(20px, 2.2cqw, 26px)/1 var(--sw-print); text-transform: uppercase; color: var(--sw-pink); text-shadow: 0 0 2px var(--sw-pink), 0 0 18px rgba(255, 61, 147, 0.4); white-space: nowrap; }
.sw-mv-years { font: 700 22px/1 var(--sw-hand); color: var(--sw-text-2); white-space: nowrap; }
.sw-mv-rule { flex: 1; min-width: 20px; align-self: center; border-top: 2px dashed rgba(239, 232, 238, 0.18); }
.sw-mv-ph-n { font: 400 18px/1 var(--sw-print); color: var(--sw-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sw-mv-phase.is-complete .sw-mv-ph-n { color: var(--sw-pink); }
.sw-mv-phase.is-complete .sw-mv-ph-n::after { content: ' ✓'; }
.sw-mv-ph-note { margin: -2px 0 6px; font: 700 20px/1.2 var(--sw-hand); color: var(--sw-text-3); }
.sw-mv-rows { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.sw-mv-rows::before { content: ''; position: absolute; left: 27px; top: 22px; bottom: 22px; width: 2px; background: rgba(239, 232, 238, 0.13); }
.sw-mv-row { position: relative; display: grid; grid-template-columns: 36px 50px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px; padding: 9px 12px 9px 10px; border-radius: 12px; transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .sw-mv-row:hover { background: rgba(239, 232, 238, 0.045); } }
/* Rudy's watched titles are joined by a pink line */
.sw-mv-row.is-done::before { content: ''; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: var(--sw-pink); box-shadow: 0 0 8px rgba(255, 61, 147, 0.6); }
.sw-mv-row.is-done:first-child::before, .sw-mv-row:not(.is-done) + .sw-mv-row.is-done::before { top: 50%; }
.sw-mv-row.is-done:last-child::before, .sw-mv-row.is-done:has(+ .sw-mv-row:not(.is-done))::before { bottom: 50%; }
.sw-mv-row.is-done:first-child:last-child::before { display: none; }
.sw-mv-no { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(239, 232, 238, 0.3); background: #1d1720; font: 700 14px/1 var(--sw-cond); color: var(--sw-text-2); font-variant-numeric: tabular-nums; }
.sw-mv-row.is-done .sw-mv-no { border-color: var(--sw-pink); background: var(--sw-pink); color: var(--sw-ink); box-shadow: 0 0 12px rgba(255, 61, 147, 0.45); }
.sw-mv-row.is-next .sw-mv-no { border-color: var(--sw-pink); color: var(--sw-pink); box-shadow: 0 0 0 4px rgba(255, 79, 154, 0.16), 0 0 18px rgba(255, 79, 154, 0.5); }
.sw-mv-row.is-soon .sw-mv-no { border-style: dashed; }
@media (prefers-reduced-motion: no-preference) {
  .sw-mv-row.is-next .sw-mv-no { animation: sw-mv-next 2.4s ease-in-out infinite; }
  @keyframes sw-mv-next { 50% { box-shadow: 0 0 0 7px rgba(255, 79, 154, 0.08), 0 0 26px rgba(255, 79, 154, 0.7); } }
}
/* a tiny poster: in colour once Rudy watched it, faded until then */
.sw-mv-thumb { position: relative; display: block; width: 50px; aspect-ratio: 2 / 3; padding: 0; border: 0; overflow: hidden; background: var(--sw-paper); transform: rotate(var(--tilt, 0deg)); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); transition: transform 200ms var(--ease-out), filter 200ms ease; }
.sw-mv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-select: none; user-select: none; }
.sw-mv-row:not(.is-done) .sw-mv-thumb { filter: grayscale(0.85) brightness(0.72); }
button.sw-mv-thumb { cursor: pointer; }
button.sw-mv-thumb:focus-visible { outline: 3px solid var(--sw-pink); outline-offset: 2px; }
.sw-mv-thumb.is-gone { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .sw-mv-row:hover .sw-mv-thumb { transform: rotate(0deg) scale(1.08); }
  .sw-mv-row:not(.is-done):hover .sw-mv-thumb { filter: grayscale(0.4) brightness(0.9); }
}
.sw-mv-blank { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 6px 4px 5px; background: linear-gradient(#e62429 0 18%, transparent 18%), repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 79, 154, 0.1) 6px 12px), var(--sw-paper); color: var(--sw-ink); text-align: left; }
.sw-mv-blank b { margin-top: 12px; font: 400 8px/1.05 var(--sw-print); text-transform: uppercase; overflow-wrap: anywhere; }
.sw-mv-blank small { font: 700 10px/1 var(--sw-cond); color: #8a2555; }
.sw-mv-text { display: grid; gap: 3px; min-width: 0; }
.sw-mv-title { justify-self: start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--sw-text); font: 700 18px/1.2 var(--sw-cond); text-align: left; text-decoration: none; overflow-wrap: anywhere; }
button.sw-mv-title { cursor: pointer; }
.sw-mv-title small { margin-left: 5px; font-size: 13px; color: var(--sw-text-3); }
.sw-mv-row:not(.is-done) .sw-mv-title { color: rgba(239, 232, 238, 0.8); }
@media (hover: hover) and (pointer: fine) { button.sw-mv-title:hover, a.sw-mv-title:hover { text-decoration: underline; text-decoration-color: var(--sw-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; } }
.sw-mv-meta { font: 400 14px/1.3 var(--sw-cond); color: var(--sw-text-3); }
.sw-mv-line { display: inline-block; padding: 2px 6px 1px; border-radius: 4px; font: 700 11px/1.2 var(--sw-cond); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; }
.sw-mv-line.is-xmen { background: rgba(255, 216, 58, 0.16); color: #ffd83a; }
.sw-mv-line.is-sony { background: rgba(120, 170, 255, 0.16); color: #9cc0ff; }
.sw-mv-rudy { font: 700 19px/1.15 var(--sw-hand); color: var(--sw-pink-2); }
.sw-mv-rudy i { font-style: normal; }
.sw-mv-rudy em { font-style: normal; color: #fff; }
.sw-mv-rudy.is-not { color: var(--sw-text-3); }
.sw-mv-rudy.is-not b { color: var(--sw-pink-2); }
.sw-mv-rudy.is-soon { color: #ffd83a; }
.sw-mv-kind { padding: 5px 8px 4px; border: 1.5px solid rgba(239, 232, 238, 0.24); border-radius: 5px; font: 700 11px/1 var(--sw-cond); letter-spacing: 0.09em; text-transform: uppercase; color: var(--sw-text-2); white-space: nowrap; }
.sw-mv-kind.is-inline { display: none; padding: 0; border: 0; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
/* the visitor's own tick */
.sw-mv-mine { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px 0 6px; border: 2px dashed rgba(239, 232, 238, 0.32); border-radius: 999px; background: transparent; color: var(--sw-text-2); font: 700 14px/1 var(--sw-cond); white-space: nowrap; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out); }
.sw-mv-mine.is-off { width: 36px; padding: 0; border-color: transparent; cursor: default; }
.sw-mv-mine i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; font: 700 13px/1 var(--sw-cond); font-style: normal; }
.sw-mv-mine[aria-pressed="true"] { border: 2px solid var(--sw-paper); background: var(--sw-paper); color: var(--sw-ink); }
.sw-mv-mine[aria-pressed="true"] i { border-color: var(--sw-ink); background: var(--sw-ink); color: var(--sw-paper); }
.sw-mv-mine[aria-pressed="true"] i::after { content: '✓'; }
.sw-mv-mine:active { transform: scale(0.94); }
.sw-mv-mine:focus-visible { outline: 3px solid var(--sw-pink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sw-mv-mine:not([aria-pressed="true"]):hover { border-style: solid; border-color: var(--sw-text-2); color: var(--sw-text); } }
.sw-mv-hint { position: absolute; right: -4px; bottom: calc(100% + 3px); font: 700 21px/1 var(--sw-hand); color: var(--sw-pink-2); white-space: nowrap; pointer-events: none; transform: rotate(-3deg); }
@media (prefers-reduced-motion: no-preference) {
  .sw-mv-hint { animation: sw-mv-hint 1.6s ease-in-out infinite; }
  @keyframes sw-mv-hint { 50% { transform: translateY(-4px) rotate(-3deg); } }
}
.sw-mv-legend { padding: 6px var(--sw-pad) 20px; font: 700 20px/1.35 var(--sw-hand); color: var(--sw-text-3); }
.sw-mv-key { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 4px 0 0; border-radius: 50%; font: 700 13px/1 var(--sw-cond); vertical-align: 2px; }
.sw-mv-key.is-rudy { background: var(--sw-pink); color: var(--sw-ink); }
.sw-mv-key.is-me { margin-left: 10px; background: var(--sw-paper); color: var(--sw-ink); }

@container (max-width: 860px) {
  .sw-mv-sheet { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 760px) {
  .sw-mv-sheet { margin: 14px 12px 22px; padding: 26px 18px 22px; }
  .sw-mv-phases { gap: 6px; }
  .sw-mv-phases b::before { content: none; }
  .sw-mv-back { margin-left: 0; }
  .sw-mv-bar .sw-chips { width: 100%; }
  .sw-mv-ph { flex-wrap: wrap; }
  .sw-mv-ph h3 { font-size: 21px; }
  .sw-mv-rule { display: none; }
  .sw-mv-ph-n { margin-left: auto; }
  /* the bar is a grid: without this its row grew to the chips' full width and the search and «Мне повезёт» went off the screen */
  .sw-bar-row { min-width: 0; }
  /* «Марафон» and «Мне повезёт» share one row */
  .sw-bar-mv, .sw-bar-can.sw-lucky { flex: 1 1 calc(50% - 7px); min-width: 0; justify-content: center; gap: 8px; padding: 0 10px; }
  .sw-bar-mv-logo { height: 24px; padding: 1px 5px 0; font-size: 12px; }
  .sw-bar-mv .sw-lucky-text b, .sw-bar-can.sw-lucky .sw-lucky-text b { font-size: 15px; }
  .sw-mv-rows::before, .sw-mv-row.is-done::before { left: 19px; }
  .sw-mv-row { grid-template-columns: 22px 40px minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 4px 8px 8px; }
  .sw-mv-no { width: 22px; height: 22px; border-width: 1.5px; font-size: 11px; }
  .sw-mv-thumb { width: 40px; }
  .sw-mv-title { font-size: 16px; }
  .sw-mv-rudy { font-size: 18px; }
  .sw-mv-kind { display: none; }
  .sw-mv-kind.is-inline { display: inline; }
  .sw-mv-mine { width: 36px; padding: 0; justify-content: center; }
  .sw-mv-mine span { display: none; }
  .sw-mv-hint { right: 0; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .sw-mv-thumb, .sw-mv-mine, .sw-mv-row { transition: none; } }

/* ═══ v84 ═══ */
/* a rewatched title: ×2 next to the date under the poster */
.sw-scrawl .sw-x2 { font-weight: 700; color: var(--sw-pink); }

/* ═══ v85: was the stream recorded ═══ */
/* a little stamp at the foot of the poster; it moves aside for Rudy's polaroid */
.sw-recstamp { position: absolute; z-index: 4; left: 6%; bottom: 5%; max-width: 88%; padding: 3px 7px 2px; border-radius: 3px; font: 700 10px/1.2 var(--sw-cond); letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transform: rotate(-3deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); }
.sw-recstamp.is-yes { background: var(--sw-pink); color: var(--sw-ink); }
.sw-recstamp.is-no { background: rgba(21, 16, 22, 0.86); color: #d9cfdb; border: 1.5px dashed rgba(239, 232, 238, 0.55); }
.sw-bill:has(.sw-pol.c-bl) .sw-recstamp { left: auto; right: 6%; transform: rotate(3deg); }
.sw-cell.is-big .sw-recstamp { font-size: 12px; padding: 4px 9px 3px; }
.sw-note-rec { margin: 2px 0; font: 700 22px/1.25 var(--sw-hand); color: #6b6459; }
.sw-note-rec.is-no { color: #6b6459; }
.sw-rec-btn { padding: 0; border: 0; background: linear-gradient(transparent 58%, rgba(255, 79, 154, 0.38) 58%); color: #b3134f; font: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .sw-rec-btn:hover { background: linear-gradient(transparent 38%, rgba(255, 79, 154, 0.5) 38%); } }

/* ═══ v102: drawn pictures of the themes instead of emoji ═══ */
/* a thin white die-cut edge, like the badges' stickers */
.mood-art { display: inline-block; flex: none; max-width: none; overflow: visible; filter: drop-shadow(1.1px 0 0 #fff) drop-shadow(-1.1px 0 0 #fff) drop-shadow(0 1.1px 0 #fff) drop-shadow(0 -1.1px 0 #fff) drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.3)); }
.sw-drop-list li .mood-art { width: 27px; height: 27px; margin: 0 9px 0 -2px; vertical-align: -7px; }
.sw-drop-btn b .mood-art { width: 24px; height: 24px; margin-right: 7px; vertical-align: -5px; }
.sw-mood.is-mini:has(.mood-art) { display: inline-flex; align-items: center; gap: 5px; padding-left: 5px; }
.sw-mood .mood-art { width: 20px; height: 20px; }
.sw-note-moods .sw-mood.is-mini:has(.mood-art) { height: 32px; padding: 0 12px 0 5px; gap: 6px; font-size: 14px; }
.sw-note-moods .sw-mood .mood-art { width: 24px; height: 24px; }