:root {
  --bg: #020303;
  --text: #d8d3c8;
  --muted: #77736d;
  --line: #34332f;
  --red: #a83f38;
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #000;
  color: var(--text)
}

body {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  letter-spacing: .08em;
  overflow-x: hidden;
}

button {
  font: inherit
}

.hidden {
  display: none !important
}

.shell {
  position: relative;
  width: min(1120px, calc(100% - 26px));
  min-height: calc(100vh - 28px);
  margin: 14px auto;
  border: 1px solid #44423c;
  overflow: hidden;
  background: #030404;
}

.scan,
.noise,
.vignette,
.glitch-line {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scan {
  z-index: 30;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
  opacity: .5;
}

.noise {
  z-index: 29;
  inset: -20%;
  opacity: .11;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .18) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, .07) 0 1px, transparent 1.2px);
  background-size: 5px 5px, 8px 8px;
  animation: noise .16s steps(2, end) infinite;
}

@keyframes noise {
  0% {
    transform: translate(0)
  }

  25% {
    transform: translate(-1.4%, 1%)
  }

  50% {
    transform: translate(1%, -1%)
  }

  75% {
    transform: translate(.6%, 1.2%)
  }

  100% {
    transform: translate(-1%, 0)
  }
}

.vignette {
  z-index: 28;
  box-shadow: inset 0 0 150px rgba(0, 0, 0, .92)
}

.glitch-line {
  z-index: 31;
  left: -10%;
  width: 120%;
  height: 2px;
  opacity: 0;
  background: rgba(255, 255, 255, .14);
  animation: glitch 6.5s infinite
}

@keyframes glitch {

  0%,
  85%,
  100% {
    opacity: 0;
    top: 20%
  }

  86% {
    opacity: .6;
    top: 38%
  }

  87% {
    opacity: .12;
    top: 39%
  }

  88% {
    opacity: .45;
    top: 71%
  }

  89% {
    opacity: 0
  }
}

.system-head {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  padding: 22px 30px 0;
  color: #89867f;
  font: 10px Consolas, monospace;
  letter-spacing: .13em;
}

.screen {
  position: relative;
  z-index: 5;
  min-height: calc(100vh - 70px)
}

/* =======================
   STEP 1 / TITLE + LOGIN
======================= */
#titleScreen {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 28px 70px;
}

.titlewrap {
  width: min(820px, 100%);
  opacity: 0;
  transform: translateY(5px);
  transition: .8s;
}

.titlewrap.show {
  opacity: 1;
  transform: none
}

.title-en {
  margin-bottom: 18px;
  color: #d6d1c9;
  font: 15px Consolas, monospace;
  letter-spacing: .46em;
}

.horror-title {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  font-size: clamp(52px, 8.5vw, 88px);
  font-weight: 500;
  letter-spacing: .15em;
  text-indent: .15em;
  text-align: center;
  text-shadow:
    1px 0 rgba(255, 0, 0, .17),
    -1px 0 rgba(0, 150, 255, .10),
    0 0 4px rgba(255, 255, 255, .06);
}

.horror-title::before,
.horror-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.horror-title::before {
  color: #a64540;
  opacity: .13;
  clip-path: polygon(0 17%, 100% 17%, 100% 31%, 0 31%);
  animation: g1 5.2s infinite;
}

.horror-title::after {
  color: #76909a;
  opacity: .10;
  clip-path: polygon(0 63%, 100% 63%, 100% 75%, 0 75%);
  animation: g2 7s infinite;
}

@keyframes g1 {

  0%,
  89%,
  100% {
    transform: translate(1px)
  }

  90% {
    transform: translate(6px, -1px)
  }

  91% {
    transform: translate(-4px, 1px)
  }
}

@keyframes g2 {

  0%,
  92%,
  100% {
    transform: translate(-1px)
  }

  93% {
    transform: translate(-7px)
  }

  94% {
    transform: translate(5px, 1px)
  }
}

.title-divider {
  width: min(440px, 68%);
  height: 1px;
  margin: 29px auto 19px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  position: relative;
}

.title-divider::after {
  content: "◇";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  padding: 0 13px;
  color: var(--red);
  background: #030404;
  font-size: 16px;
}

