/* Rain Station Z — Survival Handbook
   PS1/N64-era printed manual look. Paper, staples, halftone, typewriter. */

:root {
  --paper: #e9e2cf;
  --paper-dark: #ddd3ba;
  --ink: #22201c;
  --ink-soft: #4a463e;
  --red: #9e1c1c;
  --stamp: #27548c;
  --desk: #14161a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--desk);
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(80, 95, 115, .18), transparent 60%),
    repeating-linear-gradient(105deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px);
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
  overflow: hidden;
}

/* ============================== book chrome ============================= */

#book-area {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 64px;
}

/* The book has a FIXED design size; js/manual.js scales it to fit the
   window with a transform, so the layout is identical at every size. */
#spread {
  position: relative;
  display: flex;
  flex: none;
  width: 1240px;
  height: 897px;
  transform-origin: center center;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.65));
}

#spread.single { width: 620px; }

.page {
  position: relative;
  width: 50%;
  height: 100%;
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(160deg, #efe8d6 0%, var(--paper) 45%, var(--paper-dark) 100%);
  overflow: hidden;
  padding: 4.2% 5.5% 5.8% 5.5%;
  display: flex;
  flex-direction: column;
}

#spread.single .page { width: 100%; }

/* spine shading + staples on a two-page spread */
.page.left  { border-radius: 4px 1px 1px 4px; box-shadow: inset -14px 0 22px -12px rgba(60,45,25,.55); }
.page.right { border-radius: 1px 4px 4px 1px; box-shadow: inset 14px 0 22px -12px rgba(60,45,25,.55); }

.staple {
  position: absolute;
  left: 50%;
  width: 5px;
  height: 30px;
  margin-left: -2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6e6e6e, #dcdcdc 40%, #8a8a8a 60%, #555);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(60,45,25,.3);
  z-index: 5;
}
.staple.s1 { top: 16%; }
.staple.s2 { bottom: 16%; }

/* rain-stain blotches on flavor pages */
.page.stained::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 130px 90px at 82% 8%,  rgba(120, 105, 60, .16), transparent 70%),
    radial-gradient(ellipse 90px 130px at 6% 78%,  rgba(120, 105, 60, .13), transparent 70%),
    radial-gradient(ellipse 60px 44px  at 70% 94%, rgba(120, 105, 60, .18), transparent 70%);
}

/* printed page footer */
.pageno {
  position: absolute;
  bottom: 2.6%;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .08em;
}
.page.left  .pageno { left: 6%; }
.page.right .pageno { right: 6%; }
.runninghead {
  position: absolute;
  bottom: 2.7%;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(74, 70, 62, .55);
  text-transform: uppercase;
}

/* ============================== navigation ============================== */

.navbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 46px;
  height: 78px;
  border: 1px solid rgba(233, 226, 207, .25);
  border-radius: 6px;
  background: rgba(20, 22, 26, .55);
  color: #e9e2cf;
  font-size: 26px;
  font-family: Georgia, serif;
  cursor: pointer;
  transition: background .15s, opacity .2s;
}
.navbtn:hover { background: rgba(158, 28, 28, .75); }
.navbtn:disabled { opacity: .12; cursor: default; }
#prev { left: 8px; }
#next { right: 8px; }

#pagetab {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  color: rgba(233, 226, 207, .6);
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .2em;
  user-select: none;
}

/* language toggle */
#langtab {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 20;
  font-family: 'DotGothic16', 'Special Elite', monospace;
  font-size: 13px;
  letter-spacing: .1em;
  color: rgba(233, 226, 207, .45);
  user-select: none;
}
#langtab a {
  color: rgba(233, 226, 207, .55);
  text-decoration: none;
  padding: 4px 6px;
}
#langtab a:hover { color: #e9e2cf; }
#langtab a.active {
  color: #e9e2cf;
  border-bottom: 2px solid var(--red);
}

/* turn animation */
#spread.turning .page { animation: turnfade .28s ease; }
@keyframes turnfade {
  0%   { opacity: 0; transform: translateX(var(--turn-dx, 14px)); }
  100% { opacity: 1; transform: none; }
}

/* ============================== typography ============================== */

