/* ==========================================================================
   Service Taxi Chaos — styles. Theme tokens and shared components come from
   shared/style.css.

   The controls (steering thumb, boost, horn) stay on the same physical side
   in every language, so those use left/right on purpose. Everything else
   uses logical properties and mirrors in Arabic.
   ========================================================================== */

/* ---------- Start screen ---------- */

.tx-start { display: grid; gap: 1rem; max-width: 30rem; margin-inline: auto; padding-block: 1rem 2rem; }
.tx-title { font-size: clamp(1.7rem, 8vw, 2.4rem); text-align: center; }
.tx-how { display: grid; gap: .5rem; padding: 1rem 1rem 1rem; padding-inline-start: 2.4rem; list-style: decimal; }
.tx-controls { text-align: center; font-size: .95rem; }
.tx-best { min-height: 1.5em; font-weight: 800; text-align: center; }

/* ---------- Play screen: fills the whole window ---------- */

html.is-playing, html.is-playing body { overflow: hidden; overscroll-behavior: none; }

.tx-play {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #d2c7b0;
  touch-action: none; /* dragging steers; it must not scroll or zoom the page */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tx-view { display: block; width: 100%; height: 100%; }

/* Everything on top of the map shares this look. */
.tx-stats, .tx-top, .tx-zone, .tx-dest, .tx-badge, .tx-net {
  color: var(--ink);
  background: rgb(255 250 240 / .9);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
}

.tx-stats {
  position: absolute;
  top: max(.5rem, env(safe-area-inset-top));
  inset-inline-start: max(.5rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .2rem .3rem .2rem .7rem;
  padding-inline: .7rem .3rem;
  font-size: 1.05rem;
}
.tx-stats b { font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.tx-exit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-block: -.2rem;
  font: inherit;
  font-weight: 900;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}

.tx-mini {
  position: absolute;
  top: calc(max(.5rem, env(safe-area-inset-top)) + 3.6rem);
  inset-inline-start: max(.5rem, env(safe-area-inset-left));
  width: 6.2rem;
  height: 6.2rem;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  pointer-events: none;
}

/* Who is on board, by stop: next to the minimap, each count on the color of its stop. */
.tx-dest {
  position: absolute;
  top: calc(max(.5rem, env(safe-area-inset-top)) + 3.6rem);
  inset-inline-start: calc(max(.5rem, env(safe-area-inset-left)) + 6.6rem);
  display: grid;
  gap: .2rem;
  padding: .25rem .4rem .35rem;
  font-size: .78rem;
  font-weight: 800;
  pointer-events: none;
}
.tx-dest p { font-size: .68rem; font-weight: 900; color: var(--muted); }
.tx-dest ul { display: grid; gap: .2rem; }
.tx-dest li { display: flex; align-items: center; gap: .35rem; }
.tx-dest b { flex: none; min-width: 1.7rem; padding: 0 .3rem; font-size: .9rem; font-weight: 900; line-height: 1.35; text-align: center; color: #fff; border: 2px solid var(--ink); border-radius: 999px; font-variant-numeric: tabular-nums; }
.tx-dest li.is-none { opacity: .45; }
html[lang="ar"] .tx-dest p { font-size: .75rem; }
/* A narrow phone: the counts on their colors are enough, the names are on the map. */
@media (max-width: 24rem) {
  .tx-dest span { display: none; }
}

.tx-top {
  position: absolute;
  top: max(.5rem, env(safe-area-inset-top));
  inset-inline-end: max(.5rem, env(safe-area-inset-right));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .1rem;
  width: 10.5rem;
  padding: .35rem .5rem;
  font-size: .82rem;
  font-weight: 700;
  pointer-events: none;
}
.tx-top li { display: flex; align-items: center; gap: .3rem; }
.tx-top__rank { width: 1.1rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.tx-top i { flex: none; width: .65rem; height: .65rem; border: 1.5px solid var(--ink); border-radius: 50%; }
.tx-top bdi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-top b { font-variant-numeric: tabular-nums; }
.tx-top li.is-you { color: var(--tomato-ink, #9c2617); }
/* Phones held upright: the top five is enough. */
@media (max-width: 34rem) {
  .tx-top { width: 8.6rem; font-size: .75rem; }
  .tx-top li:nth-child(n + 6):not(.is-you) { display: none; }
}

.tx-center {
  position: absolute;
  top: max(.5rem, env(safe-area-inset-top));
  left: 50%;
  display: grid;
  justify-items: center;
  gap: .35rem;
  width: max-content;
  max-width: calc(100% - 30rem); /* clear of the stats and the list of stops on one side, the top drivers on the other */
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
}
/* On a narrow phone the middle of the top row is taken: sit below it. */
@media (max-width: 44rem) {
  .tx-center { top: calc(max(.5rem, env(safe-area-inset-top)) + 12.6rem); max-width: calc(100% - 1rem); }
}
.tx-zone, .tx-badge, .tx-net { padding: .15rem .6rem; font-size: .82rem; font-weight: 800; }
.tx-zone {
  position: absolute;
  top: calc(max(.5rem, env(safe-area-inset-top)) + 10.2rem);
  inset-inline-start: max(.5rem, env(safe-area-inset-left));
  width: 6.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  pointer-events: none;
}
.tx-zone.is-soon { background: var(--sun); }
.tx-badge { background: var(--sun); }
.tx-net { color: #fff; background: var(--tomato); }
.tx-toast {
  padding: .3rem .9rem;
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease;
}
.tx-toast.is-on { opacity: 1; transform: none; }
.tx-feed { display: grid; gap: .1rem; font-size: .8rem; font-weight: 700; color: var(--ink); text-shadow: 0 0 3px #fffaf0, 0 0 3px #fffaf0; }
.tx-feed p { margin: 0; }

/* ---------- Thumb controls ---------- */

.tx-pad {
  --fill: 0;
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  align-content: center;
  padding: 0;
  font: inherit;
  color: var(--ink);
  /* A ring that fills up: passengers to burn (boost), or the horn recharging. */
  background:
    radial-gradient(circle, #fffaf0 60%, transparent 61%),
    conic-gradient(var(--tomato) calc(var(--fill) * 1turn), #c9bda4 0);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  touch-action: none;
}
.tx-pad span { font-size: 1.9rem; line-height: 1; }
.tx-pad small { font-size: .7rem; font-weight: 900; }
.tx-pad--boost { bottom: max(1.4rem, env(safe-area-inset-bottom)); width: 5.6rem; height: 5.6rem; }
.tx-pad--honk { bottom: calc(max(1.4rem, env(safe-area-inset-bottom)) + 6.6rem); width: 4rem; height: 4rem; }
.tx-pad--honk span { font-size: 1.5rem; }
.tx-pad.is-down, .tx-pad:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.tx-pad.is-empty { opacity: .55; }

/* The floating joystick: appears where the thumb lands. */
.tx-stick {
  position: fixed;
  width: 6.5rem;
  height: 6.5rem;
  margin: -3.25rem 0 0 -3.25rem;
  background: rgb(255 250 240 / .35);
  border: 3px solid rgb(42 28 18 / .5);
  border-radius: 50%;
  pointer-events: none;
}
.tx-stick i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6rem;
  height: 2.6rem;
  background: rgb(42 28 18 / .55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- Crash screen ---------- */

.tx-over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(42 28 18 / .55);
  overflow: auto;
  touch-action: auto;
  animation: sheet-in .2s ease-out;
}
.tx-over__card { display: grid; gap: .7rem; width: min(100%, 24rem); padding: 1.2rem; color: var(--text); text-align: center; justify-items: stretch; }
.tx-over__card h2 { font-size: 1.5rem; }
.tx-over__card .host { text-align: start; }
.tx-over__card .btn--small { justify-self: center; }
.tx-over__score { font-size: 1.1rem; font-weight: 700; }
.tx-over__score b { font-size: 2rem; font-weight: 900; vertical-align: middle; }
.host--small .host__teta { width: 76px; }
.host--small .bubble { padding: .65rem .9rem; font-weight: 700; }

/* Short screens (a phone on its side): tuck things in. */
@media (max-height: 26rem) {
  .tx-mini { width: 4.6rem; height: 4.6rem; top: calc(max(.5rem, env(safe-area-inset-top)) + 3.3rem); }
  .tx-zone { top: calc(max(.5rem, env(safe-area-inset-top)) + 8.3rem); width: 4.6rem; padding-inline: .2rem; }
  .tx-dest { top: calc(max(.5rem, env(safe-area-inset-top)) + 3.3rem); inset-inline-start: calc(max(.5rem, env(safe-area-inset-left)) + 5rem); gap: .1rem; font-size: .72rem; }
  .tx-dest p { display: none; }
  .tx-dest ul { gap: .1rem; }
  .tx-dest b { font-size: .8rem; line-height: 1.25; }
  .tx-center { top: max(.5rem, env(safe-area-inset-top)); }
  .tx-top li:nth-child(n + 6):not(.is-you) { display: none; }
  .tx-pad--boost { width: 4.8rem; height: 4.8rem; }
  .tx-pad--honk { bottom: calc(max(1.4rem, env(safe-area-inset-bottom)) + 5.6rem); width: 3.4rem; height: 3.4rem; }
}