/* Shared 90s touches for every page: cursor, scrollbars, text highlight, ridge borders, footer. */

:root {
  --ridge: 4px ridge #6f64b3;   /* bevel border for straight-edged boxes */

  /* Ridge shading breaks up on curves, so round things get an even
     three-band bevel instead: light band with dark rings either side. */
  --ring: 3px solid #9d93e0;
  --ring-shadow: 0 0 0 2px #3a3275, inset 0 0 0 2px #3a3275, 0 6px 18px rgba(0,0,0,.22);
  --photo-ring: 3px solid #feb028;
  --photo-ring-shadow: 0 0 0 2px #7a4d00, 0 6px 18px rgba(0,0,0,.3);
}

/* pixel octopus cursor (coral version over anything clickable) */
html, body {
  cursor: url('/images/ui/cursor.png') 1 1, auto;
}
a, button, button#soundGate, .btn, label, summary {
  cursor: url('/images/ui/cursor-link.png') 1 1, pointer;
}

/* text highlight */
::selection {
  background: #feb028;
  color: #13092D;
}

/* chunky navy + yellow scrollbars (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #13092D; }
::-webkit-scrollbar-thumb {
  background: #feb028;
  border: 3px outset #feb028;
}
::-webkit-scrollbar-corner { background: #13092D; }
/* Firefox has no bevelled scrollbars, so it just gets the colors */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: #feb028 #13092D; }
}

/* FOOTER */
#footer {
  height: auto;
  padding: 18px 10px 16px;
  background-color: #13092D;
  border-top: var(--ridge);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: #fceaff;
}
#footer .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
#footer .buttons a,
#footer .buttons img {
  display: block;
  line-height: 0;
}
#footer .buttons img {
  width: 110px;                /* standard 88x31 buttons shown at 1.25x */
  height: 39px;
  image-rendering: pixelated;
}
#footer .meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 8px;
}
#footer .counter .digits {
  display: inline-flex;
  gap: 3px;
  margin-left: 8px;
  padding: 3px;
  background: #000;
  border: 3px inset #6f64b3;
  vertical-align: middle;
}
#footer .counter .digits span {
  width: 19px;
  background: #1a1a1a;
  color: #feb028;
  font: bold 20px/27px "Courier New", Courier, monospace;
  text-align: center;
}
#footer .webmaster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fc7557;
  font-weight: bold;
}
#footer .webmaster img {
  width: 36px;                  /* 1.5x the pixel sprite */
  height: 33px;
  image-rendering: pixelated;
}
#footer .webmaster:hover { color: #feb028; }
#footer .copy {
  font-size: 15px;
  opacity: .8;
}

/* text for screen readers only */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* bubble nav buttons get the same bevel ring as the label bubbles
   (a.btn outranks each page's own .btn rules) */
a.btn {
  border: var(--ring);
  box-shadow: var(--ring-shadow);
}
a.btn:hover {
  box-shadow: 0 0 0 2px #3a3275, inset 0 0 0 2px #3a3275, 0 8px 18px rgba(0,0,0,.3);
}

/* "click for bubbles" sound button: rectangular with the ridge bevel
   (button#soundGate outranks the home page's own #soundGate rule) */
button#soundGate {
  border-radius: 0;
  border: var(--ridge);
  background: #13092D;
  color: #feb028;
}
button#soundGate:hover { filter: brightness(1.15); }
button#soundGate:active { border-style: groove; }

/* "email copied!" note shown above email links when clicked (see retro.js) */
.copied-note {
  position: absolute;
  z-index: 10000;
  padding: 4px 10px;
  background: #13092D;
  border: var(--ridge);
  color: #feb028;
  font: bold 14px/1.3 "Courier New", Courier, monospace;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .5s ease;
}
.copied-note.fade { opacity: 0; }