:root{
  --deep:#22303f; --ocean:#2c3e50; --teal:#8ce3f5; --teal2:#d4f4fb; --pink:#ff5f6d; --orange:#ff8a3d;
  --yellow:#ffd23f; --brown:#c9955a; --ink:#1d1d26; --white:#fffaf0; --line:4px;
  --shadow:6px 6px 0 var(--ink);
  --display:"Lilita One","Arial Black",Impact,system-ui,sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--white); font-family:var(--body); font-weight:600; line-height:1.5;
  background:radial-gradient(circle at 50% 0%,#fff6d6 0%,#ffd9a0 45%,#ff9f7a 100%) fixed;
  min-height:100vh; overflow-x:hidden;
}
a{color:var(--yellow)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
h1,h2,h3{font-family:var(--display); font-weight:400; letter-spacing:.5px; margin:0 0 .4em}
h2{font-size:clamp(1.7rem,4vw,2.4rem); color:var(--yellow); -webkit-text-stroke:1.5px var(--ink); text-shadow:3px 3px 0 var(--ink)}
h2 small{font-family:var(--body); font-size:.9rem; color:var(--teal2); -webkit-text-stroke:0; text-shadow:none; font-weight:800}

/* photons */
.photons{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.photon{position:absolute; top:-40px; line-height:1; animation:fall linear forwards; opacity:.9}
@keyframes fall{to{transform:translate(var(--drift,0),115vh) rotate(var(--spin,360deg))}}
@media (prefers-reduced-motion:reduce){.photon{display:none}}

/* top bar */
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px clamp(12px,3vw,32px); background:rgba(34,48,63,.95); backdrop-filter:blur(6px); border-bottom:var(--line) solid var(--ink)}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--white); font-family:var(--display); font-size:1.3rem}
.brand img{border-radius:50%; border:3px solid var(--ink); background:var(--yellow)}
.topbar nav{display:flex; gap:clamp(8px,2vw,22px); flex-wrap:wrap}
.topbar nav a{color:var(--white); text-decoration:none; font-weight:900}
.topbar nav a:hover{color:var(--yellow)}

section{scroll-margin-top:84px}
main{position:relative; z-index:1; max-width:1150px; margin:0 auto; padding:clamp(14px,3vw,32px)}

/* hero */
.hero{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(18px,3vw,40px); align-items:center; padding:18px 0 30px}
.whatis{display:inline-block; background:var(--white); color:var(--ink); border:3px solid var(--ink); border-radius:14px; padding:8px 12px;
  box-shadow:4px 4px 0 var(--ink); font-size:.95rem; margin:0 0 12px; transform:rotate(-1deg)}
.title{font-size:clamp(2.9rem,8.4vw,5.6rem); line-height:.9; margin:6px 0 10px}
.title span{-webkit-text-stroke:3px var(--ink); text-shadow:6px 6px 0 var(--ink); display:inline-block}
.t1{color:var(--yellow); transform:rotate(-3deg)} .t2{color:var(--white); font-size:.6em; transform:rotate(3deg)} .t3{color:var(--orange); transform:rotate(-1deg)}
.inspired{font-size:.9rem; font-style:italic; opacity:.9; margin:-6px 0 14px}
.ticker{margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.pill{font-family:var(--display); font-size:1.5rem; background:var(--yellow); color:var(--ink); border:var(--line) solid var(--ink); border-radius:999px; padding:2px 14px; box-shadow:4px 4px 0 var(--ink)}
.chain{color:var(--white); font-weight:900; text-shadow:2px 2px 0 var(--ink)}
.lore{font-size:1.1rem; margin:8px 0 16px; text-shadow:2px 2px 0 rgba(18,5,43,.7)}
.lore b{color:var(--yellow)}
.ca{display:flex; align-items:center; gap:8px; background:var(--deep); border:var(--line) solid var(--ink); border-radius:14px; padding:8px 8px 8px 12px; box-shadow:var(--shadow); max-width:100%}
.ca-label{font-family:var(--display); color:var(--pink)}
.ca code{flex:1; min-width:0; overflow-wrap:anywhere; font-size:.85rem; color:var(--teal2)}
.ca-note{font-size:.85rem; opacity:.85; margin:8px 0 14px}
.cta{display:flex; flex-wrap:wrap; gap:12px}
.hero-art img{width:100%; height:auto; display:block; border:6px solid var(--ink); border-radius:26px; box-shadow:10px 10px 0 var(--ink); transform:rotate(1.5deg); background:#fff}
.hero-art{animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.hero-art{animation:none}}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:var(--display); font-size:1.15rem; letter-spacing:.4px;
  color:var(--ink); background:var(--white); border:var(--line) solid var(--ink); border-radius:14px; padding:10px 18px; text-decoration:none;
  box-shadow:4px 4px 0 var(--ink); cursor:pointer; transition:transform .08s, box-shadow .08s; user-select:none; -webkit-tap-highlight-color:transparent}
.btn:hover{transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--yellow); outline-offset:2px}
.btn-small{font-size:.95rem; padding:6px 12px; border-width:3px; box-shadow:3px 3px 0 var(--ink)}
.btn-orange{background:var(--orange)} .btn-green{background:var(--teal)} .btn-yellow{background:var(--yellow)}

