*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root { --s: 1; --timer-font: 'Cinzel', serif; --ui-font: 'Crimson Text', serif; }

html, body { background: transparent; width: fit-content; height: fit-content; }

.overlay {
  display: flex; flex-direction: column;
  gap: calc(4px * var(--s));
  padding: calc(8px * var(--s));
  font-family: var(--ui-font);
}

.ov-row {
  display: flex; align-items: center;
  gap: calc(10px * var(--s));
  background: rgba(0,0,0,.65);
  border-left: 3px solid transparent;
  border-radius: 4px;
  padding: calc(7px * var(--s)) calc(14px * var(--s));
  min-width: calc(260px * var(--s));
  backdrop-filter: blur(6px);
  transition: box-shadow .3s, border-color .3s;
}

#ov-wb { border-color: #c0392b; }
#ov-ht { border-color: #e07020; }
#ov-lg { border-color: #8b3fa0; }
#ov-se { border-color: #20a090; }

#ov-wb.is-active { border-color: #ff5544; box-shadow: -3px 0 16px rgba(192,57,43,.7); background: rgba(0,0,0,.78); }
#ov-ht.is-active { border-color: #ff8030; box-shadow: -3px 0 16px rgba(224,112,32,.7); background: rgba(0,0,0,.78); }
#ov-lg.is-active { border-color: #b060d0; box-shadow: -3px 0 16px rgba(139,63,160,.7); background: rgba(0,0,0,.78); }
#ov-se.is-active { border-color: #30c0b0; box-shadow: -3px 0 16px rgba(32,160,144,.7); background: rgba(0,0,0,.78); }

.ov-icon {
  font-size: calc(18px * var(--s)); line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.25));
  flex-shrink: 0;
}
.ov-body { flex: 1; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.ov-name {
  font-family: var(--timer-font); font-size: calc(11px * var(--s));
  color: #f0e8d8; letter-spacing: .04em; line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-sub {
  font-size: calc(9px * var(--s)); color: rgba(200,180,160,.65);
  text-shadow: 0 1px 4px rgba(0,0,0,.95); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.ov-timer {
  font-family: var(--timer-font); font-size: calc(20px * var(--s));
  font-weight: 700; color: #f0e8d8; letter-spacing: .06em; line-height: 1;
  text-shadow: 0 0 12px rgba(255,255,255,.2), 0 1px 6px rgba(0,0,0,.95);
}
.is-active .ov-timer { color: #ffd060; text-shadow: 0 0 14px rgba(255,200,60,.55), 0 1px 6px rgba(0,0,0,.95); }
.ov-label { font-size: calc(8px * var(--s)); color: rgba(200,180,160,.55); text-shadow: 0 1px 4px rgba(0,0,0,.95); line-height: 1; }

/* Light theme */
body.light .ov-row { background: rgba(255,255,255,.88); border-radius: 4px; }
body.light .ov-name, body.light .ov-timer { color: #1a0808; text-shadow: none; }
body.light .ov-sub, body.light .ov-label { color: rgba(60,30,20,.55); text-shadow: none; }
body.light .is-active .ov-timer { color: #b03000; text-shadow: none; }

/* Hidden */
.ov-row.hidden { display: none; }