@font-face {
  font-family: "ComicSansWeb";
  src: url("design.graffiti.comicsansms.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "ComicSansWeb";
  src: url("design.graffiti.comicsansmsgras.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #0b0700;
  --panel: #140d00;
  --text: #ffe79a;
  --muted: #ffd36b;
  --accent: #ffe600;
  --hot: #ff8c00;
  --link: #fff2b3;
  --danger: #ff2d2d;
  --shadow: rgba(0, 0, 0, 0.7);
  --border: rgba(255, 255, 0, 0.45);
  --scanline: rgba(0, 0, 0, 0.35);
  --glow: 0 0 12px rgba(255, 230, 0, 0.14);
  --mono: ui-monospace, "Courier New", Courier, monospace;
  --ui: "ComicSansWeb", "Comic Sans MS", "Comic Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --site-bg: url('gif/yllw023.jpg');
  --box-bg: url('gif/yllw023.jpg');
}

/* Animali pattern a scacchiera ai lati del contenuto */
.animals-left,
.animals-right {
  position: absolute;
  top: 0;
  height: 100%;
  width: min(26vw, 380px);
  z-index: 0;
  pointer-events: none;
  overflow-x: visible;
  overflow-y: hidden;
  opacity: 0.9;
}

.animals-left {
  left: 0;
}

.animals-right {
  right: 0;
}

.animal {
  position: absolute;
  width: clamp(120px, 12vw, 190px);
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.65));
  image-rendering: auto;
}

.clippy,
.clippy-balloon {
  z-index: 2147483647 !important;
}

@media (max-width: 1100px) {
  .animals-left,
  .animals-right {
    width: min(26vw, 280px);
    opacity: 0.55;
  }

  .animal {
    width: clamp(90px, 9vw, 130px);
  }
}
/* Assicurarsi che il contenuto principale non sia coperto dagli animali */
.site-header,
.toc,
.content,
.extra-gifs,
.extras,
.awards,
.graveyard,
.footer {
  position: relative;
  z-index: 2;
}

/* Header riorganizzato */
.site-header {
  position: relative;
  z-index: 2;
}

.header-content {
  position: relative;
  z-index: 2;
}

.title-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}

.title-animal-left, .title-animal-right {
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
}

/* Extra GIF orizzontali */
.extra-gifs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 25px auto;
  max-width: 1000px;
  padding: 0 16px;
  flex-wrap: wrap;
}

.extra-gifs img {
  max-height: 70px;
  width: auto;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  image-rendering: auto;
}


.link-arrow {
  max-width: 1000px;
  margin: 12px auto;
  padding: 0 16px;
  text-align: center;
}

.link-arrow img {
  height: 56px;
  width: auto;
  image-rendering: auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}

.title-area .extra-gifs {
  display: flex;
  justify-content: center;
}

.title-area .extra-gifs img {
  margin: 0 10px;
}

.link-arrow--before-extras {
  margin: 30px auto 20px auto;
}

.link-arrow--before-footer {
  margin: 30px auto 20px auto;
}

.separator-gifs {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.separator-gifs img {
  height: 50px;
  width: auto;
  image-rendering: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

.link-arrow--after-text .separator-gifs {
  margin: 25px auto;
}

/* Stile per le nuove GIF tra i capitoli */
.extra-gifs--between-chapters {
  margin: 20px auto;
  max-width: 1000px;
  padding: 0 16px;
}

.extra-gifs--between-chapters img {
  max-height: 135px;
  max-width: 200px;
  height: auto;
  width: auto;
  margin: 0 15px;
  image-rendering: auto;
  opacity: 1;
  transition: opacity 0.3s;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  object-fit: contain;
}

.extra-gifs--between-chapters img:hover {
  opacity: 1;
}

.extras {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin: 16px auto 0;
  padding: 0 16px;
}

.retro-hub {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin: 16px auto 0;
  padding: 0 16px;
}

.museo {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin: 16px auto 0;
  padding: 0 16px;
}

.extras__inner {
  border: none;
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.10)),
    url("gif/backgroundtile.jpg");
  background-repeat: repeat;
  background-size: 220px auto;
  box-shadow: 0 12px 30px var(--shadow);
  color: #000;
  text-shadow: none;
  padding: 12px;
  font-family: "Times New Roman", Times, serif;
}

