:root{
    --bg:#0a0612; --bg2:#120a22; --panel:#1a1030; --ink:#f3f1ff; --dim:#b9aee6;
    --magenta:#ff2e88; --cyan:#21e6ff; --lime:#c6ff3d; --gold:#ffd23f;
  }
  *{box-sizing:border-box}
  body{ margin:0; background:radial-gradient(ellipse at 50% -10%, #2a1750 0%, var(--bg) 60%) fixed, var(--bg);
    color:var(--ink); font-family:'VT323',monospace; font-size:20px; line-height:1.5 }
  h1,h2,h3,.pixel{ font-family:'Press Start 2P',monospace }
  a{ color:var(--cyan) }
  .wrap{ max-width:1000px; margin:0 auto; padding:24px }
  .topbar{ display:flex; justify-content:space-between; align-items:center;
    border-bottom:2px solid var(--magenta); padding-bottom:14px; margin-bottom:24px }
  .brand{ font-family:'Press Start 2P'; font-size:14px; color:var(--gold); text-shadow:2px 2px 0 var(--magenta) }

  /* controls */
  input,textarea,select{ width:100%; background:#0a0612; color:var(--ink); border:2px solid var(--cyan);
    font-family:'VT323',monospace; font-size:19px; padding:8px 10px }
  textarea{ resize:vertical; min-height:64px }
  input[type=range]{ padding:0; height:24px }
  label{ display:block; font-family:'Press Start 2P'; font-size:9px; color:var(--lime); margin:12px 0 6px }
  .btn{ font-family:'Press Start 2P'; font-size:10px; color:#0a0612; background:var(--gold);
    border:0; padding:10px 14px; box-shadow:3px 3px 0 var(--magenta); cursor:pointer }
  .btn:hover{ background:var(--lime) }
  .btn.cyan{ background:var(--cyan) } .btn.ghost{ background:transparent; color:var(--dim);
    box-shadow:none; border:2px solid var(--dim); font-size:9px; padding:6px 9px }
  .btn.sm{ font-size:9px; padding:6px 9px }
  .row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }

  .card{ background:linear-gradient(180deg,var(--panel),var(--bg2)); border:2px solid var(--cyan);
    padding:18px; margin-bottom:22px }
  .card > h2{ font-size:13px; color:var(--magenta); margin:0 0 16px; text-shadow:2px 2px 0 #000 }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
  @media(max-width:620px){ .grid2{ grid-template-columns:1fr } }

  /* item rows */
  .item{ display:grid; grid-template-columns:48px 70px 1fr auto; gap:12px; align-items:start;
    border:2px solid #2a1f47; padding:10px; margin-bottom:10px; background:#0d0820 }
  .item .idx{ font-family:'Press Start 2P'; font-size:12px; color:var(--gold); padding-top:8px; text-align:center }
  .item .thumb{ aspect-ratio:3/4; border:2px solid #000; background:#1a1030 center/cover no-repeat;
    display:grid; place-items:center; font-size:13px; color:var(--dim) }
  .item .fields{ display:grid; gap:6px }
  .item .ctrls{ display:flex; flex-direction:column; gap:6px }
  @media(max-width:620px){ .item{ grid-template-columns:1fr; } .item .ctrls{ flex-direction:row; flex-wrap:wrap } }

  .save-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px }
  .status{ font-size:17px; color:var(--lime) }
  .status.err{ color:var(--magenta) }

  /* login */
  .login{ max-width:380px; margin:12vh auto; text-align:center }
  .login h1{ font-size:18px; color:var(--cyan); text-shadow:3px 3px 0 var(--magenta) }

  /* modal (IGDB search) */
  .modal{ position:fixed; inset:0; background:rgba(5,2,12,.85); display:none; place-items:center; z-index:100; padding:20px }
  .modal.open{ display:grid }
  .modal .box{ background:var(--bg2); border:2px solid var(--gold); width:100%; max-width:560px;
    max-height:84vh; overflow:auto; padding:18px }
  .modal h3{ font-size:12px; color:var(--gold); margin:0 0 12px }
  .results{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-top:14px }
  .result{ cursor:pointer; border:2px solid #2a1f47; padding:8px; background:#0d0820; text-align:center; font-size:16px }
  .result:hover{ border-color:var(--cyan) }
  .result .rc{ aspect-ratio:3/4; background:#1a1030 center/cover no-repeat; border:2px solid #000; margin-bottom:6px;
    display:grid; place-items:center; font-size:12px; color:var(--dim) }
  .muted{ color:var(--dim); font-size:17px }
  .hide{ display:none !important }

  /* ---------- section menu (hub) ---------- */
  .menu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px }
  .menu-card{ display:flex; flex-direction:column; gap:8px; padding:20px; text-decoration:none;
    background:#0d0820; border:2px solid var(--cyan); box-shadow:3px 3px 0 var(--magenta);
    color:var(--ink); transition:transform .1s, box-shadow .1s }
  .menu-card:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--magenta); color:var(--ink) }
  .menu-card .mc-icon{ font-size:26px; color:var(--gold) }
  .menu-card b{ font-family:'Press Start 2P'; font-size:12px; color:var(--cyan) }

  /* ---------- section sub-nav ---------- */
  .subnav{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px }
  .chip{ font-family:'Press Start 2P'; font-size:9px; padding:8px 10px; text-decoration:none;
    color:var(--dim); border:2px solid #2a1f47; background:#0d0820 }
  .chip:hover{ border-color:var(--cyan); color:var(--cyan) }
  .chip.active{ color:#0a0612; background:var(--gold); border-color:var(--gold) }