.hello { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.hello h1 { margin: 0; }


.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 30px; }
.grid .card { margin: 0; min-width: 0; }
.grid .span { grid-column: 1 / -1; }
.big { font-size: 20px; font-weight: 700; margin: 0 0 2px; letter-spacing: -0.01em; }
.card p { margin: 0 0 6px; }

.wx-now { display: flex; align-items: baseline; gap: 10px; }
.wx-temp { font-size: 34px; font-weight: 750; letter-spacing: -0.03em; }
.wx-next { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.wx-alert { margin-top: 8px; padding: 6px 10px; border-radius: 0; background: color-mix(in srgb, var(--warn) 15%, transparent); font-size: 13px; }

#parking-card.paying { border-color: var(--accent); }
#parking-card.free { border-color: var(--good); }

.games-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta { display: flex; gap: 8px; flex-wrap: wrap; }

.mini-events { list-style: none; margin: 0 0 8px; padding: 0; }
.mini-events li { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mini-events li:last-child { border-bottom: 0; }
.mini-events .t { font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-events a { color: var(--text); text-decoration: none; }
.mini-events a:hover { color: var(--accent); }
.mini-events .v { color: var(--muted); font-size: 12px; }

#hood { width: 100%; margin-bottom: 10px; }
.hood-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hood-stats div { border: 1px solid var(--ink); border-radius: 0; padding: 8px; }
.hood-stats b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.hood-stats span { font-size: 11px; color: var(--muted); }

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}

.today-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.door-link { text-decoration: none; font-size: 18px; opacity: 0.35; transition: opacity 0.2s; }
.door-link:hover, .door-link:focus-visible { opacity: 1; }

.hello-side { display: flex; align-items: flex-end; gap: 10px; }
.hello h1 { font-size: clamp(30px, 4.2vw, 46px); margin: 2px 0 0; }
.checkin-nudge { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--ink); color: var(--paper); padding: 14px 18px; border-top: 0; }
.checkin-nudge .display { font-size: 26px; text-transform: uppercase; }
.checkin-nudge .muted { color: inherit; opacity: .8; margin: 2px 0 0; }
.checkin-nudge .btn { background: var(--red); border-color: var(--red); color: #f3ece1; }
.wx-temp { font-family: var(--font-display); font-weight: 900; }
.big { font-family: var(--font-hand); font-size: 28px; font-weight: 400; line-height: 1.1; }
@media (max-width: 640px) { .hello h1 { font-size: 28px; } }

.nameplate .huge { font-size: clamp(64px, 16vw, 200px); }
.mini-events li { border-bottom: 1px solid var(--line); }
.mini-events .t { font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
.mini-events a { font-family: var(--font-hand); font-size: 21px; line-height: 1.15; }
.hood-stats div { border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 6px 0; }
.hood-stats b { font-family: var(--font-display); font-weight: 900; font-size: 30px; }
.today-foot { border-top: 3px double var(--ink); }

/* Desktop pairs: weather + bars, feature requests + games, parking + tonight.
   The profile stays full width; mobile follows the same reading order. */
.games-row { flex-direction: column; align-items: flex-start; gap: 10px; }
#games-card .cta { width: 100%; }
#bars-card.open { border-color: var(--good); }
#bars-card.shut { border-color: var(--line); }

/* ======================================================================
   Living card backgrounds.

   Each front-page card carries a scene behind its text instead of the same
   flat paper: the weather card wears the sky that is actually outside, the
   parking card goes green or amber with the meters, the bars card lights up
   when somewhere is open. The art sits in ::after at z-index 0 with the text
   lifted above it, so nothing here can swallow a click or a tap target.

   Every motion rule is paused under prefers-reduced-motion at the bottom.
   ====================================================================== */

/* No overflow:hidden here. The label chips are positioned to overhang the
   card's top edge, and clipping the card sliced every one of them in half.
   The art is inset:0 and inherits the radius, so it stays inside on its own. */
.grid .card { position: relative; isolation: isolate; }
.grid .card > * { position: relative; z-index: 1; }
.grid .card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  opacity: .9; transition: opacity .3s ease, transform .5s var(--spring);
}
.grid .card:hover::after { opacity: 1; transform: scale(1.04); }

/* ---- weather: the sky that is actually outside ---- */
#weather-card::after { background: linear-gradient(180deg, rgb(130 190 235 / .34), transparent 62%); }
#weather-card[data-sky="clear-day"]::after {
  background:
    radial-gradient(circle at 86% 12%, rgb(255 210 63 / .55), rgb(255 210 63 / 0) 34%),
    linear-gradient(180deg, rgb(120 190 240 / .4), transparent 66%);
}
/* The sun is drawn into ::after's gradient stack, not a ::before of its own:
   base.css already uses .card::before for the dashed rule across the top, and
   taking it for decoration silently deleted that rule from this one card. */
#weather-card[data-sky="clear-night"]::after {
  background:
    radial-gradient(1.4px 1.4px at 18% 22%, #fff8d8 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 44% 14%, #fff8d8 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 68% 30%, #fff8d8 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 86% 18%, #fff8d8 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 30% 40%, #fff8d8 50%, transparent 52%),
    linear-gradient(180deg, rgb(28 40 86 / .55), transparent 70%);
  animation: twinkle 5s ease-in-out infinite;
}
@keyframes twinkle { 50% { opacity: .62; } }
#weather-card[data-sky="cloud"]::after {
  background:
    radial-gradient(60px 26px at 20% 20%, rgb(255 255 255 / .75), transparent 70%),
    radial-gradient(80px 30px at 62% 14%, rgb(255 255 255 / .6), transparent 72%),
    radial-gradient(50px 22px at 92% 26%, rgb(255 255 255 / .5), transparent 72%),
    linear-gradient(180deg, rgb(140 160 180 / .4), transparent 68%);
  background-size: 200% 100%, 200% 100%, 200% 100%, 100% 100%;
  animation: cloud-drift 60s linear infinite;
}
@keyframes cloud-drift { to { background-position: 200% 0, -200% 0, 200% 0, 0 0; } }
#weather-card[data-sky="rain"]::after {
  background:
    repeating-linear-gradient(104deg, rgb(90 150 200 / .34) 0 1.5px, transparent 1.5px 9px),
    linear-gradient(180deg, rgb(90 120 150 / .42), transparent 72%);
  background-size: 100% 22px, 100% 100%;
  animation: rain-fall .62s linear infinite;
}
@keyframes rain-fall { to { background-position: 0 22px, 0 0; } }
#weather-card[data-sky="snow"]::after {
  background:
    radial-gradient(2px 2px at 20% 20%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 55% 40%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 80% 15%, #fff 50%, transparent 52%),
    linear-gradient(180deg, rgb(200 220 240 / .5), transparent 72%);
  background-size: 120px 90px, 120px 90px, 120px 90px, 100% 100%;
  animation: snow-fall 9s linear infinite;
}
@keyframes snow-fall { to { background-position: 10px 90px, -14px 90px, 6px 90px, 0 0; } }
#weather-card[data-sky="storm"]::after {
  background: linear-gradient(180deg, rgb(60 70 110 / .55), transparent 74%);
  animation: storm-flash 7s steps(1, end) infinite;
}
@keyframes storm-flash { 0%, 92% { box-shadow: none; } 93%, 95% { box-shadow: inset 0 0 70px rgb(255 250 210 / .75); } 96%, 100% { box-shadow: none; } }

