:root { --ink:#f5f6ff; --muted:#b7c3f6; --navy:#070b2c; --panel:rgba(8,13,53,.86); --line:#46ddff; --violet:#ae4cff; --gold:#ffbf3f; --pink:#ff5fdb; --shadow:0 14px 34px rgba(0,0,0,.38); font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:#04061b; }
button { font:inherit; color:inherit; cursor:pointer; }
.app-shell { min-height:100vh; padding:clamp(1rem,3vw,2.8rem); background:linear-gradient(180deg,rgba(4,6,27,.45),rgba(4,6,27,.91)), url("assets/lighthouse-coast.png") center/cover fixed; }
.frame { width:min(100%,980px); margin:auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:clamp(1rem,2.4vw,2rem); }
.brand { display:flex; align-items:center; gap:.75rem; font-weight:900; letter-spacing:-.06em; font-size:clamp(1.45rem,4vw,2.25rem); text-shadow:3px 3px 0 #5b168a; }
.brand-mark { color:var(--gold); font-size:1.55em; filter:drop-shadow(0 0 10px var(--gold)); }
.brand span { color:#57dfff; -webkit-text-stroke:1px #2840c2; }
.controls { display:flex; gap:.5rem; align-items:center; }
.toggle, .action, .mode-card, .category-button, .level-button { border:1px solid color-mix(in srgb,var(--line) 78%,transparent); background:var(--panel); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 0 22px color-mix(in srgb,var(--line) 16%,transparent); }
.toggle { display:flex; border-radius:.75rem; overflow:hidden; padding:.18rem; }
.toggle button { border:0; background:transparent; padding:.48rem .72rem; border-radius:.5rem; font-weight:800; font-size:.87rem; }
.toggle button.active { background:var(--gold); color:#1c1039; box-shadow:0 0 13px color-mix(in srgb,var(--gold) 60%,transparent); }
.pixel-panel { background:var(--panel); border:2px solid var(--line); outline:2px solid color-mix(in srgb,var(--violet) 85%,transparent); outline-offset:4px; border-radius:.9rem; box-shadow:var(--shadow),0 0 26px color-mix(in srgb,var(--line) 30%,transparent); }
.home { padding:clamp(1rem,3vw,2rem); }
.eyebrow { color:var(--gold); font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:.76rem; }
h1 { margin:.3rem 0 1.2rem; font-size:clamp(2rem,5vw,3.7rem); line-height:1; letter-spacing:-.06em; }
.modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.mode-card { min-height:146px; text-align:left; padding:1.1rem; border-radius:.9rem; position:relative; transition:transform .18s ease, box-shadow .18s ease; }
.mode-card:hover, .mode-card:focus-visible { transform:translateY(-4px); box-shadow:0 0 0 3px var(--gold),0 0 28px color-mix(in srgb,var(--gold) 38%,transparent); outline:none; }
.mode-icon { font-size:2rem; display:block; margin-bottom:.55rem; }
.mode-card strong { display:block; font-size:clamp(1.1rem,2vw,1.35rem); }
.mode-card small { color:var(--muted); display:block; margin-top:.28rem; font-size:.92rem; }
.pick-panel { margin-top:1.5rem; padding:1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.pick-panel p { font-weight:900; font-size:1.05rem; margin:0 auto 0 0; }
.action { border-radius:.72rem; padding:.8rem 1rem; font-weight:900; }
.action.primary { border-color:var(--gold); background:linear-gradient(135deg,#ffad22,#7b3fe6); color:#120a2f; }
.action.secondary { background:rgba(8,18,69,.9); }
.manual { padding:clamp(1rem,3vw,2rem); }
.screen-title { display:flex; align-items:center; gap:.75rem; margin-bottom:1.2rem; }
.screen-title h1 { margin:0; font-size:clamp(1.7rem,4vw,2.8rem); }
.back { border:0; background:transparent; color:var(--line); font-size:1.6rem; }
.filter-section { margin:1rem 0; }
.filter-section h2 { font-size:1rem; margin:.4rem 0 .65rem; color:var(--muted); }
.category-grid, .level-grid { display:flex; flex-wrap:wrap; gap:.7rem; }
.category-button, .level-button { border-radius:999px; padding:.7rem .95rem; text-align:left; }
.category-button.active, .level-button.active { border-color:var(--gold); background:color-mix(in srgb,var(--gold) 20%,var(--panel)); box-shadow:0 0 16px color-mix(in srgb,var(--gold) 38%,transparent); }
.card-screen { min-height:calc(100vh - 5rem); display:grid; align-content:center; }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; }
.back-card { border:0; background:transparent; color:var(--ink); font-weight:800; }
.question-card { padding:clamp(1.2rem,5vw,4rem); text-align:center; min-height:390px; display:flex; flex-direction:column; justify-content:center; }
.card-tags { display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; }
.tag { border:1px solid var(--pink); color:#ffd5f7; padding:.35rem .65rem; border-radius:999px; font-size:.82rem; font-weight:800; background:rgba(66,11,75,.72); }
.tag.level { border-color:var(--gold); color:#fff1c3; background:rgba(89,51,4,.72); }
.question { font-size:clamp(1.45rem,4vw,2.75rem); line-height:1.2; letter-spacing:-.04em; margin:1.5rem auto 1.15rem; max-width:800px; text-shadow:0 2px 18px color-mix(in srgb,var(--gold) 25%,transparent); }
.bible-reference { display:inline-flex; align-self:center; gap:.35rem; margin:.15rem 0 1rem; padding:.45rem .7rem; border:1px solid color-mix(in srgb,var(--gold) 70%,transparent); border-radius:999px; color:#fff1c3; background:rgba(89,51,4,.55); font-size:.9rem; }
.helper { color:var(--muted); margin:0; }
.card-actions { display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:1.35rem; flex-wrap:wrap; }
.counter { color:var(--muted); font-weight:800; min-width:72px; text-align:center; }
.toast { position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); background:#161142; color:#fff; padding:.8rem 1rem; border:1px solid var(--gold); border-radius:.6rem; box-shadow:var(--shadow); }
@media (max-width:620px) { .app-shell { padding:1rem; } .topbar { align-items:flex-start; } .brand { font-size:1.55rem; } .controls { gap:.35rem; } .toggle button { padding:.45rem .55rem; } .modes { grid-template-columns:1fr; } .mode-card:last-child { grid-column:auto; } .mode-card { min-height:112px; } .pick-panel { align-items:stretch; } .pick-panel p { width:100%; } .pick-panel .action { flex:1; } .question-card { min-height:440px; } }