/* Landers of play.pixelpyro.xyz (server/routes.js): the night of the arcade games, phone first. No scripts. */
:root{
  --night:#03040a; --navy:#000d3b; --orange:#f88401; --cyan:#01bdfb; --blue:#0192f8; --lime:#8cf129; --gold:#ffd23f; --rim:#2b3266;
  --ink:#eef2ff; --ink-dim:rgba(238,242,255,.66); --ink-faint:rgba(238,242,255,.38);
  --display:'Fredoka',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --pixel:'Press Start 2P',ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night)}
body{min-height:100vh;min-height:100dvh;color:var(--ink);font-family:var(--body);-webkit-text-size-adjust:100%;
  background:
    radial-gradient(ellipse 120% 60% at 50% 108%,rgba(43,50,102,.55) 0%,rgba(10,21,72,.25) 38%,transparent 70%),
    linear-gradient(180deg,#02030a 0%,#040a26 55%,#0a1548 100%) fixed;
  padding:calc(env(safe-area-inset-top,0px) + 28px) 16px calc(env(safe-area-inset-bottom,0px) + 28px);
  display:flex;flex-direction:column;align-items:center;overflow-x:hidden}
/* a few pixel stars, painted with one element */
body::before{content:"";position:fixed;left:0;top:0;width:1px;height:1px;pointer-events:none;opacity:.8;
  box-shadow:12vw 8vh #c9d6ff,27vw 22vh rgba(210,225,255,.6),41vw 5vh #fff,63vw 14vh rgba(210,225,255,.5),78vw 6vh #c9d6ff,88vw 26vh rgba(210,225,255,.6),
    6vw 34vh rgba(210,225,255,.4),52vw 31vh rgba(210,225,255,.35),94vw 44vh rgba(210,225,255,.4),18vw 52vh rgba(210,225,255,.3),70vw 48vh rgba(210,225,255,.3),35vw 64vh rgba(210,225,255,.25)}
main{width:min(100%,440px);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.eyebrow{font:400 9px/1 var(--pixel);color:var(--lime);letter-spacing:.08em}
.logo{width:min(62vw,250px);margin-top:16px;filter:drop-shadow(0 6px 30px rgba(0,0,0,.6))}
h1{font:700 clamp(40px,12vw,58px)/1 var(--display);letter-spacing:.02em;margin-top:16px;background:linear-gradient(180deg,#fff 0%,#dbe9ff 55%,#8fd3ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 26px rgba(1,189,251,.35))}
.lead{font:500 14px/1.55 var(--body);color:var(--ink-dim);margin-top:10px;max-width:340px}
.games{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:26px}
.game{display:block;text-decoration:none;color:inherit;text-align:left;border-radius:20px;padding:16px 18px;border:1px solid rgba(238,242,255,.12);background:linear-gradient(180deg,rgba(0,13,59,.72),rgba(3,4,10,.78));box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .12s,border-color .2s}
.game:active{transform:scale(.98)}
.game:hover{border-color:rgba(1,189,251,.45)}
.game .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.game h2{font:700 24px/1.1 var(--display)}
.tag{font:600 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;border-radius:999px;white-space:nowrap}
.tag.live{color:#1a0a00;background:var(--lime)}
.tag.soon{color:var(--ink-dim);border:1px solid rgba(238,242,255,.2)}
.game p{font:400 13px/1.5 var(--body);color:var(--ink-dim);margin-top:6px}
.game .go{display:inline-block;margin-top:10px;font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.game.skyshot{border-color:rgba(1,189,251,.35)}
.game.soon{cursor:default}
.game.soon:hover{border-color:rgba(238,242,255,.12)}
.game.soon:active{transform:none}
.game.skyshot .go{color:var(--orange)}
.btn{display:inline-block;text-decoration:none;font:700 17px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:17px 36px;border-radius:999px;color:#1a0a00;background:linear-gradient(180deg,#ffb04a,var(--orange) 60%,#e06f00);box-shadow:0 10px 30px rgba(248,132,1,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.ghost{background:rgba(238,242,255,.08);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(238,242,255,.16)}
.actions{display:flex;flex-direction:column;gap:10px;width:min(100%,300px);margin-top:26px}
.info{margin-top:26px;width:100%;text-align:left;border-radius:16px;padding:14px 16px;border:1px solid rgba(238,242,255,.08);background:rgba(3,4,10,.45);font:400 13px/1.55 var(--body);color:var(--ink-dim)}
.info b{color:var(--ink);font-weight:600}
.info p+p{margin-top:8px}
.info a,.foot a{color:var(--cyan);text-decoration:none}
.soon-k{font:500 11px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);margin-top:22px}
.foot{margin-top:26px;font:400 11px/1.6 var(--body);letter-spacing:.06em;color:var(--ink-faint)}
@media (min-width:720px){ body{padding-top:56px} }
/* /login: sign in and link a wallet (lander/login/) */
[hidden]{display:none!important}
.panel{width:100%;display:flex;flex-direction:column;align-items:center}
.h1s{font-size:clamp(34px,10vw,46px)}
.btn.cyan{color:#00122b;background:linear-gradient(180deg,#7fe1ff,var(--cyan) 60%,#0090c4);box-shadow:0 10px 30px rgba(1,189,251,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.wide{width:min(100%,300px);margin-top:22px}
button.btn{border:0;cursor:pointer}
.btn.wait{opacity:.6;pointer-events:none}
.fine{font:400 12px/1.5 var(--body);color:var(--ink-faint);margin-top:8px}
.or{display:flex;align-items:center;gap:12px;width:min(100%,300px);margin-top:20px;font:500 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(238,242,255,.14)}
.form{display:flex;flex-direction:column;align-items:stretch;width:min(100%,300px);margin-top:16px;text-align:left}
.form label{font:500 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}
.form input{font:500 16px/1 var(--body);color:var(--ink);background:rgba(3,4,10,.6);border:1px solid rgba(238,242,255,.18);border-radius:12px;padding:14px}
.form input:focus{outline:2px solid var(--cyan);outline-offset:1px}
.form .btn.wide{margin-top:12px;width:100%}
.form .lead{text-align:left}
.linkbtn{background:none;border:0;color:var(--cyan);font:500 13px/1 var(--body);margin-top:14px;cursor:pointer}
.acct{margin-top:22px}
.msg{margin-top:18px;font:500 13px/1.5 var(--body);color:var(--lime);max-width:320px}
.msg.err{color:#ff8a7a}
#ldev{margin-top:18px;font:400 12px/1.5 var(--body);color:var(--ink-faint)}
#ldev .btn{font-size:12px;padding:8px 14px;margin:6px 4px 0}
#lts,#lts2{margin-top:12px}