/* BOLTGRAPH HUD — colors come from theme.js via CSS custom properties on :root */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg, #0b0b10); }
body { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--text, #e8e2d0);
       -webkit-user-select: none; user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#boot { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 1rem; background: #0b0b10;
        color: #e8c76a; font-size: 1.4rem; letter-spacing: .35em; text-align: center; }
#boot .bolt { font-size: 3rem; animation: pulse 1.1s ease-in-out infinite; }
#boot span { font-size: .8rem; letter-spacing: .18em; opacity: .55; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.92); } }

#hud { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex;
       align-items: center; gap: 1rem; padding: .55rem .9rem; pointer-events: none;
       background: linear-gradient(var(--hudbg, rgba(10,10,14,.72)), transparent); }
#hud > * { pointer-events: auto; }
#brand { font-weight: 600; letter-spacing: .12em; font-size: .95rem; color: var(--accent, #e8c76a); }
#subtitle { font-weight: 400; letter-spacing: .04em; font-size: .72rem; opacity: .6; color: var(--text, #e8e2d0); }

#themes { display: flex; gap: .45rem; margin-left: auto; }
#themes .sw { width: 1.15rem; height: 1.15rem; border-radius: 50%; cursor: pointer;
              border: 2px solid transparent; transition: transform .12s; }
#themes .sw:hover { transform: scale(1.2); }
#themes .sw.on { border-color: var(--accent, #e8c76a); }

#xrbtns { display: flex; gap: .5rem; }
#xrbtns button, #hint { font-family: inherit; }
#xrbtns button { padding: .32rem .9rem; border-radius: 1rem; cursor: pointer; font-size: .8rem;
  background: var(--btnbg, rgba(232,199,106,.14)); color: var(--accent, #e8c76a);
  border: 1px solid var(--accent, #e8c76a); }
#xrbtns button:disabled { opacity: .3; cursor: default; }
#xrbtns button:not(:disabled):hover { background: var(--accent, #e8c76a); color: var(--bg, #0b0b10); }
#apk-link { align-self: center; font-size: .75rem; color: var(--accent, #e8c76a);
            text-decoration: none; opacity: .75; padding: .3rem .5rem; }
#apk-link:hover { opacity: 1; text-decoration: underline; }

#stats { font-size: .72rem; opacity: .75; font-variant-numeric: tabular-nums; }

#hint { position: fixed; bottom: .7rem; left: 50%; transform: translateX(-50%); z-index: 20;
        font-size: .7rem; opacity: .45; white-space: nowrap; }
@media (max-width: 700px) {
  #subtitle, #hint { display: none; }
  #hud { flex-wrap: wrap; gap: .5rem; }
}