/* ═══════════════════════════════════════════════════════════════════════════
   THEME LAYER — one design, two expressions. Loaded LAST on every public page.
   Dark  : banner sits full-bleed under an ink wash; type is bone-white.
   Light : the ORIGINAL light banner is shown whole (never cropped behind text) as a
           masthead on aged paper, fading into the page; type is ink.
   Banner art comes from the existing token --header-bg (gkg-core.css), so toggling
   data-theme swaps it everywhere automatically.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero::before,#hdr .hdr-art,.gate::before{background-image:var(--header-bg)}

/* ── LIGHT type/colour (geometry is shared; see BANNER SYSTEM below) ───────────────────────────────────────────── */
[data-theme="light"] #hdr .glitch-wrap img{filter:brightness(0) drop-shadow(0 5px 0 rgba(179,20,28,.75))}
[data-theme="light"] #hdr .hdr-tag,[data-theme="light"] .hero-tag,[data-theme="light"] .hero-sub{color:var(--text-dim)}
[data-theme="light"] #hdr .hdr-cta .btn,[data-theme="light"] .hero .btn,[data-theme="light"] .gate .btn{color:var(--text)}
[data-theme="light"] .hero-title,[data-theme="light"] .gate h1{color:var(--text)}
[data-theme="light"] .hero-kick .gk-tape,[data-theme="light"] .hero-tape,[data-theme="light"] .gate-tape{color:var(--accent)}
[data-theme="light"] .hero p,[data-theme="light"] .gate p{color:var(--text-dim)}
[data-theme="light"] .gate-code{-webkit-text-stroke-color:var(--blood)}
/* top bars float over the banner; make them readable on pale art */
[data-theme="light"] .topbar,[data-theme="light"] .gk-top{background:linear-gradient(180deg,rgba(239,229,210,.92),rgba(239,229,210,0));color:var(--text)}
[data-theme="light"] .topbar a,[data-theme="light"] .gk-top a,[data-theme="light"] .theme-btn{color:var(--text)}
[data-theme="light"] .topbar-current,[data-theme="light"] .gk-top-cur{color:var(--accent)}
[data-theme="light"] .tb-label{color:var(--text)}
[data-theme="light"] .mob-menu-btn{box-shadow:0 0 0 2px var(--ink),4px 4px 0 var(--ink)}
/* light hero on the links page keeps its brush underline & ghost rule */
[data-theme="light"] .hero-title::after{background:var(--blood)}

/* ── shared component finish, both themes ───────────────────────────────── */
/* contents list: open typography, not a boxed paper card */
.toc{background:none!important;color:var(--text)!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0 0 3rem}
.toc-title{font:700 .78rem/1 var(--f-label)!important;letter-spacing:.34em;text-transform:uppercase;color:var(--accent)!important;border:0!important;padding:0!important;margin:0 0 1rem!important}
.toc-grid li{line-height:1.2}
.toc-grid a{display:inline-block;padding:.38rem 0;font:600 .98rem/1.3 var(--f-body);color:var(--text-dim)!important;border:0!important;transition:color .2s,transform .2s var(--ease-out)}
.toc-grid a:hover{color:var(--accent)!important;transform:translateX(4px)}
/* meta chips → quiet inline facts */
.doc-meta{gap:.4rem 1.6rem}
.doc-meta span{background:none!important;border:0!important;padding:0!important;font:700 .74rem/1.4 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.doc-meta svg{stroke:var(--accent)}
/* sticky contents: marker instead of a tinted slab */
.side-nav a.active,.side-nav a[aria-current],.side-nav a:hover{background:none!important;color:var(--text)}
.side-nav a.active{box-shadow:inset 3px 0 0 var(--blood);padding-left:.8rem}
.side-nav a::before{color:var(--accent)}
/* callouts */
.doc-notice,.notice{background:color-mix(in srgb,var(--accent) 7%,transparent)!important}
/* selection + focus, same in both themes */
::selection{background:var(--blood);color:#FFF4E4}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── banner layer: beats page-specific legacy ::before ornaments (privacy ghost, banned-words bar…) ── */
body[class] .hero::before{content:'';position:absolute;inset:0;left:0;right:0;top:0;width:auto;height:auto;aspect-ratio:auto;z-index:-2;opacity:1;transform:scale(1.04);
  background:var(--header-bg) 68% 30%/cover no-repeat;-webkit-mask:none;mask:none;mix-blend-mode:normal;filter:none}
  -webkit-mask:var(--banner-fade);mask:var(--banner-fade)}
body.pg-links,body:has(.gk-top){padding-left:0}
.gk-top .gk-tape.red,.gk-top .gk-top-cur{background:none!important;color:var(--blood-hot);box-shadow:none;padding:0}
[data-theme="light"] .gk-top .gk-top-cur{color:var(--accent)}

/* dark gate: scrim so type stays readable over the bright key art */
body.pg-gate .gate::before{background:linear-gradient(90deg,rgba(11,7,8,.92) 0%,rgba(11,7,8,.65) 42%,rgba(11,7,8,.1) 80%),linear-gradient(0deg,rgba(11,7,8,.9),transparent 55%),var(--header-bg) 68% 30%/cover no-repeat}
[data-theme="light"] .hero-kick .gk-tape,[data-theme="light"] .hero-kick .gk-tape.red{background:none!important;color:var(--accent);border:0;box-shadow:none}
.hero,.hero-standalone{border-bottom:0!important}
.side-links a.active,.side-links a[aria-current]{border:0!important;box-shadow:inset 3px 0 0 var(--blood)!important;padding-left:.8rem!important}
body[class] .sec-body{background:none!important}
body[class] .sec-body p,body[class] .sec-body li{background:none!important}
body[class] .sec-num{min-width:0}
.theme-btn,.theme-btn:hover{border:0!important;box-shadow:none!important;background:none!important;border-radius:0}
.theme-btn:hover .tb-label{color:var(--accent)}

/* ═══ interaction layer: colour transitions, not pop-ups (both themes) ═══ */
.btn,.btn-p,.btn-sm,.btn-dc,.btn-discord,#dc-login-btn,.ft-disc-btn,.theme-btn,.faq-toc a,.word-pill{transition:background-color .25s,color .25s,border-color .25s,opacity .25s}
.btn:hover,.btn:active,.btn-p:hover,.btn-sm:hover,.btn-discord:hover,.btn-discord:hover::before,.pg-appeal .btn-discord:hover::before,#dc-login-btn:hover,.ft-disc-btn:hover,.theme-btn:hover,.faq-toc a:hover,.word-pill:hover,
.feat-card:hover,.role-card:hover,.pg-appeal .type-card:hover,.pg-appeal .radio-opt:hover,.pg-appeal .inbox-rec:hover,.gal-img-thumb:hover{transform:none!important;box-shadow:none!important}
#dc-login-btn{background:#5865F2;transition:background-color .25s}
#dc-login-btn:hover{background:#4752C4}
.ft-disc-btn:hover::before{background:#4752C4}
.faq-toc a{border:0}
.faq-toc a:hover{background:var(--blood);color:#FFF4E4}
.word-pill:hover{background:var(--blood-deep);color:#FFF4E4}
.gal-img-thumb:hover{background:none}
/* clickable rows: colour + a small arrow nudge only */
.card:hover,.card:focus-visible{transform:none!important;box-shadow:none!important;padding-left:0!important}
.card .name{transition:color .25s}
.card:hover .name,.card:focus-visible .name{color:var(--accent)}
.card:hover .link-arrow{background:none!important;color:var(--accent)!important;transform:translate(3px,-3px)}
.card:hover .ico{transform:none}
#back-to-top{background:var(--blood);border:0;box-shadow:none;border-radius:0;transition:background-color .25s}
#back-to-top:hover{background:var(--blood-deep);transform:none}
.mob-menu-btn,.mob-menu-btn:hover{transform:none}
.mob-menu-btn{transition:background-color .25s}
.mob-menu-btn:hover{background:var(--blood-deep)}
.dc-dd-item{transition:background-color .2s,color .2s}
.dc-dd-item:hover{background:color-mix(in srgb,var(--blood) 22%,transparent);color:var(--text)}

/* ── round 7: readability fixes ─────────────────────────────────────── */
.doc-cta p{text-shadow:none!important;color:var(--text)!important}
.doc-cta a{color:var(--accent)}
.notice p,.doc-notice p,.pg-appeal .notice ul li{color:var(--text)!important}
.pg-appeal .notice-title,.pg-appeal .notice-warn .notice-title{color:var(--accent)!important}
.pg-appeal .notice-info .notice-title{color:var(--text)!important}
.pg-appeal .notice-ok .notice-title{color:var(--ok,#2E9E5B)!important}

/* ═══════════════════════════════════════════════════════════════════════════
   BANNER SYSTEM (round 8) — one geometry for both themes.
   Same box, same art crop, same jagged edge; only the art file, scrim tone and
   type colour change with data-theme. Dark is the master; light mirrors it.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--jag:clamp(56px,7.5vw,118px);--jag-drop:.36;--glow:.55;--scrim:74%}
:root[data-theme="light"]{--glow:.14;--scrim:90%}

/* scrim: ink wash in dark, paper wash in light — same stops, same shape */
.hero::after{background:
  linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) var(--scrim),transparent) 42%,color-mix(in srgb,var(--bg) 8%,transparent) 78%),
  radial-gradient(circle at 15% 90%,rgba(179,20,28,var(--glow)),transparent 55%)}
.hero,.hero-standalone{background:var(--bg)!important}
#hdr{background:var(--bg)}
body.pg-gate .gate::before{background:
  linear-gradient(90deg,var(--bg) 5%,color-mix(in srgb,var(--bg) 70%,transparent) 45%,transparent 80%),
  linear-gradient(0deg,var(--bg),transparent 55%),var(--header-bg) 68% 30%/cover no-repeat}

/* jagged edge between banner and content — carved out of the banner itself */
.hero,.hero-standalone{
  -webkit-mask:var(--torn-top) 0 calc(100% + var(--jag)*var(--jag-drop))/100% var(--jag) no-repeat,linear-gradient(#000,#000);
  mask:var(--torn-top) 0 calc(100% + var(--jag)*var(--jag-drop))/100% var(--jag) no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude}
#hdr::after{height:var(--jag);bottom:-1px;background:var(--bg);transform:translateY(calc(var(--jag-drop)*100%))}
/* keep text clear of the carved edge */
.hero,.hero-standalone{padding-bottom:calc(var(--jag) + clamp(2rem,5vw,4rem))}

/* type: one component, two treatments */
.hero-title,.gate h1,.rules-page-hdr h2{text-shadow:none}
:root[data-theme="dark"] .hero-title,:root[data-theme="dark"] .gate h1,:root[data-theme="dark"] .rules-page-hdr h2{text-shadow:0 .03em 0 rgba(0,0,0,.45),0 0 .55em rgba(11,7,8,.6)}
:root[data-theme="light"] .hero-title,:root[data-theme="light"] .gate h1,:root[data-theme="light"] .rules-page-hdr h2{text-shadow:none}
:root[data-theme="light"] .hero-kanji .gk-stamp{-webkit-text-stroke-color:color-mix(in srgb,var(--ink) 38%,transparent)}
:root[data-theme="light"] .hdr-vert{-webkit-text-stroke-color:color-mix(in srgb,var(--ink) 38%,transparent)}
:root[data-theme="light"] .hero-tag,:root[data-theme="light"] .hero-sub,:root[data-theme="light"] .hdr-tag{color:var(--text-dim)}
:root[data-theme="dark"] .hero-tag,:root[data-theme="dark"] .hero-sub{color:rgba(255,244,228,.86);text-shadow:0 1px 10px rgba(11,7,8,.7)}

/* RULES-style ghost splat as the shared page ornament; fixed so it never detaches on scroll */
body[class*="pg-"]:not(.pg-gate)::after,body:has(.gk-top)::after{display:block;content:'';position:fixed;z-index:-1;pointer-events:none;
  width:var(--sw,min(64vw,760px));aspect-ratio:1;right:var(--sx,-10vw);top:var(--sy,14vh);transform:rotate(var(--sr,0deg));
  background:var(--blood);opacity:var(--so,.085);-webkit-mask:var(--splat) center/contain no-repeat;mask:var(--splat) center/contain no-repeat}
:root[data-theme="light"] body::after{opacity:calc(var(--so,.085)*1.05)}
.pg-about{--sx:-12vw;--sy:30vh;--sr:20deg}
.pg-faq{--sx:auto;--sy:22vh;--sr:-12deg;--sw:min(52vw,620px)}
.pg-faq::after{left:-14vw}
.pg-community-guidelines{--sx:-8vw;--sy:8vh;--sr:55deg;--sw:min(58vw,700px)}
.pg-banned-words{--sx:-14vw;--sy:40vh;--sr:-30deg}
.pg-privacy-policy{--sx:-6vw;--sy:50vh;--sr:80deg;--sw:min(48vw,560px)}
.pg-terms-of-service{--sx:auto;--sy:35vh;--sr:10deg}
.pg-terms-of-service::after{left:-12vw}
.pg-disclaimer{--sx:-10vw;--sy:18vh;--sr:-60deg;--sw:min(56vw,680px)}
.pg-contact{--sx:-9vw;--sy:46vh;--sr:35deg;--sw:min(50vw,600px)}
.pg-modmail{--sx:auto;--sy:12vh;--sr:-18deg}
.pg-modmail::after{left:-12vw}
.pg-appeal{--sx:-10vw;--sy:30vh;--sr:65deg;--sw:min(54vw,640px)}
body:has(.gk-top){--sx:-12vw;--sy:34vh;--sr:-45deg}

/* READ ONLINE + info rows: explicit colours so no theme can blank them */
.rc-title{color:var(--text)!important}
.rc:hover .rc-title,.rc:focus-visible .rc-title{color:var(--text)!important}
.rc-sub{color:var(--text-dim)!important}
.rc:hover::after,.rc:focus-visible::after{color:var(--accent)}
/* top bars: no blur slab over the art (it cut the banner with a hard line) */
.topbar,.gk-top{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:0!important;box-shadow:none!important;min-height:0}
:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .gk-top{background:linear-gradient(180deg,rgba(11,7,8,.7),transparent)}
.hero,.hero-standalone{padding-bottom:calc(var(--jag)*.7 + clamp(1.5rem,3vw,2.5rem))}
.doc-layout{padding-top:clamp(1rem,3vw,2.2rem)}
/* logo plate: the legacy inner hairline frame is an unwanted box — drop it for good */
.hdr-plate::before,.hdr-plate::after,.glitch-wrap::before,.glitch-wrap::after{content:none!important;border:0!important}
.hdr-plate{background:none!important;border:0!important;box-shadow:none!important;outline:0}
/* home banner: same box in both themes, proportioned so the lineup art isn't over-cropped */
#hdr{min-height:clamp(520px,calc(100svh - var(--cd-h,0px)),700px)}
:root #hdr::before{background:
  linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) var(--scrim),transparent) 30%,color-mix(in srgb,var(--bg) 12%,transparent) 64%,transparent 82%),
  radial-gradient(circle at 20% 80%,rgba(179,20,28,var(--glow)),transparent 55%)}
#hdr .hdr-art{background-position:68% 24%}
:root[data-theme="light"] #hdr .hdr-art{background-position:center 12%}

/* gallery: empty-folder state is one centred note, not three dashed cells */
#gal-folder-images:has(.gal-folder-empty){display:block!important}
.gal-folder-empty{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;text-align:center;
  padding:clamp(2.5rem,7vw,5rem) 1rem!important;border:0!important;background:none!important;min-height:0!important;grid-column:1/-1;color:var(--text)}
.gal-folder-empty p{margin:0;font:400 1.6rem/1.1 var(--f-display);text-transform:uppercase;color:var(--text)}
.gal-folder-empty .gal-empty-sub{font:400 .95rem/1.5 var(--f-body)!important;text-transform:none!important;color:var(--text-dim)!important}
.gal-folder-empty .gal-empty-icon{margin-bottom:.6rem;opacity:.7}

/* author biography (links page): header row, then text — never side-by-side columns */
.bio-card{display:block!important}
.bio-header{display:flex!important;align-items:center;gap:clamp(1.2rem,3vw,2rem);margin:0 0 1.8rem}
.bio-avatar{flex:none;width:132px!important;height:132px!important;max-width:none!important;aspect-ratio:1!important;position:relative;
  -webkit-mask:var(--brush-s) 0 0/100% 100% no-repeat;mask:var(--brush-s) 0 0/100% 100% no-repeat;background:var(--surface2)}
