/* The overlay panel, shared by the OBS page (overlay/index.html) and the test bench.
   Needs a parent with `container-type: inline-size` as wide as the stream frame:
   everything is sized in em off one cqw font-size, so the panel scales with the frame. */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Lilita+One&display=swap");

:root {
  /* The overlay keeps one look in both themes because it sits on game footage. */
  --ov-panel: rgba(15, 22, 42, .92); --ov-edge: rgba(255, 255, 255, .14);
  --ov-ink: #f5f1e6; --ov-dim: #aab5cd; --ov-target: #ffd23f; --ov-target-ink: #1b1405;
  --ov-bone: #f4efe2; --ov-pip: #1b2236; --ov-d10: #0f7f80; --ov-d20: #c62b47;
  --ov-good: #62e2b2; --ov-warn: #ff7a59; --ov-track: rgba(255, 255, 255, .16); --ov-shadow: rgba(0, 0, 0, .5);
  --f-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.overlay, .overlay * { box-sizing: border-box; }
.overlay {
  position: absolute; width: 23em; padding: 1em 1.1em; border-radius: .9em;
  font-family: var(--f-body); line-height: 1.5;
  font-size: 14px; font-size: calc(1.42cqw * var(--scale, 1) * var(--fit, 1));
  background: var(--ov-panel); color: var(--ov-ink); border: .08em solid var(--ov-edge);
  box-shadow: 0 .6em 1.6em var(--ov-shadow);
  display: flex; flex-direction: column; gap: .8em; transition: opacity .5s;
}
.overlay[data-corner="tl"] { top: 2.2cqw; left: 2.2cqw; }
.overlay[data-corner="tr"] { top: 2.2cqw; right: 2.2cqw; }
.overlay[data-corner="bl"] { bottom: 2.2cqw; left: 2.2cqw; }
.overlay[data-corner="br"] { bottom: 2.2cqw; right: 2.2cqw; }
.overlay.is-hidden { opacity: 0; }
.ov-top { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.ov-goal { display: flex; align-items: center; gap: .7em; }
.ov-label { font-size: .8em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ov-dim); }
.ov-target {
  font-family: var(--f-display); font-size: 3.6em; line-height: 1; padding: .1em .3em .04em; border-radius: .22em;
  min-width: 2.4ch; text-align: center; background: var(--ov-target); color: var(--ov-target-ink);
}
.ov-target.pop { animation: pop .4s cubic-bezier(.2, 1.8, .4, 1); }
.ov-clock { display: flex; align-items: baseline; gap: .35em; }
.ov-secs { font-family: var(--f-display); font-size: 2.6em; line-height: 1; min-width: 2ch; text-align: right; }
.overlay.urgent .ov-secs { color: var(--ov-warn); }
.ov-dice { display: flex; justify-content: space-between; }
.die-wrap { display: flex; flex-direction: column; align-items: center; gap: .35em; filter: drop-shadow(0 .22em .25em var(--ov-shadow)); }
.die { width: 3.6em; height: 3.6em; display: grid; place-items: center; font-family: var(--f-display); color: var(--ov-ink); }
.die.d6 { background: var(--ov-bone); border-radius: .6em; padding: .55em; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.die.d10 { background: var(--ov-d10); clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%); }
.die.d20 { background: var(--ov-d20); clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); }
.pip { width: .62em; height: .62em; border-radius: 50%; }
.pip.on { background: var(--ov-pip); }
.die .num { font-size: 1.7em; line-height: 1; }
.die.d10 .num { transform: translateY(-.08em); }
.die-tag { font-size: .68em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ov-dim); }
.die-wrap.rolling .die { animation: tumble .42s linear infinite; }
.die-wrap.landed .die { animation: land .35s cubic-bezier(.2, 1.6, .4, 1); }
.ov-bar { height: .5em; border-radius: 1em; background: var(--ov-track); overflow: hidden; }
.ov-bar-fill { height: 100%; background: var(--ov-target); transform-origin: left center; }
.overlay.urgent .ov-bar-fill { background: var(--ov-warn); }
.ov-info { min-height: 3.1em; display: flex; flex-direction: column; justify-content: center; gap: .2em; }
.ov-line { font-size: .95em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-line.dim { color: var(--ov-dim); }
.ov-line.mono { font-family: var(--f-mono); font-size: .88em; }
.ov-line.multi { white-space: normal; overflow-wrap: anywhere; }
.ov-line.big { font-family: var(--f-display); font-size: 1.45em; line-height: 1.15; color: var(--ov-good); white-space: normal; overflow-wrap: anywhere; }
.ov-line.big.miss { color: var(--ov-warn); }
@keyframes tumble { 0% { transform: translateY(-.5em) rotate(0); } 50% { transform: translateY(.3em) rotate(180deg); } 100% { transform: translateY(-.5em) rotate(360deg); } }
@keyframes land { 0% { transform: translateY(-1.2em) scale(1.15) rotate(-12deg); } 100% { transform: none; } }
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .die-wrap.rolling .die, .die-wrap.landed .die, .ov-target.pop { animation: none; }
  .overlay { transition: none; }
}