/* Marge's Bingo Hall · TV display. Everything is sized in rem and rem follows the screen, so a 16:9 TV
   (or a window) scales as one piece. Nothing depends on hover; buttons are focusable for a TV remote. */
html{font-size:min(1.55vw,2.75vh)}
.tvbody{height:100vh;overflow:hidden}
.tvbody .bgdecor{opacity:.18}
.tv{position:relative;z-index:1;width:100vw;height:100vh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:.7rem;padding:.9rem 1.5rem .8rem}
.tv[hidden]{display:none}
.tvtop{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tvtitle{font:400 2.1rem/1 var(--font-display);color:var(--accent);text-shadow:.12rem .12rem 0 rgba(0,0,0,.35)}
.tvchip{display:flex;align-items:center;gap:.7rem;background:rgba(255,255,255,.12);border-radius:1rem;padding:.4rem 1rem}
.tvchip b{font-size:1.45rem}
.tvchip .prize,.tvfinal .prize{font-size:1.1rem;padding:.1rem .7rem;margin-left:.6rem}
.tvchip small{display:block;color:var(--muted);font-size:.95rem}
.tvchip .pprev{grid-template-columns:repeat(5,.55rem);gap:.14rem}.tvchip .pprev i{width:.55rem;height:.55rem}
.tvcount{font:800 1.3rem var(--font-body);color:var(--ink);background:rgba(255,255,255,.12);border-radius:99px;padding:.45rem 1.1rem}
.tvmain{display:grid;grid-template-columns:23rem minmax(0,1fr);gap:1.4rem;min-height:0}
.tvleft{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:0;overflow:hidden}
.tvleft .callrow{width:100%;margin:0}
.tvleft .margeblock{--mw:6.5rem}
.tvleft .bubble{font-size:1.45rem;padding:.7rem .9rem;border-radius:1.1rem}
.tvball{width:9.5rem;flex:none}
.tvball .ballsvg{width:100%}
.tvball.pop{animation:pop .6s cubic-bezier(.2,.9,.3,1.4)}
.tvlast{display:flex;gap:.5rem;align-items:center}
.tvlast .ballsvg{width:2.6rem;opacity:.9}
.tvlabel{font:800 .95rem var(--font-body);letter-spacing:.3rem;text-transform:uppercase;color:var(--accent2)}
/* the 75-number board: five rows, one per letter */
.board{display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:.35rem;min-height:0;align-self:stretch;max-height:30rem;width:100%}
.brow{display:grid;grid-template-columns:3rem repeat(15,minmax(0,1fr));gap:.3rem;align-items:stretch;min-height:0}
.bl{display:grid;place-items:center;font:400 2.2rem var(--font-display);color:var(--btn-ink);background:var(--accent);border-radius:.6rem}
.bn{display:grid;place-items:center;font:400 1.55rem var(--font-display);border-radius:.5rem;background:rgba(255,255,255,.07);color:rgba(255,255,255,.35);border:.1rem solid rgba(255,255,255,.1);min-height:3.1rem}
.bn.on{background:var(--called);color:var(--btn-ink);border-color:transparent;box-shadow:0 0 .8rem var(--called)}
.bn.new{animation:newball 1.1s ease-out 3;background:var(--accent);box-shadow:0 0 1.4rem var(--accent)}
@keyframes newball{50%{transform:scale(1.3)}}
.tvfoot{display:flex;align-items:stretch;gap:1.2rem}
.ladstrip{flex:1;min-width:0;display:flex;gap:.6rem;align-items:stretch;overflow:hidden}
.lad{flex:1 1 0;min-width:0;overflow:hidden;background:rgba(255,255,255,.08);border:.12rem solid transparent;border-radius:.9rem;padding:.45rem .8rem;display:flex;flex-direction:column;justify-content:center}
.lad span{font:800 .8rem var(--font-body);letter-spacing:.2rem;text-transform:uppercase;color:var(--muted)}
.lad b{font-size:1.25rem;line-height:1.15}
.lad .ladmeta{display:flex;flex-wrap:wrap;row-gap:.1rem;align-items:center;gap:.5rem;margin-top:.15rem;min-width:0}
.lad .ladmeta i{font-style:normal;font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap}
.lad .dbadge{font-size:.72rem;padding:.2rem .5rem;border-width:.12rem}
.lad .ladprize{font:800 1.05rem/1.2 var(--font-body);color:var(--btn-ink);background:var(--accent);border-radius:.6rem;padding:.05rem .55rem;margin-top:.2rem;align-self:flex-start;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.ladstrip.many .lad{padding:.3rem .5rem;max-height:8.6rem}.ladstrip.many .lad span{font-size:.65rem;letter-spacing:.15rem}.ladstrip.many .lad b{font-size:1rem}.ladstrip.many .lad .ladmeta i{font-size:.7rem}.ladstrip.many .lad .ladprize{font-size:.8rem;line-height:1.15}.ladstrip.many .lad small{font-size:.85rem}
.lad small{font-size:1rem;color:var(--accent);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lad.done{opacity:.8}.lad.done b::before{content:"\2713  "}
.lad.cur{border-color:var(--accent);background:rgba(255,255,255,.2);box-shadow:0 0 1rem rgba(255,255,255,.2)}
.tvjoin{display:flex;align-items:center;gap:.8rem;background:rgba(255,255,255,.1);border-radius:1rem;padding:.4rem .9rem}
.tvjoin .qr{width:5.6rem;padding:.35rem;border-radius:.6rem;margin:0}
.tvjoin .jc{font:400 2.6rem/1 var(--font-display);color:var(--accent);letter-spacing:.2rem}
.tvjoin small{display:block;color:var(--muted);font-size:.85rem;font-weight:700}
/* lobby / setup / final in the main area */
.tvcenter{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;min-height:0}
.tvcenter .margeblock{--mw:12rem}
.tvbigqr{display:flex;align-items:center;gap:2.5rem}
.tvbigqr .qr{width:15rem;padding:.9rem;border-radius:1.2rem;margin:0}
.tvbigcode{font:400 6.5rem/1 var(--font-display);color:var(--accent);letter-spacing:.7rem;text-shadow:.2rem .2rem 0 rgba(0,0,0,.35)}
.tvnames{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:70rem;max-height:9rem;overflow:hidden}
.tvnames span{background:rgba(255,255,255,.14);border-radius:99px;padding:.3rem .9rem;font-weight:800;font-size:1.15rem}
.tvnames span.off{opacity:.45}
.tvhead2{font:400 2.6rem var(--font-display);color:var(--ink)}
.tvsubline{font-size:1.4rem;color:var(--muted)}
.tvfinal{display:flex;flex-direction:column;gap:.5rem;width:46rem;max-width:90%}
.tvfinal .fin{padding:.6rem 1.2rem;border-radius:1rem}
.tvfinal .fin b{font-size:1.6rem}.tvfinal .fin .fl{font-size:.9rem}.tvfinal .fin .fw{font-size:1.5rem}
/* claim check panel */
.claimov{position:absolute;inset:0;z-index:20;background:rgba(5,5,15,.82);display:flex;align-items:center;justify-content:center;gap:2.5rem;padding:1.5rem}
.claimov[hidden]{display:none}
.claimov .bcard{width:27rem;max-width:none;padding:.7rem;margin:0}
.claimov .bcard .bhead span{font-size:2.4rem}
.claimov .bcard .cell{min-height:0}
.claimov .bcard .cell .n{font-size:2.1rem}
.claimtxt{max-width:26rem;text-align:left}
.claimtxt .kick{font-size:1rem}
.claimtxt h2{font-size:3rem;line-height:1.05;color:var(--accent);margin:.4rem 0}
.claimpat{font:400 1.9rem/1.15 var(--font-display);color:var(--ink);margin:.2rem 0}
.claimpat .prize{font-size:1.2rem;margin-left:.6rem}
.claimtxt p{font-size:1.4rem;color:var(--ink);margin:.3rem 0}
.tv .winov{position:absolute}
.tv .winword{font-size:11rem}.tv .winsub{font-size:2rem}.tv .winwho{font-size:4.2rem}
.soundbtn{position:absolute;right:1.5rem;top:4.7rem;z-index:30;border:0;border-radius:99px;background:var(--accent2);color:var(--btn-ink);font:800 1.1rem var(--font-body);padding:.55rem 1.3rem;cursor:pointer;box-shadow:0 .3rem 1rem rgba(0,0,0,.5)}
.soundbtn:focus,.keys button:focus,.tvinput:focus{outline:.25rem solid var(--ink);outline-offset:.2rem}
.soundbtn[hidden]{display:none}
/* code entry */
.tvcode{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:1rem}
.tvcode[hidden]{display:none}
.tvcode h1{font-size:3.4rem;color:var(--accent);text-shadow:.15rem .15rem 0 var(--accent2)}
.tvsub{font-size:1.5rem;color:var(--muted);margin:0}
.tvinput{width:22rem;min-height:5.2rem;font-size:3.6rem;letter-spacing:1rem}
.keys{display:grid;grid-template-columns:repeat(7,4.6rem);gap:.5rem;justify-content:center}
.keys button{min-height:3.6rem;border:0;border-radius:.8rem;background:rgba(255,255,255,.16);color:var(--ink);font:400 1.8rem var(--font-display);cursor:pointer}
.keys button.wide{grid-column:span 2;font:800 1.2rem var(--font-body)}
.keys button.go{background:var(--accent);color:var(--btn-ink)}