h1.section {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 27px;
  line-height: 1.05;
  border-bottom: 3px solid var(--ink);
  padding-bottom: .18em;
  margin-bottom: .5em;
  display: flex;
  align-items: baseline;
  gap: .45em;
}
h1.section .no {
  background: var(--ink);
  color: var(--paper);
  padding: .05em .3em;
  font-size: .78em;
}
h1.section .sub {
  margin-left: auto;
  font-family: 'Special Elite', monospace;
  font-size: .42em;
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

h2.rule {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 15px;
  margin: .9em 0 .35em;
  color: var(--red);
}

p.body, li.body {
  font-size: 13.5px;
  line-height: 1.42;
  margin-bottom: .55em;
  text-align: justify;
}
p.body .lead { font-weight: bold; font-variant: small-caps; }

.typewriter {
  font-family: 'Special Elite', 'Courier New', monospace;
}

/* survivor's handwritten tip box */
.fieldnote {
  margin-top: auto;
  border: 1.5px dashed var(--ink-soft);
  padding: .6em .8em .5em;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  color: #3c3225;
  background: rgba(255, 250, 230, .45);
  transform: rotate(-.4deg);
}
.fieldnote b { color: var(--red); }
.fieldnote .sig { display: block; text-align: right; margin-top: .2em; }

/* official warning border */
.warnbox {
  border: 3px double var(--ink);
  padding: 1em 1.2em;
  margin: .8em 0;
}
.warnbox h3 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  text-align: center;
  font-size: 17px;
  margin-bottom: .6em;
}

/* redacted bars for the bestiary */
.redacted {
  background: var(--ink);
  color: var(--ink);
  border-radius: 1px;
  padding: 0 .35em;
  user-select: none;
}

/* ============================== photos ================================= */

.photoframe {
  background: #f6f2e6;
  padding: 5px 5px 5px;
  box-shadow: 2px 3px 8px rgba(40, 30, 15, .4);
  position: relative;
  margin: .5em 0;
}
.photoframe.tilt-l { transform: rotate(-1.1deg); }
.photoframe.tilt-r { transform: rotate(1deg); }
.photoframe .corner {
  position: absolute;
  width: 14px; height: 14px;
  background: rgba(30, 26, 20, .85);
  z-index: 3;
}
.photoframe .corner.tl { top: -4px; left: -4px;  clip-path: polygon(0 0, 100% 0, 0 100%); }
.photoframe .corner.tr { top: -4px; right: -4px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.photoframe .corner.bl { bottom: -4px; left: -4px;  clip-path: polygon(0 0, 0 100%, 100% 100%); }
.photoframe .corner.br { bottom: -4px; right: -4px; clip-path: polygon(100% 0, 0 100%, 100% 100%); }

.photo {
  position: relative;
  display: block;
  line-height: 0;
}
.photo img {
  width: 100%;
  display: block;
  filter: contrast(1.06) saturate(.82) sepia(.14) brightness(1.02);
}
/* halftone dot-print overlay */
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(35, 28, 18, .55) .5px, transparent .6px);
  background-size: 2.6px 2.6px;
  mix-blend-mode: multiply;
  opacity: .5;
  pointer-events: none;
}
.caption {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 10.5px;
  color: var(--ink-soft);
  padding-top: 4px;
  line-height: 1.25;
  text-align: center;
}

/* ============================ item entries ============================== */

.iconbox {
  background: #23211d;
  border: 2px solid #3a372f;
  box-shadow: inset 0 0 8px rgba(0,0,0,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.iconbox img { width: 86%; height: 86%; object-fit: contain; image-rendering: auto; }

/* full spec block (weapons) */
.spec {
  display: flex;
  gap: 3.2%;
  border: 1.5px solid var(--ink);
  padding: 1.5% 2.4%;
  margin-bottom: 1.7%;
  background: rgba(255, 253, 245, .38);
  align-items: flex-start;
}
.spec .iconbox { width: 17%; aspect-ratio: 1; }
.spec .info { flex: 1; min-width: 0; }
.spec .name {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 14px;
  border-bottom: 1px solid var(--ink-soft);
  margin-bottom: .25em;
  display: flex;
  justify-content: space-between;
  gap: .5em;
}
.spec .name .cat { font-size: .68em; color: var(--red); letter-spacing: .12em; align-self: center; white-space: nowrap; }
.statline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.42;
  gap: .6em;
}
.statline .lbl { white-space: nowrap; }
.statline .dots { flex: 1; border-bottom: 1px dotted rgba(74,70,62,.6); transform: translateY(-3px); }
.statline .val { white-space: nowrap; font-weight: bold; }
.statline .meter { letter-spacing: .12em; color: var(--ink); font-size: .92em; }
.statline .meter .off { color: rgba(74,70,62,.35); }

.speccols { column-count: 2; column-gap: 4%; }
.speccols .statline { break-inside: avoid; }

/* compact grid entry (clothing etc.) */
.grid {
  display: grid;
  gap: 2.5% 3.5%;
}
.grid.cols2 { grid-template-columns: 1fr 1fr; }
.grid.cols3 { grid-template-columns: 1fr 1fr 1fr; }
.gitem {
  display: flex;
  gap: 5%;
  align-items: center;
  border-bottom: 1px dotted rgba(74,70,62,.5);
  padding-bottom: 3%;
}
.gitem .iconbox { width: 23%; aspect-ratio: 1; }
.gitem .gname {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.1;
}
.gitem .gstat {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 9.5px;
  color: var(--ink-soft);
  line-height: 1.35;
}
.gitem .gstat .meter { color: var(--ink); }
.gitem .gstat .meter .off { color: rgba(74,70,62,.3); }

/* journal list */
.jitem {
  display: flex;
  gap: 3%;
  align-items: center;
  border-bottom: 1px dotted rgba(74,70,62,.5);
  padding: 1% 0;
}
.jitem .iconbox { width: 10.5%; aspect-ratio: 1; }
.jitem .jname {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  width: 34%;
  flex: none;
  line-height: 1.12;
}
.jitem .jeffect {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ink-soft);
}

