/* Shared components + motion primitives, used by both the TV and the phones. */
@import url('/vendor/tajawal/arabic-500.css');
@import url('/vendor/tajawal/arabic-700.css');
@import url('/vendor/tajawal/arabic-800.css');
@import url('/vendor/tajawal/latin-500.css');
@import url('/vendor/tajawal/latin-700.css');
@import url('/vendor/tajawal/latin-800.css');
@import url('/vendor/lalezar/arabic-400.css');
@import url('/vendor/lalezar/latin-400.css');
@import url('/vendor/phosphor/style.css');
@import url('./tokens.css');

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-1);
  line-height: 1.45;
  color: var(--ink);
  background: var(--sky-0);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overflow: clip;
  user-select: none;
  -webkit-user-select: none;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, p { margin: 0; }
i[class^='ph-'] { display: inline-block; line-height: 1; }

/* ── type ── */
.display { font-family: var(--font-display); font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.fs-1 { font-size: var(--fs-1); } .fs-2 { font-size: var(--fs-2); } .fs-3 { font-size: var(--fs-3); }
.fs-4 { font-size: var(--fs-4); } .fs-5 { font-size: var(--fs-5); } .fs-6 { font-size: var(--fs-6); }
.fs-7 { font-size: var(--fs-7); }
.dim { color: var(--ink-2); }
.accent { color: var(--accent); }
.num { font-family: var(--font-display); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* ── card ── */
.card {
  background: var(--surface);
  border-radius: var(--r-l);
  box-shadow: inset 0 0.12rem 0 var(--line), var(--shadow-pop);
  padding: var(--s-5);
}
.card--accent { background: var(--accent); color: var(--ink-dark); box-shadow: var(--shadow-pop); }
.card--paper { background: var(--paper); color: var(--ink-dark); box-shadow: var(--shadow-pop); }

/* ── button ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3.5rem; padding: 0 var(--s-5);
  border-radius: var(--r-m);
  background: var(--accent); color: var(--ink-dark);
  font-weight: 800; font-size: var(--fs-2);
  box-shadow: var(--shadow-pop);
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out), opacity var(--d-fast);
}
.btn:active { transform: translateY(0.2rem); box-shadow: 0 0.1rem 0 var(--shade); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn--ghost { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0.12rem 0 var(--line), var(--shadow-pop); }
.btn--block { width: 100%; }

/* ── avatar ── */
.avatar {
  --sz: 3rem;
  position: relative;
  width: var(--sz); height: var(--sz); flex: none;
  display: inline-grid; place-items: center;
  transition: opacity var(--d-med) var(--e-out), filter var(--d-med) var(--e-out), transform var(--d-med) var(--e-pop);
}
.avatar svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0.14rem 0 var(--shade)); }
.avatar.is-off { opacity: 0.32; filter: saturate(0.25); transform: scale(0.86); }
.avatar.is-away svg { opacity: 0.45; }
.avatar .mark {
  position: absolute; inset-inline-end: -14%; bottom: -10%;
  width: 50%; height: 50%; border-radius: 50%;
  display: grid; place-items: center;
  font-size: calc(var(--sz) * 0.5);
  background: var(--ink-dark); color: var(--good);
  box-shadow: 0 0.1rem 0 var(--shade);
  animation: m-pop var(--d-med) var(--e-pop) both;
}
.avatar .mark--bad { background: var(--ink); color: var(--bad); }

/* ── chip: avatar + name ── */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-4) var(--s-1) var(--s-1);
  background: var(--surface-2); border-radius: var(--r-pill);
  box-shadow: inset 0 0.12rem 0 var(--line), var(--shadow-pop);
  font-weight: 700; white-space: nowrap;
}
.chip .avatar { --sz: 2.2rem; }
.chip__name { overflow: hidden; text-overflow: ellipsis; }

/* ── game badge + pills ── */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--accent); color: var(--ink-dark);
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: var(--fs-2); line-height: 1.3;
  box-shadow: var(--shadow-pop);
}
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--surface-2); border-radius: var(--r-pill);
  box-shadow: inset 0 0.12rem 0 var(--line);
  font-weight: 700;
}
.points {
  display: inline-flex; align-items: center;
  padding: 0 var(--s-3); border-radius: var(--r-pill);
  background: var(--good); color: var(--ink-dark);
  font-family: var(--font-display); direction: ltr;
  box-shadow: 0 0.14rem 0 var(--shade);
}
.points--zero { background: var(--surface-3); color: var(--ink-2); }

