/* Steam "What's New" — the notice rail above the Steam library, the post reader,
   and the panel that links a member's own Steam account.

   Direction: the herald's board. Notices pinned under the dock in the dock's own
   brass, ember and dark wood (media/dock.css), type set large and plain, the
   pictures doing the talking. Loaded by the desktop page and the phone page, so
   every colour it needs is declared here rather than borrowed from either. */

.snews, .slink, .snr-scrim, .slink-account {
  --sn-brass: 198, 160, 94;
  --sn-ember: 245, 158, 11;
  --sn-wood: 32, 24, 20;
  --sn-steam: 102, 192, 244;
  --sn-ink: #f4ead8;
  --sn-dim: #c4b59d;
  --sn-mute: #8d8170;
  --sn-ease: cubic-bezier(.2, .7, .3, 1);
  --sn-card: clamp(236px, 22vw, 304px);
  --sn-gap: 16px;
}
.snews [hidden], .slink [hidden], .snr-scrim [hidden], .slink-account[hidden], .snews-host[hidden] { display: none !important; }

/* ── the rail ─────────────────────────────────────────────────────────────── */
/* The board is bracketed: the head's brass bead above, a closing rule below,
   and a clear band of air before the grid starts. Without the closing rule the
   notices read as the first row of the Steam grid rather than as their own
   board. */
.snews { margin: 0 0 34px; color: var(--sn-ink); }
.snews::after {
  content: ''; display: block; height: 2px; margin: 24px 0 0; border-radius: 2px;
  /* An engraved shelf lip, like the dock's bead: a brass edge with a dark
     hairline under it. A single 1px rule at this contrast disappeared against
     the page and the grid still read as the rail's next row. */
  background: linear-gradient(90deg, rgba(var(--sn-brass), .62), rgba(var(--sn-brass), .2) 52%, transparent 88%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .65), 0 14px 22px -16px rgba(0, 0, 0, .95);
}
.snews.is-folded::after { margin-top: 14px; }
/* On Home the page's own section rhythm does the separating. */
.snews--bare::after { display: none; }
.snews-head {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 0 8px; margin: 0 0 12px;
  /* a brass rule that fades out to the right, the way the dock's bead does */
  background: linear-gradient(90deg, rgba(var(--sn-brass), .55), rgba(var(--sn-brass), .12) 46%, transparent 82%) left bottom / 100% 1px no-repeat;
}
.snews-horn { flex: none; width: 30px; height: 30px; object-fit: contain; transform-origin: 30% 70%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.snews-title { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--sn-ink); white-space: nowrap; }
/* "See all N" — the rail shows the cards that fit and no more, so this says how
   many there really are and opens the lot. It reads as a link, not a tool: it is
   the one control here that goes somewhere. */
.snews-all {
  flex: none; padding: 5px 10px; border-radius: 9px; cursor: pointer; touch-action: manipulation;
  font: inherit; font-size: 12px; font-weight: 750; letter-spacing: .01em;
  color: var(--sn-dim); background: none; border: 1px solid transparent;
  transition: color .16s, border-color .16s, background .16s;
}
.snews-all::after { content: ' \2192'; }
.snews-all:hover { color: var(--sn-ink); border-color: rgba(var(--sn-brass), .45); background: rgba(255, 233, 196, .05); }
.snews-all:focus-visible { outline: 2px solid rgb(var(--sn-brass)); outline-offset: 2px; }
@media (pointer: coarse) { .snews-all { min-height: 44px; } }

