* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: transparent; font-family: 'Segoe UI', system-ui, sans-serif; color: #fff; overflow: hidden; }
.hidden { display: none !important; }
.wrap { position: absolute; left: 0; top: 0; display: inline-flex; flex-direction: column; gap: 14px; }

.battle { width: 720px; border-radius: 16px; overflow: hidden;
  background: rgba(18,14,38,.92); border: 1px solid rgba(160,120,255,.3);
  box-shadow: 0 10px 40px rgba(0,0,0,.5); }

.hd { display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: linear-gradient(90deg,#3a2560 0%, #7a3a6e 100%); }
.hd .pb { width: 20px; height: 20px; border-radius: 50%; position: relative; flex: none;
  background: linear-gradient(#ee1c26 0 50%, #f4f4f4 50% 100%); border: 2px solid #141414; }
.hd .pb::after { content: ''; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: #f4f4f4; border: 2px solid #141414; }
.hd .bname { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd .loot { margin-left: auto; flex: none; display: flex; align-items: baseline; gap: 7px;
  background: rgba(30,60,40,.55); border: 1px solid rgba(99,229,142,.4); border-radius: 999px; padding: 4px 13px; }
.hd .loot-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8fdcab; font-weight: 700; }
.hd .loot-val { font-size: 20px; font-weight: 900; color: #63e58e; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 16px; }
.col { background: rgba(255,255,255,.04); border: 1px solid rgba(160,120,255,.18); border-radius: 12px; padding: 12px 14px; min-height: 172px; }
.col.hit { border-color: rgba(255,207,74,.4); }
.lbl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: #9b8fd0; margin-bottom: 10px; display: flex; align-items: center; }
.col.hit .lbl { color: #ffcf4a; }
.lbl .prog { margin-left: auto; color: #9b7fe0; letter-spacing: .05em; }

/* ĽAVO – najlepší hit */
.empty { color: #7c82a8; font-size: 15px; padding: 28px 0; text-align: center; }
.hit-body { display: flex; gap: 12px; align-items: center; }
.hit-img { width: 96px; border-radius: 10px; filter: drop-shadow(0 0 16px rgba(255,207,74,.45)); }
.hit-info { min-width: 0; }
.crown { font-size: 18px; font-weight: 800; color: #ffe9a8; margin-bottom: 5px; }
.hit-card { font-size: 17px; font-weight: 700; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit-val { font-size: 40px; font-weight: 900; color: #63e58e; line-height: 1; text-shadow: 0 0 22px rgba(99,229,142,.5); }

/* PRAVO – práve ťahá */
.cur { background: linear-gradient(90deg, rgba(255,207,74,.16), rgba(255,207,74,.02));
  border: 1px solid rgba(255,207,74,.5); border-radius: 12px; padding: 14px 16px; }
.cur-name { font-size: 32px; font-weight: 900; color: #fff; line-height: 1.1; }
.cur-spot { font-size: 15px; font-weight: 700; color: #ffcf4a; margin-top: 4px; }
.cur-wait { font-size: 19px; color: #b9a8ff; }

/* ===== LIST MODE — zoznam battlov pred spustením ===== */
.battle.listmode { width: 420px; }
.hd .cnt { margin-left: auto; flex: none; font-size: 12px; font-weight: 700; color: #e6c8ff; background: rgba(0,0,0,.25); padding: 3px 11px; border-radius: 20px; }
.list { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.brow { display: flex; flex-direction: column; gap: 7px; padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(160,120,255,.16); }
.brow .top { display: flex; align-items: center; gap: 10px; }
.brow .bdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #63e58e; box-shadow: 0 0 8px rgba(99,229,142,.7); }
.brow .bn { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; color: #efe9ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .bs { flex: none; font-size: 22px; font-weight: 900; color: #ffcf4a; display: flex; align-items: baseline; gap: 2px; }
.brow .bs i { font-size: 14px; font-style: normal; font-weight: 800; color: #9b8fd0; }
.brow .bs small { font-size: 11px; font-weight: 700; color: #9b8fd0; letter-spacing: .05em; text-transform: uppercase; margin-left: 2px; }
.brow .brem { flex: none; font-size: 12px; font-weight: 800; color: #8fdcab; text-transform: uppercase; letter-spacing: .04em; }
.brow .bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.09); overflow: hidden; }
.brow .bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg,#ffcf4a,#ff9d3c); }

.idle { text-align: center; color: #555a7a; font-size: 15px; padding: 20px; font-family: system-ui, sans-serif; }

/* Víťaz vo finále */
.lbl.win { color: #ffcf4a; }
.cur.win { background: linear-gradient(90deg, rgba(255,207,74,.22), rgba(255,207,74,.04)); border-color: rgba(255,207,74,.75); }
.cur.win .cur-name { color: #fff; }
.cur.win .cur-spot { color: #63e58e; font-size: 17px; font-weight: 800; }
.battle.isw { border-color: rgba(255,207,74,.6); box-shadow: 0 0 40px rgba(255,207,74,.25), 0 10px 40px rgba(0,0,0,.5); }