/* PixieHunt — Final UI (mobile-first, responsive)
   Palette: deep navy bg, card #0f1420, stroke #1f2536, accent gold #E7B447, teal #0FA3B1, pink #FF63D6
   Fonts: Pixel headline (Press Start 2P), System body; Baybayin supportive class .baybayin
*/
:root{
  --bg:#0b0d12;
  --card:#0f1420;
  --stroke:#1f2536;
  --ink:#e9eefc;
  --muted:#9aa4b2;
  --gold:#e7b447;
  --teal:#0fa3b1;
  --pink:#ff63d6;
  --ok:#1bc98e; --warn:#e6b800; --danger:#f05252;
  --tabbar-h:72px;
  --radius:16px;
}

/* reset-ish */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif }

/* pixel headline */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
h1,h2,h3,.px-h{ font-family: "Press Start 2P", system-ui, sans-serif; letter-spacing:.5px }

/* optional Baybayin helper */
.baybayin{ font-family: "Noto Sans Tagalog", "Noto Serif Tagalog", system-ui, sans-serif }

/* layout */
.container{ width:100%; max-width:980px; margin:0 auto; padding:14px }
main{ padding-bottom:calc(var(--tabbar-h) + 18px) }

/* card */
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.card--ghost{ background:transparent; border-style:dashed }
.kv{ display:flex; align-items:center; justify-content:space-between }
.center{ display:flex; align-items:center; justify-content:center; text-align:center }
.help{ color:var(--muted) }

/* grid */
.grid{ display:grid; gap:12px }
.grid--2{ grid-template-columns: repeat(2, 1fr) }

/* inputs & buttons (pill, soft) */
.input, .select, .file, textarea{
  width:100%; background:#0b0f16; color:var(--ink);
  border:1px solid var(--stroke); border-radius:12px;
  padding:10px 12px; outline:none;
}
.input:focus, .select:focus, textarea:focus{ border-color:#2a3a52; box-shadow:0 0 0 3px rgba(15,163,177,.12) }
.btn{
  background:linear-gradient(180deg, #1aaec1, var(--teal));
  color:#05131b; border:0; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer;
}
.btn:hover{ filter:brightness(1.05) }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--stroke) }
.btn--gold{ background:linear-gradient(180deg,#f0cc69,var(--gold)); color:#2b2305 }
.btn--danger{ background:var(--danger); color:#fff }
.btn:disabled{ opacity:.6; cursor:not-allowed }

/* badges */
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--stroke); background:#0b0f16; color:var(--ink); font-size:12px }
.badge--ok{ border-color:rgba(27,201,142,.35); color:#BDF7E5; background:rgba(27,201,142,.08) }
.badge--warn{ border-color:rgba(230,184,0,.35); color:#ffefb0; background:rgba(230,184,0,.08) }
.badge--danger{ border-color:rgba(240,82,82,.35); color:#ffd1d1; background:rgba(240,82,82,.08) }
.badge--muted{ color:var(--muted) }

/* tabs (filters) */
.tabs{ display:flex; gap:8px; flex-wrap:wrap }
.tab{ padding:8px 12px; border-radius:999px; border:1px solid var(--stroke); color:var(--muted); background:#0b0f16; cursor:pointer; text-decoration:none }
.tab.active{ color:#fff; border-color:rgba(255,99,214,.45); background:rgba(255,99,214,.06) }

/* xp bar */
.xpbar{ height:10px; border-radius:999px; background:#111827; border:1px solid var(--stroke); overflow:hidden }
.xpbar>div{ height:100%; background:linear-gradient(90deg,var(--gold),var(--teal)) }

/* bottom nav */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; height:var(--tabbar-h);
  background:rgba(10,12,18,.92); backdrop-filter:blur(8px);
  border-top:1px solid #181e2a; display:flex; z-index:50;
}
.tabbar a{ flex:1; color:var(--muted); text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px }
.tabbar a.active{ color:#fff }
.tabbar .dot{ width:6px; height:6px; border-radius:50%; background:transparent }
.tabbar a.active .dot{ background:var(--pink) }

/* scanner HUD + modals */
.hud{ position:absolute; top:8px; left:50%; transform:translateX(-50%);
  background:rgba(10,12,18,.65); border:1px solid var(--stroke); border-radius:12px; padding:6px 10px; font-size:12px; z-index:5; white-space:nowrap }
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:60 }
.modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92%,480px); z-index:61; display:none }
.modal.show + .modal-backdrop,.modal.show{ display:block }
.modal .panel{ background:var(--card); border:1px solid var(--stroke); border-radius:16px; padding:14px }

/* inventory card visuals */
.item{
  background:#0b0f16; border:1px solid var(--stroke); border-radius:14px; overflow:hidden;
}
.item .thumb{ width:100%; aspect-ratio: 1/1; background:#081019; display:flex; align-items:center; justify-content:center }
.item .meta{ padding:10px }
.rarity{ position:absolute; top:8px; right:8px; font-size:11px; padding:4px 6px; border-radius:8px; background:rgba(0,0,0,.35); border:1px solid var(--stroke) }

/* raffle wheel canvas container */
.wheel-wrap{ aspect-ratio:1/1; border-radius:50%; border:1px solid var(--stroke); background:#0b0f16; display:flex; align-items:center; justify-content:center }

/* responsive */
@media (max-width:680px){ .grid--2{ grid-template-columns:1fr } }


/* === Camera/AR visibility fix === */
a-scene{ display:block; width:100%; height:100%; position:relative }
a-scene canvas, a-scene video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
#sceneWrap{ position:relative; height:62vh; background:#060b12; }