@font-face {
  font-family: 'Circular Std';
  src: url('../fonts/CircularStd-Book.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Circular Std';
  src: url('../fonts/CircularStd-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Circular Std';
  src: url('../fonts/CircularStd-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Neulis Cursive';
  src: url('../fonts/NeulisCursive-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Neulis Cursive';
  src: url('../fonts/neulis-cursive-bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Brand tokens shared with PuriKura (same event, same palette).
     --purple/--purple-deep match PuriKura's #screen-idle landing button
     (--lp-purple/--lp-purple-dark) since that's the screen this page's
     button visually matches; --green stays Jabot's belly-screen brand
     green (PuriKura's global default), not that landing screen's lighter
     lime accent (--lp-green), which nothing here uses. */
  --cream: #faf5f1;
  --ink: #363636;
  --ink-muted: #6b6259;
  --purple: #5c2e91;
  --purple-deep: #351559;
  --green: #B4E164;
  --green-dark: #5fa22b;
  --white: #ffffff;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --r-pill: 11px;
  --shadow-sm: 0 4px 14px rgba(34, 29, 23, 0.1);
  --shadow-md: 0 10px 28px rgba(34, 29, 23, 0.16);
  --shadow-lg: 0 18px 40px rgba(34, 29, 23, 0.24);
  --font-display: 'Neulis Cursive', 'Baloo 2', cursive;
  --font-body: 'Circular Std', sans-serif;
  --touch-min: 48px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

/* Fullscreen mobile app shell — every page is a single fixed-height view,
   no page scroll (this is a camera/AR app, not a document).
   `svh` (small viewport height), not `dvh`: on Android Chrome, `dvh` can
   report a height that extends behind the OS navigation bar (3-button or
   gesture pill) rather than stopping above it — `env(safe-area-inset-
   bottom)` isn't reliably populated for that bar the way it is for iOS's
   home indicator, so bottom-pinned UI (HUD, buttons) ended up hidden
   behind it. `svh` is defined as the smallest possible viewport, so it's
   guaranteed to sit above any bottom system/browser chrome regardless of
   inset support — the plain `vh` line is just a fallback for browsers old
   enough to not know `svh` at all. */
.app-shell {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}