/* Royals Showdown — shared theme + TV board styles */
:root{
  --navy:#04163a; --ink:#062a66; --gold:#ffffff; --gold2:#cfe0ff; --pink:#c9d4e3; --teal:#5aaaff; --sky:#8ec8ff;
  --red:#ff2d3d; --tileA:#1a5bc4; --tileB:#0a3485; --edge:#7fb2ff; --muted:#a9c3e8;
  --t0:#5aaaff; --t1:#c9d4e3;
  --display:'Bungee',Impact,'Arial Black',sans-serif;
  --text:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:radial-gradient(ellipse at 50% -10%,#1f62cc 0%,#073080 45%,#020c24 100%);background-attachment:fixed;color:#fff;font-family:var(--text)}
button{font-family:inherit;cursor:pointer}
.crown{display:inline-block}

/* ---------- TV ---------- */
body.tv{overflow:hidden}
#app{height:100vh;display:flex;flex-direction:column;position:relative}
#app::before,#app::after{content:"";position:absolute;top:-30vh;width:60vw;height:140vh;pointer-events:none;opacity:.10;
  background:conic-gradient(from 180deg at 50% 0%,transparent 0deg,#fff 8deg,transparent 16deg);animation:sweep 9s ease-in-out infinite alternate}
#app::before{left:-15vw;transform-origin:50% 0}
#app::after{right:-15vw;transform-origin:50% 0;animation-delay:-4.5s}
@keyframes sweep{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}

.top{height:9vh;display:flex;align-items:center;justify-content:space-between;padding:0 3vw;position:relative;z-index:1}
.logo{display:flex;align-items:center;font-family:var(--display);font-size:4.4vh;color:var(--gold);text-shadow:0 .4vh 0 #002a66,0 0 2vh rgba(130,190,255,.45);letter-spacing:.1vh}
.logo span{color:var(--sky);text-shadow:0 .4vh 0 #0a3a8a,0 0 2vh rgba(201,212,227,.5);margin-left:1vh}
.logo .crown{height:4.4vh;width:auto;margin-right:1.2vh;filter:drop-shadow(0 0 1vh rgba(130,190,255,.6))}
.roundinfo{font-family:var(--display);font-size:3.4vh;letter-spacing:.3vh}
.topright{display:flex;align-items:center;gap:2vh}
.roomtag{font-family:var(--display);font-size:2.4vh;color:var(--muted)}
.roomtag b{color:#fff;font-weight:400;letter-spacing:.4vh}
.mult{font-family:var(--display);font-size:3vh;color:var(--ink);background:var(--gold);padding:.6vh 1.6vh;border-radius:1vh;animation:pulse 1.2s ease-in-out infinite;display:none}
.mult.on{display:block}
@keyframes pulse{50%{transform:scale(1.07)}}
body[data-mode=title] .top{display:none}

.view{display:none;flex:1;min-height:0;position:relative;z-index:1}
body[data-mode=main] #mainView{display:grid}
body[data-mode=fast] #fastView{display:flex}
body[data-mode=title] #titleView{display:flex}

#mainView{grid-template-columns:16vw 1fr 16vw;gap:2vw;padding:1vh 2.5vw 2vh}
.team{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;border-radius:2.4vh;
  background:rgba(255,255,255,.04);border:.4vh solid rgba(255,255,255,.12);padding:2vh 1vw;transition:box-shadow .3s,border-color .3s,transform .3s;text-align:center}
.team .tname{font-family:var(--display);font-size:3.2vh;line-height:1.15;word-break:break-word}
.team .tscore{font-family:var(--display);font-size:12vh;color:var(--gold);line-height:1;text-shadow:0 .6vh 0 #002a66}
.team .ttag{font-family:var(--display);font-size:2vh;letter-spacing:.3vh;padding:.5vh 1.4vh;border-radius:99px;visibility:hidden}
.team .tplayers{font-size:2.2vh;font-weight:700;color:var(--muted);line-height:1.3}
#team0 .tname{color:var(--t0)} #team1 .tname{color:var(--t1)}
#team0.active{border-color:var(--t0);box-shadow:0 0 4vh rgba(90,170,255,.55),inset 0 0 3vh rgba(90,170,255,.2);transform:scale(1.03)}
#team1.active{border-color:var(--t1);box-shadow:0 0 4vh rgba(201,212,227,.55),inset 0 0 3vh rgba(201,212,227,.2);transform:scale(1.03)}
.team.active .ttag{visibility:visible}
#team0 .ttag{background:var(--t0);color:var(--ink)} #team1 .ttag{background:var(--t1);color:var(--ink)}

.center{display:flex;flex-direction:column;gap:1.3vh;min-height:0}
.question{min-height:11vh;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:4.6vh;line-height:1.08;padding:0 2vw}
.question.small{font-size:3.8vh}
.question.hidden{color:var(--muted);letter-spacing:2vh}
.potrow{display:flex;justify-content:center;align-items:center;gap:1.6vh}
.potbox{display:flex;align-items:center;gap:1.6vh;background:var(--ink);border:.4vh solid var(--gold);border-radius:1.6vh;padding:.5vh 2.6vh;box-shadow:0 0 2.5vh rgba(130,190,255,.35)}
.potbox span{font-family:var(--display);font-size:2.4vh;color:var(--muted)}
.potbox b{font-family:var(--display);font-size:6vh;color:var(--gold);font-weight:400;min-width:12vh;text-align:center}
.potbox.banked{opacity:.45;box-shadow:none}
.potx{font-family:var(--display);font-size:4vh;color:var(--gold)}
.buzzopen{font-family:var(--display);font-size:2.2vh;color:var(--ink);background:var(--sky);padding:.6vh 1.4vh;border-radius:99px;animation:pulse 1s infinite;display:none}
.buzzopen.on{display:block}

.boardwrap{flex:1;min-height:0;padding:1.5vh;border-radius:2.4vh;background:linear-gradient(#0a2c6e,#041846);border:.5vh solid var(--gold);
  box-shadow:0 0 0 .6vh #0d3f99,0 0 5vh rgba(130,190,255,.3)}
.board{height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);grid-auto-flow:column;gap:1.2vh}
.tile{perspective:1600px;min-height:0}
.inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.tile.flipped .inner{transform:rotateX(180deg)}
.board.noanim .inner{transition:none!important}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:1.2vh;display:flex;align-items:center;overflow:hidden}
.front{justify-content:center;background:linear-gradient(var(--tileA),var(--tileB));border:.35vh solid var(--edge);box-shadow:inset 0 .6vh 0 rgba(255,255,255,.15)}
.front .num{font-family:var(--display);font-size:6.5vh;width:11vh;height:8.5vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(#2f74e0,#0b3a94);border:.35vh solid #d6e7ff;border-radius:50%;text-shadow:0 .4vh 0 #021a4a}
.tile.empty .front{background:#061a45;border-color:#12306a;box-shadow:none}
.tile.empty .num{display:none}
.back{transform:rotateX(180deg);background:linear-gradient(#ffffff,var(--gold2));border:.35vh solid #fff;color:var(--ink)}
.back .ans{flex:1;padding:0 2vh;font-weight:800;font-size:5vh;text-transform:uppercase;line-height:1;overflow:hidden}
.back .ans.long{font-size:4vh} .back .ans.xlong{font-size:3.1vh}
.back .pts{width:22%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--gold);font-family:var(--display);font-size:5.4vh}

.strikes{height:9vh;display:flex;justify-content:center;gap:2.4vh}
.sx{width:9vh;height:9vh;border:.45vh solid rgba(255,45,61,.35);border-radius:1.4vh;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25)}
.sx svg{width:80%;height:80%;opacity:0;transform:scale(.3);transition:all .25s}
.sx.on{border-color:var(--red);box-shadow:0 0 2.5vh rgba(255,45,61,.6)}
.sx.on svg{opacity:1;transform:scale(1)}

/* lightning round */
#fastView{flex-direction:column;padding:1vh 4vw 2vh;gap:1.8vh}
.fastHead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.fastHead .lbl{font-family:var(--display);font-size:3vh;color:var(--muted)}
.fastHead .goal{justify-self:end;font-family:var(--display);font-size:3vh;color:var(--muted)}
.fastHead .goal b{color:var(--gold);font-weight:400;font-size:5vh;margin-left:1vh}
.timer{font-family:var(--display);font-size:13vh;line-height:1;width:24vh;text-align:center;background:var(--ink);border:.5vh solid var(--edge);border-radius:2vh;padding:1vh 0;color:#fff}
.timer.running{border-color:var(--sky);color:var(--sky);box-shadow:0 0 4vh rgba(90,170,255,.5)}
.timer.low{border-color:var(--red);color:var(--red);box-shadow:0 0 4vh rgba(255,45,61,.6);animation:pulse .5s infinite}
.fastGrid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:3vw}
.fcol{display:flex;flex-direction:column;gap:1.2vh;min-height:0}
.fcol h3{font-family:var(--display);font-weight:400;font-size:3vh;text-align:center}
.fcol:first-child h3{color:var(--t0)} .fcol:last-child h3{color:var(--t1)}
.frow{flex:1;min-height:0;display:grid;grid-template-columns:1fr 13vh;gap:1vh}
.fcell{border-radius:1.2vh;display:flex;align-items:center;background:repeating-linear-gradient(135deg,#0a2a66 0 1.2vh,#08235a 1.2vh 2.4vh);border:.35vh solid #1b4590;overflow:hidden}
.fcell.ft{padding:0 2vh;font-weight:800;font-size:4.6vh;text-transform:uppercase}
.fcell.fp{justify-content:center;font-family:var(--display);font-size:5vh;color:var(--gold)}
.fcell.on{background:linear-gradient(var(--tileA),var(--tileB));border-color:var(--edge)}
.fcell.fp.on{background:var(--ink);border-color:var(--gold)}
.fcell.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.fastTotal{display:flex;align-items:center;justify-content:center;gap:3vh}
.fastTotal span{font-family:var(--display);font-size:3vh;color:var(--muted)}
.fastTotal b{font-family:var(--display);font-weight:400;font-size:8vh;color:var(--gold);min-width:20vh;text-align:center}
.meter{width:40vw;height:2.6vh;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;border:.3vh solid rgba(255,255,255,.2)}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--sky),#fff);transition:width .8s}

/* final scoreboard */
body[data-mode=final] #finalView{display:flex}
#finalView{flex-direction:column;align-items:center;justify-content:center;gap:4vh;padding:2vh 4vw 6vh}
.finalTitle{font-family:var(--display);font-size:6vh;color:var(--muted);letter-spacing:1vh}
.finalTeams{display:flex;align-items:center;gap:4vw}
.fteam{width:34vw;min-height:48vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5vh;border-radius:3vh;padding:3vh 2vw;
  background:rgba(255,255,255,.05);border:.5vh solid rgba(255,255,255,.18);text-align:center;transition:all .6s}
.fteam .fcrown{height:10vh}
.fteam .fcrown .crown{height:10vh;width:auto;filter:drop-shadow(0 0 3vh rgba(255,255,255,.8));animation:bob 2s ease-in-out infinite}
.fteam .fn{font-family:var(--display);font-size:5vh;line-height:1.1}
#fteam0 .fn{color:var(--t0)} #fteam1 .fn{color:var(--t1)}
.fteam .fs{font-family:var(--display);font-size:18vh;line-height:1;text-shadow:0 1vh 0 #002a66}
.fteam .fp{font-size:2.6vh;font-weight:700;color:var(--muted);max-width:30vw}
.fteam.win{border-color:#fff;background:rgba(255,255,255,.12);box-shadow:0 0 8vh rgba(142,200,255,.6);transform:scale(1.05)}
.fteam.lose{opacity:.55;transform:scale(.92)}
.fvs{font-family:var(--display);font-size:5vh;color:var(--muted)}
.finalWin{font-family:var(--display);font-size:8vh;color:#fff;text-shadow:0 1vh 0 #002a66,0 0 5vh rgba(142,200,255,.7);animation:pulse 1.4s ease-in-out infinite;text-align:center}

/* lobby / title */
#titleView{display:none;align-items:center;justify-content:center;gap:5vw;padding:4vh 5vw;text-align:center}
.lobbyL{display:flex;flex-direction:column;align-items:center;gap:2.5vh}
.lobbyL>.crown{height:11vh;width:auto;margin-bottom:-2vh;filter:drop-shadow(0 0 3vh rgba(130,190,255,.7));animation:bob 3s ease-in-out infinite}
.bigLogo{font-family:var(--display);font-size:13vh;line-height:.95;color:var(--gold);text-shadow:0 1.2vh 0 #002a66,0 0 6vh rgba(130,190,255,.5);animation:bob 3s ease-in-out infinite}
.bigLogo span{display:block;color:var(--sky);text-shadow:0 1.2vh 0 #0a3a8a,0 0 6vh rgba(201,212,227,.5)}
@keyframes bob{50%{transform:translateY(-1.2vh) rotate(-1deg)}}
.tagline{font-size:3.2vh;font-weight:700;color:var(--muted)}
.tagline b{color:#fff;letter-spacing:.3vh}
.lobbyR{background:rgba(4,22,58,.75);border:.5vh solid var(--gold);border-radius:3vh;padding:3vh 3.5vh;display:flex;flex-direction:column;align-items:center;gap:1.6vh;box-shadow:0 0 6vh rgba(130,190,255,.3)}
.lobbyR h2{font-family:var(--display);font-weight:400;font-size:3.2vh;color:var(--sky)}
.qr{background:#fff;padding:1.6vh;border-radius:1.6vh;line-height:0}
.qr svg,.qr img{width:30vh;height:30vh}
.joinurl{font-size:2.4vh;font-weight:700;color:var(--muted);max-width:40vh;word-break:break-all}
.code{font-family:var(--display);font-size:9vh;letter-spacing:1.5vh;line-height:1;color:#fff}
.lobbyTeams{display:grid;grid-template-columns:1fr 1fr;gap:2vw;width:100%;margin-top:1vh}
.lobbyTeams h3{font-family:var(--display);font-weight:400;font-size:2.6vh}
.lobbyTeams .l0 h3{color:var(--t0)} .lobbyTeams .l1 h3{color:var(--t1)}
.lobbyTeams ul{list-style:none;font-size:2.6vh;font-weight:800;line-height:1.35;min-height:4vh}
.lobbyTeams li.new{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}

/* small join QR shown during the main game, in the corner */
#miniJoin{position:fixed;right:1.2vw;bottom:1.6vh;z-index:30;display:none;align-items:center;gap:1.2vh;background:rgba(4,22,58,.92);border:.35vh solid rgba(255,255,255,.5);border-radius:1.6vh;padding:1vh}
body[data-mode=main] #miniJoin{display:flex}
#miniJoin .mqr{background:#fff;padding:.8vh;border-radius:.8vh;line-height:0}
#miniJoin .mqr svg{width:13vh;height:13vh}
#miniJoin .mtxt{font-family:var(--display);font-size:1.7vh;color:var(--muted);display:flex;flex-direction:column;gap:.4vh;writing-mode:vertical-rl;transform:rotate(180deg)}
#miniJoin .mtxt b{font-weight:400;color:#fff;font-size:2.4vh;letter-spacing:.5vh}
body[data-mode=main] #team1{padding-bottom:19vh}

/* overlays */
#xOverlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:2vw;pointer-events:none;z-index:50;opacity:0}
#xOverlay svg{width:34vh;height:34vh;filter:drop-shadow(0 0 4vh rgba(255,45,61,.9))}
#xOverlay.show{animation:xpop 1.3s ease forwards}
@keyframes xpop{0%{opacity:0;transform:scale(2.2)}12%{opacity:1;transform:scale(.95)}20%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
#banner{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);z-index:55;pointer-events:none;text-align:center;
  background:radial-gradient(ellipse,rgba(6,42,102,.97),rgba(6,42,102,.9));border:.6vh solid var(--gold);border-radius:3vh;padding:4vh 8vh;box-shadow:0 0 10vh rgba(130,190,255,.6);opacity:0;white-space:nowrap}
#banner.show{animation:bannerIn 3s ease forwards}
#banner .bb{font-family:var(--display);font-size:12vh;color:var(--gold);line-height:1;text-shadow:0 1vh 0 #002a66}
#banner .bs{font-family:var(--display);font-size:5vh;margin-top:1.5vh}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}20%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.cf{position:fixed;top:-4vh;width:1.3vh;height:2.2vh;z-index:60;pointer-events:none;animation:fall linear forwards;border-radius:.3vh}
@keyframes fall{to{transform:translate(var(--dx),112vh) rotate(var(--r))}}
#gate{position:fixed;inset:0;z-index:80;background:rgba(2,12,36,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;text-align:center;padding:4vh}
#gate.off{display:none}
#gate h1{font-family:var(--display);font-weight:400;font-size:6vh;color:#fff}
#gate p{font-size:3vh;font-weight:700;color:var(--muted)}
#gate input{font-family:var(--display);font-size:6vh;width:30vh;text-align:center;letter-spacing:1vh;padding:1vh;border-radius:1.4vh;border:.4vh solid var(--sky);background:var(--ink);color:#fff;text-transform:uppercase}
.bigbtn{font-family:var(--display);font-size:3.4vh;padding:1.8vh 5vh;border-radius:1.4vh;border:.3vh solid #fff;background:#fff;color:var(--ink);box-shadow:0 .8vh 0 #002a66}
.bigbtn:active{transform:translateY(.4vh);box-shadow:0 .4vh 0 #002a66}
.netstat{position:fixed;left:1.5vh;bottom:.4vh;z-index:40;font-size:1.8vh;font-weight:700;color:var(--muted);opacity:.7}
.netstat.bad{color:#ff8a95;opacity:1}