/* Тач-панель «Кто здесь рулит?». Сцена — ровно 1080×1920 (вертикальная панель), все размеры в её пикселях;
   на другом экране сцена масштабируется целиком (--k ставит panel.js), поэтому раскладка не плывёт.
   Вид — как у страниц форума (sber.ru/autoforum): тёмный фон, машина из ключевого визуала, белый текст, белая кнопка.
   Текст — пять размеров: 160 время · 72 рекорд · 52 заголовок и кнопки · 36 подписи · 28 мелочь. */
@font-face{font-family:"SB Sans Display";font-weight:400;font-style:normal;src:url("fonts/SBSansDisplay-Regular.woff2") format("woff2")}
@font-face{font-family:"SB Sans Display";font-weight:600;font-style:normal;src:url("fonts/SBSansDisplay-SemiBold.woff2") format("woff2")}

:root{
  --bg:#02252f;                            /* фон сайта форума */
  --dark:#010b0e;                          /* фон, пока машина в темноте: сливается с ночными кадрами ролика */
  --muted:rgba(255,255,255,.72);
  --fill:rgba(255,255,255,.1);
  --ink:#060606;
  --lamp:#ff5a4a;                          /* горящий огонь старта */
  --go:#21a038;                            /* кнопка, когда огни погасли: зелёный Сбера */
  --k:1;
  font-family:"SB Sans Display",system-ui,sans-serif;
  font-synthesis:none;
  color:#fff;
  background:var(--bg);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg)}
body{
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;   /* киоск: ни выделения, ни масштаба */
}
p{margin:0}
img{-webkit-user-drag:none}

#stage{
  position:absolute;left:50%;top:50%;width:1080px;height:1920px;overflow:hidden;background:var(--bg);
  transform:translate(-50%,-50%) scale(var(--k));transition:background-color .6s;
  font-variant-numeric:tabular-nums;
}
#stage[data-car=dark]{background:var(--dark)}

/* машина: ролик 1080×750, сама машина в нём — 182…597 по высоте, на сцене — 982…1397 */
.car{
  position:absolute;left:0;top:800px;width:1080px;height:750px;object-fit:cover;
  -webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);
  transition:opacity .3s;
}
.logo{position:absolute;left:420px;top:60px;width:240px;height:60px;z-index:2}

