/* wgf-render.css - skin for /renders/ (render_render.py markup, wgf-render.js toggle).
 *
 * Scoped to .rnd-* so it cannot leak into another family. Colours come from the site tokens
 * (static/css/_tokens.css, docs/ui-ux/17-blizzard-palette.md) with local fallbacks: slate
 * panels, bronze edges, client gold. No green chrome. The checker plate behind the stage render
 * is the one place two greys alternate - it says "transparent" the way every image editor does.
 */
.rnd-page{
  --rnd-panel:var(--wgf-panel,#14161c); --rnd-panel-2:var(--wgf-panel-2,#1a1d24);
  --rnd-well:var(--wgf-well,#08090c); --rnd-line:var(--wgf-border-neutral,#2e313a);
  --rnd-text:var(--wgf-text,#f4ecd8); --rnd-dim:var(--wgf-muted,#b3a88f);
  --rnd-gold:var(--wgf-gold,#ffd100); --rnd-gold-hi:var(--wgf-gold-bright,#ffe375);
  --rnd-bronze:var(--wgf-gold-accent,#b7912f); --rnd-on-gold:var(--wgf-on-gold,#1a1200);
  max-width:1100px;margin:0 auto;padding:16px;color:var(--rnd-text)
}
.rnd-crumbs{font-size:13px;color:var(--rnd-dim);margin-bottom:10px}
.rnd-crumbs a{color:var(--rnd-dim)}
.rnd-h1{font-family:var(--font-display,Cinzel,Georgia,serif);font-size:34px;line-height:1.12;margin:.15em 0 .3em;
  color:var(--rnd-gold-hi);text-shadow:0 2px 10px rgba(0,0,0,.85)}
.rnd-h2{font-family:var(--font-display,Cinzel,Georgia,serif);font-size:21px;margin:1.8em 0 .7em;color:var(--rnd-gold-hi);
  padding-bottom:6px;border-bottom:1px solid var(--wgf-border,rgba(255,209,0,.2))}
.rnd-lead{font-size:16.5px;line-height:1.65;max-width:72ch}
.rnd-lead p{margin:0 0 .8em}
.rnd-note{font-size:14px;color:var(--rnd-dim);border-left:3px solid var(--rnd-bronze);padding:8px 14px;
  background:var(--rnd-panel);max-width:72ch}
.rnd-credit{margin-top:32px;font-size:12.5px;color:var(--rnd-dim)}
.rnd-back,.rnd-more{margin-top:18px}

/* masthead: loading-screen art under a darkened gradient (same language as /sounds/) */
.rnd-mast{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:flex-end;
  margin:0 0 18px;border:1px solid var(--wgf-border-strong,rgba(255,209,0,.38));border-radius:6px;
  background:radial-gradient(ellipse at 20% 0,rgba(255,209,0,.12),transparent 60%),
    linear-gradient(180deg,var(--rnd-panel-2),var(--rnd-well));box-shadow:0 8px 30px rgba(0,0,0,.5)}
.rnd-mast--art{min-height:300px}
.rnd-mast__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.rnd-mast--art::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,9,12,.15) 0,rgba(8,9,12,.55) 45%,rgba(8,9,12,.94) 100%)}
.rnd-mast__txt{position:relative;z-index:2;flex:1 1 360px;min-width:0;padding:22px 24px 10px}
.rnd-mast__fig{position:relative;z-index:2;flex:0 0 auto;padding:12px 24px 0}
.rnd-mast__eyebrow{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--wgf-gold-soft,#d4ad3d)}
.rnd-mast__sub{margin:0;max-width:66ch;font-size:16px;line-height:1.55;color:var(--rnd-text);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.rnd-mast__credit{position:relative;z-index:2;flex-basis:100%;margin:0;padding:4px 24px 10px;font-size:12px;color:var(--rnd-dim)}
.rnd-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.rnd-badge{font-size:12px;padding:2px 8px;border-radius:3px;border:1px solid var(--rnd-line);
  background:rgba(8,9,12,.7);color:var(--rnd-dim);text-transform:uppercase;letter-spacing:.04em}

/* the transparent-render plate */
.rnd-split{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:22px;align-items:start}
.rnd-stage{margin:0;padding:14px;border:1px solid var(--rnd-line);border-radius:6px;position:relative}
.rnd-stage{background-color:#15171d;
  background-image:linear-gradient(45deg,#1d2028 25%,transparent 25%,transparent 75%,#1d2028 75%),
    linear-gradient(45deg,#1d2028 25%,transparent 25%,transparent 75%,#1d2028 75%);
  background-size:24px 24px;background-position:0 0,12px 12px}
.rnd-stage__img{display:block;width:100%;height:auto;max-width:512px;margin:0 auto}
.rnd-stage__ctl{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.rnd-page .rnd-play{display:inline-block;padding:7px 14px;border-radius:999px;border:1px solid var(--rnd-gold);
  background:var(--rnd-well);color:var(--rnd-gold-hi);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none}
.rnd-page .rnd-play:hover,.rnd-page .rnd-play:focus-visible,.rnd-page .rnd-play.is-on{background:var(--rnd-gold);color:var(--rnd-on-gold)}
.rnd-play[hidden]{display:none}

/* downloads: the primary action on a render page */
.rnd-dls-wrap .rnd-h2{margin-top:0}
.rnd-dls{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.rnd-page .rnd-dl{display:flex;flex-direction:column;gap:2px;padding:9px 14px;border-radius:5px;text-decoration:none;
  background:var(--rnd-panel);color:var(--rnd-gold-hi);font-weight:700;border:1px solid var(--rnd-bronze)}
.rnd-page .rnd-dl:hover,.rnd-page .rnd-dl:focus-visible{background:var(--rnd-gold);color:var(--rnd-on-gold);border-color:var(--rnd-gold)}
.rnd-page .rnd-dl--png,.rnd-page .rnd-dl--anim{background:var(--rnd-gold);color:var(--rnd-on-gold);border-color:var(--rnd-gold)}
.rnd-page .rnd-dl--png:hover,.rnd-page .rnd-dl--anim:hover{background:var(--rnd-gold-hi)}
.rnd-dl__sub{font-size:12px;font-weight:400;opacity:.88}

/* facts, uses, make your own */
.rnd-facts{border-collapse:collapse;width:100%;max-width:680px;font-size:14px;background:var(--rnd-panel)}
.rnd-facts th,.rnd-facts td{text-align:left;padding:7px 12px;border-bottom:1px solid var(--rnd-line);vertical-align:top}
.rnd-facts th{color:var(--rnd-dim);font-weight:400;width:34%}
.rnd-uses{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.rnd-use{padding:12px 14px;background:var(--rnd-panel);border:1px solid var(--rnd-line);border-radius:5px}
.rnd-use h3{margin:0 0 4px;font-size:15px;color:var(--rnd-gold-hi)}
.rnd-use p{margin:0;font-size:14px;line-height:1.55}
.rnd-own p{max-width:72ch;line-height:1.6}
.rnd-ctas{display:flex;flex-wrap:wrap;gap:10px}
.rnd-page .rnd-cta{display:inline-block;padding:10px 16px;border-radius:5px;border:1px solid var(--rnd-gold);
  color:var(--rnd-gold-hi);font-weight:600;text-decoration:none;background:var(--rnd-well)}
.rnd-page .rnd-cta:hover,.rnd-page .rnd-cta:focus-visible{background:var(--rnd-gold);color:var(--rnd-on-gold)}
.rnd-sib{margin:0 0 12px}

/* cards */
.rnd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.rnd-grid--strip{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.rnd-card{display:flex;flex-direction:column;background:var(--rnd-panel);border:1px solid var(--rnd-line);
  border-radius:6px;overflow:hidden;min-width:0}
.rnd-card:hover{border-color:var(--rnd-bronze)}
.rnd-card__fig{display:block;aspect-ratio:1/1;
  background:radial-gradient(circle at 50% 40%,rgba(255,209,0,.10),transparent 65%),var(--rnd-well)}
.rnd-thumb{display:block;width:100%;height:100%;object-fit:contain}
.rnd-thumb--none{background:var(--rnd-well)}
.rnd-card__body{display:flex;flex-direction:column;gap:3px;padding:9px 11px 11px}
.rnd-page .rnd-card__name{font-weight:700;color:var(--rnd-gold-hi);text-decoration:none}
.rnd-card__meta{font-size:12px;color:var(--rnd-dim)}
.rnd-page .rnd-quick{align-self:flex-start;margin-top:4px;font-size:12.5px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--rnd-bronze);color:var(--rnd-gold-hi);text-decoration:none}
.rnd-page .rnd-quick:hover{background:var(--rnd-gold);color:var(--rnd-on-gold)}

/* collections */
.rnd-colls{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:18px 0}
.rnd-coll{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:6px;text-decoration:none;
  background:linear-gradient(180deg,var(--rnd-panel-2),var(--rnd-panel));border:1px solid var(--wgf-border,rgba(255,209,0,.2))}
.rnd-coll:hover{border-color:var(--rnd-gold)}
.rnd-coll__eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--wgf-gold-soft,#d4ad3d)}
.rnd-coll__title{font-weight:700;font-size:17px;color:var(--rnd-gold-hi)}
.rnd-coll__count{font-size:12.5px;color:var(--rnd-dim)}

/* how-to */
.rnd-steps{max-width:72ch;line-height:1.65;padding-left:1.4em}
.rnd-steps li{margin-bottom:.6em}
.rnd-howto p{max-width:72ch;line-height:1.65}
.rnd-howto-links ul{padding-left:1.2em}

@media (max-width:760px){
  .rnd-split{grid-template-columns:minmax(0,1fr)}
  .rnd-h1{font-size:27px}
  .rnd-mast--art{min-height:240px}
  .rnd-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (prefers-reduced-motion:reduce){.rnd-play{transition:none}}