/* ==========================================================================
   3layye! — styles. Theme tokens and shared components come from
   shared/style.css.

   One screen matters: the restaurant on top, everyone's hands under it, and
   the bill under the thumb. It has to fit a small phone without scrolling,
   because a finger that is holding the bill cannot scroll.
   ========================================================================== */

.al { display: grid; gap: .65rem; max-width: 30rem; margin-inline: auto; padding-block: .5rem 2rem; }
.al-title { font-size: clamp(1.6rem, 7vw, 2.2rem); text-align: center; }
.al-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.al-top > :last-child:not(:first-child) { margin-inline-start: auto; }
.al-stars { font-weight: 800; }
.al-note { font-size: 1.05rem; font-weight: 700; text-align: center; }

/* ---------- Menu ---------- */

.al-tagline { font-size: 1.1rem; font-weight: 700; text-align: center; }
.al-settings { display: grid; gap: .4rem; }

.choices { display: grid; gap: .5rem; }
.choices--row { grid-auto-flow: column; grid-auto-columns: 1fr; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: .4rem .7rem; font-weight: 800; text-align: center; 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; }

.host--small .host__teta { width: 76px; }
.host--small .bubble { padding: .65rem .9rem; font-weight: 700; }

/* ---------- The restaurant ---------- */

/* The room is a picture, so it never mirrors. Its height follows the screen, and the width follows the height. */
.al-scene { position: relative; width: min(100%, 30vh * 1.364); width: min(100%, 30dvh * 1.364); aspect-ratio: 300 / 220; margin-inline: auto; overflow: hidden; direction: ltr; background: #f3d9a4; border: 3px solid var(--line); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--line); }
.al-scene__room, .al-scene__room svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.al-ink { stroke: #2a1c12; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.al-wall { fill: #f3d9a4; }
.al-panel { fill: #7d8c3c; }
.al-floor { fill: #e0a877; }
.al-tile { fill: none; stroke: #c58a5c; stroke-width: 1.5; }
.al-door { fill: #10506f; }
.al-glass { fill: #bfe3ef; stroke-width: 2; }
.al-lamp { fill: #f2b632; stroke-width: 2.5; }
.al-glow { fill: #fff3c4; opacity: .5; }
.al-cloth { fill: #fffaf0; }
.al-plate { fill: #e3ded6; stroke: #2a1c12; stroke-width: 1.5; }
.al-vase { fill: #cf3a27; stroke-width: 2; }
.al-shade { fill: #2a1c12; opacity: .16; }

/* The waiter stands on the bottom middle of his box, which is moved and scaled from alayye/ui.js. */
.al-waiter { position: absolute; left: 50%; bottom: 46%; width: 33.34%; aspect-ratio: 100 / 150; pointer-events: none; transform-origin: 50% 100%; transform: translateX(-50%) scale(var(--s, .32)); transition: left .34s cubic-bezier(.3, 1.3, .5, 1), bottom .34s cubic-bezier(.3, 1.3, .5, 1), transform .34s cubic-bezier(.3, 1.3, .5, 1); }
.al-waiter__body, .al-waiter svg { display: block; width: 100%; height: 100%; overflow: visible; }
.al-waiter .al-ink { stroke-width: 3.5; }

.al-caption { position: absolute; inset: 0 0 auto; display: grid; place-items: center; min-height: 2.1em; padding: .15rem .6rem; font-size: .95rem; font-weight: 800; line-height: 1.25; text-align: center; color: #2a1c12; background: rgb(255 250 240 / .86); border-bottom: 2px solid #2a1c12; }
.al-shout { position: absolute; inset: 34% 0 auto; text-align: center; pointer-events: none; }
.al-shout span { display: inline-block; max-width: 92%; padding: .15rem .9rem .25rem; font-size: clamp(1.3rem, 6.5vw, 1.9rem); font-weight: 900; color: #2a1c12; background: var(--sun); border: 3px solid #2a1c12; border-radius: 14px 16px 13px 17px; box-shadow: 4px 4px 0 #2a1c12; transform: rotate(-4deg); animation: al-pop .3s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes al-pop {
  from { opacity: 0; transform: rotate(-4deg) scale(.5); }
}
@media (prefers-color-scheme: dark) {
  .al-scene__room { filter: brightness(.86) saturate(.92); }
}

/* ---------- Everyone's hands ---------- */

.al-hands { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.al-hand { position: relative; display: grid; justify-items: center; width: 3.9rem; padding: .15rem .25rem .2rem; line-height: 1.2; background: var(--surface); border: 2px solid var(--line); border-radius: 12px 14px 11px 15px; transition: transform .12s ease, opacity .12s ease; }
.al-hand.is-you { border-width: 3px; }
.al-hand__face { font-size: 1.4rem; line-height: 1.15; }
.al-hand__name { max-width: 100%; overflow: hidden; font-size: .7rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.al-hand__mark { font-size: .85rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A hand on the bill is pressed down, like the bill. */
.al-hand--hold { color: var(--ink); background: var(--sun); transform: translateY(3px); }
.al-hand--safe { border-color: var(--olive); }
.al-hand--safe .al-hand__mark { color: var(--olive); }
.al-hand--paid { color: #fff; background: var(--tomato); }
.al-hand--out { opacity: .55; border-style: dashed; }
html[lang="ar"] .al-hand__name { font-size: .8rem; }
@media (prefers-color-scheme: dark) {
  .al-hand--safe { border-color: #b7cc6a; }
  .al-hand--safe .al-hand__mark { color: #b7cc6a; }
}

.al-bell { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; }
.al-bell svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.al-hand__bell { position: absolute; top: -8px; inset-inline-end: -6px; width: 1.15rem; height: 1.15rem; padding: 2px; color: var(--ink); background: var(--sun); border: 2px solid var(--line); border-radius: 50%; }

/* ---------- The bill ---------- */

/* A paper bill stays paper-colored in the dark too. The whole of it is the button. */
.al-bill { position: relative; display: grid; gap: .15rem; width: 100%; min-height: 10.5rem; padding: 1rem 1rem .8rem; font: inherit; color: #2a1c12; text-align: start; background: #fffdf6; border: 3px solid var(--line); border-radius: 5px 7px 4px 8px; box-shadow: 0 6px 0 var(--line); cursor: pointer; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; transform: rotate(-1deg); transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease; }
.al-bill__name { font-size: 1.05rem; font-weight: 900; }
.al-bill__items { display: grid; font-size: .85rem; font-weight: 700; color: #6a5847; }
.al-bill__total { display: flex; justify-content: space-between; margin-top: .15rem; padding-top: .2rem; font-weight: 900; border-top: 2px dashed #2a1c12; }
.al-bill__now { display: grid; justify-items: center; align-content: center; gap: .1rem; min-height: 4.4rem; text-align: center; }
.al-bill__pot { font-size: clamp(2.2rem, 12vw, 3rem); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.al-bill__hint { font-weight: 800; }
html[lang="ar"] .al-bill__pot { line-height: 1.35; }

.al-bill__beat { position: absolute; inset: 0 0 auto; height: 8px; background: rgb(42 28 18 / .12); }
.al-bill__fill { display: block; height: 100%; background: var(--tomato); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .al-bill__fill { transform-origin: 100% 50%; }

/* Waiting for a hand: it breathes a little. */
.al-bill--out.is-bill { animation: al-breathe 1s ease-in-out infinite; }
@keyframes al-breathe {
  50% { transform: rotate(-1deg) scale(1.02); }
}
.al-bill.is-down { background: #ffe9a8; box-shadow: 0 1px 0 var(--line); transform: rotate(-1deg) translateY(5px) scale(.985); animation: none; }
.al-bill--safe { background: #e7efc9; }
.al-bill--paid { background: #ffd8d0; }
.al-bill--paid .al-bill__pot { color: var(--tomato); text-decoration: line-through; }
.al-bill--safe, .al-bill--paid, .al-bill--watch, .al-bill--out:not(.is-bill) { cursor: default; box-shadow: 0 3px 0 var(--line); }
.al-bill--watch, .al-bill--out:not(.is-bill) { opacity: .75; }
.al-bill__stamp { position: absolute; top: 1.1rem; inset-inline-end: .9rem; padding: 0 .6rem; font-size: 1.7rem; font-weight: 900; letter-spacing: .08em; color: var(--tomato); border: 4px solid var(--tomato); border-radius: 8px; transform: rotate(11deg); animation: al-stamp .25s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes al-stamp {
  from { opacity: 0; transform: rotate(11deg) scale(2.2); }
}

/* A short screen (a small phone with the browser's bars showing): the bill drops what was ordered and the room shrinks, so the "Garçon!" under it still fits. */
@media (max-height: 640px) {
  .al-scene { width: min(100%, 26vh * 1.364); width: min(100%, 26dvh * 1.364); }
  .al-bill { min-height: 0; padding-block: .9rem .5rem; }
  .al-bill__items { display: none; }
  .al-bill__now { min-height: 3.9rem; }
}

.al-call { gap: .4rem; }
.al-call .al-bell { width: 1.3em; height: 1.3em; }
.al-callhint { font-size: .95rem; font-weight: 700; text-align: center; color: var(--muted); }

/* ---------- After a bill, and the scoreboard ---------- */

.al-board { display: grid; gap: .4rem; }
.al-board__row { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); padding: .5rem .8rem; background: var(--surface); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
.al-board__row:first-child { background: var(--sun); color: var(--ink); }
.al-board__row:first-child small { color: var(--ink); }
.al-board__face { font-size: 1.6rem; line-height: 1; }
.al-board__who { flex: 1; min-width: 0; display: grid; font-weight: 800; }
.al-board__who small { font-weight: 700; color: var(--muted); }
.al-board__row.is-bad small { color: var(--tomato); }
.al-board__row > b { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) {
  .al-board__row.is-bad:not(:first-child) small { color: #ff8a75; }
}