.system-title {
  font-size: 18px;
  letter-spacing: .19em;
  margin-bottom: 5px;
}

.system-title-en {
  color: var(--red);
  font: 9px Consolas, monospace;
  letter-spacing: .31em;
}

.login-panel {
  width: min(480px, 92%);
  margin: 40px auto 0;
  padding: 25px 28px 27px;
  text-align: left;
  border: 1px solid #47443f;
  background: rgba(255, 255, 255, .006);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .34), inset 0 0 25px rgba(0, 0, 0, .28);
  position: relative;
}

.login-panel::before,
.login-panel::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
}

.login-panel::before {
  left: -1px;
  top: -1px;
  border-left: 1px solid #77726a;
  border-top: 1px solid #77726a;
}

.login-panel::after {
  right: -1px;
  bottom: -1px;
  border-right: 1px solid #77726a;
  border-bottom: 1px solid #77726a;
}

.login-label {
  padding: 0 0 5px;
  text-align: center;
  color: #d5d0c6;
  font-size: 20px;
  letter-spacing: .24em;
}

.login-label-en {
  text-align: center;
  color: var(--red);
  font: 8px Consolas, monospace;
  letter-spacing: .31em;
  margin-bottom: 20px;
}

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid #35332f;
  color: #aaa69e;
  font-size: 14px;
}

.login-row strong {
  color: #d5d0c6;
  font: 12px Consolas, monospace;
  font-weight: 400;
  letter-spacing: .16em;
}

.login-row .auth-ok {
  color: #c9c5bb
}

.auth-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 1px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  font: 10px Arial, sans-serif;
}

.login-note {
  margin: 25px 0 17px;
  text-align: center;
  color: #8a867f;
  font-size: 12px;
}

.enter {
  display: block;
  width: 100%;
  margin-top: 0;
  padding: 15px 12px 13px;
  border: 1px solid #73302c;
  background: rgba(100, 20, 17, .035);
  color: #d0cbc2;
  cursor: pointer;
  font-family: "Zen Old Mincho", serif;
  font-size: 17px;
  letter-spacing: .17em;
  opacity: 0;
  transition: .6s;
}

.enter.show {
  opacity: 1
}

.enter:hover {
  color: #fff;
  border-color: #a7433c;
  background: rgba(120, 24, 20, .09);
}

.enter small {
  display: block;
  margin-top: 6px;
  color: var(--red);
  font: 8px Consolas, monospace;
  letter-spacing: .3em;
}

.security-note {
  margin-top: 20px;
  color: #68655f;
  font-size: 10px;
  text-align: center;
}

@media(max-width:720px) {
  #titleScreen {
    padding: 38px 18px 80px
  }

  .horror-title {
    font-size: clamp(44px, 14vw, 68px);
    letter-spacing: .11em
  }

  .title-en {
    font-size: 11px;
    letter-spacing: .34em
  }

  .login-panel {
    padding: 23px 20px 24px
  }

  .login-row {
    font-size: 12px
  }
}

/* =======================
   STEP 2 / LOADING
======================= */
#loadingScreen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.loading {
  width: min(650px, 100%);
}

.loading small {
  font: 10px Consolas, monospace;
  letter-spacing: .25em;
  color: #716e68
}

.loading h1 {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(21px, 3.2vw, 34px);
  font-weight: 400;
  letter-spacing: .11em;
  margin: 20px 0 52px;
}

.loadrow {
  display: flex;
  justify-content: space-between;
  font: 11px Consolas, monospace;
  color: #aaa69e;
  margin-bottom: 10px
}

.track {
  height: 2px;
  background: #272824
}

.bar {
  height: 100%;
  width: 0;
  background: #d1cec5
}

.blocks {
  display: flex;
  gap: 4px;
  margin-top: 14px
}

.blocks span {
  width: 12px;
  height: 8px;
  border: 1px solid #4f504b
}

.blocks span.on {
  background: #bdbab1
}

.loadmsg {
  margin-top: 22px;
  color: #85817a;
  font-family: "Zen Old Mincho", serif;
  font-size: 14px
}

.loadmsg.done {
  color: var(--red)
}

