@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0A1930; --bg2:#0D2242; --ink:#E7F1FF; --dim:#8FA9CC; --line:#1E3B66;
  --accent:#5EE9FF; --accent-ink:#04141F; --bad:#FF6B6B; --good:#6BFFA0;
  --disp:'Space Mono',ui-monospace,monospace; --body:'Inter',system-ui,sans-serif;
  --bar-h:104px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--body);}
body{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:-1px -1px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
button{font-family:var(--body)}
.mono{font-family:var(--disp)}
#app{max-width:1180px;margin:0 auto;padding:0 16px 64px;}

/* ---------------- chrome / CA bar (theme: dark · bar: top) ---------------- */
#ca-bar{
  position:sticky; top:0; z-index:50;
  background:rgba(10,25,48,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:10px 14px;
}
.brand{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.brand img{width:28px;height:28px;border-radius:6px;display:block;}
.brand .nm{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.02em;}
.brand .tk{color:var(--dim);font-size:12px;}
.ca-wrap{
  flex:1 1 260px; min-width:0;
  display:flex; align-items:center; gap:8px;
  background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  padding:7px 10px;
}
.ca-label{font-size:10px;letter-spacing:.08em;color:var(--dim);flex:0 0 auto;}
.ca-addr{
  font-family:var(--disp); font-size:12px; color:var(--ink);
  overflow-x:auto; white-space:nowrap; flex:1 1 auto; scrollbar-width:none;
  user-select:all;
}
.ca-addr::-webkit-scrollbar{display:none}
.ca-copy{
  flex:0 0 auto; background:var(--accent); color:var(--accent-ink); border:0; border-radius:6px;
  font-family:var(--disp); font-size:11px; font-weight:700; padding:6px 9px; cursor:pointer;
}
.ca-copy:active{transform:scale(.96)}
.top-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;}
.gmgn-link{font-size:11px;color:var(--dim);text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:6px 8px;white-space:nowrap;}
.gmgn-link:hover{color:var(--accent);border-color:var(--accent);}
.connect{
  background:transparent;color:var(--ink);border:1px solid var(--accent);border-radius:6px;
  font-size:12px;font-weight:600;padding:7px 12px;cursor:pointer;white-space:nowrap;
}
.connect:hover{background:rgba(94,233,255,.1)}
.connect.on{border-color:var(--good);color:var(--good)}

/* ---------------- hero text (chassis: hero = text) ---------------- */
.hero{
  margin-top:22px; position:relative;
  border:1px dashed var(--line); border-radius:4px; padding:22px 20px 20px;
  background:linear-gradient(180deg, rgba(94,233,255,.04), transparent 60%);
}
.hero::before{
  content:'FIG. 01 — MECHANISM'; position:absolute; top:-10px; left:14px;
  background:var(--bg); padding:0 8px; font-family:var(--disp); font-size:10px;
  letter-spacing:.12em; color:var(--accent);
}
.hero h1{
  font-family:var(--disp); font-weight:700; font-size:clamp(22px,4.4vw,34px);
  line-height:1.15; margin:6px 0 10px; letter-spacing:-.01em;
}
.hero p.sub{color:var(--dim); font-size:15px; line-height:1.55; margin:0 0 14px; max-width:64ch;}
.rules{display:grid; gap:10px; grid-template-columns:1fr;}
.rules .r{border-left:2px solid var(--line); padding:4px 0 4px 12px;}
.rules .r b{display:block; font-family:var(--disp); font-size:12px; color:var(--accent); letter-spacing:.04em; text-transform:uppercase;}
.rules .r span{font-size:13.5px; color:var(--ink); opacity:.9; line-height:1.5;}

/* ---------------- layout: recomposes past ~1000px ---------------- */
.layout{display:flex; flex-direction:column; gap:22px; margin-top:22px;}
.primary{min-width:0;}
.aside{min-width:0;}
@media (min-width:1000px){
  .layout{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start; gap:28px;}
  .aside{position:sticky; top:calc(var(--bar-h) + 16px);}
}

/* ---------------- the instrument dial (the object) ---------------- */
.panel{border:1px solid var(--line); border-radius:10px; background:rgba(13,34,66,.55); padding:18px;}
.panel + .panel{margin-top:18px;}
.panel h2{font-family:var(--disp); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin:0 0 14px;}
.clock-row{display:flex; flex-wrap:wrap; gap:18px; margin-bottom:16px;}
.stat{flex:1 1 130px;}
.stat .k{font-size:10px; letter-spacing:.08em; color:var(--dim); text-transform:uppercase;}
.stat .v{font-family:var(--disp); font-size:19px; margin-top:3px;}
.stat .v.accent{color:var(--accent)}

.dial{display:grid; grid-template-columns:repeat(9,1fr); gap:6px; margin-bottom:16px;}
.gear{
  aspect-ratio:1/1; border:1px solid var(--line); border-radius:8px; background:var(--bg2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  cursor:pointer; position:relative; padding:4px 2px;
}
.gear .n{font-family:var(--disp); font-size:16px; font-weight:700;}
.gear .amt{font-size:8.5px; color:var(--dim); font-family:var(--disp);}
.gear.selected{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 14px rgba(94,233,255,.45); background:rgba(94,233,255,.08);}
.gear.selected .n{color:var(--accent)}
.gear.winner{border-color:var(--good); box-shadow:0 0 0 1px var(--good), 0 0 14px rgba(107,255,160,.4);}
.gear.winner .n{color:var(--good)}
.gear:disabled,.gear[data-disabled="1"]{opacity:.55; cursor:not-allowed;}

.pinform{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.pinform input{
  flex:1 1 140px; background:var(--bg2); border:1px solid var(--line); border-radius:7px;
  color:var(--ink); font-family:var(--disp); font-size:14px; padding:10px 12px;
}
.btn{
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:7px;
  font-family:var(--disp); font-weight:700; font-size:13px; padding:11px 18px; cursor:pointer;
  letter-spacing:.02em;
}
.btn:disabled{opacity:.4; cursor:not-allowed;}
.btn.ghost{background:transparent; border:1px solid var(--accent); color:var(--accent);}
.hint{font-size:11.5px; color:var(--dim); margin-top:8px; line-height:1.5;}
.msg{font-size:12.5px; margin-top:10px; padding:8px 10px; border-radius:6px; border:1px solid var(--line);}
.msg.err{color:var(--bad); border-color:var(--bad);}
.msg.ok{color:var(--good); border-color:var(--good);}

/* ---------------- activity / ledger rail ---------------- */
.feed{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; max-height:420px; overflow:auto;}
.feed li{display:flex; justify-content:space-between; gap:8px; font-size:12px; border-bottom:1px dotted var(--line); padding-bottom:8px;}
.feed .who{font-family:var(--disp); color:var(--ink);}
.feed .meta{color:var(--dim);}
.empty{color:var(--dim); font-size:13px; padding:10px 0;}

.roundlist{display:flex; flex-direction:column; gap:10px;}
.roundrow{display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13px;}
.roundrow .num{font-family:var(--disp); font-size:18px; color:var(--accent);}

footer{margin-top:40px; border-top:1px solid var(--line); padding-top:16px; font-size:11.5px; color:var(--dim); display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:space-between;}
footer .addrs{font-family:var(--disp); font-size:10.5px; word-break:break-all;}
footer nav{display:flex; gap:14px;}
footer nav a{color:var(--dim); text-decoration:none;}
footer nav a:hover{color:var(--accent);}

.tag{display:inline-block; font-family:var(--disp); font-size:10px; padding:2px 7px; border-radius:20px; border:1px solid var(--line); color:var(--dim); text-transform:uppercase; letter-spacing:.05em;}
.tag.live{border-color:var(--good); color:var(--good);}
.tag.wait{border-color:var(--accent); color:var(--accent);}

@media (max-width:520px){
  .dial{grid-template-columns:repeat(5,1fr);}
  .clock-row{gap:12px;}
  .hero{padding:18px 14px 16px;}
}