/* ================================================================
   📡 LEVINET DESIGN SYSTEM — v92
   💎 gem: this design system is Levi Studios', made from scratch.
   No borrowed themes, no borrowed assets, no borrowed anything.
   Made by Levi Studios, 2026.
   ================================================================
   RULES:
     - Monospace everywhere ("Courier New"). Uppercase nav.
     - Square edges. Hard 4px shadows. Chunky beveled buttons.
     - No gradients, no blur, no rounded corners on chrome.
     - CRT scanline texture ONLY on terminal/connect moments —
       NEVER on game canvases (canvas, #game, .game-canvas exempt).
     - Phone-first, wide layouts, edge to edge. Min 48px tap targets.
     - Branding: "LeviNet", "Connected at 56K". Never AOL, never
       "America Online", never "You've Got Mail" — anywhere, ever.
   ================================================================ */

/* ---------------- DESIGN TOKENS ---------------- */
:root{
  --bg:#0a0a0e;        /* page background */
  --panel:#121218;     /* card / panel surface */
  --panel2:#0e0e13;    /* darker panel */
  --line:#2c2c38;      /* borders */
  --ink:#f0eee2;       /* body text */
  --dim:#9a97a8;       /* secondary text */
  --gold:#ffd23f;      /* primary — buttons, active nav, brand */
  --phosphor:#3dff73;  /* terminal text, "connected" states */
  --green:#3dff73;
  --red:#ff5252;
  --blue:#57a8ff;
  --shadow:#8a6d00;    /* hard shadow under chunky buttons */
  --tap:48px;          /* minimum tap target */
}

/* ---------------- BASE ---------------- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-padding-top:104px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Courier New",Courier,monospace;
  font-size:16px;line-height:1.6;overflow-x:hidden;
}
img,video,canvas{max-width:100%;display:block}
a{color:var(--gold)}
::selection{background:var(--gold);color:#000}
h1,h2,h3{letter-spacing:.06em;text-transform:uppercase}
button{font-family:inherit}

/* Wide, phone-filling content lane — full bleed on phones */
.ln-wrap{width:100%;max-width:100%;padding:0 16px}
@media(min-width:720px){.ln-wrap{max-width:1100px;margin:0 auto;padding:0 24px}}

/* ---------------- CRT OVERLAY (terminal moments only) ----------------
   Never applied to game canvases. Pure CSS, zero assets. */
.ln-crt{position:relative;overflow:hidden}
.ln-crt::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
}
.ln-crt::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.35) 100%);
}

