/* Sigil Ember: the living gem, the frames around a profile picture and the layouts of a profile. Used by the profile page, the Ember Home and the Plans page. */

@keyframes egem-breathe { from { opacity: 0.8; } to { opacity: 1; } }

/* ---- the Ember emblem: four stages that follow how many days someone has been a member ----
   The picture is the emblem of that stage (docs/brand/ember; ember-tier-1, 3, 5 and 6, the small versions in /ember). --s is how big it is; it is a tall picture, so the box is taller than it is wide.
   Where it sits next to a name (the badge on a profile, the preview) only the flame is drawn, because the frames are too fine to read that small. */
.egem { --s: 18px; --egem: url(/ember/egem-spark.svg); display: inline-block; flex: none; width: calc(var(--s) * 0.8); height: calc(var(--s) * 1.5); vertical-align: middle; background: var(--egem) center / contain no-repeat; animation: egem-breathe 3.6s ease-in-out infinite alternate; }
.egem[data-stage="spark"] { animation: none; }
.egem[data-stage="flame"] { --egem: url(/ember/egem-flame.svg); }
.egem[data-stage="blaze"] { --egem: url(/ember/egem-blaze.svg); }
.egem[data-stage="inferno"] { --egem: url(/ember/egem-inferno.svg); }
.rd-ember-badge .egem, .eh-pv-name .egem { --egem: url(/ember/ember-mark.svg); }
.rd-ember-badge .egem[data-stage="spark"], .eh-pv-name .egem[data-stage="spark"] { filter: saturate(0.6) brightness(0.92); }
.rd-ember-badge .egem[data-stage="inferno"], .eh-pv-name .egem[data-stage="inferno"] { filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.8)); }
@media (prefers-reduced-motion: reduce) { .egem { animation: none !important; } }


