@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;600;700&display=swap');
*{box-sizing:border-box}
html{background:#0a1b33}
body{margin:0;font-family:'Inter',"Helvetica Neue",Arial,sans-serif;background:#0d2444;color:#14213d;position:relative;min-height:100vh}
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1200 600'><defs><clipPath id='cantonClip'><rect x='0' y='0' width='600' height='300'/></clipPath><polygon id='star7' points='0,-45 8,-17 35,-28 19,-4 44,10 15,12 20,41 0,19 -20,41 -15,12 -44,10 -19,-4 -35,-28 -8,-17' fill='white'/></defs><rect x='0' y='0' width='1200' height='600' fill='%23012169'/><g clip-path='url(%23cantonClip)'><line x1='0' y1='0' x2='600' y2='300' stroke='white' stroke-width='50'/><line x1='600' y1='0' x2='0' y2='300' stroke='white' stroke-width='50'/><line x1='0' y1='0' x2='600' y2='300' stroke='%23e4002b' stroke-width='18'/><line x1='600' y1='0' x2='0' y2='300' stroke='%23e4002b' stroke-width='18'/><rect x='0' y='120' width='600' height='60' fill='white'/><rect x='270' y='0' width='60' height='300' fill='white'/><rect x='0' y='135' width='600' height='30' fill='%23e4002b'/><rect x='285' y='0' width='30' height='300' fill='%23e4002b'/></g><use href='%23star7' xlink:href='%23star7' transform='translate(300,450) scale(1.6)'/><use href='%23star7' xlink:href='%23star7' transform='translate(800,140) scale(1.3)'/><use href='%23star7' xlink:href='%23star7' transform='translate(730,310) scale(1.3)'/><use href='%23star7' xlink:href='%23star7' transform='translate(990,270) scale(1.3)'/><use href='%23star7' xlink:href='%23star7' transform='translate(850,490) scale(1.3)'/><use href='%23star7' xlink:href='%23star7' transform='translate(860,380) scale(0.6)'/></svg>");  background-repeat:no-repeat;  background-position:center center;  background-size:min(1400px,160vw) auto;  opacity:.16;  z-index:0;  pointer-events:none;}body::after{  content:"";  position:fixed;inset:0;  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1600'><defs><g id='ball'><circle cx='0' cy='0' r='46' fill='none' stroke='%23aebbd6' stroke-width='4'/><path d='M-46 0h92M0 -46c12 12 12 80 0 92M0 -46c-12 12-12 80 0 92M-36 -24c19 13 53 13 72 0M-36 24c19-13 53-13 72 0' fill='none' stroke='%23aebbd6' stroke-width='4'/></g><g id='hoop'><ellipse cx='0' cy='0' rx='55' ry='14' fill='none' stroke='%23aebbd6' stroke-width='4'/><path d='M-50 0 L-35 65 M-40 0 L-28 62 M-30 0 L-20 60 M-20 0 L-16 60 M-10 0 L-10 60 M0 0 L-4 60 M10 0 L6 60 M20 0 L18 62 M30 0 L15 65 M-50 0 L50 0' fill='none' stroke='%23aebbd6' stroke-width='2.5'/></g><g id='board'><rect x='-50' y='-46' width='100' height='60' fill='none' stroke='%23aebbd6' stroke-width='4'/><rect x='-20' y='-26' width='40' height='24' fill='none' stroke='%23aebbd6' stroke-width='3'/><ellipse cx='0' cy='24' rx='34' ry='9' fill='none' stroke='%23aebbd6' stroke-width='4'/></g></defs><use href='%23ball' transform='translate(113,111) rotate(5) scale(0.58)' opacity='0.48'/><use href='%23hoop' transform='translate(384,98) rotate(0) scale(0.56)' opacity='0.46'/><use href='%23board' transform='translate(616,102) rotate(-2) scale(0.88)' opacity='0.38'/><use href='%23ball' transform='translate(901,178) rotate(14) scale(0.78)' opacity='0.45'/><use href='%23hoop' transform='translate(1256,96) rotate(11) scale(0.67)' opacity='0.39'/><use href='%23board' transform='translate(1422,133) rotate(10) scale(0.62)' opacity='0.5'/><use href='%23ball' transform='translate(150,462) rotate(2) scale(0.58)' opacity='0.36'/><use href='%23hoop' transform='translate(365,505) rotate(-2) scale(0.68)' opacity='0.5'/><use href='%23board' transform='translate(661,452) rotate(9) scale(0.83)' opacity='0.41'/><use href='%23ball' transform='translate(942,484) rotate(12) scale(0.84)' opacity='0.42'/><use href='%23hoop' transform='translate(1256,426) rotate(-3) scale(0.85)' opacity='0.39'/><use href='%23board' transform='translate(1465,415) rotate(5) scale(0.86)' opacity='0.49'/><use href='%23ball' transform='translate(177,774) rotate(6) scale(0.79)' opacity='0.49'/><use href='%23hoop' transform='translate(395,848) rotate(14) scale(0.74)' opacity='0.52'/><use href='%23board' transform='translate(615,828) rotate(5) scale(0.95)' opacity='0.56'/><use href='%23ball' transform='translate(908,784) rotate(5) scale(0.56)' opacity='0.47'/><use href='%23hoop' transform='translate(1161,746) rotate(-14) scale(0.86)' opacity='0.38'/><use href='%23board' transform='translate(1437,785) rotate(12) scale(0.58)' opacity='0.46'/><use href='%23ball' transform='translate(139,1174) rotate(10) scale(0.9)' opacity='0.42'/><use href='%23hoop' transform='translate(390,1100) rotate(12) scale(0.93)' opacity='0.39'/><use href='%23board' transform='translate(629,1082) rotate(-9) scale(0.74)' opacity='0.5'/><use href='%23ball' transform='translate(905,1050) rotate(-3) scale(0.7)' opacity='0.49'/><use href='%23hoop' transform='translate(1253,1147) rotate(0) scale(0.8)' opacity='0.52'/><use href='%23board' transform='translate(1414,1176) rotate(9) scale(0.9)' opacity='0.55'/><use href='%23ball' transform='translate(121,1426) rotate(-13) scale(0.8)' opacity='0.37'/><use href='%23hoop' transform='translate(349,1399) rotate(-11) scale(0.69)' opacity='0.36'/><use href='%23board' transform='translate(608,1391) rotate(-13) scale(0.7)' opacity='0.36'/><use href='%23ball' transform='translate(977,1456) rotate(-11) scale(0.65)' opacity='0.44'/><use href='%23hoop' transform='translate(1184,1387) rotate(11) scale(0.95)' opacity='0.47'/><use href='%23board' transform='translate(1465,1382) rotate(-13) scale(0.69)' opacity='0.42'/></svg>"),repeating-linear-gradient(115deg,rgba(255,255,255,0.035) 0 2px,transparent 2px 46px);
  background-repeat:repeat,repeat;
  background-size:640px 640px,auto;
  background-position:0 0,0 0;
  z-index:0;
  pointer-events:none;
}
header{background:linear-gradient(180deg,#0b1f3a,#132a4d);color:#fff;padding:12px 18px;position:sticky;top:0;z-index:5;box-shadow:0 2px 14px #0004;border-bottom:3px solid #e0263d}
.headerRow{display:flex;align-items:center;gap:12px;max-width:1100px;margin:auto}
.logoMark{width:40px;height:40px;flex:none;border-radius:10px;background:radial-gradient(circle at 30% 25%,#ff4d63,#c8102e);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #ffffff40,0 2px 8px #00000040}
.logoMark svg{width:25px;height:25px}
.headerText{flex:1;min-width:0}
header h1{margin:0;font-family:'Oswald',sans-serif;font-weight:700;font-size:19px;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
header .tag{font-size:11px;color:#aebbd6;text-transform:uppercase;letter-spacing:1.5px}
.badge{background:#e0263d;color:#fff;border-radius:99px;padding:4px 9px;font-size:10px;font-weight:800;letter-spacing:.5px;margin-left:6px;vertical-align:2px;box-shadow:0 0 0 3px #ffffff22;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #e0263d55}50%{box-shadow:0 0 0 5px #e0263d00}}
.wrap{max-width:1100px;margin:auto;padding:14px;position:relative;z-index:1}
.card{background:#fff;border:1px solid #dde3ee;border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 3px 14px #14213d10}
.hidden{display:none!important}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grow{flex:1}
input,select,button,textarea{font:inherit;padding:11px;border-radius:9px;border:1px solid #c4cddc;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #1d6fdc55;border-color:#1d6fdc}
button{width:auto;background:#0b1f3a;color:#fff;border:0;font-weight:700;cursor:pointer;transition:transform .08s ease,filter .08s ease}
button:disabled{opacity:.45;cursor:not-allowed}
button:not(:disabled):hover{filter:brightness(1.12)}
button:not(:disabled):active{transform:scale(.96);filter:brightness(.85)}
.secondary{background:#e8eef6;color:#0b1f3a}
.danger{background:#e0263d}
.green{background:#177245}
.linkBtn{background:none;color:#1d6fdc;border:0;width:auto;padding:2px 0;font-weight:700;text-decoration:underline}
.clock{font-family:'Oswald',sans-serif;font-size:36px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#0b1f3a}
.clock.paused{font-size:20px;letter-spacing:0;color:#6b7785}
.muted{color:#667085;font-size:13px}
.playerList{max-height:52vh;overflow:auto}
.player{display:flex;align-items:center;border-bottom:1px solid #eef1f6;padding:10px 3px;gap:10px}
.player:hover{background:#f7f9fc}
.player button{padding:7px 12px}
.playerInfo{display:flex;flex:1 1 auto;min-width:0;align-items:center;gap:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player input[type="text"]{flex:none}
.player .pillToggle{flex:none;width:80px;justify-content:flex-end}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:800;flex:none;font-family:'Oswald',sans-serif;letter-spacing:.5px;box-shadow:inset 0 0 0 1.5px #ffffff40}
.board{overflow:auto}
.board table{border-collapse:collapse;min-width:700px;width:100%}
th,td{border:1px solid #dde3ee;padding:7px;font-size:12px}
th{background:#0b1f3a;color:#fff;font-weight:700;font-family:'Oswald',sans-serif;letter-spacing:.3px}
.playerList thead th{position:sticky;top:0;z-index:2}
.current{outline:3px solid #e0263d;background:#fff6d8}
.nextUp{outline:2px dashed #1d6fdc;background:#eaf2ff}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 8px}
.tabs button{background:#e8eef6;color:#0b1f3a;border-radius:99px;padding:9px 16px;white-space:nowrap}
.tabs button.active{background:#0b1f3a;color:#fff}
.tabs button.adminTabBtn.active{background:#e0263d}
.notice{padding:10px;background:#eef6ff;border-radius:8px}
.sectionHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-left:10px;border-left:4px solid #e0263d}
.sectionHead h3{margin:0;font-size:15px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.4px}
.adminRow{display:flex;align-items:center;gap:8px;padding:9px 3px;border-bottom:1px solid #eef1f6}
.teamBlock{border-bottom:1px solid #eef1f6;padding:4px 0}
.teamBlock .adminRow.noBorder{border-bottom:0;padding:4px 3px}
.adminRow input[type=text]{width:auto;flex:1}
.adminRow button{padding:7px 10px;font-size:12px}
.pillToggle{display:flex;gap:6px;align-items:center;font-size:12px;color:#667085}
#onClock{font-size:21px;font-weight:800;display:flex;align-items:center}
.queueBox{border:1px solid #dde3ee;border-radius:12px;padding:12px;margin-bottom:14px;background:#f9fbfd}
.upcomingStrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.upcomingStop{flex:none;min-width:88px;text-align:center;border-radius:10px;padding:8px 6px;background:#f4f6fb;border:1px solid #dde3ee}
.onlineDot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;background:#2fbf6e;box-shadow:0 0 0 2px #ffffffa0;vertical-align:middle}
.onlineDot.offline{background:#c9d0da;box-shadow:none}
th .onlineDot{margin-right:4px}
.scoreRow{border:1px solid #dde3ee;border-radius:12px;padding:10px 12px;margin-bottom:10px}
.scoreRow.live{border-color:#e0263d;box-shadow:0 0 0 2px #e0263d22}
.scoreTeam{display:flex;align-items:center;gap:8px;padding:3px 0}
.scoreTeam img{width:22px;height:22px;object-fit:contain;flex:none}
.scoreTeam span{flex:1;font-weight:600}
.scoreTeam b{font-family:'Oswald',sans-serif;font-size:16px}
.posBattle{margin-top:10px;padding-top:8px;border-top:1px dashed #dde3ee}
.posBattleHead{display:grid;grid-template-columns:64px 1fr 1fr;gap:6px;font-size:11px;font-weight:700;color:#667085;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.posBattleHead span:nth-child(2),.posBattleHead span:nth-child(3){text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.posBattleRow{display:grid;grid-template-columns:64px 1fr 1fr;gap:6px;align-items:center;padding:3px 0;font-size:12px;border-top:1px solid #f3f5f9}
.posBattleLabel{font-weight:700;color:#177245}
.posBattleSide{display:flex;justify-content:space-between;align-items:center;gap:6px;overflow:hidden}
.posBattleSide span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#475467}
.posBattleSide b{font-family:'Oswald',sans-serif;flex:none}
.posBattleSide.posWin{background:#e6f6ec;border-radius:6px;padding:1px 4px}
.posBattleSide.posWin b,.posBattleSide.posWin span{color:#0f7a3d}
.scoreTickerBar{overflow:hidden;white-space:nowrap;background:#081833;border-top:1px solid #1c3a63}
.scoreTickerTrack{display:inline-block;padding-left:100%;animation:ticker 40s linear infinite;color:#cfe0ff;font-size:12px;font-weight:700;letter-spacing:.2px;padding-top:5px;padding-bottom:5px}
.scoreTickerTrack span{margin-right:32px}
.scoreTickerBar:hover .scoreTickerTrack{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(max-width:760px){.scoreTickerTrack{font-size:11px}}
@media(max-width:760px){
  .grid{grid-template-columns:1fr}
  .wrap{padding:9px}
  .clock{font-size:28px}
  header h1{font-size:16px}
}
.scoringRules{margin-top:14px;border-top:1px solid #e5e9ef;padding-top:10px}
.scoringRules summary{cursor:pointer;font-weight:700;color:#177245;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.scoringRules table{margin-top:8px;border-collapse:collapse;font-size:13px}
.scoringRules td{padding:3px 14px 3px 0;color:#0b1f3a}
.scoringRules td:last-child{font-weight:700;text-align:right;padding-right:0}