/* HBWX: the dynasty site's TV weather channel (templates/league/_weather_channel.html in
   dynasty-league) as the whole page: a 1980s cable weather broadcast, full screen. */

* { box-sizing:border-box; }
html, body { height:100%; margin:0; overflow:hidden; background:#0a1446; }
body { font-family:'VT323', ui-monospace, monospace; color:#fff; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none; }
button { font:inherit; color:inherit; }

.wx { position:fixed; inset:0; overflow:hidden; background:#0a1446; touch-action:none; }
.wx canvas { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; }
.wx.grabbing canvas { cursor:grabbing; }

/* The header: logo, the orange title bar, and where you are. */
.wx-head { position:absolute; left:0; right:0; top:0; z-index:2; display:flex; align-items:flex-start; gap:12px; pointer-events:none;
  padding:max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
.wx-logo { flex:none; display:flex; flex-direction:column; justify-content:center; padding:3px 11px 4px; background:#1b3fb4; color:#fff;
  box-shadow:3px 3px 0 rgba(0,0,0,0.45), inset 0 -3px 0 #e3272d; transform:skewX(-10deg); }
.wx-logo b, .wx-logo small { transform:skewX(10deg); }
.wx-logo b { font-size:30px; line-height:0.9; letter-spacing:2px; font-style:italic; font-weight:400; }
.wx-logo small { font-size:11px; letter-spacing:1.5px; line-height:1; }
.wx-bar { padding:4px 16px 3px; font-size:28px; letter-spacing:2px; color:#0b1a5c; white-space:nowrap;
  background:linear-gradient(180deg, #ffd24a 0%, #f79a12 55%, #e8710a 100%); box-shadow:3px 3px 0 rgba(0,0,0,0.45); }
.wx.fcst .wx-bar { color:#fff; background:linear-gradient(180deg, #d65cff 0%, #9b2fd6 55%, #6c1aa8 100%); }
.wx-where { margin-left:auto; min-width:0; text-align:right; font-size:19px; line-height:1.1; color:#b9c9ff; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px #000, 0 0 3px rgba(0,0,0,0.9); }
.wx-where b { display:block; color:#fff; font-size:23px; font-weight:400; overflow:hidden; text-overflow:ellipsis; }

/* Zoom and locate, down the right edge. */
.wx-ctrl { position:absolute; z-index:2; right:max(14px, env(safe-area-inset-right)); top:calc(max(12px, env(safe-area-inset-top)) + 64px);
  display:flex; flex-direction:column; gap:8px; }
.wx-ctrl button { width:44px; height:44px; padding:0; font-size:30px; line-height:1; cursor:pointer; color:#fff;
  border:2px solid #ffc43b; background:linear-gradient(180deg, rgba(27,63,180,0.95), rgba(10,22,80,0.95)); box-shadow:3px 3px 0 rgba(0,0,0,0.5); }
.wx-ctrl button:active { transform:translate(2px, 2px); box-shadow:1px 1px 0 rgba(0,0,0,0.5); }
.wx-ctrl button:focus-visible, .wx-play:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.wx-ctrl svg { width:22px; height:22px; display:block; margin:auto; }
.wx-ctrl .layer[aria-pressed="false"] { color:rgba(255,255,255,0.45); border-color:rgba(255,196,59,0.45);
  background:linear-gradient(180deg, rgba(10,22,80,0.85), rgba(6,14,52,0.85)); }
.wx-ctrl .layer[aria-pressed="true"] { color:#0b1a5c; background:linear-gradient(180deg, #ffd24a 0%, #f79a12 55%, #e8710a 100%); }
.wx-ctrl .layer + #here { margin-top:8px; }

/* The timeline: play / pause, a tick per frame (past, NOW, FUTURECAST), the frame's time. */
.wx-foot { position:absolute; left:0; right:0; bottom:0; z-index:2; color:#c8d4ff;
  padding:10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background:linear-gradient(180deg, rgba(27,63,180,0.94), rgba(10,22,80,0.97)); border-top:2px solid #ffc43b; }
.wx-row { display:flex; align-items:center; gap:12px; }
.wx-play { flex:none; width:44px; height:36px; padding:0; font-size:20px; cursor:pointer; color:#0b1a5c; border:0;
  background:linear-gradient(180deg, #ffd24a 0%, #f79a12 55%, #e8710a 100%); box-shadow:2px 2px 0 rgba(0,0,0,0.5); }
.wx-track { flex:1; min-width:0; height:36px; display:flex; align-items:center; gap:2px; cursor:pointer; touch-action:none; }
.wx-track i { flex:1; height:14px; background:rgba(200,212,255,0.22); transition:height 0.15s; }
.wx-track i.ok { background:rgba(200,212,255,0.6); }
.wx-track i.now { background:rgba(255,255,255,0.4); height:22px; }
.wx-track i.now.ok { background:#fff; }
.wx-track i.fcst { background:rgba(214,92,255,0.3); }
.wx-track i.fcst.ok { background:#c45cf0; }
.wx-track i.on { height:32px; background:#ffc43b !important; box-shadow:0 0 6px #ffc43b; }
.wx-when { flex:none; min-width:11.5em; text-align:right; font-size:24px; color:#fff; white-space:nowrap; }
.wx-when b { font-weight:400; color:#b9c9ff; }
.wx-when b.now { color:#ffe14a; }
.wx-when b.fc { color:#e9a3ff; }
.wx-legend { margin-top:6px; font-size:18px; gap:4px 16px; flex-wrap:wrap; }
.wx-ramp { display:flex; align-items:center; gap:0; }
.wx-ramp i { display:block; width:18px; height:12px; }
.wx-ramp i.r1 { margin-left:8px; } .wx-ramp i.r7 { margin-right:8px; }
.r1 { background:#3ddc4a; } .r2 { background:#1fae32; } .r3 { background:#12802a; } .r4 { background:#f5e11b; }
.r5 { background:#f79a12; } .r6 { background:#e8321c; } .r7 { background:#d62bd6; }
.wx-cloudkey { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.wx-cloudkey i { width:30px; height:12px; background:linear-gradient(90deg, rgba(236,241,255,0.25), #ecf1ff); }
.wx-cloudkey:has(.wx-sat:empty) { display:none; }
.wx-src { margin-left:auto; font-size:15px; color:#8fa2e0; text-align:right; }

@media (max-width:700px) {
  .wx-head { gap:8px; }
  .wx-logo b { font-size:22px; } .wx-logo small { font-size:9px; }
  .wx-bar { font-size:19px; padding:3px 9px 2px; letter-spacing:1px; }
  .wx-where { font-size:15px; } .wx-where b { font-size:17px; }
  .wx-ctrl { top:calc(max(12px, env(safe-area-inset-top)) + 52px); }
  .wx-ctrl button { width:40px; height:40px; }
  .wx-when { min-width:0; font-size:19px; }
  .wx-play { width:40px; height:32px; }
  .wx-track { height:32px; gap:1px; }
  .wx-legend { font-size:15px; gap:10px; }
  .wx-ramp i { width:14px; }
  .wx-src { font-size:12px; }
}
/* Narrow phones: where you are moves under the title bar, the source line goes. */
@media (max-width:480px) {
  .wx-head { flex-wrap:wrap; }
  .wx-where { order:3; flex-basis:100%; text-align:left; margin:2px 0 0; }
  .wx-where b { display:inline; font-size:15px; margin-right:6px; }
  .wx-ctrl { top:calc(max(12px, env(safe-area-inset-top)) + 70px); }
  .wx-when { font-size:17px; }
  .wx-when b { display:block; font-size:14px; line-height:1; }
  .wx-src { display:none; }
}