.snews-fresh {
  flex: none; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #1c1206; background: linear-gradient(180deg, #ffc65a, rgb(var(--sn-ember)));
  box-shadow: 0 0 0 1px rgba(255, 233, 196, .35) inset, 0 4px 12px -6px rgba(var(--sn-ember), .9);
}
.snews-status { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--sn-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snews-tools { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.snews-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: 11px; cursor: pointer;
  touch-action: manipulation;
  color: var(--sn-dim); font: inherit;
  border: 1px solid rgba(var(--sn-brass), .26);
  background: linear-gradient(180deg, rgba(58, 44, 35, .7), rgba(var(--sn-wood), .92));
  box-shadow: inset 0 1px 0 rgba(255, 233, 196, .1);
  transition: color .16s, border-color .16s, transform .16s var(--sn-ease), opacity .16s;
}
.snews-tool:hover:not(:disabled) { color: var(--sn-ink); border-color: rgba(var(--sn-brass), .62); }
.snews-tool:active:not(:disabled) { transform: translateY(1px); }
.snews-tool:disabled { opacity: .34; cursor: default; }
/* On a phone these two (settings, fold) are the rail's only chrome, and 38px is
   under the floor for a finger. */
@media (pointer: coarse) { .snews-tool { width: 44px; height: 44px; } }
.snews-tool:focus-visible, .snews-chip:focus-visible, .snews-card:focus-visible { outline: 2px solid rgb(var(--sn-brass)); outline-offset: 3px; }
.snews-tool-art img { width: 24px; height: 24px; object-fit: contain; transition: transform .5s var(--sn-ease); }
.snews-tool-art:hover img { transform: rotate(38deg); }
@media (pointer: coarse) { .snews-tool { width: 44px; height: 44px; } }

/* Folding: the row closes by its real height, and its contents leave the tab
   order once it is shut. */
.snews-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s var(--sn-ease); }
.snews-fold-in { min-height: 0; overflow: hidden; margin: -6px; padding: 6px; }
.snews.is-folded .snews-fold { grid-template-rows: 0fr; }
.snews.is-folded .snews-fold-in { visibility: hidden; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; transition: visibility 0s .32s, padding .32s, margin .32s; }
.snews.is-folded { margin-bottom: 14px; }
.snews.is-folded .snews-head { margin-bottom: 0; }
.snews.is-folded [data-act="prev"], .snews.is-folded [data-act="next"] { display: none; }

.snews-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 12px 16px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.45; color: var(--sn-dim);
  border: 1px solid rgba(var(--sn-brass), .2);
  background: linear-gradient(180deg, rgba(58, 44, 35, .36), rgba(var(--sn-wood), .5));
}
.snews-note > span { flex: 1 1 240px; min-width: 0; }
.snews-chip {
  flex: none; min-height: 36px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  touch-action: manipulation;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--sn-ink);
  border: 1px solid rgba(var(--sn-brass), .45); background: rgba(var(--sn-wood), .9);
  transition: border-color .16s, background .16s;
}
.snews-chip:hover { border-color: rgb(var(--sn-brass)); background: rgba(74, 56, 42, .9); }
@media (pointer: coarse) { .snews-chip { min-height: 44px; } }

/* The scroller. Its edges fade only on the side that has more to show.
   The mask lives on the TRACK, not the rail: the rail also holds the two edge
   arrows, and a mask on it would fade the arrows away exactly where they sit. */
.snews-rail { position: relative; --fade-l: 0px; --fade-r: 0px; }
.snews-rail.can-prev { --fade-l: 36px; }
.snews-rail.can-next { --fade-r: 36px; }
.snews-track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}

/* Slide the shelf without leaving it: a chevron on each edge, over the fade,
   shown while the pointer is on the rail. A finger swipes instead, so these
   stay off a touch screen. */
.snews-edge {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: 56px; padding: 0; border: 0;
  display: grid; place-items: center; cursor: pointer; color: var(--sn-ink);
  /* Visible whenever there IS more — they only exist when the rail can move
     that way (edges() disables them, and a disabled one is not drawn). Showing
     them only on hover is how the shelf came to look like four posts. */
  opacity: .66; transition: opacity .18s ease;
}
.snews-edge--prev { left: -4px; background: linear-gradient(90deg, rgba(10, 8, 6, .82), transparent); }
.snews-edge--next { right: -4px; background: linear-gradient(270deg, rgba(10, 8, 6, .82), transparent); }
/* the plate the chevron sits on */
.snews-edge svg {
  width: 22px; height: 22px; border-radius: 999px; padding: 7px; box-sizing: content-box;
  background: rgba(14, 11, 9, .9); border: 1px solid rgba(var(--sn-brass), .5);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .95);
  transition: transform .16s var(--sn-ease), border-color .16s;
}
.snews-rail:hover .snews-edge:not(:disabled),
.snews-rail:focus-within .snews-edge:not(:disabled) { opacity: 1; }
.snews-edge:hover { opacity: 1; }
.snews-edge:hover svg { border-color: rgb(var(--sn-ember)); transform: scale(1.08); }
.snews-edge:active svg { transform: scale(.96); }
.snews-edge:focus-visible { opacity: 1; outline: 2px solid rgb(var(--sn-brass)); outline-offset: -4px; }
.snews-edge:disabled, .snews-edge[hidden] { display: none; }
@media (pointer: coarse) { .snews-edge { display: none; } }
@media (prefers-reduced-motion: reduce) { .snews-edge, .snews-edge svg { transition: none; } }
.snews-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--sn-card); gap: var(--sn-gap);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 0 4px;
  padding: 4px; margin: -4px;
  scrollbar-width: none;
}
.snews-track::-webkit-scrollbar { display: none; }
.snews-track > * { scroll-snap-align: start; }
/* three to five posts that fit share the row; nothing is left empty beside them */
.snews-track.is-fit { grid-auto-flow: row; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); overflow: visible; }

