@font-face {
  font-family: 'Psycho Ink';
  src: url('/psycho/fonts/Neucha-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Тёмная страница манги: тушь, медная краска и бумажные панели. */
body.psycho-manga {
  --manga-ink: #17100c;
  --manga-paper: #eddfc4;
  --manga-copper: #cd8a4d;
  --manga-muted: #c6b298;
}
body.psycho-manga .card,
body.psycho-manga.glow-run .card {
  padding: 24px 25px 18px;
  border-radius: 13px 18px 12px 16px / 17px 12px 19px 12px;
  background-color: #1a130f;
  background-image:
    radial-gradient(ellipse at 0 44%, #71432024, transparent 56%),
    radial-gradient(#ead8b710 .65px, transparent .9px);
  background-size: auto, 5px 5px;
  box-shadow: 7px 8px 0 #090705, 0 22px 65px #0009, 0 0 25px #b85d241c;
}
body.psycho-manga.glow-run .card::before {
  padding: 2px;
  background: conic-gradient(from var(--neon-ang), #b18b5b70 0turn .68turn,
    #ce8a4b .77turn, #f2d5a5 .85turn, #ce8a4b .91turn, #b18b5b70 .98turn);
}
body.psycho-manga .card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(-55deg, transparent 0 5px, #eddfc41b 5px 6px, transparent 6px 10px) left bottom / 86px 74px no-repeat,
    radial-gradient(#eddfc426 1px, transparent 1.2px) right 20px top 165px / 52px 75px no-repeat;
  background-size: 86px 74px, 5px 5px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}
body.psycho-manga .card-banner {
  top: 11px; left: 11px; right: 11px;
  height: 130px;
  border: 2px solid #100b08;
  border-radius: 5px 9px 4px 7px;
  box-shadow: 0 0 0 1px #debc8440, 3px 4px 0 #090705;
  mask-image: none;
  -webkit-mask-image: none;
}
body.psycho-manga .card-banner::after {
  background: linear-gradient(180deg, #160d070d 15%, #19120f22 60%, #19120f7a), #190e0719;
}
body.psycho-manga .avatar-wrap {
  width: 128px; height: 128px;
  margin-bottom: 10px;
}
body.psycho-manga .avatar-wrap::before {
  display: block;
  width: 126px; height: 126px;
  border: 2px solid #100c09;
  border-radius: 49% 45% 48% 44%;
  background: var(--manga-paper);
  box-shadow: 4px 5px 0 #0c0906;
  animation: none;
  transform: rotate(-6deg);
}
body.psycho-manga .avatar {
  width: 112px; height: 112px;
  border: 2px solid #211710;
  border-radius: 46% 48% 45% 49%;
  box-shadow: none;
  animation: none;
}
.manga-hero-marks {
  position: absolute;
  width: 190px; height: 154px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--manga-copper);
  overflow: visible;
  pointer-events: none;
}
body.psycho-manga .name {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 4px;
  color: #f4e5ca;
  font-size: clamp(25px, 7vw, 32px);
  text-shadow: 2px 3px 0 #080605;
}
body.psycho-manga .manga-name-stroke {
  display: block;
  position: absolute;
  left: 7%; right: 4%; bottom: 0;
  height: 5px;
  background: var(--manga-copper);
  clip-path: polygon(0 35%, 19% 15%, 56% 42%, 100% 0, 96% 66%, 58% 83%, 28% 65%, 3% 100%);
  opacity: .85;
  pointer-events: none;
}
body.psycho-manga .handle { margin-top: 5px; color: var(--manga-muted); }
body.psycho-manga .bio {
  position: relative;
  display: table;
  margin: 12px auto 18px;
  padding: 4px 13px 5px;
  border: 1.5px solid #100b08;
  border-radius: 48% 40% 42% 37% / 30% 44% 35% 40%;
  background: var(--manga-paper);
  color: var(--manga-ink);
  font: 17px/1.1 'Psycho Ink', sans-serif;
  letter-spacing: 0;
  box-shadow: 2px 2px 0 #0a0705;
}
body.psycho-manga .bio::after {
  content: '';
  position: absolute;
  left: 22px; bottom: -7px;
  width: 11px; height: 9px;
  background: var(--manga-paper);
  border-left: 1.5px solid #100b08;
  border-bottom: 1.5px solid #100b08;
  transform: skewY(-33deg) rotate(-18deg);
}
body.psycho-manga .links { gap: 12px; }
body.psycho-manga .links .link-btn {
  position: relative;
  isolation: isolate;
  min-height: 50px;
  padding: 12px 19px;
  grid-template-columns: 28px minmax(0, 1fr) 24px;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--manga-ink);
  box-shadow: none;
  overflow: visible;
  font: 400 21px/1.2 'Psycho Ink', sans-serif;
  letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms ease-out;
}
.manga-btn-frame {
  position: absolute;
  inset: -2px -1px -2px -1px;
  width: calc(100% + 2px); height: calc(100% + 4px);
  z-index: -1;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(3px 4px 0 #080604);
  transition: filter 150ms ease-out;
}
.manga-btn-paper { fill: var(--manga-paper); stroke: var(--manga-ink); stroke-width: 2.5px; }
.link-btn:first-child .manga-btn-paper { fill: var(--manga-copper); }
body.psycho-manga .link-btn::after { display: none; }
body.psycho-manga .link-btn .link-title {
  position: relative;
  text-align: left;
  text-shadow: .2px .2px currentColor;
  -webkit-line-clamp: 2;
}
body.psycho-manga .link-btn .link-ic,
body.psycho-manga .link-btn .link-arrow {
  position: relative;
  color: var(--manga-ink);
  opacity: 1;
  width: 24px; height: 24px;
  transform: none;
  justify-content: center;
}
body.psycho-manga .link-btn .link-ic svg { width: 20px; height: 20px; }
body.psycho-manga .link-btn .link-arrow svg { width: 24px; height: 24px; }
body.psycho-manga .links .link-btn:hover {
  transform: translate(-1px, -2px) !important;
  background: transparent;
  box-shadow: none;
}
body.psycho-manga .link-btn:hover .manga-btn-frame { filter: drop-shadow(4px 6px 0 #080604); }
body.psycho-manga .links .link-btn:focus-visible {
  outline: 2px solid #f4dfb6;
  outline-offset: 6px;
  background: transparent;
  box-shadow: none;
}
body.psycho-manga .links .link-btn:active {
  transform: translate(2px, 3px) !important;
}
body.psycho-manga .link-btn:active .manga-btn-frame { filter: drop-shadow(1px 1px 0 #080604); }
body.psycho-manga .card-footer {
  position: relative;
  margin-top: 22px;
  padding-top: 13px;
  color: var(--manga-muted);
  border: 0;
  z-index: 1;
}
body.psycho-manga .card-footer::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--manga-muted);
  clip-path: polygon(0 35%, 26% 0, 53% 65%, 100% 30%, 100% 80%, 53% 100%, 26% 48%, 0 95%);
  opacity: .4;
}
@media (max-width: 480px) {
  body.psycho-manga .card { padding: 22px 22px 17px; }
  body.psycho-manga .links .link-btn { padding-inline: 15px; gap: 9px; }
}
@media (max-width: 360px) {
  body.psycho-manga .name { font-size: 27px; }
  body.psycho-manga .links .link-btn { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  body.psycho-manga .links .link-btn,
  body.psycho-manga .manga-btn-frame { transition: none; }
}