/* ---- parking: the colour of the meters ---- */
#parking-card.free::after {
  background:
    repeating-linear-gradient(90deg, rgb(46 107 69 / .16) 0 10px, transparent 10px 26px),
    linear-gradient(180deg, rgb(46 107 69 / .2), transparent 60%);
  background-size: 52px 100%, 100% 100%;
  animation: meter-run 14s linear infinite;
}
#parking-card.paying::after {
  background:
    repeating-linear-gradient(90deg, rgb(196 71 43 / .18) 0 10px, transparent 10px 26px),
    linear-gradient(180deg, rgb(196 71 43 / .22), transparent 60%);
  background-size: 52px 100%, 100% 100%;
  animation: meter-run 5s linear infinite;
}
@keyframes meter-run { to { background-position: 52px 0, 0 0; } }

/* ---- bars: a dusk strip that lights up when somewhere is open ---- */
#bars-card::after { background: linear-gradient(180deg, rgb(40 50 90 / .3), rgb(216 134 74 / .22) 70%, transparent); }
#bars-card.open::after {
  background:
    radial-gradient(5px 5px at 14% 76%, rgb(255 210 63 / .95), transparent 60%),
    radial-gradient(4px 4px at 38% 84%, rgb(255 126 182 / .9), transparent 60%),
    radial-gradient(5px 5px at 63% 72%, rgb(92 200 240 / .9), transparent 60%),
    radial-gradient(4px 4px at 86% 82%, rgb(255 210 63 / .9), transparent 60%),
    linear-gradient(180deg, rgb(40 50 90 / .32), rgb(216 134 74 / .26) 72%, transparent);
  animation: neon-pulse 3.4s ease-in-out infinite;
}
@keyframes neon-pulse { 50% { filter: brightness(1.45); } }

/* ---- profile card: warm sunrise glow & starburst ---- */
#profile-card::after {
  background:
    radial-gradient(circle at 88% 22%, rgb(232 149 90 / .32), transparent 45%),
    radial-gradient(circle at 12% 78%, rgb(216 75 92 / .2), transparent 42%),
    radial-gradient(circle at 55% 45%, rgb(255 210 63 / .18), transparent 55%),
    linear-gradient(135deg, rgb(255 210 63 / .12), transparent 60%);
  animation: prof-glow 8s ease-in-out infinite alternate;
}
@keyframes prof-glow {
  0% { opacity: .85; }
  100% { opacity: 1; filter: saturate(1.2); }
}

/* ---- games: halftone drifting under the dice ---- */
#games-card::after {
  background: var(--tex-halftone), linear-gradient(135deg, rgb(255 210 63 / .22), transparent 55%);
  background-size: 8px 8px, 100% 100%;
  animation: halftone-drift 26s linear infinite;
}
@keyframes halftone-drift { to { background-position: 80px 48px, 0 0; } }

/* ---- tonight: marquee bulbs along the top edge ---- */
#tonight-card::after {
  background:
    radial-gradient(3.5px 3.5px at 12px 10px, rgb(255 210 63 / .95), transparent 55%),
    linear-gradient(180deg, rgb(196 71 43 / .14), transparent 48%);
  background-size: 34px 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  animation: marquee-bulbs 1.8s steps(2, end) infinite;
}
@keyframes marquee-bulbs { 50% { opacity: .55; } }

/* ---- your neighborhood: contour lines off a map ---- */
#hood-card::after {
  background: repeating-radial-gradient(circle at 78% 112%, transparent 0 16px, rgb(27 26 23 / .09) 16px 17px);
}

/* ---- Fix STL: a blueprint with a slow scan ----
   The card is archived out of index.html; these rules are kept so putting the
   section back is a one-file change. ---- */
#fix-card::after {
  background:
    linear-gradient(0deg, transparent 0 48%, rgb(61 127 166 / .18) 48% 52%, transparent 52%),
    repeating-linear-gradient(0deg, rgb(61 127 166 / .1) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgb(61 127 166 / .1) 0 1px, transparent 1px 14px);
  background-size: 100% 220%, 100% 100%, 100% 100%;
  animation: blueprint-scan 7s linear infinite;
}
@keyframes blueprint-scan { to { background-position: 0 220%, 0 0, 0 0; } }

:root[data-theme="dark"] .grid .card::after { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .grid .card::after { animation: none !important; }
  .grid .card:hover::after { transform: none; }
}

@media (max-width: 720px) {
  /* The nameplate's own clamp is 16vw, which is 62px on a phone and eats the
     first screen on its own. */
  .nameplate .huge { font-size: clamp(38px, 11.5vw, 56px); }
  .hello { margin-bottom: 14px; padding-bottom: 10px; }
  .hello h1 { font-size: 26px; }
  .hello-side .btn { padding: 9px 14px; }
}

/* ======================================================================
   Card design: a label, the one number that matters, the detail, and a
   single obvious way in.

   The way in used to be a 13px text link with an arrow glued on — fine with
   a mouse, a poor target with a thumb. It is now a full-width row at the
   foot of the card, and on the cards whose only action is "go to that zone"
   the link stretches over the whole card, so the card IS the button.
   ====================================================================== */
.grid .card { display: flex; flex-direction: column; }
.grid .card .go {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; min-height: 44px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ink); transition: transform .2s var(--spring), background .15s, box-shadow .2s;
}
.grid .card .go::after { content: "→"; font-size: 15px; }
.grid .card .go:hover, .grid .card .go:focus-visible { background: var(--pop); color: var(--pop-ink); transform: translate(-1px, -2px); box-shadow: 3px 4px 0 var(--ink); }

/* A stretched link turns the whole card into one target without nesting any
   interactive element inside another. z-index 2 keeps it over the card art. */
.grid .card .go.stretch::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.grid .card:has(.go.stretch) { cursor: pointer; }
.grid .card:has(.go.stretch):hover .go { background: var(--pop); color: var(--pop-ink); }

