/* Викторина «История каратэ» — музейный этикетаж афиши
   «Фестиваль спортивных единоборств».
   Палитра: фон индиго #0B1533→#16255A, рубрики #D2222A, рамки #8B0000,
   паспарту #F4F1EA, искра #FF6A00/#F5A623.
   Шрифты: Oswald (заголовки) / Inter (текст) / JetBrains Mono (служебное).
   Прямые углы, без скруглений и «карточек» веб-стиля. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: #0B1533;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; border: 0; background: none; cursor: pointer; }
img { display: block; }

/* ---------- каркас ---------- */
.bg {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(165deg, #0B1533 0%, #16255A 55%, #0B1533 100%);
  background-attachment: fixed;
}
.glow {
  position: fixed; left: 0; right: 0; bottom: 0; height: 160px;
  pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,106,0,.20) 0%, rgba(11,21,51,0) 72%);
}
.spark {
  position: fixed; left: 0; right: 0; bottom: 0; height: 5px; z-index: 20;
  background: linear-gradient(90deg, #FF6A00 0%, #F5A623 35%, #D2222A 70%, #FF6A00 100%);
}
.shell {
  position: relative; z-index: 10;
  margin: 0 auto;
  display: flex; flex-direction: column;
  min-height: 100vh;
  width: 100%; max-width: 560px;
}
.pane { display: flex; flex: 1; flex-direction: column; padding: 16px 20px 20px; }
.pane-center { justify-content: center; }

/* На планшетах и в горизонтальной ориентации содержимое не должно
   прижиматься к верху: центрируем колонку по высоте экрана. */
@media (min-width: 640px) {
  .pane { padding: 24px 20px 24px; }
}

/* ---------- шапка с логотипами ---------- */
.logobar { display: flex; justify-content: center; padding: 20px 16px 4px; }
.logobar img { height: 24px; width: auto; object-fit: contain; opacity: .95; }
@media (min-width: 640px) { .logobar img { height: 28px; } }

/* ---------- колонтитул ---------- */
.footer { margin-top: auto; width: 100%; padding: 24px 20px 0; }
.footer-row {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 12px 0 20px;
}
.footer-left {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: #8E9AB6;
}
.footer-num {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .14em; color: #fff; background: #D2222A; padding: 4px 10px;
}
@media (min-width: 640px) {
  .footer-left { font-size: 10px; }
  .footer-num { font-size: 11px; }
}

/* ---------- рубрика ---------- */
.rubric {
  display: inline-block; background: #D2222A; color: #fff;
  font-family: 'Oswald', sans-serif; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  font-size: 10px; padding: 4px 12px;
}
.rubric-row { display: flex; align-items: center; gap: 12px; }
.rubric-rule { height: 1px; flex: 1; background: rgba(255,255,255,.18); }
@media (min-width: 640px) { .rubric { font-size: 11px; } }

/* ---------- музейная этикетка ---------- */
.label {
  background: #F4F1EA; border: 3px solid #8B0000; padding: 4px;
  box-shadow: 0 12px 30px rgba(0,0,0,.42);
}
.label-in { border: 1px solid #B9AE99; padding: 16px; background: #F4F1EA; }
.label-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid #C9BFAB; padding-bottom: 8px;
}
.inv {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: #8B0000;
}
@media (min-width: 640px) { .inv { font-size: 10px; } }

/* ---------- типографика ---------- */
.osw { font-family: 'Oswald', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }

h1.title {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 30px; line-height: 1.08; color: #fff; letter-spacing: .01em;
  text-transform: uppercase;
}
h1.title .gold { color: #F5A623; }
@media (min-width: 640px) { h1.title { font-size: 36px; } }

.rule-red { margin-top: 12px; height: 3px; width: 96px; background: #D2222A; }

.lede {
  margin-top: 20px; font-size: 14px; line-height: 1.62; color: #C6CFE2;
}
@media (min-width: 640px) { .lede { font-size: 15px; } }

.ink { color: #2C3E50; }
.sepia { color: #6B5F4C; }

/* ---------- шкала поясов ---------- */
.belts { margin-top: 16px; display: flex; align-items: stretch; gap: 3px; }
.belt-col { flex: 1; }
.belt-swatch { height: 20px; border: 1px solid rgba(0,0,0,.25); }
.belt-idx {
  margin-top: 4px; text-align: center; font-size: 8px; color: #6B5F4C;
  font-family: 'JetBrains Mono', monospace;
}
@media (min-width: 640px) { .belt-idx { font-size: 9px; } }

/* ---------- главная кнопка ---------- */
.btn-main {
  margin-top: 28px; width: 100%;
  border: 2px solid #F5A623; background: #D2222A; color: #fff;
  padding: 16px 24px; font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  transition: transform .16s cubic-bezier(.23,1,.32,1);
}
.btn-main:active { transform: scale(.98); }
@media (min-width: 640px) { .btn-main { font-size: 16px; } }

.btn-ghost {
  margin-top: 20px; width: 100%;
  border: 2px solid rgba(255,255,255,.30); background: rgba(255,255,255,.06);
  color: #fff; padding: 14px 24px;
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  transition: transform .16s cubic-bezier(.23,1,.32,1);
}
.btn-ghost:active { transform: scale(.98); }
@media (min-width: 640px) { .btn-ghost { font-size: 15px; } }

.hint {
  margin-top: 12px; text-align: center; font-size: 10px; color: #8E9AB6;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .12em;
}

/* ---------- прогресс витрин ---------- */
.progress { display: flex; align-items: center; gap: 3px; }
.progress span {
  height: 3px; flex: 1; background: rgba(255,255,255,.16);
  transition: background .2s cubic-bezier(.23,1,.32,1);
}
.progress span.done { background: #F5A623; }
.progress span.now { background: #D2222A; }

.meta-row {
  margin-top: 12px; display: flex; align-items: center; justify-content: space-between;
}
.meta-num {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .14em; color: #8E9AB6; text-transform: uppercase;
}
@media (min-width: 640px) { .meta-num { font-size: 11px; } }

/* ---------- вопрос ---------- */
.qtext {
  margin-top: 12px; font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 17px; line-height: 1.25; color: #2C3E50;
}
@media (min-width: 640px) { .qtext { font-size: 19px; } }

/* ---------- варианты ответа ---------- */
.options { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px; text-align: left;
  border: 2px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05);
  color: #fff;
  transition: border-color .2s cubic-bezier(.23,1,.32,1),
              background-color .2s cubic-bezier(.23,1,.32,1),
              transform .16s cubic-bezier(.23,1,.32,1);
}
.opt:active:not(:disabled) { transform: scale(.99); }
.opt:disabled { cursor: default; }
.opt-letter {
  display: flex; align-items: center; justify-content: center;
  height: 28px; width: 28px; flex-shrink: 0;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px;
  background: rgba(255,255,255,.12); color: #C6CFE2;
}
.opt-text { font-size: 14px; line-height: 1.4; }
@media (min-width: 640px) { .opt-text { font-size: 15px; } }

.opt.correct { border-color: #F5A623; background: rgba(46,107,62,.34); }
.opt.correct .opt-letter { background: #F5A623; color: #14161C; }
.opt.wrong { border-color: #D2222A; background: rgba(210,34,42,.22); }
.opt.wrong .opt-letter { background: #D2222A; color: #fff; }
.opt.dim { border-color: rgba(255,255,255,.12); color: #8E9AB6; }

/* ---------- пояснение к залу ---------- */
.note { margin-top: 16px; }
.note-body {
  display: flex; align-items: stretch;
  border-left: 4px solid #F5A623; background: rgba(255,255,255,.06);
}
.note-body.bad { border-left-color: #D2222A; }
.note-in { padding: 12px 14px; }
.note-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: #F5A623;
}
.note-body.bad .note-tag { color: #FF7B80; }
.note-text {
  margin-top: 6px; font-size: 13px; line-height: 1.6; color: #C6CFE2;
}
@media (min-width: 640px) {
  .note-tag { font-size: 10px; }
  .note-text { font-size: 14px; }
}

/* ---------- свидетельство ---------- */
.score-row { margin-top: 16px; display: flex; align-items: flex-end; gap: 12px; }
.score-big {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 64px; line-height: .82; color: #8B0000;
}
@media (min-width: 640px) { .score-big { font-size: 76px; } }
.score-of {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 15px; line-height: 1; color: #2C3E50;
}
.score-word {
  margin-top: 4px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .1em; color: #6B5F4C; text-transform: uppercase;
}

.belt-plate {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.30); padding: 14px 12px;
}
.belt-plate span {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 19px; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
}
@media (min-width: 640px) { .belt-plate span { font-size: 22px; } }

.belt-meta {
  margin-top: 6px; display: flex; align-items: center; justify-content: space-between;
}
.belt-jp {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .14em; color: #6B5F4C; text-transform: uppercase;
}
.belt-for { font-size: 10px; color: #6B5F4C; font-style: italic; }
@media (min-width: 640px) { .belt-jp, .belt-for { font-size: 11px; } }

.wish {
  margin-top: 16px; border-top: 2px solid #8B0000; padding-top: 12px;
  font-size: 13px; line-height: 1.62; color: #2C3E50;
}
@media (min-width: 640px) { .wish { font-size: 14px; } }

.krf-mark { margin-top: 12px; display: flex; justify-content: center; }
.krf-mark img { height: 32px; width: auto; object-fit: contain; opacity: .9; }

.sign {
  margin-top: 16px; text-align: center; font-size: 12px; line-height: 1.6;
  color: #8E9AB6;
}
@media (min-width: 640px) { .sign { font-size: 13px; } }

/* ---------- появление ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation: fadeIn .22s cubic-bezier(.23,1,.32,1) both; }
  .rise-in { animation: riseIn .22s cubic-bezier(.23,1,.32,1) both; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}