/* ── a notice ─────────────────────────────────────────────────────────────── */
/* A <button> laid out as a column. `align-items: stretch` is said out loud: the
   desktop shell's Chromium gives a button flex-start, and a picture box sized
   only by aspect-ratio then collapses to nothing. */
.snews-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  touch-action: manipulation;
  min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 14px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .45s ease, transform .45s var(--sn-ease);
}
.snews-when {
  display: flex; align-items: baseline; gap: 7px; min-height: 16px;
  font-size: 11px; line-height: 16px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: rgb(var(--sn-brass)); white-space: nowrap;
}
.snews-date { font-weight: 600; letter-spacing: .04em; color: var(--sn-mute); }
.snews-art {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(var(--sn-brass), .24);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(var(--sn-ember), .16), transparent 60%),
    linear-gradient(160deg, #3a2c23, rgb(var(--sn-wood)) 70%);
  box-shadow: 0 1px 0 rgba(255, 233, 196, .08) inset, 0 12px 26px -18px rgba(0, 0, 0, .95);
  transition: border-color .2s, box-shadow .25s;
}
.snews-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 30px; font-weight: 800; letter-spacing: .04em; color: rgba(var(--sn-brass), .5);
}
.snews-img, .snr-hero-img, .snr-row-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s ease, transform .6s var(--sn-ease);
}
.snews-img.is-loaded, .snr-hero-img.is-loaded, .snr-row-img.is-loaded { opacity: 1; }
.snews-card:hover .snews-art, .snews-card:focus-visible .snews-art { border-color: rgba(var(--sn-brass), .7); box-shadow: 0 1px 0 rgba(255, 233, 196, .1) inset, 0 16px 30px -18px rgba(0, 0, 0, .95), 0 0 0 1px rgba(var(--sn-ember), .25), 0 10px 34px -16px rgba(var(--sn-ember), .5); }
.snews-card:hover .snews-img { transform: scale(1.045); }
.snews-card:active .snews-art { transform: translateY(1px); }

