/* Shared kiosk kit: fonts, palette (from the Tree of Values prototype), stage scaling, touch defaults */
@font-face { font-family: Tajawal; font-weight: 500; src: url(fonts/Tajawal-500.ttf) format('truetype'); font-display: block; }
@font-face { font-family: Tajawal; font-weight: 700; src: url(fonts/Tajawal-700.ttf) format('truetype'); font-display: block; }
@font-face { font-family: Tajawal; font-weight: 800; src: url(fonts/Tajawal-800.ttf) format('truetype'); font-display: block; }

:root {
  --deep: #1F4A4C;
  --petrol: #2E6461;
  --green: #5E8D7E;
  --sage: #9DB8A6;
  --sand: #EADFC4;
  --cream: #EFE8DA;
  --paper: #F7F2E8;
  --gold: #B8955A;
  --gold-2: #D7BC86;
  --gold-3: #8C6C38;
  --ink: #2A3B3A;
  --muted: #5F6F6C;
  --line: rgba(42, 59, 58, .14);
  --danger: #A4473A;
  --ok: #2E6461;
  --radius: 28px;
  --shadow: 0 18px 50px -20px rgba(31, 74, 76, .45);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: Tajawal, 'Segoe UI', Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); font-weight: 500; color: var(--ink); background: var(--cream);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* Kiosk pages: no scrolling, no selection, no zoom, no tap flash */
body.kiosk {
  overflow: hidden; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
body.kiosk textarea, body.kiosk input { user-select: text; -webkit-user-select: text; }

/* Fine print (source lines, disclaimers, explanatory notes): hidden unless config.json "showFinePrint": true */
.fine { display: none !important; }
body.show-fine .fine { display: revert !important; }

/* Display screens: pointer hides after a few idle seconds and returns on movement (see autoHideCursor in kit.js) */
body.cursor-idle, body.cursor-idle * { cursor: none !important; }

/* Fixed-size design stage scaled to fit any screen (letterboxed) */
.viewport { position: fixed; inset: 0; background: #0f1d1e; overflow: hidden; }
.stage { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; overflow: hidden; background: var(--cream); }

/* Screens inside a stage, one visible at a time */
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.screen.active { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; border-radius: 999px; padding: .7em 1.6em; font-weight: 700;
  background: var(--paper); color: var(--deep); box-shadow: inset 0 0 0 2px var(--line);
  transition: transform .15s var(--ease), background .2s, box-shadow .2s, opacity .2s;
}
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--deep); color: var(--paper); box-shadow: var(--shadow); }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2b200d; box-shadow: var(--shadow); }
.btn[disabled] { opacity: .38; pointer-events: none; }
.btn:focus-visible, .tap:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }

/* Language toggle chip */
.lang-toggle { position: absolute; top: 40px; inset-inline-end: 40px; z-index: 5; font-size: 30px; padding: .45em 1.2em; }

/* Small print / disclaimers */
.fineprint { color: var(--muted); font-size: .8em; line-height: 1.5; }

/* Subtle paper texture so large flat areas don't band on LED/LCD */
.texture {
  background-image:
    radial-gradient(1200px 800px at 85% -10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(157,184,166,.28), transparent 60%);
}

/* Breathing pulse for "touch to start" cues */
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.04); opacity: 1; } }
.breathe { animation: breathe 2.8s ease-in-out infinite; }

/* Offline badge (shown by kit.js when the live connection drops) */
.net-badge {
  position: fixed; bottom: 14px; left: 14px; z-index: 99; font: 700 13px/1 var(--font);
  background: var(--danger); color: #fff; padding: 7px 12px; border-radius: 99px; opacity: 0; transition: opacity .3s; pointer-events: none;
}
.net-badge.show { opacity: .9; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }