/* What's new: Screens and Changelog. The viewer comes from updates.css, the frame and rows from roadmap.css.
   One rule per selector. Phone overrides live in the single @media block at the end. */

/* Compact header and tabs (one row: Screens, Changelog, release card) */
.head { padding-top: 4px !important; padding-bottom: 2px !important; }
.head h1 { font-size: 22px !important; }
.head .note { font-size: 11px !important; margin: 0 !important; }
.wn-tabs { display: grid !important; grid-template-columns: 34px 1fr 1fr auto !important; align-items: stretch; margin: 4px 0 !important; }
.wn-tabs button { padding: 2px 4px !important; }
.wn-tabs .stage { font-size: 10px !important; }
.wn-tabs .rel { font-size: 10px !important; }
.wn-tabs .rel:empty { display: none !important; }
.wn-tabs .rel-card { margin: 0; border-width: 0 0 0 1.5px; box-shadow: none; padding: 0 8px; }
.chip.c-blue { --chip: var(--blue); }

/* Empty states */
.tour-soon { position: absolute; inset: 0; display: grid; place-items: center; font: 11px "FK Raster", monospace; text-transform: uppercase; letter-spacing: var(--pixel-tracking); color: var(--muted); background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(127,127,127,.06) 10px 20px); }
.tour-soon:empty { display: none; }
.tour-log-empty { display: grid; place-items: center; align-content: center; text-align: center; height: 100%; gap: 6px; padding: 30px 10px; }
.tour-log-empty b { font: 12px "FK Raster", monospace; text-transform: uppercase; letter-spacing: var(--pixel-tracking); }

