/* Riddle Night — game screens. App-register: one narrow column,
   thumb-reachable controls, press feedback instead of hover. */

.game {
  max-width: 560px; margin: 0 auto;
  padding: 20px 16px calc(40px + env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.scene { display: none; animation: rise .32s ease; }
.scene.on { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── connection + presence ─────────────────────────────────── */
.status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  min-height: 20px;
}
.status .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-faint); }
.status.live .dot { background: #17A673; }
.status.down .dot { background: #E0563F; animation: blink 1.1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ── the room code: the loudest thing on the lobby screen,
      because it's the thing being sent to the other person ── */
.code-cells { display: flex; gap: 8px; justify-content: center; margin: var(--s3) 0 var(--s2); }
.code-cells i {
  width: 52px; height: 64px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  background: var(--paper-raised); box-shadow: var(--shadow-soft);
  font-family: var(--mono); font-weight: 700; font-size: 27px; font-style: normal;
}
@media (max-width: 400px) { .code-cells i { width: 44px; height: 56px; font-size: 22px; } }

.field {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  background: var(--paper-raised); color: var(--ink);
  font-family: var(--sans); font-size: 16px; /* 16px: stops iOS zooming on focus */
}
.field:focus { outline: none; border-color: var(--ink); }
.field.code {
  font-family: var(--mono); font-weight: 700; font-size: 24px;
  letter-spacing: .34em; text-align: center; text-transform: uppercase;
}

.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: var(--s2); }
.center { text-align: center; }
.muted { color: var(--ink-soft); font-size: 14px; }

/* ── dials (rounds / timer / pack) ─────────────────────────── */
.dial { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-ctrl);
  background: var(--paper-raised); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: border-color .13s ease, color .13s ease, transform .13s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip:active { transform: scale(.97); }
.chip.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack {
  text-align: left; padding: 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--paper-raised);
  transition: border-color .13s ease, transform .13s ease;
}
.pack:hover { border-color: var(--ink); }
.pack:active { transform: scale(.98); }
.pack.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pack .art { font-size: 22px; }
.pack .name { font-weight: 700; font-size: 15px; margin-top: 6px; letter-spacing: -.01em; }
.pack .sub { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }

/* ── round ─────────────────────────────────────────────────── */
.qdots { display: flex; gap: 5px; }
.qdots i { width: 7px; height: 7px; border-radius: 999px; background: var(--line); display: block; }
.qdots i.done { background: var(--ink-faint); }
.qdots i.now { background: var(--ink); transform: scale(1.25); }

.roundbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.timer { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.timer.urgent { color: #E0563F; }

.riddle-card { margin-top: var(--s3); padding: 26px 22px; }
.riddle-card .art { font-size: 38px; }
.riddle-card .q { font-size: clamp(19px, 4.4vw, 23px); font-weight: 600; letter-spacing: -.015em; margin-top: 14px; line-height: 1.35; }
.diff { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); letter-spacing: .2em; }

.hint {
  margin-top: var(--s2); padding: 12px 14px;
  border: 1px dashed var(--line); border-radius: var(--r-ctrl);
  background: var(--paper-raised); font-size: 14px; color: var(--ink-soft);
}

textarea.field { resize: vertical; min-height: 84px; line-height: 1.5; }

.locked {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r-ctrl);
  background: var(--paper-raised); font-size: 14px;
}
.locked .tick { color: #17A673; font-weight: 700; }

/* ── reveal ────────────────────────────────────────────────── */
.answers { display: grid; gap: 10px; margin-top: var(--s3); }
.answer { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper-raised); }
.answer[data-color="pink"] { border-color: var(--pink); background: var(--pink-tint); }
.answer[data-color="blue"] { border-color: var(--blue); background: var(--blue-tint); }
.answer .who { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.answer[data-color="pink"] .who { color: #B8436B; }
.answer[data-color="blue"] .who { color: #2C68C4; }
.answer .txt { font-size: 16px; font-weight: 600; margin-top: 4px; word-break: break-word; }
.answer .txt.empty { font-weight: 400; color: var(--ink-faint); font-style: italic; }
.answer .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

.verdict { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.verdict.correct { color: #17A673; }
.verdict.close   { color: #C98A15; }
.verdict.wrong   { color: var(--ink-faint); }

.countit {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--r-ctrl);
  border: 1px solid var(--line); background: var(--paper-raised);
  color: var(--ink-soft); cursor: pointer;
}
.countit:hover { border-color: var(--ink); color: var(--ink); }
.countit:active { transform: scale(.96); }

/* The English reading of a Russian riddle, for whoever needs it. Deliberately
   quieter than the original: it is a crutch, not the riddle. */
.q-en {
  margin-top: 10px; font-size: 15px; line-height: 1.5;
  color: var(--ink-faint); font-style: italic;
}
.hint-en { border-style: dotted; color: var(--ink-faint); font-style: italic; }

.solution { margin-top: var(--s3); padding: 18px; }
.solution .txt { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.solution .txt-en { font-size: 15px; font-weight: 600; margin-top: 5px; color: var(--ink-soft); font-style: italic; }
.solution .why { margin-top: 10px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.solution .why-en { margin-top: 6px; color: var(--ink-faint); font-style: italic; }

.scores { display: flex; justify-content: center; gap: var(--s3); margin-top: var(--s3); }
.scores .s { text-align: center; }
.scores .s .n { font-family: var(--mono); font-size: 24px; font-weight: 700; }
.scores .s .l { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.scores .s[data-color="pink"] .n { color: var(--pink); }
.scores .s[data-color="blue"] .n { color: var(--blue); }

/* ── result ────────────────────────────────────────────────── */
.crown { font-size: 46px; text-align: center; }
.band { text-align: center; margin-top: 6px; }
.final { display: flex; justify-content: center; align-items: baseline; gap: 14px; margin-top: var(--s3); }
.final .n { font-family: var(--mono); font-size: 34px; font-weight: 700; }
.final .vs { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.final .n[data-color="pink"] { color: var(--pink); }
.final .n[data-color="blue"] { color: var(--blue); }

.breakdown { margin-top: var(--s4); }
.brow {
  display: grid; grid-template-columns: 30px 1fr auto auto; gap: 10px;
  align-items: center; padding: 10px 0; border-top: 1px solid var(--line);
  font-size: 14px;
}
.brow .a { font-size: 19px; }
.brow .ans { font-weight: 600; letter-spacing: -.01em; }
.brow .m { font-family: var(--mono); font-size: 13px; width: 20px; text-align: center; }
.brow .m.correct { color: #17A673; }
.brow .m.close   { color: #C98A15; }
.brow .m.wrong   { color: var(--ink-faint); }

.err {
  margin-top: var(--s2); padding: 11px 14px;
  border: 1px solid #F2C4BA; background: #FDF1EF; color: #A33B26;
  border-radius: var(--r-ctrl); font-size: 14px;
}