/* 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; }