/* mission cards */
.mcards { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; }
.mcard { text-align: center; }
.mcard img {
  width: 100%;
  border: 2px solid var(--ink);
  filter: saturate(.85) contrast(1.05);
  background: #23211d;
}

/* controls table */
.ctl { width: 100%; border-collapse: collapse; }
.ctl td {
  font-size: 12px;
  padding: .28em .2em;
  border-bottom: 1px dotted rgba(74,70,62,.5);
}
.ctl td:first-child {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .04em;
  width: 38%;
}
.ctl td:last-child { font-family: 'Special Elite', monospace; color: var(--ink-soft); }

/* HUD gauge list */
.gauges { margin: .4em 0; }
.gauge {
  display: flex;
  gap: .7em;
  align-items: baseline;
  padding: .32em 0;
  border-bottom: 1px dotted rgba(74,70,62,.5);
}
.gauge .g {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  width: 24%;
  flex: none;
}
.gauge .d { font-size: 12px; line-height: 1.35; }

/* ============================== cover pages ============================= */

.page.cover {
  background-color: #191b1f;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(165deg, #262a31 0%, #16181c 55%, #101114 100%);
  color: #e9e2cf;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
}
.cover .logo { width: 88%; margin-top: 7%; }
.cover .strip {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .5em;
  text-transform: uppercase;
  font-size: 14px;
  color: #c8beA4;
  border-top: 1px solid rgba(233,226,207,.4);
  border-bottom: 1px solid rgba(233,226,207,.4);
  padding: .5em 0;
  width: 70%;
  margin: 4% 0;
}
.cover .art { width: 74%; margin: 1% 0 4%; }
.cover .art .photo img { filter: contrast(1.08) saturate(.9); }
.cover .badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8em 1.2em;
  margin-top: auto;
  margin-bottom: 9%;
  align-items: center;
}
.badge {
  border: 1.5px solid rgba(233,226,207,.7);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  padding: .45em .8em;
  color: #e9e2cf;
}
.badge.rating {
  background: #e9e2cf;
  color: #191b1f;
  font-weight: 700;
  display: flex; flex-direction: column; line-height: 1.1;
}
.badge.rating .big { font-size: 2.1em; }