.grid .card .big { margin-bottom: 4px; }
.grid .card > h2 { margin-bottom: 8px; }
.grid .card p.muted.small { margin-bottom: 12px; }

@media (max-width: 720px) {
  /* One column, tighter everything, and no card so tall it needs its own scroll. */
  .grid { gap: 14px; }
  .grid .card { padding: 12px 14px 14px; margin-bottom: 0; }
  .big { font-size: 24px; }
  .wx-temp { font-size: 40px; }
  .wx-next { gap: 10px; font-size: 12px; }
  .hood-stats { gap: 6px; }
  .hood-stats b { font-size: 24px; }
  .mini-events li { grid-template-columns: 62px 1fr; font-size: 13px; }
  .mini-events a { font-size: 18px; }
  .games-row .cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .games-row .cta .btn { justify-content: center; text-align: center; }
  .checkin-nudge { padding: 12px 14px; }
  .checkin-nudge .display { font-size: 20px; }
  .today-foot { margin-top: 18px; flex-wrap: wrap; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .grid .card .go { transition: none; }
  .grid .card .go:hover { transform: none; }
}
/* The label chip hugs its text instead of stretching the card's width. */
.grid .card > h2 { width: fit-content; max-width: 100%; }

/* ---- a watermark so each card is identifiable at a glance ----
   Set as a big, very faint glyph in the corner. It is decorative, sits under
   the text at z-index 0, and is never read aloud. */
.grid .card .mark {
  position: absolute; right: 6px; bottom: -6px; z-index: 0; pointer-events: none;
  font-size: 92px; line-height: 1; opacity: .09; filter: grayscale(.2);
  transition: transform .5s var(--spring), opacity .3s ease;
}
.grid .card:hover .mark { transform: rotate(-8deg) scale(1.08); opacity: .14; }
@media (max-width: 720px) { .grid .card .mark { font-size: 72px; right: 2px; } }
@media (prefers-reduced-motion: reduce) { .grid .card .mark { transition: none; } .grid .card:hover .mark { transform: none; } }

/* ---- each card's label wears that card's colour ----
   All eight chips were the same gold, so the only thing separating one card
   from the next was the words in it. The chip is the first thing the eye
   lands on, so it is the cheapest place to put the identity. */
#profile-card > h2 { background: #e8955a; }
#weather-card > h2 { background: #8fc2e8; }
#bars-card > h2 { background: #e0a82e; }
#games-card > h2 { background: #74c08c; }
#parking-card > h2 { background: #cfcabc; }
#parking-card.free > h2 { background: #7fc39a; }
#parking-card.paying > h2 { background: #e8a07f; }
#tonight-card > h2 { background: #b9a9e8; }
#hood-card > h2 { background: #e8b59a; }
#fix-card > h2 { background: #93c6dd; }

#profile-card { --card-bg: color-mix(in srgb, #e8955a 14%, var(--paper-2)); }
#weather-card { --card-bg: color-mix(in srgb, #8fc2e8 15%, var(--paper-2)); }
#bars-card { --card-bg: color-mix(in srgb, #e0a82e 15%, var(--paper-2)); }
#games-card { --card-bg: color-mix(in srgb, #74c08c 15%, var(--paper-2)); }
#parking-card { --card-bg: color-mix(in srgb, #cfcabc 15%, var(--paper-2)); }
#parking-card.free { --card-bg: color-mix(in srgb, #7fc39a 15%, var(--paper-2)); }
#parking-card.paying { --card-bg: color-mix(in srgb, #e8a07f 15%, var(--paper-2)); }
#tonight-card { --card-bg: color-mix(in srgb, #b9a9e8 15%, var(--paper-2)); }
#hood-card { --card-bg: color-mix(in srgb, #e8b59a 15%, var(--paper-2)); }
#fix-card { --card-bg: color-mix(in srgb, #93c6dd 15%, var(--paper-2)); }
.grid .card > h2 { border: var(--o); }

/* The art under the text, a little more present than a whisper. */
.grid .card::after { opacity: 1; }

/* ---- thumbs ----
   Sized by input method rather than by width, the way base.css already
   reasons about this: a tablet at 800px is still operated with a thumb. */
@media (pointer: coarse) {
  /* Each event becomes a full-width target instead of a 24px-tall line of
     text. /tonight/ already does exactly this to its rows; the front page
     lists the same events and was still asking for a fingertip on a word. */
  .mini-events a { display: block; min-height: 44px; display: flex; align-items: center; }

  /* The door is meant to be easy to miss and hard to miss hitting. Growing
     the glyph would give the speakeasy away, so the hit area grows instead
     and the negative margin keeps the footer's layout exactly where it was. */
  .door-link { padding: 12px; margin: -12px; }
}

/* ======================================================================
   Profile card
   ====================================================================== */
.profile-card {
  padding: 18px 22px 18px;
}
.profile-card:hover .av-ring {
  transform: scale(1.08) rotate(-4deg);
}
.profile-card:hover .prof-streak-box {
  transform: scale(1.03);
}

.prof-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  margin: 6px 0 16px;
}

