/* Worldly styles — themeable via [data-theme] on . Design goals: clean, modern, fast, responsive, keyboard-friendly, with a dark and a light palette. */ :root { --maxw: 920px; --radius: 16px; --radius-sm: 10px; --gap: 16px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --transition: 160ms ease; } /* ---- dark (default) ---- */ [data-theme="dark"] { --bg: #0f1525; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #1c2950 0%, #0f1525 60%); --surface: #18213a; --surface-2: #202c4d; --text: #eef2ff; --muted: #9aa7c7; --primary: #4f8cff; --primary-ink: #ffffff; --accent: #ffce54; --good: #36d399; --good-bg: rgba(54, 211, 153, 0.12); --bad: #f87272; --bad-bg: rgba(248, 114, 114, 0.12); --border: #2a375d; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* ---- light ---- */ [data-theme="light"] { --bg: #eef2fb; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #dbe6ff 0%, #eef2fb 60%); --surface: #ffffff; --surface-2: #f3f6ff; --text: #142036; --muted: #5b6783; --primary: #2f6bff; --primary-ink: #ffffff; --accent: #e6a200; --good: #1aa472; --good-bg: rgba(26, 164, 114, 0.12); --bad: #d93a3a; --bad-bg: rgba(217, 58, 58, 0.10); --border: #d6deee; --shadow: 0 10px 30px rgba(40, 60, 120, 0.12); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg-grad), var(--bg); background-attachment: fixed; min-height: 100vh; display: flex; flex-direction: column; } /* ---- top bar ---- */ .topbar { display: flex; align-items: center; gap: var(--gap); padding: 12px 18px; position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 800; font-size: 1.15rem; letter-spacing: .2px; } .brand-globe { font-size: 1.4rem; } .brand-name { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hud { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; } .hud .chip { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--muted); } .hud .chip strong { color: var(--text); } .xpbar { width: 120px; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); } .xpbar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width var(--transition); } .icon-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer; transition: var(--transition); } .icon-btn:hover { background: var(--surface-2); } /* ---- layout ---- */ .app { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 22px 18px 60px; flex: 1; } .footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 16px; border-top: 1px solid var(--border); } .footer-link { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .footer-link:hover { color: var(--accent); } /* Comfortable touch targets (WCAG 2.5.8): icon buttons, map controls, quiz quit. */ .icon-btn, .map-btn { min-width: 44px; min-height: 44px; } .quiz-top .btn.ghost { min-height: 44px; } h1, h2, h3 { line-height: 1.2; } .screen-title { font-size: 1.6rem; margin: 4px 0 2px; } .screen-sub { color: var(--muted); margin: 0 0 20px; } /* ---- buttons ---- */ .btn { font-family: inherit; font-size: 1rem; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 11px 16px; cursor: pointer; transition: var(--transition); } .btn:hover { background: var(--surface-2); transform: translateY(-1px); } .btn.primary { background: var(--primary); color: var(--primary-ink); border-color: transparent; } .btn.primary:hover { filter: brightness(1.08); } .btn.ghost { background: transparent; } .btn-row { display: flex; gap: 12px; flex-wrap: wrap; } /* ---- mode grid (home) ---- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--gap); } .card { background: var(--surface); /* The cards are