/* GameOnSign display styles. Sizes scale with --u (set by JS: ~1% of the view/tile). */
:root { --bg:#07090d; --card:#121721; --card2:#1a2130; --line:#252e3f; --tx:#f4f6fa; --mut:#8b95a7; --live:#ff2d3d; --ok:#22c55e; --u:10px; --ac:#3b82f6; }
body.light { --bg:#e9edf3; --card:#ffffff; --card2:#f3f5f9; --line:#d5dbe5; --tx:#0d1220; --mut:#5b6577; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--tx);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; }
body.idle { cursor:none; }
.num { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }
#app { position:fixed; inset:0; }
.msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:var(--mut); font-size:22px; text-align:center; padding:20px; }
.msg a { color:var(--tx); }
.ctl { position:fixed; right:12px; bottom:12px; z-index:20; display:flex; gap:8px; transition:opacity .5s; }
.ctl button, .ctl a { width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(20,24,32,.72); color:#e5e7eb;
  display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:22px; cursor:pointer; padding:0; backdrop-filter:blur(4px); }
.ctl button:hover, .ctl a:hover { background:rgba(40,48,64,.9); }
body.light .ctl button, body.light .ctl a { background:rgba(255,255,255,.8); color:#1f2937; border-color:rgba(0,0,0,.15); }
body.idle .ctl { opacity:0; pointer-events:none; }
.ctl a.pill { width:auto; border-radius:22px; padding:0 16px 0 12px; gap:6px; font-size:16px; font-weight:700; letter-spacing:.02em; }
.ctl a.pill b { font-size:22px; font-weight:400; line-height:1; }
body.inframe .ctl, body.inframe .fsprompt { display:none !important; }
.fsprompt { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); cursor:pointer; }
.fsprompt div { display:flex; flex-direction:column; align-items:center; gap:10px; background:rgba(18,23,33,.95); border:1px solid #2b3446; border-radius:18px;
  padding:28px 40px; color:#fff; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.fsprompt b { font-size:56px; line-height:1; } .fsprompt span { font-size:24px; font-weight:800; } .fsprompt small { color:#9aa4b2; font-size:14px; }
.netdot { position:fixed; left:10px; bottom:10px; z-index:20; font-size:12px; color:#fbbf24; display:none; background:rgba(0,0,0,.5); padding:3px 8px; border-radius:10px; }
.netdot.on { display:block; }

/* ------------------------------------------------ single view */
.single { position:absolute; inset:0; display:flex; flex-direction:column; padding:calc(var(--u)*1.6); gap:calc(var(--u)*1.4);
  background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--ac) 28%, transparent), transparent 60%), var(--bg); }
