/* =======================================================================
   BigDaddy's Dad Joke Dungeon — full 90s GeoCities maximalism.
   Garish on purpose. Lean ALL the way in.
   ======================================================================= */

/* Self-hosted Comic Neue — a clean, highly readable comic typeface. Bundled
   locally (no hotlinking) so EVERY device gets the same legible comic look,
   instead of iOS/Android falling back to an ornate, hard-to-read script font. */
@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/comic-neue-400.woff2") format("woff2");
}
@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/comic-neue-700.woff2") format("woff2");
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win, even over class rules that set
   `display` (e.g. .granted-banner/.login-gate use display:flex). Without this,
   `el.hidden = true` is ignored and the element stays on screen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* belt-and-suspenders: never let marquees cause sideways scroll */
}

body {
  /* Tiled "stadium turf + checkered" starfield-ish loud background, pure CSS. */
  background-color: #000033;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,255,0,.08) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(-45deg, rgba(255,0,255,.08) 0 12px, transparent 12px 24px),
    radial-gradient(circle at 20% 30%, #ff00ff22 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, #00ffff22 0 2px, transparent 3px);
  background-size: 48px 48px, 48px 48px, 64px 64px, 80px 80px;
  color: #00ff00;
  font-family: "Times New Roman", Times, serif;
  text-align: center;
  overflow-wrap: break-word; /* wrap only when a word truly can't fit (cleaner than word-break) */
}

/* ===================== MARQUEES (CSS, looks like <marquee>) ============ */
.marquee {
  position: fixed;
  left: 0; right: 0;
  overflow: hidden;
  white-space: nowrap;
  background: #000;
  border-top: 3px ridge #ffff00;
  border-bottom: 3px ridge #ffff00;
  z-index: 50;
  padding: 4px 0;
}
.marquee-top { top: 0; }
.marquee-bottom { bottom: 0; }
.marquee span {
  display: inline-block;
  padding-left: 100%;
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #ffff00;
  text-shadow: 2px 2px #ff0000;
  animation: scroll-left 22s linear infinite;
}
.marquee-bottom span {
  color: #ff66cc;
  text-shadow: 2px 2px #0000ff;
  animation-duration: 26s;
}
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ===================== LOGIN GATE ====================================== */
.login-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(0deg, #00000099 0 2px, #000000cc 2px 4px),
    radial-gradient(circle, #1a0033 0%, #000000 100%);
  padding: 40px 12px;
  overflow: auto;
}
.login-box {
  background: #c0c0c0;
  color: #000080;
  border: 6px outset #ffffff;
  box-shadow: 0 0 0 4px #ff00ff, 0 0 40px #00ffff, 12px 12px 0 #000;
  padding: 18px 26px 26px;
  max-width: 420px;
  width: 100%;
  font-family: "Times New Roman", Times, serif;
}
.members-sign {
  background: #ff0000;
  color: #ffff00;
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-weight: bold;
  font-size: 20px;
  padding: 6px;
  border: 3px ridge #ffff00;
  margin: -4px -10px 14px;
  animation: blink-soft 1s steps(2) infinite;
}
.login-title {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  color: #cc0066;
  margin: 6px 0;
  font-size: 26px;
  text-shadow: 1px 1px #fff;
}
.login-sub { font-style: italic; margin: 0 0 16px; color: #333; }
.login-label {
  display: block;
  text-align: left;
  font-weight: bold;
  margin: 10px 0 4px;
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
}
.login-input {
  width: 100%;
  padding: 7px;
  font-size: 16px;
  border: 3px inset #808080;
  background: #fff;
  font-family: "Courier New", monospace;
}
.login-btn { margin-top: 18px; width: 100%; font-size: 20px; }
.login-error {
  color: #ff0000;
  font-weight: bold;
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  min-height: 22px;
  margin: 12px 0 4px;
  text-shadow: 1px 1px #000;
}
.login-error.shake { animation: shake .4s; }
.forgot-link {
  display: inline-block;
  margin-top: 6px;
  color: #0000ee;
  font-size: 14px;
}
.login-footer {
  margin-top: 16px;
  font-size: 12px;
  color: #555;
  border-top: 2px groove #888;
  padding-top: 8px;
}

/* ===================== ACCESS GRANTED banner ========================== */
.granted-banner {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-size: clamp(28px, 8vw, 80px);
  font-weight: bold;
  color: #00ff00;
  text-shadow: 0 0 12px #00ff00, 4px 4px #ff00ff;
  background: rgba(0,0,0,.85);
  animation: blink-hard .25s steps(2) infinite;
}

/* ===================== MAIN PAGE ====================================== */
.main-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 60px 10px 70px;
  transition: filter .3s;
}
.main-page.blurred {
  filter: blur(6px) grayscale(.3);
  pointer-events: none;
  user-select: none;
}

.site-header { margin-top: 10px; }
.site-title {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-size: clamp(30px, 7vw, 60px);
  margin: 6px 0;
  line-height: 1.05;
}
.site-title .title-2 {
  display: block;
  color: #00ffff;
  text-shadow: 3px 3px #ff0000, -2px -2px #ffff00;
  letter-spacing: 2px;
}
.site-title .bolt { font-size: .8em; }
.rainbow {
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00ff00, #00ffff, #ff00ff, #ff0000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-slide 3s linear infinite;
  font-size: .7em;
  display: block;
}
@keyframes rainbow-slide { to { background-position: 200% center; } }

.birthday {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-size: clamp(22px, 5vw, 40px);
  font-weight: bold;
  color: #ffff00;
  text-shadow: 2px 2px #ff0000;
  margin: 10px 0;
}
.welcome-line {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  color: #ff66cc;
  font-size: 16px;
}

/* ===================== BLINK ========================================== */
.blink { animation: blink-hard 1s steps(2, start) infinite; }
@keyframes blink-hard { 50% { opacity: 0; } }
@keyframes blink-soft { 50% { opacity: .35; } }

/* ===================== DIVIDERS ======================================= */
.divider {
  font-size: 20px;
  margin: 18px 0;
  letter-spacing: 2px;
  animation: hue 6s linear infinite;
  filter: drop-shadow(2px 2px #000);
}
@keyframes hue { to { filter: hue-rotate(360deg) drop-shadow(2px 2px #000); } }

/* ===================== UNDER CONSTRUCTION ============================= */
.construction {
  background: repeating-linear-gradient(45deg, #ffcc00 0 18px, #000 18px 36px);
  color: #000;
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-weight: bold;
  font-size: 15px;
  padding: 8px 6px;
  border: 4px ridge #ffcc00;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.construction-text {
  background: #ffcc00;
  padding: 3px 8px;
  border-radius: 3px;
}
.construction .worker { animation: bob .6s ease-in-out infinite alternate; font-size: 22px; }
.construction .cone { font-size: 22px; }
@keyframes bob { to { transform: translateY(-5px) rotate(-8deg); } }

/* ===================== JOKE GENERATOR ================================= */
.generator { margin: 22px 0; }

.nameplate {
  display: inline-block;
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-weight: bold;
  font-size: clamp(18px, 4vw, 28px);
  color: #000;
  background: #ffff00;
  border: 4px outset #ffcc00;
  padding: 6px 16px;
  margin-bottom: 12px;
  text-transform: uppercase;
  animation: flash-plate .8s steps(2) infinite;
  box-shadow: 0 0 16px #ffff00;
}
@keyframes flash-plate {
  50% { background: #ff00ff; color: #fff; box-shadow: 0 0 22px #ff00ff; }
}
#comedian-name { letter-spacing: 1px; }

/* The animation stage */
.stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 230px;
  margin: 0 auto 14px;
  border: 6px ridge #00ffff;
  background:
    radial-gradient(ellipse at 50% 120%, #444 0%, #111 60%, #000 100%);
  overflow: hidden;
  box-shadow: 0 0 24px #00ffff inset, 6px 6px 0 #000;
}

/* ---- AI-illustrated emoji scene (replaces the fixed comedian sprites) ---- */
.scene-emoji {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 110px;
  line-height: 1;
  filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 14px rgba(255,255,255,.35));
  z-index: 2;
}
.scene-emoji[data-anim="bounce"] { animation: sc-bounce 1s ease-in-out infinite; }
.scene-emoji[data-anim="spin"]   { animation: sc-spin 2.4s linear infinite; }
.scene-emoji[data-anim="shake"]  { animation: sc-shake .35s ease-in-out infinite; }
.scene-emoji[data-anim="float"]  { animation: sc-float 2.6s ease-in-out infinite; }
.scene-emoji[data-anim="zoom"]   { animation: sc-zoom 1.4s ease-in-out infinite; }
.scene-emoji[data-anim="wobble"] { animation: sc-wobble 1.6s ease-in-out infinite; }
.scene-emoji[data-anim="pulse"]  { animation: sc-pulse 1s ease-in-out infinite; }

@keyframes sc-bounce { 0%,100%{transform:translate(-50%,-50%);} 50%{transform:translate(-50%,-80%);} }
@keyframes sc-spin   { from{transform:translate(-50%,-50%) rotate(0);} to{transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes sc-shake  { 0%,100%{transform:translate(-50%,-50%) rotate(-8deg);} 50%{transform:translate(-54%,-50%) rotate(8deg);} }
@keyframes sc-float  { 0%,100%{transform:translate(-50%,-46%);} 50%{transform:translate(-50%,-58%);} }
@keyframes sc-zoom   { 0%,100%{transform:translate(-50%,-50%) scale(.8);} 50%{transform:translate(-50%,-50%) scale(1.25);} }
@keyframes sc-wobble { 0%,100%{transform:translate(-50%,-50%) rotate(-12deg);} 50%{transform:translate(-50%,-50%) rotate(12deg);} }
@keyframes sc-pulse  { 0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-50%,-50%) scale(1.14);} }

/* floating accent props */
.scene-props { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scene-props .prop {
  position: absolute;
  font-size: 40px;
  filter: drop-shadow(2px 2px 0 #000);
  animation: prop-drift 3s ease-in-out infinite;
}
.scene-props .prop:nth-child(1) { left: 12%;  top: 20%;    animation-delay: 0s;   }
.scene-props .prop:nth-child(2) { right: 12%; top: 28%;    animation-delay: .6s;  }
.scene-props .prop:nth-child(3) { left: 22%;  bottom: 14%; animation-delay: 1.2s; }
@keyframes prop-drift { 0%,100%{transform:translateY(0) rotate(-6deg);opacity:.85;} 50%{transform:translateY(-14px) rotate(6deg);opacity:1;} }

/* ===================== LOADING ======================================= */
.loading {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-size: 22px;
  color: #00ffff;
  margin: 14px 0;
}
.hourglass { display: inline-block; animation: spin 1.2s steps(8) infinite; font-size: 26px; }
.loading-text { text-shadow: 1px 1px #ff00ff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== JOKE BOX ====================================== */
.joke-box {
  background: #000;
  border: 6px ridge #ff00ff;
  box-shadow: 0 0 20px #ff00ff, inset 0 0 24px #33003322;
  padding: 18px 16px;
  margin: 14px auto;
  max-width: 640px;
  min-height: 90px;
}
.setup {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-size: clamp(18px, 4vw, 26px);
  color: #ffff00;
  text-shadow: 1px 1px #ff0000;
  line-height: 1.3;
}
.punchline {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-size: clamp(18px, 4vw, 26px);
  color: #00ffff;
  text-shadow: 1px 1px #0000ff;
  margin-top: 14px;
  line-height: 1.3;
  animation: pop-in .3s ease-out;
}
@keyframes pop-in { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.groan-reveal { margin-top: 14px; font-size: 18px; }

/* ===================== GROAN METER =================================== */
.groan-meter {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-size: 20px;
  margin: 8px 0 18px;
  color: #ff66cc;
}
.groan-label { text-shadow: 1px 1px #000; display: block; margin-bottom: 4px; }

/* tap-to-rate faces */
.groan-faces.rate { display: inline-flex; gap: 4px; }
.groan-face {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  filter: grayscale(1);
  opacity: .4;
  transform: scale(.92);
  transition: transform .08s, opacity .08s, filter .08s;
}
.groan-face:hover { transform: scale(1.15); }
.groan-face.on { filter: none; opacity: 1; transform: scale(1.1); }
.groan-face:disabled { cursor: default; }
.rate-thanks {
  color: #00ff66;
  font-weight: bold;
  text-shadow: 1px 1px #000;
  margin-top: 4px;
}

/* topic input row */
.topic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: stretch;
  max-width: 560px;
  margin: 0 auto 12px;
}
.topic-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  font-size: 16px;
  font-family: "Courier New", monospace;
  border: 4px inset #888;
  background: #fff;
  color: #000;
}
.topic-btn {
  flex: 0 0 auto;
  font-size: 16px;
  background: linear-gradient(#00ddff, #0088aa);
  color: #000;
  border: 5px outset #99eeff;
  text-shadow: 1px 1px #fff;
}
.topic-btn:hover { background: linear-gradient(#33e6ff, #00aacc); }

/* ===================== 3D BUTTONS ==================================== */
.btn-3d {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-weight: bold;
  color: #000;
  background: linear-gradient(#ffffff, #c0c0c0);
  border: 5px outset #f0f0f0;
  padding: 10px 18px;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
}
.btn-3d:active { border-style: inset; transform: translateY(1px); }

.generate-btn {
  font-size: clamp(22px, 5vw, 38px);
  padding: 18px 26px;
  background: linear-gradient(#ff0000, #990000);
  color: #ffff00;
  border: 7px outset #ff6666;
  text-shadow: 2px 2px #000;
  box-shadow: 0 0 22px #ff0000, 6px 6px 0 #000;
  animation: pulse-btn 1.4s ease-in-out infinite;
  letter-spacing: 1px;
}
.generate-btn:hover { background: linear-gradient(#ff3333, #cc0000); }
@keyframes pulse-btn { 0%,100% { transform: scale(1);} 50% { transform: scale(1.05);} }

/* ===================== GADGETS (counter + tunes) ===================== */
.gadgets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0;
}
.counter-box {
  background: #222;
  border: 4px inset #888;
  padding: 6px 10px;
}
.counter-label {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-size: 12px;
  color: #00ff00;
}
.counter-led {
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 30px;
  letter-spacing: 4px;
  color: #ff3300;
  background: #000;
  padding: 2px 8px;
  border: 2px solid #550000;
  text-shadow: 0 0 6px #ff3300;
}
.tunes-btn { font-size: 16px; }
.tunes-marquee {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  color: #ffff00;
  font-weight: bold;
  animation: blink-soft 1s steps(2) infinite;
}

/* ===================== WEBRING FOOTER =============================== */
.webring { margin-top: 24px; }
.webring-links { font-size: 18px; }
.webring-links a, .guestbook, .forgot-link {
  color: #00ffff;
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  text-decoration: underline;
  margin: 0 6px;
}
.webring-links a:visited, .guestbook:visited { color: #ff66cc; }
.guestbook { display: inline-block; margin: 12px 0; font-size: 20px; color: #ffff00; }
.copyright { font-size: 12px; color: #888; margin: 14px 0; line-height: 1.5; }
.awards {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  font-size: 14px;
  color: #00ff00;
}

/* ===================== SHAKE (wrong creds) ========================== */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* ===================== CONFETTI ===================================== */
.confetti {
  position: fixed;
  top: -20px;
  width: 10px;
  height: 16px;
  z-index: 130;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .9; }
}

/* ===================== MOBILE (phones) ============================== */
@media (max-width: 480px) {
  .main-page { padding: 56px 8px 64px; }
  .marquee span { font-size: 16px; }
  .welcome-line { font-size: 15px; }
  .construction { font-size: 14px; }
  /* keep the joke + captions comfortably large and legible on small screens */
  .setup, .punchline { font-size: 20px; line-height: 1.35; }
  .nameplate { font-size: 20px; }
  .groan-meter, .groan-faces { font-size: 20px; }
  .login-title { font-size: 22px; }
  /* comfortable tap targets */
  .login-input { padding: 9px; font-size: 16px; }
}

/* ===================== MOTION SAFETY ================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
  }
  /* keep marquees readable-ish but static */
  .marquee span { animation: none; padding-left: 0; }
}