.extras__inner .extras__title {
  font-family: var(--ui);
}

.extras__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.win98 {
  background-color: rgba(255, 255, 255, 0.45);
  border: 2px solid rgba(0,0,0,0.85);
  box-shadow: 0 10px 20px rgba(0,0,0,0.55);
}

.win98__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  background: linear-gradient(90deg, rgba(0, 70, 160, 0.95), rgba(0, 20, 90, 0.95));
  color: #fff;
  font-family: var(--ui);
  font-size: 12px;
  border-bottom: 2px solid rgba(0,0,0,0.85);
}

.win98__title {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.win98__buttons {
  display: flex;
  gap: 4px;
}

.win98__btn {
  width: 12px;
  height: 12px;
  background: #c0c0c0;
  border: 2px solid rgba(0,0,0,0.85);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.7),
    inset -1px -1px 0 rgba(0,0,0,0.35);
}

.win98__body {
  padding: 8px;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.35), rgba(255,255,255,0.25)),
    url("gif/backgroundtile.jpg");
  background-repeat: repeat;
  background-size: 220px auto;
  color: #000;
  text-shadow: none;
}

.btn98 {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 0;
  outline: none;
  background-color: transparent !important;
  background-image: url("gif/scroll3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 6px 18px;
  font-family: var(--ui);
  font-size: 12px;
  color: #000;
  cursor: pointer;
  box-shadow: none;
}

.btn98:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn98:active {
  box-shadow: none;
}

.btn98:hover {
  background-color: transparent !important;
  background-image:
    linear-gradient(0deg, rgba(255, 140, 0, 0.22), rgba(255, 140, 0, 0.22)),
    url("gif/scroll3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.applet__meta {
  font-family: var(--mono);
  font-size: 11px;
  margin: 0 0 6px;
}

.applet__canvas {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid rgba(0,0,0,0.85);
  background: #000;
}

.applet__row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.webcam__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.webcam__img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid rgba(0,0,0,0.85);
  background: #000;
}

.webcam__info {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
}

.webcam__name {
  font-weight: 800;
  margin-bottom: 2px;
}

.webcam__status,
.webcam__time {
  font-family: var(--mono);
  font-size: 12px;
}

.webring__badge {
  margin-top: 10px;
}

.guestbook {
  display: grid;
  gap: 8px;
}

.guestbook__row {
  display: grid;
  gap: 4px;
  font-family: var(--ui);
  font-size: 12px;
}

.guestbook__input {
  width: 100%;
  border: 2px solid rgba(0,0,0,0.85);
  background: rgba(255,255,255,0.9);
  color: #000;
  padding: 6px;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
}

.guestbook__list {
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.guestbook__list li {
  border: 2px dashed rgba(0,0,0,0.5);
  padding: 6px;
  background: rgba(255,255,255,0.55);
}

.shoutbox__head {
  margin-bottom: 8px;
}

.museo__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.museo__item {
  border: 2px solid rgba(0,0,0,0.75);
  background: rgba(255,255,255,0.55);
  padding: 6px;
  text-align: center;
}

.museo__item--empty {
  min-height: 92px;
  background: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.55);
  font-family: var(--mono);
  font-size: 10px;
}

.museo__item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.museo__label {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  word-break: break-word;
}

.msgbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.msgbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}

.msgbox__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
}

.msgbox__close {
  appearance: none;
  border: 2px solid rgba(0,0,0,0.85);
  background: #d7d7d7;
  padding: 0 6px;
  height: 18px;
  font-family: var(--ui);
  font-size: 12px;
  cursor: pointer;
}

.msgbox__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (max-width: 520px) {
  .win98__titlebar {
    font-size: 11px;
  }

  .btn98 {
    width: 100%;
  }

  .applet__row {
    gap: 6px;
  }
}

