/* Remtendo link-in-bio — plain CSS, no build step.
   Palette pulled from the brand art: night navy, ice blue, bronze frame gold. */
@font-face {
  font-family: "Press Start 2P";
  src: url("assets/press-start-2p.woff2") format("woff2");
  font-display: swap;
}

:root {
  --night: #070b24;
  --navy: #0d1640;
  --panel: #121d52;
  --panel-hi: #1a2a6e;
  --ice: #7cc8ff;
  --ice-hi: #b8e4ff;
  --bronze: #c9923e;
  --bronze-dk: #7a4f1c;
  --text: #eef2ff;
  --muted: #b9c3ea;
  --twitch: #9146ff;
  --youtube: #ff2e2e;
  --discord: #5865f2;
  --pixel: "Press Start 2P", ui-monospace, "Courier New", monospace;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --px: 4px; /* one "pixel" for chunky borders */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  font: 400 1rem/1.5 var(--body);
  background-color: var(--night);
  /* starfield + horizon glow, all CSS */
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, #cfe9ff 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 34%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 42%, #9fd4ff 50%, transparent 51%),
    radial-gradient(2px 2px at 6% 66%, #cfe9ff 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 72%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 84%, #9fd4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 93%, #fff 50%, transparent 51%),
    radial-gradient(120% 60% at 50% 110%, #1b2f86 0%, transparent 60%),
    linear-gradient(#070b24, #0b1238 60%, #0e1a4d);
}
html { background: #0e1a4d; }
/* subtle CRT scanlines */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  z-index: 10;
}

img, svg { display: block; max-width: 100%; height: auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 20;
  padding: 12px 16px; background: var(--ice); color: var(--night);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 8px; }

/* ---------- layout ---------- */
.cabinet {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}

.marquee { margin: 0 -4px; }
.logo {
  width: 100%;
  border: var(--px) solid var(--bronze);
  box-shadow: 0 0 0 var(--px) var(--night), 0 0 0 calc(var(--px) * 2) var(--bronze-dk), 0 12px 40px rgba(60,140,255,.25);
  image-rendering: auto;
}

/* ---------- player card ---------- */
.player {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0 20px;
}
.player picture { flex: 0 0 auto; }
.avatar {
  object-fit: cover;
  width: 96px; height: 96px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--night), 0 0 0 6px var(--ice), 0 0 24px rgba(124,200,255,.45);
}
.hud {
  margin: 0;
  font: 10px/1.6 var(--pixel);
  letter-spacing: .08em;
  color: var(--bronze);
}
.player__name {
  margin: 2px 0 6px;
  font: 22px/1.2 var(--pixel);
  color: var(--ice-hi);
  text-shadow: 3px 3px 0 #1d3a9e;
}
.player__bio { margin: 0; color: var(--muted); font-size: 1rem; }

/* ---------- links ---------- */
.links {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 14px;
}
.link {
  --accent: var(--ice);
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;               /* big tap target */
  padding: 12px 16px 12px 12px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(var(--panel-hi), var(--panel));
  border: var(--px) solid var(--bronze);
  /* stepped pixel shadow */
  box-shadow:
    0 0 0 var(--px) var(--night),
    var(--px) var(--px) 0 var(--px) #050818;
  transition: transform .08s steps(2), box-shadow .08s steps(2), background-color .1s;
}
.link--twitch  { --accent: var(--twitch); }
.link--youtube { --accent: var(--youtube); }
.link--discord { --accent: var(--discord); }
.link--x       { --accent: #e7e9ea; }
.link--tiktok  { --accent: #25f4ee; }
.link--instagram { --accent: #e1306c; }

.link__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: var(--accent);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.28), inset 4px 4px 0 rgba(255,255,255,.18);
}
.link__icon svg { width: 26px; height: 26px; fill: #fff; }
.link--x .link__icon svg, .link--tiktok .link__icon svg { fill: #000; }

.link__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; }
.link__label {
  font: 14px/1.3 var(--pixel);
  color: #fff;
}
.link__sub {
  font-size: .95rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.link__go {
  flex: 0 0 auto;
  font: 12px/1 var(--pixel);
  color: var(--bronze);
}

a.link:hover, a.link:focus-visible {
  background: linear-gradient(#22358a, #16236a);
  transform: translate(-2px, -2px);
  box-shadow:
    0 0 0 var(--px) var(--night),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--px) #050818;
}
a.link:hover .link__go, a.link:focus-visible .link__go { color: var(--ice-hi); }
a.link:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--px) var(--night);
}
a.link:focus-visible {
  outline: 3px solid var(--ice-hi);
  outline-offset: 6px;
}

/* placeholder (no link yet) */
.link.is-soon {
  border-style: dashed;
  border-color: #6f7bb0;
  background: linear-gradient(#141f55, #101a49);
  cursor: default;
}
.link.is-soon .link__icon { background: #3c4796; }
.link.is-soon .link__label { color: #dfe4ff; }
.link__go--soon {
  font-size: 10px;
  padding: 7px 7px 6px;
  color: var(--night);
  background: var(--bronze);
}

/* ---------- extras ---------- */
.coin {
  margin: 30px 0 4px;
  text-align: center;
  font: 12px/1 var(--pixel);
  letter-spacing: .15em;
  color: var(--bronze);
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.footer {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 16px;
  text-align: center;
}
.orb {
  width: 72px; height: 72px;
  border-radius: 50%;
  animation: float 3s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-6px); } }

.eggs {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 14px;
}
.eggs li { opacity: .55; }
.eggs li:hover { opacity: 1; }
.eggs svg { width: 18px; height: 18px; fill: var(--ice); }

.footer__small {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
}

/* ---------- larger screens ---------- */
@media (min-width: 700px) {
  body { padding: 40px 16px; }
  .cabinet {
    padding: 28px 28px 32px;
    background: rgba(7, 11, 36, .72);
    border: var(--px) solid var(--bronze-dk);
    box-shadow: 0 0 0 var(--px) var(--night), 0 20px 60px rgba(0,0,0,.45);
  }
  .marquee { margin: 0; }
  .avatar { width: 112px; height: 112px; }
  .player__name { font-size: 26px; }
  .link { min-height: 80px; }
  .link__label { font-size: 15px; }
}

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