/* ==========================================================================
   Sho Fi Bil Sahen? — styles. Theme tokens and shared components come from
   shared/style.css. Layout uses logical properties so it mirrors in Arabic;
   the table itself is a grid of plates and reads the same either way.
   ========================================================================== */

.mz { display: grid; gap: .8rem; max-width: 30rem; margin-inline: auto; padding-block: .5rem 2rem; }
.mz-title { font-size: clamp(1.5rem, 7vw, 2.1rem); text-align: center; }
.mz-label { font-size: 1rem; font-weight: 800; }
.mz-hint { min-height: 1.4em; font-weight: 700; text-align: center; }
.mz-sameroom { margin-top: .5rem; text-align: center; }

.mz-top { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mz-total { margin-inline-start: auto; font-weight: 900; direction: ltr; }
.mz-clockrow { display: flex; align-items: center; gap: .6rem; }
.mz-clockrow .timebar { flex: 1; }
.mz-clockrow .clock { min-width: 2.4ch; font-size: 1.6rem; text-align: center; }
.clock.mz-count { display: block; font-size: 4.5rem; text-align: center; }

/* ---------- The players, in a row ---------- */

.mz-strip { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.mz-face { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font-size: 1.35rem; line-height: 1; background: var(--surface); border: 2.5px solid var(--line); border-radius: 50%; }
.mz-face.is-you { border-style: double; border-width: 4px; }
.mz-face.is-away { opacity: .45; }
.mz-face i { position: absolute; inset-block-end: -.35rem; inset-inline-end: -.4rem; font-size: .85rem; font-style: normal; }

/* ---------- The table ---------- */

.mz-tablewrap { position: relative; }
.mz-table {
  display: grid;
  gap: .5rem;
  padding: .7rem;
  /* A checked tablecloth. */
  background:
    linear-gradient(90deg, rgb(207 58 39 / .28) 50%, transparent 50%) 0 0 / 2.4rem 2.4rem,
    linear-gradient(0deg, rgb(207 58 39 / .28) 50%, transparent 50%) 0 0 / 2.4rem 2.4rem,
    #fffaf0;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--line);
}
.mz-tablewrap--small { max-width: 19rem; margin-inline: auto; }
.mz-tablewrap--small .mz-dish__name { display: none; }

.mz-plate {
  --ring: #c9bda4;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .1rem;
  aspect-ratio: 1;
  min-width: 0;
  padding: .2rem;
  font: inherit;
  color: #2a1c12;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px var(--ring);
  transition: transform .1s ease;
}
button.mz-plate { cursor: pointer; touch-action: manipulation; }
.mz-plate:empty { background: rgb(255 255 255 / .55); border-style: dashed; box-shadow: none; }
.mz-plate--red { --ring: #e2836f; }
.mz-plate--green { --ring: #a9c26a; }
.mz-plate--white { --ring: #e8e2d4; }
.mz-plate--brown { --ring: #c79a63; }
.mz-plate--vase { background: #e9dfc8; border-style: solid; box-shadow: none; }
.mz-plate.is-held { background: var(--sun); transform: translateY(-5px) rotate(-4deg); box-shadow: inset 0 0 0 5px var(--ring), 0 5px 0 var(--ink); }
.mz-plate.is-marked { outline: 4px solid var(--sea); outline-offset: 2px; }
/* While a dish is held, the plates it could go to pulse gently. */
.mz-table.is-holding .mz-plate:not(.is-held):not(.mz-plate--vase) { animation: mz-pulse 1s ease-in-out infinite alternate; }
@keyframes mz-pulse { to { transform: scale(.94); } }

.mz-dish__emoji { font-size: clamp(1.5rem, 8vw, 2.1rem); line-height: 1; }
.mz-dish__name { max-width: 82%; font-size: .64rem; font-weight: 800; line-height: 1.1; text-align: center; text-transform: capitalize; overflow-wrap: anywhere; }
.mz-dish__by { position: absolute; inset-block-start: -.3rem; inset-inline-end: -.3rem; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; font-size: .85rem; background: var(--surface); border: 2px solid var(--ink); border-radius: 50%; }

/* Power cut: you cannot see what is on the plates. */
.mz-table.is-dark { background: #1b1410; }
.mz-table.is-dark .mz-plate { background: #2a211b; box-shadow: none; }
.mz-table.is-dark .mz-plate > * { visibility: hidden; }
.mz-darknote { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.4rem; font-weight: 900; color: #fff; pointer-events: none; }

/* Signals pinned to a plate, or floating over the sender's face. */
.mz-pings { position: absolute; inset: .7rem; pointer-events: none; }
.mz-ping {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  font-size: 1.8rem;
  line-height: 1;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--ink);
  transform: translate(-50%, -50%);
  animation: mz-ping 2.6s ease-out forwards;
}
.mz-ping small { position: absolute; inset-block-end: -.5rem; inset-inline-end: -.5rem; font-size: 1rem; }
.mz-ping--face { top: 100%; left: 50%; }
@keyframes mz-ping {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  20%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

/* ---------- Orders ---------- */

.mz-orders { display: grid; gap: .5rem; }
.mz-orders__toggle { display: grid; gap: .1rem; }
.mz-orders__toggle small { font-size: .78rem; font-weight: 700; color: var(--muted); }
.mz-orders__toggle.is-open { --btn-bg: var(--surface-2); }
.mz-shared { display: grid; gap: .35rem; margin-bottom: .6rem; }
.mz-orderlist { display: grid; gap: .4rem; }
.mz-order { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .15rem .5rem; padding: .55rem .75rem; font-weight: 700; line-height: 1.35; background: var(--surface); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
.mz-order.is-ok { border-color: var(--olive); }
.mz-order.is-no { border-color: var(--tomato); }
.mz-order__who { grid-column: 1 / -1; font-size: .82rem; font-weight: 800; color: var(--muted); }
.mz-order__mark { font-size: 1.2rem; }
.mz-order--reveal, .mz-summary { transition: opacity .3s ease, transform .3s ease; }
.is-waiting { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* ---------- Tray, signals, serve ---------- */

.mz-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: .5rem; }
.mz-plate--tray { box-shadow: inset 0 0 0 4px var(--ring), 0 3px 0 var(--ink); }
.mz-plate--tray .mz-dish__name { max-width: 94%; font-size: .58rem; overflow-wrap: normal; }
.mz-plate--tray .mz-dish__emoji { font-size: 1.6rem; }
.mz-totray { grid-column: 1 / -1; }

.mz-signals {
  display: flex;
  justify-content: space-between;
  gap: .25rem;
  padding: .35rem;
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--line);
}
.mz-signal { flex: 1; min-width: 0; height: 2.75rem; padding: 0; font-size: 1.45rem; line-height: 1; background: none; border: 0; border-radius: 999px; cursor: pointer; touch-action: manipulation; }
.mz-signal:active { background: var(--sun); }
.mz-signals.is-cooling { opacity: .45; pointer-events: none; }
/* Eight in a row would be under 44px wide on a small phone: two rows of four instead. */
@media (max-width: 27rem) {
  .mz-signals { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 22px; }
}

/* ---------- Twists ---------- */

.mz-twist { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; background: var(--sun); color: var(--ink); }
.mz-twist__icon { font-size: 2.2rem; line-height: 1; }
.mz-twist p { font-weight: 700; line-height: 1.3; }
.mz-surprise { padding: .7rem .9rem; font-weight: 800; text-align: center; }
.mz-banner { position: sticky; top: .5rem; z-index: 5; animation: sheet-in .2s ease-out; }

/* ---------- Reveal and final ---------- */

.mz-summary { display: grid; gap: .8rem; }
.mz-bigscore { text-align: center; }
.mz-bigscore b { font-size: 2.6rem; font-weight: 900; line-height: 1.1; }
.host--small .host__teta { width: 76px; }
.host--small .bubble { padding: .65rem .9rem; font-weight: 700; }

.mz-mood { display: grid; gap: .3rem; }
.mz-mood__label { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-weight: 800; }
.mz-mood__label small { font-weight: 700; color: var(--muted); }
.mz-mood__bar { position: relative; height: 1.1rem; background: var(--surface-2); border: 3px solid var(--line); border-radius: 999px; }
.mz-mood__fill { display: block; height: 100%; background: var(--tomato); border-radius: 999px; transition: width .5s ease; }
.mz-mood__bar.is-happy .mz-mood__fill { background: var(--olive); }
.mz-mood__need { position: absolute; inset-block: -6px; width: 4px; background: var(--ink); border-radius: 2px; }

.mz-final__face { font-size: 5rem; line-height: 1; text-align: center; }
.mz-history { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.mz-history li { display: grid; justify-items: center; min-width: 3.2rem; padding: .3rem .5rem; background: var(--surface); border: 2px solid var(--line); border-radius: 12px; }
.mz-history span { font-size: .75rem; font-weight: 800; color: var(--muted); }
.mz-history b { direction: ltr; }

.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; }