/* Sink-specific chrome reserves a quiet, predictable rectangle for both drain goals. */
#sinkGoalCaption { position:fixed; top:86px; left:50%; transform:translateX(-50%); z-index:9; max-width:calc(100% - 28px); padding:9px 20px; border:1px solid #ffc26880; border-radius:14px; background:#102431ef; color:#ffc268; text-align:center; pointer-events:none; font-family:'Segoe UI',Arial,sans-serif; box-shadow:0 6px 30px #06111b55; }
#sinkGoalCaption[hidden] { display:none; }
#sinkGoalCaption[data-team=B] { color:#8eeaff; border-color:#8eeaff80; }
#sinkGoalCaption strong { display:block; font-size:22px; line-height:1.15; font-weight:900; letter-spacing:1px; }
#sinkGoalCaption span { display:block; margin-top:4px; color:#e6f6ef; font-size:11px; font-weight:700; letter-spacing:1.5px; }
@media(max-width:600px) { #sinkGoalCaption { padding:7px 12px; } #sinkGoalCaption strong { font-size:17px; } #sinkGoalCaption span { font-size:9px; } }
@media(max-height:500px) and (min-width:501px) { #sinkGoalCaption { top:12px; max-width:calc(100% - 320px); padding:6px 10px; } #sinkGoalCaption strong { font-size:15px; } #sinkGoalCaption span { font-size:9px; letter-spacing:.5px; } }
body.sink-mode #hazardNotice { top:86px; bottom:auto; max-width:calc(100% - 24px); padding:6px 12px; border:1px solid #8adbe533; border-radius:20px; background:#102938ee; color:#c6e3e8; text-align:center; font:600 11px/1.4 'Segoe UI',Arial,sans-serif; }
body.sink-mode #hazardNotice[data-kind=meteor] { color:#ffd1a2; border-color:#ff9b5a80; }
body.sink-mode #hazardNotice[data-kind=lightning],body.sink-mode #hazardNotice[data-kind=water] { color:#b6f7ff; border-color:#8de4ee66; }
body.sink-mode #hazardNotice[data-kind=warning] { color:#ffedac; border-color:#ffdc8a80; }
body.sink-mode:not(.pixel-mode) #brand { display:none; }
body.sink-mode:not(.pixel-mode) #topbar { position:absolute; top:16px; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:160px 96px 160px; padding:0; border:1px solid #abc7d333; border-radius:12px; background:#102431f2; overflow:hidden; }
body.sink-mode:not(.pixel-mode) .scorebox { display:grid; grid-template-columns:1fr 28px; align-content:center; gap:4px; padding:10px 12px; min-width:0; max-width:none; background:transparent; border:0; border-bottom:3px solid #62dbe8; text-align:left; }
body.sink-mode:not(.pixel-mode) .scorebox.p1 { order:0; border-bottom-color:#ffc268; }
body.sink-mode:not(.pixel-mode) .scorebox.cpu { order:2; }
body.sink-mode:not(.pixel-mode) .scorebox .who { font:700 10px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.6px; color:#62dbe8; }
body.sink-mode:not(.pixel-mode) .scorebox.p1 .who { color:#ffc268; }
body.sink-mode:not(.pixel-mode) .scorebox .lab { font:600 9px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:0; color:#a6c1cd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.sink-mode:not(.pixel-mode) .scorebox .num { grid-column:2; grid-row:1/3; font:800 28px/1 'Segoe UI',Arial,sans-serif; color:#f0f5ed; }
body.sink-mode:not(.pixel-mode) #clockwrap { order:1; background:#0d1f2b; padding:8px 5px; }
body.sink-mode:not(.pixel-mode) #clock { font:700 24px/1.2 'Segoe UI',Arial,sans-serif; color:#ecf5ed; text-shadow:none; }
body.sink-mode:not(.pixel-mode) #maptag { font:700 8px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:1px; }
body.sink-mode:not(.pixel-mode) #pauseHint { display:none; }
body.sink-mode:not(.pixel-mode) #signalPip { margin:2px 0 0; font:700 8px/1.2 'Segoe UI',Arial,sans-serif; }
body.sink-mode:not(.pixel-mode) #clockwrap:has(#signalPip:not(.sig-hidden)) #maptag { display:none; }
body.sink-mode:not(.pixel-mode) #menuBtn { top:24px!important; right:20px!important; left:auto; min-height:44px; padding:0 14px; background:#102431f2; border:1px solid #abc7d344; border-radius:8px; font:700 11px 'Segoe UI',Arial,sans-serif; color:#dcebed; }
body.sink-mode:not(.pixel-mode) #boostBtn { width:126px; height:48px; margin:0; border:1px solid #ffc268; border-radius:8px; background:#102431f2; color:#ffc268; font:800 12px 'Segoe UI',Arial,sans-serif; }
body.sink-mode:not(.pixel-mode) #touch { bottom:22px; align-items:center; }
body.sink-mode:not(.pixel-mode) #boostHud { bottom:35px; width:200px; }
body.sink-mode:not(.pixel-mode) #boostHud .lab { font:700 10px/1.4 'Segoe UI',Arial,sans-serif; letter-spacing:1px; }
body.sink-mode:not(.pixel-mode) #boostBar { height:6px; border:0; border-radius:4px; overflow:hidden; }
body.sink-mode:not(.pixel-mode) #qcToggle { min-height:44px; padding:0 12px; border:1px solid #abc7d344; border-radius:8px; background:#102431f2; color:#c5dbe1; font:700 10px 'Segoe UI',Arial,sans-serif; }
body.sink-mode:not(.pixel-mode) #toast { font:800 19px/1.3 'Segoe UI',Arial,sans-serif!important; border-width:1px; text-shadow:none; }
@media(max-width:600px) {
  body.sink-mode:not(.pixel-mode) #topbar { left:12px; right:66px; transform:none; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); border-radius:8px; }
  body.sink-mode:not(.pixel-mode) .scorebox { padding:10px 7px; grid-template-columns:1fr 18px; }
  body.sink-mode:not(.pixel-mode) .scorebox .who { font-size:9px; }
  body.sink-mode:not(.pixel-mode) .scorebox .lab { font-size:8px; }
  body.sink-mode:not(.pixel-mode) .scorebox .num { font-size:24px; }
  body.sink-mode:not(.pixel-mode) #clock { font-size:21px; }
  body.sink-mode:not(.pixel-mode) #maptag { font-size:7px; letter-spacing:0; }
  body.sink-mode:not(.pixel-mode) #menuBtn { right:10px!important; padding:0 8px; font-size:9px; }
  body.sink-mode:not(.pixel-mode) #boostHud { width:calc(100% - 40px); bottom:90px!important; }
  body.sink-mode:not(.pixel-mode) #touch { padding:0 20px; bottom:max(20px,env(safe-area-inset-bottom)); }
  body.sink-mode #hazardNotice { font-size:10px; top:86px; width:max-content; }
  body.sink-mode.pixel-mode { --arena-top:118px; }
}
@media(max-height:500px) and (min-width:501px) {
  body.sink-mode:not(.pixel-mode) #topbar { top:16px; left:16px; width:124px; transform:none; grid-template-columns:1fr; }
  body.sink-mode:not(.pixel-mode) #menuBtn { left:auto!important; right:16px!important; top:16px!important; width:124px; }
  body.sink-mode:not(.pixel-mode) #clockwrap { padding:6px; }
  body.sink-mode #skillControls { display:grid; top:80px; bottom:auto; left:auto; right:16px; width:124px; transform:none; grid-template-columns:1fr 1fr; }
  body.sink-mode #skillControls button { padding:5px 2px; min-width:0; font-size:10px; }
  body.sink-mode #skillControls #specialBtn { min-width:0; }
  body.sink-mode.pixel-mode #pixelView { left:156px; top:0; width:calc(100% - 312px); height:100%; }
  body.sink-mode.pixel-mode #topbar { top:16px; left:16px; right:auto; width:124px; transform:none; grid-template-columns:1fr; }
  body.sink-mode.pixel-mode #clockwrap { padding:7px; }
  body.sink-mode.pixel-mode #menuBtn { top:16px!important; right:16px!important; width:124px; }
  body.sink-mode.pixel-mode #boostHud { left:auto; right:22px; bottom:88px; width:112px; transform:none; }
  body.sink-mode.pixel-mode #boostBtn,body.sink-mode.pixel-mode #qcToggle { width:124px; }
  body.sink-mode.pixel-mode #touch { bottom:16px; padding:0 16px; }
  body.sink-mode:not(.pixel-mode) #boostHud { left:auto; right:22px; bottom:88px!important; width:112px; transform:none; }
  body.sink-mode:not(.pixel-mode) #boostBtn,body.sink-mode:not(.pixel-mode) #qcToggle { width:124px; height:44px; }
  body.sink-mode:not(.pixel-mode) #touch { padding:0 16px; bottom:16px; }
  body.sink-mode #hazardNotice { top:auto; bottom:5px; max-width:calc(100% - 320px); font-size:10px; padding:4px 8px; }
}
@media(max-height:500px) and (min-width:501px) and (max-width:700px) {
  body.sink-mode:not(.pixel-mode) #topbar { left:8px; width:104px; }
  body.sink-mode:not(.pixel-mode) .scorebox { padding:9px 6px; }
  body.sink-mode:not(.pixel-mode) #menuBtn { right:8px!important; width:104px; }
  body.sink-mode:not(.pixel-mode) #skillControls { right:8px; width:104px; }
  body.sink-mode:not(.pixel-mode) #skillControls button { font-size:10px; }
  body.sink-mode:not(.pixel-mode) #boostBtn,body.sink-mode:not(.pixel-mode) #qcToggle { width:104px; }
  body.sink-mode:not(.pixel-mode) #qcToggle { padding:0 3px; font-size:9px; }
  body.sink-mode:not(.pixel-mode) #boostHud { right:14px; width:92px; }
  body.sink-mode:not(.pixel-mode) #touch { padding:0 8px; }
  body.sink-mode:not(.pixel-mode) #hazardNotice { max-width:calc(100% - 232px); }
  body.sink-mode:not(.pixel-mode) #sinkGoalCaption { max-width:calc(100% - 232px); }
}