/* base.css — stage, DEMO banner, shared buttons, stickers, bob animation (UI_DESIGN_OPTION_A §4.2).
   All sizes are stage pixels on the fixed 390 x 700 design stage; stage.js scales it as a whole (no viewport units). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

#stage {
  position: absolute; left: 0; top: 0; width: 390px; height: 700px; overflow: hidden;
  background: var(--bg); color: var(--text); font-family: var(--font-body);
  transform-origin: 0 0;
}
#screen { position: absolute; inset: 0; }
.abs { position: absolute; }
.center { text-align: center; }

/* DEMO banner (D-030, R-28) — rendered by ui/banner.js on every screen, above everything */
.demo-banner {
  position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 1000;
  background: var(--banner-bg); color: var(--banner-text); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}

button { font-family: var(--font-body); color: var(--text); cursor: pointer; border: none; padding: 0; }
button:disabled { opacity: .45; cursor: default; }
button:focus { outline: none; }
button:focus-visible { outline: 3px solid var(--heading); outline-offset: 3px; }

/* main action button: pill, accent, Mali 700 white, 70–78 px */
.btn-main {
  width: 100%; border-radius: 39px; background: var(--accent); color: #FFFFFF;
  font-family: var(--font-head); font-weight: 700; box-shadow: var(--shadow-main);
}
.btn-main:active { transform: translateY(2px); }
/* white secondary pill */
.btn-white {
  background: #FFFFFF; color: var(--text); font-weight: 700; box-shadow: var(--shadow-pill);
}
.btn-white:active, .tile:active { transform: translateY(2px); }

/* segmented control (A2 orientation, A7 copies) */
.seg { display: flex; background: var(--sand); padding: 5px; box-shadow: 0 8px 14px rgba(74,52,38,0.16); }
.seg button { flex: 1; height: 48px; border-radius: 24px; background: transparent; color: var(--text); font-weight: 700; }
.seg button.on { background: var(--green-ui); color: #FFFFFF; box-shadow: 0 6px 10px rgba(58,92,52,0.35); }

/* animal stickers */
.sticker {
  border-radius: 50%; border: 4px solid #FFFFFF; box-shadow: var(--shadow-sticker);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.sticker.small { border-width: 3px; box-shadow: var(--shadow-sticker-small); }
.sticker svg { display: block; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.bob  { animation: bob 3.2s ease-in-out infinite; }
.bob2 { animation: bob 3.2s ease-in-out -1.1s infinite; }
.bob3 { animation: bob 3.2s ease-in-out -2.1s infinite; }
@media (prefers-reduced-motion: reduce) { .bob, .bob2, .bob3 { animation: none; } }

/* camera box (A3, A6): whole video shown (contain), mirrored by CSS on the video only (D-033) */
.cam-box { position: absolute; overflow: hidden; background: var(--preview-box); }
.cam-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.cam-frame { position: absolute; border: 4px dashed var(--green-ui); border-radius: 16px; pointer-events: none; }

/* flash on capture */
.flash { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; pointer-events: none; z-index: 900; }
.flash.go { animation: flash .35s ease-out; }
@keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; } }

/* overlays (service camera test, fail-closed message) stay under the banner */
.overlay { position: absolute; inset: 0; z-index: 800; background: var(--bg); }

/* service-mode hotspot is a region test in app.js, not an element; nothing is drawn for it */

/* print area: only used by the browser "dialog" print path (A4 portrait, card centred at true size) — the same page
   the Electron app builds for silent printing (electron/main.js). */
@page { size: A4 portrait; margin: 0; }
#printArea { display: none; }
@media print {
  html, body { overflow: visible; background: #FFFFFF; }
  #stage { display: none; }
  #printArea { display: flex; align-items: center; justify-content: center; width: 210mm; height: 297mm; }
  #printArea img { display: block; }
}