/* Frankencart "mainboard" — shared look across the site (home, ladder, lobbies).
   The page renders as a hand-soldered unit: a generated circuit field behind
   everything, content as wired PCB modules. Green is the committed scheme; the
   switcher is CSS-variable driven (website only — the Discord Activity stays
   locked black/green). */
:root {
  --sub:    #0a0d0b;          /* PCB substrate */
  --sub2:   #0f130f;          /* lifted board */
  --mask:   #10160f;          /* solder mask panel */
  --silk:   #c7cdbf;          /* silkscreen */
  --ink:    #e9ece6;
  --dim:    #7d867a;

  --accent: #9ee34f;          /* copper / phosphor (switchable) */
  --lit:    color-mix(in srgb, var(--accent) 92%, #fff);
  --deep:   color-mix(in srgb, var(--accent) 45%, #000);
  --glow:   color-mix(in srgb, var(--accent) 55%, transparent);
  --line:   color-mix(in srgb, var(--accent) 20%, transparent);

  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
}
:root[data-scheme="purple"] { --accent: #b071ff; }
:root[data-scheme="red"]    { --accent: #e0524a; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sub); }
body { color: var(--ink); font: 14px/1.6 var(--mono); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }

/* generated circuit board, fixed behind everything */
#board { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

.unit { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 26px 22px 60px; }

/* copper traces wiring modules back to a core (home page) */
.wires { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.wire  { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.85; filter: drop-shadow(0 0 4px var(--glow)); }
.via   { fill: var(--accent); stroke: var(--sub); stroke-width: 1.2; }

/* blurred dark scrims so free-floating text isn't lost in the circuit */
.scrim { position: relative; z-index: 1; }
.scrim::before {
  content: ""; position: absolute; inset: -26px -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 72% 82% at 50% 46%,
    rgba(8,11,9,0.92), rgba(8,11,9,0.6) 52%, rgba(8,11,9,0) 80%);
  filter: blur(7px);
}
.scrim-bar { position: relative; z-index: 1; }
.scrim-bar::before {
  content: ""; position: absolute; inset: -14px -3%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 130% 92% at 50% 50%,
    rgba(8,11,9,0.86), rgba(8,11,9,0.42) 66%, rgba(8,11,9,0) 100%);
  filter: blur(8px);
}

/* ---- top rail : silkscreen header + scheme DIP + parked account ---- */
.rail {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 40px;
}
.rail > .lead-cell { text-shadow: 0 1px 5px rgba(0,0,0,0.9); display: flex; align-items: center; gap: 14px; }
.rail .rev { color: var(--accent); text-shadow: 0 0 8px var(--glow); }
.rail-right { display: flex; align-items: center; gap: 18px; }
.schemes { display: flex; gap: 8px; align-items: center; }
.schemes span { margin-right: 4px; }

.backlink { color: var(--silk); text-decoration: none; letter-spacing: 0.16em; }
.backlink:hover { color: var(--accent); }

.acct {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: transparent; border: 1px dashed #333a30; border-radius: 3px;
  padding: 5px 9px; color: var(--silk); font: inherit; position: relative;
}
.acct svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.acct .status { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.acct:hover { border-color: var(--accent); color: var(--accent); }
.acct:hover .status { color: var(--accent); }
.acct:focus-visible { outline: 2px solid var(--silk); outline-offset: 2px; }
.acct .dot { position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--dim); }

/* account sign-in menu (opened from the Guest chip) */
#acct-menu {
  position: absolute; top: 46px; right: 22px; z-index: 40; width: 252px; display: none;
  background: var(--mask); border: 1px solid var(--accent); border-radius: 3px;
  padding: 12px; box-shadow: 0 8px 26px rgba(0,0,0,0.6);
}
#acct-menu .am-h { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--silk); margin: 0 0 10px; }
#acct-menu .am-btn {
  display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer;
  font: 600 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--sub); background: var(--accent);
  border: 1px solid var(--accent); padding: 10px; border-radius: 3px; margin: 0 0 8px;
}
#acct-menu .am-btn:hover { box-shadow: 0 0 16px var(--glow); }
#acct-menu .am-note { font-size: 10px; color: var(--dim); text-align: center; margin: 4px 0 0; }

.chip {
  width: 15px; height: 15px; padding: 0; border-radius: 2px; cursor: pointer;
  border: 1px solid #2a2f28; background: var(--c);
}
.chip[aria-pressed="true"] { box-shadow: 0 0 9px var(--c); border-color: var(--silk); }
.chip:focus-visible { outline: 2px solid var(--silk); outline-offset: 2px; }