.msgbox__img {
  width: 100%;
  height: auto;
  border: 2px solid rgba(0,0,0,0.85);
  background: #000;
}

.msgbox__text {
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
}

.extras__title {
  margin: 0 0 8px;
  color: var(--hot);
  text-decoration: underline;
  font-weight: 800;
}

.fake-link {
  color: var(--hot);
  text-decoration: underline;
  cursor: not-allowed;
  opacity: 0.95;
}

.visit-map {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.3;
  white-space: pre-wrap;
}

.visit-map__places {
  margin: 0;
  padding-left: 18px;
}

.visit-map__places li.active {
  color: var(--hot);
  text-decoration: underline;
}

.visit-map__log {
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 12px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url("gif/textbottile.jpg");
  background-repeat: repeat;
  background-size: 220px auto;
  color: var(--text);
  font-family: var(--ui);
  text-shadow: var(--glow);
  overflow-x: hidden;
  cursor: url('gif/RE53BMXEP5YBOXQB4GRW62EN4OJ6A73C.gif'), auto;
  position: relative;
  font-synthesis: none;
}

/* Niente corsivo: solo normale e grassetto */
i,
em,
cite {
  font-style: normal;
}

body,
button,
input,
select,
textarea {
  font-style: normal;
}



.logo,
.textblock {
  font-family: var(--mono);
}

body.bg-default {
  background-color: #000000;
  background-image: url("gif/textbottile.jpg");
  background-repeat: repeat;
  background-size: 220px auto;
}

body.bg-arca {
  background-color: #1a1200;
  background-image: url("gif/yllw023.jpg");
  background-repeat: repeat;
  background-size: 260px auto;
}

body.bg-babele {
  background-color: #120804;
  background-image: url("gif/brwn012.jpg");
  background-repeat: repeat;
  background-size: 260px auto;
}

body.bg-deserto {
  background-color: #221600;
  background-image: url("gif/yllw007.gif");
  background-repeat: repeat;
  background-size: 260px auto;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  color: var(--accent);
}

#rain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

#crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

#seaDrain {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68vh;
  height: 68svh;
  pointer-events: none;
  z-index: 4;
  opacity: 0.66;
  transform: translateY(0);
  animation: sea-drain 19s ease-in-out 350ms forwards;
}

#seaDrain img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

body.crt-on #crt {
  opacity: 1;
}

#crt::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.04) 1px,
      var(--scanline) 2px,
      var(--scanline) 4px
    );
  mix-blend-mode: overlay;
}

#crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.75) 100%);
}

.site-header {
  position: relative;
  z-index: 3;
  padding: 24px 16px 8px;
  max-width: 1000px;
  margin: 0 auto;
}

.logo {
  margin: 0;
  padding: 16px;
  background-image: 
    linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.10)),
    url("gif/backgroundtile.jpg");
  background-repeat: repeat;
  background-size: 220px auto;
  border: none;
  box-shadow: 0 12px 30px var(--shadow);
  overflow-x: auto;
  color: #000;
  text-shadow: none;
}

.tagline {
  margin: 12px 0 8px;
  text-align: center;
  color: var(--hot);
  font-weight: 700;
  text-decoration: underline;
}

.blink {
  animation: blink 1s steps(2, jump-none) infinite;
}

body.blink-off .blink {
  animation: none;
}

@keyframes blink {
  50% { opacity: 0; }
}

.marquee {
  margin: 12px 0 16px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.60), rgba(0,0,0,0.60)),
    url("gif/3LJBJWZUGBMRDMR6WM3NIXUX4EA6W7RL.gif");
  background-repeat: repeat;
  background-size: auto 32px;
  overflow: hidden;
}

.sticker-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 12px 0 16px;
  border: none;
  background-image: 
    linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.10)),
    url("gif/backgroundtile.jpg");
  background-repeat: repeat;
  background-size: 220px auto;
  box-shadow: 0 12px 30px var(--shadow);
  color: #000;
  text-shadow: none;
}

.sticker {
  image-rendering: auto;
  max-height: 100px;
  height: auto;
  width: auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}

