/* Tokens, reset, layout and shared components (spec §6: calm, big targets, light and dark). */
:root {
  --bg: #fff8f0; --surface: #ffffff; --surface-2: #fff1e3; --text: #1f2430; --muted: #6b7280;
  --accent: #ff7a1a; --accent-ink: #ffffff; --blue: #2f80ed; --good: #2e9e5b; --bad: #e0473d;
  --ring-me: #2f80ed; --ring-you: #ff7a1a; --ring-boss: #e0a100; --bubble: #ffe8d1;
  --radius: 22px; --shadow: 0 6px 20px rgb(31 36 48 / 0.10);
  --font: system-ui, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161c; --surface: #1e2129; --surface-2: #272b35; --text: #f2f3f5; --muted: #9aa1ac;
    --accent: #ff8a33; --blue: #5b9bff; --good: #4cc47e; --bad: #ff6b60; --shadow: 0 6px 20px rgb(0 0 0 / 0.35);
    --bubble: #3b4150;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 17px/1.4 var(--font); -webkit-tap-highlight-color: transparent; }
#app {
  min-height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
[dir="rtl"] { font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; }
.em { width: var(--em, 1.4em); height: var(--em, 1.4em); vertical-align: middle; object-fit: contain; user-select: none; }
.em-text { display: inline-block; font-size: var(--em, 1.4em); line-height: 1; width: auto; height: auto; }
.btn {
  min-height: 56px; padding: 0 22px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow);
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn:disabled { opacity: .4; box-shadow: none; cursor: default; }
.btn.wide { width: 100%; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow); font-weight: 700;
}
.error { color: var(--bad); font-weight: 600; text-align: center; }
.home-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.xpbar { display: inline-block; width: 56px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-left: 4px; }
.xpbar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.welcome, .hint { text-align: center; margin: 0; padding: 12px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.start {
  margin: auto; width: min(64vw, 240px); aspect-ratio: 1; border-radius: 50%; background: var(--accent);
  box-shadow: 0 14px 40px rgb(255 122 26 / 0.45); display: grid; place-items: center; animation: breathe 2.6s ease-in-out infinite;
}
.start .em { --em: 45%; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .25)); }
.home-nav { display: flex; justify-content: space-around; }
.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; min-height: 64px;
  padding: 8px; border-radius: 18px; color: var(--muted); font-size: 14px; font-weight: 600;
}
.nav-btn .em { --em: 34px; }
@keyframes breathe { 50% { transform: scale(1.04); } }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
.tip { position: relative; margin: 0; padding: 12px 44px 12px 14px; border-radius: 16px; background: var(--surface-2); font-size: 15px; }
.tip-close { position: absolute; right: 2px; top: 2px; width: 48px; height: 48px; border-radius: 50%; }