/* SteadierSelf game style (locked Oct 17, 2026) - drop-in file.
   Use: link this file in the page head and load steadierself-bg.js at the end of the body.
   For a single-file game, paste this whole file inside a style tag instead.
   The background art is added by steadierself-bg.js; this file gives the page colours,
   lifts the content above the art, and styles the buttons. */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@600;700&family=Nunito:wght@500;600;700;800;900&display=swap');
:root { --ground-top: #130663; --ground-bottom: #610C4F; --card: rgba(30, 26, 100, .92); --line: #3A3A8A; --orange: #FF8A1F; }
html, body { height: 100%; }
body { margin: 0; color: #fff; font-family: 'Nunito', system-ui, sans-serif;
  background: linear-gradient(180deg, var(--ground-top) 12%, var(--ground-bottom) 67%) fixed; background-color: var(--ground-top); }
.ss-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ss-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.content { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 24px 16px; }
/* ===== BUTTONS (locked) ===== */
button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #FFC531; outline-offset: 2px; }
/* main action: orange with a darker orange "3D" edge */
.btn-primary { min-height: 56px; padding: 0 22px; border: none; border-radius: 14px; background: #FFA131; color: #14144A;
  font-size: 18px; font-weight: 800; box-shadow: 0 5px 0 #B8650F; transition: transform .12s ease, box-shadow .12s ease; }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #B8650F; }
/* second action: outline */
.btn-ghost { min-height: 52px; padding: 0 20px; border-radius: 14px; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF; font-size: 16px; font-weight: 800; }
.btn-ghost.gold { border-color: #FFC531; color: #FFC531; }
/* small chips / icon buttons: navy panel with dark edge */
.chip { min-height: 44px; padding: 0 12px; border: none; border-radius: 14px; background: #262673; color: #FFC531; font-weight: 800; box-shadow: 0 3px 0 #0A0A2E; }
/* answer options: orange, small corners; green when right, red + shake when wrong */
.opt { display: block; width: 100%; min-height: 48px; padding: 8px 12px; border: none; border-radius: 7px; text-align: left; background: #FFA131; color: #14144A;
  font-size: 16px; font-weight: 600; box-shadow: 0 4px 0 #B8650F; transition: transform .12s ease; }
.opt b { font-weight: 800; }
.opt:active { transform: translateY(2px); }
.opt.right { background: #2DD4A0; color: #053B2B; box-shadow: 0 5px 0 #0E8A66; }
.opt.wrong { background: #FF6B6B; color: #3D0A0A; box-shadow: 0 5px 0 #B23A3A; animation: shake .35s ease; }
@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }
/* topic / menu cards: see-through navy, coloured top edge, dark "3D" edge, press moves down */
.card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 20px; border: 2px solid #3A3A8A; border-top: 5px solid var(--acc, #5EC8FF);
  background: rgba(30, 26, 100, .92); color: #fff; text-align: left; box-shadow: 0 4px 0 #0A0A2E; transition: transform .12s ease; }
.card:active { transform: translateY(2px); }
/* topic colours: Home #5EC8FF, Food #FFA131, Clothes #F25EA8, Body #2DD4A0, Nature #8BD34A, Transport #FFC531, Work #A78BFA, Misc #4FD1C5 */
@media (prefers-reduced-motion: reduce) { .opt.wrong { animation: none; } }

/* everything inside <body> except the art sits above it */
body > *:not(.ss-bg) { position: relative; z-index: 1; }
/* SteadierSelf header text: <span class="ss-brand">Steadier<span>Self</span></span> */
.ss-brand { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 28px; color: #FFFFFF; letter-spacing: -.01em; white-space: nowrap; }
.ss-brand span { color: #FF8A1F; }
/* card grid: same-size cards, 2 per row on phones, more on big screens */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); gap: 12px; justify-content: start; }
@media (max-width: 420px) { .cards { grid-template-columns: 1fr 1fr; } }