/* ==========================================================================
   Insan, Hayawan, Shay2! — styles. Theme tokens and shared components come from
   shared/style.css.

   The letter is the one thing everyone looks for first, so it is the largest
   thing on the page. The sheet is five plain boxes, as on paper, and the table
   of answers afterwards is the same boxes with everyone's words in them.
   ========================================================================== */

.hf { display: grid; gap: 1rem; max-width: 30rem; margin-inline: auto; padding-block: .75rem 2rem; }
.hf-title { font-size: clamp(1.6rem, 7vw, 2.2rem); text-align: center; }
.hf-subtitle { font-size: 1.2rem; }
.hf-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hf-top > :last-child:not(:first-child) { margin-inline-start: auto; }
.hf-top__letter { padding: 0 .55rem; font-size: 1.2rem; line-height: 1.5; background: var(--sun); color: var(--ink); border: 2px solid var(--line); border-radius: 10px 12px 9px 13px; }
.hf-stars { font-weight: 800; }
.hf-note { font-size: 1.05rem; font-weight: 700; text-align: center; }

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

.hf-tagline { font-size: 1.1rem; font-weight: 700; text-align: center; }
.hf-settings { display: grid; gap: .4rem; }
.hf-settings .field__label:not(:first-child) { margin-top: .5rem; }

.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 letter ---------- */

.hf-letter { display: grid; justify-items: center; gap: .1rem; padding: .7rem 1rem .8rem; text-align: center; background: var(--sun); color: var(--ink); }
.hf-letter__label { font-size: .8rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.hf-letter__big { font-size: clamp(3.6rem, 20vw, 5rem); font-weight: 900; line-height: 1.05; }
.hf-letter__counts { font-size: .95rem; font-weight: 700; }
.hf-letter__counts bdi { font-weight: 900; }
html[lang="ar"] .hf-letter__label { font-size: .95rem; }
html[lang="ar"] .hf-letter__big { line-height: 1.3; }

.hf-rule { padding: .6rem .9rem; font-weight: 700; background: var(--surface-2); border: 3px dashed var(--line); border-radius: 14px 16px 13px 17px; }
.hf-rule b { display: block; font-size: .8rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--tomato); }
html[lang="ar"] .hf-rule b { font-size: .9rem; }

/* ---------- The sheet ---------- */

.hf-sheet { position: relative; display: grid; gap: .6rem; }
.hf-field { display: grid; gap: .25rem; }
.hf-field__name { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .4rem; font-weight: 800; }
.hf-field__name small { font-weight: 700; color: var(--muted); }
.hf-field__row { display: flex; align-items: center; gap: .5rem; }
.hf-mark { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; font-size: 1.2rem; font-weight: 900; line-height: 1; color: #fff; border-radius: 50%; }
.hf-mark.is-ok { background: var(--olive); }
.hf-mark.is-no { background: var(--tomato); }

/* The 'cut' rule: the boxes are still there and still take typing, but nobody can see them. */
.hf-sheet__dark { display: none; position: absolute; inset: -.4rem; z-index: 1; place-items: center; padding: 1rem; font-size: 1.3rem; font-weight: 900; text-align: center; color: #f7ecd6; background: #05090c; border-radius: 16px; pointer-events: none; }
.hf-sheet.is-dark .hf-sheet__dark { display: grid; }

.hf-stop { min-height: 68px; font-size: 1.6rem; letter-spacing: .04em; }
.hf-alert { padding: .6rem .9rem; font-weight: 800; text-align: center; color: #fff; background: var(--tomato); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
.hf-alert--good { background: var(--olive); }

.hf-wait { display: grid; justify-items: center; gap: .6rem; padding-block: 1.5rem; text-align: center; }
.hf-wait__icon { font-size: 4rem; line-height: 1; }

/* ---------- Everyone's answers ---------- */

.hf-table { display: grid; gap: .9rem; }
.hf-box { display: grid; gap: .5rem; padding: .8rem; }
.hf-box__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .4rem; font-size: 1.1rem; }
.hf-rows { display: grid; gap: .35rem; }
.hf-row { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: var(--tap); padding: .35rem .7rem; font: inherit; color: inherit; text-align: start; background: var(--bg); border: 2px solid var(--line); border-radius: 12px 14px 11px 15px; }
button.hf-row { cursor: pointer; touch-action: manipulation; box-shadow: 0 3px 0 var(--line); transition: transform .08s ease, box-shadow .08s ease; }
button.hf-row:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
button.hf-row[disabled] { cursor: default; box-shadow: none; }
.hf-row.is-you { background: var(--surface-2); }
.hf-row__face { flex: none; font-size: 1.4rem; line-height: 1; }
.hf-row__text { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.hf-row__answer { font-size: 1.15rem; font-weight: 900; line-height: 1.3; }
.hf-row__text small { font-weight: 700; color: var(--muted); }
.hf-row__badge { flex: none; font-weight: 900; white-space: nowrap; }
.hf-row.is-objected { border-color: var(--tomato); border-width: 3px; }
.hf-row--empty .hf-row__answer { font-weight: 700; color: var(--muted); }
.hf-row--empty, .hf-row--letter, .hf-row--out { opacity: .7; }
.hf-row--letter .hf-row__answer, .hf-row--out .hf-row__answer { text-decoration: line-through; }
.hf-row--letter .hf-row__badge, .hf-row--out .hf-row__badge, .hf-row--open .hf-row__badge { color: var(--tomato); }
.hf-row.is-best { border-color: var(--olive); border-width: 3px; }
.hf-row--solo .hf-row__badge, .hf-row--shared .hf-row__badge { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.hf-row.is-best .hf-row__badge { color: var(--olive); }
@media (prefers-color-scheme: dark) {
  .hf-row.is-best .hf-row__badge { color: #b7cc6a; }
  .hf-row--letter .hf-row__badge, .hf-row--out .hf-row__badge, .hf-row--open .hf-row__badge, .hf-rule b { color: #ff8a75; }
}

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

.hf-board { display: grid; gap: .4rem; }
.hf-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; }
.hf-board__row:first-child { background: var(--sun); color: var(--ink); }
.hf-board__row:first-child small { color: var(--ink); }
.hf-board__face { font-size: 1.6rem; line-height: 1; }
.hf-board__who { flex: 1; min-width: 0; display: grid; font-weight: 800; }
.hf-board__who small { font-weight: 700; color: var(--muted); }
.hf-board__row > b { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }