/* SW Comms demo. Staticki HTML/CSS/JS, bez backenda. */

/* Fontovi su lokalni (Google, OFL), ne vuku se s interneta. Chakra Petch je glavni,
   Doto je dot-matrix i koristi se za male letterspaced oznake i podnaslove, kao na posterima. */
@font-face { font-family: 'Chakra Petch'; src: url('fonts/web/chakra-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('fonts/web/chakra-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('fonts/web/chakra-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('fonts/web/chakra-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Doto'; src: url('fonts/web/doto-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Doto'; src: url('fonts/web/doto-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Doto'; src: url('fonts/web/doto-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Doto'; src: url('fonts/web/doto-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --bg: #06070a;
  --panel: #0e1015;
  --panel2: #161a22;
  --panel3: #1d222c;
  --line: #252b36;
  --fg: #f3f6fa;
  --muted: #8a93a5;
  --dim: #5a6373;
  --red: #ff2f22;
  --blue: #2f8fff;
  --amber: #ffb020;
  --green: #2fd07f;
  --accent: #ff2f22;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sans: 'Chakra Petch', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --dot: 'Doto', 'Chakra Petch', ui-monospace, monospace;
}


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; }
button { font-family: inherit; }
.hidden { display: none !important; }

/* ---------- gornja traka ---------- */

.top {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky; top: 0; z-index: 30;
}
.logo { font-weight: 900; letter-spacing: 2px; font-size: 15px; text-transform: uppercase; }
.logo span { color: var(--accent); }
.top .spacer { flex: 1; }
.pill {
  border: 1px solid var(--line); background: var(--panel2);
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.pill.live { color: var(--bg); background: var(--green); border-color: var(--green); font-weight: 800; }
.pill.role { color: var(--fg); border-color: var(--dim); }
.navlink { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.navlink:hover { color: var(--fg); border-color: var(--accent); }

/* ---------- layout ---------- */

.wrap { max-width: 1500px; margin: 0 auto; padding: 22px 20px 60px; }
.cols { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 18px; align-items: start; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; margin-bottom: 16px;
}
.card h2 {
  margin: 0 0 14px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
  font-weight: 700;
}
.label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }

/* ---------- gumbi ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; font-size: 15px; font-weight: 700; letter-spacing: .5px;
  cursor: pointer; transition: transform .05s ease, background .12s ease;
}
.btn:hover { background: var(--panel3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 9px 12px; font-size: 13px; border-radius: 10px; }
.btn.wide { width: 100%; }
.btn.danger { border-color: #4a2320; color: #ffb3ac; }
.btn:disabled { opacity: .35; cursor: default; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.btnrow.tight { gap: 6px; }

input[type=text], textarea, select {
  width: 100%; background: var(--panel2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-size: 15px; font-family: inherit;
}
input[type=text]:focus, textarea:focus { outline: none; border-color: var(--dim); }

/* ---------- veliki timer (booth) ---------- */

.timer-booth {
  font-family: var(--mono); font-weight: 900;
  font-size: clamp(64px, 11vw, 132px); line-height: .9;
  letter-spacing: -2px;
}
.timer-booth.red { color: var(--red); }
.timer-booth.amber { color: var(--amber); }
.timer-booth.dim { color: var(--dim); }
.phase-booth { font-size: 22px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.phase-booth.red { color: var(--red); }
.phase-booth.amber { color: var(--amber); }
.phase-booth.dim { color: var(--muted); }

.nowfight { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.nowfight .rn { font-size: 30px; font-weight: 900; }
.nowfight .vs { color: var(--dim); font-size: 18px; font-weight: 700; }
.tag {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted);
}
.tag.main { color: var(--amber); border-color: #4a3a12; }

/* ---------- raspored ---------- */

.fightlist { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
.fightrow {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel2); cursor: pointer;
}
.fightrow:hover { border-color: var(--dim); }
.fightrow .num { font-family: var(--mono); font-size: 15px; color: var(--dim); }
.fightrow .who { font-weight: 700; font-size: 15px; }
.fightrow .sub { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin-top: 2px; }
.fightrow.live { border-color: var(--red); background: #1b0f0e; }
.fightrow.live .num, .fightrow.live .sub { color: var(--red); }
.fightrow.done { opacity: .45; }
.fightrow.done .who { text-decoration: line-through; }

/* ---------- feed / chat ---------- */

.feed { display: flex; flex-direction: column; gap: 8px; height: 300px; overflow: auto; padding-right: 4px; }
.msg { border-left: 2px solid var(--line); padding: 4px 0 4px 10px; }
.msg .meta { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
.msg .txt { font-size: 15px; line-height: 1.35; }
.msg.vj { border-color: var(--blue); }
.msg.vj .meta { color: var(--blue); }
.msg.dj { border-color: var(--accent); }
.msg.dj .meta { color: var(--accent); }
.msg.kom { border-color: var(--amber); }
.msg.kom .meta { color: var(--amber); }
.msg.sys { border-color: var(--green); }
.msg.sys .meta { color: var(--green); }
.msg .txt strong { color: #fff; }

/* ---------- SFX ---------- */

.sfxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.sfx {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 11px;
  padding: 13px 10px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--fg); cursor: pointer; text-align: center;
}
.sfx:hover { background: var(--panel3); border-color: var(--dim); }
.sfx:active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sfx.hot { border-color: var(--accent); color: #ffb3ac; }
.lastsfx { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* ---------- komentatorski ekran ---------- */

.cview {
  display: flex; flex-direction: column; min-height: 100vh;
  background: #000; color: #fff; user-select: none;
}
.chead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 18px; border-bottom: 2px solid #17181c;
  font-size: clamp(12px, 1.6vw, 18px); letter-spacing: 3px; text-transform: uppercase; color: #9aa0ac;
}
.chead b { color: #fff; }
.cbar { display: flex; align-items: stretch; gap: 2px; }
.cbar .seg { padding: 6px 14px; background: #121317; }
.cbar .seg.on { background: var(--red); color: #fff; font-weight: 800; }

.ctag { font-size: clamp(11px, 1.4vw, 16px); letter-spacing: 3px; text-transform: uppercase; color: #8c93a1; }
.cname { font-size: clamp(28px, 6.4vw, 84px); font-weight: 900; line-height: 1; letter-spacing: -1px; }

.cphase { font-size: clamp(20px, 3.4vw, 44px); font-weight: 900; letter-spacing: 4px; text-transform: uppercase; }
.ctimer {
  font-family: var(--mono); font-weight: 900;
  font-size: clamp(72px, 17vw, 260px); line-height: .88; letter-spacing: -4px;
}
.csub { font-size: clamp(12px, 1.5vw, 20px); letter-spacing: 2px; text-transform: uppercase; color: #8c93a1; }

.cnext {
  border-top: 2px solid #17181c; padding: 12px 18px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  font-size: clamp(14px, 1.9vw, 26px); font-weight: 700;
}
.cnext .k { font-size: clamp(11px, 1.2vw, 15px); letter-spacing: 3px; text-transform: uppercase; color: #8c93a1; }

.announce {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--amber); color: #14100a; font-weight: 900;
  font-size: clamp(20px, 3.6vw, 54px); line-height: 1.1; letter-spacing: 1px;
  padding: 12px 18px; text-transform: uppercase;
}
.sfxflash {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--red); color: #fff; font-weight: 900; letter-spacing: 4px;
  text-transform: uppercase; padding: 10px 18px; font-size: clamp(14px, 2vw, 28px);
  display: flex; justify-content: space-between;
}

/* chat drawer za komentatore */
.cchat-btn {
  position: fixed; right: 14px; bottom: 14px; z-index: 45;
  background: #17181c; color: #fff; border: 1px solid #2a2d34;
  border-radius: 999px; padding: 12px 18px; font-size: 13px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
}
.cchat {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(430px, 92vw); z-index: 46;
  background: #0b0c10; border-left: 1px solid #23262d; display: flex; flex-direction: column;
  padding: 14px; gap: 10px;
}
.cchat .head { display: flex; align-items: center; justify-content: space-between; }
.cchat .feed { height: auto; flex: 1; }

/* ---------- hub ---------- */

.hubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.hubcard {
  display: block; text-decoration: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px; transition: border-color .12s ease;
}
.hubcard:hover { border-color: var(--accent); }
.hubcard h3 { margin: 0 0 6px; font-size: 18px; }
.hubcard p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.hubcard .who { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); margin-top: 10px; }
.note { color: var(--muted); font-size: 14px; line-height: 1.6; }
.note code { font-family: var(--mono); background: var(--panel2); padding: 2px 6px; border-radius: 5px; font-size: 13px; }
.warn {
  border: 1px solid #4a3a12; background: #1a1508; color: #ffe6ad;
  border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.55;
}

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
}

/* ---------- varijanta A: scoreboard ---------- */

.chead-mid { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.chead .tag { font-size: clamp(11px, 1.3vw, 18px); padding: 4px 10px; }
.cbar { background: #0b0c10; border-bottom: 2px solid #17181c; }
.csplit {
  flex: 1; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: clamp(12px, 2.5vw, 48px);
  padding: clamp(16px, 4vh, 48px) clamp(14px, 2.5vw, 36px);
}
.ccorner { min-width: 0; }
.ccorner.red { text-align: left; border-left: 10px solid var(--red); padding-left: clamp(10px, 1.5vw, 22px); }
.ccorner.blue { text-align: right; border-right: 10px solid var(--blue); padding-right: clamp(10px, 1.5vw, 22px); }
.cmid { text-align: center; }
.ctimer.over { animation: swblink .8s steps(2, start) infinite; }
@keyframes swblink { 50% { opacity: .3; } }

@media (max-aspect-ratio: 1/1) {
  .csplit { grid-template-columns: 1fr; text-align: center; gap: clamp(8px, 2vh, 22px); }
  .cmid { order: -1; }
  .ccorner.red { text-align: center; border-left: 0; border-top: 8px solid var(--red); padding: 8px 0 0; }
  .ccorner.blue { text-align: center; border-right: 0; border-bottom: 8px solid var(--blue); padding: 0 0 8px; }
  .ctimer { font-size: clamp(80px, 30vw, 200px); }
}

/* ---------- varijanta B: rundown ---------- */

.bhead {
  position: sticky; top: 0; z-index: 20; background: #000;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(10px, 2vh, 24px) 18px; border-bottom: 2px solid #17181c;
}
.bhead-left { min-width: 0; }
.blist { display: flex; flex-direction: column; }
.brow {
  display: grid; grid-template-columns: clamp(44px, 6vw, 96px) minmax(0,1fr) auto;
  gap: clamp(10px, 2vw, 28px); align-items: center;
  padding: clamp(10px, 1.7vh, 22px) 18px; border-bottom: 1px solid #131519; opacity: .58;
}
.brow .bn { font-family: var(--mono); font-size: clamp(18px, 2.6vw, 38px); color: #6b7280; }
.brow .bnames { font-size: clamp(20px, 3.4vw, 54px); font-weight: 900; line-height: 1.04; }
.brow .bst {
  font-size: clamp(11px, 1.25vw, 18px); letter-spacing: 3px; text-transform: uppercase;
  color: #8c93a1; white-space: nowrap;
}
.brow.live { opacity: 1; background: #170807; border-left: 10px solid var(--red); }
.brow.live .bn, .brow.live .bst { color: var(--red); }
.brow.live .bst { font-weight: 800; }
.brow.done { opacity: .25; }
.brow.done .bnames { text-decoration: line-through; }

/* ---------- booth ---------- */

.timerzone { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 10px 0 20px; }
.big-action { font-size: 19px; padding: 20px; letter-spacing: 1px; text-transform: uppercase; }

/* ---------- varijanta C: scoreboard plus poruke u ekranu ---------- */

.cmsgs {
  border-top: 2px solid #17181c; background: #0a0b0e;
  padding: 10px 18px 12px; display: flex; flex-direction: column; gap: 7px;
}
.cmsgshead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cmsg {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(8px, 1.2vw, 20px);
  align-items: baseline; border-left: 6px solid #2a2d34; padding: 3px 0 3px 12px;
}
.cmsg .cmeta {
  font-size: clamp(10px, 1.05vw, 15px); letter-spacing: 2px; text-transform: uppercase;
  color: #8c93a1; white-space: nowrap;
}
.cmsg .ctext { font-size: clamp(15px, 1.85vw, 28px); font-weight: 700; line-height: 1.15; }
.cmsg.vj { border-color: var(--blue); }
.cmsg.vj .cmeta { color: var(--blue); }
.cmsg.dj { border-color: var(--red); }
.cmsg.dj .cmeta { color: var(--red); }
.cmsg.kom { border-color: var(--amber); }
.cmsg.kom .cmeta { color: var(--amber); }
.cmsg.sys { border-color: var(--green); }
.cmsg.sys .cmeta { color: var(--green); }
.cmsg.fresh { background: #14161b; }
.cmsg.empty .ctext { color: #6b7280; font-weight: 500; }
.cmsgsend { display: flex; gap: 8px; margin-top: 4px; }
.cmsgsend input {
  background: #121317; border: 1px solid #262a31; color: #fff; border-radius: 10px;
  padding: 10px 12px; font-size: clamp(14px, 1.5vw, 20px); font-family: inherit;
}
.cmsgsend button {
  border: 0; border-radius: 10px; background: var(--red); color: #fff; cursor: pointer;
  font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  padding: 0 18px; font-size: clamp(12px, 1.2vw, 16px);
}

/* ---------- mobitel i uski ekrani ---------- */

@media (max-width: 560px) {
  .chead { padding: 8px 12px; letter-spacing: 2px; }
  .cnext { padding: 10px 12px 72px; }
  .cchat-btn { padding: 10px 14px; font-size: 11px; letter-spacing: 1px; }
  .cname { font-size: clamp(26px, 9vw, 44px); }
  .brow { grid-template-columns: 40px minmax(0,1fr); }
  .brow .bst { display: none; }
  .brow .bnames { font-size: clamp(20px, 6.4vw, 34px); }
  .bhead { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cmsg { grid-template-columns: 1fr; gap: 2px; }
  .cmsg .ctext { font-size: 16px; }
  .cmsgs { padding: 8px 12px 10px; }
}
@media (max-aspect-ratio: 1/1) {
  .cmsg .ctext { font-size: clamp(15px, 3.4vw, 26px); }
  .cmsg .cmeta { font-size: clamp(10px, 1.8vw, 14px); }
}
body.cview { padding-bottom: env(safe-area-inset-bottom); }

/* ================= v2 ================= */

/* reverse flash: dva fleša, bijela pozadina i crni tekst.
   html mora imati svoju pozadinu, inace se body pozadina propagira na platno
   i filter na bodyju ne bi okrenuo podlogu. */
html { background: var(--bg); }
body.reverse { filter: invert(1); }
.blink { animation: swblink .7s steps(2, start) infinite; }
.ctimer.precount { animation: swblink .6s steps(2, start) infinite; }

/* cue traka u dnu, kratko pokaze koji je SFX cue poslan */
.cuebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--red); color: #fff; font-weight: 900; letter-spacing: 4px;
  text-transform: uppercase; padding: 10px 18px; font-size: clamp(14px, 2vw, 26px);
  display: flex; justify-content: space-between;
}

/* gumbi s trajanjem timera */
.btn.dur { min-width: 96px; padding: 16px 10px; font-family: var(--mono); font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.btn.dur .durT { pointer-events: none; }

/* raspored s ruckama, samo VJ booth */
.addform { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 14px; }
.schedrow {
  display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center;
  padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel2);
}
.schedrow:hover { border-color: var(--dim); }
.schedrow.live { border-color: var(--red); background: #1b0f0e; }
.schedrow.done { opacity: .45; }
.schedrow.done .wname { text-decoration: line-through; }
.schedrow .num { font-family: var(--mono); color: var(--dim); font-size: 14px; }
.schedrow .wname { font-weight: 700; font-size: 15px; }
.schedrow .sub { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.rowbtns { display: flex; gap: 5px; }
.mini {
  background: var(--panel3); color: var(--fg); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.mini:hover { border-color: var(--dim); }
.mini.wide { padding: 7px 11px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.mini.del:hover { border-color: var(--red); color: #ffb3ac; }

/* cue panel na DJ boothu */
.cuecard.live { border-color: var(--red); box-shadow: 0 0 0 2px rgba(255, 47, 34, .22); }
.cuelabel {
  font-size: clamp(28px, 3.4vw, 52px); font-weight: 900; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dim); line-height: 1.05;
}
.cuelabel.live { color: var(--red); animation: swblink .7s steps(2, start) infinite; }
.cuelabel.done { color: var(--muted); }
.cuerow {
  display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted);
  padding: 5px 0; border-bottom: 1px solid #1a1e26;
}
.cuerow span:first-child { color: var(--fg); font-weight: 700; letter-spacing: .5px; }
.annshow { font-size: clamp(18px, 1.8vw, 28px); font-weight: 800; color: var(--amber); text-transform: uppercase; }

/* najava preko cijelog ekrana komentatora, citljivo s udaljenog ekrana */
.announce-fs {
  position: fixed; inset: 0; z-index: 60;
  background: var(--amber); color: #14100a;
  display: flex; align-items: center; justify-content: center;
  text-align: center; text-transform: uppercase; font-weight: 900;
  letter-spacing: 2px; line-height: 1.04;
  font-size: clamp(38px, 8.5vw, 150px);
  padding: 4vh 4vw;
}

/* brojevi borbi na komentatorskom ekranu */
.cbar .seg.done { color: #5f6878; }
.brow.done .bst { color: var(--dim); }

/* sekvenca cijele borbe: odabir, koraci, play */
.seqbox { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.btn.seq { flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; text-align: left; }
.btn.seq .seqname { font-size: 15px; letter-spacing: 1px; }
.btn.seq .seqnote { font-size: 11px; letter-spacing: .5px; text-transform: none; opacity: .75; font-weight: 500; }
.seqsteps { display: flex; flex-wrap: wrap; gap: 8px; }
.step {
  display: flex; flex-direction: column; gap: 2px; min-width: 96px;
  border: 1px solid var(--line); background: var(--panel2); border-radius: 10px;
  padding: 9px 12px; opacity: .65;
}
.step .sname { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; }
.step .stime { font-family: var(--mono); font-size: 15px; color: var(--muted); }
.step.on { opacity: 1; border-color: var(--red); background: #1b0f0e; }
.step.on .sname { color: var(--red); }
.step.done { opacity: .4; }
.step.done .sname { text-decoration: line-through; }

@media (max-width: 700px) {
  .addform { grid-template-columns: 1fr; }
  .schedrow { grid-template-columns: 30px minmax(0,1fr); }
  .schedrow .rowbtns { grid-column: 2; }
}

/* ================= PHP aplikacija ================= */

/* traka koja upozorava da je demo mode ukljucen */
.demobar {
  background: var(--amber); color: #14100a; font-weight: 800;
  letter-spacing: 1px; padding: 8px 16px; font-size: 13px;
}
.demobar code, .note code, .sub code {
  font-family: var(--mono); background: rgba(0, 0, 0, .14); padding: 1px 5px; border-radius: 4px;
}
.note code { background: var(--panel2); }

/* prijava */
.logincard {
  max-width: 470px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; margin: 5vh auto 18px;
}
.logincard h2 { margin: 0 0 8px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.logincard input[type=password] {
  width: 100%; background: var(--panel2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; font-size: 18px; font-family: inherit;
}
.sub { color: var(--dim); font-size: 12px; }
a.btn { text-decoration: none; }

/* ================= generalni mod ================= */
/* Bez borbi: na ekranima ostaje samo veliki tekst iz polja i timer. */

body.general .cbar,
body.general .ccorner,
body.general .cnext,
body.general .blist,
body.general #brounds,
body.general .nowfight { display: none; }

body.general .csplit { grid-template-columns: minmax(0, 1fr); }
body.general .cmid { grid-column: 1; }
body.general .csplit .cphase {
  font-size: clamp(38px, 8.6vw, 164px);
  letter-spacing: 2px; line-height: 1.03;
}
body.general .ctimer { font-size: clamp(60px, 14vw, 210px); }

/* varijanta B: header se rastegne preko ekrana, bez liste borbi */
body.general .bhead {
  position: static; flex: 1; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; gap: 14px;
}
body.general .bhead .cphase { font-size: clamp(34px, 7vw, 120px); letter-spacing: 2px; }
/* u generalnom modu na B tekst pa timer pa trajanje, kao na ostalim ekranima.
   display: contents pusti djecu iz bhead-lefta da se poredaju izravno u bhead. */
body.general .bhead-left { display: contents; }
body.general .bhead .ctimer { order: 1; }
body.general .bhead .csub { order: 2; }

/* Oznaka veze sa serverom, u kutu. Vidljiva samo kad nesto ne stima. */
#swLink {
  position: fixed; left: 10px; bottom: 8px; z-index: 60;
  font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em; padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,.5); color: #2fd07f; opacity: .45;
  pointer-events: none; user-select: none;
}
#swLink.warn { color: #ffb020; opacity: .9; }
#swLink.bad { color: #ff2f22; opacity: 1; }
body.reverse #swLink { background: rgba(255,255,255,.5); }

/* Fullscreen na dvostruki dodir: bez slucajnog zumiranja, i tamna podloga u fullscreenu. */
html, body { touch-action: manipulation; }
:fullscreen, :-webkit-full-screen { background: var(--bg); }

#swFsHint {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 70;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em;
  background: rgba(0,0,0,.75); color: #fff; padding: 7px 13px; border-radius: 8px;
  opacity: 0; transition: opacity .25s; pointer-events: none; text-align: center; max-width: 90vw;
}
#swFsHint.on { opacity: .95; }
body.reverse #swFsHint { background: rgba(255,255,255,.85); color: #000; }

/* ---------- Doto: male letterspaced oznake i podnaslovi ----------
   Na posterima je dot-matrix isao na kicker i na trake s informacijom, a sve veliko je
   u Chakra Petchu. Isti raspored vrijedi i ovdje: Chakra je sve glavno, Doto su oznake. */
.label, .ctag, .csub, .cnext .k, .pill, .navlink, .tag, .sub, .bst, .lastsfx, .pip {
  font-family: var(--dot);
  font-weight: 700;   /* dot-matrix je na maloj velicini tanak, pa ide deblja tezina */
}

/* Dot oznake su na crnom tanke, pa im boja ide svjetlija nego prije, da se citaju s daljine. */
.ctag, .csub, .cnext .k, .label, .sub, .bst { color: #b3bac7; }
.label { font-size: 12px; letter-spacing: 3px; }
.ctag { font-size: clamp(12px, 1.5vw, 18px); }
.csub { font-size: clamp(13px, 1.6vw, 22px); }
.cnext .k { font-size: clamp(12px, 1.3vw, 17px); }
.pill { font-size: 13px; letter-spacing: 2px; }
.navlink { letter-spacing: 2px; }
.tag { font-size: 11px; letter-spacing: 2px; }
.sub { letter-spacing: 1.5px; }
.bst { letter-spacing: 2px; }
.lastsfx { font-size: 13px; letter-spacing: 1.5px; }

/* Brojke koje se vrte (timer, trajanja) su u Chakra Petchu, ali svaka u fiksnoj celiji,
   jer Chakra ima proporcionalne brojke i broj bi se inace pomicao dok broji. */
.btn.dur, .btn.dur .durT { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.swd { display: inline-block; width: .58em; text-align: center; }
.swc { display: inline-block; width: .32em; text-align: center; }

/* Timer i brojevi ostaju Chakra Petch (odluka 1b), samo su u fiksnim celijama.
   Mono je zadrzan samo za sitne tehnicke oznake (veza, kod u uputama). */
.ctimer, .timer-booth, .brow .bn, .fightrow .num, .schedrow .num, .step .stime {
  font-family: var(--sans);
  letter-spacing: 0;
}
.ctimer, .timer-booth { font-weight: 700; }
.brow .bn, .fightrow .num, .schedrow .num, .step .stime { font-weight: 600; }