.snews-kind {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  padding: 3px 8px; border-radius: 6px;
  font-size: 10.5px; line-height: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  /* Solid, not blurred: a chip sits inside the reader's blurred scrim, and a
     backdrop blur inside a backdrop blur stops Chromium painting the dialog. */
  color: var(--sn-ink); background: rgba(14, 11, 9, .9); border: 1px solid rgba(var(--sn-brass), .38);
}
.snews-kind--major, .snews-kind--update, .snews-kind--patch, .snews-kind--release, .snews-kind--dlc, .snews-kind--season { color: #ffd58a; border-color: rgba(var(--sn-ember), .6); }
.snews-kind--sale, .snews-kind--trial { color: #8de2b8; border-color: rgba(16, 185, 129, .5); }
.snews-kind--event, .snews-kind--stream { color: #9ad7f7; border-color: rgba(var(--sn-steam), .5); }
.snews-new {
  position: absolute; right: 8px; top: 8px; z-index: 1;
  padding: 3px 8px; border-radius: 6px;
  font-size: 10.5px; line-height: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #1c1206; background: linear-gradient(180deg, #ffc65a, rgb(var(--sn-ember))); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .7);
}
.snews-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.snews-headline {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 14.5px; line-height: 1.32; font-weight: 650; color: var(--sn-ink);
  transition: color .16s;
}
.snews-card:hover .snews-headline { color: #fff; }
.snews-sum { display: none; font-size: 13.5px; line-height: 1.5; color: var(--sn-dim); -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.snews-game { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; line-height: 18px; color: var(--sn-dim); }
.snews-game > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snews-gicon, .snr-gicon { flex: none; border-radius: 4px; object-fit: cover; background: rgba(0, 0, 0, .4); }
.snews-gicon { width: 18px; height: 18px; }

/* one or two posts: the picture beside the words, sharing the whole row */
.snews-track.is-few { grid-auto-flow: row; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); overflow: visible; }
.snews-track.is-few .snews-card {
  display: grid; grid-template: "art when" auto "art text" 1fr / minmax(220px, 46%) minmax(0, 1fr);
  column-gap: 20px; row-gap: 8px; padding: 12px; border-radius: 16px;
  border: 1px solid rgba(var(--sn-brass), .16);
  background: linear-gradient(90deg, rgba(var(--sn-ember), .07), rgba(255, 255, 255, .015));
}
.snews-track.is-few .snews-art { grid-area: art; align-self: center; }
.snews-track.is-few .snews-when { grid-area: when; align-self: end; }
.snews-track.is-few .snews-text { grid-area: text; gap: 8px; }
.snews-track.is-few .snews-headline { font-size: 19px; line-height: 1.22; font-weight: 800; letter-spacing: -.015em; -webkit-line-clamp: 3; }
.snews-track.is-few .snews-sum { display: -webkit-box; }

/* ── waiting, arriving ────────────────────────────────────────────────────── */
.snews-skel { cursor: default; pointer-events: none; }
.snews-skel .snews-art, .snews-line {
  background: linear-gradient(90deg, rgba(58, 44, 35, .55) 25%, rgba(92, 70, 52, .7) 37%, rgba(58, 44, 35, .55) 63%);
  background-size: 400% 100%; animation: snews-shimmer 1.4s ease infinite; animation-delay: calc(var(--i, 0) * 90ms);
}
.snews-line { display: block; height: 12px; border-radius: 6px; }
.snews-line--short { width: 56%; }
.snews-skel .snews-text { gap: 9px; padding-top: 3px; min-height: 62px; }
@keyframes snews-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* first paint: the notices are pinned up one after another, and the horn sounds */
.snews.snews-in .snews-card { animation: snews-rise .55s var(--sn-ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
.snews.snews-in .snews-horn { animation: snews-toot .9s var(--sn-ease) both; }
@keyframes snews-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes snews-toot { 0% { transform: rotate(0) scale(1); } 28% { transform: rotate(-16deg) scale(1.12); } 60% { transform: rotate(7deg) scale(1.04); } 100% { transform: none; } }
/* past the first screenful: dimmed and set back until the rail is scrolled to them */
.snews-card.is-waiting { opacity: .38; transform: translateX(22px) scale(.97); }

/* ── on Home: no chrome of its own ─────────────────────────────────────────
   Home leads every section with its own painted head (hx-head), so a second
   heading here would just argue with it. The header element STAYS in the DOM —
   paint() writes to .snews-fresh / .snews-status / [data-act="fold"] on every
   pass and would throw on a null. */
.snews--bare { margin: 0; }
.snews--bare .snews-head { display: none; }

/* ── phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .snews { --sn-card: min(74vw, 300px); --sn-gap: 12px; margin-bottom: 20px; }
  .snews-status { display: none; }
  .snews [data-act="prev"], .snews [data-act="next"] { display: none; } /* a thumb scrolls it */
  .snews-title { font-size: 16px; }
}
.snews--phone { --sn-card: min(74vw, 300px); --sn-gap: 12px; margin: 4px 0 18px; }
.snews--phone .snews-status, .snews--phone [data-act="prev"], .snews--phone [data-act="next"] { display: none; }
/* the phone page's lists bleed to the screen edge; so does this one */
.snews--phone .snews-track { margin: -4px -14px; padding: 4px 14px; scroll-padding: 0 14px; }
.snews--phone .snews-rail { margin: 0; }
.snews--phone .snews-track { -webkit-mask-image: none; mask-image: none; }

/* ── linking a Steam account (members) ────────────────────────────────────── */
.slink {
  display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(300px, 1fr); align-items: center; gap: 22px 28px;
  margin: 0 0 26px; padding: 24px 28px; border-radius: 18px; color: var(--sn-ink);
  border: 1px solid rgba(var(--sn-brass), .3);
  background:
    radial-gradient(420px 220px at 6% 0%, rgba(var(--sn-steam), .16), transparent 70%),
    radial-gradient(360px 200px at 100% 100%, rgba(var(--sn-ember), .12), transparent 70%),
    repeating-linear-gradient(97deg, rgba(0, 0, 0, .14) 0 2px, rgba(255, 255, 255, .01) 2px 5px),
    linear-gradient(180deg, rgba(58, 44, 35, .7), rgba(var(--sn-wood), .95) 62%, rgba(14, 11, 9, .96));
  box-shadow: inset 0 1px 0 rgba(255, 233, 196, .14), 0 18px 40px -28px rgba(0, 0, 0, .95);
  animation: snews-rise .5s var(--sn-ease) both;
}
.slink-art { position: relative; width: 104px; height: 104px; }
.slink-logo { position: absolute; left: 0; top: 6px; width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6)); }
.slink-horn { position: absolute; right: -4px; bottom: 0; width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); animation: snews-toot 1.1s .35s var(--sn-ease) both; transform-origin: 30% 70%; }
.slink-title { margin: 0 0 8px; font-size: 24px; line-height: 1.15; font-weight: 850; letter-spacing: -.02em; }
.slink-lede { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--sn-dim); max-width: 52ch; }
.slink-fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sn-mute); max-width: 52ch; }
.slink-form { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.slink-label { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgb(var(--sn-brass)); }
.slink-row { display: flex; gap: 8px; }
.slink-input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; border-radius: 11px;
  font: inherit; font-size: 16px; color: var(--sn-ink);
  border: 1px solid rgba(var(--sn-brass), .34); background: rgba(8, 6, 5, .55);
  transition: border-color .16s, box-shadow .16s;
}
.slink-input::placeholder { color: var(--sn-mute); }
.slink-input:focus-visible { outline: none; border-color: rgb(var(--sn-ember)); box-shadow: 0 0 0 3px rgba(var(--sn-ember), .22); }
.slink-go {
  flex: none; height: 46px; padding: 0 20px; border-radius: 11px; cursor: pointer;
  touch-action: manipulation;
  font: inherit; font-size: 14.5px; font-weight: 800; color: #1c1206; border: 0;
  background: linear-gradient(180deg, #ffc65a, rgb(var(--sn-ember)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 22px -12px rgba(var(--sn-ember), .9);
  transition: filter .16s, transform .16s var(--sn-ease);
}
.slink-go:hover:not(:disabled) { filter: brightness(1.08); }
.slink-go:active:not(:disabled) { transform: translateY(1px); }
.slink-go:disabled { opacity: .6; cursor: progress; }
.slink-go:focus-visible, .slink-more summary:focus-visible { outline: 2px solid var(--sn-ink); outline-offset: 3px; }
.slink-more { font-size: 12.5px; line-height: 1.5; color: var(--sn-dim); }
.slink-more summary { display: inline-block; padding: 6px 0; cursor: pointer; color: var(--sn-dim); text-decoration: underline; text-decoration-color: rgba(var(--sn-brass), .5); text-underline-offset: 3px; }
.slink-more p { margin: 4px 0 10px; }
.slink-more .slink-input { width: 100%; margin-top: 6px; }
.slink-msg { margin: 0; min-height: 18px; font-size: 13px; line-height: 1.4; color: #fca5a5; }
@media (max-width: 1080px) {
  .slink { grid-template-columns: auto minmax(0, 1fr); }
  .slink-form { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .slink { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; gap: 16px; }
  .slink-art { width: 86px; height: 86px; }
  .slink-logo { width: 64px; height: 64px; } .slink-horn { width: 48px; height: 48px; }
  .slink-title { font-size: 21px; }
  .slink-row { flex-direction: column; }
}
.slink--phone { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; gap: 16px; margin: 4px 0 18px; }
.slink--phone .slink-row { flex-direction: column; }

/* The promise under the unlinked panel: the real card shape, dimmed, with the
   real kind labels and no invented text. It spans the panel so the otherwise
   empty page below the form carries the thing being offered. Three cards at a
   desk, two on a phone — never a row with an empty cell in it. */
.slink-peek { grid-column: 1 / -1; min-width: 0; padding-top: 18px; border-top: 1px dashed rgba(var(--sn-brass), .26); }
.slink-peek-cap {
  margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(var(--sn-brass), .8);
}
/* The same scroller geometry as the real rail, at a fixed card width, running
   off the right edge under a fade. Equal columns at a capped width would leave a
   dead gutter on a wide panel and a slab on a narrow one; this fills every width
   by construction, and it is what the rail itself does. */
.slink-peek-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 208px; gap: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent 100%);
}
.slink-peek-card { cursor: default; pointer-events: none; opacity: .5; }
/* Static, not the skeleton's shimmer: this is a layout being described, not a
   row still loading. */
.slink-peek-card .snews-line {
  background: rgba(var(--sn-brass), .18); animation: none;
}
.slink-peek-card .snews-line--stamp { width: 62px; height: 9px; }
.slink-peek-card .snews-line--game { width: 44%; height: 10px; }
.slink-peek-card .snews-text { gap: 9px; padding-top: 3px; }
@media (max-width: 620px) { .slink-peek-rail { grid-auto-columns: 172px; gap: 12px; } }
.slink--phone .slink-peek-rail { grid-auto-columns: 172px; gap: 12px; }

/* the sidebar's "Your Steam" block */
.slink-account .slink-me { display: flex; align-items: center; gap: 10px; min-width: 0; }
.slink-avatar { position: relative; flex: none; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: rgba(var(--sn-brass), .8); border: 1px solid rgba(var(--sn-brass), .34); background: linear-gradient(160deg, #3a2c23, rgb(var(--sn-wood))); }
.slink-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slink-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.slink-who b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slink-who span { font-size: 11.5px; color: var(--text-dim, var(--sn-dim)); }
.slink-warn { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: #fcd34d; }
.slink-acts { display: flex; gap: 6px; margin-top: 10px; }

/* ── the reader ───────────────────────────────────────────────────────────── */
.snr-scrim {
  position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 24px;
  background: rgba(6, 5, 4, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .2s ease;
}
.snr-scrim.is-open { opacity: 1; }
.snr-scrim.is-closing { opacity: 0; }
.snr {
  display: flex; flex-direction: column; width: min(800px, 100%); max-height: min(90vh, 940px); overflow: hidden;
  color: var(--sn-ink); border-radius: 18px; outline: none;
  border: 1px solid rgba(var(--sn-brass), .36);
  background: linear-gradient(180deg, #211a15, #14100d 40%, #0f0c0a);
  box-shadow: inset 0 1px 0 rgba(255, 233, 196, .14), 0 40px 90px -30px rgba(0, 0, 0, .95);
  transform: translateY(14px) scale(.985); transition: transform .28s var(--sn-ease);
}
.snr-scrim.is-open .snr { transform: none; }
.snr-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid rgba(var(--sn-brass), .16); }
.snr-from { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--sn-dim); }
.snr-from > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snr-gicon { width: 22px; height: 22px; border-radius: 5px; }
.snr-step { display: flex; gap: 4px; }
.snr-horn { width: 22px; height: 22px; object-fit: contain; flex: none; }

/* the all-posts page: date headings, and each row says which game it is */
.snr-lede { margin: -10px 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--sn-dim); }
.snr-when {
  margin: 22px 0 10px; padding: 0 0 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--sn-brass));
  background: linear-gradient(90deg, rgba(var(--sn-brass), .34), transparent 60%) left bottom / 100% 1px no-repeat;
}
.snr-when:first-of-type { margin-top: 4px; }
.snr-row-game { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 16px; color: var(--sn-dim); }
.snr-row-game > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snr-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 11px; cursor: pointer;
  touch-action: manipulation;
  color: var(--sn-dim); border: 1px solid transparent; background: none; transition: color .16s, border-color .16s, background .16s;
}
.snr-icon:hover:not(:disabled) { color: var(--sn-ink); border-color: rgba(var(--sn-brass), .4); background: rgba(255, 233, 196, .05); }
.snr-icon:disabled { opacity: .3; cursor: default; }
.snr-icon:focus-visible, .snr-btn:focus-visible, .snr-row:focus-visible, .snr-body a:focus-visible, .snr-spoiler:focus-visible { outline: 2px solid rgb(var(--sn-brass)); outline-offset: 2px; }
@media (pointer: coarse) { .snr-icon { width: 44px; height: 44px; } }

