/* EggRadar — Steal an Egg companion.
 * Design language v3: "game-native sticker" — lifted from the game's own HUD
 * and thumbnail art: sky-blue page, white cards with thick navy outlines,
 * shop-green primary buttons, index-cyan secondary, gold reward bands,
 * green money numerals, eggshell-crack progress bars.
 * Type: Baloo 2 (display), Nunito (body), Space Mono (data digits).
 * Still no emoji-as-icons, no decorative gradients. */
:root {
  --sky: #56bdf2;
  --sky-deep: #2f97d8;
  --shell: #ffffff;
  --shell-2: #f7f2e2;
  --cream: #f7ecd2;
  --navy: #22304a;
  --navy-2: #3d4c6b;
  --muted: #66748f;
  --line: #e3e0d2;
  --green: #3ddc4a;
  --green-deep: #2e8b2e;
  --cyan: #4fd1e0;
  --gold: #ffc939;
  --gold-band: #ffe680;
  --orange: #f4a024;
  --red: #e63946;
  --purple: #7a3ff2;
  --link: #1272ce;
  --radius: 14px;
  --maxw: 1060px;
  --font-display: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --outline: 2.5px solid var(--navy);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--sky); }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--sky);
  color: var(--navy);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* sunburst rays, like the thumbnail skies */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: repeating-conic-gradient(from 240deg at 50% -12%,
    rgba(255,255,255,.14) 0 5deg, rgba(255,255,255,0) 5deg 10deg);
  pointer-events: none;
}
img, svg { max-width: 100%; }
::selection { background: var(--gold); color: var(--navy); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--sky-deep); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--shell);
  border-bottom: 3px solid var(--navy);
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 60px; flex-wrap: wrap; }
.logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.01em;
  color: var(--navy); text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo .egg-mark { flex: 0 0 auto; }
nav.main-nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
nav.main-nav a {
  color: var(--navy-2); padding: 6px 11px; border-radius: 9px; font-size: 14px; font-weight: 700;
  font-family: var(--font-display); text-decoration: none;
}
nav.main-nav a:hover { color: var(--navy); background: var(--cream); }
nav.main-nav a[aria-current="page"] { background: var(--gold); color: var(--navy); box-shadow: 0 2px 0 var(--navy); }

