:root {
  --bg: #05060f; /* matches the top of the pixel sky, shown before it draws */
  --stone: #1c1713;
  --stone-hi: #241d17;
  --text: #e9dfc9;
  --muted: #ab9c82;
  --gold: #c8a35f;
  --gold-bright: #ecc983;
  --gold-dim: rgba(200, 163, 95, 0.38);
  --crimson: #8f1d1d;
  --gold-dark: #8a6a32;
  --drop: #050409; /* pixel drop shadows */
  --pixel: "Pixelify Sans", "Silkscreen", ui-monospace, "Courier New", monospace; /* the name */
  --serif: "Cinzel", "Trajan Pro", "Cormorant SC", Georgia, "Times New Roman", serif; /* labels and small text */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 600 17px/1.55 var(--serif);
  -webkit-font-smoothing: antialiased;
}

/* Layers behind the content, bottom to top: pixel scene (sky and landscape), embers canvas */
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Low-res pixel-art scene; JS sets its size so each scene pixel is a whole number of screen pixels */
#scene {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -2;
  display: block;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 20px 24px;
}

/* Header */
.profile {
  position: relative;
  isolation: isolate;
  text-align: center;
}

/* Candlelight behind the header */
.profile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -56px -20px auto;
  height: 320px;
  background: radial-gradient(closest-side, rgba(255, 170, 80, 0.16), rgba(255, 140, 60, 0.05) 60%, transparent);
  animation: flicker 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes flicker {
  0%, 100% { opacity: 0.85; }
  12% { opacity: 0.95; }
  25% { opacity: 0.78; }
  40% { opacity: 1; }
  55% { opacity: 0.86; }
  70% { opacity: 0.97; }
  85% { opacity: 0.8; }
}

.medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2b2119, var(--stone) 70%);
  box-shadow: 0 0 40px -8px rgba(236, 170, 90, 0.3);
}

.medallion .ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold);
}

.medallion .beads { stroke-width: 1.6; stroke-dasharray: 0 1; stroke-linecap: round; }
.medallion .gem { fill: var(--gold); stroke: none; }

/* Pixel MP logo; 2 screen pixels per logo pixel keeps every pixel crisp */
.logo { position: relative; display: block; width: 59px; height: 31px; }

h1 {
  margin-top: 22px;
  font: 600 28px/1.1 var(--pixel);
  letter-spacing: 0.12em;
  text-indent: 0.12em; /* balances the trailing letter-spacing so it stays centered */
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #4a1418; /* hard pixel shadow in deep crimson */
}

.divider {
  display: block;
  width: 198px;
  height: 14px;
  margin: 16px auto 0;
}

/* Links: stone plaques with a 2px pixel border, pixel corner marks and a stepped drop shadow.
   --on is 0 normally and 1 on hover or keyboard focus; everything that changes reads from it.
   Registering it as a number lets it (and so everything built from it) fade over 150ms. */
@property --on {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.links {
  display: grid;
  gap: 22px;
  margin-top: 40px;
  padding: 0 8px; /* room for the border, glow and drop shadow, which sit outside the box */
  list-style: none;
}

.link {
  --on: 0;
  --edge: color-mix(in srgb, var(--gold-bright) calc(var(--on) * 100%), var(--gold));
  --mark: linear-gradient(var(--edge), var(--edge));
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 18px;
  background:
    var(--mark) left 6px top 6px / 8px 2px,
    var(--mark) left 6px top 6px / 2px 8px,
    var(--mark) right 6px top 6px / 8px 2px,
    var(--mark) right 6px top 6px / 2px 8px,
    var(--mark) left 6px bottom 6px / 8px 2px,
    var(--mark) left 6px bottom 6px / 2px 8px,
    var(--mark) right 6px bottom 6px / 8px 2px,
    var(--mark) right 6px bottom 6px / 2px 8px,
    color-mix(in srgb, var(--stone-hi) calc(var(--on) * 100%), var(--stone));
  background-repeat: no-repeat;
  /* four copies of the box shifted 2px make the border; its corners stay open, so they step like
     pixels. Then, only when lit, two hard-edged rings and a soft glow of warm candlelight, and a
     stepped drop shadow. */
  box-shadow:
    0 -2px 0 var(--edge), 0 2px 0 var(--edge), -2px 0 0 var(--edge), 2px 0 0 var(--edge),
    0 0 0 4px rgba(255, 168, 82, calc(var(--on) * 0.3)),
    0 0 0 8px rgba(255, 140, 60, calc(var(--on) * 0.14)),
    0 0 calc(var(--on) * 26px) calc(var(--on) * 6px) rgba(255, 170, 80, calc(var(--on) * 0.4)),
    0 0 22px 4px var(--halo, transparent),
    calc(4px + var(--on) * 2px) calc(6px + var(--on) * 2px) 0 var(--drop),
    calc(6px + var(--on) * 2px) calc(4px + var(--on) * 2px) 0 var(--drop);
  color: var(--edge);
  font: 700 16px/1 var(--serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transform: translate(calc(var(--on) * -2px), calc(var(--on) * -2px));
  transition: --on 150ms ease-out;
}

/* No (hover: hover) check here: touchscreen laptops and tablets report it false even with a mouse */
.link:hover,
.link:focus-visible { --on: 1; }
.link:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 10px; }
.link:active { transform: translate(1px, 1px); }

/* Donate: brighter gold border and label, with a soft gold glow that is always on */
.link.gold {
  --edge: color-mix(in srgb, #fff0c4 calc(var(--on) * 100%), var(--gold-bright));
  --halo: rgba(236, 201, 131, 0.42);
}

/* Small, softer second line under a label ("crypto · USDT"), in the casing it is written in */
.link small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font: 600 11px/1 var(--serif);
  letter-spacing: 0.08em;
  text-transform: none;
}

/* pixel icons are drawn on a 12px grid at 2 screen pixels per pixel */
.icon { width: 22px; height: 22px; flex: none; color: color-mix(in srgb, var(--gold-bright) calc(var(--on, 0) * 100%), var(--gold)); fill: currentColor; }

.arrow {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: color-mix(in srgb, var(--gold-bright) calc(var(--on) * 100%), var(--gold-dark));
  fill: currentColor;
}

/* Telegram, Email and GitHub: the same plaques, side by side in equal shares. A share is never
   narrower than its label, so on phones whatever doesn't fit wraps and fills the next row. */
.contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 14px;
  margin-top: 22px;
  padding: 0 8px;
  list-style: none;
}
.contacts li { flex: 1; }
.contacts .link { justify-content: center; gap: 10px; padding: 0 8px; font-size: 15px; }

/* "Email copied" note under the mail button */
.contacts li { position: relative; }
.toast {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  z-index: 1; /* over the GitHub button when it wraps below on phones */
  padding: 5px 8px 4px;
  font: 700 12px/1 var(--serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
  background: var(--stone);
  box-shadow: 0 -2px 0 var(--gold), 0 2px 0 var(--gold), -2px 0 0 var(--gold), 2px 0 0 var(--gold), 4px 4px 0 var(--drop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.toast.show { opacity: 1; }

/* Footer */
footer {
  padding: 24px 20px 40px;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* On phones the content covers the scene, so leave room to scroll it into view */
@media (max-width: 600px) {
  footer { padding-bottom: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}