@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Lilita+One&display=swap');
/* Eggly content pages (/wiki, /terms, /signup, the 404 page …) in the landing's brand kit (v2/landing.css — the base
   design of every Eggly screen, owner 2026-10-16 + 2026-10-18 "tiap page wajib sesuai design landing page dan home
   gameplay, satu kesatuan"): dark violet game panels, a thick ink outline, a thin gold rim, a 3D bottom edge, Lilita One
   titles with an ink outline, gold = action. Served in front of /brand.css (lib/pages/dress.js) after the shared
   pages.css: only colours, borders, type and depth change; layout, sizes and the 280 px rules stay the engine's. */
:root {
  --ink: #120a24; --panel-1: #3a2470; --panel-2: #1a0e3a; --panel-3: #0f0826; --btn-1: #4a2f8a; --btn-2: #2a1856;
  --gold-1: #fff1a8; --gold-2: #ffcf3a; --gold-3: #f59a12; --gold: #ffc23a; --rim: rgba(255, 210, 110, .55); --glow: rgba(255, 170, 60, .35);
  --bg: #0b0618; --panel: #1a0e3a; --panel2: #24154c; --line: #3a2a66; --text: #f3eeff; --muted: #c2b6e6; --accent: #ffc23a; --good: #3cf08a;
  --head-font: 'Lilita One', Fredoka, sans-serif; --radius: 16px;
  --outline: 1.5px 0 var(--ink), -1.5px 0 var(--ink), 0 1.5px var(--ink), 0 -1.5px var(--ink), 0 3px 0 var(--ink);
  --panel-bg: linear-gradient(180deg, var(--panel-1), var(--panel-2) 55%, var(--panel-3));
  --panel-shadow: inset 0 0 0 1.5px var(--rim), inset 0 2px 0 1.5px rgba(255, 255, 255, .1), 0 4px 0 var(--ink), 0 8px 20px rgba(0, 0, 0, .45);
}
body.pg { font: 500 16px/1.55 Fredoka, system-ui, sans-serif; overflow-wrap: break-word;
  background: radial-gradient(120% 60% at 50% -10%, rgba(120, 60, 200, .45), transparent 60%), radial-gradient(90% 50% at 50% 110%, rgba(255, 120, 40, .18), transparent 60%), var(--bg) fixed; }
body.pg code, body.pg .pg-code { overflow-wrap: anywhere; } /* a path or a hash may break anywhere, words never */
body.pg a { color: var(--gold-2); text-underline-offset: 3px; }

/* header + footer: a game panel bar, the brand in the logo's type */
body.pg .pg-top { background: linear-gradient(180deg, var(--panel-1), var(--panel-3)); border-bottom: 3px solid var(--ink); box-shadow: inset 0 -1.5px 0 var(--rim), 0 4px 14px rgba(0, 0, 0, .5); }
body.pg .pg-brand { font: 400 clamp(20px, 6vw, 24px)/1.1 var(--head-font); letter-spacing: .02em; color: var(--gold); text-shadow: var(--outline); }
body.pg .pg-nav a, body.pg .pg-foot-nav a { color: var(--muted); font-weight: 600; }
body.pg .pg-nav a[aria-current], body.pg .pg-nav a:hover, body.pg .pg-foot-nav a:hover { color: #fff; background: rgba(255, 210, 110, .12); }
body.pg .pg-foot { background: linear-gradient(180deg, var(--panel-2), var(--panel-3)); border-top: 3px solid var(--ink); box-shadow: inset 0 1.5px 0 var(--rim); }

/* buttons: the farm's violet 3D button; the main one is the gold PLAY button */
body.pg .pg-btn { border: 2.5px solid var(--ink); border-radius: 14px; color: #fff; background: linear-gradient(180deg, var(--btn-1), var(--btn-2));
  box-shadow: inset 0 0 0 1.5px rgba(255, 210, 110, .3), inset 0 2px 0 rgba(255, 255, 255, .14), 0 4px 0 var(--ink); transition: transform .08s, box-shadow .08s; }
body.pg .pg-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 110, .3), 0 1px 0 var(--ink); }
body.pg .pg-btn-main { border-color: #5a2c00; color: #2a1400; font: 400 17px/1 var(--head-font); letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 38%, var(--gold-3) 75%, #ffbf3a 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(160, 70, 0, .45), 0 4px 0 #8a4300, 0 0 18px var(--glow); }
body.pg .pg-btn-main:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 1px 0 #8a4300; }
body.pg .pg-btn:hover { filter: brightness(1.06); }

/* titles: Lilita One with the ink outline (h1 gold like the landing's slide titles) */
body.pg .pg-main h1 { font: 400 clamp(28px, 8vw, 38px)/1.08 var(--head-font); letter-spacing: .02em; color: var(--gold);
  text-shadow: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink), 1.5px 1.5px var(--ink), -1.5px 1.5px var(--ink), 0 4px 0 var(--ink), 0 0 20px rgba(255, 150, 40, .4); }
