/* Crypto AID - landing. 9:16 locked, red/white/metal, circuit neon.
   No CDN, no font download, no library. Everything here is CSS or inline SVG. */

:root{
  --red:#E11B22; --red-hot:#FF3B30; --red-deep:#8F1015; --red-dark:#4A070B;
  --ink:#0B0C0F; --ink-2:#12141A; --line:rgba(255,255,255,.10);
  --white:#FFFFFF; --dim:#B7BCC6; --faint:#7C838F;
  --glow:0 0 6px rgba(225,27,34,.9), 0 0 18px rgba(225,27,34,.55), 0 0 40px rgba(225,27,34,.25);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --stage-w:min(100vw, calc(100dvh * 9 / 16));
}
*,*::before,*::after{box-sizing:border-box}
/* hidden must beat every display rule below, or a panel shows before its turn */
[hidden]{display:none!important}
html,body{margin:0;padding:0;height:100%;background:#05060A;color:var(--white);
  font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---- the room around the 9:16 stage (only visible on wide screens) ------- */
.room{min-height:100dvh;display:grid;place-items:center;position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(225,27,34,.22), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(143,16,21,.30), transparent 60%),
    #05060A;}
.room::before{content:"";position:absolute;inset:-2px;pointer-events:none;
  background-image:linear-gradient(rgba(225,27,34,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(225,27,34,.055) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(closest-side at 50% 40%,#000 55%,transparent 100%)}

/* ---- the locked stage ---------------------------------------------------- */
.stage{position:relative;width:var(--stage-w);aspect-ratio:9/16;max-height:100dvh;
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#0C0D12 0%, #0A0B10 55%, #120A0C 100%);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(225,27,34,.16), 0 30px 120px rgba(0,0,0,.75),
             inset 0 1px 0 rgba(255,255,255,.05)}
@media (max-width:560px){.stage{border:0;box-shadow:none}}

/* circuitry drawn behind the content */
.circuit{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none}
.trace{fill:none;stroke:var(--red);stroke-width:1;opacity:.30;
  stroke-dasharray:6 260;animation:flow 7s linear infinite}
.trace.b{stroke:#FF6A62;opacity:.22;animation-duration:11s;animation-delay:-3s}
.trace.c{stroke:#fff;opacity:.10;animation-duration:15s;animation-delay:-6s}
@keyframes flow{to{stroke-dashoffset:-266}}
.node{fill:var(--red);opacity:.75;animation:pulse 3.2s ease-in-out infinite}
.node:nth-of-type(2n){animation-delay:-1.1s} .node:nth-of-type(3n){animation-delay:-2.2s}
@keyframes pulse{0%,100%{opacity:.25;r:1.6}50%{opacity:.95;r:2.9}}
.chip{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}
.chip-core{fill:rgba(225,27,34,.20);stroke:var(--red);stroke-width:1}

/* a slow scan line, the only motion that crosses the whole stage */
.scan{position:absolute;left:0;right:0;height:180px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(225,27,34,.055),transparent);
  animation:scan 9s ease-in-out infinite}
@keyframes scan{0%{top:-180px}100%{top:100%}}

/* ---- content ------------------------------------------------------------- */
.wrap{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  padding:clamp(13px,3.4vw,22px);overflow-y:auto;scrollbar-width:none}
.wrap::-webkit-scrollbar{display:none}

.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:auto}
.chain{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  font:600 10px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.chain b{color:#fff;font-weight:700}

.hero{text-align:center;padding:2px 0 0}
.badge{width:clamp(78px,19.5vw,112px);height:auto;margin:0 auto clamp(7px,1.8vw,12px);display:block;
  filter:drop-shadow(0 0 18px rgba(225,27,34,.55)) drop-shadow(0 10px 30px rgba(0,0,0,.6))}
h1{margin:0 0 6px;font-size:clamp(22px,6.0vw,31px);line-height:1.05;font-weight:850;letter-spacing:-.025em}
h1 .metal{background:linear-gradient(180deg,#fff 0%,#E9EDF3 38%,#9AA3B0 52%,#fff 74%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}
h1 .neon{color:var(--red);text-shadow:var(--glow)}
.sub{margin:0 auto;max-width:36ch;color:var(--dim);font-size:clamp(11.5px,2.9vw,13px);line-height:1.4}

.limits{margin:clamp(8px,1.8vw,11px) 0 0;padding:8px 10px;border-radius:10px;
  border:1px solid rgba(255,255,255,.10);border-left:2px solid var(--red);
  background:rgba(255,255,255,.03);font-size:11px;line-height:1.45;color:var(--dim);text-align:left}
.limits b{color:#fff}

/* ---- the one button ------------------------------------------------------ */
.btn{display:block;width:100%;padding:13px 18px;border:0;border-radius:11px;cursor:pointer;
  font:800 13px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#FF4A44 0%,var(--red) 42%,#A5121A 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 8px 26px rgba(225,27,34,.42),
             0 1px 0 rgba(255,255,255,.35) inset;
  position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%{left:-60%}55%{left:120%}100%{left:120%}}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:default}
.btn--ghost{background:rgba(255,255,255,.05);color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset}
.btn--ghost::after{display:none}

.field{margin:8px 0 0}
.field input{width:100%;padding:12px 14px;border-radius:11px;color:#fff;font:15px/1.2 var(--font);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16)}
.field input::placeholder{color:var(--faint)}
.field input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}

.bound{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border-radius:11px;
  border:1px solid rgba(79,168,122,.35);background:rgba(79,168,122,.10);font-size:12px;color:#B9F0D2}
.bound .mono{font-family:var(--mono);font-size:11.5px;color:#fff}

.msg{margin-top:8px;font-size:12px;min-height:1.1em}
.msg.err{color:#FF8A84} .msg.ok{color:#8FE7B8}

.count{margin-top:8px;text-align:center;font-size:11.5px;color:var(--faint)}
.count b{color:#fff;font-family:var(--mono);font-size:15px}

/* ---- partners ------------------------------------------------------------ */
.partners{margin-top:auto;padding-top:clamp(10px,2.4vw,16px);border-top:1px solid var(--line)}
.partners .lbl{font:700 8.5px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);text-align:center;margin-bottom:8px}
.marks{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.6vw,18px);flex-wrap:wrap;row-gap:6px}
.marks svg{height:19px;width:auto;opacity:.9}
.foot{margin-top:9px;text-align:center;font-size:9.5px;color:var(--faint);line-height:1.5}

.deposit{margin:9px 0 0;font-size:11px;line-height:1.45;color:var(--dim);text-align:center}
.deposit b{color:#fff}

/* --- confirmation ------------------------------------------------------- */
.tick{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;margin:6px auto 14px;
  border:2px solid rgba(47,163,108,.45);background:rgba(47,163,108,.10)}
.seatno{margin:2px 0 8px;font:800 15px/1 var(--font);color:var(--dim)}
.seatno b{color:#fff;font-family:var(--mono);font-size:26px;letter-spacing:-.02em}
.kv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:12.5px;
  border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--dim)}
.kv span:last-child{color:#fff;font-weight:600;text-align:right}
.card{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px;padding:14px}

/* wallet partners - shown only when no wallet answered */
.getwallet{margin-top:14px;display:grid;gap:9px;text-align:left}
.gw-h{margin:0 0 2px;font-size:13px;font-weight:600;color:#fff}
.gw{display:flex;gap:11px;align-items:flex-start;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:11px 12px}
.gw.is-partner{border-color:#E5372E;background:rgba(229,55,46,.10)}
.gw img{flex:0 0 auto;border-radius:9px;background:#fff}
.gw-t{min-width:0}
.gw-t b{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600}
.gw-t b i{font-style:normal;font-size:10px;font-weight:700;color:#fff;background:#E5372E;
  border-radius:999px;padding:3px 7px;white-space:nowrap}
.gw-t span{display:block;font-size:12px;color:rgba(255,255,255,.66);margin-top:3px}
.gw-f{margin:2px 0 0;font-size:11.5px;color:rgba(255,255,255,.55)}