/* =======================
   STEP 3 / CASE PAGE
======================= */
#caseScreen {
  padding: clamp(45px, 7vw, 80px) 40px 75px
}

.case {
  width: min(900px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 290px);
  gap: clamp(30px, 5vw, 62px);
  align-items: stretch;
}

.case-left {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.label {
  font: 10px Consolas, monospace;
  color: #8f8b84;
  letter-spacing: .3em;
  margin-bottom: 16px
}

.title-chunk {
  display: inline-block;
  white-space: nowrap
}

.case-title {
  font-family: "Zen Old Mincho", serif;
  margin: 0;
  font-size: clamp(27px, 4.1vw, 48px);
  font-weight: 400;
  white-space: nowrap;
  word-break: keep-all;
  letter-spacing: .035em;
  max-width: 100%;
  text-shadow:
    1px 0 rgba(255, 0, 0, .08),
    -1px 0 rgba(0, 150, 255, .05)
}

.complete-line {
  margin: 13px 0 30px;
  color: #817e77;
  font: 10px Consolas, monospace;
  letter-spacing: .2em
}

.records {
  margin-top: 8px;
  border-top: 0
}

.record {
  padding: 20px;
  border: 1px solid #3f3d38;
  background: rgba(255, 255, 255, .018);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.record:hover,
.record:focus-within,
.record:focus-visible,
.record.is-selected {
  border-color: #777269;
  background: rgba(255, 255, 255, .035);
  outline: none;
}

.byakko.is-selected {
  border-color: #7f2a26;
  background: rgba(105, 20, 17, .07);
}

.record-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;
  align-items: center
}

.record-no {
  font: 10px Consolas, monospace;
  color: #66635e
}

.primary-label {
  font: 9px Consolas, monospace;
  color: #8d8982;
  letter-spacing: .18em;
  margin-bottom: 9px;
}

.record-name {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(20px, 2.5vw, 27px);
  letter-spacing: .08em
}

.status {
  font: 9px Consolas, monospace;
  letter-spacing: .18em;
  color: #77746e
}

.suzaku-start {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #55514b;
  background: rgba(255, 255, 255, .018);
  color: #c9c5bb;
  cursor: pointer;
  font-family: "Zen Old Mincho", serif;
  font-size: 15px;
  letter-spacing: .14em;
}

.suzaku-start:hover {
  border-color: #8a857d;
  color: #fff;
  background: rgba(255, 255, 255, .04);
}

.suzaku-start:disabled {
  border-color: #302f2c;
  background: rgba(255, 255, 255, .01);
  color: #595750;
  cursor: not-allowed;
}

.record-detail {
  margin: 9px 0 0 0;
  color: #706d67;
  font-family: "Zen Old Mincho", serif;
  font-size: 12px
}

.detected {
  margin: 34px 0 13px;
  padding: 10px 12px;
  border-left: 2px solid var(--red);
  background: linear-gradient(90deg, rgba(120, 24, 20, .10), transparent);
  color: #a9443d;
  font: 10px Consolas, monospace;
  letter-spacing: .18em
}

.byakko {
  position: relative;
  border: 1px solid #4a302d;
  padding: 20px;
  background: rgba(75, 18, 15, .035);
  overflow: hidden;
  margin-top: 26px;
}

.byakko::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: 50%;
  height: 1px;
  background: rgba(180, 60, 50, .08);
  transform: rotate(-1deg)
}

.byakko-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start
}

.reinvest {
  font: 9px Consolas, monospace;
  color: #8d8982;
  letter-spacing: .18em;
  margin-bottom: 9px
}

.byakko-name {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(20px, 2.5vw, 27px);
  letter-spacing: .08em
}

.available {
  color: var(--red);
  font: 9px Consolas, monospace;
  letter-spacing: .18em;
  padding-top: 5px
}

.start {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #7f2a26;
  background: rgba(105, 20, 17, .07);
  color: #bd4a42;
  cursor: pointer;
  font-family: "Zen Old Mincho", serif;
  font-size: 16px;
  letter-spacing: .14em
}

.start:hover {
  border-color: #b2443b;
  background: rgba(130, 26, 21, .14)
}

/* collected item image */
.photo-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.photo-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
  color: #716e68;
  font: 9px Consolas, monospace;
  letter-spacing: .13em
}