/* ---------- hero ---------- */
.hero { padding: 44px 0 24px; position: relative; }
.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(31px, 5.6vw, 48px); line-height: 1.04; letter-spacing: -.01em;
  margin: 0 0 14px; max-width: 21ch;
  color: #fff;
  text-shadow: 0 3px 0 var(--navy);
  -webkit-text-stroke: 1.5px var(--navy);
  paint-order: stroke fill;
}
.hero p.lead { font-size: 17px; color: var(--navy); max-width: 62ch; margin: 0 0 8px; font-weight: 600; }
.hero .lead b { color: #fff; text-shadow: 0 1.5px 0 var(--navy); }
.crumb { font-size: 13px; color: #fff; margin: 18px 0 -26px; font-weight: 700; }
.crumb a { color: #fff; text-shadow: 0 1px 0 var(--navy); }
.stat-line {
  font-family: var(--font-mono); font-size: 12.5px; color: #fff;
  text-shadow: 0 1px 0 var(--navy);
  margin: 14px 0 4px; font-weight: 700;
}
.stat-line span { display: inline-block; margin-right: 14px; white-space: nowrap; }

/* hero egg art */
.hero-art { position: absolute; right: 12px; top: 46px; width: 190px; pointer-events: none; }
@media (max-width: 860px) { .hero-art { display: none; } }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0 6px; }
.btn {
  display: inline-block; padding: 10px 20px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 15.5px; line-height: 1.35;
  background: var(--shell); border: var(--outline); color: var(--navy);
  box-shadow: 0 4px 0 var(--navy);
  text-decoration: none;
  transition: transform .07s ease, box-shadow .07s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 5px 0 var(--navy); color: var(--navy); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.btn.primary { background: var(--green); }
.btn.primary:hover { color: var(--navy); }
.btn.roblox { background: var(--cyan); }
.btn.discord { background: #5865f2; color: #fff; -webkit-text-stroke: 0; text-shadow: none; }
.btn.small { padding: 7px 14px; font-size: 13.5px; box-shadow: 0 3px 0 var(--navy); }
.btn.small:hover { box-shadow: 0 4px 0 var(--navy); }

/* ---------- sections / cards ---------- */
section { padding: 22px 0; }
.card {
  background: var(--shell); border: var(--outline); border-radius: var(--radius);
  box-shadow: 0 4px 0 rgba(34, 48, 74, .25);
  padding: 20px; margin: 14px 0;
}
.card h2, .card h3 { margin-top: 0; }
.card h3 { font-family: var(--font-display); letter-spacing: -.01em; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

h2.section-title {
  font-family: var(--font-display); font-weight: 800; font-size: 25px; letter-spacing: -.01em;
  color: #fff; text-shadow: 0 2.5px 0 var(--navy);
  -webkit-text-stroke: 1px var(--navy);
  paint-order: stroke fill;
  margin: 14px 0 12px;
}
p.section-sub { color: var(--navy); margin: 4px 0 12px; font-weight: 600; }

/* home index — table-of-contents list */
.index-list { list-style: none; margin: 0 0 8px; padding: 6px; background: var(--shell); border: var(--outline); border-radius: var(--radius); box-shadow: 0 4px 0 rgba(34,48,74,.25); }
.index-list li { border-bottom: 2px solid var(--cream); }
.index-list li:last-child { border-bottom: none; }
.index-list a {
  display: grid; grid-template-columns: 190px 1fr; gap: 2px 20px; align-items: baseline;
  padding: 12px 10px; border-radius: 9px; text-decoration: none;
}
.index-list a:hover { background: var(--cream); }
.index-list a:hover .ix-title { text-decoration: underline; text-decoration-thickness: 2.5px; text-decoration-color: var(--gold); }
.index-list .ix-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--navy); }
.index-list .ix-desc { color: var(--navy-2); font-size: 14px; }
@media (max-width: 560px) { .index-list a { grid-template-columns: 1fr; } }

/* plain editorial prose block */
.prose { max-width: 70ch; background: var(--shell); border: var(--outline); border-radius: var(--radius); box-shadow: 0 4px 0 rgba(34,48,74,.25); padding: 18px 22px; margin-top: 6px; }
.prose p { margin: 12px 0; }

/* ---------- timer dashboard ---------- */
.timer-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.timer-card {
  background: var(--shell);
  border: var(--outline); border-radius: var(--radius);
  box-shadow: 0 5px 0 rgba(34, 48, 74, .35);
  padding: 16px 16px 18px; text-align: left; position: relative;
}
.timer-card .t-label {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy);
  display: flex; align-items: center; gap: 7px;
}
.timer-card .t-label svg { flex: 0 0 auto; }
.timer-card .t-desc { font-size: 12.5px; color: var(--muted); min-height: 32px; margin: 2px 0 6px; }
.timer-card .t-count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 6vw, 38px); font-weight: 700; line-height: 1.1;
}
.timer-card .t-last {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  margin-top: 8px; font-variant-numeric: tabular-nums;
}
.timer-card.urgent { border-color: var(--red); box-shadow: 0 5px 0 rgba(230, 57, 70, .45); }
.timer-card.urgent::after {
  content: "LIVE"; position: absolute; top: -12px; right: 12px;
  background: var(--red); color: #fff; font-family: var(--font-display); font-size: 11px; font-weight: 800;
  padding: 2px 10px; border-radius: 7px; border: 2px solid var(--navy); letter-spacing: .12em;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .55; } }
.timer-note { font-size: 12.5px; color: var(--navy); margin-top: 12px; font-weight: 600; }

/* eggshell-crack progress: fill is yolk gold, a crack rides the leading edge,
 * and turns red when the event goes live */
