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

   The list Mama reads is the one thing that must be easy to take in at a
   glance, so its lines are large, with one picture each. The marked list
   afterwards looks like the shop's paper bill.
   ========================================================================== */

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

/* ---------- Menu and setup ---------- */

.dk-menu { display: grid; gap: .5rem; text-align: center; }
.dk-tagline { font-size: 1.1rem; font-weight: 700; }
.dk-menu .lobby__or { margin-top: .75rem; }
.dk-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; }

.dk-names { display: grid; gap: .5rem; margin-bottom: .5rem; }
.dk-names__row { display: flex; align-items: center; gap: .5rem; font-size: 1.5rem; }

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

/* ---------- Who is talking ---------- */

.host--small .host__teta { width: 76px; }
.host--small .bubble { padding: .65rem .9rem; font-weight: 700; }
.dk-face { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; font-size: 2.3rem; line-height: 1; background: var(--sun); border: 3px solid var(--line); border-radius: 50%; box-shadow: 0 4px 0 var(--line); }
.dk-says--ammo .dk-face { background: var(--surface-2); }
.dk-face--big { width: 6.5rem; height: 6.5rem; font-size: 3.6rem; border-width: 4px; box-shadow: 0 6px 0 var(--line); }
.dk-who { display: block; font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--tomato); }
html[lang="ar"] .dk-who { font-size: .9rem; }

/* ---------- Mama's list ---------- */

.dk-list, .dk-lines { display: grid; gap: .45rem; }
.dk-item, .dk-line { display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem; background: var(--surface); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
.dk-item { visibility: hidden; opacity: 0; transform: translateY(8px) scale(.97); }
.dk-item.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
.dk-item__icon { flex: none; font-size: 1.8rem; line-height: 1; }
.dk-item__text { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.dk-item__text b { font-size: 1.3rem; font-weight: 900; line-height: 1.25; }
.dk-item__text small { font-weight: 700; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .dk-item, .dk-item.is-on { transform: none; transition: none; }
}

/* ---------- The walk ---------- */

.dk-walk { display: grid; justify-items: center; gap: .6rem; padding-block: 1.5rem; text-align: center; }
.dk-walk__icon { font-size: 4rem; line-height: 1; }
.dk-walk__line { font-size: 1.25rem; font-weight: 700; }

/* ---------- Telling Ammo ---------- */

.dk-tell { display: grid; gap: .6rem; }
.dk-answer { min-height: 8.5rem; font-family: inherit; line-height: 1.5; resize: vertical; }
.dk-hint { font-size: .95rem; }
.dk-heard { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.2rem; }
.dk-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; font-weight: 800; background: var(--surface-2); border: 2px solid var(--line); border-radius: 999px; }
.dk-chip b { direction: ltr; color: var(--tomato); }
.dk-puzzled { font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- The marked list ---------- */

.dk-receipt { display: grid; gap: .6rem; padding: 1rem; }
.dk-receipt__title { font-size: 1.1rem; text-align: center; padding-bottom: .5rem; border-bottom: 3px dashed var(--line); }
.dk-line { padding: .4rem .6rem; border-width: 2px; }
.dk-line .dk-item__text b { font-size: 1.1rem; }
.dk-line--ok { border-color: var(--olive); border-width: 3px; }
.dk-line--miss { opacity: .65; }
.dk-line--miss .dk-item__text b { text-decoration: line-through; }
.dk-line__points { flex: none; min-width: 2.2rem; font-size: 1.2rem; font-weight: 900; text-align: end; direction: ltr; font-variant-numeric: tabular-nums; }
.dk-line--ok .dk-line__points { color: var(--olive); }
.dk-line--miss .dk-line__points { color: var(--tomato); }
.dk-extras { font-weight: 700; overflow-wrap: anywhere; }
.dk-extras b { direction: ltr; display: inline-block; color: var(--tomato); }
.dk-perfect { font-weight: 900; text-align: center; color: var(--olive); }
.dk-total { padding-top: .5rem; font-size: 1.3rem; font-weight: 900; text-align: center; border-top: 3px dashed var(--line); }
@media (prefers-color-scheme: dark) {
  .dk-line--ok .dk-line__points, .dk-perfect { color: #b7cc6a; }
  .dk-line--miss .dk-line__points, .dk-extras b, .dk-chip b, .dk-who { color: #ff8a75; }
}

/* ---------- Scoreboard ---------- */

.dk-board { display: grid; gap: .4rem; }
.dk-board__row { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: var(--tap); padding: .5rem .8rem; font: inherit; color: inherit; text-align: start; background: var(--surface); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
button.dk-board__row { cursor: pointer; }
button.dk-board__row.is-picked { box-shadow: 0 3px 0 var(--line); outline: 3px solid var(--focus); outline-offset: 1px; }
.dk-board li:first-child .dk-board__row { background: var(--sun); color: var(--ink); }
.dk-board li:first-child .dk-board__row small { color: var(--ink); }
.dk-board__face { font-size: 1.6rem; line-height: 1; }
.dk-board__who { flex: 1; min-width: 0; display: grid; font-weight: 800; }
.dk-board__who small { font-weight: 700; color: var(--muted); }
.dk-board__row > b { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ---------- Today's list ---------- */

.dk-best { font-weight: 900; text-align: center; }
.dk-streak { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; text-align: center; }
.dk-streak span { display: grid; padding: .35rem .2rem; background: var(--surface-2); border: 2px solid var(--line); border-radius: 12px; }
.dk-streak b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.dk-streak small { font-weight: 700; color: var(--muted); }
.dk-next { font-weight: 800; text-align: center; color: var(--muted); }