/* ==========================================================================
   EMBR ANUBIS CHALLENGE THEME (Authentic EMBR Palette & 8-Bit Tokens)
   Applied dynamically by Caddy's (anubis_theme) rewrite
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
  --bg: #160a33;
  --bg-2: #1f1147;
  --screen: #241458;
  --panel: #2a1860;
  --panel-2: #34206e;
  --ink: #efe9ff;
  --muted: #b6a6e6;
  --muted-2: #8b78c4;
  --pink: #ff5cae;
  --pink-d: #c8307f;
  --cyan: #4ee6e6;
  --purple: #9a7bff;
  --yellow: #ffd23f;
  --green: #5ce67a;
  --black: #0d0620;
  --line: #4a2f8f;
  --shadow: 6px 6px 0 var(--black);
  --read: #e3d9ff;
  --txtshadow: 0 2px 4px #0d0620, 0 0 10px rgba(13,6,32,0.92);

  --px: "Press Start 2P", monospace;
  --body: "DM Sans", system-ui, -apple-system, sans-serif;
}

body#top {
  min-height: 100vh;
  background-color: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--body) !important;
  line-height: 1.7 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 2.5rem 1rem !important;
  position: relative !important;
  overflow-x: hidden !important;
  image-rendering: pixelated;
}

body#top::before {
  content: "";
  position: fixed;
  inset: -360px 0 0 -360px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.08;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Crect x='40' y='60' width='8' height='8' fill='%23ff5cae'/%3E%3Crect x='48' y='52' width='8' height='8' fill='%23ffd23f'/%3E%3Crect x='48' y='68' width='8' height='8' fill='%23ff5cae'/%3E%3Crect x='56' y='60' width='8' height='8' fill='%23ff5cae'/%3E%3Crect x='180' y='80' width='24' height='20' fill='%234ee6e6' fill-opacity='0.25' stroke='%234ee6e6' stroke-width='2'/%3E%3Crect x='184' y='86' width='16' height='2' fill='%234ee6e6'/%3E%3Crect x='184' y='92' width='10' height='2' fill='%234ee6e6'/%3E%3Crect x='290' y='70' width='16' height='14' fill='%239a7bff'/%3E%3Cpath d='M293 70 V62 C293 58 303 58 303 62 V70' stroke='%239a7bff' stroke-width='3' fill='none'/%3E%3Cpath d='M80 200 H130 V240 H160' stroke='%234ee6e6' stroke-width='2' stroke-dasharray='4 4' fill='none'/%3E%3Ccircle cx='80' cy='200' r='3' fill='%234ee6e6'/%3E%3Ccircle cx='160' cy='240' r='3' fill='%234ee6e6'/%3E%3Crect x='240' y='210' width='28' height='16' fill='%23ff5cae' fill-opacity='0.25' stroke='%23ff5cae' stroke-width='2'/%3E%3Crect x='246' y='216' width='4' height='4' fill='%23ff5cae'/%3E%3Crect x='258' y='216' width='4' height='4' fill='%23ffd23f'/%3E%3Crect x='60' y='300' width='6' height='6' fill='%234ee6e6'/%3E%3Crect x='310' y='310' width='6' height='6' fill='%23ffd23f'/%3E%3Crect x='190' y='320' width='6' height='6' fill='%23ff5cae'/%3E%3C/svg%3E") 0 0 / 360px 360px repeat;
  animation: embr-drift 50s linear infinite;
  will-change: transform;
}

@keyframes embr-drift {
  to {
    transform: translate(360px, 360px);
  }
}

body#top main {
  position: relative !important;
  z-index: 1 !important;
  width: min(35rem, 100%) !important;
  background: var(--panel) !important;
  border: 3px solid var(--black) !important;
  box-shadow: var(--shadow) !important;
  padding: 2.5rem 2rem 1.75rem !important;
  text-align: center !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

body#top main::before {
  content: "EMBR SECURITY GATEWAY";
  display: inline-block;
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--black);
  background: var(--cyan);
  border: 3px solid var(--black);
  padding: 6px 12px;
  box-shadow: 4px 4px 0 var(--black);
  margin-bottom: 1.5rem;
}

body#top h1 {
  font-family: var(--px) !important;
  font-weight: 400 !important;
  font-size: clamp(14px, 3vw, 19px) !important;
  line-height: 1.6 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  text-shadow: 4px 4px 0 var(--black) !important;
  margin-bottom: 1.75rem !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

body#top #image {
  display: block !important;
  width: 100% !important;
  max-width: 220px !important;
  height: auto !important;
  margin: 0 auto 1.5rem !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 12px 24px rgba(13, 6, 32, 0.8)) !important;
}

body#top #status {
  font-family: var(--px) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  color: var(--yellow) !important;
  text-shadow: 2px 2px 0 var(--black) !important;
  margin-bottom: 1rem !important;
}

body#top #progress {
  display: block !important;
  width: 100% !important;
  height: 18px !important;
  background: var(--screen) !important;
  border: 3px solid var(--black) !important;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,0.4), 3px 3px 0 var(--black) !important;
  margin: 0 auto 1.5rem !important;
  border-radius: 0 !important;
  outline: none !important;
  overflow: hidden !important;
}

body#top #progress .bar-inner {
  height: 100% !important;
  background: repeating-linear-gradient(
    -45deg,
    var(--pink),
    var(--pink) 10px,
    var(--pink-d) 10px,
    var(--pink-d) 20px
  ) !important;
  box-shadow: 2px 0px 0 var(--cyan) !important;
  border-radius: 0 !important;
}

body#top #testarea {
  display: block !important;
  font-family: var(--body) !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: var(--read) !important;
  background: var(--screen) !important;
  border: 3px solid var(--black) !important;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,0.35), 4px 4px 0 var(--black) !important;
  padding: 1rem 1.25rem !important;
  text-align: left !important;
  margin-bottom: 1.5rem !important;
  text-shadow: var(--txtshadow) !important;
}

body#top #testarea::before {
  content: "AUTOMATED VERIFICATION: Solving a brief computational proof-of-work puzzle to protect this website from automated scrapers. Your browser will proceed automatically in a moment." !important;
  font-size: 0.92rem !important;
  color: var(--read) !important;
  line-height: 1.6 !important;
}

body#top #about-check {
  margin: 1rem 0 1.5rem !important;
}

body#top #about-check a {
  display: inline-block !important;
  font-family: var(--px) !important;
  font-size: 8px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--black) !important;
  background: var(--pink) !important;
  border: 3px solid var(--black) !important;
  box-shadow: 4px 4px 0 var(--black) !important;
  padding: 10px 18px !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s, transform 0.08s, box-shadow 0.08s !important;
}

body#top #about-check a:hover {
  background: var(--cyan) !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--black) !important;
}

body#top #about-check a:active {
  transform: translate(4px, 4px) !important;
  box-shadow: 0 0 0 var(--black) !important;
}

body#top footer {
  border-top: 3px solid var(--black) !important;
  margin-top: 1.25rem !important;
  padding-top: 1.25rem !important;
  font-size: 0.8rem !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
}

body#top footer a {
  color: var(--cyan) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

body#top footer a:hover {
  color: var(--pink) !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   Compact layout: the whole challenge card fits in ~85vh with no page scroll.
   Sizes and gaps scale with viewport height, so short screens shrink the card
   instead of overflowing.
   ========================================================================== */
