/* =====================================================================
   COMPONENTS — the reusable VoidRunner UI pieces.
   Used by the game (index.html) and documented on design-system.html.
   ===================================================================== */

/* ---------- frame: the glowing container the game sits in ---------- */
.frame{
  position:relative;
  width:var(--frame-width);
  background:var(--frame-bg);
  border-radius:var(--frame-radius);
  box-shadow:var(--frame-shadow);
  overflow:hidden;                  /* clips overlays and rounded corners */
}

/* frame border — drawn over the content (under the corner sprites) */
.frame::after{
  content:"";
  position:absolute;
  inset:0;
  border:var(--frame-border-width) solid var(--frame-border-color);
  border-radius:inherit;
  pointer-events:none;
  z-index:9;
}

/* ---------- overlay (start / pause / success screens) ---------- */
.game-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 30%,
      color-mix(in srgb, var(--nebula) 55%, transparent),
      color-mix(in srgb, var(--void) 92%, transparent) 65%);
  transition:opacity 0.35s ease;
  z-index:6;
  padding:24px;
}

.game-overlay.hidden{
  opacity:0;
  pointer-events:none;
  display:none;
}

/* ---------- type ---------- */
.eyebrow{
  font-size:11px;
  letter-spacing:0.45em;
  color:var(--cyan);
  text-transform:uppercase;
  margin-bottom:18px;
  opacity:0.85;
}

h1.title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(38px, 8vw, 72px);
  letter-spacing:0.08em;
  background:linear-gradient(180deg, var(--star) 0%, var(--magenta) 55%, var(--amethyst) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 40px color-mix(in srgb, var(--magenta) 35%, transparent);
  line-height:1;
}

h2.title-sm{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(28px, 6vw, 48px);
  letter-spacing:0.08em;
  background:linear-gradient(180deg, var(--star) 0%, var(--cyan) 60%, var(--amethyst) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 40px color-mix(in srgb, var(--cyan) 35%, transparent);
  line-height:1;
}

.subtitle{
  margin-top:10px;
  font-size:13px;
  letter-spacing:0.25em;
  color:var(--mist);
  text-transform:uppercase;
}

.stat-line{
  margin-top:18px;
  font-size:13px;
  letter-spacing:0.15em;
  color:var(--mist);
  text-transform:uppercase;
}
.stat-line span{
  color:var(--cyan);
  font-weight:700;
}

/* ---------- controls legend + key caps ---------- */
.controls{
  display:grid;
  grid-template-columns:repeat(3, minmax(120px,1fr));
  gap:10px 22px;
  margin-top:14px;
  font-size:11px;
  color:var(--mist);
}
.controls .row{ display:flex; align-items:center; gap:8px; justify-content:center; }

kbd{
  display:inline-block;
  min-width:22px;
  padding:3px 6px;
  font-family:var(--font-body);
  font-size:10px;
  color:var(--void);
  background:linear-gradient(180deg, var(--star), var(--mist));
  border-radius:4px;
  border-bottom:2px solid var(--amethyst);
  text-align:center;
}

.shard-icon{
  width:10px; height:10px;
  background:linear-gradient(135deg, var(--star), var(--magenta), var(--cyan));
  transform:rotate(45deg);
  display:inline-block;
  margin:0 4px;
}

/* ---------- button: one style used everywhere ---------- */
.big-btn{
  position:relative;                /* corner sprites are pinned against this */
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.15em;
  min-width:200px;
  padding:14px 38px;
  margin-top:28px;
  color:var(--cyan);
  background:var(--void);
  border:var(--button-border-width) solid var(--cyan);
  border-radius:0;
  cursor:pointer;
  text-transform:uppercase;
  transition:background 0.15s ease, transform 0.08s ease;
}
.big-btn:hover{ background:color-mix(in srgb, var(--cyan) 12%, var(--void)); }
.big-btn:active{ transform:translateY(2px); }
.big-btn:focus-visible{ outline:2px solid var(--star); outline-offset:4px; }

/* ---------- corner sprites (image + frame set by assets/js/corners.js) ---------- */
.corner{
  position:absolute;
  pointer-events:none;
  background-repeat:no-repeat;
  /* no image-rendering override: keeps thin lines smooth on high-density screens */
  --corner-offset:0px;
}
.corner--frame{
  z-index:10;                       /* above the game, HUD and overlays */
}
.corner--button{
  --corner-offset:calc(-1 * var(--button-border-width));  /* sit on top of the border */
}
.corner--top-left    { top:var(--corner-offset);    left:var(--corner-offset);  }
.corner--top-right   { top:var(--corner-offset);    right:var(--corner-offset); }
.corner--bottom-left { bottom:var(--corner-offset); left:var(--corner-offset);  }
.corner--bottom-right{ bottom:var(--corner-offset); right:var(--corner-offset); }

/* ---------- HUD ---------- */
.hud{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--star);
  text-transform:uppercase;
  text-shadow:0 2px 6px color-mix(in srgb, var(--void) 80%, transparent);
}
.pill{
  background:color-mix(in srgb, var(--deep) 55%, transparent);
  border:1px solid color-mix(in srgb, var(--amethyst) 40%, transparent);
  padding:5px 10px;
  border-radius:20px;
  backdrop-filter:blur(2px);
}
.pill--end{ margin-left:auto; }
.pill--numeric{ font-variant-numeric:tabular-nums; }

/* run boost meter */
.boost{ display:flex; align-items:center; gap:8px; }
.boost__bar{
  width:120px;
  height:6px;
  border-radius:3px;
  background:color-mix(in srgb, var(--star) 12%, transparent);
  overflow:hidden;
}
.boost__fill{
  width:0%;
  height:100%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
}
.boost.active{ color:var(--cyan); border-color:var(--cyan); }