/* ==========================================================================
   Mish Ana! — game styles. Theme tokens and shared components come from
   shared/style.css. Layout uses logical properties so it mirrors in Arabic.
   ========================================================================== */

.ma { display: grid; gap: .9rem; max-width: 30rem; margin-inline: auto; padding-block: .75rem 2rem; }
.ma h3 { margin-top: .4rem; font-size: 1.1rem; }

.ma__top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ma__top .btn--small { margin-inline-start: auto; }
.ma__scenario { font-weight: 800; }
.ma__phase { font-size: clamp(1.5rem, 7vw, 2rem); text-align: center; }

.ma__note { font-size: 1.1rem; font-weight: 700; text-align: center; }
.ma__note--you { color: var(--tomato); }
.ma__wait { min-height: 1.5em; font-weight: 700; text-align: center; }
.ma__tip { padding: .6rem .8rem; font-size: .95rem; background: var(--surface-2); border: 2px dashed var(--line); border-radius: 14px; }
.ma__quote { padding-inline-start: .75rem; font-size: 1.15rem; font-weight: 700; border-inline-start: 4px solid var(--sun); overflow-wrap: anywhere; }
.ma__question { display: grid; gap: .6rem; padding: .9rem; }
.ma__question .ma__note { text-align: start; }
.ma__panel { display: grid; gap: .9rem; }

.ma__form { display: grid; gap: .5rem; }
.ma__form textarea { resize: none; font-family: inherit; line-height: 1.4; }
.ma__form-row { display: flex; align-items: center; gap: .5rem; }
.ma__count { margin-inline-end: auto; font-size: .85rem; font-variant-numeric: tabular-nums; }

@media (prefers-color-scheme: dark) {
  .ma__note--you { color: #ff8a75; }
}

/* ---------- The circle of players ---------- */

.ring { position: relative; width: min(100%, var(--ring, 17rem)); aspect-ratio: 1; margin-inline: auto; }
.ring--mid { --ring: 19rem; }
.ring--big { --ring: 21rem; }
.ring__center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }

.seat {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: .3rem;
  width: 4.6rem;
  padding: 0;
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  transform: translate(-50%, -50%);
}
button.seat { cursor: pointer; touch-action: manipulation; }
.seat__face {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.7rem;
  line-height: 1;
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 50%;
  transition: transform .12s ease;
}
button.seat .seat__face { box-shadow: 0 3px 0 var(--line); }
button.seat:active .seat__face { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.seat__name { max-width: 100%; overflow: hidden; font-size: .78rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.seat__badge { position: absolute; inset-block-start: -.45rem; inset-inline-end: -.5rem; font-size: 1rem; }
.seat.is-you .seat__face { background: var(--surface-2); border-style: double; border-width: 5px; }
.seat.is-turn .seat__face { background: var(--sun); transform: scale(1.18); }
.seat.is-picked .seat__face { background: var(--tomato); transform: scale(1.18) rotate(-6deg); }
.seat.is-away, .seat.is-gone { opacity: .5; }
.seat.is-gone .seat__name { text-decoration: line-through; }

/* ---------- The secret card ---------- */

.secret {
  display: block;
  width: 100%;
  min-height: 13rem;
  padding: 1.1rem;
  font: inherit;
  color: var(--text);
  text-align: start;
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--line);
  cursor: pointer;
  touch-action: manipulation;
}
.secret__back {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .5rem;
  min-height: 10.5rem;
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  background: repeating-linear-gradient(45deg, transparent 0 10px, var(--bg-dot) 10px 20px);
  border-radius: 12px;
}
.secret__lock { font-size: 3rem; line-height: 1; }
.secret__front { display: none; gap: .55rem; }
.secret.is-open .secret__back { display: none; }
.secret.is-open .secret__front { display: grid; animation: sheet-in .18s ease-out; }
.secret__label { font-size: .8rem; font-weight: 800; color: var(--muted); }
.secret__role { font-size: 1.7rem; font-weight: 900; line-height: 1.15; }
.secret__role--culprit { color: var(--tomato); }
.secret__role--protector { color: var(--link); }
.secret__role--teta, .secret__role--cousin { color: var(--olive); }
.secret__line { font-weight: 700; color: var(--muted); }
.secret__text { padding-block: .35rem; font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.secret__where, .secret__note { padding: .5rem .7rem; font-size: .95rem; background: var(--surface-2); border-radius: 12px; }
.secret__note--warn { background: var(--sun); color: var(--ink); font-weight: 700; }
.secret__hide { font-size: .8rem; text-align: center; color: var(--muted); }

@media (prefers-color-scheme: dark) {
  .secret__role--culprit { color: #ff8a75; }
  .secret__role--teta, .secret__role--cousin { color: #b5c95a; }
}

/* ---------- Scenario intro and its animation ---------- */

/* The stage keeps its sand color in dark mode: the drawings are made for it. */
.stage { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: #f7ecd6; border: 3px solid var(--line); border-radius: var(--radius); }
.stage--small { max-width: 13rem; margin-inline: auto; }
.intro { display: grid; gap: .8rem; }
.intro__name { font-size: 1.6rem; text-align: center; }
.intro__setup { font-size: 1.1rem; font-weight: 700; text-align: center; }
.host--small .host__teta { width: 76px; }
.host--small .bubble { padding: .65rem .9rem; font-weight: 700; }

/* ---------- What everyone said ---------- */

.ma__log-title { font-size: 1.1rem; margin-bottom: .5rem; }
.log { display: grid; gap: .5rem; }
.log__item { display: grid; gap: .15rem; padding: .55rem .75rem; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; overflow-wrap: anywhere; }
.log__who { font-size: .9rem; }
.log__item.is-empty > span, .log__answer.is-empty { font-style: italic; color: var(--muted); }
.log__answer { padding-inline-start: .6rem; border-inline-start: 4px solid var(--olive); }

/* ---------- Reveal ---------- */

.reveal { display: grid; gap: 1rem; }
.reveal__drum { display: grid; gap: .5rem; }
.reveal__itwas { font-size: 1.5rem; font-weight: 900; text-align: center; }
.reveal__culprit { display: grid; justify-items: center; gap: .2rem; transition: opacity .3s ease, transform .3s ease; }
.reveal__face { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; font-size: 3.2rem; line-height: 1; background: var(--sun); border: 4px solid var(--line); border-radius: 50%; box-shadow: 0 5px 0 var(--line); }
.reveal__who { font-size: 2.2rem; font-weight: 900; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.reveal__outcome { padding: .3rem .9rem; font-weight: 800; color: #fff; border: 3px solid var(--line); border-radius: 999px; text-align: center; }
.reveal__outcome--caught { background: var(--olive); }
.reveal__outcome--escaped { background: var(--tomato); }
.reveal__details { display: grid; gap: .8rem; transition: opacity .4s ease; }
.is-waiting { opacity: 0; pointer-events: none; }
.reveal__culprit.is-waiting { transform: scale(.6); }
.reveal__scene { padding: .6rem .8rem; background: var(--surface-2); border-radius: 12px; }
.reveal__roles, .reveal__votes { display: grid; gap: .35rem; }
.reveal__role, .reveal__votes li { display: flex; align-items: center; gap: .45rem; padding: .4rem .7rem; font-weight: 700; background: var(--surface); border: 2px solid var(--line); border-radius: 12px; }
.reveal__role bdi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reveal__tag { font-size: .85rem; font-weight: 800; white-space: nowrap; }
.reveal__role--culprit { background: var(--tomato); color: #fff; }
.reveal__role--protector { background: var(--sea); color: #fff; }
.reveal__votes li.is-right { border-color: var(--olive); border-width: 3px; }
/* "×2" and "+2" are read left to right in every language. */
.reveal__double, .scores__gain, .scores__total { direction: ltr; unicode-bidi: isolate; }
.reveal__double { padding: 0 .4rem; font-size: .8rem; font-weight: 900; color: var(--ink); background: var(--sun); border-radius: 999px; }
.reveal__log summary { min-height: 44px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.reveal__actions { display: grid; gap: .6rem; margin-top: .5rem; }

.scores { display: grid; gap: .35rem; }
.scores__row { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; font-weight: 800; background: var(--surface); border: 2px solid var(--line); border-radius: 12px; }
.scores__face { font-size: 1.3rem; line-height: 1; }
.scores__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores__gain { padding: 0 .45rem; color: #fff; background: var(--olive); border-radius: 999px; }
.scores__total { min-width: 1.5rem; font-size: 1.2rem; text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- Lobby additions ---------- */

.lobby__alt { display: grid; gap: .3rem; margin-top: .5rem; text-align: center; }
.choices { display: grid; gap: .5rem; }
.choices legend { margin-bottom: .4rem; font-weight: 800; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; min-height: var(--tap); padding: .4rem .9rem; font-weight: 800; background: var(--surface); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
.choice input:checked + span { background: var(--sun); color: var(--ink); box-shadow: 0 3px 0 var(--line); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.howto { max-width: 30rem; margin: 1.5rem auto 0; padding: .25rem 1rem; }
.howto summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.howto ol { display: grid; gap: .5rem; padding: 0 0 1rem; padding-inline-start: 1.4rem; list-style: decimal; }

/* ---------- One-phone mode ---------- */

.names { display: grid; gap: .5rem; }
.names__row { display: flex; align-items: center; gap: .5rem; }
.names__face { font-size: 1.6rem; line-height: 1; }
.pass { display: grid; justify-items: center; gap: .75rem; padding-block: 2.5rem; }
.pass__face { display: grid; place-items: center; width: 7rem; height: 7rem; font-size: 4rem; line-height: 1; background: var(--sun); border: 4px solid var(--line); border-radius: 50%; box-shadow: 0 6px 0 var(--line); }