html { background: #0b1a0c url(../img/tile.jpg) repeat; }
body {
  margin: 0;
  padding: 12px 8px 40px;
  color: #e9e4c8;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  cursor: url(../img/cursor.png) 2 2, auto;
}
a { color: #ffd84a; }
a:visited { color: #c9b25a; }
a:hover { color: #fff; background: #2f5a1e; }

.page {
  max-width: 780px;
  margin: 0 auto;
  background: #10240f;
  border: 4px ridge #8a7a3a;
  box-shadow: 0 0 0 2px #000;
}

.header { text-align: center; padding: 14px 10px 6px; background: linear-gradient(#1f3d16, #10240f); border-bottom: 3px double #8a7a3a; }
.header img.seal { width: 120px; height: 120px; border-radius: 50%; border: 3px solid #8a7a3a; }
.header h1 {
  margin: 6px 0 0;
  font-size: 34px;
  color: #ffd84a;
  text-shadow: 2px 2px 0 #000, 0 0 6px #4a7a1f;
  letter-spacing: 1px;
}
.header .sub { font-style: italic; color: #b8c98a; font-size: 14px; }

.marquee { background: #000; color: #9fe05a; font-family: "Courier New", monospace; font-size: 14px; border-top: 1px solid #333; border-bottom: 1px solid #333; overflow: hidden; white-space: nowrap; }
.marquee span { display: inline-block; padding-left: 100%; animation: scroll 38s linear infinite; }
@keyframes scroll { to { transform: translateX(-100%); } }

.layout { display: flex; }
.nav { width: 170px; flex: none; padding: 10px 8px; background: #0c1c0b; border-right: 2px groove #8a7a3a; }
.nav a {
  display: block;
  margin: 0 0 7px;
  padding: 5px 6px;
  background: #3a5a22;
  border: 3px outset #7a9a4a;
  color: #fff6c8;
  font: bold 13px Verdana, Arial, sans-serif;
  text-decoration: none;
  text-align: center;
}
.nav a:active { border-style: inset; }
.nav a:hover { background: #4f7a2c; color: #fff; }
.nav .vol { margin: 6px 0 10px; padding: 6px; background: #000; border: 2px inset #4a5a3a; text-align: center; font: bold 10px Verdana, sans-serif; color: #9fe05a; }
.nav .vol .lbl { margin-bottom: 4px; letter-spacing: 1px; }
.nav .vol .bar { display: flex; gap: 2px; justify-content: center; margin-bottom: 5px; }
.nav .vol .bar i { width: 8px; height: 10px; background: #1a2a12; }
.nav .vol .bar i.on { background: #9fe05a; }
.nav .vol button { background: #2a3a1e; color: #e8f0c8; border: 2px outset #5a7a3a; font: bold 10px Verdana, sans-serif; padding: 2px 6px; cursor: pointer; }
.nav .vol button:active { border-style: inset; }
.nav .badge { display: block; margin: 14px auto 0; text-align: center; font: 10px Verdana, sans-serif; color: #8fa06a; }
.nav img { max-width: 100%; }

.content { flex: 1; padding: 14px 18px 18px; min-width: 0; }
.content h2 { color: #ffd84a; font-size: 24px; margin: 6px 0 10px; border-bottom: 1px dashed #6a7a3a; }
.content h3 { color: #d8e8a0; margin: 18px 0 6px; }
.content p { line-height: 1.45; }
.content img.photo { max-width: 100%; border: 6px solid #e8e0c0; box-shadow: 3px 3px 0 #000; }
.content .caption { font-size: 13px; font-style: italic; color: #aab88a; }
.center { text-align: center; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.new { color: #ff4040; font: bold 11px Verdana, sans-serif; }
hr { border: 0; height: 12px; background: url(../img/lilyrule.png) repeat-x center; margin: 14px 0; }

.footer { text-align: center; padding: 10px; font: 11px Verdana, Arial, sans-serif; color: #8fa06a; border-top: 3px double #8a7a3a; }
.counter { display: inline-block; background: #000; color: #4f4; font: bold 16px "Courier New", monospace; padding: 2px 6px; border: 2px inset #555; letter-spacing: 3px; }
.webring { margin: 8px auto; padding: 6px; border: 2px outset #7a9a4a; display: inline-block; background: #1a3012; }

.box { border: 2px groove #8a7a3a; background: #0c1c0b; padding: 10px 12px; margin: 12px 0; }
.box.paper { background: #e9e1c4; color: #2a2010; border: 1px solid #8a7a3a; font-family: Georgia, serif; }

.verse { margin: 0 0 16px; }
.verse b { color: #ffd84a; }
.verse .lines { white-space: pre-line; padding-left: 14px; border-left: 2px solid #3a5a22; }

.win {
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  font: 13px "MS Sans Serif", Tahoma, Arial, sans-serif;
  max-width: 460px;
  margin: 16px auto;
}
.win .title { background: linear-gradient(90deg, #0a3a0a, #3a8a2a); color: #fff; font-weight: bold; padding: 3px 6px; display: flex; justify-content: space-between; }
.win .body { padding: 10px; }
.win input[type=text], .win input[type=password], .win select {
  width: 100%;
  box-sizing: border-box;
  border: 2px inset #fff;
  padding: 4px;
  font: 14px "Courier New", monospace;
}
.win button, button.retro {
  background: #c0c0c0;
  border: 2px outset #fff;
  padding: 4px 14px;
  font: 13px Tahoma, Arial, sans-serif;
  cursor: pointer;
}
.win button:active, button.retro:active { border-style: inset; }
.win .msg { min-height: 1.3em; margin-top: 8px; color: #800000; }

.chat { height: 300px; overflow-y: auto; background: #fff; border: 2px inset #fff; padding: 6px; font: 13px Tahoma, Arial, sans-serif; }
.chat .m { margin: 0 0 6px; }
.chat .m .n { font-weight: bold; }
.chat .m.d .n { color: #0a6a0a; }
.chat .m.u .n { color: #00008a; }
.chat .m.s { color: #777; font-style: italic; }
.chat-row { display: flex; gap: 6px; margin-top: 6px; }
.chat-row input { flex: 1; }

.vcr { background: #111; border: 3px ridge #555; padding: 10px; margin: 10px 0; }
.vcr .screen { position: relative; background: #000; aspect-ratio: 4 / 3; overflow: hidden; }
.vcr video { width: 100%; height: 100%; display: block; background: #000; }
.vcr .osd { position: absolute; top: 12px; left: 16px; color: #fff; font: bold 22px "Courier New", monospace; text-shadow: 2px 2px 0 #000; pointer-events: none; }
.vcr .deck { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; background: linear-gradient(#3a3a3a, #1a1a1a); padding: 6px; border: 1px solid #000; }
.vcr .deck button { background: #2a2a2a; color: #ddd; border: 2px outset #555; font: bold 12px Arial, sans-serif; padding: 5px 9px; cursor: pointer; }
.vcr .deck button:active { border-style: inset; }
.vcr .deck .ctr { margin-left: auto; background: #000; color: #f33; font: bold 16px "Courier New", monospace; padding: 2px 8px; border: 2px inset #444; letter-spacing: 2px; }
.vcr .deck input[type=range] { flex: 1 1 100%; accent-color: #9fe05a; }
.tapelist { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.tape { width: 168px; background: #1b1b1b; border: 2px solid #000; padding: 6px; cursor: pointer; text-align: center; font: 12px "Comic Sans MS", cursive; color: #222; }
.tape .label { background: #f2ecd6; padding: 8px 4px; transform: rotate(-1deg); border: 1px solid #b8ad8a; }
.tape:hover .label { background: #fff8e0; }
.tape.on { outline: 3px solid #9fe05a; }

.gb .entry { border: 1px solid #3a5a22; background: #0c1c0b; padding: 8px 10px; margin: 0 0 10px; }
.gb .entry .who { font: bold 13px Verdana, sans-serif; color: #d8e8a0; }
.gb .entry .when { font: 11px Verdana, sans-serif; color: #7a8a5a; float: right; }

.scare { position: fixed; inset: 0; z-index: 9999; background: #000 center / cover no-repeat; display: none; }
.scare.on { display: block; animation: shake .08s infinite; }
@keyframes shake { 0% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-8px,6px) scale(1.1); } 100% { transform: translate(6px,-5px) scale(1.07); } }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8000;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  animation: grain .4s steps(3) infinite;
}
@keyframes grain { 33% { background-position: 0 0, -40px 20px; } 66% { background-position: 0 0, 30px -30px; } }
html.stage1 .page { filter: saturate(.85) brightness(.92); }
html.stage2 .page, html.stage3 .page { filter: saturate(.7) brightness(.82) hue-rotate(-12deg); }
body.flick .page { filter: brightness(.2) contrast(2) !important; }
.follower { position: fixed; left: 0; top: 0; width: 40px; opacity: .55; z-index: 7999; pointer-events: none; filter: grayscale(.6) brightness(.7); }

.glyphkey { position: absolute; right: -2px; top: 0; width: 46px; opacity: .07; pointer-events: none; }
.glyphkey:hover { opacity: .07; }

@media (max-width: 640px) {
  .layout { flex-direction: column; }
  .nav { width: auto; border-right: 0; border-bottom: 2px groove #8a7a3a; display: flex; flex-wrap: wrap; gap: 4px; }
  .nav a { flex: 1 1 40%; margin: 0; }
  .nav .vol { flex: 1 1 100%; margin: 4px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
  .nav .vol .lbl, .nav .vol .bar { margin: 0; }
  .nav .badge { display: none; }
  .header h1 { font-size: 24px; }
  .content { padding: 12px; }
  .tape { width: calc(50% - 6px); box-sizing: border-box; }
}