/* ── icon medallion ── */
.medal {
  --sz: 5rem;
  width: var(--sz); height: var(--sz); flex: none;
  display: grid; place-items: center;
  border-radius: 32%;
  background: var(--accent); color: var(--ink-dark);
  font-size: calc(var(--sz) * 0.56);
  box-shadow: var(--shadow-pop);
}
.medal--good { background: var(--good); }
.medal--bad { background: var(--bad); color: var(--ink); }
.medal--mute { background: var(--surface-3); color: var(--ink); }

/* ── text field ── */
.field {
  width: 100%;
  min-height: 3.5rem; padding: var(--s-3) var(--s-4);
  border: 0.16rem solid var(--surface-3); border-radius: var(--r-m);
  background: var(--sky-1); color: var(--ink);
  font-size: max(1.15rem, 18px); font-weight: 700;
  outline: none; user-select: text; -webkit-user-select: text;
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.field:focus { border-color: var(--accent); box-shadow: var(--glow); }
.field::placeholder { color: var(--ink-3); font-weight: 500; }

/* ── countdown bar (phones) / ring (TV) share the same colours ── */
.timebar { height: 0.5rem; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.timebar__fill { height: 100%; width: 100%; background: var(--accent); border-radius: inherit; transform-origin: right center; }
.is-urgent .timebar__fill { background: var(--bad); }

/* ── screens: every phase change slides + fades ── */
.screen { animation: m-screen-in var(--d-slow) var(--e-out) both; }
.screen.is-leaving { animation: m-screen-out var(--d-med) var(--e-in) both; pointer-events: none; }

/* ── motion primitives ── */
.m-pop { animation: m-pop var(--d-slow) var(--e-pop) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.m-rise { animation: m-rise var(--d-slow) var(--e-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.m-drop { animation: m-drop var(--d-slow) var(--e-pop) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.m-fade { animation: m-fade var(--d-slow) var(--e-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.m-shake { animation: m-shake 420ms var(--e-out) both; }
.m-pulse { animation: m-pulse 1s var(--e-out) infinite; }
.m-float { animation: m-float 3.2s ease-in-out infinite; }

@keyframes m-pop { 0% { opacity: 0; transform: scale(0.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes m-rise { 0% { opacity: 0; transform: translateY(1.4rem); } 100% { opacity: 1; transform: none; } }
@keyframes m-drop { 0% { opacity: 0; transform: translateY(-2.4rem) scale(0.9); } 100% { opacity: 1; transform: none; } }
@keyframes m-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes m-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-0.5rem); } 40% { transform: translateX(0.5rem); }
  60% { transform: translateX(-0.3rem); } 80% { transform: translateX(0.3rem); }
}
@keyframes m-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.5rem); } }
@keyframes m-screen-in { 0% { opacity: 0; transform: translateY(1.6rem) scale(0.98); } 100% { opacity: 1; transform: none; } }
@keyframes m-screen-out { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-1.2rem) scale(0.98); } }
@keyframes m-spin { to { transform: rotate(360deg); } }

/* confetti pieces are positioned by JS (Web Animations API) */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti i { position: absolute; top: -1rem; width: 0.7rem; height: 1.1rem; border-radius: 0.15rem; }

/* ── the sadu band (the game's mark) ── */
.sadu { height: 0.9rem; width: 100%; background-image: var(--sadu); background-size: auto 100%; background-repeat: repeat-x; background-position: center; opacity: 0.9; }
.sadu--small { height: 0.6rem; width: 14rem; }

/* ── motion with a point: a stamp lands, a right answer bounces, a blurred photo snaps sharp ── */
.m-stamp { animation: m-stamp 700ms var(--e-pop) both; }
.m-bounce { animation: m-bounce 600ms var(--e-pop) both; }
.m-snap { animation: m-snap 520ms var(--e-out) both; }
.avatar.is-glow { box-shadow: 0 0 0 0.25rem var(--accent), 0 0 2.2rem color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 50%; }
@keyframes m-stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-8deg); } 55% { opacity: 1; transform: scale(0.94) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes m-bounce { 0% { transform: translateY(0); } 35% { transform: translateY(-0.9rem) scale(1.12); } 70% { transform: translateY(0.1rem) scale(0.98); } 100% { transform: none; } }
@keyframes m-snap { 0% { transform: rotate(-1.2deg) scale(1.06); } 40% { transform: rotate(0.6deg) scale(1.02); } 100% { transform: rotate(-1.2deg) scale(1); } }