/* Shared styles for the landing, the whitelist and the docs. Panels and buttons are the UI pack's own pieces
   (public/ui/*.png, cut by tools/build_web_ui.py) drawn with border-image at 3x; CSS only places them and the text. */
:root{
  --bg:#17130f;--bg2:#211b15;--ink:#f4ead2;--muted:#c2b394;--parch-ink:#3b2a18;--parch-muted:#6e5638;
  --gold:#f2c14e;--green:#5fcf80;--red:#e0644f;--line:#3a3026;
  --head:'Pixelify Sans',system-ui,sans-serif;--body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-ligatures:none}
/* Pixelify's "fi" ligature reads as "A"; the font shorthand used across the site resets this, hence !important */
*{font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"clig" 0!important}
img{max-width:100%;display:block}
.px{image-rendering:pixelated}
a{color:var(--gold)}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.15;margin:0 0 12px;letter-spacing:.5px}
h2{font-size:clamp(28px,4vw,40px)}h3{font-size:22px}
p{margin:0 0 12px}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 32px}
.sec-head p{color:var(--muted)}
.kicker{font-family:var(--body);font-weight:800;color:var(--gold);font-size:14px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}

/* ---------- pack pieces ---------- */
.panel{border-style:solid;border-width:18px;border-image:url(/ui/parch.png) 6 fill / 18px / 0 stretch;image-rendering:pixelated;color:var(--parch-ink);padding:6px 8px}
.panel .muted,.panel small{color:var(--parch-muted)}
.panel a,.titled a{color:#7a3d12;font-weight:700}
/* titles that carry numbers: the pixel font draws 5 like S */
.num-title{font-family:var(--body)!important;font-weight:800!important}
.dark{border-style:solid;border-width:15px;border-image:url(/ui/dark.png) 5 fill / 15px / 0 stretch;image-rendering:pixelated;color:var(--ink);padding:4px 6px}
.titled{position:relative;border-style:solid;border-width:48px 18px 18px;border-image:url(/ui/titled.png) 16 6 6 6 fill / 48px 18px 18px / 0 stretch;image-rendering:pixelated;color:var(--parch-ink);padding:10px 8px 6px}
.titled>.t{position:absolute;top:-42px;left:-6px;right:-6px;height:36px;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;color:#fff;font-size:20px;text-shadow:2px 2px 0 #1d4a35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:2px 14px 4px;border-style:solid;border-width:9px 12px 12px;
  border-image:url(/ui/btn.png) 3 4 4 4 fill / 9px 12px 12px 12px / 0 stretch;image-rendering:pixelated;background:none;
  font:700 18px/1 var(--head);color:#10261c;text-decoration:none;cursor:pointer;white-space:nowrap;text-shadow:1px 1px 0 rgba(255,255,255,.25)}
.btn:hover{border-image-source:url(/ui/btn_hover.png)}
.btn:active{border-image-source:url(/ui/btn_down.png);border-image-slice:3 4 3 4 fill;border-bottom-width:9px;margin-top:3px;min-height:49px}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn.big{min-height:62px;font-size:21px;padding:2px 22px 4px}
.btn.alt{border-width:15px;border-image:url(/ui/dark.png) 5 fill / 15px / 0 stretch;color:var(--ink);text-shadow:none;padding:0 10px;min-height:52px}
.btn.alt:hover{filter:brightness(1.15)}
.btn.alt:active{margin-top:0;min-height:52px;filter:brightness(.95)}
.btn:disabled,.btn.off{border-image-source:url(/ui/btn_off.png);border-image-slice:3 4 3 4 fill;border-bottom-width:9px;opacity:.6;cursor:not-allowed;margin-top:0}
.btn.red{filter:hue-rotate(-125deg) saturate(1.6) brightness(.95)}
.btn.red>*{filter:hue-rotate(125deg)}
.btn.sm{min-height:44px;font-size:16px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:rgba(18,14,11,.92);backdrop-filter:blur(6px);border-bottom:2px solid #2c241c}
.nav .wrap{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand .logo{width:44px;height:44px;border:2px solid #4a3b2b;image-rendering:pixelated}
.brand .wm{height:22px;image-rendering:pixelated}
.links{display:flex;gap:4px;margin-left:auto;align-items:center}
.links a{font:700 16px var(--body);color:var(--ink);text-decoration:none;padding:8px 10px}
.links a:hover{color:var(--gold)}
.links .btn{margin-left:6px}
.menu{display:none;margin-left:auto;background:none;border:0;color:var(--ink);font:800 15px var(--body);letter-spacing:1px;cursor:pointer;padding:8px}
.who{display:flex;align-items:center;gap:8px;font:700 14px var(--body);color:var(--muted)}
@media (max-width:900px){
  .menu{display:block}
  .links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;background:#16120e;border-bottom:2px solid #2c241c;padding:8px 16px 16px;gap:2px}
  .links.open{display:flex}
  .links .btn{margin:6px 0 0}
}

/* ---------- CA box ---------- */
.ca{display:flex;flex-direction:column;gap:8px;min-width:0}
.ca .lbl{font:800 14px var(--body);letter-spacing:1.5px;color:var(--parch-muted)}
.ca .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ca code{font:600 15px/1.3 ui-monospace,Consolas,monospace;word-break:break-all;flex:1 1 240px;min-width:0;color:var(--parch-ink)}
.ca .soon{font:800 21px var(--body);color:var(--parch-ink)}

/* ---------- misc ---------- */
/* The pixel font is only for titles and buttons; values, numbers and labels use the body font so 5, 8, S and C stay apart. */
.val{font:800 17px var(--body);font-variant-numeric:tabular-nums;color:var(--parch-ink);text-align:right}
.chip{display:inline-block;white-space:nowrap;flex:none;font:800 12px/1.4 var(--body);letter-spacing:1.5px;text-transform:uppercase;padding:2px 9px;background:#2d3b2a;color:#bfe8a6;border:2px solid #446a3c}
.chip.red{background:#4a2420;color:#ffc2b4;border-color:#7a3a30}
.chip.gold{background:#4a3b19;color:#ffe08a;border-color:#7d6427}
.grid{display:grid;gap:22px}
.scroll{overflow-x:auto;max-width:100%}
.shot{border:3px solid #4a3b2b;background:#000;image-rendering:pixelated;aspect-ratio:16/9;object-fit:cover;width:100%}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:100;max-width:calc(100vw - 32px);font:600 15px var(--body)}
.foot{padding:36px 0 44px;border-top:2px solid #2c241c;color:var(--muted);font-size:14px}
.foot .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.foot a{color:var(--muted)}
.foot .sp{margin-left:auto}
@media (max-width:600px){section{padding:52px 0}.wrap{padding:0 16px}}

/* ---------- modal (wallet picker) ---------- */
.modal{position:fixed;inset:0;z-index:90;background:rgba(8,6,4,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{width:min(440px,100%)}
.modal .wl-list{max-height:calc(100svh - 260px);overflow:auto}
.wl-list{display:grid;gap:8px;margin-bottom:12px}
.wl-row{display:flex;align-items:center;gap:12px;padding:6px 4px;border-bottom:2px dashed rgba(59,42,24,.18)}
.wl-row b{flex:1;font:800 17px var(--body);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-row .wi{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex:none}
.wl-row .wi img{width:32px;height:32px;object-fit:contain}
.wl-row .wi img.px{width:18px;height:22px}
.small{font-size:14px}
.right{display:flex;justify-content:flex-end}