:root {
  --bg: #07060f;
  --bg2: #0d0b1d;
  --panel: #12102a;
  --panel2: #191538;
  --line: #2f2a62;
  --line2: #463f8c;
  --ink: #ebe8ff;
  --dim: #9d97cf;
  --shield: #45f59a;
  --shield-d: #1c9f62;
  --q: #ff47d8;
  --q2: #9b5cff;
  --gold: #ffc94a;
  --warn: #ff6262;
  --px: 4px;
  --f-display: 'Press Start 2P', ui-monospace, monospace;
  --f-body: 'Pixelify Sans', system-ui, sans-serif;
  --f-mono: 'VT323', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; background:
    radial-gradient(1200px 600px at 80% -10%, #1b1340 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 30%, #10203a 0%, transparent 55%),
    var(--bg);
  color: var(--ink); font: 400 18px/1.55 var(--f-body);
  -webkit-font-smoothing: none;
}
.crt { position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; }
a { color: var(--shield); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, .mono { font-family: var(--f-mono); font-size: 1.15em; color: var(--gold); word-break: break-all; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.45; margin: 0 0 .7em; letter-spacing: .02em; }
h1 { font-size: clamp(20px, 3.2vw, 34px); }
h1 em { font-style: normal; color: var(--q); }
h2 { font-size: 16px; }
h3 { font-size: 13px; }
h4 { font-size: 11px; }
p { margin: 0 0 1em; }
.dim { color: var(--dim); }
.small { font-size: 15px; }
.center { justify-content: center; }
[hidden] { display: none !important; }

/* pixel border: notched corners */
.px, .panel, .btn, .input, .mod, .seg, .drop, .idchip, .dlg, .toast, .warnbar, .card {
  border: 0;
  box-shadow: calc(var(--px) * -1) 0 0 0 var(--bc, var(--line)), var(--px) 0 0 0 var(--bc, var(--line)),
              0 calc(var(--px) * -1) 0 0 var(--bc, var(--line)), 0 var(--px) 0 0 var(--bc, var(--line));
}

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px;
  padding: 14px max(16px, calc((100vw - 1180px) / 2)); background: rgba(7,6,15,.88); backdrop-filter: blur(6px);
  border-bottom: 4px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 15px; color: var(--ink); }
.brand img { image-rendering: pixelated; }
.brand:hover { text-decoration: none; color: var(--shield); }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { font-family: var(--f-display); font-size: 10px; color: var(--dim); padding: 8px 10px; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a.on { color: var(--bg); background: var(--shield); }
.idchip { --bc: var(--line2); display: flex; align-items: center; gap: 8px; background: var(--panel); color: var(--ink);
  font: 400 18px var(--f-mono); padding: 4px 12px; margin: 4px; cursor: pointer; }
.idchip .dot { width: 8px; height: 8px; background: var(--warn); }
.idchip.locked .dot { background: var(--gold); }
.idchip.ready .dot { background: var(--shield); box-shadow: 0 0 8px var(--shield); }

main { max-width: 1180px; margin: 0 auto; padding: 32px 16px 64px; }
.view { animation: in .25s steps(4); }
@keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- buttons / inputs ---------- */
.btn { --bc: var(--line2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 4px;
  background: var(--panel2); color: var(--ink); font: 400 11px/1 var(--f-display); padding: 14px 16px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .04em; position: relative; top: 0; transition: background .1s steps(2); }
.btn:hover { background: #241e52; text-decoration: none; }
.btn:active { top: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; top: 0; }
.btn-go { --bc: var(--shield); background: var(--shield); color: #06140c; }
.btn-go:hover { background: #7dffbb; }
.btn-q { --bc: var(--q); background: var(--q); color: #1d0218; }
.btn-sm { padding: 9px 10px; font-size: 9px; }
.input { --bc: var(--line2); width: 100%; margin: 4px; background: #0a0819; color: var(--ink); padding: 12px 14px;
  font: 400 20px var(--f-mono); outline: none; }
.input:focus { --bc: var(--shield); }
textarea.input { resize: vertical; min-height: 120px; line-height: 1.3; width: calc(100% - 8px); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.row .input { flex: 1; min-width: 160px; }
.lbl { display: block; font: 400 10px var(--f-display); color: var(--dim); margin: 18px 0 8px; text-transform: uppercase; }
.check { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--shield); }
.seg { --bc: var(--line2); display: inline-flex; margin: 4px; background: #0a0819; }
.seg button { background: none; border: 0; color: var(--dim); font: 400 10px var(--f-display); padding: 10px 14px; cursor: pointer; }
.seg button.on { background: var(--line2); color: var(--ink); }
.drop { --bc: var(--line2); display: flex; align-items: center; justify-content: center; text-align: center; min-height: 110px; margin: 10px 4px;
  background: repeating-linear-gradient(45deg, #0d0b20 0 8px, #100d26 8px 16px); color: var(--dim); cursor: pointer; padding: 16px; }
.drop.over { --bc: var(--shield); color: var(--ink); }

/* ---------- home ---------- */
.eyebrow { font: 400 10px var(--f-display); color: var(--q); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.qday { color: var(--gold); }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 24px 0 48px; }
.lead { font-size: 20px; color: #cfcaf5; max-width: 60ch; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.stats div { background: var(--panel); padding: 12px 14px; border-left: 4px solid var(--line2); }
.stats dt { font: 400 8px/1.6 var(--f-display); color: var(--dim); text-transform: uppercase; }
.stats dd { margin: 6px 0 0; font: 400 30px/1 var(--f-mono); color: var(--shield); }
.hero-art { text-align: center; }
#hero { width: 100%; max-width: 520px; aspect-ratio: 4 / 3; image-rendering: pixelated; background: #05040c;
  box-shadow: -8px 0 0 0 var(--line), 8px 0 0 0 var(--line), 0 -8px 0 0 var(--line), 0 8px 0 0 var(--line); }
.caption { font: 400 17px var(--f-mono); color: var(--dim); margin-top: 14px; }

.modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 8px 4px 48px; }
.mod { --bc: var(--line); display: flex; flex-direction: column; background: var(--panel); padding: 20px; color: var(--ink); transition: transform .12s steps(3); }
.mod:hover { --bc: var(--shield); text-decoration: none; transform: translateY(-4px); }
.mod p { color: var(--dim); font-size: 16px; flex: 1; }
.mod-n { font: 400 28px var(--f-mono); color: var(--q2); }
.mod-go { font: 400 10px var(--f-display); color: var(--shield); }

.panel { background: var(--panel); padding: 24px; margin: 4px 4px 32px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ok { color: var(--shield); } .no { color: var(--warn); }
.ticks, .crosses { list-style: none; padding: 0; margin: 0; }
.ticks li, .crosses li { padding-left: 28px; position: relative; margin-bottom: 10px; }
.ticks li::before { content: '■'; color: var(--shield); position: absolute; left: 4px; }
.crosses li::before { content: '×'; color: var(--warn); position: absolute; left: 4px; font-weight: 600; }

.algos, .reg { width: 100%; border-collapse: collapse; font-size: 16px; }
.algos th, .reg th { text-align: left; font: 400 9px var(--f-display); color: var(--dim); padding: 10px 8px; border-bottom: 4px solid var(--line); text-transform: uppercase; }
.algos td, .reg td { padding: 10px 8px; border-bottom: 2px dashed var(--line); }
.algos td:nth-child(2) { color: var(--shield); }
.reg tbody tr { cursor: pointer; }
.reg tbody tr:hover td { background: var(--panel2); }
.faq details { border-bottom: 2px dashed var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font: 400 11px/1.6 var(--f-display); list-style: none; }
.faq summary::before { content: '+ '; color: var(--shield); }
.faq details[open] summary::before { content: '- '; }
.faq details p { margin: 12px 0 4px; color: #cfcaf5; }

/* ---------- pages ---------- */
.page-head { margin: 8px 4px 28px; }
.warnbar { --bc: var(--warn); background: #2a0d14; color: #ffc3c3; padding: 12px 16px; margin: 4px 4px 28px; font-size: 16px; }
.scanform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.scanform .input { flex: 1; min-width: 220px; }

.scan-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
.meter { height: 28px; background: #0a0819; position: relative; margin: 8px 0 6px;
  box-shadow: -4px 0 0 0 var(--line2), 4px 0 0 0 var(--line2), 0 -4px 0 0 var(--line2), 0 4px 0 0 var(--line2); }
.meter i { position: absolute; inset: 4px auto 4px 4px; background: repeating-linear-gradient(90deg, var(--c, var(--shield)) 0 12px, transparent 12px 16px); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 17px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; word-break: break-all; }
.big { font: 400 46px/1 var(--f-mono); color: var(--gold); }
.tier { display: inline-block; font: 400 10px var(--f-display); padding: 8px 10px; background: var(--q); color: #1d0218; margin: 6px 0 14px; }
.toks { list-style: none; padding: 0; margin: 8px 0 0; max-height: 260px; overflow: auto; }
.toks li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 2px dashed var(--line); font-size: 16px; }
.toks img { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: -3px; margin-right: 6px; }

.steps { list-style: none; padding: 0; margin: 0; }
.step-h { display: flex; align-items: center; gap: 14px; }
.step-h h3 { margin: 0; flex: 1; }
.step-n { font: 400 14px var(--f-display); width: 36px; height: 36px; display: grid; place-items: center; background: var(--line2); color: var(--ink); }
.step.done .step-n { background: var(--shield); color: #06140c; }
.step.locked { opacity: .5; }
.step-state { font: 400 18px var(--f-mono); color: var(--dim); }
.step-b { margin-top: 18px; }
.step-b:empty { display: none; }
.pre { background: #0a0819; padding: 14px; font: 400 18px/1.3 var(--f-mono); color: #d7f8e6; white-space: pre-wrap; word-break: break-all; margin: 10px 4px; }

/* passport card */
.card { --bc: var(--gold); position: relative; max-width: 640px; margin: 24px 4px; padding: 26px 26px 22px;
  background: linear-gradient(135deg, #1a1440 0%, #110d2b 60%, #1f1030 100%); overflow: hidden; }
.card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,201,74,.05) 0 2px, transparent 2px 8px); pointer-events: none; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-title { font: 400 11px/1.6 var(--f-display); color: var(--gold); }
.card-no { font: 400 54px/1 var(--f-mono); color: var(--ink); }
.card-grid { display: grid; grid-template-columns: 96px 1fr; gap: 20px; margin-top: 16px; align-items: center; }
.card canvas { width: 96px; height: 96px; image-rendering: pixelated; background: #05040c; }
.card .kv { font-size: 16px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.badge { font: 400 8px var(--f-display); padding: 7px 8px; background: var(--line2); color: var(--ink); text-transform: uppercase; }
.badge.g { background: var(--shield-d); } .badge.q { background: #6b1f63; } .badge.y { background: #6a5115; }
.checks { list-style: none; padding: 0; margin: 12px 0; font-size: 17px; }
.checks li { padding: 4px 0; }
.checks .y::before { content: '✓ '; color: var(--shield); }
.checks .n::before { content: '✗ '; color: var(--warn); }
.checks .s::before { content: '… '; color: var(--gold); }

.vault-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.msg { background: #0a0819; padding: 16px; font: 400 21px/1.35 var(--f-mono); white-space: pre-wrap; word-break: break-word; margin: 12px 4px; color: #e9fff3; }

.game-wrap { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; }
.game-col { display: flex; flex-direction: column; align-items: center; }
#game { width: min(448px, 92vw); aspect-ratio: 224 / 256; image-rendering: pixelated; background: #03020a; outline: none;
  box-shadow: -8px 0 0 0 var(--line2), 8px 0 0 0 var(--line2), 0 -8px 0 0 var(--line2), 0 8px 0 0 var(--line2); margin: 8px; }
#game:focus { box-shadow: -8px 0 0 0 var(--shield), 8px 0 0 0 var(--shield), 0 -8px 0 0 var(--shield), 0 8px 0 0 var(--shield); }
.touch { display: none; gap: 10px; margin-top: 16px; width: min(448px, 92vw); }
.touch button { flex: 1; padding: 18px 0; background: var(--panel2); color: var(--ink); border: 0; font: 400 12px var(--f-display);
  box-shadow: -4px 0 0 0 var(--line2), 4px 0 0 0 var(--line2), 0 -4px 0 0 var(--line2), 0 4px 0 0 var(--line2); touch-action: manipulation; user-select: none; }
.touch button:active { background: var(--line2); }
@media (pointer: coarse) { .touch { display: flex; } }
.board-list { margin: 0; padding-left: 34px; font: 400 21px/1.5 var(--f-mono); }
.board-list li::marker { color: var(--dim); }
.board-list b { color: var(--gold); font-weight: 400; float: right; }

.foot { max-width: 1180px; margin: 0 auto; padding: 28px 16px 48px; border-top: 4px solid var(--line); font-size: 15px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.dlg { --bc: var(--line2); background: var(--panel); color: var(--ink); padding: 24px; max-width: min(520px, 92vw); }
.dlg::backdrop { background: rgba(3,2,10,.75); }
.toast { --bc: var(--shield); position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: var(--panel2); padding: 12px 18px;
  z-index: 60; transition: transform .2s steps(4), visibility 0s .2s; font-size: 16px; max-width: 90vw; visibility: hidden; }
.toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform .2s steps(4); }
.toast.err { --bc: var(--warn); }
.spin::after { content: ''; display: inline-block; width: 1ch; animation: dots 1s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

@media (max-width: 960px) {
  .hero, .scan-grid, .vault-grid, .game-wrap, .cols { grid-template-columns: 1fr; }
  .modules { grid-template-columns: 1fr 1fr; }
  .top { flex-wrap: wrap; gap: 10px; }
  .nav { order: 3; width: 100%; overflow-x: auto; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .modules { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:last-child { grid-column: span 2; }
  .algos { font-size: 14px; } .algos th:nth-child(3), .algos td:nth-child(3) { display: none; }
  .reg th:nth-child(3), .reg td:nth-child(3) { display: none; }
  .card-grid { grid-template-columns: 1fr; }
  .card-no { font-size: 40px; }
  .nav a { padding: 8px 7px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .view, .blink, .mod { animation: none; transition: none; } }