/* огни старта: пять стоек по два светодиодных фонаря, как на старте гонки */
.gantry{
  position:absolute;left:168px;top:190px;display:flex;gap:18px;padding:22px 26px;border-radius:40px;background:#071114;
  transition:opacity .3s;
}
.gantry i{display:grid;gap:14px;padding:12px;border-radius:64px;background:#020607}
.gantry b{
  display:block;width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,#3a1714 33%,transparent 37%) center/12.5px 12.5px,#150908;   /* погасший: тёмные светодиоды */
}
.gantry i.on b{                                                       /* без переходов: огонь гаснет в тот же кадр */
  background:radial-gradient(circle,var(--lamp) 33%,transparent 37%) center/12.5px 12.5px,#5c120d;
  box-shadow:0 0 40px rgba(255,64,48,.5);
}
[data-screen=result] .gantry,[data-screen=final] .gantry,[data-screen=result] .car,[data-screen=final] .car{opacity:0}

/* экраны: всё стоит на своих местах по высоте сцены */
.screen{position:absolute;inset:0;z-index:1}
.screen p,.screen .btn,.board,.qr{position:absolute;left:120px;right:120px;text-align:center;text-wrap:balance}
.time{font-size:160px;line-height:1;font-weight:600;letter-spacing:-.02em}
.title{font-size:52px;line-height:60px;font-weight:600}

.btn{
  display:block;height:128px;padding:0 40px;border:0;border-radius:24px;background:#fff;color:var(--ink);
  font:600 52px/1 "SB Sans Display",system-ui,sans-serif;cursor:pointer;
  transition:transform .12s ease-out,background-color .12s ease-out;touch-action:manipulation;
}
.btn:active{transform:scale(.98);background:#dfe5e6}
.btn.quiet{background:var(--fill);color:#fff}
.btn.quiet:active{background:rgba(255,255,255,.16)}
.btn:disabled{opacity:.4}
.screen .b1{top:1560px}
.screen .b2,#start{top:1712px}

/* 1. ожидание: огни сами показывают игру, под ними — лучшие за день */
.board{top:530px}
.board .label{position:static;font-size:36px;line-height:44px;color:var(--muted)}
.board .empty{position:static;margin-top:16px}
.board .table{margin-top:12px}
.rule{top:1636px;font-size:36px;line-height:44px;color:var(--muted)}

/* таблица: место, ник, время — без рамок, строка гостя мятная */
.table{margin:0;padding:0;list-style:none;text-align:left}
.table li{display:grid;grid-template-columns:72px 1fr auto;align-items:center;height:64px;font-size:36px;line-height:44px;color:var(--muted)}
.table i{font-style:normal}
.table b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:#fff}
.table span{font-weight:600;color:#fff}
.table .me,.table .me b,.table .me span{color:#a6ffdb}

/* 2. старт: попытки точками, время, большая кнопка — загорается, когда огни погасли */
.try{top:500px;font-size:36px;line-height:44px;color:var(--muted)}
#time{top:572px}
.go{
  position:absolute;left:390px;top:1580px;width:300px;height:300px;border-radius:50%;display:grid;place-items:center;
  background:#0c2a32;box-shadow:inset 0 0 0 8px #163f49;color:var(--muted);font-size:52px;font-weight:600;
  transition:transform .1s ease-out;
}
.go .n{display:none}
body[data-phase=go] .go{background:var(--go);box-shadow:inset 0 0 0 8px #4cc867;color:#fff}   /* без перехода: сигнал мгновенный */
body[data-phase=go] .go .w{display:none}
body[data-phase=go] .go .n{display:block}
.go.press{transform:scale(.92)}

/* 3. результат и ник: своя клавиатура */
.best-label{top:192px;font-size:36px;line-height:44px;color:var(--muted)}
#best{top:250px}
.nick-title{top:460px}
.field{top:560px;height:128px;border-radius:24px;background:var(--fill);font-size:72px;line-height:128px;font-weight:600;white-space:nowrap}
.field:empty::before{content:"Ник";color:rgba(255,255,255,.3)}
.field::after{content:"";display:inline-block;width:5px;height:76px;margin-left:6px;vertical-align:-10px;background:#fff;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.keys{position:absolute;left:60px;right:60px;top:740px;display:grid;gap:12px}
.keys div{display:flex;justify-content:center;gap:8px}
.keys button{
  flex:0 0 80px;height:104px;padding:0;border:0;border-radius:16px;background:var(--fill);color:#fff;
  font:600 52px/1 "SB Sans Display",system-ui,sans-serif;touch-action:manipulation;
}
.keys button:active{background:rgba(255,255,255,.24)}
.keys .wide{flex-basis:200px;font-size:36px}
.keys .space{flex-basis:480px;font-size:36px}
#result .none .title{top:560px}
#result[data-none] .got,#result:not([data-none]) .none{display:none}

/* 4. таблица дня и QR на материал Сбера */
.up{top:180px}
.status{top:260px;font-size:36px;line-height:44px;color:var(--muted)}
#table{position:absolute;left:120px;right:120px;top:340px}
.qr{top:1040px;right:auto;width:400px;height:400px}
.qr svg{display:block;width:100%;height:100%}
.gift{position:absolute;left:568px;right:120px;top:1040px}             /* подпись — по верху плашки, как в гайде */
.gift p{position:static;text-align:left}
.what{font-size:52px;line-height:60px;font-weight:600}
.scan{margin-top:16px;font-size:36px;line-height:44px;color:var(--muted)}
.link{margin-top:24px;font-size:28px;line-height:34px;color:var(--muted);overflow-wrap:anywhere}