/* cards */
.card{position:relative; background:rgba(34,48,63,.95); border:var(--line) solid var(--ink); border-radius:24px; box-shadow:8px 8px 0 var(--ink);
  padding:clamp(16px,3vw,28px); margin:0 0 32px}
.fine{font-size:.8rem; opacity:.8; margin:10px 0 0}
.fine-top{font-size:.9rem; opacity:.85; margin:-6px 0 12px}

/* stats */
.stat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.stat{background:var(--white); color:var(--ink); border:3px solid var(--ink); border-radius:16px; padding:10px 12px; box-shadow:4px 4px 0 var(--ink); display:flex; flex-direction:column}
.stat .k{font-size:.8rem; font-weight:900; text-transform:uppercase; opacity:.7}
.stat .v{font-family:var(--display); font-size:clamp(1.2rem,2.6vw,1.7rem); overflow-wrap:anywhere}
.stat .buys{color:#2e7d32} .stat .sells{color:#c0392b}
.stat-foot{margin:12px 0 0; font-weight:800; color:var(--teal2)}

/* game */
.game-help{margin:0 0 12px}
.game-wrap{position:relative; width:100%; border:var(--line) solid var(--ink); border-radius:20px; overflow:hidden; box-shadow:6px 6px 0 var(--ink); background:#fbe3c0}
#gameCanvas{display:block; width:100%; height:auto; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; outline:none}
.game-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.game-bar .hi{font-family:var(--display); font-size:1.2rem; margin-left:auto}
.skin-toggle{font-weight:900; display:flex; align-items:center; gap:6px; color:var(--yellow)}
.skin-toggle input{width:20px; height:20px; accent-color:var(--yellow)}
.badge-line{margin:10px 0 0; color:var(--yellow); font-weight:900}

/* holder */
.holder-form{display:flex; gap:10px; flex-wrap:wrap}
.holder-form input{flex:1; min-width:0; font:inherit; font-weight:800; font-size:1rem; padding:12px 14px; border:var(--line) solid var(--ink); border-radius:14px; box-shadow:inset 3px 3px 0 rgba(0,0,0,.15); color:var(--ink); background:var(--white)}
.holder-form input:focus{outline:3px solid var(--yellow)}
.holder-result{min-height:1.5em; font-weight:900; margin:12px 0 4px}
.holder-result.ok{color:var(--yellow)} .holder-result.no{color:var(--teal2)} .holder-result.err{color:var(--orange)}
.warn{font-size:.9rem; background:rgba(255,210,63,.12); border:3px dashed var(--yellow); border-radius:12px; padding:8px 12px; margin:10px 0 0}

/* issues */
.excuse{text-align:center}
.excuse-btn{background:var(--yellow); border:var(--line) solid var(--ink); border-radius:50%; padding:6px; box-shadow:5px 5px 0 var(--ink); cursor:pointer; transition:transform .15s}
.excuse-btn img{display:block; border-radius:50%}
.excuse-btn:hover{transform:rotate(-8deg) scale(1.05)}
.excuse-btn.wiggle{animation:wiggle .4s}
@keyframes wiggle{25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}}
.excuse-out{font-family:var(--display); font-size:clamp(1.5rem,4.5vw,2.4rem); margin:16px auto; max-width:760px; min-height:2.4em}
.excuse-out b{color:var(--yellow); -webkit-text-stroke:1px var(--ink); text-shadow:3px 3px 0 var(--ink); font-weight:400}
.excuse-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* how */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.steps li{display:flex; gap:10px; align-items:flex-start; background:var(--white); color:var(--ink); border:3px solid var(--ink); border-radius:16px; padding:12px; box-shadow:4px 4px 0 var(--ink)}
.steps .n{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--yellow); border:3px solid var(--ink); font-family:var(--display)}
.small-ca{font-size:.7rem; overflow-wrap:anywhere; background:#fff3c4; padding:2px 4px; border-radius:6px; display:inline-block; margin-top:4px}

/* footer */
.footer{position:relative; z-index:1; background:#1b2633; border-top:var(--line) solid var(--ink); padding:28px clamp(16px,4vw,48px) 90px}
.footer h3{color:var(--pink); font-size:1.4rem}
.footer p{max-width:1000px; font-size:.95rem; margin:0 0 10px; color:#e6f3f8}
.foot-small{font-size:.8rem!important; opacity:.75}

/* ack banner */
.ack{position:fixed; left:12px; right:12px; bottom:12px; z-index:50; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  max-width:820px; margin:0 auto; background:var(--white); color:var(--ink); border:var(--line) solid var(--ink); border-radius:18px; padding:12px 16px; box-shadow:var(--shadow)}
.ack p{margin:0; flex:1; min-width:220px; font-size:.95rem}

/* toast */
.toast{position:fixed; left:50%; top:76px; transform:translate(-50%,-20px); opacity:0; z-index:60; pointer-events:none;
  background:var(--yellow); color:var(--ink); border:3px solid var(--ink); border-radius:12px; padding:8px 14px; font-weight:900; box-shadow:4px 4px 0 var(--ink); transition:.2s}
.toast.show{opacity:1; transform:translate(-50%,0)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-art{order:-1}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid .stat:last-child{grid-column:span 2}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .topbar nav a:nth-child(n+3){display:none}
  .steps{grid-template-columns:1fr}
  .btn{font-size:1.05rem; padding:9px 14px}
  .cta .btn{flex:1 1 100%}
  .game-bar .hi{margin-left:0}
  .ca code{font-size:.72rem}
}

/* physics */
.rules{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.rules li{display:flex; gap:10px; align-items:flex-start; background:var(--white); color:var(--ink); border:3px solid var(--ink); border-radius:16px; padding:12px; box-shadow:4px 4px 0 var(--ink)}
.rules .ico{flex:none; font-size:1.6rem; line-height:1}
.ca-note.live{color:var(--yellow); font-weight:900}
@media (max-width:900px){.rules{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rules{grid-template-columns:1fr}}
.btn.disabled{opacity:.55; cursor:not-allowed; filter:grayscale(.4)}
.launch-note{font-size:.88rem; font-weight:800; background:rgba(255,210,63,.18); border:3px dashed var(--yellow); border-radius:12px; padding:8px 12px; margin:14px 0 0; max-width:560px}

.photon{width:auto; height:auto; font-family:var(--display); color:var(--orange); opacity:.45; text-shadow:2px 2px 0 rgba(29,29,38,.25); animation-name:rise}
@keyframes rise{from{transform:translate(0,0) rotate(0)} to{transform:translate(var(--drift,0),-115vh) rotate(var(--spin,30deg))}}
.photons .photon{top:auto; bottom:-40px}
.soon-pill{font-family:var(--display); font-size:1rem; background:var(--teal); color:var(--ink); border:3px solid var(--ink); border-radius:999px; padding:2px 12px; box-shadow:3px 3px 0 var(--ink); animation:blink 1.6s ease-in-out infinite}
.soon-pill.live{background:#7dff9b; animation:none}
@keyframes blink{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.soon-pill{animation:none}}
.hero-art img{background:#ffd9a0}
.title .t1{color:var(--white)} .title .t3{color:var(--orange); font-family:"Permanent Marker",var(--display); font-size:1.05em}
.brand img{background:#ffd9a0}
.excuse-btn{background:var(--teal)}
.ca code{color:var(--teal)}
.btn-move{min-width:58px}
.small-ca{background:#fff3c4}

/* Not AI tweaks: dark text on the light page background */
.lore,.inspired,.ca-note,.launch-note{color:var(--ink); text-shadow:none}
.lore b{color:var(--orange); -webkit-text-stroke:0}
.chain{color:var(--ink); text-shadow:none}
.launch-note{background:rgba(255,255,255,.55); border-color:var(--orange)}
.ca code{color:var(--teal)}
.title span{-webkit-text-stroke:3px var(--ink)}
.title .t3{transform:rotate(-4deg)}