:root {
  --bg: #050b18;
  --glow: #7fe3ff;
  --accent: #ffcf3f;
  --pink: #ff6fae;
  --text: #eaf7ff;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none; user-select: none; overscroll-behavior: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

#stage { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
#video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.35) brightness(0.42);
  transition: filter .3s;
}
#video.mirror { transform: scaleX(-1); }
body.plain #video { filter: none; }
#tint {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(20,90,160,0.28) 0%, rgba(3,12,35,0.7) 100%);
  mix-blend-mode: normal; transition: opacity .3s;
}
body.plain #tint, body.plain #shimmer { opacity: 0; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#shimmer {
  position: absolute; left: 0; right: 0; height: 30%; top: -30%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(127,227,255,0.07), transparent);
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { top: 100%; } }

#labels { position: absolute; inset: 0; pointer-events: none; }
.bone-label {
  position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform;
  padding: 8px 14px; min-height: 40px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.85);
  background: rgba(8, 30, 60, 0.82); color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .2px;
  box-shadow: 0 0 12px rgba(127,227,255,0.6); white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.bone-label:active { filter: brightness(1.4); }
body.little .bone-label { font-size: 20px; padding: 10px 18px; min-height: 48px; }
.bone-label .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--accent)); box-shadow: 0 0 8px var(--c, var(--accent)); }

#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  padding: calc(var(--safe-t) + 10px) 16px 10px; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(5,11,24,0.85), transparent); pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.brand { font-size: 20px; font-weight: 700; text-shadow: 0 0 10px rgba(127,227,255,.7); }
.brand b { color: var(--accent); }
.logo { display: inline-block; transform: rotate(-20deg); }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6);
  background: rgba(10,30,60,.7); font-size: 22px; font-weight: 900;
}

.pill {
  position: fixed; z-index: 5; left: 50%; transform: translateX(-50%);
  top: calc(var(--safe-t) + 66px); padding: 10px 18px; border-radius: 999px;
  background: rgba(10, 30, 60, 0.8); border: 2px solid rgba(127,227,255,.5);
  font-weight: 700; font-size: 16px; text-align: center; width: max-content; max-width: 92vw;
}