.bar { display:flex; align-items:center; gap:calc(var(--u)*1.2); height:calc(var(--u)*6); flex:none; }
.bar img { height:100%; width:auto; }
.bar .tn { font-size:calc(var(--u)*3); font-weight:800; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar .lg { font-size:calc(var(--u)*1.6); font-weight:700; color:var(--mut); border:1px solid var(--line); border-radius:calc(var(--u)*.6); padding:0 calc(var(--u)*.7); }
.bar .sp { flex:1; }
.bar .clock { text-align:right; line-height:1.05; }
.bar .clock b { display:block; font-size:calc(var(--u)*3.4); font-weight:800; }
.bar .clock span { font-size:calc(var(--u)*1.5); color:var(--mut); text-transform:uppercase; letter-spacing:.08em; }
.hero { flex:1; min-height:0; position:relative; border-radius:calc(var(--u)*2); background:var(--card); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden; box-shadow: 0 0 0 0 transparent; }
.hero::before { content:""; position:absolute; left:0; right:0; top:0; height:calc(var(--u)*.7); background:linear-gradient(90deg, var(--ac), var(--ac2, var(--ac))); }
.on.hero { border-color:var(--live); box-shadow: 0 0 calc(var(--u)*3) color-mix(in srgb, var(--live) 45%, transparent), inset 0 0 calc(var(--u)*4) color-mix(in srgb, var(--live) 18%, transparent); }
.note { align-self:center; margin-top:calc(var(--u)*1.6); font-size:calc(var(--u)*1.8); font-weight:700; color:var(--ac); letter-spacing:.06em; text-transform:uppercase; }
.match { flex:1; min-height:0; display:grid; grid-template-columns: 1fr minmax(0,1.25fr) 1fr; align-items:center; padding:0 calc(var(--u)*2); }
.side { display:flex; align-items:center; justify-content:center; gap:calc(var(--u)*3); min-width:0; }
.side .tm { display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*.6); min-width:0; }
.match.scored { grid-template-columns: 1.3fr minmax(0,1fr) 1.3fr; }
.match.scored .side img { width:calc(var(--u)*16); height:calc(var(--u)*16); }
.side img { width:calc(var(--u)*19); height:calc(var(--u)*19); object-fit:contain; filter: drop-shadow(0 calc(var(--u)*.4) calc(var(--u)*1) rgba(0,0,0,.35)); }
.side .ab { font-size:calc(var(--u)*3.2); font-weight:900; letter-spacing:.04em; }
.side .nm { font-size:calc(var(--u)*1.6); color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.side .sc { font-size:calc(var(--u)*13); font-weight:900; line-height:1; }
.side.win .sc { color:var(--tx); } .side.lose .sc { color:var(--mut); }
.mid { text-align:center; display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*.8); min-width:0; }
.mid .at { font-size:calc(var(--u)*2.2); color:var(--mut); font-weight:700; }
.mid .day { font-size:calc(var(--u)*3); font-weight:800; }
.mid .time { font-size:calc(var(--u)*4.2); font-weight:900; }
.mid .venue { font-size:calc(var(--u)*1.6); color:var(--mut); max-width:100%; }
.mid .per { font-size:calc(var(--u)*4.6); font-weight:900; }
.mid .clk { font-size:calc(var(--u)*6); font-weight:900; }
.mid .det { font-size:calc(var(--u)*2.4); color:var(--mut); font-weight:700; }
.mid .fin { font-size:calc(var(--u)*5); font-weight:900; letter-spacing:.12em; }
.cd { display:flex; gap:calc(var(--u)*1); margin-top:calc(var(--u)*1); }
.cd div { background:var(--card2); border:1px solid var(--line); border-radius:calc(var(--u)*1); min-width:calc(var(--u)*8.2); padding:calc(var(--u)*.6) calc(var(--u)*.8); }
.cd b { display:block; font-size:calc(var(--u)*4.6); font-weight:900; line-height:1.05; }
.cd span { font-size:calc(var(--u)*1.1); color:var(--mut); letter-spacing:.14em; font-weight:700; }
.cap { font-size:calc(var(--u)*1.7); color:var(--mut); text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.flash .cd div { animation: blink .5s steps(2) infinite; border-color:var(--live); }
@keyframes blink { 50% { background:var(--live); color:#fff; } }
.sched { flex:none; display:flex; gap:calc(var(--u)*1); height:calc(var(--u)*10.5); }
.sched .g { flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:calc(var(--u)*1.2);
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr 1fr; align-items:center; column-gap:calc(var(--u)*.8); padding:calc(var(--u)*.8) calc(var(--u)*1); }
.sched .g img { grid-row:1 / span 2; width:calc(var(--u)*6.5); height:calc(var(--u)*6.5); object-fit:contain; }
.sched .g .t1 { font-size:calc(var(--u)*1.7); font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; align-self:end; }
.sched .g .t2 { font-size:calc(var(--u)*1.5); color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; align-self:start; }
.sched .g.post .t1::after { content:" ★"; color:var(--ac); }
.big-none { font-size:calc(var(--u)*3.4); font-weight:800; }

/* ------------------------------------------------ grid view */
.grid { position:absolute; inset:0; display:grid; gap:var(--gap,10px); padding:var(--gap,10px); }
.tile { position:relative; background:var(--card); border:1px solid var(--line); border-radius:calc(var(--u)*4); overflow:hidden; min-width:0; min-height:0;
  display:flex; flex-direction:column; padding:calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*3); }
.tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:calc(var(--u)*1.6); background:linear-gradient(180deg, var(--ac), var(--ac2, var(--ac))); }
.tile .hd { display:flex; align-items:center; gap:calc(var(--u)*2.4); font-size:calc(var(--u)*6.6); font-weight:800; white-space:nowrap; }
.tile .hd .lg { font-size:calc(var(--u)*4); color:var(--mut); border:1px solid var(--line); border-radius:calc(var(--u)*1.5); padding:0 calc(var(--u)*1.6); font-weight:700; }
.tile .hd .tn { overflow:hidden; text-overflow:ellipsis; flex:1; }
.tile.on { border-color:var(--live); box-shadow: 0 0 calc(var(--u)*6) color-mix(in srgb, var(--live) 40%, transparent), inset 0 0 calc(var(--u)*10) color-mix(in srgb, var(--live) 14%, transparent); }
.tile .bd { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1.3fr 1fr; align-items:center; }
.tile .s { display:flex; flex-direction:column; align-items:center; min-width:0; }
.tile .s img { width:calc(var(--u)*40); height:calc(var(--u)*40); object-fit:contain; }
.tile .s .ab { font-size:calc(var(--u)*7.5); font-weight:800; }
.tile .s .sc { font-size:calc(var(--u)*24); font-weight:900; line-height:1; }
.tile .s.lose .sc { color:var(--mut); }
.tile .m { text-align:center; display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*1.5); min-width:0; }
.tile .m .a { font-size:calc(var(--u)*8.5); font-weight:900; line-height:1.05; }
.tile .m .b { font-size:calc(var(--u)*5.6); color:var(--mut); font-weight:700; line-height:1.1; }
.tile .m .c { font-size:calc(var(--u)*13); font-weight:900; line-height:1; }
.tile .m .cap { font-size:calc(var(--u)*3.4); }
.tile .m .c { white-space:nowrap; }
.tile .m .c.long { font-size:calc(var(--u)*10); }
.tile.flash .m .c { animation: blink .5s steps(2) infinite; border-radius:calc(var(--u)*2); padding:0 calc(var(--u)*2); }
.tile .ft { font-size:calc(var(--u)*4.8); color:var(--mut); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ------------------------------------------------ links to schedules */
a.tolink, a.tlink { color:inherit; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.bar .tlink { display:flex; align-items:center; gap:calc(var(--u)*1.2); height:100%; min-width:0; }
a.tolink:hover .nm, a.tlink:hover .tn, a.g:hover .t1, a.hd:hover .tn { text-decoration:underline; text-underline-offset:.15em; }
a.g:hover { border-color:color-mix(in srgb, var(--ac) 60%, var(--line)); }
.tile .hd .sch { font-size:calc(var(--u)*3.6); font-weight:700; color:var(--mut); border:1px solid var(--line); border-radius:calc(var(--u)*1.5); padding:0 calc(var(--u)*1.6); transition:opacity .5s; }
body.idle .tile .hd .sch { opacity:0; }
.ctl #schedbtn svg { flex:none; }

/* ------------------------------------------------ phones / small screens: controls get their own bar, nothing overlaps */
@media (max-width: 720px), (max-height: 480px) {
  :root { --ctlh: 52px; }
  #app { bottom:calc(var(--ctlh) + env(safe-area-inset-bottom)); left:env(safe-area-inset-left); right:env(safe-area-inset-right); top:env(safe-area-inset-top); }
  .ctl { left:0; right:0; bottom:0; gap:6px; justify-content:center; align-items:center; padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:rgba(7,9,13,.94); border-top:1px solid #252e3f; opacity:1 !important; pointer-events:auto !important; }
  body.light .ctl { background:rgba(233,237,243,.96); border-top-color:#d5dbe5; }
  .ctl button, .ctl a { width:40px; height:40px; font-size:19px; flex:none; }
  .ctl a.pill { padding:0 12px 0 10px; font-size:14px; }
  .ctl #teamsbtn span { display:none; } .ctl #teamsbtn { width:40px; padding:0; }      /* icon-only, except the labeled Schedule button */
  .ctl #schedbtn { padding:0 14px 0 10px; }
  body.idle { cursor:auto; }
  body.idle .tile .hd .sch { opacity:1; }
  .netdot { bottom:calc(var(--ctlh) + 6px + env(safe-area-inset-bottom)); }
  /* single view: readable px sizes for the header and a horizontally scrolling upcoming-games strip */
  .single { padding:10px; gap:10px; }
  .bar { height:40px; } .bar .tn { font-size:19px; } .bar .lg { font-size:11px; padding:0 5px; border-radius:4px; }
  .bar .clock b { font-size:19px; } .bar .clock span { font-size:10px; }
  .sched { height:auto; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:2px; scrollbar-width:none; }
  .sched::-webkit-scrollbar { display:none; }
  .sched .g { flex:0 0 auto; width:min(62vw, 230px); min-height:62px; scroll-snap-align:start; border-radius:10px; padding:8px 10px; column-gap:8px; }
  .sched .g img { width:40px; height:40px; }
  .sched .g .t1 { font-size:14px; } .sched .g .t2 { font-size:12.5px; }
  .side .nm { font-size:12px; } .side .ab { font-size:16px; }
}
/* phone portrait: stack the scoreboard bigger */
@media (max-width: 720px) and (orientation: portrait) {
  .single .hero { min-height:0; }
  .mid .det, .mid .venue { font-size:12px; } .cap { font-size:11px; }
}
@media (max-width: 720px) and (orientation: portrait) {
  .side { flex-direction:column; gap:6px; } .side .tm { order:0; } .side .sc { order:1; }
  .match.scored .side img, .side img { width:calc(var(--u)*13); height:calc(var(--u)*13); }
  .side .sc { font-size:calc(var(--u)*11); }
  .match, .match.scored { grid-template-columns:1fr minmax(0,1.1fr) 1fr; padding:0 6px; }
  .mid .clk { font-size:calc(var(--u)*5); } .mid .per { font-size:calc(var(--u)*3.4); }
  .cd div { min-width:calc(var(--u)*6.6); } .cd b { font-size:calc(var(--u)*3.6); }
}
.bar .clock b { white-space:nowrap; }
@media (max-width: 720px), (max-height: 480px) { .tile .hd .sch { font-size:11px; padding:1px 7px; border-radius:6px; } .tile .hd .lg { font-size:10px; } }
/* grid tile menu (hover on desktop, ⋯ / long-press on touch) */
.tile .tmore, .tile .tmenu { position:absolute; top:6px; right:6px; z-index:6; }
.tile .tmore { width:30px; height:26px; border-radius:8px; border:1px solid var(--line); background:rgba(10,13,19,.82); color:#e5e9f0; font:700 16px/1 system-ui, sans-serif;
  display:none; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.tile .tmenu { display:flex; gap:3px; padding:4px; border-radius:11px; background:rgba(10,13,19,.94); border:1px solid #3b4a63; box-shadow:0 6px 20px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease; }
.tile .tmenu > * { height:32px; min-width:32px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border-radius:8px; border:0;
  background:#1a2130; color:#e5e9f0; font:600 13px/1 system-ui, sans-serif; text-decoration:none; cursor:pointer; white-space:nowrap; }
.tile .tmenu > * b { font-size:16px; font-weight:800; }
.tile .tmenu > *:hover, .tile .tmenu > *:focus-visible { background:#2a3448; outline:none; }
.tile .tmenu [data-act="rm"] { background:#3a1418; color:#fecaca; } .tile .tmenu [data-act="rm"]:hover { background:#5a1a20; }
.tile .tmenu [data-act="fav"].on b { color:#fbbf24; }
.tile .tmenu > *:disabled { opacity:.35; cursor:default; }
@media (hover:hover) and (pointer:fine) {
  .tile:hover .tmenu, .tile:focus-within .tmenu { opacity:1; pointer-events:auto; transform:none; }
  body.idle .tile .tmenu { opacity:0 !important; pointer-events:none !important; }
}
@media (hover:none), (pointer:coarse) {
  .tile .tmore { display:flex; } .tile.menuopen .tmore { display:none; }
  .tile .hd { padding-right:38px; }
  .tile.menuopen .tmenu { opacity:1; pointer-events:auto; transform:none; }
  .tile .tmenu > * { height:38px; min-width:38px; }
}
.tile.menuopen .tmenu { opacity:1; pointer-events:auto; transform:none; }
body.inframe .tile .tmore, body.inframe .tile .tmenu { display:none; }
.tile .ft .twin { color:#93c5fd; font-weight:700; }
#gtoast { position:fixed; left:50%; bottom:calc(var(--ctlh, 0px) + 18px); transform:translate(-50%, 20px); z-index:60; background:#111722; border:1px solid #3b4a63;
  color:#e5e9f0; border-radius:12px; padding:10px 12px 10px 16px; display:flex; align-items:center; gap:14px; font:500 15px/1.2 system-ui, sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:calc(100vw - 24px); }
#gtoast.show { opacity:1; pointer-events:auto; transform:translate(-50%, 0); }
#gtoast button { background:#fbbf24; color:#111; border:0; border-radius:8px; padding:7px 14px; font-weight:800; cursor:pointer; }