.prof-av-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.prof-av {
  width: 76px;
  height: 76px;
  font-size: 38px;
  border-width: 3.5px;
  background: #fffdf6;
  position: relative;
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .35s var(--spring);
  cursor: pointer;
}

.prof-av.av3d {
  padding: 0;
}

.prof-av canvas,
.prof-av img,
.prof-av.av3d canvas,
.prof-av.av3d img {
  width: 100%;
  height: 100%;
  display: block;
}

.prof-lvl-badge {
  margin-top: -11px;
  z-index: 1;
  padding: 2px 9px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 1px 1px 0 var(--ink);
}

.prof-main-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.prof-identity {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.prof-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.prof-flair {
  font-size: 20px;
}

.prof-title {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 1.15;
  color: var(--ink-soft);
}

.prof-xp-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.prof-xp-bar {
  flex: 1;
  max-width: 260px;
  height: 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fffdf6;
  overflow: hidden;
}

.prof-xp-bar i {
  display: block;
  height: 100%;
  background: var(--hi);
  border-right: 2px solid var(--ink);
  transition: width 0.6s cubic-bezier(.2, 1.4, .5, 1);
}

.prof-xp-text {
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.prof-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
}

.prof-pills .pill {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
}

.prof-pills .pill.gold {
  background: #ffd23f;
  color: #1e1a16;
}

.prof-stats-col {
  display: flex;
  gap: 10px;
  align-items: center;
}

.prof-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, #fff 65%, var(--paper));
  box-shadow: 2px 2px 0 var(--ink);
  border-radius: 8px;
  min-width: 84px;
  transition: transform .3s var(--spring);
}

.profile-card:hover .prof-stat-pill {
  transform: scale(1.04);
}

.prof-stat-val {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1;
  color: var(--ink);
}

.prof-stat-lbl {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
  white-space: nowrap;
}

.profile-card {
  cursor: pointer;
}

@media (max-width: 680px) {
  .profile-card {
    padding: 14px 14px 16px;
  }
  .prof-content {
    grid-template-columns: auto 1fr;
    gap: 12px;
    margin: 4px 0 12px;
  }
  .prof-stats-col {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .prof-stat-pill {
    padding: 6px 10px;
    min-width: auto;
  }
  .prof-stat-val {
    font-size: 20px;
  }
  .prof-name {
    font-size: 22px;
  }
  .prof-av {
    width: 64px;
    height: 64px;
    font-size: 32px;
  }
  .prof-xp-bar {
    max-width: none;
  }
}


.footer-discover { display: inline-flex; align-items: center; gap: 18px; }
.guide-link { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; text-decoration: none; font-size: 23px; transition: transform .25s; }
.guide-link:hover, .guide-link:focus-visible { transform: rotate(-12deg) scale(1.2); }
@media (prefers-reduced-motion: reduce) { .guide-link { transition: none; } }

/* Feature requests: warm spotlight and a printed confetti texture. */
#feature-card {
  --card-bg: color-mix(in srgb, #eaa27c 20%, var(--paper-2));
  cursor: pointer;
}
#feature-card > h2 { background: #efb088; }
#feature-card::after {
  background:
    radial-gradient(ellipse at 100% 0%, rgb(240 167 88 / .48), transparent 65%),
    radial-gradient(ellipse at 0% 100%, rgb(194 147 204 / .32), transparent 60%),
    radial-gradient(circle, rgb(150 89 53 / .16) 1px, transparent 1.5px);
  background-size: auto, auto, 18px 18px;
}
#feature-card > p { max-width: 36ch; margin-bottom: 20px; }
#feature-open { align-self: flex-start; margin-top: auto; }

.feature-rewards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#feature-card > .feature-reward-note { max-width: none; line-height: 1.5; margin-bottom: 16px; }
#feature-card > .feature-reward-limits { max-width: none; font-size: 11px; line-height: 1.5; margin-bottom: 16px; }