/* games.steagus.com — base styles (Claude-owned) */
/* Palette source: _docs/steagus-palette-system-v1.0.md — games.steagus.com section */

:root{
  --surface: #E7EEF3;
  --surface-container: #D6E1E9;
  --text: #223140;
  --text-muted: #5C7386;
  --accent: #D8752E;
  --accent-secondary: #2A4D75;
  --border: #B9C8D2;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}

.site-header{
  padding: 20px 20px 0;
}
.site-header .wordmark{
  font-family: "Merriweather", Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--text);
  text-decoration: none;
}

.site-nav{
  display: flex;
  gap: 20px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.site-nav a{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{
  color: var(--accent);
}

main{
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* ---- hero: square grid -> hex lattice -> tiny 3D cubes, CROSS-FADED ----
   No art asset. Three stacked full-size layers, each fading out to the
   right via mask-image so every transition is a soft cross-fade — no
   hard clip-path cuts (v1), no accent seam bars (v1, read as dated
   PowerPoint chrome), no binary digits (v2, read as literal numbers
   and didn't fill the zone). The layers track "Tabletop, board, and
   digital" from the teaser copy: square grid = board games, hex
   lattice = tabletop, isometric cubes = digital (and a quiet nod to
   dice — see _docs/dice-easter-egg-spec-v1.0.md).
   Stacking (DOM order): cubes at the bottom spanning the whole hero,
   hex above it also full-span but fading out right to REVEAL the
   cubes, square grid on top fading out earliest. Masks use 100deg so
   the fade line leans slightly diagonal without being a drawn bar.
   The hex lattice MUST use repeating-linear-gradient — a plain
   linear-gradient sized via background-size draws one stripe per tile
   and reads as blank (the original v1 bug). */
.hero{
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  background: var(--surface);
}
.hero .zone{ position: absolute; inset: 0; }
/* Bottom layer — isometric "3D cube" rhombille tiling (digital).
   Three tones fake the lit cube faces: light top, mid + dark sides. */
.hero .zone-cubes{
  background-color: #DEE7EE;
  background-image:
    linear-gradient(30deg,  #9AAFC0 12%, transparent 12.5%, transparent 87%, #9AAFC0 87.5%, #9AAFC0),
    linear-gradient(150deg, #9AAFC0 12%, transparent 12.5%, transparent 87%, #9AAFC0 87.5%, #9AAFC0),
    linear-gradient(30deg,  #9AAFC0 12%, transparent 12.5%, transparent 87%, #9AAFC0 87.5%, #9AAFC0),
    linear-gradient(150deg, #9AAFC0 12%, transparent 12.5%, transparent 87%, #9AAFC0 87.5%, #9AAFC0),
    linear-gradient(60deg,  #B9C8D2 25%, transparent 25.5%, transparent 75%, #B9C8D2 75%, #B9C8D2),
    linear-gradient(60deg,  #B9C8D2 25%, transparent 25.5%, transparent 75%, #B9C8D2 75%, #B9C8D2);
  background-size: 28px 49px;
  background-position: 0 0, 0 0, 14px 24px, 14px 24px, 0 0, 14px 24px;
  /* Cubes only fully resolve at the far right, where the hex fade ends. */
  -webkit-mask-image: linear-gradient(100deg, transparent 62%, #000 88%);
          mask-image: linear-gradient(100deg, transparent 62%, #000 88%);
}
/* Middle layer — true hexagon honeycomb (tabletop), styled after
   1-inch hex graph paper: FLAT-TOP hexagons, large enough to read as
   individual cells. Spans the full hero (left edge runs under the
   square grid), holds solid until roughly where "not" sits in the
   tagline card (~60%), then fades out revealing the cubes.
   This is an inline SVG data-URI tile, NOT CSS gradients — crossing
   repeating-linear-gradients can only produce triangles/diamonds
   (v3.0 bug). And small pointy-top hexes read as more cubes at a
   glance (v3.1 bug) — hence flat-top and larger.
   Still zero external assets; stroke color = --border (#B9C8D2). */
.hero .zone-hex{
  background-color: var(--surface-container);
  /* One tile = one full flat-top hexagon (vertices (0,17.32),(10,0),
     (30,0),(40,17.32),(30,34.64),(10,34.64)) + the horizontal
     connector edge of the offset right-column neighbor. Tile ratio
     must stay 60 : 34.64 (3s : √3s, s=20) or the hexagons squash.
     Verified against a rendered single tile — the previous two-path
     tile was two hexagons overlapping in one column, whose overlap
     produced the diamond mesh twice mistaken for a honeycomb. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64' viewBox='0 0 60 34.64'%3E%3Cpath d='M0 17.32L10 0L30 0L40 17.32L60 17.32M40 17.32L30 34.64L10 34.64L0 17.32' fill='none' stroke='%23B9C8D2' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size: 66px 38.1px;
  -webkit-mask-image: linear-gradient(100deg, #000 60%, transparent 90%);
          mask-image: linear-gradient(100deg, #000 60%, transparent 90%);
}
/* Top layer — square grid (board games), fades out first. Opaque
   background so at the far left it fully covers the hex beneath, then
   dissolves over it. */
.hero .zone-square{
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, #000 14%, transparent 46%);
          mask-image: linear-gradient(100deg, #000 14%, transparent 46%);
}
/* "Game mid-play" color clusters (variant B, picked over random
   confetti — see pages/hero-colors.html): orange pieces + one navy
   opponent on the board grid, an amber route crossing the hex map
   (lead hex brightest), lit blue voxels in the cube corner.
   The SVG overlay has NO viewBox on purpose: its user units are
   plain pixels anchored top-left, exactly like the pattern tiles,
   so shapes stay on-lattice at any hero width. A viewBox would
   scale the shapes while the patterns stay fixed-px = drift.
   On narrow screens the right-side clusters clip away with their
   zones — intended. */
.hero .paint{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero .tagline{
  position: relative;
  font-size: 24px;
  text-align: center;
  max-width: 62%;
  background: rgba(231,238,243,0.88);
  padding: 10px 20px;
  border-radius: 8px;
  margin: 0;
}

/* ---- format ticker: sits directly under the hero, echoes the same
   three words the hero's zones represent. 18s loop, pauses for
   prefers-reduced-motion. ---- */
.ticker{
  transition: opacity .4s ease;
  overflow: hidden;
  background: var(--accent-secondary);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 8px 0;
  margin-bottom: 28px;
}
.ticker-track{
  display: flex;
  gap: 40px;
  white-space: nowrap;
  width: max-content;
  animation: ticker-scroll 18s linear infinite;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.ticker-track span::after{ content: "\2022"; margin-left: 40px; color: var(--accent); }
@keyframes ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none; }
}
.teaser{
  font-size: 15px;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto 32px;
  text-align: center;
}

.card{
  display: block;
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 20px;
}
.card:hover{ border-color: var(--accent); }
.card-kicker{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.card-title{
  font-family: "Merriweather", Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 19px;
  margin: 0 0 6px;
}
.card-desc{
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
}

.status-line{
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
/* A CTA row immediately followed by a caption line (e.g. a download
   button + "what's in the file" note) — tighten the gap between them
   without touching .product-cta-row's normal bottom margin elsewhere. */
.product-cta-row--tight{ margin-bottom: 10px; }
.status-line--after-cta{ margin-bottom: 48px; }

/* ---- product landing pages (e.g. Minecraft Skin Builder) ---- */
.product-kicker{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 24px 0 8px;
  text-align: center;
}
.product-hero h1{
  font-family: "Merriweather", Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 32px;
  font-weight: 400;
  text-align: center;
  margin: 0 0 14px;
}
.product-hero .lede{
  font-size: 16px;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto 28px;
  text-align: center;
}
.product-cta-row{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.btn-primary, .btn-secondary{
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.btn-primary{
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover{ opacity: .9; }
.btn-secondary{
  background: transparent;
  color: var(--accent-secondary);
  border-color: var(--border);
}
.btn-secondary:hover{ border-color: var(--accent-secondary); }

.section-kicker{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-secondary);
  margin: 0 0 6px;
  text-align: center;
}
.section-title{
  font-family: "Merriweather", Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin: 0 0 32px;
}

.path-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 56px;
}
.path-card{
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 22px;
}
.path-card .path-icon{ font-size: 26px; display: block; margin-bottom: 10px; }
.path-card h3{
  font-family: "Merriweather", Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 8px;
}
.path-card p{
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.steps-list{
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  counter-reset: mc-step;
}
.steps-list li{
  position: relative;
  display: flex;
  gap: 16px;
  padding: 0 0 22px 0;
}
.steps-list li::before{
  counter-increment: mc-step;
  content: counter(mc-step);
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps-list h4{
  font-size: 15px;
  font-weight: 700;
  margin: 3px 0 4px;
}
.steps-list p{
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}
/* A gentle heads-up within a step — warm, not alarming (not red), and
   set apart from the muted step paragraph rather than blending into it. */
.step-nudge{
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #8A5A2B;
  background: #FBEBD9;
  padding: 4px 10px;
  border-radius: 6px;
}

.callout{
  background: var(--surface-container);
  border-left: 3px solid var(--accent-secondary);
  border-radius: 6px;
  padding: 18px 20px;
  margin-bottom: 40px;
}
.callout p{ font-size: 14.5px; margin: 0 0 8px; }
.callout p:last-child{ margin-bottom: 0; }

.feature-list{
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 18px;
}
.feature-list li{
  font-size: 14px;
  padding-left: 22px;
  position: relative;
}
.feature-list li::before{
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ---- essay page ---- */
.essay h1{
  font-family: "Merriweather", Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
  margin: 8px 0 28px;
}
.essay p{
  font-size: 16px;
  margin: 0 0 20px;
}
.essay .signoff{
  margin-top: 32px;
  font-style: italic;
  color: var(--text-muted);
}

.site-footer{
  text-align: center;
  padding: 24px 20px;
  border-top: 1px solid var(--border);
}
/* Links above the social icons — forum before socials. Sizing matches
   the steagus.com Customizer values (18px / 400 / 0.5px). */
.site-footer .footer-links{
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.site-footer .footer-links a{
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--accent-secondary);
  text-decoration: none;
}
.site-footer .footer-links a:hover{ text-decoration: underline; }
.site-footer .social-links{
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 10px;
}
.site-footer .social-links a{
  color: var(--text-muted);
  font-size: 12.5px;
  text-decoration: none;
}
.site-footer .social-links a:hover{ color: var(--text); }
.site-footer .copyright{
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================
   DICE DUEL — hero mini-game. Markup injected by assets/js/duel.js;
   rules locked in _docs/dice-easter-egg-spec-v1.0.md (v1.2).
   Animates transform/opacity only; idle costs nothing.
   ============================================================ */
.play-btn{
  position: absolute;
  top: 14px; right: 14px;
  z-index: 6;
  font-family: "Open Sans", sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border: none; border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(34,49,64,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.play-btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(34,49,64,.3); }
.hero.duel-on .play-btn{ display: none; }
/* The game needs the full-width field; hide on small screens where
   the clusters are clipped out of view anyway. */
@media (max-width: 699px){ .play-btn{ display: none; } }

.duel-quit{
  position: absolute;
  top: 12px; left: 12px;
  z-index: 6;
  display: none;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: var(--text-muted);
  font-size: 13px; line-height: 1;
  cursor: pointer;
}
.duel-quit:hover{ color: var(--text); border-color: var(--border-vivid, #8A8884); }
.hero.duel-on .duel-quit{ display: block; }

/* During the duel the ticker band becomes the instruction bar:
   scrolling track hides, game messages show — so instructions never
   sit on top of the battlefield. */
.ticker.duel-mode .ticker-track{ display: none; }
.duel-band{
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: #fff;
  font-size: 12.5px;
  padding: 2px 14px;
  min-height: 21px;
}
.ticker.duel-mode .duel-band{ display: flex; }
.band-msg{ white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.band-d8{
  display: none;
  white-space: nowrap;
  color: #E8C86B;
  font-weight: 700;
}
.band-d8.show{ display: inline; }

/* card dismisses when the duel starts */
.hero .tagline{ transition: opacity .45s ease, transform .45s ease; }
.hero.duel-on .tagline{ opacity: 0; transform: scale(.92); pointer-events: none; }

/* cluster glow states */
.hero.duel-on .paint{ pointer-events: auto; }
.paint .cl{ transition: opacity .3s ease, filter .3s ease; }
.paint .cl.dim{ opacity: .18; pointer-events: none; }
.paint .cl.pick{ cursor: pointer; pointer-events: auto; animation: cl-pulse 1.6s ease-in-out infinite; }
.paint .cl.pick[data-side="warm"]{ --glow: rgba(216,117,46,.95); }
.paint .cl.pick[data-side="cool"]{ --glow: rgba(42,77,117,.95); }
.paint .cl.pick:hover{ animation: none; filter: drop-shadow(0 0 9px var(--glow)); }
@keyframes cl-pulse{
  0%, 100%{ filter: drop-shadow(0 0 1px transparent); }
  50%{ filter: drop-shadow(0 0 7px var(--glow)); }
}

/* band buttons */
.band-msg .gold, .duel-band .gold{ color: #E8C86B; }
.hud-btn{
  font-family: inherit;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border: none; border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.hud-btn + .hud-btn{ background: transparent; border: 1px solid rgba(255,255,255,.5); }

/* reserve trays */
.duel-tray{
  position: absolute;
  bottom: 10px;
  z-index: 6;
  display: none;
  align-items: center; gap: 5px;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 11px; font-weight: 700;
  color: var(--text);
}
.hero.duel-on .duel-tray{ display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.tray-you{ left: 10px; }
.tray-house{ right: 10px; align-items: flex-end; }
.tray-row{ display: flex; align-items: center; gap: 5px; }
.tray-dots{ display: flex; gap: 4px; padding: 0 2px; }
.dot{ width: 6px; height: 6px; border-radius: 50%; }
.dot.win{ background: #223140; }
.dot.loss{ background: transparent; box-shadow: inset 0 0 0 1.5px #8FA3B3; }
.tray-label{ color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; font-size: 10px; }
.tray-total{ color: var(--text); }
.chip{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  background: #fff;
  border: 1.5px solid;
  font-size: 11px; font-weight: 700;
  animation: chip-pop .3s ease;
}
.chip.warm{ border-color: #D8752E; color: #A85520; }
.chip.cool{ border-color: #2A4D75; color: #2A4D75; }
.chip.gold, .chip.d8chip{ border-color: #9A8B3C; color: #7d7231; border-radius: 50%; }
.chip.d8chip{ cursor: pointer; background: #fff; font-size: 9px; }
.chip.d8chip.armed{ background: #9A8B3C; color: #fff; box-shadow: 0 0 8px rgba(154,139,60,.8); }
@keyframes chip-pop{ from{ transform: scale(.3); } to{ transform: scale(1); } }

/* dice arena */
.dice-arena{
  position: absolute; inset: 0;
  z-index: 5;
  display: none;
  align-items: center; justify-content: center;
  gap: 18px;
  perspective: 900px;
  pointer-events: none;
}
.dice-arena.show{ display: flex; }
.duel-side{
  display: flex;
  align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  max-width: 38%;
}
.duel-vs{
  font-family: "Merriweather", Georgia, serif;
  font-size: 15px; font-style: italic;
  color: var(--text-muted);
  background: rgba(255,255,255,.8);
  border-radius: 999px;
  padding: 4px 9px;
}
.duel-total{
  font-size: 15px; font-weight: 700;
  background: rgba(255,255,255,.9);
  border: 1.5px solid;
  border-radius: 6px;
  padding: 3px 8px;
}
.duel-total.warm{ border-color: #D8752E; color: #A85520; }
.duel-total.cool{ border-color: #2A4D75; color: #2A4D75; }

/* 3D d6 */
/* Drop-in is TRANSFORM-ONLY on purpose: an opacity fade gated on the
   animation finishing leaves dice invisible in throttled/background
   tabs (animation clocks pause there, setTimeout game flow doesn't). */
.diew{ width: 40px; height: 40px; animation: die-drop .5s ease; }
@keyframes die-drop{ from{ transform: translateY(-46px); } to{ transform: none; } }
.d6{
  width: 40px; height: 40px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.d6 .f{
  position: absolute; inset: 0;
  background: #fff;
  border: 1.5px solid #223140;
  border-radius: 7px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  padding: 5px;
  backface-visibility: hidden;
}
.d6.warm .f{ border-color: #A85520; }
.d6.warm .pip{ background: #D8752E; }
.d6.cool .f{ border-color: #2A4D75; }
.d6.cool .pip{ background: #2A4D75; }
.pip{ width: 6px; height: 6px; border-radius: 50%; place-self: center; }
.d6 .f1{ transform: rotateY(0deg)   translateZ(20px); }
.d6 .f2{ transform: rotateX(90deg)  translateZ(20px); }
.d6 .f3{ transform: rotateY(90deg)  translateZ(20px); }
.d6 .f4{ transform: rotateY(-90deg) translateZ(20px); }
.d6 .f5{ transform: rotateX(-90deg) translateZ(20px); }
.d6 .f6{ transform: rotateY(180deg) translateZ(20px); }

/* the earned d8 — gold, visually distinct, spins in 2D */
.d8die{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #9A8B3C;
  color: #fff;
  font-size: 17px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 0 10px rgba(154,139,60,.7);
  animation: d8-spin .9s ease-out;
}
@keyframes d8-spin{ from{ transform: rotate(-540deg) scale(.4); } to{ transform: none; } }

/* winner celebration */
.hero.win-burst::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(circle, rgba(216,117,46,.4), transparent 62%);
  animation: burst 1s ease-out both;
}
@keyframes burst{ from{ opacity: 0; transform: scale(.4); } 40%{ opacity: 1; } to{ opacity: 0; transform: scale(1.6); } }

@media (prefers-reduced-motion: reduce){
  .paint .cl.pick{ animation: none; filter: drop-shadow(0 0 6px var(--glow)); }
  .d6{ transition: none; }
  .diew, .d8die, .chip{ animation: none; }
  .hero.win-burst::after{ animation: none; opacity: .5; }
}

/* ---- support / tip-jar invitation ----
   Points at /support/. Deliberately a text link, not a button: a button
   reads as a transaction and sits badly under a free tool. Muted body
   copy with an accent link keeps it an aside rather than a pitch. */
.support-invite{
  text-align: center;
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 40px;
}
.support-invite a{
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

/* Footer badge version — same destination as .support-invite, but a filled
   pill so it doesn't read as just another plain-text nav link (it was
   blending into "Community Forum" at the same weight/size). */
.footer-links a.support-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.footer-links a.support-badge svg{ width: 13px; height: 13px; flex: none; }
.footer-links a.support-badge:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(216,117,46,.4);
}
.support-invite a:hover{ border-bottom-color: var(--accent); }

/* Mojang-required unaffiliated notice — see Minecraft Usage Guidelines.
   Quiet by design: it must be clearly present, not prominent. */
.trademark-note{
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--text-muted);
  text-align: center;
  max-width: 60ch;
  margin: 28px auto 0;
}