:root{
    --ink:#14151c;
    --ink-2:#191a23;
    --surface:#1e1f29;
    --surface-2:#262733;
    --hairline:#3a3b48;
    --wine:#8a3550;
    --wine-soft:#5c2536;
    --gold:#bfa054;
    --gold-soft:#8f8058;
    --paper:#ede6d8;
    --paper-dim:#c7c1b4;
    --muted:#8d879a;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:'Noto Sans JP',sans-serif;
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  .serif{font-family:'Shippori Mincho',serif;}
  .num{font-family:'Oswald',sans-serif;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  /* ---------- Age Gate ---------- */
  #gate{
    position:fixed;inset:0;z-index:100;
    background:radial-gradient(120% 120% at 50% 20%, #1c1d28 0%, #0e0f14 70%);
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;text-align:center;padding:32px;
    transition:opacity .5s ease, visibility .5s ease;
  }
  #gate.hidden{opacity:0;visibility:hidden;pointer-events:none;}
  #gate .mark{
    font-size:14px;letter-spacing:.35em;color:var(--gold);
    text-transform:uppercase;margin-bottom:22px;
  }
  #gate h1{
    font-size:clamp(28px,5vw,42px);font-weight:600;margin:0 0 18px;
    color:var(--paper);
  }
  #gate p{color:var(--muted);max-width:440px;margin:0 auto 34px;font-size:14px;}
  .gate-buttons{display:flex;gap:14px;}
  .btn{
    padding:14px 30px;border-radius:2px;font-size:14px;letter-spacing:.08em;
    cursor:pointer;border:1px solid var(--hairline);background:transparent;
    color:var(--paper);transition:.25s ease;
  }
  .btn-primary{background:var(--wine);border-color:var(--wine);color:var(--paper);}
  .btn-primary:hover{background:#9c3d5c;}
  .btn-ghost:hover{border-color:var(--paper-dim);}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:20;
    background:rgba(20,21,28,.92);backdrop-filter:blur(6px);
    border-bottom:1px solid var(--hairline);
  }
  .header-inner{
    max-width:1120px;margin:0 auto;padding:18px 28px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .brand{display:flex;align-items:baseline;gap:12px;}
  .brand .serif{font-size:22px;font-weight:600;letter-spacing:.04em;}
  .brand .en{font-size:10px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;}
  nav{display:flex;gap:28px;font-size:13px;color:var(--paper-dim);}
  nav a{padding:4px 0;border-bottom:1px solid transparent;transition:.2s;}
  nav a:hover{color:var(--paper);border-color:var(--gold);}

  /* ---------- Hero ---------- */
  .hero{
    max-width:1120px;margin:0 auto;padding:76px 28px 56px;
    display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:end;
    border-bottom:1px solid var(--hairline);
  }
  .hero .eyebrow{
    font-size:11px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;
    margin-bottom:18px;display:block;
  }
  .hero h1{
    font-size:clamp(34px,5vw,54px);font-weight:600;line-height:1.35;margin:0 0 20px;
  }
  .hero p.lead{color:var(--muted);font-size:14.5px;max-width:480px;}
  .hero .meta{
    justify-self:end;text-align:right;font-size:12.5px;color:var(--muted);
  }
  .hero .meta .update{color:var(--paper);font-size:13.5px;margin-bottom:6px;}

  section{max-width:1120px;margin:0 auto;padding:64px 28px;}
  section + section{border-top:1px solid var(--hairline);}
  .section-head{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:36px;flex-wrap:wrap;gap:12px;
  }
  .section-head h2{font-size:26px;font-weight:600;margin:0;}
  .section-head .sub{font-size:12px;color:var(--muted);letter-spacing:.05em;}

  /* ---------- Top3 (signature element) ---------- */
  .top3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .top-card{
    position:relative;background:var(--surface);border:1px solid var(--hairline);
    padding:26px 22px 22px;overflow:hidden;transition:.3s ease;
  }
  .top-card:hover{border-color:var(--gold-soft);transform:translateY(-3px);}
  .top-card .bignum{
    position:absolute;top:-18px;right:6px;font-size:110px;font-weight:600;
    color:transparent;-webkit-text-stroke:1px rgba(191,160,84,.35);
    line-height:1;pointer-events:none;
  }
  .cover{
    width:100%;aspect-ratio:3/4;border-radius:2px;margin-bottom:16px;
    position:relative;overflow:hidden;
  }
  .cover.audio{background:linear-gradient(150deg,#3a2136,#7a3352 60%,#bfa054);}
  .cover.comic{background:linear-gradient(150deg,#20293a,#2c5170 60%,#bfa054);}
  .cover.other{background:linear-gradient(150deg,#232323,#4a3a2c 60%,#bfa054);}
  .cover.game{background:linear-gradient(150deg,#1c2e28,#2f5c46 60%,#bfa054);}
  .cover::after{
    content:'';position:absolute;inset:0;
    background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px);
  }
  .cover .catmark{
    position:absolute;bottom:10px;left:12px;font-size:11px;letter-spacing:.15em;
    color:rgba(237,230,216,.85);text-transform:uppercase;
  }
  .platform-pill{
    display:inline-block;font-size:10px;letter-spacing:.1em;padding:3px 9px;
    border:1px solid var(--hairline);color:var(--paper-dim);margin-bottom:10px;
  }
  .top-card h3{font-size:15.5px;font-weight:500;margin:0 0 8px;line-height:1.5;}
  .circle{font-size:12px;color:var(--muted);margin-bottom:14px;}
  .card-foot{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;}
  .price{color:var(--gold);font-family:'Oswald',sans-serif;font-size:15px;}
  .change{color:#7fae8d;font-size:11.5px;}
  .change.new{color:var(--wine-soft);color:#c97a92;}

  /* ---------- Genre list rows ---------- */
  .rank-row{
    display:grid;grid-template-columns:52px 56px 1fr auto auto;
    align-items:center;gap:18px;padding:16px 0;
    border-bottom:1px solid var(--hairline);
  }
  .rank-row:first-child{border-top:1px solid var(--hairline);}
  .rank-row .rn{
    font-family:'Oswald',sans-serif;font-size:26px;color:var(--gold-soft);
    text-align:center;
  }
  .swatch{width:56px;height:74px;border-radius:2px;}
  .swatch.audio{background:linear-gradient(160deg,#3a2136,#7a3352);}
  .swatch.comic{background:linear-gradient(160deg,#20293a,#2c5170);}
  .swatch.other{background:linear-gradient(160deg,#232323,#4a3a2c);}
  .swatch.game{background:linear-gradient(160deg,#1c2e28,#2f5c46);}
  .rr-title{font-size:14px;}
  .rr-title .circle{margin:0;font-size:11.5px;}
  .rr-tag{font-size:10.5px;color:var(--paper-dim);border:1px solid var(--hairline);padding:3px 8px;white-space:nowrap;}
  .rr-change{font-size:12px;color:var(--muted);text-align:right;min-width:56px;}
  .rr-change.up{color:#7fae8d;}
  .rr-change.new{color:#c97a92;}

  .more-link{
    display:inline-block;margin-top:26px;font-size:13px;color:var(--gold);
    border-bottom:1px solid var(--gold-soft);padding-bottom:2px;
  }
  .more-link:hover{color:var(--paper);border-color:var(--paper);}

  footer{
    max-width:1120px;margin:0 auto;padding:48px 28px 64px;
    border-top:1px solid var(--hairline);
    color:var(--muted);font-size:11.5px;line-height:2;
  }
  footer .fbrand{color:var(--paper-dim);font-size:13px;margin-bottom:10px;}

  @media(max-width:760px){
    .hero{grid-template-columns:1fr;}
    .hero .meta{justify-self:start;text-align:left;}
    .top3{grid-template-columns:1fr;}
    nav{display:none;}
    .rank-row{grid-template-columns:36px 44px 1fr auto;}
    .rr-tag{display:none;}
  }

  :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }