@import url("/manga0/cursor.css?v=2");

:root {
  --void: #02060d;
  --ink: #06182e;
  --deep: #082844;
  --blue: #0c5f80;
  --cyan: #61e6ee;
  --ice: #d7f9f6;
  --paper: #eef4ed;
  --grey: #8aa4aa;
  --red: #ff3b58;
  --yellow: #edff66;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 18% 5%, rgba(17,108,135,.25), transparent 31rem),
    linear-gradient(155deg, #02050b, #07111c 48%, #02060c);
  font-family: "IBM Plex Mono", monospace;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  z-index: 80;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(124,235,241,.025) 3px 4px),
    radial-gradient(circle at center, transparent 57%, rgba(0,0,0,.42));
  mix-blend-mode: screen;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font: inherit; }

.manga-shell { width: min(1340px, calc(100% - 34px)); margin: 0 auto; }

.signal-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 25px;
  margin: 8px 0;
  padding: 0 9px;
  overflow: hidden;
  color: var(--cyan);
  border: 1px solid rgba(97,230,238,.42);
  background: rgba(3,13,25,.88);
  font: 700 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: .15em;
  white-space: nowrap;
}
.signal-strip span:first-child { overflow: hidden; text-overflow: ellipsis; }
.signal-strip b { color: var(--red); animation: signalBlink 1.1s steps(2,end) infinite; }

.manga-header {
  position: sticky;
  z-index: 60;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  border: 2px solid rgba(97,230,238,.48);
  background: rgba(3,9,18,.91);
  box-shadow: 0 10px 28px rgba(0,0,0,.36);
  backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; align-self: stretch; gap: 10px; min-width: 250px; padding: 9px 15px; background: var(--ice); color: var(--ink); }
.brand__mark { display: grid; width: 40px; height: 40px; place-items: center; border: 3px solid var(--ink); border-radius: 50%; font: 900 23px/1 "Bowlby One SC", sans-serif; transform: rotate(-8deg); }
.brand strong { display: block; font: 900 14px/1 "Noto Sans JP", sans-serif; letter-spacing: .09em; }
.brand small { display: block; margin-top: 5px; color: var(--blue); font: 700 8px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; }

.manga-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; padding: 9px 12px; }
.manga-nav a { padding: 7px 9px; color: var(--grey); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.035); font: 700 9px/1 "IBM Plex Mono", monospace; text-transform: uppercase; transition: .16s ease; }
.manga-nav a:hover,.manga-nav a:focus-visible,.manga-nav a.active { color: var(--void); border-color: var(--cyan); background: var(--cyan); outline: 0; transform: translateY(-2px); }

.manga-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 280px;
  min-height: 610px;
  margin-top: 9px;
  overflow: hidden;
  border: 2px solid rgba(97,230,238,.5);
  background: var(--void);
  isolation: isolate;
}

.manga-hero__world { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.32) contrast(1.25) brightness(.39) hue-rotate(155deg); transform: scale(1.02); }
.manga-hero::before { content: ""; position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgba(2,7,14,.98) 0%, rgba(3,16,28,.82) 42%, rgba(3,19,34,.32) 77%, rgba(2,8,15,.76)), linear-gradient(0deg, #02060d 0%, transparent 57%); }
.manga-hero::after { content: ""; position: absolute; z-index: 8; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(104,229,236,.055) 3px 4px); opacity: .7; }

.hero-main { position: relative; z-index: 4; display: flex; flex-direction: column; justify-content: end; min-width: 0; padding: clamp(32px,5vw,72px); }
.hero-main__logo { width: min(570px,68vw); margin: 0 0 5px -20px; filter: invert(1) sepia(.1) saturate(.2) drop-shadow(10px 12px 0 rgba(0,0,0,.5)); mix-blend-mode: screen; }
.hero-main h1 { max-width: 840px; margin: 0; color: var(--paper); font: 400 clamp(45px,8vw,105px)/.79 "Bowlby One SC", sans-serif; letter-spacing: -.045em; text-transform: uppercase; text-shadow: -4px 0 rgba(255,59,88,.58), 4px 0 rgba(97,230,238,.45), 0 15px 40px #000; }
.hero-main h1 span { display: block; margin-top: 17px; color: var(--cyan); font: 900 clamp(15px,2.1vw,28px)/1 "IBM Plex Mono", monospace; letter-spacing: .05em; }
.hero-main__copy { max-width: 620px; margin: 22px 0 0; padding: 11px 13px; color: #b6d1d4; border-left: 4px solid var(--red); background: rgba(2,8,16,.64); font: 600 10px/1.65 "IBM Plex Mono", monospace; }
.hero-main__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.hero-main__tags span { padding: 5px 8px; color: var(--void); border: 1px solid var(--void); background: var(--yellow); box-shadow: 3px 3px 0 var(--red); font: 800 8px/1 "IBM Plex Mono", monospace; transform: skewX(-7deg); }

.hero-character { position: absolute; z-index: 3; right: 14%; bottom: -7%; width: min(49vw,570px); max-height: 105%; object-fit: contain; object-position: right bottom; opacity: .77; filter: saturate(.66) contrast(1.16) drop-shadow(-16px 0 24px rgba(4,81,110,.34)); mix-blend-mode: screen; }

.hero-side { position: relative; z-index: 9; display: flex; flex-direction: column; gap: 9px; padding: 13px; border-left: 2px solid rgba(97,230,238,.35); background: rgba(2,9,17,.68); }
.hero-side__screen { position: relative; min-height: 185px; overflow: hidden; border: 1px solid var(--cyan); background: #031724; }
.hero-side__screen img { display: block; width: 100%; height: 185px; object-fit: cover; filter: saturate(.7) contrast(1.17) brightness(.8); }
.hero-side__screen::after { content: "CH.09 / WIRED"; position: absolute; right: 7px; bottom: 7px; padding: 3px 5px; color: var(--cyan); background: rgba(0,0,0,.74); font: 700 7px/1 "IBM Plex Mono", monospace; }
.hero-side__box { padding: 12px; color: var(--grey); border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.035); font: 600 9px/1.55 "IBM Plex Mono", monospace; }
.hero-side__box b { display: block; margin-bottom: 7px; color: var(--red); font-size: 10px; letter-spacing: .12em; }
.hero-side__city { position: relative; flex: 1; min-height: 170px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); }
.hero-side__city img { width: 100%; height: 100%; object-fit: cover; filter: invert(.92) sepia(.3) hue-rotate(145deg) saturate(.7) brightness(.62); }
.hero-side__city span { position: absolute; inset: auto 7px 7px; color: var(--yellow); font: 700 7px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; }

.archive-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 10px 0 0; padding: 10px 12px; color: var(--ink); border: 2px solid var(--cyan); background: var(--ice); box-shadow: 6px 6px 0 var(--blue); }
.archive-bar__back { padding: 8px 10px; color: var(--paper); background: var(--ink); font: 800 9px/1 "IBM Plex Mono", monospace; }
.archive-bar__back:hover { background: var(--red); }
.archive-bar p { margin: 0; overflow: hidden; font: 800 9px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-overflow: ellipsis; white-space: nowrap; }
.archive-bar strong { color: var(--red); font: 900 10px/1 "IBM Plex Mono", monospace; }

.manga-content { position: relative; margin-top: 28px; padding: 24px; border: 1px solid rgba(97,230,238,.25); background: linear-gradient(145deg, rgba(10,23,37,.95), rgba(3,9,16,.96)); box-shadow: 10px 10px 0 rgba(8,73,97,.28); }
.manga-content::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .025; background: url("assets/manga-ui/panel-wall-wide.png") center/cover; mix-blend-mode: screen; }

.collection-section { position: relative; z-index: 2; }
.collection-section + .collection-section { margin-top: 48px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; border-bottom: 2px solid var(--cyan); }
.section-head h2 { position: relative; margin: 0 0 -2px; padding: 8px 16px 9px 46px; color: var(--void); background: var(--cyan); font: 900 clamp(23px,3vw,40px)/.92 "Noto Sans JP", sans-serif; letter-spacing: -.04em; clip-path: polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%); }
.section-head h2::before { content: attr(data-no); position: absolute; left: 12px; top: 50%; color: var(--red); font: 900 13px/1 "IBM Plex Mono", monospace; transform: translateY(-50%) rotate(-8deg); }
.section-head p { margin: 0 0 7px; color: var(--grey); font: 700 8px/1.3 "IBM Plex Mono", monospace; letter-spacing: .12em; text-align: right; }

.card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; counter-reset: manga-card; }
.card-link { display: block; min-width: 0; color: inherit; }
.card {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(151,231,233,.32);
  background: rgba(3,11,20,.94);
  box-shadow: 7px 7px 0 rgba(9,91,118,.23);
  transition: transform .2s ease, border-color .2s ease;
}
.card::before { content: "0" counter(manga-card); counter-increment: manga-card; position: absolute; z-index: 5; top: 9px; left: 9px; min-width: 27px; padding: 5px; color: var(--void); border: 1px solid var(--void); background: var(--yellow); box-shadow: 3px 3px 0 var(--red); font: 900 9px/1 "IBM Plex Mono", monospace; text-align: center; }
.card::after { content: "READ ↗"; position: absolute; z-index: 5; right: 9px; bottom: 9px; color: var(--cyan); font: 800 8px/1 "IBM Plex Mono", monospace; letter-spacing: .09em; opacity: 0; transform: translateX(8px); transition: .2s ease; }
.card-link:nth-child(2) .card { transform: translateY(12px); }
.card-link:nth-child(3) .card { transform: translateY(-5px); }
.card-link:hover .card,.card-link:focus-visible .card { border-color: var(--cyan); transform: translate(-3px,-5px) rotate(-.6deg); outline: 0; }
.card-link:hover .card::after,.card-link:focus-visible .card::after { opacity: 1; transform: translateX(0); }
.card-img { display: block; width: 100%; height: 235px; object-fit: cover; border-bottom: 1px solid rgba(97,230,238,.32); filter: grayscale(.7) saturate(.55) contrast(1.2) brightness(.78); transition: filter .24s ease, transform .24s ease; }
.card-link:hover .card-img { filter: grayscale(.12) saturate(.9) contrast(1.12) brightness(.9); transform: scale(1.025); }
.genre-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 23px; padding: 10px 12px 0; }
.genre-tag { padding: 4px 6px; color: var(--void); background: var(--cyan); font: 800 7px/1 "IBM Plex Mono", monospace; text-transform: uppercase; transform: skewX(-8deg); }
.genre-tag:nth-child(even) { color: var(--paper); background: var(--red); }
.card h3 { min-height: 52px; margin: 10px 12px 5px; padding-right: 12px; color: var(--paper); font: 900 clamp(17px,2vw,25px)/1.08 "Noto Sans JP", sans-serif; letter-spacing: -.035em; }
.card-meta { min-height: 45px; padding: 0 66px 14px 12px; color: var(--grey); font: 600 8px/1.5 "IBM Plex Mono", monospace; }

.page-switcher { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 44px 0 12px; }
.page-switcher a,.page-switcher span { display: grid; min-width: 40px; height: 38px; place-items: center; color: var(--cyan); border: 1px solid rgba(97,230,238,.45); background: rgba(7,29,44,.7); font: 900 10px/1 "IBM Plex Mono", monospace; }
.page-switcher a:hover,.page-switcher a.active { color: var(--void); background: var(--cyan); box-shadow: 4px 4px 0 var(--red); transform: translate(-2px,-2px); }
.page-switcher span { border-style: dashed; color: var(--grey); }

.manga-footer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; margin: 24px 0 34px; padding: 22px; border-top: 1px solid rgba(97,230,238,.35); background: rgba(3,9,17,.78); }
.manga-footer img { width: 240px; filter: invert(1); opacity: .8; }
.manga-footer p { margin: 6px 0 0; color: var(--grey); font: 600 8px/1.5 "IBM Plex Mono", monospace; }
.manga-footer__code { color: var(--cyan); font: 700 8px/1.5 "IBM Plex Mono", monospace; text-align: right; }

@keyframes signalBlink { 50% { opacity: .25; } }

@media (max-width: 980px) {
  .manga-header { align-items: stretch; flex-direction: column; gap: 0; }
  .brand { min-width: 0; }
  .manga-nav { justify-content: flex-start; }
  .manga-hero { grid-template-columns: 1fr 220px; min-height: 560px; }
  .hero-main { padding: 38px; }
  .hero-character { right: 9%; width: 58vw; }
  .card-img { height: 210px; }
}

@media (max-width: 750px) {
  .manga-shell { width: calc(100% - 18px); }
  .manga-header { position: relative; }
  .manga-nav { flex-wrap: nowrap; overflow-x: auto; }
  .manga-nav a { flex: 0 0 auto; }
  .manga-hero { display: block; min-height: 710px; }
  .hero-main { min-height: 480px; padding: 28px 20px; }
  .hero-main__logo { width: min(93%,520px); }
  .hero-main h1 { font-size: clamp(43px,14vw,78px); }
  .hero-character { right: -8%; bottom: 6%; width: 94%; max-height: 72%; opacity: .54; }
  .hero-side { display: grid; grid-template-columns: 125px 1fr; min-height: 220px; border-top: 2px solid rgba(97,230,238,.35); border-left: 0; }
  .hero-side__screen,.hero-side__screen img { min-height: 0; height: 122px; }
  .hero-side__city { grid-column: 1/-1; min-height: 70px; }
  .archive-bar { grid-template-columns: 1fr auto; }
  .archive-bar p { grid-column: 1/-1; grid-row: 2; }
  .manga-content { padding: 13px; }
  .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .card-link:nth-child(n) .card { transform: none; }
  .section-head { align-items: start; flex-direction: column; }
  .section-head p { text-align: left; }
}

@media (max-width: 490px) {
  .brand strong { font-size: 12px; }
  .brand small { font-size: 7px; }
  .hero-main { min-height: 445px; }
  .hero-main__logo { margin-left: -8px; }
  .hero-main__copy { font-size: 8px; }
  .hero-side { grid-template-columns: 105px 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .card-img { height: 225px; }
  .card h3 { min-height: 0; }
  .manga-footer { grid-template-columns: 1fr; }
  .manga-footer__code { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}