.snr-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(var(--sn-brass), .4) transparent; }
.snr-hero { position: relative; margin: 0; aspect-ratio: 16 / 9; max-height: 380px; width: 100%; overflow: hidden; background: linear-gradient(160deg, #3a2c23, rgb(var(--sn-wood)) 70%); }
.snr-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(180deg, transparent, #14100d); pointer-events: none; }
.snr-post, .snr-list { padding: 4px 30px 30px; }
.snr-list { padding-top: 22px; }
.snr-post { position: relative; margin-top: -34px; animation: snews-rise .4s var(--sn-ease) both; }
.snr-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 12.5px; color: var(--sn-dim); }
.snr-meta .snews-kind { position: static; }
.snr-title { margin: 0 0 16px; font-size: 27px; line-height: 1.14; font-weight: 850; letter-spacing: -.022em; color: #fff7ea; text-wrap: balance; }
.snr-body { font-size: 15.5px; line-height: 1.68; color: #e9dfcf; overflow-wrap: anywhere; }
.snr-body[aria-busy="true"] { display: grid; gap: 12px; padding-top: 4px; }
.snr-body > :first-child { margin-top: 0; }
.snr-body p { margin: 0 0 1em; }
.snr-body h3 { margin: 1.5em 0 .5em; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: #fff7ea; }
.snr-body h4 { margin: 1.4em 0 .45em; font-size: 16.5px; line-height: 1.3; font-weight: 800; color: #fff7ea; }
.snr-body h5 { margin: 1.3em 0 .4em; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgb(var(--sn-brass)); }
.snr-body ul, .snr-body ol { margin: 0 0 1em; padding-left: 1.35em; }
.snr-body li { margin: .3em 0; }
.snr-body li::marker { color: rgb(var(--sn-brass)); }
.snr-body .snr-link { color: #ffcf7a; text-decoration: underline; text-decoration-color: rgba(var(--sn-ember), .5); text-underline-offset: 3px; }
.snr-body .snr-link:hover { text-decoration-color: currentColor; }
.snr-img { display: block; max-width: 100%; height: auto; margin: .7em 0; border-radius: 10px; border: 1px solid rgba(var(--sn-brass), .16); background: rgba(0, 0, 0, .3); }
.snr-video { display: block; width: 100%; margin: .7em 0; border-radius: 10px; background: #000; }
.snr-watch { display: inline-flex; align-items: center; min-height: 44px; margin: .4em 0; padding: 0 16px; border-radius: 10px; font-weight: 700; color: var(--sn-ink); text-decoration: none; border: 1px solid rgba(var(--sn-brass), .4); background: rgba(255, 233, 196, .05); }
.snr-watch:hover { border-color: rgb(var(--sn-brass)); }
.snr-body blockquote { margin: 0 0 1em; padding: 6px 0 6px 16px; border-left: 3px solid rgba(var(--sn-brass), .6); color: var(--sn-dim); }
.snr-body pre { margin: 0 0 1em; padding: 12px 14px; border-radius: 10px; overflow-x: auto; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(0, 0, 0, .4); border: 1px solid rgba(var(--sn-brass), .16); white-space: pre-wrap; }
.snr-rule { height: 1px; margin: 1.5em 0; border: 0; background: linear-gradient(90deg, transparent, rgba(var(--sn-brass), .5), transparent); }
.snr-table { margin: 0 0 1em; overflow-x: auto; }
.snr-table table { border-collapse: collapse; font-size: 14px; }
.snr-table th, .snr-table td { padding: 7px 12px; border: 1px solid rgba(var(--sn-brass), .2); text-align: left; vertical-align: top; }
.snr-table th { color: #fff7ea; background: rgba(255, 233, 196, .05); }
.snr-spoiler { border-radius: 4px; padding: 0 3px; color: transparent; background: rgba(var(--sn-brass), .5); cursor: pointer; transition: color .2s, background .2s; }
.snr-spoiler.is-open, .snr-spoiler:hover, .snr-spoiler:focus { color: inherit; background: rgba(var(--sn-brass), .16); }
.snr-more, .snr-empty { color: var(--sn-mute); font-size: 14px; }

.snr-row {
  display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%;
  margin: 0 0 6px; padding: 10px; border-radius: 14px; border: 1px solid transparent; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  animation: snews-rise .4s var(--sn-ease) both; animation-delay: calc(var(--i, 0) * 45ms);
  transition: background .16s, border-color .16s;
}
.snr-row:hover { background: rgba(255, 233, 196, .045); border-color: rgba(var(--sn-brass), .22); }
.snr-row-art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; border: 1px solid rgba(var(--sn-brass), .22); background: linear-gradient(160deg, #3a2c23, rgb(var(--sn-wood)) 70%); }
.snr-row-art .snews-ph { font-size: 20px; }
.snr-row-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.snr-row-text .snr-meta { margin: 0; }
.snr-row-title { font-size: 16px; line-height: 1.28; font-weight: 750; color: #fff7ea; }
.snr-row-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px; line-height: 1.5; color: var(--sn-dim); }

.snr-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(var(--sn-brass), .16); background: rgba(8, 6, 5, .5); }
.snr-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 11px; cursor: pointer;
  touch-action: manipulation;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--sn-ink);
  border: 1px solid rgba(var(--sn-brass), .32); background: linear-gradient(180deg, rgba(58, 44, 35, .7), rgba(var(--sn-wood), .92));
  transition: border-color .16s, filter .16s, transform .16s var(--sn-ease);
}
.snr-btn img { width: 20px; height: 20px; object-fit: contain; }
.snr-btn:hover { border-color: rgba(var(--sn-brass), .7); }
.snr-btn:active { transform: translateY(1px); }
.snr-btn--lead { color: #1c1206; border-color: transparent; background: linear-gradient(180deg, #ffc65a, rgb(var(--sn-ember))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.snr-btn--lead:hover { filter: brightness(1.08); border-color: transparent; }
.snr-btn--quiet { margin-left: auto; color: var(--sn-dim); background: none; border-color: transparent; }
.snr-btn--quiet:hover { color: var(--sn-ink); }
@media (pointer: coarse) { .snr-btn { min-height: 46px; } }

/* a phone gets the whole screen, and the page slides up from the bottom */
@media (max-width: 640px) {
  .snr-scrim { padding: 0; place-items: end stretch; }
  .snr { width: 100%; max-height: none; height: 100dvh; border-radius: 0; border-width: 0; transform: translateY(40px); padding-top: env(safe-area-inset-top); }
  .snr-post, .snr-list { padding-left: 18px; padding-right: 18px; }
  .snr-title { font-size: 23px; }
  .snr-row { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 8px 4px; }
  .snr-row-sum { display: none; }
  .snr-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .snr-btn { flex: 1 1 auto; justify-content: center; }
  .snr-btn--quiet { margin-left: 0; flex-basis: 100%; }
}
/* On /m the reader is appended to <body> AFTER the page's own bottom sheet, so
   at the same z-index it painted over the menu it had just opened. It belongs
   under the sheet (220) and the toast (225), and under the app lock (230) and
   the privacy shield, which must cover everything. */
.snr-scrim.snr--phone { z-index: 218; }

@media (prefers-reduced-motion: reduce) {
  .snews-card, .snews-img, .snr-hero-img, .snr-row-img, .snews-tool, .snews-tool-art img, .snews-fold, .snews-fold-in,
  .snr-scrim, .snr, .snr-row, .snr-post, .slink, .slink-horn, .slink-go, .snr-btn { animation: none !important; transition: none !important; }
  .snews.snews-in .snews-card, .snews.snews-in .snews-horn { animation: none !important; }
  .snews-skel .snews-art, .snews-line { animation: none; }
  .snews-card.is-waiting { opacity: 1; transform: none; }
}

.steam-tile--personal:focus-visible { outline: 2px solid rgb(198, 160, 94); outline-offset: 3px; }