.marquee__inner {
  display: inline-flex;
  gap: 16px;
  padding: 8px 0;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 16s linear infinite;
}

.sep { color: var(--hot); }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.control-panel {
  border: none;
  background-image: 
    linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.10)),
    url("gif/backgroundtile.jpg");
  background-repeat: repeat;
  background-size: 220px auto;
  padding: 12px;
  box-shadow: 0 12px 30px var(--shadow);
  color: #000;
  text-shadow: none;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  justify-content: center;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  background-image: url("gif/scroll3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #000000;
  font-family: var(--ui);
  font-weight: 700;
  box-shadow: none;
}

.toggle input {
  accent-color: var(--accent);
}

.utils {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  margin-top: 10px;
}

.picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  background-image: url("gif/scroll3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #000;
}

.picker select {
  font-family: var(--mono);
  background: rgba(255, 255, 255, 0.70);
  color: #120b00;
  border: 1px solid rgba(0, 0, 0, 0.6);
  padding: 6px 8px;
}

.search input {
  width: min(520px, 88vw);
  padding: 10px 12px;
  border: 2px solid rgba(0, 0, 0, 0.55);
  background: rgba(255, 255, 255, 0.70);
  color: #000;
  outline: none;
  font-family: var(--ui);
  font-weight: 700;
}

.search input:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18);
}

