/* saddbambi.com shared styles: pixel forest at dusk (v2, "more matured"). Claude Opus 5.5, 2026-10-20. */
:root{
  --night:#141327; --ink:#f4e8da; --muted:#c4adbb; --line:rgba(244,232,218,.55);
  --glass:rgba(18,15,34,.93); --glass-hi:rgba(36,28,58,.96); --rose:#9a4566; --rose-hi:#ad5375; --rose-line:#e9a6bb;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --pix:"Silkscreen", ui-monospace, Menlo, monospace;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{background:var(--night);touch-action:manipulation}
body{
  font-family:var(--sans);color:var(--ink);background:var(--night);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  padding:max(34px,env(safe-area-inset-top)) 20px calc(150px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;overflow-x:hidden;
}
/* tall phones: center the profile block in the sky above the forest */
@supports (height:100dvh){body{padding-top:max(34px, env(safe-area-inset-top), calc((100dvh - 700px) / 2))}}
#forest{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;display:block;z-index:0}
main{position:relative;z-index:1;width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:18px}

/* 2px pixel border with notched corners */
.frame,.btn,.gate .box,.gate button{box-shadow:0 -2px 0 0 var(--line),0 2px 0 0 var(--line),-2px 0 0 0 var(--line),2px 0 0 0 var(--line)}

.frame{width:136px;height:136px;padding:4px;margin:2px 2px 6px;background:var(--glass)}
.frame canvas,.frame img{display:block;width:128px;height:128px}
.frame img{object-fit:cover}

header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
h1{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:66px;line-height:.9;letter-spacing:-.01em;color:var(--ink);text-shadow:0 0 3px rgba(20,16,38,.9),0 0 24px rgba(226,155,124,.3)}
.handle{margin:0;font-family:var(--pix);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);background:var(--glass);padding:5px 8px 4px calc(8px + .28em)}

nav{width:100%;display:flex;flex-direction:column;gap:14px;margin-top:14px;padding:0 2px}
nav:empty{display:none}
.btn{
  display:grid;grid-template-columns:22px 1fr 22px;align-items:center;gap:10px;
  min-height:54px;padding:0 18px;text-decoration:none;color:var(--ink);background:var(--glass);
  font-family:var(--pix);font-size:13px;letter-spacing:.22em;text-transform:uppercase;line-height:1;
  transition:background .15s ease;
}
.btn svg{justify-self:center}
.btn .label{display:flex;align-items:center;justify-content:center;gap:10px;padding-left:.22em}
.btn .chev{opacity:.55}
.btn:active{transform:translateY(1px)}
@media (hover:hover){.btn:hover{background:var(--glass-hi)}}
.btn.primary{background:var(--rose);box-shadow:0 -2px 0 0 var(--rose-line),0 2px 0 0 var(--rose-line),-2px 0 0 0 var(--rose-line),2px 0 0 0 var(--rose-line)}
@media (hover:hover){.btn.primary:hover{background:var(--rose-hi)}}
.btn.primary .chev{opacity:.85}
.pill{font-family:var(--pix);font-size:9px;letter-spacing:.12em;padding:3px 4px 2px 5px;color:var(--ink);
  box-shadow:0 -1px 0 0 rgba(244,232,218,.65),0 1px 0 0 rgba(244,232,218,.65),-1px 0 0 0 rgba(244,232,218,.65),1px 0 0 0 rgba(244,232,218,.65)}
footer{margin-top:6px;font-family:var(--pix);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);text-align:center;background:var(--glass);padding:5px 8px 4px calc(8px + .28em)}
.btn:focus-visible,.gate button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* 18+ gate (vip page): identical for every visitor */
.gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:20px;background:rgba(12,10,24,.5)}
.gate[hidden]{display:none}
.gate .box{width:100%;max-width:320px;padding:26px 20px 20px;background:rgba(20,17,37,.94);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.gate .lock{color:var(--rose-line)}
.gate h2{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:42px;line-height:1;color:var(--ink)}
.gate p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.gate .row{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:8px;padding:0 2px}
.gate button{font-family:var(--pix);font-size:12px;letter-spacing:.22em;text-transform:uppercase;min-height:50px;border:0;border-radius:0;cursor:pointer;color:var(--ink);background:transparent;padding-left:.22em}
.gate button.yes{background:var(--rose);box-shadow:0 -2px 0 0 var(--rose-line),0 2px 0 0 var(--rose-line),-2px 0 0 0 var(--rose-line),2px 0 0 0 var(--rose-line)}
.gate button:active{transform:translateY(1px)}