*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"Arial Rounded MT Bold",Arial,sans-serif;color:#17314d;background:#fff5d9}
body{min-height:100vh;background:radial-gradient(circle at 50% 0%,#fffdf4 0,#fff3cf 48%,#fbe4a7 100%);padding:0 0 18px}
.tv-shell{width:min(100%,980px);min-height:100vh;margin:0 auto;display:flex;flex-direction:column;padding:clamp(12px,2.4vh,26px) clamp(12px,3vw,30px) 12px;overflow:hidden;position:relative}
.tv-header{position:relative;text-align:center;padding:4px 0 14px;flex:none}.eyebrow{font-size:clamp(10px,1.5vh,16px);font-weight:900;letter-spacing:.28em;color:#8a672c}.tv-header h1{font-size:clamp(34px,6.4vh,68px);line-height:1;margin:4px 0 7px;color:#163d60;letter-spacing:.025em;text-shadow:0 3px 0 #fff}.subtitle{display:inline-block;background:#ffca4c;color:#65430b;border-radius:99px;padding:7px 18px;font-size:clamp(11px,1.8vh,17px);font-weight:1000;letter-spacing:.12em;box-shadow:0 4px 0 #e7a82c}.mascot-stage{width:clamp(105px,18vh,170px);height:clamp(70px,11vh,105px);margin:0 auto 4px;position:relative}.digger-mascot{width:100%;height:100%;overflow:visible;animation:diggerBounce 2.4s ease-in-out infinite;filter:drop-shadow(0 6px 4px #7c551e25)}.digger-arm{transform-origin:157px 24px;animation:armDig 2.4s ease-in-out infinite}.mascot-star{position:absolute;color:#e7a523;font-size:20px;animation:twinkle 1.8s ease-in-out infinite}.star-a{top:8px;left:2px}.star-b{right:0;top:22px;animation-delay:.7s}.top-spark{position:absolute;color:#e6a326;font-size:22px;animation:twinkle 2s ease-in-out infinite}.spark-one{left:7%;top:15%}.spark-two{right:8%;top:28%;animation-delay:.6s}.connection{font-size:clamp(9px,1.3vh,13px);font-weight:800;color:#64806c;margin-top:11px;letter-spacing:.08em}.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#25b66a;margin-right:6px;box-shadow:0 0 0 4px #25b66a20;animation:pulse 1.7s infinite}.live-dot.offline{background:#df8d36;box-shadow:0 0 0 4px #df8d3620}
.cards{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2vh,20px);flex:1;align-content:start;padding:4px 0 14px}.child-card{position:relative;isolation:isolate;overflow:hidden;text-align:center;border:3px solid #f5bf45;border-radius:clamp(20px,3vh,32px);padding:clamp(14px,2.3vh,24px) clamp(12px,2.5vw,26px);background:linear-gradient(145deg,#fff 0%,#fff9e8 100%);box-shadow:0 8px 0 #e7b13b,0 13px 24px #9d6b1e20;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:clamp(250px,38vh,390px)}.child-card:before,.child-card:after{content:"✦";position:absolute;color:#ffd36a;z-index:-1;font-size:clamp(24px,4vh,38px);opacity:.75}.child-card:before{left:5%;top:16%}.child-card:after{right:6%;bottom:18%}.card-ribbon{background:#e9f7ef;color:#32744e;border-radius:99px;padding:5px 15px;font-size:clamp(10px,1.5vh,14px);font-weight:1000;letter-spacing:.16em}.child-avatar{font-size:clamp(30px,5vh,48px);line-height:1.2;margin-top:3px;animation:avatarWiggle 3.2s ease-in-out infinite}.name-label,.timer-label{font-size:clamp(9px,1.4vh,13px);font-weight:1000;letter-spacing:.18em;color:#9a793d}.child-name{max-width:100%;font-size:clamp(28px,5vh,54px);font-weight:1000;color:#163d60;line-height:1.08;overflow-wrap:anywhere;margin:2px 0 7px}.timer-label{margin-top:4px}.timer{font-size:clamp(48px,9vh,100px);font-weight:1000;line-height:1.04;letter-spacing:.015em;color:#20a566;font-variant-numeric:tabular-nums;text-shadow:0 3px 0 #d4f5df}.timer.warning{color:#e99a18;text-shadow:0 3px 0 #ffedc4}.timer.finished{color:#e25353;text-shadow:0 3px 0 #ffe0d9}.cheer-label,.soon-label,.finished-label{font-size:clamp(12px,1.8vh,17px);font-weight:900;color:#568263;margin:3px 0 8px}.soon-label{color:#bd7c15}.finished-label{color:#d54c4c}.times{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:auto;padding-top:12px;border-top:1px dashed #e6d6ae}.times div{display:flex;flex-direction:column;gap:5px;min-width:0}.times span{font-size:clamp(8px,1.25vh,12px);font-weight:900;letter-spacing:.06em;color:#9a865e}.times strong{font-size:clamp(11px,1.8vh,17px);color:#294969;overflow-wrap:anywhere}.empty{margin:auto;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:#58718a;font-size:clamp(14px,2vh,19px)}.empty-emoji{font-size:clamp(48px,8vh,76px);animation:avatarWiggle 3s infinite}.empty strong{font-size:clamp(22px,3.5vh,34px);color:#173d60}.tv-footer{text-align:center;color:#8a784f;font-size:clamp(10px,1.4vh,13px);font-weight:650;padding:12px 0 3px}.footer-cheer{font-size:clamp(10px,1.5vh,14px);font-weight:1000;letter-spacing:.12em;color:#b47a17;margin-bottom:5px}.tv-footer strong{color:#31577c}
@keyframes diggerBounce{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes armDig{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(18deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}@keyframes avatarWiggle{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-9deg)}97%{transform:rotate(9deg)}}
@media(min-width:760px) and (orientation:landscape){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.child-card{min-height:340px}.tv-shell{max-width:1100px}}
@media(max-width:420px){.times{gap:3px}.times strong{font-size:10px}.times span{font-size:8px}.child-card{min-height:250px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}

/* Keep the TV content inside a portrait 9:16 frame, even on a landscape monitor. */
html,body{width:100%;min-height:100%;}
.tv-shell{width:min(100vw,56.25vh);height:100vh;height:100dvh;min-height:100dvh;aspect-ratio:9/16;margin:0 auto;padding:clamp(10px,2vh,22px) clamp(9px,2vw,20px) 10px;}
.cards{grid-template-columns:minmax(0,1fr);overflow-y:auto;overscroll-behavior:contain;}
.child-card{width:100%;min-height:clamp(230px,34vh,390px);}
@media(min-width:760px) and (orientation:landscape){.cards{grid-template-columns:minmax(0,1fr);}.child-card{min-height:clamp(230px,34vh,390px);}}

/* Stable TV layout: full-screen canvas with individual portrait cards. */
html,body{width:100%;height:100%;min-height:100%;overflow:hidden}
body{padding:0;background:radial-gradient(circle at 50% 0%,#fffdf5 0,#fff4d7 56%,#f4dda7 100%)}
.tv-shell{width:100%;max-width:none;height:100vh;height:100dvh;min-height:0;aspect-ratio:auto;margin:0;padding:clamp(10px,2vh,22px) clamp(12px,2.2vw,32px) 10px;overflow:hidden}
.tv-header{padding:0 0 clamp(7px,1.4vh,16px)}
.mascot-stage{width:clamp(62px,9vh,100px);height:clamp(42px,6.5vh,72px);margin-bottom:2px}
.tv-header h1{font-size:clamp(28px,5vh,54px)}
.subtitle{padding:5px 14px;font-size:clamp(10px,1.5vh,14px)}
.connection{margin-top:7px}
.cards{width:100%;min-height:0;flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),330px));justify-content:center;align-content:center;align-items:stretch;gap:clamp(10px,1.6vw,22px);overflow-y:auto;overflow-x:hidden;padding:8px 4px 14px;overscroll-behavior:contain}
.child-card{width:100%;height:auto;min-height:0;max-height:calc(100dvh - 220px);aspect-ratio:3/4;padding:clamp(12px,2vh,20px) clamp(10px,1.5vw,18px);gap:clamp(3px,.7vh,8px);border-width:3px;border-radius:24px}
.card-ribbon{font-size:clamp(9px,1.3vh,13px);padding:5px 13px}
.child-avatar{font-size:clamp(23px,4vh,40px);margin-top:0}
.name-label,.timer-label{font-size:clamp(9px,1.2vh,12px)}
.child-name{font-size:clamp(24px,4.2vh,44px);margin:0 0 3px;max-height:2.2em;overflow:hidden}
.timer{font-size:clamp(30px,4.6vw,54px);line-height:1.08;white-space:nowrap;letter-spacing:0;max-width:100%;font-variant-numeric:tabular-nums}
.cheer-label,.soon-label,.finished-label{font-size:clamp(10px,1.4vh,14px);margin:1px 0 3px}
.times{gap:4px;padding-top:8px;margin-top:auto}
.times span{font-size:clamp(7px,1vh,10px);letter-spacing:0}
.times strong{font-size:clamp(9px,1.35vh,14px)}
.empty{min-height:0}
.empty-mark{width:clamp(54px,8vh,82px);height:clamp(54px,8vh,82px);display:grid;place-items:center;border-radius:22px;background:#ffca4c;color:#173d60;font-weight:1000;font-size:clamp(20px,3vh,30px);box-shadow:0 5px 0 #e7a82c}
.tv-footer{flex:none;padding:7px 0 2px}
.footer-cheer{font-size:clamp(9px,1.25vh,12px)}
@media (max-width:650px){
  .tv-shell{padding:8px 10px 7px}
  .tv-header{padding-bottom:6px}
  .mascot-stage{display:none}
  .tv-header h1{font-size:clamp(25px,5vw,38px)}
  .cards{grid-template-columns:minmax(0, min(100%,380px));align-content:start;justify-items:center}
  .child-card{aspect-ratio:3/4;max-height:calc(100dvh - 190px);height:auto}
}
@media(prefers-reduced-motion:reduce){.child-card{animation:none!important}}

/* Multi-child TV layout: names and countdowns stay visible on the same screen. */
.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));align-content:start;justify-content:stretch;overflow-y:auto}
.child-card{aspect-ratio:auto;max-height:none;min-height:220px;height:auto;padding:12px;gap:4px}
.child-name{max-height:none;overflow:visible;display:block;font-size:clamp(22px,3.2vh,40px);line-height:1.12;overflow-wrap:anywhere}
.timer{font-size:clamp(32px,5.2vh,62px)}
.times{margin-top:8px}
@media(max-width:650px){.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));align-content:start}.child-card{min-height:205px;max-height:none;aspect-ratio:auto}.child-name{max-height:none;overflow:visible}}

@media(min-width:760px) and (orientation:landscape){
 .cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));grid-auto-rows:minmax(0,1fr);align-content:stretch;overflow:hidden;gap:10px}
 .child-card{min-height:0;max-height:none;aspect-ratio:auto;padding:8px;gap:2px;border-radius:16px}
 .child-avatar{font-size:clamp(16px,2.4vh,28px)}
 .child-name{font-size:clamp(17px,2.6vh,32px);max-height:none;overflow:visible}
 .timer{font-size:clamp(25px,4vh,48px)}
 .times{padding-top:4px;gap:2px}
 .times span{font-size:clamp(7px,.9vh,10px)}
 .times strong{font-size:clamp(8px,1.2vh,13px)}
 .tv-footer{padding:3px 0 1px}
}

/* Official logo branding for the live TV display. */
.tv-brand-logo{display:block;width:min(52vw,390px);height:clamp(64px,11vh,112px);object-fit:contain;margin:0 auto 2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:650px){.tv-brand-logo{width:min(68vw,310px);height:clamp(54px,10vh,90px)}}