.panic {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 10px 12px;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent;
  background-image: url("gif/scroll3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  color: #000;
  font-family: var(--ui);
  font-weight: 700;
  cursor: pointer;
}

.panic:hover {
  background-color: transparent;
  background-image:
    linear-gradient(0deg, rgba(255, 140, 0, 0.20), rgba(255, 140, 0, 0.20)),
    url("gif/46HF5ZLU4YYOQ2A2WZFO64BZDB5VW62L.gif"),
    url("gif/scroll3.png");
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-size: auto 22px, auto 16px, 100% 100%;
  background-position: center, bottom center, center;
}

.panic:focus,
.panic:focus-visible,
.summon:focus,
.summon:focus-visible,
.btn98:focus,
.btn98:focus-visible {
  outline: none;
  box-shadow: none;
}

.summon {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 10px 12px;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent;
  background-image: url("gif/scroll3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  color: #000000; /* Testo nero sui pulsanti */
  font-family: var(--ui);
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.summon:hover {
  background-color: transparent;
  background-image:
    linear-gradient(0deg, rgba(255, 140, 0, 0.22), rgba(255, 140, 0, 0.22)),
    url("gif/scroll3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.summon:disabled {
  opacity: 0.6;
  cursor: wait;
}

.summon--on {
  box-shadow: none;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
  font-size: 12px;
}

.stats .badge {
  font-size: 11px;
  padding: 4px 8px;
  opacity: 0.9;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: none;
  background-image: url("gif/scroll3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #000000; /* Testo nero sui badge */
  font-family: var(--ui);
  font-weight: 700;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.button88 {
  display: inline-flex;
  width: 88px;
  height: 31px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, rgba(255,230,0,0.14), rgba(0,0,0,0.45));
  color: #120b00;
  padding: 0;
  overflow: hidden;
}

.button88:hover {
  background: linear-gradient(180deg, rgba(255,140,0,0.20), rgba(0,0,0,0.45));
  text-decoration: none;
}

.button88 img {
  display: block;
  width: 88px;
  height: 31px;
}

.toc {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin: 16px auto 0;
  padding: 0 16px;
  margin-left: auto;
  margin-right: auto;
}

.toc__title {
  margin: 16px 0 8px;
  color: var(--hot);
  letter-spacing: 0.08em;
  font-family: var(--ui);
  font-weight: 800;
  text-decoration: underline;
}

.toc ol {
  margin: 0;
  padding: 12px 12px 12px 28px;
  border: none;
  background-image: 
    linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.10)),
    url("gif/backgroundtile.jpg");
  background-repeat: repeat;
  background-size: 220px auto;
  box-shadow: 0 12px 30px var(--shadow);
  color: #000;
}

.toc a {
  display: inline-block;
  padding: 2px 0;
  color: #000;
}

.toc a:visited {
  color: #000;
}

.toc a:hover {
  color: #000;
}

.content {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin: 20px auto 0;
  padding: 0 16px 80px;
  margin-left: auto;
  margin-right: auto;
}

.loading {
  border: 2px dashed rgba(0, 0, 0, 0.55);
  padding: 16px;
  background: rgba(255, 255, 255, 0.70);
  color: #000000; /* Testo nero nel caricamento */
}

.local-loader {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.local-loader__input {
  display: none;
}

.local-loader__button {
  padding: 10px 12px;
  border: 2px solid rgba(0, 0, 0, 0.55);
  background: rgba(255, 255, 255, 0.70);
  color: #000;
  font-family: var(--mono);
  cursor: pointer;
}

.local-loader__button:hover {
  background: rgba(255, 255, 255, 0.50);
}

.hint {
  color: var(--muted);
}

.chapter {
  margin: 34px 0;
  border-top: 2px solid rgba(0, 0, 0, 0.55);
  padding-top: 18px;
}

.chapter h2 {
  margin: 0 0 12px;
  color: var(--hot); /* Stesso colore dell'indice */
}

.textblock {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  overflow-y: hidden;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 14px;
  border: none;
  background-image: 
    linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.10)),
    url("gif/backgroundtile.jpg");
  background-repeat: repeat;
  background-size: 220px auto;
  color: #000000; /* Testo nero sulla pergamena */
  text-shadow: none;
  font-weight: 500;
}

@media (max-width: 780px) {
  .logo {
    padding: 10px;
    font-size: clamp(6px, 1.9vw, 11px);
    line-height: 1.05;
    white-space: pre;
    overflow-x: auto;
  }

  .content {
    padding: 0 10px 56px;
  }

  .chapter h2 {
    font-size: clamp(15px, 4.4vw, 20px);
  }

  .textblock {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .controls,
  .utils {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .toggle,
  .panic,
  .summon {
    flex: 0 0 auto;
    padding: 7px 9px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
  }

  .search input {
    width: 64vw;
    min-width: 170px;
    padding: 8px 10px;
  }

  .buttons {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    padding-bottom: 0;
    gap: 6px;
  }

  .button88 {
    width: 70px;
    height: 24px;
    flex: 0 0 auto;
  }

  .button88 img {
    width: 70px;
    height: 24px;
  }

  .extra-gifs {
    gap: 8px;
  }

  .extra-gifs img {
    max-height: 52px;
  }
}

.chapter-sticker {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}

.chapter-sticker img {
  max-height: 120px;
  width: auto;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}

.chapter-sticker-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
  max-width: 1000px;
  padding: 0 16px;
  margin-left: auto;
  margin-right: auto;
}

.chapter-sticker-row img {
  max-height: 120px;
  width: auto;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}

.final-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 26px 0 10px;
  max-width: 1000px;
  padding: 0 16px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.final-divider img {
  height: 40px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}

.separator {
  margin: 18px 0;
  border: 0;
  height: 26px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 26px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}

.separator--water {
  background-image: url("gif/AJOEQZYNU743RBLYBQPMZE2VR6ZUQ7C5.gif");
}

.separator--fire {
  background-image: url("gif/46HF5ZLU4YYOQ2A2WZFO64BZDB5VW62L.gif");
}

mark {
  background: rgba(255, 251, 0, 0.22);
  color: var(--text);
  padding: 0 2px;
}

.footer {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin: 22px auto 0;
  padding: 20px 16px;
  border-top: 2px solid rgba(255, 251, 0, 0.45);
  color: var(--hot);
  font-family: var(--ui);
  font-weight: 700;
  text-align: left;
  background-image: url("gif/46HF5ZLU4YYOQ2A2WZFO64BZDB5VW62L.gif");
  background-repeat: repeat-x;
  background-position: top;
  background-size: auto 18px;
}

.footer a {
  color: var(--hot);
  text-decoration: underline;
}

.awards {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin: 20px auto 0;
  padding: 0 16px;
}

.vintage-gallery {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin: 10px auto 0;
  padding: 0 16px;
}

.vintage-gallery__title {
  margin: 8px 0 10px;
  color: var(--hot);
  text-decoration: underline;
  font-size: 18px;
}

.vintage-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  padding: 10px;
  border: 2px solid #7f7f7f;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-right-color: #5a5a5a;
  border-bottom-color: #5a5a5a;
  background-color: #d4d0c8;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.12), rgba(255,255,255,0.07)),
    url("gif/backgroundtile.jpg");
  background-repeat: repeat;
  background-size: 220px auto;
  box-shadow: none;
}

.vintage-gallery__item {
  margin: 0;
  padding: 6px;
  border: 2px solid #7f7f7f;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-right-color: #5a5a5a;
  border-bottom-color: #5a5a5a;
  background: #c9c5be;
  color: #000;
  text-shadow: none;
}

.vintage-gallery__item img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: #efefef;
  border: 2px solid #7f7f7f;
  border-top-color: #5a5a5a;
  border-left-color: #5a5a5a;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.vintage-gallery__item figcaption {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  word-break: break-word;
}

.awards__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 12px 0 16px;
  border: 2px solid rgba(0, 0, 0, 0.55);
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.50), rgba(0,0,0,0.40)),
    var(--box-bg);
  background-repeat: repeat;
  background-size: 220px auto;
  box-shadow: 0 12px 30px var(--shadow);
}

.award {
  image-rendering: auto;
  max-height: 100px;
  height: auto;
  width: auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}

.footer__arrow {
  text-align: center;
  margin-bottom: 16px;
}

.footer__arrow img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}

.footer__arrow img:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.65));
}

.separator--custom {
  border: none;
  height: auto;
  margin: 20px 0;
}

.graveyard {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin: 22px auto 0;
  padding: 0 16px;
}

.graveyard__line {
  height: 18px;
  border: 0;
  background-image: url("gif/46HF5ZLU4YYOQ2A2WZFO64BZDB5VW62L.gif");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 18px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
  margin: 10px 0 14px;
}

.graveyard__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 12px;
  border: 2px dashed rgba(255, 230, 0, 0.55);
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.70), rgba(0,0,0,0.70)),
    url("gif/yllw007.gif");
  background-repeat: repeat;
  background-size: 140px auto;
  box-shadow: 0 12px 30px var(--shadow);
}

.graveyard__img {
  max-height: 62px;
  width: auto;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}

.footer .small {
  font-size: 12px;
}

.warning {
  color: #ffd0d0;
}

#flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: rgba(255, 255, 255, 0.0);
  opacity: 0;
}

.jump-edge {
  position: fixed;
  right: 10px;
  bottom: 26vh;
  z-index: 9997;
  border: none;
  padding: 8px 10px;
  min-width: 54px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 12px;
  color: #000;
  background-image: url("gif/scroll3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}

@media (min-width: 781px) {
  .jump-edge {
    display: none !important;
  }
}

body.flash #flash {
  animation: flash 600ms ease-out 1;
}

@keyframes flash {
  0% { opacity: 0; }
  12% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes sea-drain {
  0% {
    transform: translateY(0);
    opacity: 0.66;
  }
  75% {
    opacity: 0.48;
  }
  100% {
    transform: translateY(115%);
    opacity: 0;
  }
}

@media (min-width: 781px) {
  html {
    scrollbar-width: auto;
    scrollbar-color: #7c7c7c #c0c0c0;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 18px;
    height: 18px;
    background: #c0c0c0;
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track {
    background: #c0c0c0;
    border: 1px solid #f4f4f4;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #dcdcdc 0%, #a8a8a8 100%);
    border: 1px solid #5f5f5f;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #6f6f6f;
  }

  html::-webkit-scrollbar-corner,
  body::-webkit-scrollbar-corner {
    background: #c0c0c0;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.lowfi {
  text-shadow: none;
}

body.lowfi #crt,
body.lowfi #rain {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__inner { animation: none; }
  .blink { animation: none; }
  #seaDrain { animation-duration: 0.01ms; }
}