.photo {
  position: relative;
  aspect-ratio: 4/5;
  flex: 1;
  min-height: 430px;
  border: 1px solid #363632;
  background:
    radial-gradient(circle at 46% 38%, rgba(255, 255, 255, .07), transparent 25%),
    linear-gradient(145deg, #171817, #080909 55%, #030303);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55)
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255, 255, 255, .025) 4px);
  opacity: .6
}

.item-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050505;
}

.image-unavailable {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 13px;
  padding: 30px;
  color: #77736c;
  text-align: center;
  font: 11px Consolas, monospace;
  letter-spacing: .16em;
}

.image-unavailable::before {
  content: "IMAGE DATA ERROR";
  padding: 10px 14px;
  border: 1px solid #4b2725;
  color: #9b403b;
  font-size: 9px;
  letter-spacing: .22em;
}

.image-unavailable[hidden],
.item-image[hidden] {
  display: none;
}

.notebook {
  position: absolute;
  width: 54%;
  height: 66%;
  left: 23%;
  top: 16%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 12%),
    linear-gradient(145deg, #671a17, #38100e 65%, #200807);
  border: 1px solid #74241f;
  transform: rotate(-7deg);
  box-shadow:
    18px 22px 32px rgba(0, 0, 0, .65),
    inset 0 0 35px rgba(0, 0, 0, .5)
}

.notebook::before {
  content: "";
  position: absolute;
  left: 13%;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(20, 0, 0, .55)
}

.symbol {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  opacity: .55
}

.symbol span {
  position: absolute;
  background: #160605
}

.symbol .v {
  width: 4px;
  height: 58px;
  left: 15px
}

.symbol .h1 {
  width: 42px;
  height: 4px;
  left: 0;
  top: 18px
}

.symbol .h2 {
  width: 30px;
  height: 4px;
  left: 15px;
  top: 39px
}

.symbol .r {
  width: 4px;
  height: 26px;
  right: 9px;
  top: 18px
}

.photo-id {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 3;
  color: rgba(220, 215, 205, .38);
  font: 8px Consolas, monospace;
  letter-spacing: .12em
}

.photo-note {
  margin-top: 12px;
  color: #5e5b56;
  font-family: "Zen Old Mincho", serif;
  font-size: 11px;
  line-height: 1.8
}

.footer {
  position: absolute;
  z-index: 5;
  left: 30px;
  right: 30px;
  bottom: 18px;
  padding-top: 12px;
  border-top: 1px solid #252522;
  display: flex;
  justify-content: space-between;
  color: #5d5a55;
  font: 9px Consolas, monospace
}

.footer-disclaimer {
  width: min(1120px, calc(100% - 26px));
  margin: 0 auto 18px;
  color: #5d5a55;
  text-align: center;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: .06em;
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #fff;
  opacity: 0;
  pointer-events: none
}

.flash.hit {
  animation: flash .1s linear
}

@keyframes flash {
  0% {
    opacity: 0
  }

  45% {
    opacity: .04
  }

  100% {
    opacity: 0
  }
}

@media(max-width:900px) {
  #caseScreen {
    padding-left: 28px;
    padding-right: 28px
  }

  .case {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .case-title {
    font-size: clamp(28px, 6.2vw, 46px);
    white-space: normal;
    word-break: keep-all;
    line-break: strict;
  }

  .photo-wrap {
    width: min(340px, 100%);
    margin: 0 auto;
    display: block
  }

  .photo {
    min-height: 0
  }

  .byakko {
    margin-top: 34px
  }
}

@media(max-width:720px) {
  .system-head {
    padding: 18px 18px 0;
    font-size: 8px
  }

  #caseScreen {
    padding: 42px 20px 90px
  }

  .case-title {
    font-size: clamp(25px, 7.8vw, 42px);
    white-space: normal;
    letter-spacing: .04em
  }

  .horror-title {
    letter-spacing: .12em
  }

  .title-en {
    letter-spacing: .35em
  }

  .record-head {
    grid-template-columns: 1fr auto
  }

  .record-detail {
    margin-left: 0
  }

  .footer {
    left: 18px;
    right: 18px
  }

}