:root{
  --bg:#070d18;
  --panel:rgba(10,20,36,.82);
  --panel-b:rgba(120,180,255,.14);
  --ink:#dbe8fb;
  --dim:#7d92b3;
  --accent:#5ad1ff;
  --frost:#3f9dff;
  --ember:#ff8c1a;
  --lagoon:#12b8a0;
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
  --palrow:50px;   /* высота ряда палитры: 32 образец + 16 отступы + 2 рамка */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font)}
body{-webkit-user-select:none;user-select:none}

#stage{position:fixed;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none;
  background:radial-gradient(ellipse at 50% 40%,#0d1c33,#060a12 70%)}

/* ── панели ───────────────────────────────────────────────── */
.panel{
  background:var(--panel);border:1px solid var(--panel-b);border-radius:12px;
  padding:10px 12px;margin-bottom:10px;backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,.45)
}
.panel-h{
  font-size:10px;letter-spacing:.16em;color:var(--dim);
  margin-bottom:8px;display:flex;justify-content:space-between;align-items:center
}
.panel-h .hint{color:#ffd479;letter-spacing:0}

/* ── верх ─────────────────────────────────────────────────── */
#top{
  position:fixed;top:0;left:0;right:0;height:60px;z-index:20;
  display:flex;align-items:center;justify-content:center;padding:0 14px;
  background:linear-gradient(180deg,rgba(4,9,18,.94),rgba(4,9,18,0));
  pointer-events:none
}
#top>*{pointer-events:auto}

.countdown{text-align:center}
.cd-label{font-size:9px;letter-spacing:.18em;color:var(--dim)}
.cd-time{font-family:var(--mono);font-size:24px;font-weight:700;color:#fff;
  text-shadow:0 0 18px rgba(90,209,255,.55);letter-spacing:.04em}

button{font-family:inherit;cursor:pointer}
.ghost{
  background:var(--panel);border:1px solid var(--panel-b);color:var(--ink);
  border-radius:9px;padding:7px 12px;font-size:11px;transition:.15s
}
.ghost:hover{border-color:var(--accent);color:#fff;background:rgba(90,209,255,.12)}

/* ── боковые ──────────────────────────────────────────────── */
#left,#right{position:fixed;top:66px;bottom:104px;width:238px;z-index:15;
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:#28405f transparent}
#left{left:12px}
#right{right:12px}
#left::-webkit-scrollbar,#right::-webkit-scrollbar{width:5px}
#left::-webkit-scrollbar-thumb,#right::-webkit-scrollbar-thumb{background:#28405f;border-radius:9px}

.frow{margin-bottom:11px}
.frow:last-child{margin-bottom:0}
.frow .fh{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;margin-bottom:4px}
.frow .fname{font-weight:700;display:flex;gap:6px;align-items:center}
.frow .fname i{width:9px;height:9px;border-radius:3px;display:inline-block}
.frow .fpct{font-family:var(--mono);font-size:12px;color:#fff}
.frow .fbar{height:7px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.frow .fbar span{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.frow .fmeta{font-size:9.5px;color:var(--dim);margin-top:3px;display:flex;justify-content:space-between}

.feed{font-size:10.5px;line-height:1.6;max-height:190px;overflow:hidden}
.feed div{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:slide .3s ease}
.feed .cap{color:#ffb45a}
.feed b{font-weight:600}
@keyframes slide{from{opacity:0;transform:translateX(-8px)}}

.top{list-style:none;counter-reset:t;font-size:11px}
.top li{counter-increment:t;display:flex;gap:7px;align-items:center;padding:3px 0}
.top li::before{content:counter(t);width:16px;text-align:right;color:var(--dim);font-family:var(--mono);font-size:10px}
.top li i{width:7px;height:7px;border-radius:2px;flex:none}
.top li .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top li .v{font-family:var(--mono);color:var(--dim);font-size:10px}
.top li.me{background:rgba(90,209,255,.1);border-radius:5px;padding:3px 5px;margin:0 -5px}

.bigstats{display:flex;gap:14px}
.bigstats div{display:flex;flex-direction:column}
.bigstats b{font-family:var(--mono);font-size:17px;color:#fff}
.bigstats span{font-size:9px;color:var(--dim);letter-spacing:.08em}

/* ── низ ──────────────────────────────────────────────────── */
#bottom{
  position:fixed;bottom:0;left:0;right:0;z-index:20;height:96px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:0 10px 10px;
  background:linear-gradient(0deg,rgba(4,9,18,.95),rgba(4,9,18,0));pointer-events:none
}
#bottom>*{pointer-events:auto}

/* по верху, а не по центру: иначе чип и зум съезжают вниз из-за полосы зарядов */
#hud{display:flex;align-items:flex-start;gap:10px;max-width:100%;min-width:0}
#hud.hidden{display:none}

/* чип с балансом краски — он же вход в магазин */
#paintChip{
  display:flex;align-items:center;gap:6px;height:var(--palrow);
  font-family:var(--mono);font-size:14px;font-weight:700;
  color:#ffd479;background:var(--panel);border:1px solid rgba(255,212,121,.28);
  border-radius:11px;padding:0 14px;backdrop-filter:blur(14px);transition:.15s
}
#paintChip::before{
  content:'';width:9px;height:9px;border-radius:2px;background:#ffd479;
  box-shadow:0 0 9px rgba(255,212,121,.7)
}
#paintChip:hover{border-color:#ffd479;background:rgba(255,212,121,.12)}

#brush{display:flex;align-items:center;gap:5px;height:var(--palrow);background:var(--panel);
  border:1px solid var(--panel-b);border-radius:11px;padding:0 7px;backdrop-filter:blur(14px)}
#brush.hidden{display:none}
#brush button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-width:38px;height:36px;border-radius:8px;border:1px solid transparent;
  background:rgba(255,255,255,.05);color:var(--dim);font-family:var(--mono);
  font-size:11px;line-height:1;transition:.12s
}
#brush button i{font-style:normal;font-size:8.5px;opacity:.75}
#brush button:hover{color:#fff}
#brush button.sel{border-color:var(--accent);color:#fff;background:rgba(90,209,255,.16)}

#zoom{display:flex;align-items:center;gap:5px;height:var(--palrow);background:var(--panel);
  border:1px solid var(--panel-b);border-radius:11px;padding:0 7px;backdrop-filter:blur(14px)}