.t-bar {
  --crack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 32'%3E%3Cpath d='M6 1 4 6l4 5-5 6 4 5-3 5 2 4' fill='none' stroke='%2322304a' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  position: relative; height: 13px; border: 2px solid var(--navy); border-radius: 99px;
  background: var(--cream); margin-top: 11px;
}
.t-bar i {
  display: block; height: 100%; background: var(--gold);
  border-radius: 99px; position: relative;
  transition: width 1s linear;
}
.t-bar i::after {
  content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 30px;
  background: center / contain no-repeat var(--crack);
}
.timer-card.urgent .t-bar { border-color: var(--red); }
.timer-card.urgent .t-bar { --crack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 32'%3E%3Cpath d='M6 1 4 6l4 5-5 6 4 5-3 5 2 4' fill='none' stroke='%23e63946' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.timer-card.urgent .t-bar i { background: var(--red); }

/* ---------- badges / rarity ---------- */
.badge {
  display: inline-block; padding: 1.5px 9px; border-radius: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  border: 1.5px solid color-mix(in srgb, currentColor, transparent 60%);
}
.r-common    { background: #eef0f2; color: #57606c; }
.r-uncommon  { background: #dcf3e3; color: #177244; }
.r-rare      { background: #dcecfa; color: #1c5fae; }
.r-epic      { background: #ede1fb; color: #6d34ad; }
.r-legendary { background: #fff1cd; color: #97630a; }
.r-mythic    { background: #ffe4d4; color: #b4400e; }
.r-cosmic    { background: #d9f1f7; color: #0e7490; }
.r-secret    { background: #fbdbdb; color: #b02a2a; }
.r-eternal   { background: #e9ebf7; color: #4c56a8; }
.r-divine    { background: #fff3c4; color: #8f6a06; }

.pill {
  display: inline-block; background: var(--shell-2); border: 1.5px solid var(--navy-2);
  padding: 2px 11px; border-radius: 99px; font-size: 13px; color: var(--navy-2); margin: 2px; font-weight: 700;
}

/* ---------- tables ---------- */
[data-values-table] {
  background: var(--shell); border: var(--outline); border-radius: var(--radius);
  box-shadow: 0 4px 0 rgba(34,48,74,.25);
  padding: 8px 20px 14px 14px; margin-top: 8px;
}
[data-values-table] .filters { padding: 6px 4px 0; }
[data-values-table] .table-wrap { margin-top: 4px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px;
}
table.data th, table.data td { padding: 9px 12px; text-align: left; border-bottom: 2px solid var(--cream); }
table.data th {
  font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--navy); background: var(--gold-band);
  position: sticky; top: 0; cursor: pointer; user-select: none;
}
table.data th:hover { background: var(--gold); }
table.data td.num { text-align: right; font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
table.data tr:hover td { background: #fff8dd; }
.income-top { color: var(--green-deep); font-weight: 700; font-family: var(--font-mono); font-size: 13px; }
.na { color: var(--muted); }

/* filter row */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.filters select, .filters input {
  background: var(--shell); color: var(--navy); border: 2px solid var(--navy-2);
  border-radius: 9px; padding: 8px 12px; font-size: 14px; font-family: var(--font-body); font-weight: 600;
}
.filters select:focus, .filters input:focus { border-color: var(--navy); outline: none; }

/* ---------- callout ---------- */
.callout {
  border: var(--outline); border-left-width: 8px;
  background: var(--shell); padding: 13px 16px; border-radius: 12px; margin: 16px 0;
  box-shadow: 0 4px 0 rgba(34,48,74,.25);
}
.callout { border-left-color: var(--gold); }
.callout.warn { border-left-color: var(--red); }
.callout.good { border-left-color: var(--green); }
.callout.info { border-left-color: var(--cyan); }
.callout p { margin: 6px 0; }
.verified { font-size: 13px; color: var(--navy-2); font-weight: 600; }

/* ---------- FAQ ---------- */
details.faq {
  border: var(--outline); border-radius: 12px;
  padding: 4px 16px; margin: 10px 0; background: var(--shell);
  box-shadow: 0 3px 0 rgba(34,48,74,.25);
}
details.faq summary {
  cursor: pointer; font-weight: 800; font-family: var(--font-display); font-size: 15.5px;
  padding: 10px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--navy);
}
details.faq[open] summary::after { content: "−"; }
details.faq p { color: var(--navy-2); margin-top: 0; }
details.webhook-help { margin: 8px 0 0; font-size: 13.5px; }
details.webhook-help summary { font-weight: 700; color: var(--muted); }
details.webhook-help ol { margin: 8px 0 0; padding-left: 20px; color: var(--navy-2); }
details.webhook-help li { margin-bottom: 4px; }

/* ---------- subscribe form ---------- */
.sub-form { display: grid; gap: 14px; max-width: 560px; }
.sub-form label { font-size: 14px; font-weight: 700; display: block; margin-bottom: 4px; }
.sub-form input[type="url"] {
  width: 100%; background: var(--shell); color: var(--navy); border: 2px solid var(--navy-2);
  border-radius: 10px; padding: 11px 12px; font-size: 14px; font-family: var(--font-body);
}
.sub-form input[type="url"]:focus { border-color: var(--navy); outline: none; }
.checks { display: grid; gap: 7px; grid-template-columns: 1fr; }
.checks label { display: flex; gap: 9px; align-items: center; font-weight: 600; font-size: 14px; }
.checks input { accent-color: var(--green-deep); width: 16px; height: 16px; }
.sub-msg { font-size: 14px; min-height: 20px; font-weight: 700; }
.sub-msg.ok { color: var(--green-deep); }
.sub-msg.err { color: var(--red); }

/* ---------- steps ---------- */
ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
ol.steps li { counter-increment: step; position: relative; padding: 0 0 20px 48px; }
ol.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--gold); border: 2px solid var(--navy); box-shadow: 0 2.5px 0 var(--navy);
  color: var(--navy); font-family: var(--font-display); font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
ol.steps h3 { margin: 4px 0 6px; }
ol.steps p { margin: 0; color: var(--navy-2); }

/* ---------- ad slots (hidden until AdSense id configured) ---------- */
.ad-slot { display: none; margin: 18px 0; text-align: center; min-height: 0; }
.ad-slot.on { display: block; min-height: 90px; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--navy); color: #c9d4ea;
  margin-top: 48px; padding: 30px 0 44px; font-size: 14px;
  border-top: 4px solid var(--gold);
}
.site-footer .cols { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-footer h4 {
  font-family: var(--font-display); color: var(--gold); margin: 0 0 8px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 4px 0; }
.site-footer a { color: #c9d4ea; }
.site-footer a:hover { color: #fff; }
.fineprint { margin-top: 24px; font-size: 12.5px; color: #8fa0c2; max-width: 78ch; }

/* misc */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.divider { border: none; border-top: 2px solid var(--cream); margin: 26px 0; }