/* ============================================================================
   Lemon Clix — app shell
   Layout ported 1:1 from the reference (rail + hole + drawers + paged content),
   re-skinned to lemon: charcoal-green surfaces, one saturated lemon accent.
   ============================================================================ */

:root{
  --frame:#101208; --hole:#0a0b07; --row:#191c10; --row-hi:#242913;
  --on:#f3f7e4; --on-var:#bcc6a4; --outline:#9aa87c; --outline-var:#414a31;
  --tone:#e8ff54; --on-tone:#1b1f0a; --tone-box:#2b330c; --on-tone-box:#eeffb0;
  --r:28px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--frame);color:var(--on);
  font-family:"Outfit",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--tone-box);color:var(--on-tone-box)}
:focus-visible{outline:2px solid var(--tone);outline-offset:2px}
html.signed-in .if-out,html:not(.signed-in) .if-in{display:none!important}
svg.lucide{width:19px;height:19px;stroke-width:1.9}

/* ── shell: frame, hole, drawers with concave fillets ─────────────────────── */
.desk{display:grid;grid-template-columns:68px minmax(0,1fr);height:100dvh;padding:10px 10px 10px 0}
.bar{display:flex;flex-direction:column;align-items:center;gap:14px;padding:4px 0 6px}
.logo{display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.logo:hover{background:var(--row)}
.logo img{width:30px;height:30px;object-fit:contain}
.ws{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:999px;background:var(--row)}
.ws a,.ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--on-var);transition:background .2s,color .2s}
.ws a:hover,.ico:hover{background:var(--row-hi);color:var(--on)}
.ws a.on{background:var(--tone-box);color:var(--on-tone-box)}
.grow{flex:1}
.clock{font-size:15px;font-weight:600;line-height:1.05;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock b{display:block;color:var(--tone);font-weight:600}

.hole{position:relative;display:flex;min-height:0;background:var(--hole);border-radius:var(--r)}
.center{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;--col:min(920px,calc(100% - 2*var(--r) - 48px))}
.col{width:var(--col);margin-inline:auto}
.side{display:flex;flex-direction:column;justify-content:center}


main{min-width:0;flex:1 1 auto;overflow-y:auto;padding:12px 0 44px;scroll-behavior:smooth;scrollbar-width:none}
main::-webkit-scrollbar{display:none}

/* one page at a time */
.page:not(.on){display:none!important}
.page.in>*{animation:pg-in .46s cubic-bezier(.2,0,0,1) both;animation-delay:calc(var(--i,0) * 45ms)}
.page.in .rows>*{animation:pg-in .46s cubic-bezier(.2,0,0,1) both;animation-delay:calc(90ms + var(--j,0) * 35ms)}
#get>.get{margin-top:12px}
.page.out{animation:pg-out .16s cubic-bezier(.3,0,.8,.15) both}
@keyframes pg-in{from{opacity:0;transform:translateY(var(--dy,32px)) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes pg-out{to{opacity:0;transform:translateY(calc(var(--dy,32px) * -.6)) scale(.99)}}
@keyframes pg-fade{from{opacity:0}}@keyframes pg-fade-out{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.page.in>*,.page.in .rows>*{animation-name:pg-fade;animation-duration:.24s}.page.out{animation-name:pg-fade-out}}

.drawer{position:relative;background:var(--frame);z-index:5}
.drawer::before,.drawer::after{content:"";position:absolute;width:var(--r);height:var(--r);pointer-events:none}
.d-top{padding:12px 16px 14px 22px;border-radius:0 0 var(--r) var(--r)}
.d-top::before{top:0;right:100%;background:radial-gradient(circle at 0 100%,transparent calc(var(--r) - .5px),var(--frame) var(--r))}
.d-top::after{top:0;left:100%;background:radial-gradient(circle at 100% 100%,transparent calc(var(--r) - .5px),var(--frame) var(--r))}
.d-bot{padding:14px 18px 4px;border-radius:var(--r) var(--r) 0 0}
.d-bot::before{bottom:0;right:100%;background:radial-gradient(circle at 0 0,transparent calc(var(--r) - .5px),var(--frame) var(--r))}
.d-bot::after{bottom:0;left:100%;background:radial-gradient(circle at 100% 0,transparent calc(var(--r) - .5px),var(--frame) var(--r))}
.d-right{width:268px;padding:12px 10px 12px 12px;border-radius:var(--r) 0 0 var(--r)}
.d-right::before{right:0;bottom:100%;background:radial-gradient(circle at 0 0,transparent calc(var(--r) - .5px),var(--frame) var(--r))}
.d-right::after{right:0;top:100%;background:radial-gradient(circle at 0 100%,transparent calc(var(--r) - .5px),var(--frame) var(--r))}

/* top drawer */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.topnav{display:flex;align-items:center;gap:2px;margin-left:6px}
.topnav a{padding:8px 12px;border-radius:10px;font-size:14px;color:var(--on-var);transition:background .2s,color .2s}
.topnav a:hover{background:var(--row);color:var(--on)}
.topnav a.on{color:var(--tone)}
@media (max-width:1120px){.topnav{display:none}}
.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.brand img{width:28px;height:28px;object-fit:contain}
.top .btns{display:flex;gap:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:550;white-space:nowrap;transition:background .2s,border-radius .2s}
.btn:active{border-radius:14px}
.btn-p{background:var(--tone);color:var(--on-tone)}
.btn-p:hover{background:#f2ff8c}
.btn-t{background:var(--row);color:var(--on)}
.btn-t:hover{background:var(--row-hi)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-buy{position:relative;isolation:isolate;background:var(--tone);color:var(--on-tone)}
.btn-buy .sheen{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(to bottom,#f7ffa4,#d6f43c);box-shadow:inset 0 1px 0 0 #fbffd6;transition:background .2s}
.btn-buy:hover .sheen{background:linear-gradient(to bottom,var(--tone),#d6f43c)}

/* joined rows */
.rows{display:flex;flex-direction:column;gap:3px}
.rows>*{background:var(--frame);border-radius:6px}
.rows>:first-child{border-top-left-radius:24px;border-top-right-radius:24px}
.rows>:last-child{border-bottom-left-radius:24px;border-bottom-right-radius:24px}

/* right drawer */
.d-right.rows>.act{background:var(--row)}
.act{display:flex;align-items:center;gap:12px;padding:10px 12px;transition:background .2s}
.d-right.rows>.act:hover{background:var(--row-hi)}
.act .ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--row-hi);color:var(--on-var)}
.act b{display:block;font-size:14px;font-weight:550;line-height:1.2}
.act small{display:block;margin-top:2px;font-size:12px;color:var(--on-var)}
.d-right.rows>.act.hot{background:var(--tone-box);color:var(--on-tone-box)}
.d-right.rows>.act.hot:hover{background:#3a440f}
.act.hot .ic{background:var(--tone);color:var(--on-tone)}
.act.hot small{color:#eeffb0bf}



/* ── content ─────────────────────────────────────────────────────────────── */
section{scroll-margin-top:24px}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:24px;min-height:min(600px,calc(100dvh - 190px));padding:0 4px 24px}
.hero .pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:6px 13px 6px 10px;border-radius:999px;
  background:var(--tone-box);color:var(--on-tone-box);font-size:12px;font-weight:600;letter-spacing:.03em}
.hero .pill i{width:7px;height:7px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 4px #e8ff5422}
.hero h1{font-size:clamp(44px,5.4vw,80px);font-weight:700;line-height:.95;letter-spacing:-.035em;text-wrap:balance}
.hero .sub{max-width:44ch;margin-top:24px;font-size:18px;line-height:1.55;color:var(--on-var)}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}

/* the lemon: flat art, leaning toward the pointer */
.stage{position:relative;aspect-ratio:1;width:100%;max-width:560px;justify-self:center;display:grid;place-items:center}
.stage::before{content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(closest-side,#e8ff5426,transparent 72%);filter:blur(6px)}
.stage .fallback{position:absolute;inset:0;display:grid;place-items:center}
.stage .fallback img{width:42%}
.stage .lemon{position:relative;width:68%;transform-style:preserve-3d;will-change:transform;
  filter:drop-shadow(0 30px 90px rgba(232,255,84,.22)) drop-shadow(0 24px 40px rgba(0,0,0,.6));
  animation:lem-float 7s ease-in-out infinite}
.stage .lemon img{width:100%;display:block}
@keyframes lem-float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@media (prefers-reduced-motion:reduce){.stage .lemon{animation:none}}

.sect{margin-top:56px}
.sect>h2{margin:0 0 6px 20px;font-size:26px;font-weight:600;letter-spacing:-.02em}
.sect>p.lead{margin:0 0 18px 20px;max-width:60ch;font-size:15px;line-height:1.55;color:var(--on-var)}

/* features: little cards, icon, name, one sentence */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.feat{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:start;padding:22px 22px;background:var(--row);border-radius:24px}
.feat .ic{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--row);color:var(--tone)}
.feat h3{font-size:17px;font-weight:600;padding-top:2px}
.feat p{max-width:66ch;font-size:15px;line-height:1.55;color:var(--on-var)}

/* why: prose in two columns */
.why{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;padding:6px 20px 0}
.why h3{font-size:17px;font-weight:600}
.why p{margin-top:6px;max-width:46ch;font-size:15px;line-height:1.55;color:var(--on-var)}

/* games: name, then what its tab does */
.game{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:baseline;padding:16px 24px}
.game h3{font-size:16px;font-weight:600}
.game p{font-size:15px;line-height:1.5;color:var(--on-var)}

.get{margin-top:56px;padding:32px 30px;border-radius:28px;background:var(--tone-box);color:var(--on-tone-box)}
.get h2{font-size:30px;font-weight:700;letter-spacing:-.025em}
.get p{max-width:52ch;margin-top:10px;font-size:16px;line-height:1.55;opacity:.85}
.get .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.get .btn-t{background:#3a440f;color:var(--on-tone-box)}
.get .btn-t:hover{background:#333c0d}

footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:36px;padding:0 20px;font-size:14px;color:var(--on-var)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a:hover{color:var(--on)}

@media (prefers-reduced-motion:reduce){main{scroll-behavior:auto}}

/* ── narrow: bar on top, blocks below ────────────────────────────────────── */
@media (max-width:1023px){
  .desk{display:block;height:auto;min-height:100dvh;padding:0 8px 8px}
  .bar{flex-direction:row;gap:10px;padding:10px 4px;overflow-x:auto;scrollbar-width:none}
  .bar>*{flex-shrink:0}.ws{flex-direction:row}.grow,.clock{display:none}
  .hole{flex-direction:column;padding:12px;gap:12px}
  .center{display:contents}.col{width:100%}
  main{overflow:visible;padding:8px 0}
  .drawer{width:100%;border-radius:22px;padding:14px 16px}.drawer::before,.drawer::after{display:none}
  .hero{grid-template-columns:1fr;min-height:0}.stage{max-width:320px;order:-1}

  .side{padding:0}
}
@media (max-width:640px){
  .why{grid-template-columns:1fr}
  .game{grid-template-columns:1fr;gap:4px}
  .top .btns .hide-sm{display:none}
}

/* ── simple content pages (download / key) ───────────────────────────────── */
.pad{padding:26px 20px 10px}
.card{background:var(--row);border-radius:24px;padding:28px}
.card h1{font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.card p.lead{margin-top:14px;max-width:56ch;color:var(--on-var);font-size:16px;line-height:1.6}
.card .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;border-radius:999px;
  background:var(--tone-box);color:var(--on-tone-box);font-size:12px;font-weight:600;letter-spacing:.04em}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--tone)}
.meta{margin-top:12px;font-size:13px;color:var(--on-var)}
.note{margin-top:16px;border-radius:18px;background:var(--frame);padding:14px 16px;font-size:14px;line-height:1.6;color:var(--on-var)}
.note--bad{background:#3a1414;color:#ffc7c7}
.keybox{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--frame);border-radius:18px;padding:18px;margin-top:20px}
.key{font-family:"JetBrains Mono",monospace;font-size:1.1rem;font-weight:700;letter-spacing:.06em;word-break:break-all}
.userbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--frame);border-radius:18px;padding:12px 16px;margin-top:18px}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--row-hi)}
.discord{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;border-radius:999px;border:0;
  background:#5865F2;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}
.discord:hover{background:#4a56e6;transform:translateY(-1px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.step{background:var(--frame);border-radius:18px;padding:16px}
.step b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tone);margin-bottom:6px}
.step span{font-size:14px;color:var(--on-var)}
@media (max-width:720px){.steps{grid-template-columns:1fr}}