@font-face {
  font-family: 'Scenic Pixel Serif';
  src: url('assets/fonts/scenic-pixel-serif-regular.woff2?v=2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Scenic Pixel Serif';
  src: url('assets/fonts/scenic-pixel-serif-italic.woff2?v=2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
:root {
  --portal-font: 'Scenic Pixel Serif', 'Times New Roman', Times, serif;
  --frame: #303b43;
  --lime: linear-gradient(180deg, #fffc9a, #e4ef35 58%, #71bb12);
  --pink: linear-gradient(105deg, #f9bddd, #ed66c7 58%, #ce10a1);
  --blue: linear-gradient(180deg, #9de9d2, #569edc 50%, #2246c4);
  --orange: linear-gradient(110deg, #fff4af, #ffd31c 50%, #f79432);
  --silver: linear-gradient(180deg, #e8f2ff, #b9dfbc 48%, #7bc33d);
  --violet: linear-gradient(110deg, #f4b7ff, #cd87ef 50%, #819bef);
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; scrollbar-gutter: stable; }
/* Style the browser's real scrollbar; scrolling stays entirely native. */
html::-webkit-scrollbar { width: 16px; height: 16px; background: #c0c0c0; }
html::-webkit-scrollbar-track { background: repeating-conic-gradient(#ddd 0 25%, #b5b5b5 0 50%) 0 0 / 2px 2px; }
html::-webkit-scrollbar-thumb { background: #c0c0c0; border: 3px outset #eee; min-height: 32px; }
html::-webkit-scrollbar-corner { background: #c0c0c0; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: #c0c0c0 #dedede; scrollbar-width: auto; }
}
body {
  margin: 0;
  padding: 0 0 16px;
  background: #08091d url('assets/bg_stars.gif');
  color: #141421;
  font-family: var(--portal-font);
  font-size: 12px;
  font-weight: 400;
  font-synthesis: none;
  font-kerning: none;
  font-variant-ligatures: none;
  cursor: crosshair;
}
b, strong { font-weight: inherit; }
table { border-collapse: collapse; }
td { vertical-align: top; }
img { border: 0; }
a { color: #071cba; }
a:visited { color: #650382; }
a:hover { color: #ef0000; background: #fff600; }
a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #ff008c;
  outline-offset: 2px;
}
input, textarea, button { font: inherit; }
marquee { display: block; }
body > table marquee { line-height: 20px; }
.blink { animation: blink 1s step-end infinite; }
.blink2 { animation: blink .6s step-end infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.site-shell { border: 3px ridge #aeb5b9 !important; background: #a8b4bc; }
.masthead { background: linear-gradient(#ff1c2c, #f00 68%, #d00012); }
.masthead td { vertical-align: middle; padding: 2px; }
.masthead td > img { display: block; margin-inline: auto; }
.masthead .masthead-title { display: block; width: 100%; height: 84px; }
.masthead-tagline { display: block; width: 100%; height: 36px; border: 2px solid var(--frame); }
.nav-table { table-layout: fixed; }
.navcell { padding: 0; border: 2px solid var(--frame) !important; }
.navcell a { display: block; text-decoration: none; color: #000; }
.navcell img { display: block; width: 100%; height: 34px; }
.navcell:hover { filter: brightness(1.17); }
.warning-panel { background: var(--blue); border: 2px solid var(--frame) !important; }
.warning-panel img { vertical-align: middle; }
.body-columns { table-layout: fixed; }
.left-sidebar { width: 156px; background: linear-gradient(90deg, #cdcacc, #afb7c3, #ddd4cd); }
.right-sidebar { width: 172px; background: linear-gradient(90deg, #dcd2d5, #aebaca, #e2d4db); }
.center-column { background: #a7b4bd; border-left: 2px solid var(--frame) !important; border-right: 2px solid var(--frame) !important; }
/* Plain lettering uses foreground/background contrast, with no text effects. */
.center-column {
  font-weight: 400;
  color: #000;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.center-column :is(span, b, strong, i, u, figcaption, form td) {
  color: inherit !important;
  font-weight: 400 !important;
}
.center-column :is(input, textarea) { color: #15151d; -webkit-text-stroke: 0; text-shadow: none; }
.center-column .bevelbtn { font-family: inherit; font-weight: 400; color: #fff; }
.sidebox { border: 2px solid var(--frame); margin-bottom: 5px; box-shadow: 1px 1px 0 #f5d7f8; }
.sidebox .hd { padding: 0; border-bottom: 2px solid var(--frame); text-align: center; }
.sidebox .hd img { display: block; width: 100%; }
.sidebox:nth-of-type(1) { background: var(--silver) !important; }
.sidebox:nth-of-type(3) { background: var(--pink) !important; }
.gearitem { font-size: 13px; font-weight: 400; padding: 5px; border-bottom: 1px solid var(--frame); }
.gearitem:nth-of-type(3n) { background: var(--pink) !important; }
.gearitem:nth-of-type(3n + 1) { background: var(--lime) !important; }
.gearitem:nth-of-type(3n + 2) { background: var(--blue) !important; }
.intro-panels { border-collapse: separate; border-spacing: 0 4px; }
.intro-panels > tbody > tr > td { border: 1px solid var(--frame) !important; padding: 9px 8px; box-shadow: inset 0 1px #fff9; }
.intro-panels > tbody > tr:nth-child(1) > td { background: linear-gradient(180deg, #ffffcc, #cccc99); }
.intro-panels > tbody > tr:nth-child(2) > td { background: linear-gradient(180deg, #ccffff, #99cccc); }
.intro-panels > tbody > tr:nth-child(3) > td { background: linear-gradient(180deg, #ffccff, #cc99cc); }
.intro-panels > tbody > tr:nth-child(4) > td { background: linear-gradient(110deg, #031426, #272553, #071b24); color: #fff; }
.intro-panels > tbody > tr > td > span { font-size: 18px !important; line-height: 1.3; }
.intro-panels b, .intro-panels span span { font-size: inherit !important; }
/* 32px glyphs at 16px give finer, half-pixel edges with normal antialiasing.
   Black lettering on light, web-safe gradients needs no outline or shadow. */
.intro-panels .bitmap-copy {
  font-size: 16px;
  color: #000;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.intro-panels .bitmap-copy > td { line-height: 20px; }
.intro-panels > tbody > .bitmap-copy > td > span { display: block; font-size: 16px !important; line-height: 20px; }
.panel { border: 2px solid var(--frame) !important; box-shadow: inset 0 1px #ffffcc; }
.tv-panel { background: linear-gradient(110deg, #dc009f, #ff002d 65%, #e90800); color: #fff; }
.crew-panel { background: var(--silver); }
.crew-panel table { table-layout: fixed; }
.crew-panel table td { border: 1px solid var(--frame) !important; padding: 2px; }
.crew-panel table td:nth-child(1) { background: var(--lime); }
.crew-panel table td:nth-child(2) { background: var(--orange); }
.crew-panel table td:nth-child(3) { background: var(--blue); }
.crew-panel table img { display: block; }
.shows-panel { background: var(--orange); }
.photos-panel { background: var(--violet); }
.guestbook-panel { background: var(--silver); }
.section-title { display: block; width: 100%; height: 42px; margin: 0 0 6px; border: 1px solid var(--frame); object-fit: fill; }
.chick {
  display: inline-block; width: 100%; height: 34px; line-height: 32px;
  border: 1px solid var(--frame); margin-bottom: 2px;
  text-align: center; color: #fff !important; font-size: 17px;
  text-decoration: none;
  background-image: linear-gradient(#00be88, #0558e1, #2414b8) !important;
}
.chick:nth-of-type(2) { background-image: linear-gradient(90deg, #ff7600, #da2600) !important; }
.chick:nth-of-type(3) { background-image: linear-gradient(90deg, #008a33, #52c500) !important; }
.chick:nth-of-type(4) { background-image: linear-gradient(90deg, #ee1ea7, #bd001c) !important; }
.bevelbtn { border: 3px outset #d3d9eb; background: var(--blue); color: #fff; font: 13px var(--portal-font); padding: 3px 12px; cursor: pointer; }
.bevelbtn:active { border-style: inset; }
.stamp { display: inline-block; border: 2px solid #f00; color: #f00; padding: 2px 8px; background: #fff6a0; font-size: 13px; transform: rotate(-6deg); }
.hazard { background: repeating-linear-gradient(90deg, #a1bbc1 0, #fff7e4 6px, #526175 10px, #e8aeda 18px, #747e96 22px); }
.spark { position: fixed; pointer-events: none; font-size: 10px; z-index: 9999; animation: spark-fall 480ms steps(15, end) forwards; }
@keyframes spark-fall { to { transform: translateY(30px); opacity: 0; } }
#eq { transform-origin: left; animation: eq-wiggle 1440ms steps(1, end) infinite; }
@keyframes eq-wiggle {
  0%, 100% { transform: scaleX(.62); }
  12.5% { transform: scaleX(.9); }
  25% { transform: scaleX(.35); }
  37.5% { transform: scaleX(.78); }
  50% { transform: scaleX(.52); }
  62.5% { transform: scaleX(.96); }
  75% { transform: scaleX(.43); }
  87.5% { transform: scaleX(.7); }
}
.photo-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5px; margin-top: 10px; text-align: left; }
.photo-grid figure { margin: 0; min-width: 0; border: 1px solid var(--frame); background: var(--orange); align-self: start; }
.photo-grid figure:nth-child(2n) { background: var(--silver); }
.photo-grid figure:last-child { grid-column: 1 / -1; background: var(--lime); }
.photo-grid figure > img, .photo-grid noscript img { display: block; width: 100%; height: auto; background: linear-gradient(145deg, #2d3754, #725e87, #374a64); color: #fff; }
.photo-grid figcaption { padding: 5px 7px; font-size: 12px; border-top: 1px solid var(--frame); }
.photo-grid img[data-src] { visibility: hidden; }
.photo-grid figure:has(img[data-src]) { background: linear-gradient(145deg, #2d3754, #725e87, #374a64); color: #fff; }
.sound-preview { position: relative; }
.sound-trigger { cursor: pointer; text-decoration: underline; }
.sound-card {
  display: none; position: absolute; z-index: 100; right: 100%; top: -55px;
  width: 276px; padding: 4px; border: 2px solid #21252e;
  background: linear-gradient(145deg, #e3ec00, #ff901a 45%, #ee09b5);
  color: #111; box-shadow: 2px 2px 0 #c1d0d9, -1px -1px 0 #fce6ff;
  text-align: left; font-size: 13px; line-height: 1.4;
  /* Intentionally immediate: no opacity animation or transition. */
}
.sound-card img { display: block; width: 100%; height: auto; border: 1px solid #343442; }
.sound-card .sound-caption { display: block; padding: 5px; background: var(--lime); border: 1px solid #343442; }
.sound-preview:hover .sound-card,
.sound-preview:focus-within .sound-card { display: block; }
.sound-preview.preview-dismissed .sound-card { display: none; }
.talk-list { font-size: 11px !important; }
.talk-list td { padding: 3px 1px; }
@media (prefers-reduced-motion: reduce) {
  .blink, .blink2, #eq { animation: none; }
  .spark { display: none; }
}