.barcode {
  width: 46%;
  height: 44px;
  background: repeating-linear-gradient(90deg,
    #e9e2cf 0 2px, #101114 2px 4px, #e9e2cf 4px 5px, #101114 5px 9px,
    #e9e2cf 9px 12px, #101114 12px 13px, #e9e2cf 13px 16px, #101114 16px 18px);
  border: 6px solid #e9e2cf;
  border-left-width: 10px;
  border-right-width: 10px;
  margin: 3% auto 1%;
}
.barcode-num {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: .5em;
  color: #e9e2cf;
}

/* ruled notes page */
.ruled {
  flex: 1;
  background-image: repeating-linear-gradient(
    transparent 0 calc(1.9em - 1px),
    rgba(90, 110, 150, .35) calc(1.9em - 1px) 1.9em);
  position: relative;
  margin-top: .8em;
  font-family: 'Special Elite', monospace;
  line-height: 1.9em;
  font-size: 13px;
  color: #43526e;
}
.coffeering {
  position: absolute;
  width: 108px; height: 96px;
  right: 6%; bottom: 12%;
  border: 9px solid rgba(112, 74, 34, .28);
  border-radius: 50%;
  transform: rotate(-8deg) scaleX(1.05);
  pointer-events: none;
  box-shadow: 0 0 6px rgba(112, 74, 34, .12), inset 0 0 5px rgba(112,74,34,.15);
}

/* map spread */
.mapwrap { position: relative; flex: 1; overflow: hidden; border: 2px solid var(--ink); }
.mapwrap img {
  position: absolute;
  height: 100%;
  width: 200%;
  object-fit: cover;
  filter: sepia(.28) contrast(1.05) saturate(.8);
}
.page.left  .mapwrap img { left: 0; }
.page.right .mapwrap img { right: 0; }
.gazetteer {
  column-count: 2;
  column-gap: 5%;
  font-family: 'Special Elite', monospace;
  font-size: 10px;
  line-height: 1.55;
  margin-top: .5em;
}
.gazetteer div { break-inside: avoid; }
.gazetteer b { color: var(--red); }

/* TOC */
.toc { margin-top: .6em; }
.toc .tocline {
  display: flex;
  align-items: baseline;
  gap: .5em;
  font-size: 14.5px;
  line-height: 1.9;
  cursor: pointer;
}
.toc .tocline:hover .t { color: var(--red); }
.toc .t { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.toc .dots { flex: 1; border-bottom: 2px dotted rgba(74,70,62,.65); transform: translateY(-4px); }
.toc .pg { font-family: 'Special Elite', monospace; }

/* two-column helper */
.cols { display: flex; gap: 5%; }
.cols > div { flex: 1; min-width: 0; }

/* ============================ japanese ================================= */
/* JA swaps the latin print fonts for era-appropriate Japanese ones:
   heavy gothic for headers, serif body, DotGothic16 (famicom-manual
   bitmap style) wherever English uses the typewriter face. */

.lang-ja .page { font-family: 'Noto Serif JP', Georgia, serif; }

.lang-ja h1.section,
.lang-ja h2.rule,
.lang-ja .gname,
.lang-ja .jname,
.lang-ja .spec .name,
.lang-ja .gauge .g,
.lang-ja .ctl td:first-child,
.lang-ja .toc .t,
.lang-ja .cover .strip,
.lang-ja .badge {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
}
.lang-ja h1.section { letter-spacing: .1em; }

.lang-ja .typewriter,
.lang-ja .statline,
.lang-ja .fieldnote,
.lang-ja .caption,
.lang-ja .gstat,
.lang-ja .jeffect,
.lang-ja .pageno,
.lang-ja .runninghead,
.lang-ja .gazetteer,
.lang-ja .ruled,
.lang-ja h1.section .sub,
.lang-ja .spec .name .cat,
.lang-ja .ctl td:last-child,
.lang-ja .toc .pg {
  font-family: 'DotGothic16', 'Special Elite', monospace;
}

/* JP glyphs need a touch more size/leading at the small end */
.lang-ja p.body { line-height: 1.6; text-align: justify; }
/* katakana item names run taller/longer than latin — claw the space back */
.lang-ja .spec { padding: 1.2% 2.4%; margin-bottom: 1.4%; }
.lang-ja .spec .name { font-size: 13px; }
.lang-ja .statline { font-size: 11.5px; }
.lang-ja .gstat { font-size: 10px; }
.lang-ja .jeffect { font-size: 11px; }
.lang-ja .gazetteer { font-size: 10.5px; line-height: 1.6; }
.lang-ja .caption { font-size: 11px; }
.lang-ja .fieldnote { transform: none; }

/* ============================== mobile ================================= */

@media (max-width: 760px), (max-aspect-ratio: 5/6) {
  #book-area { padding: 10px 4px 40px; }
  #spread, #spread.single { aspect-ratio: auto; width: 100%; height: 100%; display: block; overflow: hidden; }
  .page { width: 100% !important; height: 100%; overflow-y: auto; border-radius: 3px; }
  .page.hidden-mobile { display: none; }
  .staple { display: none; }
  #prev { left: 2px; } #next { right: 2px; }
  .navbtn { width: 34px; height: 60px; opacity: .85; }
  .mapwrap img { position: static; width: 100%; height: auto; }
  .mapwrap { overflow: visible; border-width: 1px; flex: none; }
  /* footers can't float over scrolling content on mobile */
  .runninghead { display: none; }
  .pageno {
    position: static;
    text-align: center;
    margin-top: 1.2em;
  }
  /* long stat labels don't fit two columns on a phone */
  .speccols { column-count: 1; }
  .spec .iconbox { width: 21%; }
}