/* ---------- оверлеи ---------- */
.screen{
  position:absolute;inset:0;z-index:10;
  display:none;place-items:center;
  background:radial-gradient(ellipse at 50% 42%,rgba(21,16,42,.74) 0%,rgba(10,8,18,.95) 72%);
  backdrop-filter:blur(3px);
  pointer-events:auto;
}
.screen.on{display:grid}
.sheet{
  width:min(760px,90vw);max-height:88vh;overflow-y:auto;
  background:var(--panel);
  border:1px solid var(--edge-hot);
  border-radius:4px;
  padding:clamp(24px,4vw,44px);
  box-shadow:0 28px 90px -20px rgba(0,0,0,.9);
}
.kicker{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--nebula);margin:0 0 16px;
}
h1{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(36px,7.5vw,68px);line-height:.98;letter-spacing:.02em;
  margin:0 0 14px;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--ice)}
.lede{font-size:15px;line-height:1.6;color:var(--dust);max-width:62ch;margin:0 0 26px}
h2{
  font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dust);margin:26px 0 12px;
}
h2:first-of-type{margin-top:0}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:3px 26px}
dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 13px;align-items:baseline}
dt{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
dd{margin:0;font-size:12.5px;color:var(--dust);line-height:1.45}
dl.keys dt{color:var(--ice)}

.chain{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 6px}
.chip{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--edge-hot);border-radius:2px;padding:4px 9px;
  display:flex;align-items:center;gap:6px;
}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}

.start{
  margin-top:32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
button{
  font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--ice);color:#07131a;border:0;border-radius:3px;
  padding:14px 30px;cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
button:hover{background:#9ee3f3;box-shadow:0 0 30px -4px rgba(127,212,232,.6)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
button.ghost{background:transparent;color:var(--dust);border:1px solid var(--edge-hot)}
button.ghost:hover{background:rgba(180,160,220,.08);color:var(--ink);box-shadow:none}
.hintline{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;color:var(--dim)}
/* Сноска: тише любого другого текста на экране. Она должна быть прочитана
   один раз и больше не отвлекать. */
.note{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--dim);opacity:.78;line-height:1.5;margin:7px 0 0;
  flex-basis:100%;
}

/* бейдж активного события */
/* Бейдж события — не подпись, а переключатель: на телефоне клавиши T нет,
   а объяснять декор и переключать его логично в одном и том же месте. */
#eventBadge{
  display:none;margin:0 0 26px;
  background:transparent;border:1px solid var(--edge);border-radius:3px;
  padding:7px 10px;
  font:inherit;letter-spacing:normal;text-transform:none;text-align:left;
  cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
#eventBadge.on{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
#eventBadge:hover{background:rgba(180,160,220,.07);border-color:var(--edge-hot);box-shadow:none}
#eventBadge .viaTap{display:none}
#eventBadge .tag{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#0a0812;background:var(--ember);border-radius:2px;padding:4px 9px;
}
#eventBadge .what{font-size:12.5px;color:var(--dust);line-height:1.4}
#eventBadge .what kbd{
  font-family:var(--f-mono);font-size:10.5px;color:var(--ink);
  border:1px solid var(--edge-hot);border-radius:2px;padding:1px 5px;
}
/* на пальцевом экране подсказка про клавишу T — ложь: клавиши нет */
@media (pointer:coarse){
  #eventBadge .viaKey{display:none}
  #eventBadge .viaTap{display:inline}
}

/* выбор корпуса. Идёт после правил для button, поэтому перебивает их
   при равной специфичности — ice-кнопка здесь не нужна */
#skinRow{display:flex;flex-wrap:wrap;gap:8px}
.skin{
  background:transparent;border:1px solid var(--edge);border-radius:3px;
  padding:10px 11px 9px;min-width:86px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--f-mono);text-transform:none;letter-spacing:normal;
  transition:border-color .15s ease,background .15s ease,opacity .15s ease;
}
.skin canvas{display:block;width:46px;height:46px}
.skin b{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.skin i{font-size:8.5px;font-style:normal;letter-spacing:.09em;color:var(--dim);text-align:center;line-height:1.3}
.skin:hover{background:rgba(180,160,220,.07);border-color:var(--edge-hot);box-shadow:none}
.skin.sel{border-color:var(--ice);background:rgba(127,212,232,.11)}
.skin.sel b{color:var(--ice)}
.skin.locked{opacity:.38;cursor:not-allowed}
.skin.locked:hover{background:transparent;border-color:var(--edge)}
.skin:active{transform:none}

#overUnlock{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  color:var(--gold);margin:0 0 20px;display:none;
}
#overUnlock.on{display:block}

#final{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:18px;margin:0 0 8px}
.stat b{
  display:block;font-family:var(--f-mono);font-weight:700;font-size:25px;
  font-variant-numeric:tabular-nums;color:var(--gold);line-height:1;
}
.stat span{
  display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-top:6px;
}