/* Визуален слой за дуела — материали, рамки, медальони, тик-марки.
   Включва се СЛЕД duel.css. Само transform/opacity/filter/box-shadow — layout не се мести. */

:root {
  --brass: #c9a227;
  --brass-lo: #8d6f16;
  --brass-hi: #f2dd9b;
  --ink: #ece5d3;
  --muted: #93a096;
  --wine: #5a1f24;
  --paper: #0f1613;
  --good: #7fa887;
  --bad: #d9534e;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.05'/></svg>");
}

/* ---------- хартия с влакна върху панелите ---------- */
.panel,
.q-card,
.wait,
.lobby,
.final {
  background-image: var(--grain),
    radial-gradient(120% 90% at 50% -20%, rgba(201, 162, 39, .07), transparent 62%);
  background-blend-mode: overlay, normal;
  border: 1px solid rgba(201, 162, 39, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 70px -40px #000;
}

/* месингов кант с два ръба */
.q-card::after,
.final::after,
.wait::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  border: 1px solid rgba(201, 162, 39, .14);
  pointer-events: none;
}
.q-card, .final, .wait { position: relative; }

/* ---------- опции: карти с месингов ключ ---------- */
.opt {
  position: relative;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s, background .2s;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  border: 1px solid rgba(236, 229, 211, .14);
}
.opt:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(201, 162, 39, .55);
  box-shadow: 0 12px 30px -18px rgba(201, 162, 39, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.opt:active:not(:disabled) { transform: translateY(0) scale(.985); }

/* ключът (А/Б/В/Г) като гравиран медальон */
.opt .k {
  background: linear-gradient(160deg, var(--brass-hi), var(--brass) 55%, var(--brass-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));
  font-weight: 700;
}

/* верен/грешен: тиха двойка цветове, без крещене */
.opt.correct {
  border-color: rgba(127, 168, 135, .75) !important;
  box-shadow: 0 0 0 1px rgba(127, 168, 135, .35), 0 18px 44px -26px rgba(127, 168, 135, .9) !important;
  background-image: linear-gradient(180deg, rgba(127, 168, 135, .16), rgba(127, 168, 135, .05)) !important;
}
.opt.wrong {
  border-color: rgba(217, 83, 78, .7) !important;
  background-image: linear-gradient(180deg, rgba(217, 83, 78, .14), rgba(217, 83, 78, .04)) !important;
}
.opt.dim { opacity: .46; }

/* ---------- таймер: тик-марки по пръстена ---------- */
.timer-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -90deg,
      rgba(201, 162, 39, .55) 0deg 1.2deg,
      transparent 1.2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 76%, #000 77% 100%);
  mask: radial-gradient(circle, transparent 0 76%, #000 77% 100%);
  opacity: .55;
  pointer-events: none;
}
.timer.urgent .timer-ring::after { background: repeating-conic-gradient(from -90deg, rgba(255, 111, 97, .6) 0deg 1.2deg, transparent 1.2deg 30deg); }

/* ---------- местата на играчите ---------- */
.seats .seat,
.fighter {
  border: 1px solid rgba(201, 162, 39, .18);
  background-image: var(--grain), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  background-blend-mode: overlay, normal;
}

/* ---------- финал: лавър зад заглавието ---------- */
.final { overflow: hidden; }
.final .display {
  position: relative;
  z-index: 1;
}
.final::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 74px;
  width: min(560px, 92%);
  height: 320px;
  transform: translateX(-50%);
  background: url("/assets/duel/laurel.svg") center / contain no-repeat;
  opacity: .1;
  pointer-events: none;
}

/* короната: топъл блик, който минава веднъж */
.crown { filter: drop-shadow(0 18px 40px rgba(201, 162, 39, .35)); }
.crown-wrap::after {
  content: "";
  position: absolute;
  inset: -14% -30%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 246, 214, .55) 50%, transparent 58%);
  transform: translateX(-120%);
  animation: brassSheen 2.2s ease .35s 1 forwards;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes brassSheen { to { transform: translateX(120%); } }

