@font-face{font-family:BCBd;src:url('/assets/fonts/BarlowCondensed-Bold.ttf') format('truetype');font-display:swap}
@font-face{font-family:BCMd;src:url('/assets/fonts/BarlowCondensed-Medium.ttf') format('truetype');font-display:swap}
@font-face{font-family:BCRg;src:url('/assets/fonts/BarlowCondensed-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:MonoRg;src:url('/assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:Mono;src:url('/assets/fonts/IBMPlexMono-Medium.ttf') format('truetype');font-display:swap}
@font-face{font-family:JPRg;src:url('/assets/fonts/NotoSansJP-Regular.ttf') format('truetype');font-display:swap}
html{font-synthesis:style} /* v6c: no faux bold on single-weight faces; keep synthetic italic */
*{box-sizing:border-box;margin:0;padding:0}
html{background:#e8ebe9}
body{
  font-family:BCMd,system-ui,sans-serif; color:#1a1a18;
  background:#e8ebe9;
  background-image:
    linear-gradient(#dfe3e0 1px, transparent 1px),
    linear-gradient(90deg, #dfe3e0 1px, transparent 1px);
  background-size:16px 16px;
  min-height:100dvh;
  display:flex; justify-content:center;
}
.shell{
  width:100%; max-width:390px;
  padding:8px 12px 6px;
  display:flex; flex-direction:column;
  position:relative;
  min-height:100dvh;
}
.shell-inner{display:contents}
/* registration marks */
.shell::before,.shell::after{content:""; position:absolute; width:10px; height:10px; border:#1a1a18 solid; pointer-events:none; z-index:8}
.shell::before{top:4px; left:4px; border-width:2px 0 0 2px}
.shell::after{top:4px; right:4px; border-width:2px 2px 0 0}
.reg-bl,.reg-br{position:absolute; width:10px; height:10px; border:#1a1a18 solid; z-index:8; pointer-events:none}
.reg-bl{bottom:4px; left:4px; border-width:0 0 2px 2px}
.reg-br{bottom:4px; right:4px; border-width:0 2px 2px 0}

.opt{
  position:absolute; top:6px; left:18px; z-index:9;
  font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.08em;
  background:#ff5a1f; color:#1a1a18; padding:2px 6px;
}
.serial-top{
  position:absolute; top:6px; right:18px; z-index:9;
  font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.06em; color:#5a564c;
}

.caution{
  height:7px; margin:14px 0 6px 0;
  background:repeating-linear-gradient(-45deg,#1a1a18 0 6px,#ff5a1f 6px 12px);
  border:1px solid #1a1a18;
}
.livery{display:flex; height:6px; margin-bottom:8px}
.livery i{display:block}
.livery i:nth-child(1){background:#ff5a1f; flex:2.2}
.livery i:nth-child(2){background:#1a1a18; flex:0.35}
.livery i:nth-child(3){background:#00c2d4; flex:1.1}
.livery i:nth-child(4){background:#1a1a18; flex:0.25}
.livery i:nth-child(5){background:#e8ebe9; flex:0.7; box-shadow:inset 0 0 0 1px #1a1a18}
.livery i:nth-child(6){background:#ff5a1f; flex:0.4}

.brand{display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px}
.brand-main{display:flex; flex-direction:column; gap:3px; min-width:0}
.top-meta{display:contents}
.logo-wrap{display:flex; flex-direction:column; gap:3px}
.logo-wrap img.logo{display:block; height:60px; width:auto}
.logo-wrap .kana{
  font-family:JPRg,sans-serif; font-size:11px; letter-spacing:0.14em; color:#007a86;
}
.meta-r{
  text-align:right; font-family:MonoRg,monospace; font-size:11px; line-height:1.4; color:#5a564c;
}
.meta-r b{color:#1a1a18; font-family:Mono,monospace; font-weight:500}
.meta-r .id{color:#007a86; font-size:11px; letter-spacing:0.04em; margin-top:3px}
.meta-r .nav-path{color:#5a564c}
.meta-r .nav-path a{color:#1a1a18; text-decoration:none; border-bottom:1px solid #ff5a1f55}
.meta-r .nav-path a:hover{border-bottom-color:#ff5a1f}

.ticker{
  display:flex; align-items:center; gap:0; margin:0 0 7px;
  border:1.5px solid #1a1a18; background:#1a1a18; overflow:hidden;
  font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.08em;
  color:#e8ebe9; min-height:26px;
}
.ticker .t-live{background:#ff5a1f; color:#1a1a18; padding:8px 10px; display:flex; align-items:center; font-family:Mono,monospace}
.ticker .t-scroll{flex:1; padding:8px 10px; white-space:nowrap; overflow:hidden; display:flex; align-items:center; gap:10px}
.ticker .t-scroll span{opacity:0.85}
.ticker .t-scroll b{color:#00c2d4; font-family:Mono,monospace; font-weight:500}
.ticker .t-end{background:#00c2d4; color:#1a1a18; padding:8px 10px; display:flex; align-items:center}

.intro{
  font-family:BCRg,sans-serif; font-size:13px; line-height:1.3; color:#2a2820;
  margin:0 0 7px; border-left:3px solid #00c2d4; padding-left:8px;
  display:flex; align-items:flex-start; gap:6px;
  min-height:calc(2 * 1.3em); /* reserve two lines so quote swap doesn't jump */
}
.intro .chev{
  flex:0 0 auto; width:0; height:0; margin-top:4px;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  border-left:7px solid #ff5a1f;
}
.intro > #emoai-quote-text{flex:1; min-width:0}
.intro .q-by{
  font-family:MonoRg,monospace; font-size:0.85em; letter-spacing:0.04em;
  text-transform:uppercase; color:#00c2d4; white-space:nowrap;
  vertical-align:baseline;
}
.hud{
  display:flex; gap:5px; align-items:center; margin-bottom:7px; flex-wrap:wrap;
  font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.05em; color:#5a564c;
}
.hud .pill{background:#1a1a18; color:#e8ebe9; padding:2px 5px}
.hud .chip{border:1px solid #1a1a18; padding:2px 5px; background:#f3f4f2}
.hud .cyan{color:#007a86}

.list{display:flex; flex-direction:column; gap:6px; flex:1; min-height:0}

.card{
  display:grid; grid-template-columns:22px 86px 1fr;
  background:#f3f4f2; border:1.5px solid #1a1a18;
  min-height:0; overflow:hidden; position:relative;
}
.card::after{
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-top:12px solid #ff5a1f; border-left:12px solid transparent;
}
.card.soon::after{border-top-color:#00c2d4}

.num{
  background:#1a1a18; color:#e8ebe9;
  font-family:BCBd,sans-serif; font-size:12px; letter-spacing:0.04em;
  writing-mode:vertical-rl; transform:rotate(180deg);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  border-right:1px solid #1a1a18;
}
.num::before,.num::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:8px; height:2px; background:currentColor; opacity:0.55;
}
.num::before{top:6px}
.num::after{bottom:6px}
.card.c01 .num{background:#ff5a1f; color:#1a1a18}
.card.c02 .num{background:#1a1a18}
.card.c03 .num{background:#00c2d4; color:#1a1a18}

.shot-col{position:relative; border-right:1.5px solid #1a1a18; border-left:1.5px solid #1a1a18}
.shot{width:86px; height:100%; min-height:118px; object-fit:cover; object-position:center top; display:block}
.picto{
  position:absolute; left:3px; bottom:3px; z-index:2;
  width:18px; height:18px; background:#1a1a18; color:#e8ebe9;
  display:flex; align-items:center; justify-content:center;
}
.picto svg{width:12px; height:12px; fill:currentColor}
.card.c01 .picto{background:#ff5a1f; color:#1a1a18}
.card.c03 .picto{background:#00c2d4; color:#1a1a18}

.body{padding:6px 8px 5px; display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0}
.kicker{font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.1em; color:#5a564c; text-transform:uppercase; display:flex; justify-content:space-between; gap:4px}
.card.c01 .kicker{color:#c94410}
.kicker .jp{font-family:JPRg,sans-serif; letter-spacing:0.04em; color:#007a86; text-transform:none; font-size:11px}
.name{font-family:BCMd,sans-serif; font-size:18px; letter-spacing:-0.01em; line-height:1; text-transform:uppercase}
.blurb{font-family:BCRg,sans-serif; font-size:12px; color:#3a3830; line-height:1.2; margin-top:1px}
.stats{
  display:flex; flex-wrap:wrap; gap:3px; margin-top:4px;
  font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.04em; color:#5a564c;
}
.stats i{
  font-style:normal; border:1px solid #c5c2b8; background:#e8ebe9;
  padding:1px 4px; white-space:nowrap;
}
.card.c01 .stats i{border-color:#ff5a1f55}
.row{margin-top:4px; display:flex; gap:5px; align-items:center; flex-wrap:wrap}
.btn{
  font-family:BCBd,sans-serif; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  background:#ff5a1f; color:#1a1a18; text-decoration:none;
  padding:5px 8px; border:1.5px solid #1a1a18;
  display:inline-flex; align-items:center; gap:4px;
}
.btn::after{content:""; width:0;height:0; border-top:3px solid transparent; border-bottom:3px solid transparent; border-left:5px solid #1a1a18}
.tag{
  font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  border:1.5px solid #1a1a18; padding:3px 6px; color:#1a1a18; background:#e8ebe9;
}
.note{font-family:MonoRg,monospace; font-size:11px; color:#5a564c; margin-top:1px}

.barcode{
  display:flex; align-items:stretch; gap:0; height:22px; margin-top:6px;
  border:1px solid #1a1a18; background:#f3f4f2; overflow:hidden;
}
.barcode .bars{
  flex:1; display:flex; align-items:stretch; padding:4px 8px; gap:1px;
}
.barcode .bars b{display:block; background:#1a1a18; width:1px}
.barcode .bars b.w{width:2px}
.barcode .bars b.t{width:3px}
.barcode .code{
  font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.06em;
  padding:0 10px; display:flex; align-items:center; background:#1a1a18; color:#e8ebe9;
  white-space:nowrap;
}

.foot{
  margin-top:6px; padding-top:6px; border-top:2px solid #1a1a18;
  display:flex; justify-content:space-between; align-items:center;
  font-family:MonoRg,monospace; font-size:11px; color:#5a564c;
  gap:8px; flex-wrap:wrap;
}
.foot a{color:#1a1a18; text-decoration:none; border-bottom:1.5px solid #ff5a1f}
.foot .jp{font-family:JPRg,sans-serif; font-size:11px; color:#007a86}
.foot .mid{display:flex; align-items:center; gap:6px}
.foot .mark{width:16px; height:16px; display:block}
#site-footer-links{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

/* Short phone: 360×640 — tighten so nav still fits with +1 item */
@media (max-width: 370px), (max-height: 700px) {
  .shell{padding:6px 8px 4px}
  .opt,.serial-top{font-size:10px}
  .logo-wrap img.logo{height:48px}
  .logo-wrap .kana{font-size:10px}
  .meta-r{font-size:10px; line-height:1.3}
  .caution{margin:12px 0 4px}
  .livery{margin-bottom:5px}
  .ticker{font-size:10px; min-height:22px; margin-bottom:5px}
  .ticker .t-live,.ticker .t-scroll,.ticker .t-end{padding:5px 7px}
  .intro{font-size:12px; margin-bottom:5px}
  .hud{font-size:10px; margin-bottom:5px; gap:3px}
  .list{gap:4px}
  .card{grid-template-columns:18px 72px 1fr}
  .shot{width:72px; min-height:96px}
  .name{font-size:16px}
  .blurb{font-size:11px}
  .stats{font-size:10px}
  .kicker{font-size:10px}
  .body{padding:4px 6px 4px}
  .btn{font-size:11px; padding:4px 7px}
  .foot{font-size:10px; gap:6px}
}

/* HUD: mobile keeps it under intro; desktop puts it under the logo */
.hud-desk{display:none}
.hud-mobile{display:flex}

/* Emo Ai card 04 */
.card.c04::after{border-top-color:#1a1a18}
.card.c04 .num{background:#2a2820; color:#e8ebe9}
.btn-ghost{background:#e8ebe9}

/* Desktop: other pages keep the phone column; home gets the wide layout */
@media (min-width: 900px) {
  body:not(.page-home) .shell{
    max-width:420px;
    margin:24px 0;
    min-height:auto;
    border:1.5px solid #1a1a18;
    background:#e8ebe9;
    background-image:
      linear-gradient(#dfe3e0 1px, transparent 1px),
      linear-gradient(90deg, #dfe3e0 1px, transparent 1px);
    background-size:16px 16px;
    box-shadow: 8px 8px 0 #1a1a18;
    padding:12px 14px 10px;
  }

  /* —— HOME desktop-v2 —— */
  body.page-home{
    display:block;
  }
  body.page-home .shell{
    max-width:none;
    width:100%;
    margin:0;
    min-height:auto;
    border:0;
    box-shadow:none;
    padding:0;
    background:transparent;
    background-image:none;
    display:block;
  }
  body.page-home .shell-inner{
    display:block;
    max-width:1200px;
    margin:0 auto;
    padding:20px 28px 18px;
    position:relative;
  }
  /* registration marks sit on the content column */
  body.page-home .shell > .reg-bl,
  body.page-home .shell > .reg-br,
  body.page-home .shell::before,
  body.page-home .shell::after{display:none}
  body.page-home .shell-inner::before,
  body.page-home .shell-inner::after{
    content:""; position:absolute; width:12px; height:12px; border:#1a1a18 solid; pointer-events:none; z-index:8;
  }
  body.page-home .shell-inner::before{top:8px; left:8px; border-width:2px 0 0 2px}
  body.page-home .shell-inner::after{top:8px; right:8px; border-width:2px 2px 0 0}
  body.page-home .shell-inner .reg-bl,
  body.page-home .shell-inner .reg-br{
    position:absolute; width:12px; height:12px; border:#1a1a18 solid; z-index:8; pointer-events:none;
  }
  body.page-home .shell-inner .reg-bl{bottom:8px; left:8px; border-width:0 0 2px 2px}
  body.page-home .shell-inner .reg-br{bottom:8px; right:8px; border-width:0 2px 2px 0}
  body.page-home .top-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
  }
  body.page-home .opt,
  body.page-home .serial-top{
    position:static;
    top:auto; left:auto; right:auto;
  }
  body.page-home .hero{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:16px;
    padding-bottom:16px;
    border-bottom:2px solid #1a1a18;
  }
  body.page-home .brand{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:24px;
    align-items:start;
    margin-bottom:0;
  }
  body.page-home .brand-main{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  body.page-home .logo-wrap,
  body.page-home .logo-wrap a{
    align-items:flex-start; /* don't stretch the SVG across the brand column */
    width:auto;
  }
  body.page-home .logo-wrap img.logo{
    height:72px;
    width:auto;
    max-width:none;
    align-self:flex-start;
    flex:0 0 auto;
  }
  body.page-home .logo-wrap .kana{font-size:13px; letter-spacing:0.16em}
  body.page-home .hud-desk{display:flex; margin:0}
  body.page-home .hud-mobile{display:none}
  body.page-home .meta-r{font-size:12px; line-height:1.45}
  body.page-home .ticker{margin:0; min-height:32px; font-size:12px}
  body.page-home .ticker .t-live,
  body.page-home .ticker .t-scroll,
  body.page-home .ticker .t-end{padding:8px 12px}
  body.page-home .intro{
    font-size:16px; line-height:1.35; margin:0;
    padding-left:12px;
  }
  body.page-home .intro .chev{
    margin-top:6px;
    border-top-width:5px; border-bottom-width:5px; border-left-width:8px;
  }
  body.page-home .list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    flex:none;
    margin-bottom:14px;
  }
  body.page-home .card{
    grid-template-columns:28px 120px 1fr;
    min-height:148px;
  }
  body.page-home .shot{width:120px; min-height:148px}
  body.page-home .name{font-size:28px}
  body.page-home .blurb{font-size:14px; line-height:1.35}
  body.page-home .body{padding:12px 14px 10px; gap:3px}
  body.page-home .kicker{font-size:12px}
  body.page-home .kicker .jp{font-size:12px}
  body.page-home .stats{font-size:12px; gap:4px; margin-top:6px}
  body.page-home .stats i{padding:2px 5px}
  body.page-home .row{margin-top:8px}
  body.page-home .btn{font-size:13px; padding:7px 12px}
  body.page-home .btn::after{
    border-top-width:4px; border-bottom-width:4px; border-left-width:6px;
  }
  body.page-home .tag{font-size:12px; padding:4px 8px}
  body.page-home .note{font-size:12px}
  body.page-home .num{font-size:14px}
  body.page-home .barcode{height:24px; margin-top:0; margin-bottom:10px}
  body.page-home .barcode .code{font-size:12px; padding:0 12px}
  body.page-home .foot{
    margin-top:0; padding-top:10px; font-size:12px; gap:12px;
  }
  body.page-home .foot .mark{width:18px; height:18px}
  body.page-home .reg-bl, body.page-home .reg-br,
  body.page-home .shell::before, body.page-home .shell::after{
    width:12px; height:12px;
  }
  body.page-home .shell::before{top:8px; left:8px}
  body.page-home .shell::after{top:8px; right:8px}
  body.page-home .reg-bl{bottom:8px; left:8px}
  body.page-home .reg-br{bottom:8px; right:8px}
  /* top meta row: opt left, serial right — already floated; tighten caution spacing */
  body.page-home .caution{
    width:100%; max-width:none;
    margin:0; margin-left:0; margin-right:0;
    border-left:0; border-right:0;
  }
  body.page-home .livery{
    width:100%; max-width:none;
    margin:0 0 0; margin-left:0; margin-right:0;
  }
}

@media (min-width: 900px) and (max-width: 1100px) {
  body.page-home .shell-inner{
    max-width:980px;
    padding:16px 20px 14px;
  }
  body.page-home .brand{gap:16px; grid-template-columns:1fr 1fr}
  body.page-home .logo-wrap img.logo{height:60px; width:auto; align-self:flex-start; flex:0 0 auto}
  body.page-home .name{font-size:24px}
  body.page-home .card{grid-template-columns:24px 100px 1fr; min-height:132px}
  body.page-home .shot{width:100px; min-height:132px}
  body.page-home .intro{font-size:14px}
}


/* —— S2 full-bleed stripes (v4) —— */
/* ≥~600px: caution + livery span the full viewport; content column stays centred.
   Mobile (<600px) unchanged — pixel-match v3 outside S1. */
@media (min-width: 600px) {
  html{overflow-x:hidden}
  .caution{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    box-sizing:border-box;
  }
  .livery{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    box-sizing:border-box;
  }
}

/* —— shared link polish —— */
.opt a{color:inherit;text-decoration:none}
.logo-wrap a{color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:3px}
.meta-r .nav-path.is-current a{color:#ff5a1f}
.card a.shot-link{display:block;height:100%}
.card a.name-link{color:inherit;text-decoration:none}
.card a.name-link:hover{border-bottom:1.5px solid #ff5a1f}

/* —— /pelit/* pages (George layout: enlarged card → shots → stats → intro → action → OST rail) —— */
.back{
  font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.06em;
  margin:0 0 8px; display:inline-flex; align-items:center; gap:6px;
  color:#1a1a18; text-decoration:none; border-bottom:1.5px solid #ff5a1f;
  align-self:flex-start;
}
.hero-card{
  display:grid; grid-template-columns:28px 1fr;
  background:#f3f4f2; border:1.5px solid #1a1a18;
  overflow:hidden; position:relative; margin:0 0 10px; min-height:160px;
}
.hero-card::after{
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-top:14px solid #ff5a1f; border-left:14px solid transparent; z-index:2;
}
.hero-card.soon::after{border-top-color:#00c2d4}
.hero-card .num{
  background:#1a1a18; color:#e8ebe9;
  font-family:BCBd,sans-serif; font-size:14px; letter-spacing:0.04em;
  writing-mode:vertical-rl; transform:rotate(180deg);
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid #1a1a18; position:relative;
}
.hero-card .num::before,.hero-card .num::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:10px; height:2px; background:currentColor; opacity:0.55;
}
.hero-card .num::before{top:8px}
.hero-card .num::after{bottom:8px}
.hero-card.c01 .num{background:#ff5a1f; color:#1a1a18}
.hero-card.c02 .num{background:#1a1a18}
.hero-card.c03 .num{background:#00c2d4; color:#1a1a18}
.hero-card .hero-body{padding:10px 12px 10px; display:flex; flex-direction:column; justify-content:center; gap:2px; min-width:0}
.hero-card .kicker{font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.1em; color:#5a564c; text-transform:uppercase; display:flex; justify-content:space-between; gap:4px}
.hero-card.c01 .kicker{color:#c94410}
.hero-card .kicker .jp{font-family:JPRg,sans-serif; letter-spacing:0.04em; color:#007a86; text-transform:none; font-size:12px}
.hero-card .name{font-family:BCMd,sans-serif; font-size:28px; letter-spacing:-0.01em; line-height:1; text-transform:uppercase}
.hero-card .blurb{font-family:BCRg,sans-serif; font-size:13px; color:#3a3830; line-height:1.25; margin-top:2px}

.shot-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:0 0 10px;
}
.shot-row figure{
  margin:0; border:1.5px solid #1a1a18; background:#1a1a18; overflow:hidden;
}
.shot-row img{
  display:block; width:100%; height:120px; object-fit:cover; object-position:center top;
}
.shot-row.pixel img{image-rendering:pixelated}
.shot-row figcaption{
  font-family:MonoRg,monospace; font-size:9px; letter-spacing:0.06em; color:#5a564c;
  padding:3px 4px; background:#f3f4f2; border-top:1px solid #1a1a18;
}

.game-stats{
  display:flex; flex-wrap:wrap; gap:4px; margin:0 0 10px;
  font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.04em; color:#5a564c;
}
.game-stats i{
  font-style:normal; border:1px solid #c5c2b8; background:#f3f4f2;
  padding:3px 6px; white-space:nowrap;
}
.game-intro{
  font-family:BCRg,sans-serif; font-size:14px; line-height:1.35; color:#2a2820;
  margin:0 0 12px; border-left:3px solid #00c2d4; padding-left:8px;
}
.game-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px}
.note-wip{
  font-family:MonoRg,monospace; font-size:11px; color:#007a86;
  border:1.5px dashed #00c2d4; background:#e6f7f9; padding:6px 8px; margin:0 0 12px;
}
.ost-rail{
  display:flex; align-items:center; gap:0; margin:0 0 8px;
  border:1.5px solid #1a1a18; background:#f3f4f2; overflow:hidden;
  text-decoration:none; color:inherit;
}
.ost-rail .ost-num{
  background:#1a1a18; color:#e8ebe9; font-family:BCBd,sans-serif; font-size:12px;
  padding:10px 8px; border-right:1px solid #1a1a18; letter-spacing:0.04em;
}
.ost-rail.c01 .ost-num{background:#ff5a1f; color:#1a1a18}
.ost-rail.c02 .ost-num{background:#1a1a18}
.ost-rail.c03 .ost-num{background:#00c2d4; color:#1a1a18}
.ost-rail .ost-meta{flex:1; padding:8px 10px; min-width:0}
.ost-rail .ost-k{font-family:MonoRg,monospace; font-size:10px; letter-spacing:0.1em; color:#5a564c; text-transform:uppercase}
.ost-rail .ost-t{font-family:BCMd,sans-serif; font-size:14px; letter-spacing:0.02em; text-transform:uppercase; color:#1a1a18}
.ost-rail .ost-go{
  font-family:MonoRg,monospace; font-size:11px; padding:0 10px; color:#ff5a1f;
  border-left:1px solid #1a1a18; align-self:stretch; display:flex; align-items:center;
}

@media (max-width: 370px), (max-height: 700px) {
  .hero-card{grid-template-columns:22px 1fr; min-height:130px}
  .hero-card .name{font-size:22px}
  .shot-row{grid-template-columns:repeat(2,1fr)}
  .shot-row img{height:100px}
  .game-intro{font-size:13px}
}

/* —— /soundtracks sticky player —— */
body.has-player .shell{padding-bottom:88px}
.st-page-head{margin:0 0 8px}
.st-page-head .kicker{font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.12em; color:#c94410; text-transform:uppercase; display:flex; justify-content:space-between}
.st-page-head .kicker .jp{font-family:JPRg,sans-serif; color:#007a86; text-transform:none; letter-spacing:0.04em}
.st-page-head h1{font-family:BCMd,sans-serif; font-size:32px; letter-spacing:-0.02em; line-height:0.95; text-transform:uppercase; margin:2px 0 4px}
.st-page-head .lede{font-family:BCRg,sans-serif; font-size:13px; line-height:1.25; color:#2a2820; border-left:3px solid #00c2d4; padding-left:8px}
.sec{margin-bottom:12px; scroll-margin-top:12px}
.sec-head{display:flex; align-items:stretch; gap:0; margin-bottom:6px; border:1.5px solid #1a1a18; background:#f3f4f2; overflow:hidden}
.sec-head .num{background:#1a1a18; color:#e8ebe9; font-family:BCBd,sans-serif; font-size:14px; letter-spacing:0.04em; padding:0 8px; display:flex; align-items:center; justify-content:center; border-right:1px solid #1a1a18; min-width:36px}
.sec.c01 .sec-head .num{background:#ff5a1f; color:#1a1a18}
.sec.c02 .sec-head .num{background:#1a1a18}
.sec.c03 .sec-head .num{background:#00c2d4; color:#1a1a18}
.sec-head .meta{flex:1; padding:6px 8px; display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0}
.sec-head .meta .sk{font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.1em; color:#5a564c; text-transform:uppercase; display:flex; justify-content:space-between}
.sec.c01 .sec-head .meta .sk{color:#c94410}
.sec-head .meta .sk .jp{font-family:JPRg,sans-serif; color:#007a86; text-transform:none; letter-spacing:0.04em}
.sec-head .meta .nm{font-family:BCMd,sans-serif; font-size:18px; letter-spacing:-0.01em; line-height:1; text-transform:uppercase}
.sec-head .cover{width:72px; border-left:1.5px solid #1a1a18; position:relative; flex:0 0 auto}
.sec-head .cover img{width:72px; height:72px; object-fit:cover; object-position:center top; display:block}
.sec.c02 .sec-head .cover img,.sec.c03 .sec-head .cover img{image-rendering:pixelated}
.sec-head .cover::after{content:""; position:absolute; top:0; right:0; width:0; height:0; border-top:10px solid #ff5a1f; border-left:10px solid transparent}
.sec.c02 .sec-head .cover::after{border-top-color:#1a1a18}
.sec.c03 .sec-head .cover::after{border-top-color:#00c2d4}
.play-all{font-family:BCBd,sans-serif; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; background:#ff5a1f; color:#1a1a18; border:1.5px solid #1a1a18; padding:5px 8px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; margin:0 0 6px}
.play-all::after{content:""; width:0;height:0; border-top:3px solid transparent; border-bottom:3px solid transparent; border-left:5px solid #1a1a18}
.play-all:disabled,.play-all.soon{background:#e8ebe9; color:#5a564c; cursor:default}
.play-all.soon::after{border-left-color:#5a564c; opacity:0.5}
.tracks{border:1.5px solid #1a1a18; background:#f3f4f2; display:flex; flex-direction:column}
.tr{display:grid; grid-template-columns:28px 1fr 42px 28px; align-items:center; gap:4px; padding:7px 8px; border-bottom:1px solid #d5d2c8; font-family:MonoRg,monospace; font-size:11px; letter-spacing:0.04em; cursor:pointer; background:transparent}
.tr:last-child{border-bottom:0}
.tr:hover{background:#e8ebe9}
.tr.active{background:#1a1a18; color:#e8ebe9}
.tr.active .ttl{color:#e8ebe9}
.tr.active .jp{color:#00c2d4}
.tr.active .dur{color:#00c2d4}
.tr .n{font-family:BCMd,sans-serif; font-size:13px; color:#5a564c}
.tr.active .n{color:#ff5a1f}
.tr .mid{min-width:0; display:flex; flex-direction:column; gap:1px}
.tr .ttl{font-family:BCBd,sans-serif; font-size:13px; letter-spacing:0.01em; color:#1a1a18; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tr .jp{font-family:JPRg,sans-serif; font-size:10px; letter-spacing:0.06em; color:#007a86}
.tr .dur{text-align:right; color:#5a564c}
.tr .play-ico{width:22px; height:22px; border:1px solid #1a1a18; background:#e8ebe9; display:flex; align-items:center; justify-content:center; justify-self:end}
.tr .play-ico svg{width:10px; height:10px; fill:#1a1a18}
.tr.active .play-ico{background:#ff5a1f; border-color:#ff5a1f}
.tr.soon{cursor:default; opacity:0.85}
.tr.soon .ttl{color:#5a564c; font-style:italic}
.tr.soon .play-ico{opacity:0.4}
.player{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:20;
  width:100%; max-width:390px;
  background:#1a1a18; color:#e8ebe9;
  border-top:2px solid #ff5a1f;
  padding:8px 12px 10px;
  font-family:MonoRg,monospace; font-size:11px;
  box-shadow:0 -4px 0 #00c2d4;
}
@media (min-width:900px){
  .player{max-width:420px}
}
.player .p-top{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.player .p-meta{flex:1; min-width:0}
.player .p-title{font-family:BCMd,sans-serif; font-size:14px; letter-spacing:0.02em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#e8ebe9}
.player .p-game{color:#00c2d4; letter-spacing:0.08em; text-transform:uppercase; font-size:10px; margin-top:1px}
.player .p-ctrls{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.player .p-btn{width:28px; height:28px; border:1.5px solid #e8ebe9; background:transparent; color:#e8ebe9; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
.player .p-btn.main{background:#ff5a1f; border-color:#ff5a1f; color:#1a1a18; width:34px; height:34px}
.player .p-btn svg{width:12px; height:12px; fill:currentColor}
.player .p-btn.main svg{width:14px; height:14px}
.player .p-prog{display:flex; align-items:center; gap:8px}
.player .bar{flex:1; height:6px; background:#3a3830; border:1px solid #5a564c; position:relative; cursor:pointer}
.player .bar .fill{position:absolute; left:0; top:0; bottom:0; background:#ff5a1f; width:0%}
.player .bar .fill::after{content:""; position:absolute; right:-3px; top:50%; transform:translateY(-50%); width:6px; height:10px; background:#00c2d4; border:1px solid #1a1a18}
.player .t-now,.player .t-end{font-family:Mono,monospace; font-size:10px; letter-spacing:0.04em; color:#00c2d4; min-width:28px}
.player .t-end{text-align:right; color:#5a564c}
.player .hud-strip{display:flex; gap:6px; margin-bottom:5px; align-items:center; font-size:9px; letter-spacing:0.1em; color:#5a564c; text-transform:uppercase}
.player .hud-strip .live{background:#ff5a1f; color:#1a1a18; padding:1px 4px; font-family:Mono,monospace}
.player .hud-strip .sync{color:#00c2d4}
@media (max-width:370px),(max-height:700px){
  body.has-player .shell{padding-bottom:96px}
  .st-page-head h1{font-size:26px}
  .player{padding:6px 8px 8px}
}