#zoom button{
  width:32px;height:32px;border-radius:8px;border:1px solid transparent;
  background:rgba(255,255,255,.05);color:var(--ink);font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.12s;
  -webkit-user-select:none;user-select:none;touch-action:none
}
#zoom button:hover{border-color:var(--accent);background:rgba(90,209,255,.14);color:#fff}
#zoom button:active{background:rgba(90,209,255,.28)}
#btnCost{font-size:14px}
#btnCost.on{border-color:#ffd479;color:#ffd479;background:rgba(255,212,121,.16)}

.paletteWrap{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;max-width:100%}

/* Купленные цвета копятся, и на узком экране ряд перестаёт влезать —
   поэтому палитра прокручивается вбок, а не растягивает всю панель. */
.palette{display:flex;gap:6px;background:var(--panel);border:1px solid var(--panel-b);
  border-radius:12px;padding:8px 10px;backdrop-filter:blur(14px);
  max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.palette::-webkit-scrollbar{display:none}
.palette b{
  width:32px;height:32px;border-radius:8px;cursor:pointer;display:block;flex:none;
  border:2px solid transparent;transition:transform .12s,border-color .12s;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)
}
.palette b:hover{transform:translateY(-4px)}
.palette b.sel{border-color:#fff;transform:translateY(-6px);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.palette b.extra{border-radius:50%}

/* полоски зарядов ужимаются, когда запас прокачан до 10+ */
.charges{display:flex;gap:5px;align-items:center;max-width:300px;width:100%;justify-content:center}
.charges i{flex:1 1 26px;max-width:26px;min-width:7px;height:5px;border-radius:99px;
  background:rgba(255,255,255,.13);position:relative;overflow:hidden}
.charges i.on{background:var(--accent);box-shadow:0 0 9px rgba(90,209,255,.6)}
.charges i.fill::after{content:'';position:absolute;inset:0;width:var(--p,0%);background:rgba(90,209,255,.55)}
.charges em{font-family:var(--mono);font-size:10px;color:var(--dim);font-style:normal;margin-left:5px;white-space:nowrap}

/* компактный режим: одна шкала вместо десятков полосок */
.charges.compact{width:230px}
.charges u{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden}
.charges u s{display:block;height:100%;background:var(--accent);border-radius:99px;
  box-shadow:0 0 9px rgba(90,209,255,.6);transition:width .25s}

/* ── подсказка под курсором ───────────────────────────────── */
.cursorInfo{
  position:fixed;z-index:30;pointer-events:none;font-family:var(--mono);font-size:10.5px;
  background:rgba(4,10,20,.92);border:1px solid var(--panel-b);border-radius:7px;
  padding:4px 8px;opacity:0;transition:opacity .12s;white-space:nowrap
}
.cursorInfo.show{opacity:1}

.toast{
  position:fixed;left:50%;bottom:112px;transform:translate(-50%,14px);z-index:40;
  background:rgba(190,40,40,.94);color:#fff;font-size:12px;padding:9px 16px;border-radius:9px;
  opacity:0;pointer-events:none;transition:.22s;box-shadow:0 8px 26px rgba(0,0,0,.5)
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:rgba(30,140,90,.94)}

/* ── модалки ──────────────────────────────────────────────── */
/* align-items:center у скроллящегося контейнера срезает верх высокой карточки,
   поэтому центруем через margin:auto */
.modal{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;
  background:rgba(3,7,14,.86);backdrop-filter:blur(8px);padding:18px;overflow:auto}
.modal-card{margin:auto}
.modal.hidden{display:none}
.countdown.hidden{display:none}
.modal-card{
  width:min(520px,100%);background:linear-gradient(160deg,#0e1b30,#0a1120);
  border:1px solid var(--panel-b);border-radius:18px;padding:26px;
  box-shadow:0 30px 90px rgba(0,0,0,.7)
}
#joinModal .modal-card{width:min(420px,100%);padding:22px}
.modal-card h1{font-size:22px;letter-spacing:.14em;margin-bottom:22px;text-align:center}
.bigInput{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--panel-b);
  border-radius:11px;padding:13px 15px;color:#fff;font-size:15px;font-family:inherit;
  outline:none;text-align:center;letter-spacing:.04em;margin-bottom:10px
}
.bigInput:focus{border-color:var(--accent)}
.bigInput::placeholder{color:#54688a;letter-spacing:.16em;font-size:12px;text-transform:uppercase}
#pinInput{letter-spacing:.5em;font-family:var(--mono)}
.pinHint{font-size:10px;color:var(--dim);text-align:center;margin:-2px 0 14px}
.factionPick.hidden{display:none}
.modal-card h2{font-size:17px;letter-spacing:.1em;margin-bottom:14px}
.lead{font-size:12.5px;color:var(--dim);line-height:1.65;margin-bottom:18px;text-align:center}

.field{display:block;margin-bottom:10px}
.field>span{font-size:10px;letter-spacing:.16em;color:var(--dim);display:block;margin-bottom:6px}
.field input{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--panel-b);
  border-radius:10px;padding:11px 13px;color:#fff;font-size:14px;font-family:inherit;outline:none
}
.field input:focus{border-color:var(--accent)}

.factionPick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.fcard{
  border:1px solid var(--panel-b);border-radius:12px;padding:14px 9px;text-align:center;
  cursor:pointer;transition:.15s;background:rgba(255,255,255,.03)
}
.fcard:hover{background:rgba(255,255,255,.07)}
.fcard.sel{border-color:currentColor;background:rgba(255,255,255,.09);
  box-shadow:0 0 0 1px currentColor,0 8px 24px rgba(0,0,0,.4)}
.fcard .fn{font-weight:800;font-size:13px;letter-spacing:.06em}
.fcard .swatches{display:flex;gap:2px;justify-content:center;margin-top:9px}
.fcard .swatches i{width:9px;height:9px;border-radius:2px}
.fcard .fpop{font-size:9px;color:var(--dim);margin-top:6px}

.primary{
  width:100%;background:linear-gradient(90deg,#2f7de0,#5ad1ff);color:#04101f;border:0;
  border-radius:11px;padding:13px;font-weight:800;letter-spacing:.12em;font-size:13px;
  transition:.15s
}
.primary:hover{filter:brightness(1.12)}
.err{color:#ff7b7b;font-size:11.5px;min-height:16px;margin-bottom:6px;text-align:center}
.fineprint{font-size:10px;color:var(--dim);text-align:center;margin-top:11px;line-height:1.5}

.modal-card .primary{margin-top:16px}

.endrow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
.endrow .win{color:#ffd479;font-weight:700}

/* ── магазин ──────────────────────────────────────────────── */
#shopModal .modal-card{width:min(440px,100%);padding:18px}
.shopTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.shopBal{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:19px;
  font-weight:700;color:#ffd479}
.shopBal i,.colorsHead .cost i{width:9px;height:9px;border-radius:2px;background:#ffd479;
  box-shadow:0 0 8px rgba(255,212,121,.6);flex:none}
.x{background:none;border:0;color:var(--dim);font-size:24px;line-height:1;padding:0 4px}
.x:hover{color:#fff}

.ups .row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ups .rl{min-width:0}   /* иначе длинная подпись не даёт строке сжаться */
.ups .rn{font-size:13px;font-weight:600}
.ups .lvl{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:5px}
.ups .ra{font-size:10px;color:var(--dim);margin-top:2px}
.ups .delta{display:flex;align-items:baseline;gap:6px;margin-top:5px;font-family:var(--mono);font-size:12px}
.ups .delta span{color:var(--dim)}
.ups .delta em{color:var(--dim);font-style:normal;font-size:11px}
.ups .delta b{color:#5ad1ff}
.ups .row.maxed{opacity:.45}

.buy{
  font-family:var(--mono);font-size:12px;font-weight:700;color:#04101f;
  background:linear-gradient(90deg,#f0b93b,#ffd479);border:0;border-radius:8px;
  padding:8px 13px;min-width:74px;transition:.15s;flex:none
}
.buy:hover:not(:disabled){filter:brightness(1.12)}
.buy.no,.buy:disabled{background:rgba(255,255,255,.07);color:var(--dim);cursor:not-allowed}

.colorsHead{display:flex;justify-content:space-between;align-items:center;margin:16px 0 9px;
  font-size:10px;letter-spacing:.16em;color:var(--dim)}
.colorsHead .cost{display:flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:12px;color:#ffd479;letter-spacing:0}

.colors{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.swatch{
  aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);transition:.12s;padding:0
}
.swatch:hover:not(:disabled){transform:scale(1.14);border-color:#fff}
.swatch:disabled{cursor:not-allowed;opacity:.3}
.swatch.own{opacity:1;border-color:rgba(255,255,255,.5);cursor:default}
.swatch.own::after{content:'';display:block;width:100%;height:100%;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}

.customRow{display:flex;gap:9px;align-items:center;margin-top:12px}
#customPick{
  width:46px;height:36px;padding:0;border:1px solid var(--panel-b);border-radius:9px;
  background:none;cursor:pointer;flex:none
}
#customPick::-webkit-color-swatch-wrapper{padding:3px}
#customPick::-webkit-color-swatch{border:0;border-radius:6px}
#customBuy{flex:1;padding:10px;font-family:inherit;font-size:12px;letter-spacing:.04em}
#customBuy b{font-family:var(--mono)}

/* ── адаптив ──────────────────────────────────────────────── */
@media (max-width:1100px){
  #right{display:none}
}
@media (max-width:820px){
  :root{--palrow:45px}
  #left{display:none}
  .cd-time{font-size:18px}
  .palette b{width:27px;height:27px}
  #bottom{height:88px}
  #hud{gap:6px}
  #paintChip{padding:0 9px;font-size:12px;gap:5px}
  #zoom{gap:3px;padding:0 5px}
  #zoom button{width:27px;height:27px}
  #brush{padding:0 5px;gap:3px}
  #brush button{min-width:32px}
  .factionPick{grid-template-columns:1fr}
  .colors{grid-template-columns:repeat(6,1fr)}
}