@font-face {
    font-family: 'arcadeclassicregular';
    src: url('../fonts/arcadeclassic-webfont.woff2') format('woff2'),
         url('../fonts/arcadeclassic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body { margin:0; color:#fff; overflow:hidden; 
background: transparent;font-family: 'arcadeclassicregular';
}

.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #181221 0%, #291646 50%, #020108 100%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

#canvas { width:100%; height:100vh; background:transparent; display:block; position:absolute; left:0px; }

#info { 
    text-align:center; 
    color:#fff; 
    padding:10px; 
    position:absolute; 
    top:0; 
    width:100%; 
    z-index:26;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#info .left {
    display: flex;
    justify-content: center;
    align-items: center;
}
#info .left a {
  color:#fff;
  margin-left: 15px;
}
#holders-list { 
    position:absolute; 
    width:200px; 
    height:340px; 
    color:#fff; 
    background: transparent;
    padding: 0;
    z-index:1000; 
    bottom: 15px;
    left: 15px;
    cursor: move;
    background-image: url("../images/player-box.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#holders-list ul { 
    position: absolute;
    list-style: none;
    padding: 0px 0px 0px;
    margin: 0px;
    height: 69%;
    width: 100%;
    bottom: 30px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#holders-list li { margin-bottom:5px; }
#holders-list a { color:#fff; text-decoration:none; }
#holders-list a:hover { text-decoration:underline; }


#timer {
    color:#fff; 
    z-index:10; 
    font-size:24px;
    font-weight: bold;
    width: 150px;
    height: 52px;
    background-image: url("../images/smaller-box.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#round-status { 
    position: relative;
    color:#fff; 
    z-index:10; 
    font-size:24px;
    font-weight: bold;
    width: 150px;
    height: 52px;
    background-image: url("../images/smaller-box.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#token-stats { 
    position: relative;
    color:#fff; 
    z-index:10; 
    font-size:24px;
    font-weight: bold;
    width: 170px;
    height: 52px;
    background-image: url("../images/small-box.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#battle-modal { 
    background-image: url("../images/winners-box.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%);
    color:#fff;
    padding:0px;
    z-index:15; 
    display:none; 
    width:200px; 
    height:340px; 
    text-align:center; }
#battle-modal ul { 
    list-style:none; 
    padding:0; 
    max-height:260px; 
    margin-top: 100px;
    overflow-y:auto; }
#battle-modal li { margin-bottom:10px; }
#battle-modal a { color:#fff; text-decoration:none; }
#battle-modal a:hover { text-decoration:underline; }
#modal-timer { color:#fff; font-size:24px; margin-top:10px; }


#rules { 
    position:absolute; 
    width:350px; 
    height:560px; 
    color:#fff; 
    background: transparent;
    padding: 0;
    z-index:1000; 
    top: 60px;
    right: 15px;
    cursor: move;
    background-image: url("../images/rules-box.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 35px 25px 5px;
  }
#rules p {
  width: 100%;
  margin: 0 0 15px;
}
/* slim scrollbars */
* { --sb-track-color:#1f1f1f; --sb-thumb-color:#000; --sb-size:3px; }
*::-webkit-scrollbar { width:var(--sb-size) }
*::-webkit-scrollbar-track { background:var(--sb-track-color); border-radius:3px; }
*::-webkit-scrollbar-thumb { background:var(--sb-thumb-color); border-radius:3px; }
@supports not selector(::-webkit-scrollbar) { body { scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); } }


#kill-feed { display: none; position:absolute; right:10px; top:50px; max-width:420px; max-height:200px; overflow-y:auto; background:rgba(0,0,0,0.6); padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.35; z-index:12; }
#kill-feed .row { margin-bottom:4px }
.me-highlight { background: rgba(255, 230, 0, 0.25); border-radius: 6px; padding: 0 4px; }

#phantom-btn {
    font-family: 'arcadeclassicregular';
    position: relative;
    background-image: url("../images/small-box.png") !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: transparent;
    border: none;
    outline: none;
    height: 60px;
    width: 250px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
}

#tip{
      position:fixed; pointer-events:none; z-index:20;
      background:#4d1a61df; color:#fff;
      padding:6px 8px; border-radius:8px; font:12px/1.2 Arial, sans-serif;
      box-shadow:0 2px 8px rgba(0,0,0,0.35); display:none; white-space:nowrap;
      border:1px solid rgba(255,255,255,0.12);
    }

#hud-wrap {
  position: absolute;            /* aby neovlivnil tvoje #info (které je absolute) */
  right: 15px;
  bottom: 15px;
  display: flex;
  pointer-events: none;        /* klikatelná budou jen vnitřní panely */
}

/* Společné UI krabičky (epoch/payouts) */
.hud-card {

}

/* EPOCH panel (umístění vpravo nahoře pod tvojí horní lištou) */
#epoch {
    position:absolute; 
    width:200px; 
    height:340px; 
    color:#fff; 
    background: transparent;
    padding: 0;
    z-index:1000; 
    top: 65px;
    left: 15px;
    cursor: move;
    background-image: url("../images/info-box.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#epoch .row { display: flex; gap: 12px; flex-wrap: wrap; flex-direction: column; text-align: center;margin-bottom: 12px;}
#epoch .row div { white-space: nowrap; opacity: .95; }

/* PAYOUTS feed (pod epoch) */
#payouts {
  position:absolute; 
    width:200px; 
    height:340px; 
    color:#fff; 
    background: transparent;
    padding: 0;
    z-index:1000; 
    bottom: 15px;
    right: 15px;
    cursor: move;
    background-image: url("../images/payouts-box.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#payouts h4 { margin: 0 0 6px 0; font-weight: 700; letter-spacing: .3px; }
#payouts-list { max-height: 180px; overflow: auto; display: grid; gap: 6px; }
.payrow {
  
  border-radius: 8px; padding: 6px 8px; font-size: 13px;
  display: flex; justify-content: center;flex-direction: column; gap: 10px; align-items: center;
}
.payrow .who a { color: #fff !important; }
.payrow .amt { font-weight: 700; }

/* Fázové „pilulky“ – můžeš je použít v horní liště, nic nepřepisují */
.pill {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.08); font-size: 12px; margin-left: 6px;
}
.phase-pill   { background: rgba(0,120,255,0.25); }
.phase-pregame{ background: rgba(255,215,0,0.25); }
.phase-modal  { background: rgba(255,80,0,0.25); }

/* === PREGAME FULLSCREEN OVERLAY (oddělený odpočet přes celou obrazovku) === */
#pregame-overlay {
  position: fixed; inset: 0; z-index: 25;
  display: none;          
  align-items: center; 
  justify-content: center;
}
#pregame-overlay .inner {
  text-align: center; color: #fff;
  padding: 24px 28px;
  background-image: url("../images/starting-box.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'arcadeclassicregular';
      width: 500px;
    height: 250px;
}
#pregame-overlay .title {
  font-size: 28px; margin-bottom: 12px; 
}
#pregame-timer {
  font-size: 102px; line-height: 1; font-weight: bold;
}

.toggled-buttons {
  display: flex;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}
#toggle-epoch, #toggle-payouts, #toggle-holders, #toggle-rules {
    color:#fff; 
    z-index:10; 
    font-size:18px;
    font-weight: bold;
    border:none;
    width: 130px;
    height: 42px;
    background-image: url("../images/smaller-box.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'arcadeclassicregular';
    margin: 0 4px;
    background-color: transparent;
}