html:has(body#top),
body#top {
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
}

body#top main {
  max-height: 85vh !important;
  overflow-y: auto !important;
  padding: clamp(0.75rem, 2.5vh, 1.75rem) clamp(1rem, 3vw, 1.75rem) !important;
  scrollbar-width: none;
}
body#top main::-webkit-scrollbar { display: none; }

body#top main::before {
  margin-bottom: clamp(0.4rem, 1.4vh, 1rem) !important;
}

body#top h1 {
  font-size: clamp(12px, min(3vw, 2.4vh), 18px) !important;
  margin-bottom: clamp(0.5rem, 1.6vh, 1.25rem) !important;
}

body#top #image {
  max-width: none !important;
  width: auto !important;
  height: clamp(80px, 22vh, 200px) !important;
  margin: 0 auto clamp(0.4rem, 1.4vh, 1rem) !important;
}

body#top #status {
  margin-bottom: clamp(0.4rem, 1vh, 0.75rem) !important;
}

body#top #progress {
  height: clamp(12px, 1.8vh, 18px) !important;
  margin-bottom: clamp(0.5rem, 1.6vh, 1.25rem) !important;
}

body#top #about-check {
  margin: clamp(0.4rem, 1vh, 0.75rem) 0 !important;
}
body#top #about-check a {
  padding: clamp(6px, 1vh, 10px) 16px !important;
}

body#top #testarea {
  font-size: clamp(0.78rem, 1.6vh, 0.92rem) !important;
  line-height: 1.5 !important;
  padding: clamp(0.5rem, 1.2vh, 1rem) clamp(0.75rem, 2vw, 1.25rem) !important;
  margin-bottom: clamp(0.5rem, 1.2vh, 1rem) !important;
}
body#top #testarea::before {
  font-size: inherit !important;
  line-height: inherit !important;
}

body#top footer {
  margin-top: clamp(0.4rem, 1vh, 0.75rem) !important;
  padding-top: clamp(0.4rem, 1vh, 0.75rem) !important;
  font-size: clamp(0.65rem, 1.3vh, 0.78rem) !important;
  line-height: 1.4 !important;
}
body#top footer p {
  margin: 0.15rem 0 !important;
}

/* Very short screens (small phones, landscape): keep everything visible */
@media (max-height: 640px) {
  body#top #image { height: clamp(64px, 16vh, 120px) !important; }
  body#top footer p:not(:first-child) { display: none !important; }
}