/* ===== Abar font ===== */
@font-face { font-family: 'Abar'; src: url('fonts/AbarLow-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Abar'; src: url('fonts/AbarLow-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Abar'; src: url('fonts/AbarLow-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Abar'; src: url('fonts/AbarLow-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Abar'; src: url('fonts/AbarLow-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Abar'; src: url('fonts/AbarLow-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Abar'; src: url('fonts/AbarLow-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }

:root {
  --bg:        #0e1211;
  --surface:   #161b19;
  --surface-2: #1d2421;
  --surface-3: #232b28;
  --line:      rgba(255,255,255,0.075);
  --line-2:    rgba(255,255,255,0.12);
  --text:      #e9efec;
  --text-dim:  #8c9591;
  --text-faint:#5c6661;
  --accent:    #2fd6a6;
  --accent-2:  #25b88e;
  --accent-dim:rgba(47,214,166,0.13);
  --accent-glow:rgba(47,214,166,0.22);

  /* material categories */
  --wood:    #c79b5d;
  --copper:  #d98456;
  --metal:   #9bb0bd;
  --plastic: #86c2c9;

  /* status */
  --ok:      #2fd6a6;
  --broken:  #ef6a52;
  --loaned:  #e0a93f;

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
  --shadow: 0 12px 30px rgba(0,0,0,0.38);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: #07090a;
  font-family: 'Abar', system-ui, sans-serif;
  /* keep all digits Latin */
  font-feature-settings: "ss01" 0;
}

/* App number rendering — force latin digits everywhere via lang-neutral content; numbers are written as ASCII */
.num { font-variant-numeric: lining-nums; letter-spacing: .2px; }

::-webkit-scrollbar { width: 0; height: 0; }

.app-root {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(47,214,166,0.05), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(47,214,166,0.04), transparent 55%),
    #07090a;
  display: flex; align-items: center; justify-content: center;
  overflow: auto;
}

/* ---- screen container ---- */
.screen {
  direction: rtl;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Entrance motion — base state is fully visible; animation only runs when motion is allowed.
   Transform-only (no opacity) so content is never invisible if a capture pauses the animation. */
@keyframes screenIn { from { transform: translateY(10px); } to { transform: none; } }
@keyframes popIn { from { opacity:0; transform: scale(.96) translateY(10px);} to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp { from { transform: translateY(26px); } to { transform: translateY(0);} }
@keyframes riseUp { from { transform: translateY(16px); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .anim-screen { animation: screenIn .34s cubic-bezier(.2,.7,.2,1) both; }
  .rise { animation: riseUp .5s cubic-bezier(.2,.7,.2,1) both; }
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

.tap { transition: transform .12s ease, background .18s ease, border-color .18s ease; }
.tap:active { transform: scale(.97); }