/* PC Build Arena. Same design language as the shops and Central Registry. */
:root { --accent: #f59e0b; --ink: #1f2330; --muted: #6b7180; --bg: #f6f7fb; --card: #fff; --ok: #1b7a3a; --bad: #b42318; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
a { color: #b45309; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

.hero { background: linear-gradient(135deg, var(--accent), #1f2330); color: #fff; padding: 2.5rem 0 1.75rem; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand a { color: inherit; text-decoration: none; }
.logo { font-size: 2.5rem; line-height: 1; }
.hero h1 { margin: 0; font-size: 2.25rem; letter-spacing: -.02em; }
.tagline { margin: .5rem 0 1rem; opacity: .9; font-size: 1.1rem; }
.stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.stats span { background: rgba(255,255,255,.15); border-radius: 999px; padding: .15rem .8rem; font-size: .85rem; }
.cta { display: inline-block; margin-top: 1.25rem; background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; padding: .5rem 1rem; border-radius: 8px; border: 0; font-size: 1rem; cursor: pointer; }
.cta.dark { background: var(--ink); color: #fff; margin-top: .5rem; }

h2.section { font-size: 1.15rem; margin: 2rem 0 .75rem; }
.card { background: var(--card); border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 1.25rem; }

table.board { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.board th, .board td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid #eef0f5; }
.board th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: #fafbfd; }
.board tr:last-child td { border-bottom: 0; }
.rank { font-weight: 700; font-size: 1.1rem; width: 3.5rem; }
.bar { background: #eef0f5; border-radius: 999px; height: .5rem; width: 9rem; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: .5rem; }
.bar i { display: block; height: 100%; background: var(--accent); }
.bar i.p0 { width: 0; } .bar i.p1 { width: 11%; } .bar i.p2 { width: 22%; } .bar i.p3 { width: 33%; }
.bar i.p4 { width: 44%; } .bar i.p5 { width: 56%; } .bar i.p6 { width: 67%; } .bar i.p7 { width: 78%; }
.bar i.p8 { width: 89%; } .bar i.p9 { width: 100%; background: var(--ok); }
.badge { font-size: .75rem; border-radius: 999px; padding: .1rem .55rem; background: #fff4e0; color: #9a5b00; }
.badge.done { background: #e7f6ec; color: var(--ok); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; }
.slot { background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.slot img { width: 100%; aspect-ratio: 1; display: block; }
.slot.empty img { filter: grayscale(1); opacity: .35; }
.slot .body { padding: .6rem .8rem .8rem; }
.slot h3 { font-size: .9rem; margin: 0; }
.slot p { margin: .15rem 0 0; font-size: .8rem; color: var(--muted); }
.slot .pts { font-weight: 700; color: #b45309; }

form.report { display: grid; gap: .9rem; max-width: 28rem; }
form.report label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
form.report input { font: inherit; padding: .55rem .7rem; border: 1px solid #d6d9e2; border-radius: 8px; }
.msg { border-radius: 12px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.msg.ok { background: #e7f6ec; color: var(--ok); }
.msg.bad { background: #fde8e8; color: var(--bad); }
.steps { padding-left: 1.2rem; margin: 0; }
.steps li { margin: .3rem 0; }
.empty-note { color: var(--muted); }

.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; margin-top: 3rem; padding-top: 1.5rem; padding-bottom: 3rem; border-top: 1px solid #e3e5ec; color: var(--muted); }
.foot h3 { color: var(--ink); font-size: 1rem; margin: 0 0 .5rem; }
.foot ul { padding-left: 1.1rem; margin: 0; }
code { background: #eceef4; padding: 0 .3rem; border-radius: 4px; font-size: .9em; }
.cta.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.help .card { margin-bottom: .5rem; }
.help .card p { margin: .4rem 0; }
.help pre { background: #1f2330; color: #e8eaf2; padding: .75rem 1rem; border-radius: 8px; overflow-x: auto; font-size: .85rem; }
.help .card table.board { box-shadow: none; margin: .5rem 0; }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.tabs a { text-decoration: none; padding: .35rem .9rem; border-radius: 999px; background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-size: .9rem; }
.tabs a.on { background: var(--ink); color: #fff; }
.badge.bad { background: #fde8e8; color: var(--bad); }
.checks { list-style: none; padding: 0; margin: 0 0 1rem; }
.checks li { padding: .3rem 0; }
.checks li.bad { color: var(--bad); }
.checks .hint { color: var(--muted); font-size: .85rem; margin-left: .4rem; }
form.mini { display: flex; gap: .3rem; margin-top: .4rem; }
form.mini input { width: 100%; min-width: 0; font: inherit; font-size: .75rem; padding: .2rem .4rem; border: 1px solid #d6d9e2; border-radius: 6px; }
form.mini button { font: inherit; font-size: .75rem; padding: .2rem .5rem; border: 0; border-radius: 6px; background: #fde8e8; color: var(--bad); cursor: pointer; }
button[disabled] { opacity: .45; cursor: not-allowed; }
.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.board-card h3 { margin: 0; }
.board-card .empty-note { margin: .2rem 0 .6rem; font-size: .85rem; }
table.board.compact { box-shadow: none; }
.board.compact td { padding: .4rem .5rem; }
nav.tabs { margin: 1.25rem 0 0; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
.chart { margin: 0; }
.chart figcaption { font-weight: 600; margin-bottom: .4rem; }
.chart svg { width: 100%; height: auto; font-size: 9px; fill: #6b7180; }
form.search { display: flex; gap: .5rem; margin-bottom: 1rem; max-width: 28rem; }
form.search input { flex: 1; font: inherit; padding: .5rem .7rem; border: 1px solid #d6d9e2; border-radius: 8px; }
form.search button { font: inherit; padding: .5rem 1rem; border: 0; border-radius: 8px; background: var(--ink); color: #fff; cursor: pointer; }

/* Gold coin (the 🪙 emoji renders silver on many systems). */
.coin { display: inline-block; width: .95em; height: .95em; border-radius: 50%; vertical-align: -.12em; margin: 0 .12em;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #f5c518 45%, #b8860b); box-shadow: inset 0 0 0 1px #a87a00; }

/* ===================== v0.22 ARCADE THEME (overrides everything above) ===================== */
:root {
  --bg: #07080d; --panel: #10121c; --panel2: #161a28; --line: #232842;
  --ink: #e7e9f5; --muted: #8b90a8; --neon: #00e5ff; --neon2: #ff2bd6; --gold: #ffd23f;
  --ok: #2bff88; --bad: #ff4d6d; --accent: #00e5ff; --card: #10121c;
}
body { background: radial-gradient(1200px 600px at 10% -10%, #1b1f3a 0%, transparent 60%),
                   radial-gradient(900px 500px at 110% 0%, #2a0f33 0%, transparent 55%), var(--bg);
       color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100vh; }
a { color: var(--neon); text-decoration: none; }
a:hover { text-shadow: 0 0 8px var(--neon); }
.wrap { max-width: none; padding: 0 clamp(1rem, 3vw, 3rem); }

.hero { background: linear-gradient(120deg, rgba(0,229,255,.12), rgba(255,43,214,.12)), var(--panel);
        border-bottom: 1px solid var(--line); box-shadow: 0 0 40px rgba(0,229,255,.08); padding: 1.6rem 0 1.3rem; }
.hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); letter-spacing: .04em; text-transform: uppercase;
           background: linear-gradient(90deg, var(--neon), var(--neon2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 a { color: inherit; }
.logo { filter: drop-shadow(0 0 10px rgba(255,210,63,.7)); }
.tagline { color: var(--muted); opacity: 1; }
.stats span { background: var(--panel2); border: 1px solid var(--line); color: var(--ink); font-size: .9rem; }
.stats b { color: var(--gold); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.cta { background: var(--neon); color: #001218; box-shadow: 0 0 18px rgba(0,229,255,.45); }
.cta.ghost { background: transparent; color: var(--neon); border: 1px solid var(--neon); }

nav.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.2rem 0 .4rem; }
nav.tabs a { background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: none; padding: .45rem 1rem; }
nav.tabs a.on { background: linear-gradient(90deg, var(--neon), var(--neon2)); color: #05060a; border-color: transparent;
                box-shadow: 0 0 16px rgba(0,229,255,.35); font-weight: 700; }
nav.tabs .spacer { flex: 1; }
nav.tabs a.live { font-family: ui-monospace, Menlo, monospace; border-color: var(--muted); color: var(--muted); }
nav.tabs a.live.on { background: transparent; color: var(--ok); border-color: var(--ok); box-shadow: 0 0 14px rgba(43,255,136,.45); }

h2.section { color: var(--ink); text-transform: uppercase; letter-spacing: .08em; font-size: 1.05rem;
             border-left: 3px solid var(--neon2); padding-left: .6rem; margin: 2rem 0 .8rem; }
h2.section small { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; margin-left: .5rem; }
.card { background: var(--panel); border: 1px solid var(--line); box-shadow: none; color: var(--ink); }
.empty-note { color: var(--muted); }

table.board { background: var(--panel); border: 1px solid var(--line); box-shadow: none; color: var(--ink); }
.board th { background: var(--panel2); color: var(--muted); border-bottom: 1px solid var(--line); }
.board td { border-bottom: 1px solid var(--line); }
.board tbody tr:hover td { background: rgba(0,229,255,.05); }
table.arcade td.score { font-family: ui-monospace, Menlo, monospace; font-size: 1.15rem; font-weight: 800; color: var(--gold); }
table.arcade td.who a { font-weight: 700; color: var(--ink); }
table.arcade td.when { color: var(--muted); font-size: .85rem; }
table.arcade tr.r1 td { background: linear-gradient(90deg, rgba(255,210,63,.16), transparent 70%); }
table.arcade tr.r2 td { background: linear-gradient(90deg, rgba(192,200,220,.12), transparent 70%); }
table.arcade tr.r3 td { background: linear-gradient(90deg, rgba(205,127,50,.14), transparent 70%); }
table.arcade tr.r1 td.rank { text-shadow: 0 0 12px rgba(255,210,63,.9); }
.rank { font-size: 1.3rem; }
.board-block { margin-bottom: 1.2rem; }

.badge { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.badge.done { color: var(--ok); border-color: rgba(43,255,136,.4); background: rgba(43,255,136,.08); }
.badge.bad { color: var(--bad); border-color: rgba(255,77,109,.4); background: rgba(255,77,109,.08); }
.msg.ok { background: rgba(43,255,136,.08); color: var(--ok); border: 1px solid rgba(43,255,136,.3); }
.msg.bad { background: rgba(255,77,109,.08); color: var(--bad); border: 1px solid rgba(255,77,109,.3); }

.grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.slot { background: var(--panel); border: 1px solid var(--line); box-shadow: none; }
.slot h3 { color: var(--ink); }
.slot .pts { color: var(--gold); }
.slot.empty { opacity: .6; }
.checks li.bad { color: var(--bad); }

.charts { grid-template-columns: 1fr; }
.chart { background: var(--panel); border: 1px solid var(--line); }
.chart figcaption { color: var(--ink); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
.chart svg { font-size: 10px; fill: var(--muted); }

form.search input { background: var(--panel); color: var(--ink); border-color: var(--line); }
form.search button { background: linear-gradient(90deg, var(--neon), var(--neon2)); color: #05060a; font-weight: 700; }
code { background: var(--panel2); color: #b8f6ff; }
.help pre { background: #05060a; border: 1px solid var(--line); }
.foot { border-top: 1px solid var(--line); color: var(--muted); }
.foot h3 { color: var(--ink); }

/* Auto-refresh switch (a link styled as a toggle) */
nav.tabs a.toggle { display: inline-flex; align-items: center; gap: .55rem; background: transparent; border: 0;
  color: var(--muted); font-family: ui-monospace, Menlo, monospace; padding: .3rem .2rem; }
nav.tabs a.toggle .track { position: relative; width: 2.6rem; height: 1.4rem; border-radius: 999px; background: var(--panel2);
  border: 1px solid var(--line); transition: background .2s, box-shadow .2s; }
nav.tabs a.toggle .knob { position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--muted); transition: left .2s, background .2s; }
nav.tabs a.toggle.on { color: var(--ok); background: transparent; box-shadow: none; }
nav.tabs a.toggle.on .track { background: rgba(43,255,136,.18); border-color: var(--ok); box-shadow: 0 0 12px rgba(43,255,136,.45); }
nav.tabs a.toggle.on .knob { left: 1.35rem; background: var(--ok); }

/* ===================== v0.22 LIGHT THEME (body.light; toggled per device) ===================== */
body.light {
  --bg: #f4f6fb; --panel: #ffffff; --panel2: #eef1f8; --line: #dfe3ee;
  --ink: #141826; --muted: #5b6177; --neon: #0a6cff; --neon2: #c026d3; --gold: #b7791f;
  --ok: #15803d; --bad: #dc2626; --accent: #0a6cff; --card: #ffffff;
  background: radial-gradient(1200px 600px at 10% -10%, #e3ecff 0%, transparent 60%),
              radial-gradient(900px 500px at 110% 0%, #f8e3fb 0%, transparent 55%), var(--bg);
}
body.light .hero { background: linear-gradient(120deg, rgba(10,108,255,.10), rgba(192,38,211,.10)), #fff;
  box-shadow: 0 1px 0 var(--line); }
body.light a:hover { text-shadow: none; text-decoration: underline; }
body.light .cta { color: #fff; box-shadow: 0 4px 14px rgba(10,108,255,.3); }
body.light nav.tabs a.on { color: #fff; box-shadow: 0 4px 14px rgba(10,108,255,.25); }
body.light code { background: var(--panel2); color: #3730a3; }
body.light .help pre { background: #0f172a; color: #e2e8f0; }
body.light .board tbody tr:hover td { background: rgba(10,108,255,.05); }
body.light table.arcade tr.r1 td.rank { text-shadow: none; }
body.light .logo { filter: none; }
nav.tabs a.toggle.theme.on { color: var(--gold); }
nav.tabs a.toggle.theme.on .track { background: rgba(183,121,31,.15); border-color: var(--gold); box-shadow: none; }
nav.tabs a.toggle.theme.on .knob { background: var(--gold); }
/* v0.3 fix: "body.light nav.tabs a.on" (active tab = white text) also hit the ON toggles,
   making "Auto-refresh 10s" white on white. Toggles keep their own colours. */
body.light nav.tabs a.toggle.on { color: var(--ok); box-shadow: none; }
body.light nav.tabs a.toggle.theme.on { color: var(--gold); }

/* v0.3: UTC clock + reset note, top right of the hero (render time; no JS) */
.hero .wrap { position: relative; }
.clock { position: absolute; top: 0; right: clamp(1rem, 3vw, 3rem); text-align: right; display: flex; flex-direction: column; gap: .15rem; }
.clock time { font-family: ui-monospace, monospace; font-size: 1rem; color: var(--neon, inherit); }
.clock small { font-size: .78rem; color: var(--muted, inherit); max-width: 18rem; }
@media (max-width: 700px) { .clock { position: static; text-align: left; margin-bottom: .6rem; } }

/* v0.4: feedback form + agent prompt */
form.feedback { display: flex; flex-direction: column; gap: .9rem; }
form.feedback .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; }
form.feedback label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; }
form.feedback input, form.feedback select, form.feedback textarea {
  font: inherit; font-weight: 400; padding: .55rem .7rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink); }
form.feedback textarea { resize: vertical; min-height: 10rem; }
form.feedback .cta { align-self: flex-start; cursor: pointer; border: 0; }
.card.ok { border-color: var(--ok); color: var(--ok); }
.card.bad { border-color: var(--bad); color: var(--bad); }
pre.prompt { white-space: pre-wrap; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 8px; padding: .9rem 1rem; font-size: .92rem; }