/* ---------------- CHANNEL NAV (the "channel guide") ---------------- */
.ln-nav{
  position:sticky;top:0;z-index:50;
  display:flex;gap:4px;overflow-x:auto;white-space:nowrap;
  background:#000;border-bottom:3px solid var(--gold);
  padding:8px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ln-nav::-webkit-scrollbar{display:none}
.ln-nav a{
  color:var(--dim);text-decoration:none;font-weight:700;font-size:.78rem;
  padding:12px 14px;min-height:var(--tap);
  display:inline-flex;align-items:center;gap:6px;
  text-transform:uppercase;letter-spacing:.06em;
  border:2px solid transparent;
}
.ln-nav a .chan{color:var(--blue);font-size:.7rem}
.ln-nav a.on{background:var(--gold);color:#000}
.ln-nav a.on .chan{color:#000}
.ln-nav a:focus-visible{outline:3px solid var(--phosphor);outline-offset:-3px}

/* ---------------- CHUNKY BEVELED BUTTONS ---------------- */
.ln-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gold);color:#000;font-weight:800;
  padding:14px 28px;min-height:var(--tap);min-width:var(--tap);
  border:0;border-radius:0;box-shadow:4px 4px 0 var(--shadow);
  font-size:1.05rem;cursor:pointer;text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;text-align:center;
}
.ln-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow)}
.ln-btn:focus-visible{outline:3px solid var(--phosphor);outline-offset:2px}
.ln-btn.ghost{background:var(--panel);color:var(--ink);box-shadow:4px 4px 0 #000;border:2px solid var(--line)}
.ln-btn.green{background:var(--green);box-shadow:4px 4px 0 #1a7a3a}
.ln-btn.red{background:var(--red);color:#fff;box-shadow:4px 4px 0 #7a1a1a}
/* THE CONNECT BUTTON — big, chunky, unmissable */
.ln-btn.connect{
  font-size:1.5rem;padding:22px 48px;min-height:76px;
  box-shadow:6px 6px 0 var(--shadow);
}
.ln-btn.connect:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--shadow)}

/* ---------------- CARDS & PANELS ---------------- */
.ln-card{
  background:var(--panel);border:2px solid var(--line);
  padding:16px;margin:14px 0;
}
.ln-card h2,.ln-card h3{color:var(--gold);margin:0 0 8px}
.ln-panelbar{
  background:var(--gold);color:#000;font-weight:800;
  padding:8px 12px;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  margin:-16px -16px 14px;
}

/* ---------------- TAGS ---------------- */
.ln-tag{
  display:inline-block;background:var(--gold);color:#000;font-weight:700;
  padding:3px 10px;margin:2px;font-size:.78rem;text-transform:uppercase;
}
.ln-tag.green{background:var(--green)}
.ln-tag.red{background:var(--red);color:#fff}
.ln-tag.blue{background:var(--blue);color:#000}
.ln-tag.ghost{background:transparent;color:var(--dim);border:1px solid var(--line)}

/* ---------------- TERMINAL TEXT ---------------- */
.ln-terminal{
  color:var(--phosphor);white-space:pre-wrap;
  font-size:.95rem;line-height:1.7;
}
.ln-terminal .dim,.ln-dim{color:var(--dim)}
.ln-gold{color:var(--gold)}
.ln-green{color:var(--phosphor)}
.ln-red{color:var(--red)}
.ln-blue{color:var(--blue)}

/* Typewriter caret for printing status lines */
.ln-caret::after{content:"▌";color:var(--phosphor);animation:ln-blink 1s steps(1) infinite}
@keyframes ln-blink{50%{opacity:0}}

/* ---------------- CONNECT OVERLAY ---------------- */
.ln-overlay{
  position:fixed;inset:0;z-index:9999;background:#000;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.ln-overlay[hidden]{display:none}
.ln-overlay .ln-box{
  width:100%;max-width:560px;background:var(--panel2);
  border:3px solid var(--gold);
}
.ln-overlay .ln-boxhead{
  background:var(--gold);color:#000;font-weight:800;
  padding:10px 14px;letter-spacing:.08em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.ln-overlay .ln-boxbody{padding:20px 16px}
.ln-overlay .ln-status{min-height:190px;margin-bottom:18px}
.ln-skip{
  background:transparent;border:0;color:var(--dim);font-size:.85rem;
  text-decoration:underline;cursor:pointer;padding:12px;min-height:var(--tap);
  text-transform:uppercase;letter-spacing:.06em;
}
.ln-ascii{color:var(--gold);font-weight:700;white-space:pre;line-height:1.2;font-size:.8rem}

/* ---------------- RETRO LOADING SCREEN (game pages) ---------------- */
.ln-loading{
  background:#000;border:3px solid var(--gold);
  padding:28px 20px;text-align:center;margin:14px 0;
}
.ln-loading .ln-bar{
  height:18px;border:2px solid var(--gold);margin:16px 0;position:relative;
}
.ln-loading .ln-bar>i{
  display:block;height:100%;width:0;background:var(--phosphor);
  transition:width .25s linear;
}

/* ---------------- FOOTER ---------------- */
.ln-footer{
  border-top:3px solid var(--gold);margin-top:32px;padding:24px 16px;
  text-align:center;color:var(--dim);font-size:.85rem;
}
.ln-footer .ln-reconnect{
  background:transparent;border:0;color:var(--gold);cursor:pointer;
  text-decoration:underline;font-size:.85rem;padding:12px;min-height:var(--tap);
  text-transform:uppercase;letter-spacing:.06em;
}
.ln-footer .ln-ver{color:#666}

/* ---------------- FORMS (reskin hooks — logic stays frozen) ---------------- */
form.ln-form .ln-field{margin-bottom:14px}
form.ln-form label{display:block;color:var(--gold);font-weight:700;margin-bottom:6px;text-transform:uppercase;font-size:.85rem;letter-spacing:.06em}
form.ln-form input,form.ln-form textarea{
  width:100%;background:#000;color:var(--ink);
  border:2px solid var(--line);border-radius:0;
  font-family:inherit;font-size:16px;padding:14px;min-height:var(--tap);
}
form.ln-form input:focus,form.ln-form textarea:focus{
  outline:none;border-color:var(--gold);
}

/* ---------------- UTILITIES ---------------- */
.ln-center{text-align:center}

/* ---------------- UTILITY STRIP (music / install / QR / mute) ----------------
   Sits under the channel nav. Phase 3: carries the header utility
   buttons forward from the old topbar. */
.ln-util{
  display:flex;align-items:center;gap:8px;
  background:#000;border-bottom:2px solid var(--line);
  padding:6px 8px;overflow-x:auto;white-space:nowrap;
  scrollbar-width:none;
}
.ln-util::-webkit-scrollbar{display:none}
.ln-util .musicbtn,.ln-util .installbtn{flex:0 0 auto}
.ln-util .qr-donate{margin-left:auto;flex:0 0 auto}
.ln-util .qr-donate img{width:40px;height:40px}
.ln-util .sfxbtn{flex:0 0 auto}
.ln-mt{margin-top:16px}.ln-mb{margin-bottom:16px}
.ln-hidden{display:none!important}
.ln-grid{display:grid;gap:14px}
@media(min-width:720px){.ln-grid.cols2{grid-template-columns:1fr 1fr}.ln-grid.cols3{grid-template-columns:1fr 1fr 1fr}}

/* ---------------- REDUCED MOTION ---------------- */
@media(prefers-reduced-motion:reduce){
  .ln-caret::after{animation:none}
  .ln-loading .ln-bar>i{transition:none}
  .ln-btn{transition:none}
}