html, body { margin: 0; padding: 0; background: transparent; overflow: hidden; width: 100%; height: 100%; }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
#elements { position: absolute; inset: 0; }
#alerts { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#alerts { z-index: 100000; pointer-events: none; }

.oh-el { position: absolute; box-sizing: border-box; }
.oh-inner { width: 100%; height: 100%; display: block; border: 0; }
.oh-text { display: flex; align-items: center; white-space: pre-wrap; line-height: 1.1; overflow: hidden; box-sizing: border-box; padding: 0 .15em; }

/* ---- Alert ---- */
.oh-alert {
  position: absolute; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: 70%; text-align: center; font-family: Inter, system-ui, sans-serif;
  transform: translate(-50%, 30px) scale(.92); opacity: 0;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, 1.4, .4, 1);
}
.oh-alert.pos-top { top: 6%; }
.oh-alert.pos-center { top: 50%; translate: 0 -50%; }
.oh-alert.pos-bottom { bottom: 8%; }
.oh-alert.in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.oh-alert.out { opacity: 0; transform: translate(-50%, -20px) scale(.96); transition-duration: .4s; }
.oh-alert-media { max-width: 520px; max-height: 360px; object-fit: contain; }
.oh-alert-title {
  font-size: 64px; font-weight: 900; color: #fff; line-height: 1.05;
  -webkit-text-stroke: 3px rgba(0,0,0,.85); paint-order: stroke fill;
  text-shadow: 0 6px 24px rgba(0,0,0,.55);
}
.oh-alert-title b { color: var(--accent, #9bff3c); }
.oh-alert-msg {
  font-size: 38px; font-weight: 700; color: #fff; max-width: 100%;
  -webkit-text-stroke: 2px rgba(0,0,0,.85); paint-order: stroke fill;
  text-shadow: 0 4px 16px rgba(0,0,0,.5); word-break: break-word;
}

#warn { position: fixed; left: 12px; bottom: 12px; font: 600 14px system-ui; color: #fff; background: #c0392b; padding: 8px 12px; border-radius: 6px; }

/* ---- Anket / tahmin ---- */
.oh-vote { container-type: size; box-sizing: border-box; }
.oh-vote-in {
  width: 100%; height: 100%; box-sizing: border-box; padding: .7em .9em; display: flex; flex-direction: column; gap: .45em; overflow: hidden;
  background: rgba(12, 14, 18, .88); border: .1em solid var(--acc); border-radius: .55em; color: #fff;
  font-family: Inter, system-ui, sans-serif; font-size: min(5cqw, 8cqh);
}
.oh-vote-tag { font-size: .5em; font-weight: 900; letter-spacing: .14em; color: var(--acc); }
.oh-vote-q { font-weight: 900; line-height: 1.15; margin-top: -.2em; }
.oh-vote-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .3em; min-height: 0; }
.oh-vote-row { position: relative; display: flex; align-items: center; gap: .5em; padding: .28em .5em; border-radius: .3em; background: rgba(255,255,255,.07); overflow: hidden; font-size: .75em; transition: opacity .4s; }
.oh-vote-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--acc); opacity: .3; transition: width .45s ease, opacity .4s; }
.oh-vote-n { position: relative; font-weight: 900; background: var(--acc); color: #0d0f12; border-radius: .25em; padding: 0 .35em; }
.oh-vote-l { position: relative; flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oh-vote-p { position: relative; font-weight: 900; font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.oh-vote-u { position: relative; font-size: .7em; font-weight: 700; opacity: .8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oh-vote.two-col .oh-vote-rows { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: .3em .4em; }
.oh-vote.two-col .oh-vote-row { font-size: .62em; }
.oh-el.vh { opacity: 0 !important; transition: opacity .5s; }
.oh-el.vs { transition: opacity .5s; }
.oh-vote-row.win { box-shadow: inset 0 0 0 .14em var(--acc); }
.oh-vote-row.win .oh-vote-bar { opacity: .6; }
.oh-vote-row.lose { opacity: .45; }
.oh-vote-foot { font-size: .5em; font-weight: 700; color: #c9ced6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oh-vote-foot b { color: var(--acc); white-space: pre; }
.oh-vote[data-status="idle"] .oh-vote-rows { opacity: .6; }