/* ============================================================
   Egyptian Theatre — Trivia Spectator styles
   Shared by games/trivia-screen.html (standalone) and the trivia
   segment embedded in signage/preshow.html. Scoped entirely under
   .trivia-spectator with its own --ts-* custom properties so it
   never collides with the host page's palette (site.css or
   signage.css), and sized in container-query units so it fills
   whatever box it's mounted into — a full viewport on its own
   page, or a segment of the booth preshow.
   ============================================================ */

.trivia-spectator{
  --ts-black:#0d0a06;
  --ts-gold:#e3a82b;
  --ts-gold-dark:#b68a28;
  --ts-gold-pale:#e8ce81;
  --ts-cream:#f6edd8;
  --ts-red:#bf2a1d;
  --ts-teal:#5c9e96;
  --ts-display:"Copperplate","Copperplate Gothic Bold","Cinzel",serif;
  --ts-body:"Helvetica Neue",Helvetica,Arial,sans-serif;

  position:relative;width:100%;height:100%;overflow:hidden;
  container-type:size;container-name:ts;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(227,168,43,.12), transparent 55%),
    linear-gradient(180deg,#171107 0%,#100d08 100%);
  color:var(--ts-cream);font-family:var(--ts-body);
}

.trivia-spectator .ts-chrome{position:absolute;inset:0;z-index:10;pointer-events:none}

.trivia-spectator .ts-livepill{
  position:absolute;bottom:2.4cqh;right:3cqw;
  font-family:var(--ts-display);font-size:1.6cqh;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--ts-red);color:#fff;background:var(--ts-red);
  border-radius:20px;padding:.8cqh 1.6cqw;
}
.trivia-spectator .ts-livepill.test{background:var(--ts-teal);border-color:var(--ts-teal);color:#0d2624}

.trivia-spectator .ts-joinbar{
  position:absolute;left:0;right:0;top:0;
  display:flex;align-items:center;gap:2cqw;
  padding:2cqh 4cqw;background:rgba(13,10,6,.86);
  border-bottom:2px solid var(--ts-gold-dark);
}
.trivia-spectator .ts-qr{width:9cqh;height:9cqh;flex-shrink:0;background:#fff;border-radius:.6cqh;overflow:hidden;padding:.5cqh}
.trivia-spectator .ts-qr svg{width:100%;height:100%;display:block}
.trivia-spectator .ts-joinhead{
  font-family:var(--ts-display);font-size:2.4cqh;letter-spacing:.06em;color:var(--ts-gold-pale);
}
.trivia-spectator .ts-joinsub{font-size:1.8cqh;color:var(--ts-cream);opacity:.85}
.trivia-spectator .ts-joinurl{color:var(--ts-gold)}

.trivia-spectator .ts-screens{position:absolute;inset:0}
.trivia-spectator .ts-scr{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:2.2cqh;text-align:center;padding:6cqh 8cqw;
}
.trivia-spectator .ts-scr.on{display:flex}
.trivia-spectator .ts-scr h2{
  font-family:var(--ts-display);color:var(--ts-gold-pale);letter-spacing:.1em;text-transform:uppercase;
  font-size:5cqh;text-shadow:0 2px 0 #5b420f,0 6px 22px rgba(0,0,0,.7);
}
.trivia-spectator .ts-emoji{font-size:9cqh;line-height:1}
.trivia-spectator .ts-sub{color:#cdbf9f;font-size:2.6cqh;max-width:60cqw;margin:0}
.trivia-spectator .ts-fun{color:#cdbf9f;font-size:2.6cqh;max-width:60cqw;font-style:italic}
.trivia-spectator .ts-countbig{font-family:var(--ts-display);font-size:11cqh;color:var(--ts-gold);letter-spacing:.06em}

.trivia-spectator .ts-qtop{
  display:flex;align-items:center;justify-content:space-between;width:100%;max-width:80cqw;
  font-family:var(--ts-display);font-size:2.2cqh;letter-spacing:.16em;text-transform:uppercase;color:#a89a78;
}
.trivia-spectator .ts-qbar{width:100%;max-width:80cqw;height:1.4cqh;background:#241a0c;border-radius:1cqh;overflow:hidden}
.trivia-spectator .ts-qbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--ts-gold),var(--ts-gold-dark));border-radius:1cqh}
.trivia-spectator .ts-qtext{
  font-size:5.4cqh;color:var(--ts-cream);max-width:76cqw;line-height:1.35;min-height:2.2em;
  display:flex;align-items:center;justify-content:center;font-weight:600;
}
.trivia-spectator .ts-choices{display:grid;grid-template-columns:1fr 1fr;gap:2cqh 2cqw;width:100%;max-width:80cqw}
.trivia-spectator .ts-choice{
  display:flex;align-items:center;gap:1.6cqw;text-align:left;
  background:linear-gradient(180deg,#1c150a,#14100a);
  border:1px solid #3a2d14;border-radius:1cqh;color:var(--ts-cream);
  padding:2cqh 2.4cqw;font-size:2.8cqh;
}
.trivia-spectator .ts-choice .ts-key{
  font-family:var(--ts-display);color:var(--ts-gold);border:2px solid var(--ts-gold-dark);
  border-radius:.6cqh;min-width:5cqh;height:5cqh;display:flex;align-items:center;justify-content:center;
  font-size:2.6cqh;flex-shrink:0;
}

.trivia-spectator .ts-banswer{font-family:var(--ts-display);font-size:4cqh;color:var(--ts-gold)}
.trivia-spectator .ts-bwinner{font-family:var(--ts-display);font-size:2.8cqh;color:var(--ts-gold-pale);letter-spacing:.04em}

.trivia-spectator .ts-board{width:100%;max-width:70cqw;display:flex;flex-direction:column;gap:1cqh}
.trivia-spectator .ts-brow{
  display:flex;align-items:center;gap:2cqw;
  background:linear-gradient(180deg,#1c150a,#161107);
  border:1px solid #33270f;border-radius:.8cqh;padding:1.6cqh 2.4cqw;font-size:3cqh;
}
.trivia-spectator .ts-rk{font-family:var(--ts-display);color:var(--ts-gold-pale);min-width:2.4em;font-size:2.6cqh}
.trivia-spectator .ts-nm{flex:1;text-align:left;color:var(--ts-cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trivia-spectator .ts-sc{font-family:var(--ts-display);color:var(--ts-gold);font-size:3cqh}