/* home.css — intentionally awful, on purpose. */
* { box-sizing: border-box; }
/* Clamp horizontal overflow on BOTH html + body — body alone doesn't stop it
   when html is the scroll container (the BETA badge was leaking a scrollbar). */
html, body { overflow-x: hidden; }
body {
  margin: 0; font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  color: #fff; background: #1b0033;
  background-image: repeating-linear-gradient(45deg, #2a0055 0 22px, #1b0033 22px 44px);
}
a { color: #00e5ff; }

/* Escape hatch stays reachable + visible; never display:none. */
.skip { position: absolute; top: 6px; left: 6px; z-index: 50; background: #000; color: #fff200;
  padding: 6px 10px; font-size: 13px; border: 2px solid #fff200; text-decoration: none; }

.marquee { background: #ff0055; color: #fff200; font-weight: bold; font-size: 20px; padding: 8px 0;
  white-space: nowrap; overflow: hidden; border-bottom: 4px dashed #00ff2a; }
/* Only the OUTER span scrolls — `>` stops the inner #hit-marquee number span
   from getting its own padding-left:100% + animation (it was scrolling separately). */
.marquee > span { display: inline-block; padding-left: 100%; animation: scroll 14s linear infinite; }
.marquee #hit-marquee { padding-left: 0; animation: none; }   /* the live counter must NOT scroll on its own (ID beats any .marquee span rule) */
@keyframes scroll { to { transform: translateX(-100%); } }

#hero { text-align: center; padding-bottom: 28px; border-bottom: 8px ridge #ffd400; }
/* Logotype — matches the play area's #levelmap .site-title exactly. */
/* Fluid size + never wrap, so the BETA stamp always caps the last "s" and never
   overhangs the viewport (fixed breakpoints wrapped at in-between widths). */
h1.site-title { color: #ff3b9a; font-size: clamp(22px, 6.4vw, 52px); font-weight: bold; letter-spacing: 1px;
  white-space: nowrap; text-align: center; text-shadow: 2px 2px 0 #00e5ff; margin: 18px auto 6px;
  position: relative; display: inline-block; max-width: 100%; }
h1.site-title .beta { position: absolute; top: -0.85em; right: -6px; transform: rotate(14deg);
  background: #ff0055; color: #fff; font-size: clamp(9px, 1.7vw, 13px); font-weight: bold; letter-spacing: 1px;
  padding: 2px 7px; border-radius: 4px; border: 2px solid #fff200; text-shadow: none;
  box-shadow: 0 2px 5px rgba(0,0,0,.45); }
.hero-sub { font-size: 20px; color: #00ff2a; margin: 0 0 22px; }

.gate { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gate-fake { font-family: inherit; font-weight: bold; font-size: 26px; color: #fff; cursor: pointer;
  padding: 18px 34px; border: 5px solid #fff200; border-radius: 10px;
  background: linear-gradient(#ff8a00, #ff0055); box-shadow: 0 0 0 4px #00e5ff; }
.gate-fake:nth-child(2) { animation: blink 0.7s steps(2, start) infinite; }
@keyframes blink { to { opacity: 0.2; } }
.gate-escape { margin-top: 6px; font-size: 15px; color: #cbb8ff; }

.strip { max-width: 760px; margin: 28px auto; padding: 0 20px; font-size: 20px; line-height: 1.6; text-align: center; }
.strip strong { color: #fff200; }

#shame { max-width: 1040px; margin: 30px auto; padding: 0 20px; }
#shame h2, #faq h2, #cert h2 { text-align: center; font-size: 34px; color: #ff3b9a; text-shadow: 2px 2px 0 #000; }
.shame-intro { text-align: center; color: #cbb8ff; margin-bottom: 22px; }
.shame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.shame-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: #fff;
  background: #14082b; border: 5px solid #00e5ff; border-radius: 12px; padding: 14px 16px; position: relative; }
.shame-card:hover { border-color: #fff200; transform: rotate(-1deg); }
.shame-num { position: absolute; top: -14px; right: 10px; font-size: 30px; color: #ff3b9a; }
.shame-name { font-size: 20px; font-weight: bold; color: #fff200; }
.shame-tagline { font-size: 14px; color: #eee; line-height: 1.5; }
.shame-meta { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; }
.shame-diff { text-transform: uppercase; color: #00ff2a; }
.diff-hard .shame-diff { color: #ff5252; }
.shame-best { color: #ffd400; }

#faq { max-width: 760px; margin: 40px auto; padding: 0 20px; }
#faq details { background: #14082b; border: 3px solid #ff3b9a; border-radius: 8px; margin: 10px 0; padding: 10px 14px; }
#faq summary { cursor: pointer; font-size: 18px; color: #fff200; }
#faq p { line-height: 1.6; }

#cert { max-width: 760px; margin: 40px auto; padding: 0 20px; text-align: center; }
#cert #certBtn { font-family: inherit; font-weight: bold; font-size: 18px; cursor: pointer; margin-top: 12px;
  padding: 14px 26px; color: #002; background: #00e5ff; border: 4px solid #fff200; border-radius: 10px; }

#footer { text-align: center; padding: 30px 20px; border-top: 8px ridge #ffd400; margin-top: 40px; }
.fine { font-size: 12px; color: #7a6fa8; margin-top: 18px; }

/* Retro odometer — black boxes, monospace green digits, rolling flip animation. */
.odo-label { font-size: 14px; color: #cbb8ff; margin: 0 0 10px; }
.odometer { display: inline-flex; gap: 4px; justify-content: center; padding: 6px 8px;
  background: #000; border: 3px solid #ff3b9a; border-radius: 6px; box-shadow: 0 0 0 2px #00e5ff, 0 6px 18px rgba(0,0,0,.6); }
.odo-digit { width: 26px; height: 40px; overflow: hidden; background: #050505; border: 1px solid #222; border-radius: 3px;
  box-shadow: inset 0 0 8px rgba(0,0,0,.9); }
.odo-strip { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.35, 1.3, .45, 1); will-change: transform; }
.odo-num { height: 40px; line-height: 40px; text-align: center; font-family: "Courier New", monospace;
  font-weight: bold; font-size: 28px; color: #00ff5a; text-shadow: 0 0 6px rgba(0,255,90,.6); }

:focus-visible { outline: 3px solid #fff200; outline-offset: 2px; }
@media (max-width: 520px) {
  .gate-fake { font-size: 20px; }
  .odo-digit { width: 20px; height: 32px; }
  .odo-num { height: 32px; line-height: 32px; font-size: 22px; }
}