/* Game Boy theme for the classic layout (James 2026-10-05): dark slate page like the screen bezel,
   cartridge-grey cards, green-screen panels and tags, maroon A-button buttons. */
:root{
  --bg:#262833; --line:#3d4052; --muted:#b7bbcc; --ink:#e7e9f0;
  --accent:#9bbc0f; --accent-ink:#0f380f; --glow:rgba(155,188,15,.18);
  --g0:#0f380f; --g1:#306230; --g2:#8bac0f; --g3:#9bbc0f;
  --shell:#cfcdc5; --shell-dk:#b4b2aa; --navy:#2d3592; --btn:#8e1f4f; --cart-ink:#30323d;
}
body{background:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/6px 6px,var(--bg)}

/* top bar = the screen bezel, with the two stripes */
.bar{background:linear-gradient(180deg,#5d6177,#4d5064);border-bottom:0;box-shadow:0 3px 0 #8b2c62,0 6px 0 #2d3b8c,0 10px 20px rgba(0,0,0,.35)}
.mark{color:var(--g3)}
.bar nav a{color:#d3d6e6}
.bar nav a:hover{color:#fff}
.newsbtn{background:var(--btn);color:#fff;box-shadow:0 3px 0 #4a0c27}
.switch{color:#d3d6e6}

/* masthead = a green screen */
header.mast{margin-top:28px;padding:clamp(18px,4vw,32px);background:var(--g3);color:var(--g0);border-radius:6px 6px 36px 6px;
  box-shadow:inset 4px 4px 0 rgba(0,0,0,.18),0 0 0 10px #4d5064,0 0 0 12px #3a3d4e;position:relative;overflow:hidden}
header.mast::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(15,56,15,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(15,56,15,.05) 0 1px,transparent 1px 3px)}
header.mast h1{color:var(--g0);text-shadow:none}
header.mast .role{color:var(--g1)}
header.mast .lede{color:var(--g0)}
header.mast .lede a{color:var(--g0);text-decoration-color:var(--g1)}
.mark-img{filter:drop-shadow(2px 2px 0 rgba(15,56,15,.35))}

/* cards and spotlight = cartridges */
.spotlight,.card{background:linear-gradient(180deg,#d9d7cf,var(--shell) 30%,#c3c1b9);border:0;color:var(--cart-ink);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset -4px -5px 0 rgba(0,0,0,.08),0 6px 0 #8f8d86,0 14px 24px rgba(0,0,0,.35)}
.spotlight{border-radius:10px 10px 40px 10px;margin-top:40px}
.card{border-radius:8px 8px 26px 8px}
.card .art,.spotlight .art{border:0;border-radius:4px;margin:12px 12px 0;box-shadow:inset 0 0 0 3px rgba(0,0,0,.15),0 0 0 4px #b4b2aa}
.spotlight .art{margin:0}
.card .art{width:auto}
.card h3,.spotlight h2{color:var(--navy)}
.card .tag,.spotlight .tag{color:var(--btn)}
.spotlight .info p:not(.tag),.card details p{color:#4a4c58}
.spotlight .kick{color:#6b6d78}
.card summary{color:var(--navy)}
.facts li{background:var(--g3);color:var(--g0);border-radius:2px}
.facts li.state{background:var(--g0);color:var(--g3)}
.btn{background:radial-gradient(circle at 30% 25%,#b73a6e,var(--btn) 60%,#7a1641);color:#fff;box-shadow:0 4px 0 #4a0c27;border-radius:999px}
.btn:active{box-shadow:0 1px 0 #4a0c27}
.btn.alt{background:linear-gradient(180deg,#5d6177,#45485a);box-shadow:0 4px 0 #2a2c38}
.btn.alt:active{box-shadow:0 1px 0 #2a2c38}
.btn:focus-visible{outline-color:var(--g3)}

/* tabs = select/start pills */
.tabs button{background:linear-gradient(180deg,#9b9aa3,#7d7c85);color:#1d1e26;border:0;box-shadow:0 3px 0 #55545c}
.tabs button:hover{color:#000;border:0}
.tabs button.on{background:var(--g3);color:var(--g0);box-shadow:0 3px 0 var(--g1)}

/* section labels in green pixels */
.section-head{color:var(--g3)}
.group .section-head{border-bottom-color:var(--line)}

/* launch sign-up = green screen */
.launch{background:var(--g3);border:0;color:var(--g0);border-radius:6px 6px 26px 6px;box-shadow:inset 3px 3px 0 rgba(0,0,0,.15),0 0 0 8px #4d5064}
.launch h3{color:var(--g0)}
.launch p{color:var(--g1)}
.launch fieldset label{color:var(--g0)}
.launch input[type=checkbox]{accent-color:var(--g0)}
.launch input[type=email]{background:var(--g2);color:var(--g0);border:2px solid var(--g0)}
.launch input[type=email]::placeholder{color:var(--g1)}
.launch .status.ok{color:var(--g0)} .launch .status.err{color:#7a1641}

footer{color:var(--muted);border-top-color:var(--line)}
footer a{color:var(--g3)}
footer a.btn.tip{color:#fff}
.gbview{color:var(--g3)}

/* support page */
.page h1{color:var(--g3)}
.faq a{color:var(--g3)}
form.contact{background:var(--shell);color:var(--cart-ink);border:0;box-shadow:0 6px 0 #8f8d86}
form.contact label{color:#4a4c58}
form.contact input,form.contact select,form.contact textarea{background:#e6e4dc;color:#1d1e26;border-color:#a9a79f}
form.contact input:focus,form.contact select:focus,form.contact textarea:focus{outline-color:var(--btn)}