.bio-avatar img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;filter:grayscale(1) contrast(1.15);-webkit-mask:none;mask:none}
.bio-avatar-fallback{width:100%;height:100%;display:none;place-items:center;font:400 3rem var(--f-jp);color:var(--accent)}
.bio-meta{min-width:0;display:grid;gap:.5rem}
.bio-meta p{margin:0}
.bio-name{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1}
.bio-body{max-width:68ch}
.bio-body p,.bio-body em{color:var(--text-dim)!important}
.bio-body strong{color:var(--text)!important}
.bio-body p::first-letter{float:none;font:inherit;color:inherit;padding:0;margin:0}
.bio-award{display:inline-flex;align-items:center;gap:.5rem;background:none!important;color:var(--accent)!important;border:0;padding:0;box-shadow:none;transform:none;margin-top:1rem}
.bio-avatar{-webkit-mask:none!important;mask:none!important;background:none}
.bio-avatar img{filter:grayscale(1) contrast(1.05)}
.bio-name{color:var(--text)!important}
.gal-folder-empty>*{position:static!important;transform:none!important;margin-left:0!important;margin-right:0!important;max-width:44ch;text-align:center;width:auto}
.bio-header{flex-direction:row!important;text-align:left!important}
.bio-avatar,.bio-avatar img{transform:none!important;box-shadow:none!important;border:0!important;outline:0}
@media(max-width:560px){.bio-avatar{width:96px!important;height:96px!important}.bio-name{font-size:2rem}.bio-meta{gap:.35rem}}
.gal-folder-empty>*{align-self:center!important;translate:none!important;left:auto!important;right:auto!important;inset-inline:auto!important;margin-inline:auto!important;justify-self:center}
.gal-folder-empty{display:block!important}
.gal-folder-empty>*{display:block;margin:.3rem auto!important;max-width:none;width:100%;text-align:center}
.gal-folder-empty .gal-empty-icon{display:flex!important;justify-content:center}
#gal-folder-images:has(.gal-folder-empty){columns:auto!important;column-count:1!important;column-gap:0!important}
.gal-folder-empty{column-count:1!important;columns:auto!important;break-inside:avoid}

/* consequences: escalation by tone (open → warm wash → blood wash), readable in both themes */
.cq-item,.cq-item:nth-child(n){background:none!important;color:var(--text)!important;border:0!important;box-shadow:none!important}
.cq-item:nth-child(2){background:color-mix(in srgb,var(--blood) 8%,transparent)!important}
.cq-item:nth-child(3){background:color-mix(in srgb,var(--blood) 18%,transparent)!important;box-shadow:inset 4px 0 0 var(--blood)!important}
.cq-icon{display:none!important}
.cq-item .cq-title,.cq-item:nth-child(3) .cq-title{color:var(--accent)!important}
.cq-item .cq-body{color:var(--text-dim)!important;text-indent:0!important}
.cq-item .cq-body strong,.cq-item:nth-child(3) .cq-body,.cq-item:nth-child(3) .cq-body strong{color:var(--text)!important}

/* gate (404 / redirects): follows the theme like every other banner */
body.pg-gate{background:var(--bg)!important;color:var(--text)}
body.pg-gate::before{background:
  linear-gradient(90deg,var(--bg) 5%,color-mix(in srgb,var(--bg) 60%,transparent) 45%,transparent 80%),
  linear-gradient(0deg,var(--bg),transparent 50%)}
:root[data-theme="dark"] body.pg-gate{color:#FFF4E4}
/* phones: the art is cropped to a couple of faces, so the wash must cover the whole text block */
@media(max-width:700px){
  .hero::after{background:
    linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 60%,color-mix(in srgb,var(--bg) 30%,transparent) 100%),
    radial-gradient(circle at 15% 90%,rgba(179,20,28,var(--glow)),transparent 55%)}
  :root #hdr::before{background:
    linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 70%,color-mix(in srgb,var(--bg) 20%,transparent) 100%),
    radial-gradient(circle at 20% 80%,rgba(179,20,28,var(--glow)),transparent 55%)}
}
.gate-tape{border:0!important;outline:0!important;box-shadow:none!important;background:none!important}

/* ═══ ONE BUTTON: grey brush + theme text at rest → red brush + cream text on hover/focus/press ═══
   Every variant (.btn, .btn-p, .btn-dc, .btn-sm, Discord buttons) shares this. */
.btn,.btn-p,.btn-dc,.btn-sm,.btn-discord,.ft-disc-btn{color:var(--text)!important;background:none!important;box-shadow:none!important;border:0!important;transform:none!important;transition:color .25s!important}
.btn::before,.btn-p::before,.btn-dc::before,.btn-sm::before,.btn-discord::before,.ft-disc-btn::before,.pg-appeal .btn-discord::before{
  content:'';position:absolute;inset:-.1em -.2em;z-index:-1;border:0;box-shadow:none;transform:none;
  -webkit-mask:var(--brush-s) 0 0/100% 100% no-repeat;mask:var(--brush-s) 0 0/100% 100% no-repeat;
  background:var(--text)!important;opacity:.14!important;transition:opacity .25s,background-color .25s}
.btn:hover,.btn-p:hover,.btn-dc:hover,.btn-sm:hover,.btn-discord:hover,.ft-disc-btn:hover,
.btn:focus-visible,.btn-p:focus-visible,.btn-dc:focus-visible,.btn-sm:focus-visible,.btn-discord:focus-visible,.ft-disc-btn:focus-visible,
.btn:active,.btn-p:active,.btn-dc:active,.btn-sm:active,.btn-discord:active,.ft-disc-btn:active{color:#FFF4E4!important}
.btn:hover::before,.btn-p:hover::before,.btn-dc:hover::before,.btn-sm:hover::before,.btn-discord:hover::before,.ft-disc-btn:hover::before,.pg-appeal .btn-discord:hover::before,
.btn:focus-visible::before,.btn-p:focus-visible::before,.btn-dc:focus-visible::before,.btn-sm:focus-visible::before,.btn-discord:focus-visible::before,.ft-disc-btn:focus-visible::before{background:var(--blood)!important;opacity:1!important}
.btn:active::before,.btn-p:active::before,.btn-dc:active::before,.btn-sm:active::before,.btn-discord:active::before,.ft-disc-btn:active::before{background:var(--blood-deep)!important;opacity:1!important}
.hero .btn,.gate .btn,#hdr .hdr-cta .btn,.doc-cta .btn,.cta-block .btn,.au-links .btn,.qlinks .btn{color:var(--text)!important}
.hero .btn:hover,.gate .btn:hover,#hdr .hdr-cta .btn:hover,.doc-cta .btn:hover,.cta-block .btn:hover,.au-links .btn:hover,.qlinks .btn:hover{color:#FFF4E4!important}

/* ═══ FOOTER + SIDE LINKS = the main-tab language ═══
   Rest: plain type. Hover / focus / current page: the same red dry-brush that backs the active rail tab. */
#ft li a,.foot-links a,.side-nav a,.side-links a{position:relative;isolation:isolate;display:inline-block;padding:.34rem .8rem!important;margin-left:-.8rem;
  transform:none!important;box-shadow:none!important;background:none!important;border:0!important;transition:color .2s}
