/* Ruex64 Domain Test — typography & palette only */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:#d1d5db;
  --accent:#ff5a19; /* orange from the splash */
  --card:#0a0a0a;
  --border:#1f1f1f;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans, "Helvetica Neue", "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.wrap{
  min-height:100svh;
  display:grid;
  place-items:center;
  gap:2rem;
  padding:4rem 1.25rem;
}

.hero{
  text-align:center;
  margin-bottom:.5rem;
  user-select:none;
}

.brand{
  font-family: "Sansita One", system-ui;
  font-weight:400;
  font-size: clamp(3rem, 6vw, 5rem);
  letter-spacing:.3px;
  margin:0;
  text-shadow: 0 1px 0 #111, 0 4px 24px rgba(0,0,0,.6);
}
.brand .accent{color:var(--fg)}
.brand .accent-dot{color:var(--fg)}
.brand .accent{
  position: relative;
}
.brand .accent::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-0.35rem;
  width:0.65em;
  height:0.25rem;
  background:var(--accent);
  border-radius:999px;
  filter: drop-shadow(0 0 12px rgba(255,90,25,.35));
}

.tag{
  margin:.25rem 0 0;
  font-family: "Jersey 25", system-ui;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  letter-spacing:.04em;
  color:var(--muted);
}

.card{
  width:min(880px, 95vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.25rem;
  box-shadow:var(--shadow);
  animation:fadeIn .6s ease both;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:.75rem;
}

.kv{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:14px;
  padding:.9rem .95rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-height:82px;
}

.k{font-size:.825rem; color:var(--muted)}
.v{font-size:1.05rem}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.badge{
  display:inline-flex; align-items:center; gap:.5ch;
  padding:.25rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  font-size:.95rem;
}

.actions{
  display:flex; gap:.6rem; flex-wrap:wrap;
  margin-top:1rem;
}

.btn{
  cursor:pointer;
  background:var(--accent);
  color:#100c08;
  border:none;
  border-radius:12px;
  padding:.7rem 1rem;
  font-weight:700;
  letter-spacing:.02em;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 6px 18px rgba(255,90,25,.18);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0) scale(.98)}
.btn:disabled{opacity:.6; cursor:not-allowed}

.btn.outline{
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--accent);
  box-shadow:none;
}

.hint{margin:.9rem 0 0; color:var(--muted)}
.small{font-size:.875rem}

.foot{opacity:.7; margin-top:.5rem; text-align:center}


/* force white x */
.brand .x-orange { color: var(--accent) !important; }