/* Ropeak Badges, live (/badges): seo.js's snapshot, hydrated and kept live by
   public/badge-feed.js. The newest award stands on a lit stage with its game's
   icon; the ones before it run below as a feed. The stage, stickers and
   confetti echo the badge pages (badge.css) on the site's own glass and tokens,
   so both themes share these rules. Nothing loops at rest. */

/* Each art family's light: an accent and a second tone (RGB triplets), the
   headline gradient and the sticker's resting angle, as on the badge pages.
   Keyed by the art name, so the server's markup is coloured before any script. */
:is(.badge-feed,.feed-fly) [data-art] {
  --accent-rgb:157 172 196;
  --accent-2-rgb:206 216 232;
  --mark:linear-gradient(100deg,#3d4b64 0%,#7b89a2 46%,#34415a 100%);
  --rest:-4deg
}

:is(.badge-feed,.feed-fly) [data-art^=peak-] {
  --accent-rgb:47 107 255;
  --accent-2-rgb:255 211 74;
  --mark:linear-gradient(100deg,#1846d8 0%,#3d82ff 52%,#2437b8 100%);
  --rest:2deg
}

:is(.badge-feed,.feed-fly) :is([data-art=visits-100m],[data-art=players-10k],[data-art=genre-2],[data-art=peak-2]) {
  --accent-rgb:157 172 196;
  --accent-2-rgb:206 216 232;
  --mark:linear-gradient(100deg,#3d4b64 0%,#7b89a2 46%,#34415a 100%);
  --rest:-4deg
}

:is(.badge-feed,.feed-fly) :is([data-art=visits-10m],[data-art=players-1k],[data-art=genre-3],[data-art=peak-3]) {
  --accent-rgb:214 124 66;
  --accent-2-rgb:255 210 168;
  --mark:linear-gradient(100deg,#9b4b19 0%,#d97b3c 50%,#8a4219 100%);
  --rest:-3deg
}

:is(.badge-feed,.feed-fly) :is([data-art=visits-1b],[data-art=players-100k],[data-art=genre-1]) {
  --accent-rgb:255 186 38;
  --accent-2-rgb:255 228 150;
  --mark:linear-gradient(100deg,#c27a00 0%,#f5ad16 42%,#b36400 100%);
  --rest:3deg
}

:is(.badge-feed,.feed-fly) [data-art=visits-10b] {
  --accent-rgb:150 128 255;
  --accent-2-rgb:120 226 255;
  --mark:linear-gradient(100deg,#5d6bff 0%,#a95cff 34%,#f2559b 66%,#1fb3d8 100%);
  --rest:-2deg
}

/* Omega (100B), the rarest: obsidian with prismatic light. */
:is(.badge-feed,.feed-fly) [data-art=visits-100b] {
  --accent-rgb:124 92 255;
  --accent-2-rgb:255 170 220;
  --mark:linear-gradient(100deg,#1b1533 0%,#5338e0 34%,#c93c8f 68%,#d97a06 100%);
  --rest:-3deg
}

:is(.badge-feed,.feed-fly) :is([data-art=players-1m],[data-art=peak-1]) {
  --accent-rgb:251 10 54;
  --accent-2-rgb:255 170 70;
  --mark:linear-gradient(100deg,#fb0a36 0%,#ff4a1f 55%,#ff8a00 100%);
  --rest:4deg
}

:is(.badge-feed,.feed-fly) [data-art=veteran] {
  --accent-rgb:22 163 110;
  --accent-2-rgb:196 240 214;
  --mark:linear-gradient(100deg,#0b6b47 0%,#18a673 50%,#0a5a3c 100%);
  --rest:2deg
}

[data-theme=dark] .badge-feed [data-art] {
  --mark:linear-gradient(100deg,#c9d4e6 0%,#ffffff 46%,#a9b7cd 100%)
}

[data-theme=dark] .badge-feed [data-art^=peak-] {
  --mark:linear-gradient(100deg,#6d9dff 0%,#a9c6ff 52%,#5b86ff 100%)
}

[data-theme=dark] .badge-feed :is([data-art=visits-100m],[data-art=players-10k],[data-art=genre-2],[data-art=peak-2]) {
  --mark:linear-gradient(100deg,#c9d4e6 0%,#ffffff 46%,#a9b7cd 100%)
}

[data-theme=dark] .badge-feed :is([data-art=visits-10m],[data-art=players-1k],[data-art=genre-3],[data-art=peak-3]) {
  --mark:linear-gradient(100deg,#e7955e 0%,#ffc79c 50%,#d47c43 100%)
}

[data-theme=dark] .badge-feed :is([data-art=visits-1b],[data-art=players-100k],[data-art=genre-1]) {
  --mark:linear-gradient(100deg,#ffc94a 0%,#ffe9a6 45%,#f0a419 100%)
}

[data-theme=dark] .badge-feed [data-art=visits-10b] {
  --mark:linear-gradient(100deg,#8f9bff 0%,#d08cff 34%,#ff8cc0 66%,#6fe0ff 100%)
}

[data-theme=dark] .badge-feed [data-art=visits-100b] {
  --mark:linear-gradient(100deg,#b9a8ff 0%,#ffffff 34%,#ff9fd0 68%,#ffd27a 100%)
}

[data-theme=dark] .badge-feed :is([data-art=players-1m],[data-art=peak-1]) {
  --mark:linear-gradient(100deg,#ff3a5c 0%,#ff7040 55%,#ffad33 100%)
}

[data-theme=dark] .badge-feed [data-art=veteran] {
  --mark:linear-gradient(100deg,#3fd69a 0%,#b5f2d6 50%,#2fbf86 100%)
}

.badge-feed {
  width:100%;
  max-width:1000px;
  margin:0 auto
}

/* Heading: the title on the left; Sound and the live meter on the right. */
.feed-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:end;
  column-gap:10px;
  margin-bottom:26px
}

.feed-heading h1 {
  margin-bottom:10px
}

.feed-status {
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:42px;
  padding:0 18px 0 16px;
  border:1px solid var(--control-edge);
  border-radius:var(--radius-control);
  background:var(--control-fill);
  color:var(--text-3);
  font-size:13.5px;
  white-space:nowrap
}

.feed-stat {
  display:inline-flex;
  align-items:center;
  gap:5px
}

.feed-stat::before {
  content:'';
  width:1px;
  height:16px;
  margin-right:9px;
  background:var(--control-edge)
}

.feed-stat strong {
  color:var(--ink);
  font-weight:650;
  font-variant-numeric:tabular-nums
}

.feed-live {
  display:inline-flex;
  align-items:center;
  color:var(--ink);
  font-weight:650
}

.feed-live .live-dot {
  position:relative;
  margin-right:9px;
  transition:background-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)
}

/* One ring per successful check: live without anything looping. */
.feed-live-ring {
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#08ba75;
  opacity:0
}

.feed-live.is-offline {
  color:var(--text-3)
}

.feed-live.is-offline .live-dot {
  background:var(--text-4);
  box-shadow:0 0 0 4px var(--segment-track)
}

.feed-sound {
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:42px;
  padding:0 17px 0 14px;
  border:1px solid var(--control-edge);
  border-radius:var(--radius-control);
  background:var(--control-fill);
  color:var(--text-3);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.01em;
  transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)
}

.feed-sound:hover {
  background:var(--control-fill-hover);
  border-color:var(--control-edge-hover);
  color:var(--ink)
}

.feed-sound:active {
  transform:scale(.97)
}

.feed-sound[aria-pressed=true] {
  color:var(--ink)
}

.feed-sound[aria-pressed=true] .sound-off,.feed-sound[aria-pressed=false] .sound-on {
  display:none
}

/* The stage: the latest award, lit in its family's colour. The light is
   clipped to the card; the sticker itself falls in from above it. */
.feed-hero,.feed-empty {
  position:relative;
  isolation:isolate;
  border:1px solid var(--glass-edge);
  border-radius:28px;
  background:var(--glass-fill)
}

.feed-hero {
  box-shadow:var(--glass-highlight),0 1px 2px #0f22480a,0 30px 60px -34px rgb(var(--accent-rgb)/.45)
}

.feed-stage {
  position:relative
}

.feed-hero.is-leaving {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none
}

.feed-hero.is-flown :is(.feed-game-icon,.feed-sticker) {
  visibility:hidden
}

[data-theme=dark] .feed-hero {
  box-shadow:var(--glass-highlight),0 1px 2px #0000002e,0 30px 70px -36px rgb(var(--accent-rgb)/.5)
}

.feed-empty {
  padding:70px 24px;
  box-shadow:var(--glass-highlight),var(--glass-shadow);
  color:var(--text-3);
  text-align:center
}

.feed-hero-bg {
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none
}

.feed-glow,.feed-rays {
  position:absolute;
  left:31%;
  top:50%;
  aspect-ratio:1;
  border-radius:50%;
  translate:-50% -50%
}

.feed-glow {
  width:min(760px,130%);
  background:radial-gradient(closest-side,rgb(var(--accent-2-rgb)/.55) 0%,rgb(var(--accent-rgb)/.2) 42%,rgb(var(--accent-rgb)/.06) 68%,transparent 100%)
}

.feed-rays {
  width:min(700px,120%);
  background:repeating-conic-gradient(from 4deg,rgb(var(--accent-rgb)/.18) 0deg,transparent 3.5deg 11.5deg,rgb(var(--accent-rgb)/.18) 15deg);
  -webkit-mask:radial-gradient(closest-side,#000 16%,#0000 70%);
  mask:radial-gradient(closest-side,#000 16%,#0000 70%)
}

[data-theme=dark] .feed-glow {
  background:radial-gradient(closest-side,rgb(var(--accent-rgb)/.5) 0%,rgb(var(--accent-rgb)/.2) 42%,rgb(var(--accent-rgb)/.06) 70%,transparent 100%)
}

[data-theme=dark] .feed-rays {
  opacity:.8
}

/* One grid holds the art and the words: the copy's wrappers step aside, so
   the game's icon joins its new badge on the left. */
.feed-hero-link {
  display:grid;
  grid-template-columns:minmax(0,430px) minmax(0,1fr);
  grid-template-rows:1fr repeat(5,auto) 1fr;
  column-gap:20px;
  min-height:340px;
  padding:30px 48px 30px 22px;
  color:inherit;
  border-radius:inherit
}

.feed-hero-link:focus-visible {
  outline-offset:-4px
}

.feed-hero-copy,.feed-game {
  display:contents
}

.feed-hero .feed-game-icon {
  grid-area:1/1/-1/2;
  align-self:center;
  justify-self:start;
  z-index:0;
  width:148px;
  height:148px;
  margin:0 0 22px 30px;
  box-shadow:0 1px 2px #0f22481a,0 18px 34px -16px #0f224859
}

.feed-game-icon {
  display:block;
  object-fit:cover;
  border-radius:22%;
  background:var(--surface-raised);
  outline:1px solid var(--glass-edge);
  outline-offset:-1px
}

.feed-sticker,.feed-hero-link>.feed-hero-art {
  grid-area:1/1/-1/2;
  align-self:center;
  justify-self:end;
  z-index:1;
  position:relative;
  width:250px;
  height:250px;
  margin-right:4px;
  rotate:var(--rest)
}

.feed-hero-art,.feed-smear {
  display:block;
  width:100%;
  height:100%;
  transform-origin:50% 86%;
  -webkit-user-drag:none
}

.feed-sticker>:is(.feed-hero-art,.feed-smear) {
  position:absolute;
  inset:0
}

.feed-hero-art,.feed-fly-art {
  filter:url(#feed-die-cut) drop-shadow(0 1px 1px rgb(15 34 72/.18)) drop-shadow(0 14px 18px rgb(15 34 72/.2))
}

[data-theme=dark] :is(.feed-hero-art,.feed-fly-art) {
  filter:url(#feed-die-cut) drop-shadow(0 1px 1px rgb(0 0 0/.35)) drop-shadow(0 16px 22px rgb(0 0 0/.42))
}

.feed-smear {
  opacity:0;
  pointer-events:none
}

.feed-shadow,.feed-ring,.feed-shine {
  position:absolute;
  pointer-events:none
}

.feed-shadow {
  left:16%;
  right:16%;
  bottom:-5%;
  height:11%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgb(15 34 72/.22),transparent)
}

[data-theme=dark] .feed-shadow {
  background:radial-gradient(closest-side,rgb(0 0 0/.5),transparent)
}

/* The shockwave along the stage where the sticker lands. */
.feed-ring {
  left:2%;
  right:2%;
  bottom:-6%;
  height:26%;
  border:2px solid rgb(var(--accent-rgb)/.6);
  border-radius:50%;
  box-shadow:0 0 18px rgb(var(--accent-rgb)/.3);
  opacity:0
}

/* The glint sweeps on a layer of its own: painted in with the sticker, every
   frame of the sweep re-ran the art's die-cut filter and drop shadows, and the
   confetti stuttered. It is pure white, so it needs no blend mode (white
   screened is white), and a blended layer would need a surface of its own. */
.feed-shine {
  inset:0;
  background:linear-gradient(112deg,transparent 43%,rgb(255 255 255/.18) 46%,rgb(255 255 255/.72) 49.5%,rgb(255 255 255/.18) 53%,transparent 56%);
  background-size:300% 100%;
  background-position:100% 0;
  -webkit-mask:var(--art) center/contain no-repeat;
  mask:var(--art) center/contain no-repeat;
  will-change:transform
}

.feed-hero .feed-time {
  grid-area:2/2;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 13px 6px 11px;
  border:1px solid rgb(var(--accent-rgb)/.3);
  border-radius:var(--radius-control);
  background:rgb(var(--accent-rgb)/.1);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.3;
  white-space:nowrap
}

.feed-hero .feed-time::before {
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgb(var(--accent-rgb));
  box-shadow:0 0 0 3px rgb(var(--accent-rgb)/.2)
}

.feed-hero .feed-game-name {
  grid-area:3/2;
  min-width:0;
  margin-top:20px;
  overflow:hidden;
  color:var(--ink);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap
}

.feed-hero-title {
  grid-area:4/2;
  min-width:0;
  margin-top:6px;
  color:var(--text-3);
  font-size:15px;
  font-weight:500;
  letter-spacing:0;
  line-height:1.4
}

.feed-hero-title strong {
  display:block;
  width:fit-content;
  max-width:100%;
  margin-top:2px;
  padding-right:.04em;
  background:var(--mark);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:clamp(34px,4.6vw,56px);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1.06;
  overflow-wrap:anywhere
}

.feed-proof {
  grid-area:5/2;
  justify-self:start;
  max-width:100%;
  margin-top:18px;
  padding:7px 14px;
  border:1px solid var(--control-edge);
  border-radius:16px;
  background:var(--control-fill);
  color:var(--text-2);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  line-height:1.45
}

.feed-proof:empty {
  display:none
}

.feed-hero-copy::after {
  content:'See the badge →';
  grid-area:6/2;
  justify-self:start;
  margin-top:22px;
  color:var(--ink);
  font-size:14px;
  font-weight:650;
  transition:translate var(--t-base) var(--ease-out)
}

.feed-hero-link:hover .feed-hero-copy::after {
  translate:4px 0
}

/* The feed: one card per award, the game's icon with its badge beside it. */
.feed-list-title {
  margin:34px 6px 14px;
  color:var(--text-2);
  font-size:15px;
  font-weight:650;
  letter-spacing:-.01em
}

.feed-list {
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none
}

.feed-card {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  min-height:80px;
  padding:10px 22px 10px 14px;
  border:1px solid var(--glass-edge);
  border-radius:20px;
  background:var(--glass-fill);
  box-shadow:var(--glass-highlight),var(--glass-shadow);
  color:inherit;
  transition:border-color var(--t-fast) var(--ease-out)
}

.feed-card:hover {
  border-color:var(--glass-edge-strong)
}

/* A little of the badge's light behind it. */
.feed-card::before {
  content:'';
  position:absolute;
  z-index:-1;
  left:40px;
  top:50%;
  width:96px;
  height:96px;
  translate:0 -50%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgb(var(--accent-rgb)/.22),transparent);
  pointer-events:none
}

.feed-card .feed-game-icon {
  width:52px;
  height:52px
}

.feed-art {
  display:block;
  width:60px;
  height:60px;
  margin:-4px 18px -4px -8px;
  rotate:var(--rest);
  filter:url(#feed-die-cut-sm) drop-shadow(0 5px 7px rgb(15 34 72/.2));
  transition:rotate var(--t-spring) var(--ease-spring),scale var(--t-spring) var(--ease-spring)
}

[data-theme=dark] .feed-art {
  filter:url(#feed-die-cut-sm) drop-shadow(0 5px 9px rgb(0 0 0/.45))
}

.feed-card:hover .feed-art,.feed-card:focus-visible .feed-art {
  rotate:0deg;
  scale:1.08
}

.feed-item.is-landing :is(.feed-game-icon,.feed-art) {
  opacity:0
}

.feed-card-copy {
  display:flex;
  flex-direction:column;
  min-width:0
}

.feed-label {
  width:fit-content;
  max-width:100%;
  overflow:hidden;
  background:var(--mark);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:15.5px;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.feed-card .feed-game-name {
  overflow:hidden;
  color:var(--text-2);
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap
}

.feed-card .feed-time {
  margin-left:16px;
  color:var(--text-3);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

/* The previous award on its way from the stage into the feed. */
.feed-fly {
  position:fixed;
  inset:0;
  z-index:30;
  pointer-events:none
}

.feed-fly img {
  position:absolute;
  display:block;
  will-change:transform
}

.feed-fly-icon {
  object-fit:cover;
  border-radius:22%
}

.feed-fly-art {
  rotate:var(--rest)
}

.feed-confetti {
  position:fixed;
  z-index:60;
  inset:0;
  pointer-events:none
}

.feed-filters {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

@media(max-width:980px) {
  .feed-hero-link {
    grid-template-columns:minmax(0,360px) minmax(0,1fr);
    padding-right:34px
  }
  .feed-hero .feed-game-icon {
    width:128px;
    height:128px;
    margin-left:16px
  }
  .feed-sticker,.feed-hero-link>.feed-hero-art {
    width:220px;
    height:220px
  }
}

@media(max-width:760px) {
  .feed-heading {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px 12px;
    margin-bottom:20px
  }
  .feed-heading .feed-sound {
    grid-area:1/2;
    align-self:start;
    justify-content:center;
    width:42px;
    margin:6px 0 0;
    padding:0
  }
  .feed-sound span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap
  }
  .feed-heading .feed-status {
    grid-area:2/1/3/-1;
    justify-self:start;
    margin:0
  }
  .feed-hero,.feed-empty {
    border-radius:24px
  }
  .feed-hero-link {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:212px repeat(5,auto);
    justify-items:center;
    min-height:0;
    padding:16px 20px 26px;
    text-align:center
  }
  .feed-hero .feed-game-icon {
    grid-area:1/1;
    justify-self:center;
    width:104px;
    height:104px;
    margin:0 180px 16px 0
  }
  .feed-sticker,.feed-hero-link>.feed-hero-art {
    grid-area:1/1;
    justify-self:center;
    width:180px;
    height:180px;
    margin:0 0 0 100px
  }
  .feed-glow,.feed-rays {
    left:50%;
    top:28%
  }
  .feed-hero .feed-time {
    grid-area:2/1;
    justify-self:center
  }
  .feed-hero .feed-game-name {
    grid-area:3/1;
    max-width:100%;
    margin-top:16px;
    font-size:20px
  }
  .feed-hero-title {
    grid-area:4/1
  }
  .feed-hero-title strong {
    margin-inline:auto;
    font-size:clamp(30px,9vw,40px)
  }
  .feed-proof {
    grid-area:5/1;
    justify-self:center;
    margin-top:16px
  }
  .feed-hero-copy::after {
    grid-area:6/1;
    justify-self:center;
    margin-top:18px
  }
  .feed-list-title {
    margin-top:26px
  }
  .feed-card {
    min-height:72px;
    padding:9px 16px 9px 10px;
    border-radius:18px
  }
  .feed-card::before {
    left:30px;
    width:80px;
    height:80px
  }
  .feed-card .feed-game-icon {
    width:44px;
    height:44px
  }
  .feed-art {
    width:52px;
    height:52px;
    margin:-4px 12px -4px -7px
  }
  .feed-label {
    font-size:14.5px
  }
  .feed-card .feed-game-name {
    font-size:13.5px
  }
  .feed-card .feed-time {
    margin-left:10px;
    font-size:12px
  }
}

@media(max-width:420px) {
  /* Only the total fits beside Live on narrow phones. */
  .feed-stat+.feed-stat {
    display:none
  }
  .feed-hero-link {
    grid-template-rows:190px repeat(5,auto)
  }
  .feed-hero .feed-game-icon {
    width:88px;
    height:88px;
    margin:0 150px 14px 0
  }
  .feed-sticker,.feed-hero-link>.feed-hero-art {
    width:156px;
    height:156px;
    margin-left:84px
  }
  /* The time moves under the game's name, so a long label keeps its width. */
  .feed-card {
    grid-template-columns:auto auto minmax(0,1fr)
  }
  .feed-card>:is(.feed-game-icon,.feed-art) {
    grid-row:1/3
  }
  .feed-card-copy {
    grid-area:1/3
  }
  .feed-card .feed-time {
    grid-area:2/3;
    justify-self:start;
    margin:1px 0 0;
    color:var(--text-4)
  }
  .feed-status {
    gap:10px;
    padding:0 14px 0 12px;
    font-size:12.5px
  }
  .feed-stat::before {
    margin-right:5px
  }
  .feed-proof {
    font-size:12.5px
  }
}

/* The narrowest phones keep the total and drop the day count from the meter. */
@media(max-width:359px) {
  .feed-stat+.feed-stat {
    display:none
  }
}