#controls {
  position: fixed; z-index: 5; left: 0; right: 0; bottom: 0;
  padding: 10px 8px calc(var(--safe-b) + 34px); display: flex; justify-content: center; gap: 8px;
  background: linear-gradient(to top, rgba(5,11,24,0.9), transparent);
}
.big-btn {
  flex: 1 1 0; max-width: 120px; min-width: 0; min-height: 68px; padding: 6px 4px; border-radius: 20px;
  border: 3px solid rgba(255,255,255,.35); background: rgba(12,36,70,.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-weight: 800; font-size: 13px; transition: transform .1s, background .2s, border-color .2s;
}
.big-btn .emoji { font-size: 28px; line-height: 1; }
.big-btn.on { border-color: var(--accent); background: rgba(40, 60, 20, .85); box-shadow: 0 0 14px rgba(255,207,63,.35); }
.big-btn:active { transform: scale(.94); }

.screen {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(circle at 50% 30%, #12345e 0%, #050b18 70%);
}
.splash-card { text-align: center; max-width: 420px; }
.splash-emoji { font-size: 72px; filter: drop-shadow(0 0 16px rgba(127,227,255,.8)); }
h1 { font-size: 38px; margin: 8px 0; line-height: 1.05; text-shadow: 0 0 16px rgba(127,227,255,.7); }
h1 span { color: var(--accent); display: block; }
.splash-card p { font-size: 18px; line-height: 1.4; }
.cta {
  margin-top: 12px; width: 100%; min-height: 68px; border: none; border-radius: 24px;
  font-size: 24px; font-weight: 900; color: #1b1300;
  background: linear-gradient(135deg, #ffe066, #ffb02e); box-shadow: 0 6px 0 #b9770e, 0 0 24px rgba(255,207,63,.5);
}
.cta:disabled { filter: grayscale(.7); opacity: .7; }
.cta:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #b9770e; }
.link-btn { margin-top: 16px; background: none; border: none; text-decoration: underline; font-size: 16px; opacity: .85; min-height: 44px; }
.small { font-size: 14px !important; opacity: .8; }

.modal {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.45); padding: 12px 12px calc(var(--safe-b) + 12px);
  animation: fade .2s ease-out;
}
@media (min-width: 700px) { .modal { align-items: center; } }
@keyframes fade { from { opacity: 0; } }
.card-inner {
  position: relative; width: 100%; max-width: 460px; max-height: 85vh; overflow: auto;
  background: linear-gradient(160deg, #173c6c, #0b1d3a); border: 3px solid var(--glow); border-radius: 28px;
  padding: 22px 22px 18px; box-shadow: 0 0 40px rgba(127,227,255,.45);
  animation: pop .25s cubic-bezier(.2,1.4,.5,1);
}
@keyframes pop { from { transform: translateY(40px) scale(.95); opacity: 0; } }
.card-emoji { font-size: 52px; text-align: center; }
.card-inner h2 { margin: 4px 0 2px; text-align: center; font-size: 30px; color: var(--accent); }
.card-count { text-align: center; font-weight: 700; opacity: .9; margin-bottom: 8px; }
.card-inner h3 { margin: 14px 0 4px; font-size: 18px; color: var(--glow); }
.card-inner p { margin: 0; font-size: 17px; line-height: 1.45; }
.fun { margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(255,111,174,.15); border: 2px dashed var(--pink); }
.fun h3 { margin-top: 0; color: var(--pink); }
.say { margin-top: 12px !important; font-size: 14px !important; opacity: .8; font-style: italic; text-align: center; }
.close-btn {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); background: rgba(0,0,0,.3); font-size: 20px; font-weight: 900;
}
.howto { font-size: 17px; line-height: 1.5; padding-left: 22px; }

.top-right { display: flex; gap: 8px; align-items: center; }
.age-btn {
  min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--accent);
  background: rgba(10,30,60,.75); font-weight: 800; font-size: 15px; white-space: nowrap;
}
@media (max-width: 380px) { .brand { font-size: 16px; } .age-btn { font-size: 13px; padding: 6px 10px; } }
.big-btn.hunt.on { border-color: var(--pink); background: rgba(80, 20, 60, .85); box-shadow: 0 0 14px rgba(255,111,174,.45); }

.age-pick { margin-top: 18px; }
.age-pick > span { display: block; font-weight: 700; margin-bottom: 8px; }
.seg { display: flex; gap: 8px; justify-content: center; }
.seg-btn {
  flex: 1; min-height: 52px; border-radius: 16px; border: 2px solid rgba(255,255,255,.35);
  background: rgba(12,36,70,.85); font-weight: 800; font-size: 17px;
}
.seg-btn.on { border-color: var(--accent); background: rgba(60, 50, 10, .9); box-shadow: 0 0 12px rgba(255,207,63,.4); }

#huntHud {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 64px);
  width: min(94vw, 520px); text-align: center; pointer-events: none;
}
.stars { font-size: 30px; letter-spacing: 4px; filter: drop-shadow(0 0 6px rgba(255,207,63,.7)); }
.hunt-prompt {
  margin-top: 6px; padding: 12px 16px; border-radius: 20px; font-size: 20px; font-weight: 900;
  background: rgba(80, 20, 60, .88); border: 3px solid var(--pink); box-shadow: 0 0 20px rgba(255,111,174,.5);
}
body.little .hunt-prompt { font-size: 23px; }
.toast {
  position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 120px);
  width: min(92vw, 480px); padding: 14px 18px; border-radius: 20px; text-align: center;
  background: rgba(60, 50, 10, .95); border: 3px solid var(--accent); font-size: 17px; font-weight: 700;
  animation: pop .3s cubic-bezier(.2,1.4,.5,1);
}
.toast b { color: var(--accent); font-size: 22px; display: block; }
.center { text-align: center; }
.big-stars { font-size: 40px; letter-spacing: 6px; margin: 6px 0 10px; }
.row { display: flex; flex-direction: column; align-items: center; margin-top: 14px; }

.big-btn.stop { border-color: rgba(255,120,120,.7); background: rgba(70,15,20,.85); }
.cam-on {
  position: fixed; z-index: 6; left: 12px; top: calc(var(--safe-t) + 60px);
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(70, 10, 15, .85); border: 2px solid #ff5d5d; font-weight: 800; font-size: 14px;
}
.cam-on.demo { background: rgba(10,30,60,.85); border-color: var(--glow); }
.cam-on .rec { width: 12px; height: 12px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: blink 1.2s infinite; }
.cam-on.demo .rec { background: var(--glow); box-shadow: 0 0 8px var(--glow); animation: none; }
@keyframes blink { 50% { opacity: .3; } }
#status { top: calc(var(--safe-t) + 104px); }
#huntHud { top: calc(var(--safe-t) + 98px) !important; }
.disclaimer-bar {
  position: fixed; z-index: 6; left: 0; right: 0; bottom: calc(var(--safe-b) + 6px); text-align: center;
  font-size: 11px; font-weight: 700; opacity: .85; pointer-events: none; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.disclaimer { font-size: 14px !important; font-weight: 700; color: var(--accent); margin-top: 14px !important; }
.subtitle { font-weight: 800; color: var(--glow); letter-spacing: .5px; margin-bottom: 6px; }
a { color: var(--glow); font-weight: 700; }
.link-btn.inline { margin: 0; padding: 0; min-height: 0; font-size: inherit; color: var(--glow); font-weight: 700; }
.gate-q { font-size: 30px !important; font-weight: 900; color: var(--accent); margin: 8px 0 !important; }
.gate-input {
  width: 140px; min-height: 52px; font: inherit; font-size: 26px; text-align: center; border-radius: 14px;
  border: 2px solid var(--glow); background: rgba(0,0,0,.3); color: #fff; -webkit-user-select: text; user-select: text;
}