#ft li a::after,.foot-links a::after,.side-nav a::after,.side-links a::after,.foot-bottom a::after{content:'';position:absolute;inset:-.05em -.15em;z-index:-1;background:var(--blood);opacity:0;
  -webkit-mask:var(--brush-s) 0 0/100% 100% no-repeat;mask:var(--brush-s) 0 0/100% 100% no-repeat;transition:opacity .2s;width:auto;height:auto;transform:none}
#ft li a:hover,#ft li a:focus-visible,.foot-links a:hover,.foot-links a:focus-visible,.foot-bottom a:hover,.foot-bottom a:focus-visible,
.side-nav a:hover,.side-nav a:focus-visible,.side-nav a.active,.side-nav a[aria-current],.side-links a:hover,.side-links a:focus-visible,.side-links a.active,.side-links a[aria-current]{color:#FFF4E4!important;padding-left:.8rem!important;outline:0}
#ft li a:hover::after,#ft li a:focus-visible::after,.foot-links a:hover::after,.foot-links a:focus-visible::after,.foot-bottom a:hover::after,.foot-bottom a:focus-visible::after,
.side-nav a:hover::after,.side-nav a:focus-visible::after,.side-nav a.active::after,.side-nav a[aria-current]::after,.side-links a:hover::after,.side-links a:focus-visible::after,.side-links a.active::after,.side-links a[aria-current]::after{opacity:1}
.side-nav a::before{position:relative;color:var(--accent)}
.side-nav a:hover::before,.side-nav a.active::before,.side-nav a[aria-current]::before{color:#FFF4E4}
.foot-bottom a,#ft .ft-bottom a{position:relative;isolation:isolate;text-decoration:none;padding:0 .15em;margin:0 -.15em;color:#E6DAC6;transition:color .2s}
.foot-bottom a:hover,.foot-bottom a:focus-visible{color:#FFF4E4}
#ft li a:hover,.foot-links a:hover{padding-left:.8rem!important}
.side-nav a.active,.side-links a.active{box-shadow:none!important}

/* cards that keep a left accent bar: give the text real room (padding was zeroed by the flattening layer) */
.cat-card,.pg-appeal .type-card{padding:.4rem 0 .5rem 1.5rem!important}
.cat-card::before,.pg-appeal .type-card::before{width:3px!important;background:var(--blood)!important}
.pg-appeal .type-card:not(.selected)::before{opacity:.45}

/* light theme: no text shadows anywhere (legacy hard offset shadows made type look doubled/blurry) */
:root[data-theme="light"] *,:root[data-theme="light"] *::before,:root[data-theme="light"] *::after{text-shadow:none!important}

/* DMCA note: same family, quieter */
.dmca-box{background:color-mix(in srgb,var(--accent) 7%,transparent)!important;color:var(--text)!important;border:0!important;border-left:3px solid var(--blood)!important;box-shadow:none!important;padding:1rem 1.3rem 1rem 1.5rem!important}
.dmca-box p,.dmca-box strong{color:var(--text)!important}
.db-label{background:none!important;color:var(--accent)!important;clip-path:none!important;transform:none!important;margin:0 0 .5rem!important;padding:0!important;display:block}

/* contrast: tokens instead of hard-coded legacy greys */
.mock-field span,.mock-ticket-body{color:var(--text)!important}
.mock-field b{color:var(--accent)!important}
.mock-caption{color:var(--text-dim)!important}
.grp-read .card .handle,.card.feat .handle,.card .handle{color:var(--text-dim)!important}

/* contrast pass (audit-driven) */
.au-info h3{color:var(--text)!important}
.au-jp{color:var(--accent)!important;text-shadow:none}
.hero-back{color:var(--text-dim)!important}
:root[data-theme="light"] .hero-back{color:var(--text)!important}
#ft .ft-disc-btn,.foot .btn,.foot .ft-disc-btn{color:#F1E7D6!important}
#ft .ft-disc-btn:hover,.foot .btn:hover{color:#FFF4E4!important}
#cd-bar .cd-t{opacity:1!important;color:#FFE3B0!important}
.gal-folder-count{color:var(--text)!important;opacity:.9}
.sk-num.s2,.sk-num{color:#FFF4E4!important}
.pill{color:#FFF4E4}

/* ═══ ROUND 9 ═══ palette direction: light = red-led, dark = gold-led ═══ */
:root[data-theme="dark"]{--nav-accent:#D9A83C;--nav-accent-soft:#E8D3A0;--nav-ink:#F1E7D6;--glass:rgba(16,11,12,.62)}
:root[data-theme="light"]{--nav-accent:#B3141C;--nav-accent-soft:#8A1018;--nav-ink:#1B1211;--glass:rgba(239,229,210,.7)}

/* 11 · glass top bars (docs/links) — separated from content, still light */
.topbar,.gk-top{backdrop-filter:blur(10px) saturate(1.15)!important;-webkit-backdrop-filter:blur(10px) saturate(1.15)!important;background:var(--glass)!important;border-bottom:1px solid color-mix(in srgb,var(--nav-accent) 35%,transparent)!important;z-index:600}
.topbar-current,.gk-top-cur{color:var(--nav-accent)!important}
.topbar a,.gk-top a,.theme-btn{color:var(--nav-ink)!important}
:root[data-theme="dark"] .topbar-current{background:var(--nav-accent)!important;color:#1B1211!important}
:root[data-theme="dark"] .topbar-current *{color:#1B1211!important}

/* 4 · rail: tonal per theme */
:root[data-theme="light"] #nav{background:#8F0F16}
:root[data-theme="light"] #nav::after{background:#0B0708}
:root[data-theme="dark"] #nav{background:#120C0D;box-shadow:inset -1px 0 0 color-mix(in srgb,var(--nav-accent) 30%,transparent)}
:root[data-theme="dark"] #nav::after{background:var(--nav-accent)}
#nav{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#nav .nav-tabs li>a{color:color-mix(in srgb,var(--nav-ink) 70%,transparent)}
:root[data-theme="light"] #nav .nav-tabs li>a{color:rgba(255,244,228,.75)}
:root[data-theme="light"] #nav .nav-tabs li>a.active::after{background:#0B0708}
:root[data-theme="dark"] #nav .nav-tabs li>a.active::after{background:var(--nav-accent)}
:root[data-theme="dark"] #nav .nav-tabs li>a.active{color:#1B1211}
#nav .nav-tabs li>a:hover{color:#fff;text-shadow:none}
:root[data-theme="dark"] #nav .nav-tabs li>a:hover{color:var(--nav-accent-soft)}

/* 5 · manga sub-nav */
.sn-btn{color:var(--text-dim)!important}
.sn-btn:hover{color:var(--nav-accent)!important}
.sn-btn.active{color:var(--text)!important}
.sn-btn.active::before,.sn-btn::after{background:var(--nav-accent)!important}
.sn-btn:focus-visible{outline:2px solid var(--nav-accent);outline-offset:4px}

/* mobile drawer: readable sub-list, themed header */
.mob-drawer{background:#0F0A0B!important}
:root[data-theme="light"] .mob-drawer{background:#7E0D14!important}
.mob-drawer-hdr{background:none!important}
.mob-drawer-title{color:var(--nav-accent-soft)!important;background:none!important}
:root[data-theme="light"] .mob-drawer-title{color:#FFE3B0!important}
.mob-drawer-close{background:none!important;border:2px solid rgba(255,244,228,.5)!important;color:#fff!important}
.mob-sub-list{background:none!important;border:0!important;box-shadow:none!important}
.mob-sub-item{background:none!important;border:0!important;color:rgba(255,244,228,.85)!important;font-size:1.1rem;padding:.55rem .2rem}
.mob-sub-item.active,.mob-sub-item:hover{color:var(--nav-accent-soft)!important;box-shadow:inset 0 -3px 0 var(--nav-accent)}
.mob-nav-item .mob-nav-label{color:rgba(255,244,228,.72)!important}
.mob-nav-item.active .mob-nav-label{color:#fff!important}
.mob-nav-item.active .mob-nav-label::after{background:var(--nav-accent)!important}
.mob-nav-item::after{color:var(--nav-accent-soft)!important}
:root[data-theme="light"] .mob-nav-item::after{color:#FFE3B0!important}

/* 1 · footer: jagged edge must read in both themes (dark footer = deep wine, light = ink) */
:root[data-theme="dark"] #ft,:root[data-theme="dark"] .foot{background:#2A1014!important}
:root[data-theme="dark"] #ft::after,:root[data-theme="dark"] .foot::after{color:var(--nav-accent);opacity:.1}
:root[data-theme="dark"] #ft .ft-col-title,:root[data-theme="dark"] .foot-col-title{color:var(--nav-accent)}
:root[data-theme="light"] #ft,:root[data-theme="light"] .foot{background:#0B0708!important}
.foot{margin-top:0}
.foot::before{display:block!important;content:'';position:absolute;left:0;right:0;top:-1px;height:clamp(40px,6vw,80px);background:var(--bg);-webkit-mask:var(--torn-bottom) 0 0/100% 100% no-repeat;mask:var(--torn-bottom) 0 0/100% 100% no-repeat;z-index:0}
.foot{padding-top:calc(clamp(40px,6vw,80px) + 3rem)!important}

/* 2 · cover thumbnail: same feathered fade as the character art */
#about::before{-webkit-mask:radial-gradient(ellipse 70% 70% at 55% 45%,#000 45%,transparent 100%)!important;mask:radial-gradient(ellipse 70% 70% at 55% 45%,#000 45%,transparent 100%)!important}
@media(max-width:999px){#about .about-cover,#about .cover-img,.about-cover img{-webkit-mask:linear-gradient(180deg,#000 55%,transparent);mask:linear-gradient(180deg,#000 55%,transparent)}}

/* 3 · READ ONLINE bold underline, restored */
.rc .rc-title{background:linear-gradient(var(--nav-accent),var(--nav-accent)) 0 100%/0 .13em no-repeat!important;padding-bottom:.08em;transition:background-size .35s var(--ease-out)}
.rc:hover .rc-title,.rc:focus-visible .rc-title{background-size:100% .13em!important}
.rc:focus-visible{outline:2px solid var(--nav-accent);outline-offset:6px}

/* 6 · shadows hugging the lettering */
.hero-title,.gate h1,h1,h2,h3,.sec-title,.ov-title,.page-title,.dash-title,[class*="-title"]{text-shadow:none}
:root[data-theme="dark"] .logo-text,:root[data-theme="dark"] [class*="glitch"],:root[data-theme="dark"] .dash-h1,:root[data-theme="dark"] .pg-title{text-shadow:1px 1px 0 rgba(179,20,28,.8)!important}
body h1,body .page-hdr h1{text-shadow:2px 2px 0 color-mix(in srgb,var(--blood) 70%,transparent)}
:root[data-theme="light"] body h1{text-shadow:none!important}
.hero-title,.gate h1,.sec-hdr h2{text-shadow:none!important}

/* 7 · policy stamps + related policies */
.pg-terms-of-service .doc-cta::after{content:none}
.pg-terms-of-service .doc-layout,.pg-privacy-policy .doc-layout,.pg-disclaimer .doc-layout{--stamp:'承認'}
.pg-privacy-policy .doc-layout{--stamp:'保護'}
.pg-disclaimer .doc-layout{--stamp:'免責'}
.pg-terms-of-service .doc-layout>main,.pg-privacy-policy .doc-layout>main,.pg-disclaimer .doc-layout>main{position:relative}
.doc-meta{position:relative}
.pg-terms-of-service .doc-meta::after,.pg-privacy-policy .doc-meta::after,.pg-disclaimer .doc-meta::after{content:var(--stamp);position:absolute;right:0;top:-.4rem;display:grid;place-items:center;
  width:84px;height:84px;border-radius:50%;font:400 1.7rem/1 var(--f-jp);color:var(--blood);border:3px double var(--blood);outline:2px solid var(--blood);outline-offset:-9px;transform:rotate(-12deg);opacity:.85;
  -webkit-mask:var(--grain-mask,none);letter-spacing:0;text-align:center;pointer-events:none;background:color-mix(in srgb,var(--blood) 6%,transparent)}
.pg-privacy-policy .doc-meta::after{transform:rotate(8deg)}
.pg-disclaimer .doc-meta::after{transform:rotate(-5deg);border-radius:6px}
:root[data-theme="dark"] .doc-meta::after{color:var(--nav-accent)!important;border-color:var(--nav-accent)!important;outline-color:var(--nav-accent)!important;background:color-mix(in srgb,var(--nav-accent) 8%,transparent)!important}
@media(max-width:620px){.doc-meta::after{width:60px!important;height:60px!important;font-size:1.2rem!important;top:0}}
.rel-policies{margin:4rem 0 1rem}
.rp-h{font:700 .78rem/1 var(--f-label);letter-spacing:.34em;text-transform:uppercase;color:var(--nav-accent);margin:0 0 1rem}
.rp-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0}
.rp-item{position:relative;display:grid;gap:.2rem;padding:1rem 1.1rem 1.1rem 0;color:var(--text)!important;text-decoration:none!important;border-top:2px solid color-mix(in srgb,var(--text) 18%,transparent);transition:color .2s,border-color .2s}
.rp-n{font:400 .95rem var(--f-display);color:var(--nav-accent);letter-spacing:.08em}
.rp-t{font:400 1.45rem/1.1 var(--f-display);text-transform:uppercase}
.rp-s{font:500 .85rem var(--f-body);color:var(--text-dim)}
.rp-item:hover,.rp-item:focus-visible{border-top-color:var(--nav-accent);color:var(--nav-accent)!important;outline:0}
.rp-item[aria-current]{border-top:4px solid var(--nav-accent);pointer-events:none}
.rp-item[aria-current] .rp-s::after{content:' · You are here'}

/* 9 · back to top: one control everywhere */
.btt,#back-to-top{position:fixed;right:1.1rem;bottom:1.2rem;z-index:700;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:0;cursor:pointer;
  background:var(--blood);color:#FFF4E4;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s,background-color .25s,transform .25s}
.btt.visible,#back-to-top.visible{opacity:1;transform:none;pointer-events:auto}
.btt:hover,.btt:focus-visible{background:var(--blood-deep);outline:2px solid var(--nav-accent);outline-offset:3px}
:root[data-theme="dark"] .btt,:root[data-theme="dark"] #back-to-top{background:var(--nav-accent);color:#1B1211}
:root[data-theme="dark"] .btt:hover{background:var(--nav-accent-soft)}
body .contents-btn,.toc-fab{bottom:5rem}

/* banned-words chips must never run under the bar; bar sits above content */
.topbar,.gk-top{position:sticky;top:0}
body.pg-links .gk-top,body:has(.gk-top) .gk-top{position:fixed}
.hero{margin-top:0}

/* dashboard/admin: tokens, not offset red echoes */
.dash-h1,.ov-title,h1.pg-title{text-shadow:1px 1px 0 color-mix(in srgb,var(--blood) 70%,transparent)!important}

/* links page now uses the standard bar + footer; keep its layout from boxing them in */
body.pg-links .foot,body:has(.links) .foot{grid-column:auto;margin:0;max-width:none}
body:has(.links) .topbar{position:fixed;left:0;right:0}
body:has(.links) .page{padding-top:3.6rem}
#yt-scrim{background:color-mix(in srgb,var(--bg) 82%,transparent)!important}
body:has(.links) .foot{position:relative;z-index:2}
body:has(.links) #yt-ctrl{bottom:1.2rem;right:4.6rem}
.topbar svg.tb-icon{width:18px;height:18px}.topbar-home svg{width:18px;height:18px}
.topbar-home{display:inline-flex;align-items:center;gap:.6rem}
body:has(.links) .foot{text-align:left!important;padding-left:var(--pad)!important;padding-right:var(--pad)!important}
body:has(.links) .foot-bottom{text-align:left}
body:has(.links) .foot-copy{margin:0;max-width:64ch}

/* ═══ ROUND 10 ═══ */
/* 1 · footer edge: page colour → jagged mask → footer. No strip, no line. */
.foot,#ft{border:0!important;box-shadow:none!important;margin-top:0!important}
.foot::before,#ft::before{content:''!important;display:block!important;position:absolute;left:0;right:0;top:-1px;height:var(--jag-h,clamp(46px,7vw,92px));
  background:var(--bg)!important;background-image:none!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important;transform:none!important;z-index:0;
  -webkit-mask:var(--torn-bottom) 0 0/100% 100% no-repeat!important;mask:var(--torn-bottom) 0 0/100% 100% no-repeat!important}
.foot{padding-top:calc(var(--jag-h,clamp(46px,7vw,92px)) + 3rem)!important}
.doc-layout,.page{margin-bottom:0!important;padding-bottom:0}
.doc-layout{padding-bottom:clamp(3rem,6vw,5rem)}

/* 2 · floating desktop contents */
@media(min-width:1100px){
  .doc-layout{align-items:start}
  .doc-side{align-self:start;position:sticky;top:5.2rem;max-height:calc(100vh - 6.4rem);overflow:auto;scrollbar-width:thin;z-index:5}
  .doc-side-inner{position:static;top:auto}
  .doc-side .side-card:first-child{padding:1.1rem 1.2rem;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-left:3px solid var(--nav-accent)}
}
@media(max-width:1099px){.doc-side{position:static;max-height:none}}
html,body{overflow-x:clip}
.page,.doc-layout{overflow:visible!important}

/* 3 · stamps: above the notice, never clipped */
.doc-meta{padding-right:104px;min-height:92px}
.pg-terms-of-service .doc-meta::after,.pg-privacy-policy .doc-meta::after,.pg-disclaimer .doc-meta::after{z-index:6;top:0;right:0}
@media(max-width:620px){.doc-meta{padding-right:72px;min-height:70px}}

/* 5 · profile menu: rail wrapper clipped the dropdown */
#nav .nav-in,#nav .nav-ctrl,#nav #nav-ctrl,#nav #dc-zone{overflow:visible!important}
#dc-user-wrap{position:relative;z-index:10}
.dc-dd{z-index:900!important;background:var(--ink)!important;color:#F1E7D6;min-width:190px}
.dc-btn{cursor:pointer}

/* ═══ ROUND 11 ═══ */
/* /links: the video sat behind a translucent scrim, so the jagged edge and hero showed a grey band. Video keeps playing audio; the page is solid like every other page. */
#yt-scrim{background:var(--bg)!important;opacity:1!important}
body:has(.links) .page{padding-top:0!important}
body:has(.links) .hero{margin-top:0}

/* ── mobile: designed, not shrunk ── */
@media(max-width:699px){
  :root{--pad:1.15rem}
  body{font-size:16px;line-height:1.65}
  /* headings */
  .hero-title,.gate h1{font-size:clamp(2.3rem,12vw,3.4rem)!important;line-height:.95}
  .hero-kanji .gk-stamp{font-size:2.2rem!important}
  .hero-tag,.hero-sub{font-size:.8rem!important;letter-spacing:.18em!important;line-height:1.6}
  .sec-hdr .en,.sec-title,.rules-page-hdr h2{font-size:clamp(1.9rem,9vw,2.6rem)!important;line-height:1}
  .sec-hdr .jp{font-size:.95rem!important;letter-spacing:.3em!important;margin-bottom:1rem}
  .sec-num{font-size:.9rem}
  h3,.ch-info h3,.sc-name{font-size:1.45rem}
  .au-info h3{font-size:2.3rem!important}
  .rc-title{font-size:1.8rem!important}.rc-sub{font-size:.72rem;letter-spacing:.16em}
  .gate-code{font-size:clamp(5rem,26vw,8rem)!important}
  p,li{line-height:1.7}
  /* banners: one compact height in both themes */
  .hero,.hero-standalone{min-height:0!important;padding-top:5.2rem!important;padding-bottom:calc(var(--jag) + 1.2rem)!important}
  #hdr{min-height:min(78svh,560px)!important;padding-bottom:3.5rem}
  #hdr .glitch-wrap{width:min(78vw,300px)!important}
  body:not([data-tab="about"]) #hdr{min-height:200px!important}
  .hero::before,#hdr .hdr-art{background-position:62% 20%}
  :root{--jag:clamp(34px,9vw,52px)}
  /* sections */
  section,.sec,.doc-layout{padding-top:clamp(2.2rem,8vw,3.2rem)}
  .doc-layout{padding-left:var(--pad);padding-right:var(--pad);gap:1.6rem}
  .doc-section .sec-body{font-size:.98rem}
  .ch-grid{gap:1.6rem}
  .ch{gap:1rem!important}
  .au-img,.cover-img{max-width:min(70vw,260px)!important}
  #about::before{width:100vw;opacity:.7}
  /* controls */
  .btn,.btn-p,.btn-sm{min-height:44px;padding:.6rem 1.2rem;font-size:1rem}
  .sn-btn{font-size:1.25rem}
  .rp-t{font-size:1.2rem}.rp-row{grid-template-columns:1fr}
  .rp-item{padding:.8rem 0}
  .mob-nav-item .mob-nav-label{font-size:clamp(2.4rem,13vw,3.6rem)!important}
  .mob-menu-btn{width:46px;height:46px}
  .btt,#back-to-top{width:44px;height:44px;right:.8rem;bottom:.9rem}
  /* footer */
  .foot,#ft{padding-left:var(--pad)!important;padding-right:var(--pad)!important}
  .foot-grid,#ft .ft-grid{gap:1.6rem 1rem!important;grid-template-columns:1fr 1fr!important}
  .foot-grid>div:first-child,#ft .ft-grid>div:first-child{grid-column:1/-1}
  .foot-brand,.ft-col-brand{font-size:1.6rem}
  #ft::after,.foot::after{font-size:min(55vw,12rem)}
  /* stamps */
  .doc-meta::after{width:56px!important;height:56px!important;font-size:1.1rem!important}
  .topbar,.gk-top{padding:.6rem var(--pad)}
  .topbar-current{font-size:.85rem}
}
@media(max-width:360px){
  :root{--pad:1rem}
  .hero-title{font-size:2.1rem!important}
  .ch{grid-template-columns:84px minmax(0,1fr)!important}
  .ch-img{width:84px!important;height:84px!important}
  .foot-grid,#ft .ft-grid{grid-template-columns:1fr!important}
}
@media(max-width:699px){
  .topbar-current,.gk-top-cur{max-width:none!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap;font-size:.72rem!important;letter-spacing:.08em!important;padding:.25rem .6rem!important}
  .topbar-home{font-size:.8rem!important;letter-spacing:.1em!important}
  .topbar-left{gap:.6rem!important;min-width:0}
  .theme-btn .tb-label{display:none}
  .hero{align-items:flex-end!important}
  .hero::after{background:linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 55%,color-mix(in srgb,var(--bg) 35%,transparent) 100%),radial-gradient(circle at 15% 90%,rgba(179,20,28,var(--glow)),transparent 55%)!important}
  .hero-tape,.hero-kick .gk-tape{font-size:.85rem!important;letter-spacing:.3em!important}
  .hero{padding-top:9rem!important}
}