/* ---------- бутони: месингов ръб + ripple ---------- */
.btn-gold {
  background-image: linear-gradient(180deg, var(--brass-hi), var(--brass) 48%, #a9851c) !important;
  box-shadow: 0 10px 30px -16px rgba(201, 162, 39, .9), inset 0 1px 0 rgba(255, 255, 255, .45) !important;
  color: #1a1407 !important;
}
.btn-gold:active { transform: translateY(1px) scale(.99); }
.btn-ghost, .btn-line { transition: transform .16s, border-color .2s, background .2s; }
.btn-ghost:hover, .btn-line:hover { transform: translateY(-1px); border-color: rgba(201, 162, 39, .45); }

/* ---------- кодът в чакалнята: гравирана плоча ---------- */
.code-box {
  background-image: var(--grain), linear-gradient(180deg, rgba(201, 162, 39, .10), rgba(201, 162, 39, .03));
  background-blend-mode: overlay, normal;
  border: 1px dashed rgba(201, 162, 39, .42);
  letter-spacing: .34em;
  box-shadow: inset 0 0 24px rgba(201, 162, 39, .08);
}

/* ---------- лента на кръга ---------- */
.round-strip {
  background-image: linear-gradient(90deg, transparent, rgba(201, 162, 39, .16), transparent);
  border-top: 1px solid rgba(201, 162, 39, .22);
  border-bottom: 1px solid rgba(201, 162, 39, .22);
}

/* ---------- мобилно ---------- */
@media (max-width: 640px) {
  .opt { min-height: 52px; }
  .final::before { top: 56px; height: 240px; }
}

/* ---------- достъпност ---------- */
@media (prefers-reduced-motion: reduce) {
  .crown-wrap::after { animation: none; display: none; }
  .opt, .btn-gold, .btn-ghost, .btn-line { transition: none; }
  .opt:hover:not(:disabled) { transform: none; }
}

/* ---------- корекции след първи преглед ---------- */
/* тик-марките да се виждат: по-дебели и на самия ръб */
.timer .timer-ring::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -90deg,
      rgba(242, 221, 155, .9) 0deg 1.8deg,
      transparent 1.8deg 30deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 9px));
  opacity: .85;
  pointer-events: none;
  z-index: 2;
}
.timer.urgent .timer-ring::after {
  background: repeating-conic-gradient(from -90deg, rgba(255, 190, 180, .95) 0deg 1.8deg, transparent 1.8deg 30deg);
}

/* екранът да диша центриран, а не да виси горе */
#screen-round .stage {
  min-height: calc(100svh - 190px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* по-осезаем кант на картата с въпроса */
.q-card {
  border-color: rgba(201, 162, 39, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px -50px #000, 0 0 0 1px rgba(0, 0, 0, .5);
}

/* лентата на кръга да не е плосък правоъгълник */
.round-strip {
  border-radius: 10px 10px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* центриране на екрана с въпроса (там няма .stage) */
#screen-round:not([hidden]) {
  min-height: calc(100svh - 132px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding-bottom: 18px;
}
@media (max-width: 640px) {
  #screen-round:not([hidden]) { justify-content: flex-start; padding-top: 8px; }
}

/* тик-марки върху самия таймер (по-надеждно от пръстена) */
.timer { position: relative; }
.timer::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -90deg,
      rgba(242, 221, 155, .95) 0deg 1.6deg,
      transparent 1.6deg 30deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  pointer-events: none;
  z-index: 4;
}
.timer.urgent::after {
  background: repeating-conic-gradient(from -90deg, rgba(255, 186, 176, 1) 0deg 1.6deg, transparent 1.6deg 30deg);
}

/* ================= ПО-ГОЛЯМ ПРОЗОРЕЦ, ТАЙМЕР ИГРАЧИ ================= */
/* 1) игралното поле заема повече екран */
.stage { max-width: 1180px !important; }
#screen-round .q-card { padding: 26px 30px 24px !important; border-radius: 16px; }
.q-text { font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; margin: 20px 0 24px !important; }
.opt { min-height: 64px !important; font-size: 1.02rem; }
.opt .t { font-size: 1rem; }

/* 2) играчите: аватар + име + точки, видими от пръв поглед */
.scoreboard { padding: 12px 16px !important; gap: clamp(10px, 2.4vw, 22px) !important; }
.scoreboard .p { grid-template-columns: auto minmax(0, 1fr) auto; }
.scoreboard .avatar.sm {
  width: 52px; height: 52px; font-size: 17px; border-width: 2px;
  box-shadow: 0 0 0 1px rgba(201,162,39,.25), 0 8px 22px -14px #000;
}
.p-meta { gap: 2px !important; }
.p-name { font-size: 13.5px !important; letter-spacing: .07em; text-transform: uppercase; color: #cfc7b4; }
.p-score { font-size: 26px !important; line-height: 1 !important; }
.p-bar { height: 5px !important; margin-top: 7px !important; border-radius: 4px; }
.sb-round { font-size: 11px; letter-spacing: .18em; color: #c9a227; }
.sb-q { font-size: 11px; color: #93a096; }

/* 3) таймерът: голям, диша и плаши */
.timer { width: 94px !important; height: 94px !important; }
.timer-num { font-size: 30px !important; font-weight: 600; }
.timer-ring {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)) !important;
}
.timer::after {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 10px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 10px)) !important;
}
/* спокойна пулсация през целия въпрос — сърцето бие */
.timer { animation: timerBreath 2.4s ease-in-out infinite; }
@keyframes timerBreath {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(201,162,39,0)); }
  50% { transform: scale(1.045); filter: drop-shadow(0 0 14px rgba(201,162,39,.35)); }
}
/* в последните 5 сек: по-бързо, по-силно, червено */
.timer.alarm { animation: timerAlarm .62s cubic-bezier(.36,.07,.19,.97) infinite !important; }
@keyframes timerAlarm {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255,90,80,.45)); }
  45% { transform: scale(1.12); filter: drop-shadow(0 0 26px rgba(255,90,80,.85)); }
}

@media (max-width: 700px) {
  .stage { max-width: 100% !important; }
  .scoreboard .avatar.sm { width: 42px; height: 42px; font-size: 14px; }
  .p-score { font-size: 22px !important; }
  .timer { width: 72px !important; height: 72px !important; }
  .timer-num { font-size: 23px !important; }
  #screen-round .q-card { padding: 18px 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .timer, .timer.alarm { animation: none !important; }
}

/* аватарът да се чете дори без снимка */
.scoreboard .avatar.sm {
  color: #0e1410 !important;
  font-weight: 700;
  border: 2px solid rgba(201,162,39,.5) !important;
  background-color: #24302a;
  text-shadow: none;
}
.scoreboard .avatar.sm:empty { background-image: linear-gradient(160deg,#2a3830,#18211c); }

/* без скрол по време на въпрос — всичко да се събира на един екран */
#screen-round:not([hidden]) { min-height: calc(100svh - 168px) !important; gap: 10px !important; }
#screen-round .q-card { padding: 22px 28px 20px !important; }
.q-text { margin: 16px 0 20px !important; }

/* бликът по картата да не оставя правоъгълна следа */
.q-card::after { background-image: none !important; opacity: 0 !important; animation: none !important; }
.q-card.enter::after {
  content: "" !important;
  background-image: linear-gradient(100deg, transparent 34%, rgba(255,246,214,.10) 50%, transparent 66%) !important;
  animation: cardSheen .85s ease .15s both !important;
}
@keyframes cardSheen {
  0%   { opacity: 0; transform: translateX(-45%); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(45%); }
}