/* app.css: theme variables + dynamic components generated by JS (flip clock, score cells, ticker, crown...).
   Layout and panels use Tailwind utilities in the PHP partials. */
:root{--h:215;--bg:hsl(var(--h),65%,4%);--bg2:hsl(var(--h),85%,15%);--card:hsl(var(--h),52%,9%);--card2:hsl(var(--h),50%,15%);--tx:hsl(var(--h),100%,95%);--mu:hsl(var(--h),30%,66%);--ac:hsl(var(--h),100%,60%);--ac2:hsl(var(--h),100%,44%);--bd:hsl(var(--h),46%,21%);--inp:hsl(var(--h),52%,12%);--canvas:hsl(var(--h),72%,6%);--floor:hsl(var(--h),56%,16%);--goal:hsl(var(--h),100%,78%);--bumpF:hsl(var(--h),72%,18%);--bumpS:hsl(var(--h),100%,58%);--cnt:hsl(var(--h),100%,96%);--fk1:hsl(var(--h),55%,28%);--fk2:hsl(var(--h),62%,17%);--fk3:hsl(var(--h),64%,14%);--fk4:hsl(var(--h),58%,22%);--fkt:hsl(var(--h),100%,96%);--glow:0 0 18px hsla(var(--h),100%,58%,.3);--onac:#020c1f;--grad:linear-gradient(90deg,var(--ac),var(--ac2));color-scheme:dark;box-sizing:border-box}
:root[data-theme=light]{--bg:hsl(var(--h),100%,96%);--bg2:hsl(var(--h),95%,86%);--card:#ffffff;--card2:hsl(var(--h),80%,93%);--tx:hsl(var(--h),75%,12%);--mu:hsl(var(--h),25%,38%);--ac:hsl(var(--h),100%,46%);--ac2:hsl(var(--h),100%,38%);--bd:hsl(var(--h),60%,84%);--inp:hsl(var(--h),100%,98%);--canvas:hsl(var(--h),100%,97%);--floor:hsl(var(--h),60%,86%);--goal:hsl(var(--h),100%,42%);--bumpF:hsl(var(--h),75%,90%);--bumpS:hsl(var(--h),100%,44%);--cnt:hsl(var(--h),75%,12%);--fk1:#ffffff;--fk2:hsl(var(--h),85%,94%);--fk3:hsl(var(--h),85%,92%);--fk4:hsl(var(--h),100%,98%);--fkt:hsl(var(--h),75%,12%);--glow:0 4px 18px hsla(var(--h),100%,45%,.25);color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(1100px 600px at 15% -10%,var(--bg2),transparent 65%),var(--bg);background-attachment:fixed;color:var(--tx);font-family:system-ui,-apple-system,Segoe UI,sans-serif;min-height:100%}
canvas{display:block;border-radius:14px;background:var(--canvas);border:1px solid var(--bd);box-shadow:var(--glow)}
#banner{white-space:pre-line;line-height:1.25;padding:0 6px;position:absolute;left:0;right:0;top:24%;text-align:center;font-size:calc(26px*var(--sc,1));font-weight:800;pointer-events:none;text-shadow:0 2px 12px #000c;opacity:0;transition:.3s}
#banner.on{opacity:1}
#cdbar{display:none;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-weight:900;font-size:calc(90px*var(--sc,1));line-height:1;color:var(--cnt);text-shadow:0 2px 18px var(--ac);pointer-events:none;font-variant-numeric:tabular-nums}
.row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.row input[type=text]{flex:1;min-width:0}
input,select,button{font:inherit;color:var(--tx);background:var(--inp);border:1px solid var(--bd);border-radius:8px;padding:6px 8px}
input[type=color]{padding:0;width:34px;height:32px;border-radius:8px}
button{cursor:pointer}button:hover{background:var(--card2);border-color:var(--ac)}
button:disabled{opacity:.5;cursor:default}
.lb{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:14px}
.lb .bar{height:8px;border-radius:4px;flex:1;background:var(--card2);overflow:hidden}
.lb .bar i{display:block;height:100%}
.lb b{min-width:22px;text-align:right}
.lb.flash{animation:fl .8s}
@keyframes fl{50%{background:var(--card2)}}
#top{display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));margin-bottom:8px;border-radius:10px;position:relative;z-index:2;flex:none}
.cell:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}
.cell:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}
.cell{text-align:center;padding:5px 2px;line-height:1.15;border:1px solid #0003;min-width:0}
.cell span{display:block;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell b{display:block;font-size:20px;font-weight:800}
.cell.flash{animation:fl2 .8s 2}
@keyframes fl2{50%{filter:brightness(1.6) saturate(1.3)}}
.tkc{display:inline-block;white-space:nowrap}
#tick{display:none;overflow:hidden;white-space:nowrap;margin-top:8px;border:1px solid var(--bd);background:var(--card);border-radius:8px;padding:5px 0;font-size:12px;font-weight:700;flex:none;position:relative;z-index:1}
.tkin{display:inline-block;animation:tk linear infinite}
.tkin:hover{animation-play-state:paused}
@keyframes tk{to{transform:translateX(-50%)}}
.tkit{margin-right:26px}.tkit em{font-style:normal;color:var(--mu);margin:0 8px}
.tkit b{color:var(--ac);margin-right:4px}.tkit i{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 4px 0 2px}
.sw{display:inline-block;width:12px;height:12px;border-radius:50%}
input[type=checkbox]{accent-color:var(--ac)}
.small{font-size:12px;color:var(--mu)}
#sessbar{position:relative;z-index:1;display:none;flex:none;text-align:center;padding:8px 6px 6px;margin-bottom:8px;border-radius:12px;background:var(--card);border:2px solid var(--ac);box-shadow:var(--glow)}
.scn{font-size:calc(var(--fh,56px)*.95);font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums}.scn span{font-size:.5em;color:var(--mu);margin-left:6px}
.scl{font-size:12px;color:var(--mu);margin:4px 0 6px;font-weight:700}
.scp{height:8px;border-radius:4px;background:var(--card2);overflow:hidden}.scp i{display:block;height:100%}
.sl{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--mu);margin-bottom:6px}
.fc{display:flex;justify-content:center;align-items:flex-start;gap:6px}
.fg{display:flex;flex-direction:column;align-items:center;gap:4px}
.fg small{font-size:10px;letter-spacing:.15em;color:var(--mu);font-weight:700}
.fdd{display:flex;gap:4px}
.co{display:flex;flex-direction:column;justify-content:center;gap:10px;height:var(--fh,56px)}
.co i{width:6px;height:6px;border-radius:50%;background:var(--ac2)}
.fd{position:relative;width:var(--fw,40px);height:var(--fh,56px);perspective:300px;font-weight:800;font-size:calc(var(--fh,56px)*.68);line-height:var(--fh,56px);color:var(--fkt);font-variant-numeric:tabular-nums}
.fd::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(0,0,0,.35);z-index:6}
.fd .h{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:linear-gradient(var(--fk1),var(--fk2));backface-visibility:hidden}
.fd .h span{display:block;height:var(--fh,56px);text-align:center}
.fd .t{top:0;border-radius:7px 7px 0 0}
.fd .b{bottom:0;border-radius:0 0 7px 7px;background:linear-gradient(var(--fk3),var(--fk4))}
.fd .b span{margin-top:calc(var(--fh,56px)/-2)}
.fd .ft{z-index:4;transform-origin:50% 100%;animation:ft .3s ease-in forwards}
.fd .fb{z-index:3;transform-origin:50% 0;transform:rotateX(90deg);animation:fb .3s .3s ease-out forwards}
@keyframes ft{to{transform:rotateX(-90deg)}}
@keyframes fb{to{transform:rotateX(0)}}
.ib{padding:2px 6px;height:32px}.ib img{width:24px;height:24px;border-radius:50%;object-fit:cover;vertical-align:middle}
.cell img{display:block;object-fit:cover;border:2px solid #fff9}
.cell.l,.cell.r{display:flex;align-items:center;justify-content:center;gap:6px}
.cell.r{flex-direction:row-reverse}
.cell .tx{min-width:0}
.pic{position:relative;margin:0 auto 3px;flex:none}
.cell.l .pic,.cell.r .pic{margin:0}
.crown{position:absolute;left:50%;bottom:calc(100% - .6em);line-height:1;font-style:normal;transform:translateX(-50%);animation:crown 3s both;pointer-events:none;filter:drop-shadow(0 2px 4px #0008)}
@keyframes crown{0%{transform:translateX(-50%) translateY(14px) scale(.2);opacity:0}12%{transform:translateX(-50%) translateY(-4px) scale(1.25);opacity:1}22%{transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}
.sws{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.swb{width:22px;height:22px;border-radius:50%;padding:0;border:2px solid transparent;background:hsl(var(--sh),100%,58%);box-shadow:0 0 10px hsl(var(--sh),100%,58%)}
.swb:hover{background:hsl(var(--sh),100%,58%)}
.swb.on{border-color:var(--tx);transform:scale(1.12)}
.fd,.scn,.cell b,#cdbar,#banner,.sl,.fg small,.lb b,.tkit b{font-family:'Orbitron',system-ui,sans-serif}
.cell span,.tkit,.lb{font-family:'Rajdhani',system-ui,sans-serif}
.cell span{font-size:13px}.tkit{font-size:14px}