:root{
      --bg:#0b0f14;
      --panel:#0f1620;
      --panel2:#0c131b;
      --text:#e8eef6;
      --muted:#9fb1c5;
      --line:#1b2a3b;
      --accent:#52ffd6;
      --accent2:#7aa6ff;
      --warn:#ffcc66;
      --danger:#ff6b6b;
      --ok:#78ff7a;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 16px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background: radial-gradient(900px 500px at 20% 0%, rgba(82,255,214,.09), transparent 65%),
                  radial-gradient(900px 500px at 80% 0%, rgba(122,166,255,.10), transparent 60%),
                  var(--bg);
      color:var(--text);
      font-family:var(--sans);
      line-height:1.45;
    }

    a{color:inherit; text-decoration:none}

    /* Mobile overflow guards (prevents sideways page drift + ad overlay) */
    html, body{max-width:100%; overflow-x:hidden;}
    .shell > *{min-width:0;}
    img, svg, video, canvas{max-width:100%; height:auto;}

    /* Extra touch-device guards: prevent sideways swipe + disable sticky rails */
    html, body{overscroll-behavior-x:none;}
    body{touch-action: pan-y;}
    .doc{touch-action: pan-y;}

    /* If the browser is in "desktop site" mode on a phone/tablet, still hide side rails */
    @media (hover: none) and (pointer: coarse){
      .shell{grid-template-columns: 1fr;}
      .rail{display:none !important;}
    }

    /* Header flex children must be allowed to shrink (prevents title clipping) */
    .topbar > *{min-width:0;}
    .brand h1{max-width:100%; white-space:nowrap; overflow-wrap:normal; word-break:normal;}

    /* Doc behavior: prevent sideways slide in wrap mode (still allow horizontal scroll in nowrap) */
    .doc{overscroll-behavior: contain;}
    .doc.doc-wrap{overflow-x:hidden; touch-action: pan-y;}
    .doc.doc-nowrap{overflow-x:auto; touch-action: pan-x pan-y;}
    .line .txt{flex: 1 1 auto; min-width:0; overflow-wrap:anywhere; word-break: break-word;}
    .line .copy-mini{min-width:64px; text-align:center;}


    @media (max-width: 700px){
      /* Stack header on small screens */
      .topbar{flex-direction:column; align-items:flex-start;}
      nav{width:100%;}
      .brand{width:100%; max-width:100%; min-width:0;}
      .brand h1{font-size: clamp(22px, 6.2vw, 30px); letter-spacing:.25px; max-width:100%; white-space:nowrap; overflow-wrap:normal; word-break:normal; line-height:1.05;}

      /* Tighten padding slightly */
      .shell{padding:14px;}
      header{padding:14px 14px 0; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right));}
      .hero{padding:0 14px;}
      footer{padding:14px;}

    }

    /* Layout */
    .shell{
      display:grid;
      grid-template-columns: 280px minmax(0, 1fr) 280px;
      gap:18px;
      max-width: 1400px;
      margin: 0 auto;
      padding: 18px;
    }
    @media (max-width: 1100px){
      .shell{grid-template-columns: 1fr;}
      .rail{display:none;}
    }

    header{
      max-width:1400px;
      margin:0 auto;
      padding: 18px 18px 0;
    }

    .topbar{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .brand{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:2px;
      flex-wrap:wrap;
    }
    .brand h1{
      margin:0;
      white-space: nowrap;
      overflow-wrap: normal;
      word-break: normal;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-weight: 900;
      letter-spacing: .6px;

      font-size: 40px;
      line-height: 1.02;

      background: linear-gradient(
        90deg,
        #5db0f4 0%,
        #76b8ff 37%,
        #b9c3d6 80%,
        #e8eefc 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;

      text-shadow: 0 1px 0 rgba(0,0,0,.45);
    }
    .brand .tag{
      font-size: 12px;
      color: var(--muted);
    }

    .brand .tag2{
      font-size: 12px;
      color: var(--muted);
      opacity: .9;
    }

    nav{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    nav a{
      font-size: 13px;
      padding: 8px 10px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    nav a:hover{border-color: rgba(82,255,214,.45)}

    .hero{
      max-width:1400px;
      margin: 14px auto 0;
      padding: 0 18px;
    }
    .hero-card{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
      padding: 18px;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:18px;
      align-items:start;
    }
    @media (max-width: 900px){
      .hero-card{grid-template-columns:1fr}
    }

    .hero h2{margin:0 0 8px; font-size: 20px}
    .hero p{margin:0 0 10px; color:var(--muted)}

    .quick-search{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }
    .quick-search input{
      width:min(520px, 100%);
      padding: 12px 12px;
      border-radius: 12px;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--text);
      outline:none;
    }
    .quick-search input:focus{border-color: rgba(82,255,214,.55); box-shadow: 0 0 0 4px rgba(82,255,214,.10)}

    .hero-right{
      border:1px dashed rgba(255,255,255,.18);
      border-radius: var(--radius);
      padding: 12px;
      background: rgba(0,0,0,.20);
    }

    .pillrow{display:flex; gap:8px; flex-wrap:wrap}
    .pill{
      font-size:12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      color: var(--muted);
      background: rgba(255,255,255,.03);
    }

    /* Rails / ads */
    .rail{
      position: sticky;
      top: 18px;
      height: calc(100vh - 36px);
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .ad-slot{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      min-height: 250px;
      overflow: hidden;
    }
    .ad-slot:empty{display:none;}
.ad-slot:empty::before{content:"";}
    .ad-slot.ad-top{min-height: 90px;}
    .ad-slot.ad-incontent{min-height: 160px; margin: 14px 0;}


    /* Directory */
    .panel{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
      padding: 16px;
    }

    .panel h3{margin: 0 0 10px; font-size: 14px; color: var(--muted); letter-spacing:.08em; text-transform:uppercase}

    .game-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    @media (max-width: 900px){
      .game-grid{grid-template-columns: 1fr}
    }

    .game-card{
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.25);
      padding: 12px;
      transition: transform .12s ease, border-color .12s ease;
    }
    .game-card:hover{transform: translateY(-1px); border-color: rgba(82,255,214,.40)}
    .game-card-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
    .game-title{font-weight: 700; font-size: 14px}
    .game-desc{color: var(--muted); font-size: 12px; margin-top: 8px}

    .badge{
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      color: var(--muted);
      white-space:nowrap;
    }
    .badge-local{border-color: rgba(82,255,214,.45); color: var(--accent)}
    .badge-sp{border-color: rgba(122,166,255,.45); color: var(--accent2)}
    .badge-admin{border-color: rgba(255,204,102,.55); color: var(--warn)}
    .badge-sub{opacity:.9}

    /* Game sections */
    .game-section{margin-top: 14px}
    .section-head{
      display:flex;
      gap:12px;
      justify-content:space-between;
      align-items:flex-start;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .section-head h2{margin:0; font-size: 18px}
    .muted{color: var(--muted); font-weight: 500}
    .mini-note{color: var(--muted); font-size: 12px; margin-top: 4px}

    .section-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
    .btn{
      cursor:pointer;
      font-size: 12px;
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--text);
    }
    .btn:hover{border-color: rgba(82,255,214,.50)}
    .btn.copied{border-color: rgba(120,255,122,.55); color: var(--ok)}

    .tool-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      margin-top: 12px;
    }
    .search{
      flex: 1 1 320px;
      min-width: 220px;
      padding: 10px 10px;
      border-radius: 12px;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--text);
      outline:none;
      font-family: var(--sans);
    }
    .toggle{font-size: 12px; color: var(--muted); display:flex; align-items:center; gap:6px; user-select:none}
    .toggle input{accent-color: var(--accent)}

    .doc{
      margin-top: 10px;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.25);
      padding: 12px;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      max-height: 70vh;
    }

    /* Ensure nowrap mode can scroll horizontally (without page drift) */
    .doc.doc-nowrap{overflow-x:auto;}
    .doc.doc-wrap{overflow-x:hidden;}

    .doc-wrap{white-space: pre-wrap;}
    .doc-nowrap{white-space: pre;}

    .line{
      font-family: var(--mono);
      font-size: 12px;
      padding: 5px 8px;
      border-radius: 10px;
      margin: 3px 0;
      border: 1px solid transparent;
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .line:hover{background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08)}

    .line .copy-mini{
      flex: 0 0 auto;
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.02);
      color: var(--muted);
      cursor:pointer;
    }
    .line .copy-mini:hover{border-color: rgba(82,255,214,.50); color: var(--accent)}
    .line .copy-mini.copied{border-color: rgba(120,255,122,.55); color: var(--ok)}

    .line .txt{white-space: inherit;}
    .line.head{font-family: var(--sans); font-weight: 800; font-size: 13px; color: var(--accent2)}
    .line.sep{opacity:.6}
    .line.cmd{border-left: 2px solid rgba(82,255,214,.45);}

    .empty{
      color: var(--muted);
      font-size: 12px;
      padding: 10px;
    }

    .noscript-pre{
      white-space: pre-wrap;
      font-family: var(--mono);
      font-size: 12px;
      color: var(--muted);
    }

    /* Footer */
    footer{
      max-width:1400px;
      margin: 0 auto;
      padding: 18px;
      color: var(--muted);
    }
    footer .footer-card{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      padding: 16px;
    }
    footer a{color: var(--accent)}

    /* Small toast (non-blocking) */
    .toast{
      position: fixed;
      right: 14px;
      bottom: 14px;
      max-width: 360px;
      z-index: 9999;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(15,22,32,.92);
      box-shadow: var(--shadow);
      padding: 12px;
      display:none;
    }
    .toast p{margin:0 0 10px; font-size: 12px; color: var(--muted)}
    .toast .row{display:flex; gap:8px; justify-content:flex-end}

    /* “Skip” link for accessibility */
    .skip{
      position:absolute;
      left:-999px;
      top:auto;
      width:1px;
      height:1px;
      overflow:hidden;
    }
    .skip:focus{
      left: 18px;
      top: 18px;
      width:auto;
      height:auto;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(0,0,0,.80);
      border:1px solid rgba(82,255,214,.55);
      z-index: 10000;
    }
  

    /* === Quick Jump pills === */
    .quick-jump{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      margin: 10px 0 6px;
    }
    .qj-label{color: var(--muted); font-size: 12px; margin-right: 2px}
    .pill{
      appearance:none;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: var(--text);
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      cursor:pointer;
      transition: transform .08s ease, border-color .12s ease, background .12s ease;
    }
    .pill:hover{transform: translateY(-1px); border-color: rgba(82,255,214,.40); background: rgba(255,255,255,.10)}
    .pill:active{transform: translateY(0px)}
    .line.flash{outline: 2px solid rgba(82,255,214,.55); outline-offset: 2px; border-radius: 10px}


    /* === Mobile header sizing override (must come LAST) === */
    @media (max-width: 700px){
      .brand h1{
        font-size: clamp(24px, 8.0vw, 32px) !important;
        letter-spacing: .32px !important;
        line-height: 1.02 !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
      }
      .topbar{padding: 12px 14px !important;}
    }

/* =============================== */
/*   Side cards + guide elements   */
/* =============================== */

.side-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding: 14px;
}
.side-card h3{
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
  letter-spacing:.08em;
  text-transform: uppercase;
}
.side-list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.side-list li{margin: 6px 0;}

.mono{font-family: var(--mono);}

.howto-list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.howto-list li{margin: 8px 0;}

.subhead{
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.code-sample{
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  overflow-x: auto;
}
.code-sample code{
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
}