/* ---- hero / core ---- */
.core { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
.logo { width: 260px; height: 260px; filter: drop-shadow(0 0 26px var(--glow)); }

.wordmark {
  margin: 20px 0 0; font-size: clamp(30px, 7vw, 52px); font-weight: 800; letter-spacing: 0.06em;
  color: var(--ink); text-wrap: balance; line-height: 1;
  text-shadow: 2px 2px 0 var(--deep), 4px 4px 0 color-mix(in srgb, var(--accent) 22%, #000), 0 4px 22px rgba(0,0,0,0.9);
}
.wordmark b { color: var(--accent); }
.tag { color: var(--dim); margin: 14px auto 24px; max-width: 46ch; letter-spacing: 0.02em; text-shadow: 0 1px 6px rgba(0,0,0,0.92); }

.actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta {
  font: 700 13px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding: 13px 22px; cursor: pointer; position: relative;
  color: var(--sub); background: var(--accent); border: 1px solid var(--accent);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: box-shadow .14s ease, transform .14s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 0 22px var(--glow); }
.cta.ghost { background: transparent; color: var(--accent); }
.cta:focus-visible { outline: 2px solid var(--silk); outline-offset: 3px; }
.hero-note { color: var(--dim); font-size: 12px; margin: 14px 0 0; text-shadow: 0 1px 6px rgba(0,0,0,0.92); }

/* ---- page heading (ladder / lobbies) ---- */
.page-head { text-align: center; margin: 8px 0 34px; }
.eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
  text-shadow: 0 0 8px var(--glow); margin: 0 0 10px; }
.page-title { font-size: clamp(26px, 5vw, 40px); font-weight: 800; letter-spacing: 0.04em; margin: 0;
  text-shadow: 0 3px 18px rgba(0,0,0,0.9); }
.lead { color: var(--dim); margin: 12px auto 0; max-width: 52ch; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }

/* ---- daughter-boards / panels ---- */
.boards { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 76px; position: relative; z-index: 1; }
.mod {
  position: relative; background: var(--mask);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, #1a1f19);
  padding: 20px 20px 18px; border-radius: 3px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 6px 20px rgba(0,0,0,0.5);
}
.mod::before, .mod::after, .mod > .h1, .mod > .h2 {
  content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sub); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 50%, #333);
}
.mod::before { top: 8px; left: 8px; }
.mod::after  { top: 8px; right: 8px; }
.mod > .h1 { bottom: 8px; left: 8px; }
.mod > .h2 { bottom: 8px; right: 8px; }
.pins { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.pins i { width: 5px; height: 9px; background: color-mix(in srgb, var(--accent) 60%, #4a3a1a); border-radius: 1px 1px 0 0; }

a.mod { display: block; text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
a.mod:hover { border-color: var(--accent); transform: translateY(-2px);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 0 22px var(--glow); }
a.mod:focus-visible { outline: 2px solid var(--silk); outline-offset: 3px; }
a.mod h3 .ref::after { content: " ▸"; opacity: 0; transition: opacity .14s ease; }
a.mod:hover h3 .ref::after { opacity: 1; }

.mod h3 {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin: 2px 0 14px;
  color: var(--silk); display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.mod h3 .ref { color: var(--accent); text-shadow: 0 0 8px var(--glow); }

.board { list-style: none; margin: 0; padding: 0; }
.board li { display: grid; grid-template-columns: 1.5em 1fr auto; gap: 8px; padding: 4px 0; }
.board li + li { border-top: 1px solid var(--line); }
.board .rk { color: var(--dim); }
.board .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .val { color: var(--accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 8px var(--glow); }

.lob { color: var(--dim); font-size: 13px; }
.code { font-size: 24px; letter-spacing: 0.16em; color: var(--accent); font-weight: 700; margin-top: 8px; text-shadow: 0 0 12px var(--glow); }

.specs { list-style: none; margin: 0; padding: 0; }
.specs li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.specs li + li { border-top: 1px solid var(--line); }
.rdy { color: var(--accent); } .new { color: var(--ink); } .wip { color: var(--dim); }

/* ---- controls : cartridge tabs + segmented toggle ---- */
.controls { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; justify-content: space-between; margin: 0 0 22px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  font: inherit; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;
  color: var(--silk); background: var(--mask); border: 1px solid var(--line);
  padding: 8px 13px; border-radius: 3px; transition: border-color .14s, color .14s, box-shadow .14s;
}
.tab:hover { border-color: var(--accent); color: var(--accent); }
.tab[aria-selected="true"] { color: var(--sub); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 16px var(--glow); }
.tab:focus-visible { outline: 2px solid var(--silk); outline-offset: 2px; }

.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg {
  font: inherit; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  color: var(--dim); background: transparent; border: 0; padding: 9px 15px; transition: color .14s, background .14s;
}
.seg[aria-pressed="true"] { color: var(--sub); background: var(--accent); }
.seg + .seg { border-left: 1px solid var(--line); }
.seg:focus-visible { outline: 2px solid var(--silk); outline-offset: -2px; }

/* ---- ladder table ---- */
.table-wrap { overflow-x: auto; }
.ladder { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ladder thead th {
  text-align: left; font-weight: 600; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); padding: 0 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ladder tbody td { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); }
.ladder tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ladder .rank { color: var(--dim); width: 3em; }
.ladder .result { color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; text-shadow: 0 0 8px var(--glow); white-space: nowrap; }
.ladder .when { color: var(--dim); text-align: right; white-space: nowrap; }
.ladder tr.you td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ladder .medal { color: var(--accent); }

/* ---- lobbies grid ---- */
.lobby-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.lobby .game { color: var(--ink); font-size: 16px; margin: 2px 0 4px; }
.lobby .meta { color: var(--dim); font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.lobby-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.badge { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--line); border-radius: 2px; padding: 2px 7px; }
.join {
  font: 700 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  color: var(--sub); background: var(--accent); border: 1px solid var(--accent); padding: 10px 16px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: box-shadow .14s, transform .14s;
}
.join:hover { transform: translateY(-1px); box-shadow: 0 0 18px var(--glow); }
.empty { text-align: center; color: var(--dim); padding: 30px 10px; }

/* ---- footer ---- */
footer {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: var(--dim); font-size: 11px; letter-spacing: 0.08em; margin-top: 46px;
  border-top: 1px solid var(--line); padding-top: 16px; text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0,0,0,0.9);
}
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--accent); }
.links { display: flex; gap: 16px; flex-wrap: wrap; }

@media (min-width: 720px) {
  .home-boards { grid-template-columns: 1.25fr 0.9fr 0.9fr; }
  .lobby-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .logo { width: 200px; height: 200px; } }
@media (prefers-reduced-motion: reduce) { .cta, .join { transition: none; } }