body.pg .pg-main h2, body.pg .pg-main h3, body.pg .pg-cta-t { font-family: var(--head-font); font-weight: 400; letter-spacing: .02em; color: #fff; text-shadow: var(--outline); }
body.pg .pg-crumbs { color: var(--muted); }

/* every box is a game panel */
body.pg .pg-card, body.pg .pg-details, body.pg .pg-faq details, body.pg .pg-tiles li, body.pg .pg-cta {
  background: var(--panel-bg); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--panel-shadow); }
body.pg .pg-cta { box-shadow: inset 0 0 0 2px var(--gold), var(--panel-shadow); }
body.pg summary { font: 400 17px/1.25 var(--head-font); letter-spacing: .02em; color: #fff; text-shadow: var(--outline); }
body.pg summary::marker { color: var(--gold); }
body.pg .pg-tiles b { font: 400 22px/1.1 var(--head-font); color: var(--gold-2); text-shadow: var(--outline); }
body.pg .pg-tiles span { color: var(--muted); font-weight: 600; }
body.pg .pg-note { border-left: 4px solid var(--gold); background: rgba(15, 8, 38, .7); color: var(--text); }
body.pg .pg-steps li::marker { color: var(--gold); font-family: var(--head-font); }
body.pg .pg-steps strong { font-family: var(--head-font); font-weight: 400; color: var(--gold-2); letter-spacing: .02em; }
body.pg .pg-code { border: 2px solid var(--ink); background: var(--panel-3); }

/* tables: ink lines; on a phone each row is a small game panel */
body.pg .pg-table th { color: var(--gold-2); font: 400 14px/1.2 var(--head-font); letter-spacing: .03em; }
body.pg .pg-table th, body.pg .pg-table td { border-bottom-color: rgba(255, 210, 110, .15); }
@media (max-width: 559px) {
  body.pg .pg-table tr { background: var(--panel-bg); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 210, 110, .3), 0 3px 0 var(--ink); }
  body.pg .pg-table td::before { color: var(--muted); font-weight: 600; }
}

/* in-page tabs: the farm's HATCH EGG / UPGRADE / SHOP bar (dark panel, gold = the open tab) */
body.pg .pg-tablist button { border: 2.5px solid var(--ink); border-radius: 14px; color: var(--muted); font: 400 clamp(14px, 4vw, 16px)/1 var(--head-font); letter-spacing: .03em;
  background: linear-gradient(180deg, var(--btn-1), var(--btn-2)); box-shadow: inset 0 0 0 1px rgba(255, 210, 110, .25), 0 3px 0 var(--ink); }
body.pg .pg-tablist button[aria-selected="true"] { color: #2a1400; border-color: #5a2c00;
  background: linear-gradient(180deg, #ffe27a, var(--gold) 60%, var(--gold-3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 #8a4300, 0 0 14px var(--glow); }
body.pg .pg-more-btn { color: var(--gold-2); }
:root{--panel:#24124a;--panel2:#2e1a5c;--line:#4a2f8a;--text:#f3eeff;--muted:#c2b6e6;--good:#3cf08a;--bg:#120826;--accent:#ffc83d}