/* the badge on a profile */
.rd .rd-ember-badge { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; border-color: rgba(250, 204, 21, 0.4); background: linear-gradient(135deg, rgba(249, 115, 22, 0.28), rgba(0, 0, 0, 0.38)); }
.rd .rd-ember-badge:hover { border-color: rgba(250, 204, 21, 0.75); color: #fff; }
.rd .rd-ember-badge .egem { margin: 0 2px 0 3px; }

/* ---- Season 1 · Embers (see EmberSeasons): the Cinder gem glow, banner and badge. The frame is below with the other frames. ---- */
.egem[data-glow="cinder"] { filter: hue-rotate(-24deg) saturate(1.35) drop-shadow(0 0 4px rgba(239, 68, 68, 0.75)); }
ember-emblem[data-glow="cinder"] { filter: hue-rotate(-24deg) saturate(1.35) drop-shadow(0 0 10px rgba(239, 68, 68, 0.6)); }


.rd .rd-hero-bg.rd-hero-plain.rd-hero-cinder {
  background:
    radial-gradient(3px 3px at 14% 34%, #fde047, transparent 70%), radial-gradient(2px 2px at 27% 62%, #fdba47, transparent 70%), radial-gradient(3px 3px at 41% 22%, #fde047, transparent 70%),
    radial-gradient(2px 2px at 55% 70%, #fdba47, transparent 70%), radial-gradient(3px 3px at 68% 38%, #fde047, transparent 70%), radial-gradient(2px 2px at 79% 18%, #fdba47, transparent 70%),
    radial-gradient(3px 3px at 90% 56%, #fde047, transparent 70%), radial-gradient(2px 2px at 8% 80%, #fdba47, transparent 70%),
    radial-gradient(900px 380px at 78% 118%, rgba(249, 115, 22, 0.6), transparent 70%), radial-gradient(600px 300px at 12% -10%, rgba(239, 68, 68, 0.32), transparent 70%),
    linear-gradient(135deg, #140d0c, #3a100c);
}

.rd .rd-season-badge { display: inline-flex; align-items: center; gap: 7px; border-color: rgba(239, 68, 68, 0.5); background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(0, 0, 0, 0.38)); }
.rd .rd-season-badge i { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fde047, #ef4444); box-shadow: 0 0 8px rgba(239, 68, 68, 0.9); }

/* ---- frames around the picture (only an active member's choice is drawn; see EmberLooks) ---- */
.rd .rd-pf[data-frame="ember"] .rd-hero .rd-pf-avatar { box-shadow: 0 0 0 2px #060607, 0 0 0 4px #f97316, 0 0 24px rgba(249, 115, 22, 0.7); }
.rd .rd-pf[data-frame="aurora"] .rd-hero .rd-pf-avatar { box-shadow: 0 0 0 2px #060607, 0 0 0 4px #34d399, 0 0 24px rgba(52, 211, 153, 0.6); }
.rd .rd-pf[data-frame="circuit"] .rd-hero .rd-pf-avatar { box-shadow: 0 0 0 2px #060607, 0 0 0 4px #60a5fa, 0 0 20px rgba(96, 165, 250, 0.6); }
.rd .rd-pf[data-frame="cinder"] .rd-hero .rd-pf-avatar { box-shadow: 0 0 0 2px #060607, 0 0 0 4px #ef4444, 0 0 26px rgba(239, 68, 68, 0.75), 0 0 52px rgba(249, 115, 22, 0.35); }

/* ---- layouts (only an active member's choice is drawn) ----
   Standard is the page as it is. The others change the hero and the order of the rails with nothing but CSS, so every tab still has the same content. */

/* Showcase: media first. A taller hero with a bigger poster, and the games before everything else. */
.rd .rd-pf[data-layout="showcase"] .rd-hero { min-height: 560px; }
.rd .rd-pf[data-layout="showcase"] .rd-hero-in { grid-template-columns: minmax(0, 1fr) 300px; }
.rd .rd-pf[data-layout="showcase"] .rd-hero-spot { max-width: 300px; }
.rd .rd-pf[data-layout="showcase"] .rd-lanes > .rd-lane:has(#rail-topgames) { order: -2; }
.rd .rd-pf[data-layout="showcase"] .rd-lanes > .rd-lane:has(#rail-top) { order: -1; }

/* Poster: centred, like a film poster. The picture and name in the middle, the game poster behind. */
.rd .rd-pf[data-layout="poster"] .rd-hero { align-items: center; min-height: 500px; text-align: center; }
.rd .rd-pf[data-layout="poster"] .rd-hero::before { background: radial-gradient(ellipse at center, rgba(6, 6, 7, 0.55), rgba(6, 6, 7, 0.9) 85%); }
.rd .rd-pf[data-layout="poster"] .rd-hero-in { grid-template-columns: 1fr; justify-items: center; padding-top: 64px; }
.rd .rd-pf[data-layout="poster"] .rd-hero-kick { flex-direction: column; justify-content: center; margin-bottom: 14px; }
.rd .rd-pf[data-layout="poster"] .rd-hero .rd-pf-avatar { width: 96px; height: 96px; }
.rd .rd-pf[data-layout="poster"] .rd-hero .rd-pf-avatar.rd-pf-initial { font-size: 38px; }
.rd .rd-pf[data-layout="poster"] .rd-hero .rd-pf-badges { justify-content: center; }
.rd .rd-pf[data-layout="poster"] .rd-hero .rd-pf-tagline { margin-inline: auto; }
.rd .rd-pf[data-layout="poster"] .rd-hero-links, .rd .rd-pf[data-layout="poster"] .rd-hero-cta { justify-content: center; }
.rd .rd-pf[data-layout="poster"] .rd-hero .rd-idc-home { margin-inline: auto; }
.rd .rd-pf[data-layout="poster"] .rd-hero-spot { display: none; }

/* Console: a terminal. Monospace type, sharp corners, and a prompt in front of every rail's title. */
.rd .rd-pf[data-layout="console"] { --font-head: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; --font-body: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; }
.rd .rd-pf[data-layout="console"] .rd-hero { border-radius: 6px; min-height: 380px; }
.rd .rd-pf[data-layout="console"] .rd-hero h1 { font-size: clamp(34px, 5.6vw, 64px); letter-spacing: -0.02em; text-transform: lowercase; }
.rd .rd-pf[data-layout="console"] .rd-hero h1::before { content: "$ "; color: var(--pf); }
.rd .rd-pf[data-layout="console"] .rd-hero-poster { border-radius: 4px; transform: none; }
.rd .rd-pf[data-layout="console"] .rd-lane-h h2::before { content: "> "; color: var(--pf); }
.rd .rd-pf[data-layout="console"] .rd-lane-h h2 { font-size: 20px; letter-spacing: 0; }
.rd .rd-pf[data-layout="console"] .rd-pf-tabs button { text-transform: lowercase; }

@media (max-width: 760px) {
  .rd .rd-pf[data-layout="showcase"] .rd-hero-in { grid-template-columns: 1fr; }
  .rd .rd-pf[data-layout="showcase"] .rd-hero { min-height: 480px; }
}