/* =========================
   NEO-BRUTAL TECH (OBS READY)
   - Outside background: transparent
   - Widget box: has background
   ========================= */

*{
  box-sizing:border-box;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

:root{
  --bg: #0b0c10;

  --paper: rgba(255,255,255,.06);
  --paper2: rgba(255,255,255,.03);

  --line: rgba(255,255,255,.18);
  --line2: rgba(255,255,255,.10);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);

  --chipA: #2f7cff;
  --chipB: #00d3a7;
  --chipC: rgba(255,255,255,.26); /* FIX: чтобы ::after не ссылался на undefined */

  --radius: 24px;
  --radius2: 16px;
  --gap: 14px;
}

html, body{
  height:100%;
  background: transparent !important;
}

body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:var(--text);
}

body::before{ display:none !important; }

/* =========================
   WIDGET PANEL
   ========================= */

.widget{
  position:relative;
  width: 960px;
  height: 650px;
  padding: 36px;
  border-radius: var(--radius);

  background: rgb(8, 9, 12);
  border:1px solid var(--line);
  box-shadow: var(--shadow), var(--shadowIn);
  overflow:hidden;
}

.widget::before{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: calc(var(--radius) - 10px);
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}

.widget::after{
  content:"";
  position:absolute;
  border-radius:var(--radius);
  background:
    linear-gradient(var(--chipA), var(--chipA)) left 22px top 22px / 30px 3px no-repeat,
    linear-gradient(var(--chipA), var(--chipA)) left 22px top 22px / 3px 30px no-repeat,

    linear-gradient(var(--chipB), var(--chipB)) right 22px top 22px / 30px 3px no-repeat,
    linear-gradient(var(--chipB), var(--chipB)) right 22px top 22px / 3px 30px no-repeat,

    linear-gradient(var(--chipC), var(--chipC)) left 22px bottom 22px / 30px 3px no-repeat,
    linear-gradient(var(--chipC), var(--chipC)) left 22px bottom 22px / 3px 30px no-repeat,

    linear-gradient(rgba(255,255,255,.26), rgba(255,255,255,.26)) right 22px bottom 22px / 30px 3px no-repeat,
    linear-gradient(rgba(255,255,255,.26), rgba(255,255,255,.26)) right 22px bottom 22px / 3px 30px no-repeat;
  opacity:.95;
  pointer-events:none;
}

.widget > *{
  position:relative;
  z-index:1;
}

/* =========================
   TOPBAR
   ========================= */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;

  padding:14px 14px;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line2);
}

.title{
  font-size: 42px;
  letter-spacing: 6px;
  font-weight: 700;
  text-transform: uppercase;
  line-height:1;
  margin-left: 10px;
  color: rgba(255,255,255,.92);
  position:relative;
}

.title::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-12px;
  height:3px;
  transform-origin:left;
  transform: scaleX(.28);
  animation: titleBar 3.2s steps(12, end) infinite;
  opacity:.85;
}
@keyframes titleBar{
  0%,100%{ transform: scaleX(.28); }
  50%{ transform: scaleX(.86); }
}

.status{
  font-size: 14px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(21, 255, 0, 0.84);

  padding: 9px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);

  position:relative;
  overflow:hidden;
}

.status::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-120%);
  animation: ticker 2.2s cubic-bezier(.2,.9,.2,1) infinite;
  opacity:.8;
}
@keyframes ticker{
  0%{ transform: translateX(-120%); opacity:0; }
  18%{ opacity:.75; }
  55%{ opacity:.75; }
  100%{ transform: translateX(120%); opacity:0; }
}

/* =========================
   WORD AREA
   ========================= */

.emoji-hint{
  display:none;
  align-items:center;
  justify-content:center;
  min-height: 86px;
  margin-bottom: 16px;
  padding: 10px 18px;

  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  font-size: 58px;
  line-height:1.15;
  text-align:center;
  letter-spacing: 0;
  overflow:hidden;
}

.emoji-hint.show{
  display:flex;
  animation: emojiIn .25s ease-out;
}
@keyframes emojiIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.word{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  align-content:center;
  flex-wrap:wrap;
  gap: 14px 24px;
  min-height: 116px;

  padding: 16px 14px 20px;
  border-radius: 18px;

  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.word-group{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap: 8px;
  flex: 0 1 auto;
  max-width: 100%;
}

.word-group.has-gap{
  margin-left: 6px;
}

/* =========================
   LETTERS
   ========================= */

.letter{
  position:relative;
  flex-shrink:0;

  min-width: 36px;
  height: 78px;

  display:flex;
  align-items:flex-end;
  justify-content:center;

  font-size: 60px;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);

  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  padding: 0 6px;
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* буква отдельным элементом, чтобы не ломать таймер */
.letter .lchar{
  display:block;
  line-height: 1;
}

/* underline */
.letter::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom: -10px;
  height: 3px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.781);
}

.letter.revealed{
  animation: letterIn .30s ease-out;
}
@keyframes letterIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.letter.revealed::after{
  background: linear-gradient(90deg, var(--chipA), var(--chipB));
  animation: underline .35s ease-out;
}
@keyframes underline{
  from{ transform: scaleX(.25); transform-origin:left; opacity:.45; }
  to{ transform: scaleX(1); transform-origin:left; opacity:1; }
}

/* таймер под буквой */
.letter .ltimer{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -75px;
  font-size: 40px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.78);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.letter.pending .ltimer{
  opacity: 1;
  animation: timerPop .25s ease-out;
}
@keyframes timerPop{
  from{ transform: translateX(-50%) translateY(6px); opacity:0; }
  to{ transform: translateX(-50%) translateY(0); opacity:1; }
}

/* =========================
   WINNER
   ========================= */

.winner{
  margin-top: 18px;
  text-align:center;

  font-size: 20px;
  color: rgba(255,255,255,.92);

  padding: 14px 18px;
  border-radius: 16px;

  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);

  opacity:0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}

.winner.show{
  opacity:1;
  transform: translateY(0);
}

.leaderboard{
  position:absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;

  padding: 12px 14px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  display:flex;
  flex-direction: column;   /* ВАЖНО: заголовок сверху */
  gap: 10px;
}

.lb-title{
  font-size: 23px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  text-align: center;       /* по желанию */
  margin: 0;
}

/* контейнер рядов */
#leaders{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
  justify-content:center;
  overflow:visible;
}

/* плашка лидера */
.leader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 14px;

  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(90deg, rgba(47,124,255,.18), transparent 45%),
    rgba(0,0,0,.18);

  color: rgba(255,255,255,.90);
  font-size: 16px;

  white-space: nowrap;
  flex: 1 1 150px;
  min-width: 140px;
  max-width: 180px;
}

.leader span{
  color: rgba(255,255,255,.66);
}


/* анимация остаётся, но мягче для горизонтали */
@media (prefers-reduced-motion: no-preference){
  .leader{
    animation: rowPulse 4.2s steps(14, end) infinite;
  }
  @keyframes rowPulse{
    0%,100%{ filter: contrast(1); }
    50%{ filter: contrast(1.05); }
  }
}


@media (max-width: 1280px){
  .widget{ width: 94vw; height: min(720px, 88vh); }
  .title{ font-size: 36px; }
  .emoji-hint{ min-height: 78px; font-size: 50px; }
  .letter{ font-size: 54px; height: 72px; min-width: 32px; }
  .leaderboard{ left: 20px; right: 20px; width: auto; }
}