/* ==========================================================
   THE FOXXO DEN : shared look. Loaded by the shell and by
   every page. Edit the colours here to re-skin the whole site.
   ========================================================== */
@font-face { font-family: "Press Start 2P"; src: url(../fonts/PressStart2P-Regular.ttf); font-display: swap; }
@font-face { font-family: "VT323"; src: url(../fonts/VT323-Regular.ttf); font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(../fonts/Silkscreen-Regular.ttf); font-display: swap; }
@font-face { font-family: "Silkscreen"; font-weight: bold; src: url(../fonts/Silkscreen-Bold.ttf); font-display: swap; }

:root {
  --night: #08031c;
  --panel: #120838;
  --panel2: #1c0e4e;
  --gold: #ffd23f;
  --gold-lo: #bd8416;
  --orange: #ff8f1f;
  --rust: #c25a18;
  --cream: #fff0dc;
  --pink: #ff8ad0;
  --violet: #a06aff;
  --sky: #7fd0ff;
  --sock-a: #d8942c;
  --sock-b: #fff6e6;
  --link: #7fe9ff;
  --visited: #ff9de2;
  --gray: #c0c0c0;
}

* { box-sizing: border-box; }

html {
  cursor: url(../img/cursor.png) 1 1, auto;
  -webkit-text-size-adjust: 100%;
}
a, button, summary, label, [data-click], input[type=range] {
  cursor: url(../img/cursor-link.png) 11 1, pointer;
}
body {
  margin: 0;
  color: var(--cream);
  font: 20px/1.15 "VT323", "Courier New", monospace;
}
img { image-rendering: pixelated; max-width: 100%; }
a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: var(--gold); background: #7a2a9a; text-decoration: wavy underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px dashed var(--gold); outline-offset: 2px;
}
h1, h2, h3 { font-family: "Press Start 2P", monospace; font-weight: normal; line-height: 1.4; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- the striped-sock title bar, straight off Sammy's legs ---- */
.box {
  background: rgba(14, 6, 40, .93);
  border: 4px ridge var(--gold);
  margin: 0 0 10px;
  min-width: 0;
}
.box > h2, .box > summary {
  margin: 0;
  padding: 5px;
  font: 10px/1.3 "Press Start 2P", monospace;
  text-align: center;
  background: repeating-linear-gradient(-45deg, var(--sock-a) 0 8px, var(--sock-b) 8px 16px);
  background-size: 200% 100%;
  animation: socks 1.6s steps(8) infinite;
  border-bottom: 2px solid #7a2a08;
}
.box > h2 span {
  display: inline-block;
  padding: 3px 6px;
  color: var(--gold);
  background: #1a0a3a;
  border: 1px solid #7a2a08;
}
.box-in { padding: 8px; }
@keyframes socks { to { background-position: 22.63px 0; } }

/* ---- classic web-1.0 motion toys ---- */
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.rainbow {
  background: linear-gradient(90deg, #ff5a5a, #ffb52e, #ffe680, #7fff9a, #7fd0ff, #c88aff, #ff8ad0, #ff5a5a);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: rainbow 2.5s steps(20) infinite;
}
@keyframes rainbow { to { background-position: -200% 0; } }
.glitter, .glitter-pink, .glitter-blue {
  background-image: url(../img/glitter-gold.gif);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.glitter-pink { background-image: url(../img/glitter-pink.gif); }
.glitter-blue { background-image: url(../img/glitter-blue.gif); }
.bounce { display: inline-block; animation: bounce .9s ease-in-out infinite; }
@keyframes bounce { 50% { transform: translateY(-6px); } }
.wiggle { display: inline-block; animation: wiggle 1.2s steps(4) infinite; }
@keyframes wiggle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.float { animation: float 3.2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.spin { display: inline-block; animation: spin 3s steps(12) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* chain + paw dividers */
.chain { display: block; height: 12px; margin: 10px 0; background: url(../img/chain.gif) repeat-x center; }
.pawline { display: block; margin: 10px auto; }

/* Win9x bevel button */
.btn {
  display: inline-block;
  padding: 4px 10px;
  color: #000;
  background: var(--gray);
  border: 2px outset #fff;
  font: 16px/1 "Silkscreen", monospace;
  text-decoration: none;
}
.btn:visited { color: #000; }
.btn:hover { color: #000; background: var(--gold); text-decoration: none; }
.btn:active { border-style: inset; transform: translate(1px, 1px); }

/* ---- Calm mode: every loop stops, GIFs freeze ---- */
html.calm *, html.calm *::before, html.calm *::after {
  animation: none !important;
  transition: none !important;
}
html.calm .glitter, html.calm .glitter-pink, html.calm .glitter-blue, html.calm .rainbow {
  background-image: none; -webkit-text-fill-color: currentColor; color: var(--gold);
}
html.calm .blink { opacity: 1; }
html.calm .chain { background-image: none; border-top: 2px solid var(--gold); height: 2px; }

@media (prefers-reduced-motion: reduce) {
  html:not(.wild) *, html:not(.wild) *::before, html:not(.wild) *::after { animation: none !important; transition: none !important; }
}