/* Screens: pages on the left, the picture on the right, nothing scrolls */
.wn-gal { display: grid !important; grid-template-columns: max-content 1fr !important; gap: 6px !important; padding: 4px !important; min-height: 0; overflow: hidden; }
.wn-col { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wn-pages .wn-li { display: flex; align-items: center; gap: 5px; flex: 1 1 0; min-height: 0; max-height: 30px; padding: 0 6px !important; text-align: left; background: none; color: var(--ink); border: 0; border-bottom: 1px dashed var(--line); font: 9px "FK Raster", monospace; font-size: 9px !important; text-transform: uppercase; letter-spacing: var(--pixel-tracking); white-space: nowrap; cursor: pointer; }
.wn-pages .wn-li .num { color: var(--muted); }
.wn-pages .wn-li.on { background: var(--ink); color: var(--paper); }
.wn-pages .wn-li.soon { opacity: .35; }
.wn-pages .wn-li:disabled { cursor: default; }
.wn-stage { min-height: 0; background: #000; cursor: zoom-in; }
.wn-stage img, .wn-stage video { object-fit: contain !important; object-position: center !important; }

/* Buttons on the picture (views top left, theme bottom right, shots bottom left, Enlarge/Full screen top right) */
.wn-opt { font: 9px "FK Raster", monospace; font-size: 8px !important; text-transform: uppercase; letter-spacing: .1em !important; text-align: left; background: var(--paper); color: var(--ink); border: 1px solid var(--line); padding: 3px 4px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.wn-opt.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wn-opt.empty, .wn-opt.soon { opacity: .45; border-style: dashed; }
.wn-onpic { position: absolute; z-index: 3; display: flex; gap: 0; box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.wn-onpic .wn-opt { border-color: var(--paper); }
.wn-onpic .wn-opt + .wn-opt { border-left: 0; }
.wn-views-on { left: 6px; top: 6px; }
.wn-theme-on { right: 6px; bottom: 6px; }
.wn-shots-on { left: 6px; bottom: 6px; flex-wrap: wrap; max-width: calc(100% - 120px); }
.wn-view-btns { right: 6px; top: 6px; }

/* Changelog: collapsed rows; a tapped row opens in place */
.wn-log { display: flex !important; flex-direction: column; gap: 6px; padding: 8px; overflow: hidden; min-height: 0; }
.wn-sample { font: 9px "FK Raster", monospace; text-transform: uppercase; letter-spacing: var(--pixel-tracking); color: var(--amber); border: 1px dashed var(--amber); padding: 3px 6px; align-self: flex-start; }
.wn-rel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wn-rel-head b { font: 16px "FK Raster", monospace; letter-spacing: var(--pixel-tracking); font-weight: 400; }
.wn-rel-head span { color: var(--muted); font-size: 12px; }
.wn-vers { margin-left: auto; display: flex; gap: 3px; }
.wn-log .pager { flex: none; }
.wn-changes { display: flex; flex-direction: column; gap: 0; flex: 1 1 0; min-height: 0; padding-right: 2px; overflow: hidden; }
.wn-item { flex: none; border-bottom: 1px dashed var(--line); }
.wn-item.open { background: rgba(127,127,127,.06); }
.wn-row { grid-template-columns: auto 1fr auto 24px !important; gap: 8px; padding: 6px 4px 6px 2px !important; overflow: visible !important; }
.wn-item > .wn-row { border-bottom: 0 !important; }
.wn-row .id { color: var(--muted); font-size: 11px; }
.wn-detail { padding: 0 8px 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.wn-detail p { margin: 0; font-size: 13px; color: var(--muted); }
.wn-shot-wrap { position: relative; display: flex; flex: none; min-height: 0; height: 230px; background: #000; cursor: zoom-in; }
.wn-shot-wrap .page-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.wn-pic-prev { left: 6px; }
.wn-pic-next { right: 6px; }
.wn-pic-count { position: absolute; left: 6px; bottom: 6px; z-index: 3; font: 8px "FK Raster", monospace; letter-spacing: .1em; background: var(--ink); color: var(--paper); border: 1px solid var(--paper); padding: 2px 5px; pointer-events: none; }
.wn-change-shot { width: 100%; height: 100% !important; min-height: 0; flex: 1 1 0 !important; object-fit: contain !important; object-position: top; border: 1px solid var(--line); }

/* Enlarged view and browser full screen */
#full-ctl { display: contents; }
.wn-fbar { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.up-full .wn-fbar .page-btn { position: static; }
.up-full-prev, .up-full-next { z-index: 3; transform: translateY(-50%); }
.up-full [hidden] { display: none !important; }
.full-soon { font: 11px "FK Raster", monospace; text-transform: uppercase; letter-spacing: var(--pixel-tracking); color: #c1c8ce; cursor: pointer; }
.wn-fs { font: 9px "FK Raster", monospace; text-transform: uppercase; letter-spacing: var(--pixel-tracking); background: #15181c; color: #f4f1ea; border: 1.5px solid #f4f1ea; padding: 5px 8px; cursor: pointer; }
.wn-fs.on { background: #f4f1ea; color: #15181c; }
.up-full:fullscreen { background: #000; }
.up-full:fullscreen img, .up-full:fullscreen video { max-width: 100vw; max-height: 100vh; border: 0; }

/* Phones: the release card gets its own row, the picture comes first and the page list and shots sit under it */
@media (max-width: 560px) {
  .wn-tabs { grid-template-columns: 30px 1fr 1fr !important; }
  .wn-tabs .rel-card { grid-column: 1 / -1; border-width: 1.5px 0 0 0; justify-content: center; }
  .wn-gal { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; align-content: start; }
  .wn-stage { order: -1; aspect-ratio: 16 / 10 !important; }
  .wn-pages { flex-direction: row; flex-wrap: wrap; gap: 3px; }
  .wn-pages .wn-li { flex: 0 0 auto; height: auto; max-height: none; border: 1px solid var(--line); border-bottom-style: dashed; }
  .wn-pages .wn-li.soon { display: none; }
  .wn-shots-on { position: static; max-width: none; box-shadow: none; margin-top: 4px; gap: 3px; }
  .wn-shots-on .wn-opt + .wn-opt { border-left: 1px solid var(--line); }
  .wn-shot-wrap { height: 150px; }
  .up-full .wn-views-on { top: 56px; }
  .up-full .wn-shots-on { position: absolute; left: 6px; right: 6px; bottom: 34px; margin: 0; box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
}

/* Arrows in the enlarged view stay visible on light pictures; pixel font keeps its wide spacing */
.up-full .page-btn .arrow { background: rgba(10,11,13,.85); }
.wn-opt { letter-spacing: var(--pixel-tracking) !important; }

/* Changelog before the first release: blurred draft behind an Unavailable notice */
.wn-locked { position: relative; overflow: hidden; }
.wn-ghost { filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; overflow: hidden; flex: 1; }
.wn-unavail { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; }
.wn-unavail b { font: 14px "FK Raster", monospace; text-transform: uppercase; letter-spacing: var(--pixel-tracking); border: 1.5px solid var(--ink); background: var(--panel, var(--paper)); padding: 6px 14px; box-shadow: 3px 3px 0 var(--shadow); justify-self: center; }
.wn-unavail p { margin: 0; color: var(--ink); font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.wn-bar { display: block; height: 9px; background: var(--muted); opacity: .5; border-radius: 2px; }

/* Screens before any picture is ready */
.wn-ghost-gal { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 8px; height: 100%; }
.wn-ghost-side { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.wn-ghost-pic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 8px; background: #000; padding: 10px; }
.wn-ghost-card { background: var(--muted); opacity: .35; border-radius: 3px; }
@media (max-width: 560px) { .wn-ghost-gal { grid-template-columns: 1fr; } .wn-ghost-side { display: none; } .wn-ghost-pic { grid-template-columns: repeat(3, 1fr); } }
.wn-new { margin-left: auto; font: 8px "FK Raster", monospace; text-transform: uppercase; letter-spacing: var(--pixel-tracking); color: #15181c; background: var(--green); padding: 1px 4px; }
.wn-tabs button .wn-new { margin-left: 6px; vertical-align: middle; }

/* Follow bell, top left of the header */
.wn-bell { position: absolute; left: 8px; top: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font: 9px "FK Raster", monospace; text-transform: uppercase; letter-spacing: var(--pixel-tracking); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow); padding: 3px 8px; cursor: pointer; }
.wn-bell[hidden] { display: none; }
.wn-bell .bell-icon { font-size: 11px; filter: grayscale(1); }
.wn-bell.on { background: var(--green); color: #15181c; }
.wn-bell.on .bell-icon { filter: none; }
.head { position: relative; }
.head > .wn-bell { position: absolute !important; left: 10px !important; top: 10px !important; }
@media (max-width: 560px) { .head > .wn-bell { top: auto !important; bottom: 4px !important; left: auto !important; right: 8px !important; } }

/* Top-right corner: credit tag and Follow bell side by side, never overlapping */
.head-right { position: absolute; top: 0; right: 0; z-index: 3; display: flex; align-items: stretch; gap: 6px; }
.head-right .credit { position: static !important; }
.head > .head-right > .wn-bell { position: static !important; }
@media (max-width: 640px) { .head-right { flex-direction: column; align-items: flex-end; gap: 4px; } }
.head .brand, .head .note { padding-right: 0; }
@media (max-width: 760px) { .head { padding-top: 54px !important; } }
.head > .head-right { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; width: auto !important; }

/* Credit + Follow as one split button: one frame, one divider, same height and type */
.head > .head-right { flex-direction: row !important; align-items: stretch !important; gap: 0 !important; border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow); background: var(--paper); }
.head-right .credit, .head > .head-right > .wn-bell { border: 0 !important; box-shadow: none !important; margin: 0 !important; font-size: 9px !important; padding: 4px 9px !important; line-height: 1.2; }
.head > .head-right > .wn-bell { border-left: 1.5px solid var(--ink) !important; }
.head > .head-right > .wn-bell .bell-icon { font-size: 10px; }
@media (max-width: 640px) { .head-right .credit, .head > .head-right > .wn-bell { font-size: 8px !important; padding: 3px 6px !important; } .head-right .credit .long { display: none; } }

/* Split button stacked: credit on top, Follow underneath, same width, one frame */
.head > .head-right { flex-direction: column !important; align-items: stretch !important; }
.head-right .credit, .head > .head-right > .wn-bell { justify-content: center !important; width: 100%; box-sizing: border-box; }
.head > .head-right > .wn-bell { border-left: 0 !important; border-top: 1.5px solid var(--ink) !important; }
@media (max-width: 760px) { .head { padding-top: 46px !important; } }

/* Follow row: label on the left, retro scoreboard count on the right */
.head > .head-right > .wn-bell { justify-content: flex-start !important; gap: 6px; }
.wn-bell .score { margin-left: auto; font: 11px/1 "Courier New", monospace; font-weight: 700; letter-spacing: .12em; color: #ffb000; background: #0b0b0c; border: 1px solid #3a3a3a; padding: 2px 4px 1px; text-shadow: 0 0 4px rgba(255,176,0,.7); box-shadow: inset 0 0 4px #000; }
.wn-bell.on .score { color: #ffb000; }
@media (max-width: 640px) { .wn-bell .score { font-size: 9px; padding: 1px 3px; } }

/* Scoreboard digits: each one rolls up when it changes */
.wn-bell .score { display: inline-flex; overflow: hidden; }
.wn-bell .score .digit { display: inline-block; }
.wn-bell .score .digit.roll { animation: score-roll .45s cubic-bezier(.2,.8,.2,1); }
@keyframes score-roll { from { transform: translateY(100%); opacity: 0; } 60% { opacity: 1; } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .wn-bell .score .digit.roll { animation: none; } }
.wn-bell .score { min-width: 4.6ch; justify-content: center; }

/* Fixed size: the button never changes width for Follow/Following or the count */
.head > .head-right { width: 176px !important; }
.wn-bell .bell-label { display: inline-block; width: 9.6em; text-align: left; white-space: nowrap; }
.wn-bell .score { width: 4.6ch; min-width: 0 !important; font-variant-numeric: tabular-nums; flex: none; }
.wn-bell .score .digit { width: 1ch; text-align: center; }
@media (max-width: 640px) { .head > .head-right { width: 138px !important; } }
/* Scoreboard digits in the post's pixel font, amber on black */
.wn-bell .score { font: 10px/1 "FK Raster", monospace !important; letter-spacing: .08em !important; font-weight: 400 !important; padding: 3px 4px 2px !important; }
@media (max-width: 640px) { .wn-bell .score { font-size: 8px !important; } }

/* Follow row: everything on one centre line; digits get their natural width so they never overlap */
.head > .head-right > .wn-bell { align-items: center !important; line-height: 1 !important; }
.wn-bell .bell-icon, .wn-bell .bell-label { line-height: 1; display: inline-flex; align-items: center; }
.wn-bell .score { width: auto !important; gap: 1px; align-items: center; }
.wn-bell .score .digit { width: auto !important; min-width: .7em; }

/* Follow row, optical fix: the pixel font sits high in its box, so nudge it down; label centred between bell and count */
.wn-bell .bell-label { flex: 1 1 auto; width: auto !important; justify-content: center; text-align: center !important; transform: translateY(1px); }
.wn-bell .score .digit { transform: translateY(1px); }
.head-right .credit { transform: none; }
.head-right .credit > span, .head-right .credit .name { position: relative; top: 1px; }
.head-right .credit > span, .head-right .credit .name { top: 0 !important; }
.head-right .credit { padding-top: 5px !important; padding-bottom: 3px !important; }

/* Notify bell hover: the bell rings and a tip says what you get */
.wn-bell { position: relative; overflow: visible !important; }
.wn-bell .bell-icon { display: inline-block; transform-origin: 50% 10%; }
.wn-bell:hover .bell-icon, .wn-bell:focus-visible .bell-icon { animation: bell-ring .8s ease-in-out; }
@keyframes bell-ring { 10%,30%,50% { transform: rotate(18deg); } 20%,40%,60% { transform: rotate(-18deg); } 70%,100% { transform: rotate(0); } }
.wn-bell .bell-tip { position: absolute; right: -1.5px; top: calc(100% + 6px); z-index: 50; white-space: nowrap; font: 9px "FK Raster", monospace; letter-spacing: .16em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 5px 8px 4px; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.wn-bell:hover .bell-tip, .wn-bell:focus-visible .bell-tip { opacity: 1; transform: none; }
@media (hover: none) { .wn-bell .bell-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .wn-bell:hover .bell-icon { animation: none; } }

/* Title and line under it stay readable over the drifting header icons: lifted above them with a soft halo */
.head h1, .head .note { position: relative; z-index: 2; text-shadow: 0 0 4px var(--paper), 0 0 8px var(--paper), 0 0 12px var(--paper); }
.head h1 img, .head .logo { position: relative; z-index: 2; }
@media (max-width: 640px) { .hd-band { opacity: .45; } }

/* Very narrow (big browser zoom): release card labels stay inside their box */
@media (max-width: 300px) {
  .rel-field { min-width: 0; overflow: hidden; }
  .rel-field small { letter-spacing: .06em !important; font-size: 7px !important; }
  .rel-field b, .rel-field strong { letter-spacing: .06em !important; }
}

/* Refresh button, left of the tabs; green and pulsing when a newer upload is ready */
.wn-tabs .wn-refresh { display: grid; place-items: center; padding: 0 !important; min-width: 0; font: 15px/1 "FK Raster", monospace; color: var(--muted); }
.wn-tabs .wn-refresh:hover .wn-refresh-icon { color: var(--ink); transform: rotate(180deg); }
.wn-refresh-icon { display: inline-block; transition: transform .35s, color .2s; }
.wn-tabs .wn-refresh.has-new { background: var(--green) !important; color: #15181c; animation: wn-ready 1.6s ease-in-out infinite; }
@keyframes wn-ready { 50% { box-shadow: inset 0 0 0 2px #15181c; } }
@media (prefers-reduced-motion: reduce) { .wn-tabs .wn-refresh.has-new { animation: none; } .wn-refresh-icon { transition: none; } }

/* Compact: page list rows and the shot picker take less room */
.wn-pages .wn-li { max-height: 22px; padding: 0 5px !important; gap: 4px; font-size: 8px !important; }
.wn-gal { gap: 4px !important; }
.wn-shots-on .wn-opt { padding: 2px 4px !important; }
.wn-onpic { gap: 0; }

/* Enlarged view and full screen: controls grow with the window so they stay easy to read and hit */
.up-full .wn-opt { font-size: clamp(8px, .72vw, 14px) !important; padding: clamp(3px, .3vw, 7px) clamp(4px, .45vw, 10px) !important; }
.up-full .wn-fs { font-size: clamp(9px, .72vw, 14px); padding: clamp(5px, .35vw, 8px) clamp(8px, .55vw, 14px); }
@media (min-width: 1400px) { .up-full .page-btn { transform: scale(1.35); } }
@media (min-width: 2200px) { .up-full .page-btn { transform: scale(1.7); } }

/* First visit: the Notify me row pulses green a few times, and the bell rings, to show it can be tapped */
.wn-bell.hint { animation: bell-hint 1.6s ease-in-out 4; }
.wn-bell.hint .bell-icon { animation: bell-ring .8s ease-in-out 4 .4s; }
@keyframes bell-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(127, 209, 139, 0); } 50% { box-shadow: 0 0 0 4px rgba(127, 209, 139, .55); background: color-mix(in srgb, var(--green) 22%, var(--paper)); } }
@media (prefers-reduced-motion: reduce) { .wn-bell.hint, .wn-bell.hint .bell-icon { animation: none; } }

/* Site only: the "Get updates" window, centred on a blurred page */
.wn-notify-back { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(10, 12, 14, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: wn-fade .2s ease-out; }
.wn-notify-back[hidden] { display: none; }
@keyframes wn-fade { from { opacity: 0; } to { opacity: 1; } }
.wn-notify-win { position: relative; width: max-content; max-width: 100%; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 6px 6px 0 #000; animation: wn-pop .24s cubic-bezier(.2, 1.3, .4, 1); font: 15px/1.5 "Suisse Intl", system-ui, sans-serif; }
@keyframes wn-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.wn-notify-bar { background: var(--ink); color: var(--paper); padding: 8px 40px 7px 14px; font: 11px "FK Raster", monospace; letter-spacing: .16em; text-transform: uppercase; }
.wn-notify-x { position: absolute; top: 3px; right: 6px; background: none; border: 0; color: var(--paper); font: 20px/1 monospace; cursor: pointer; padding: 2px 6px; }
.wn-notify-win ol { margin: 16px 22px 16px 42px; padding: 0; }
.wn-notify-win li { margin: 5px 0; white-space: nowrap; }
.wn-notify-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.wn-notify-link:hover { color: #c4302b; }
.wn-notify-go { display: block; margin: 0 22px 20px; padding: 11px 14px; text-align: center; background: #c4302b; color: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 11px "FK Raster", monospace; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.wn-notify-go:hover { filter: brightness(1.1); }
/* Discord cell: the same hover as the credit (one green shine, green text, soft edge glow) and a tip like the bell's. */
.rel-card .rel-discord { position: relative; overflow: visible; text-decoration: none; cursor: pointer; padding: 0 4px; transition: color .2s, box-shadow .2s; }
.rel-card .rel-discord b { color: var(--red); transition: color .2s; }
.rel-card .rel-discord .rel-shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rel-card .rel-discord .rel-shine::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--green) 28%, transparent), transparent); transform: skewX(-20deg); opacity: 0; }
.rel-card .rel-discord:hover, .rel-card .rel-discord:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 55%, transparent); outline: none; }
.rel-card .rel-discord:hover b, .rel-card .rel-discord:focus-visible b, .rel-card .rel-discord:hover small, .rel-card .rel-discord:focus-visible small { color: var(--green); }
.rel-card .rel-discord:hover .rel-shine::after, .rel-card .rel-discord:focus-visible .rel-shine::after { animation: credit-shine .7s ease-out; }
.rel-card .rel-discord .rel-tip { position: absolute; right: -1.5px; top: calc(100% + 6px); z-index: 50; white-space: nowrap; font: 9px "FK Raster", monospace; letter-spacing: .16em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 5px 8px 4px; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.rel-card .rel-discord:hover .rel-tip, .rel-card .rel-discord:focus-visible .rel-tip { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rel-card .rel-discord:hover .rel-shine::after { animation: none; } .rel-card .rel-discord .rel-tip { transition: none; } }
@media (max-width: 560px) { .wn-notify-win li { white-space: normal; } .wn-notify-win { width: auto; } }
@media (prefers-reduced-motion: reduce) { .wn-notify-back, .wn-notify-win { animation: none; } }

/* Get updates window: motion. Blur ramps in, the window flies out of the bell, steps and button follow in a
   short stagger, the button gets one shine sweep; closing plays it back toward the bell. */
.wn-notify-back { animation: wn-back-in .28s ease-out both; }
@keyframes wn-back-in { from { background: rgba(10, 12, 14, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
.wn-notify-win { transform-origin: var(--wn-ox, 90%) var(--wn-oy, 0%); animation: wn-fly .42s cubic-bezier(.16, 1.2, .3, 1) both; }
@keyframes wn-fly { from { opacity: 0; transform: translate(var(--wn-dx, 0), var(--wn-dy, -40px)) scale(.35); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.wn-notify-win li { opacity: 0; animation: wn-step .32s cubic-bezier(.2, .9, .3, 1) both; }
.wn-notify-win li:nth-child(1) { animation-delay: .18s; } .wn-notify-win li:nth-child(2) { animation-delay: .26s; } .wn-notify-win li:nth-child(3) { animation-delay: .34s; }
@keyframes wn-step { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.wn-notify-go { position: relative; overflow: hidden; opacity: 0; animation: wn-step .32s .44s cubic-bezier(.2, .9, .3, 1) both; }
.wn-notify-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); animation: wn-shine .8s .8s ease-in-out both; }
@keyframes wn-shine { to { left: 120%; } }
.wn-notify-bar::before { content: '🔔'; display: inline-block; margin-right: 8px; transform-origin: 50% 10%; animation: bell-ring .8s .3s ease-in-out; }
.wn-notify-back.closing { animation: wn-back-out .22s ease-in both; }
.wn-notify-back.closing .wn-notify-win { animation: wn-fly-out .22s ease-in both; }
@keyframes wn-back-out { to { background: rgba(10, 12, 14, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
@keyframes wn-fly-out { to { opacity: 0; transform: translate(var(--wn-dx, 0), var(--wn-dy, -40px)) scale(.35); } }
@media (prefers-reduced-motion: reduce) { .wn-notify-back, .wn-notify-win, .wn-notify-win li, .wn-notify-go, .wn-notify-go::after, .wn-notify-bar::before { animation: none !important; opacity: 1; } }
/* Not ready yet (e.g. Library on title pages): a solid grey button, not a faded one, and it can't be picked. */
.wn-opt.soon, .wn-onpic .wn-opt.soon, .up-full .wn-opt.soon { opacity: 1; background: #6e6e6e !important; color: #e4e4e4 !important; border-style: solid; border-color: #6e6e6e !important; cursor: not-allowed; }