/* The Arena - shared by /a/ and /b/. Small HUD, nothing over the middle of the screen but a crosshair. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1d2a22;color:#eef2ea;
  font:13px/1.4 system-ui,-apple-system,sans-serif;overscroll-behavior:none;touch-action:none;
  -webkit-user-select:none;user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#loading{position:fixed;inset:0;z-index:100;background:#1d2a22;display:flex;align-items:center;justify-content:center;
  font:700 13px/1.4 system-ui,sans-serif;letter-spacing:.24em;color:#f0c08a;transition:opacity .5s}
#loading.off{opacity:0;pointer-events:none}

/* top right, under the shell's phone/settings icons: the shell's chips (top left) wrap to three rows on a phone */
#score{position:fixed;z-index:61;right:calc(8px + env(safe-area-inset-right));top:calc(62px + env(safe-area-inset-top));
  display:flex;gap:8px;align-items:center;background:rgba(14,18,20,.7);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:4px 12px;font:700 13px/1.2 system-ui,sans-serif;pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#score .ta{color:#f6a56c}#score .tb{color:#7cc4ec}#score b{color:#fff;font-size:15px}#score .sep{opacity:.5}
#mine{position:fixed;z-index:61;right:calc(10px + env(safe-area-inset-right));top:calc(94px + env(safe-area-inset-top));text-align:right;
  font:600 10.5px/1.2 system-ui,sans-serif;color:rgba(238,242,234,.8);white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* crosshair: a thin ring and a dot */
#cross{position:fixed;z-index:50;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
#cross::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#fff}
#flash,#tagged{position:fixed;z-index:51;left:50%;top:calc(50% + 26px);transform:translateX(-50%);font:800 14px/1.2 system-ui,sans-serif;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
#flash.on,#tagged.on{opacity:1}
#tagged{top:calc(50% + 46px);font-weight:700;font-size:12.5px;background:rgba(14,18,20,.6);padding:4px 10px;border-radius:8px}

/* the seam panel: counter + the last 4 events (ball crossings, tags). Bottom-left, small. */
#hudSeam{position:fixed;z-index:60;left:calc(8px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));
  max-width:min(330px,calc(100vw - 112px));background:rgba(14,18,20,.66);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:6px 10px 8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
#hudSeam #hb-top{min-height:34px!important;font-size:12px!important}
#hudSeam a,#hudSeam button{pointer-events:auto}
#counter{font-weight:600;font-size:12px;color:#eef2ea;margin:1px 0 4px}
#counter b{color:#f0c08a}
#seamLog{font:10.5px/1.45 ui-monospace,Menlo,Consolas,monospace;color:#d6dfd2;opacity:.95}
#seamLog div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the shell: the use button is the trigger ("Fire"); its prompt text is not needed; no jump or duck here */
.hbs-prompt{display:none!important}
.hbs-act:not(.go){display:none!important}
body .hbs-act.go{background:rgba(240,122,43,.92);color:#1b0d04;font-size:15px}
html[data-zone="b"] body .hbs-act.go{background:rgba(31,155,214,.92);color:#04121b}

/* team mode: Jaron's orders to his AI teammate (owner only). Closed: one small pill under the score. Open: a narrow
   panel at the right edge, below the score, never over the middle of the view; it closes itself after an order. */
#ordBtn{position:fixed;z-index:62;right:calc(8px + env(safe-area-inset-right));top:calc(114px + env(safe-area-inset-top));
  height:26px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(14,18,20,.62);color:#eef2ea;
  font:700 11.5px/1 system-ui,sans-serif;letter-spacing:.02em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);touch-action:manipulation}
html[data-zone] #ordBtn.on{background:rgba(240,192,138,.92);color:#1b1206}
#ord{position:fixed;z-index:62;right:calc(8px + env(safe-area-inset-right));top:calc(146px + env(safe-area-inset-top));width:186px;
  display:none;padding:6px;border-radius:12px;background:rgba(14,18,20,.72);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);touch-action:manipulation}
#ord.on{display:block}
#ord .chips{display:grid;grid-template-columns:1fr 1fr;gap:4px}
#ord button{height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#eef2ea;
  font:600 11.5px/1 system-ui,sans-serif;padding:0 4px;white-space:nowrap}
#ord button:active{background:rgba(240,192,138,.4)}
#ordForm{display:flex;gap:4px;margin-top:5px}
#ordIn{flex:1;min-width:0;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35);color:#fff;
  font:16px/1 system-ui,sans-serif;padding:0 7px;-webkit-user-select:text;user-select:text}   /* 16px: iPhone does not zoom in */
#ordForm button{width:46px;flex:none}
#ordHint{position:fixed;z-index:62;left:50%;top:calc(62px + env(safe-area-inset-top));transform:translateX(-50%);max-width:calc(100vw - 150px);
  padding:4px 10px;border-radius:8px;background:rgba(14,18,20,.66);color:#f0c08a;font:700 11.5px/1.3 system-ui,sans-serif;text-align:center;
  opacity:0;transition:opacity .2s;pointer-events:none}
#ordHint.on{opacity:1}

/* ---- watching: the Watch pill, the player picker, the spectator hint, name tags ---- */
#pills{position:fixed;z-index:62;right:calc(8px + env(safe-area-inset-right));top:calc(114px + env(safe-area-inset-top));
  display:flex;flex-direction:row-reverse;gap:6px;align-items:center}
#pills #ordBtn{position:static}
#watchBtn{height:26px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(14,18,20,.62);color:#eef2ea;
  font:700 11.5px/1 system-ui,sans-serif;letter-spacing:.02em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);touch-action:manipulation}
#watchBtn[aria-pressed="true"]{background:rgba(240,192,138,.92);color:#1b1206}
#watchBar{display:none;position:fixed;z-index:63;left:0;right:0;bottom:0;gap:6px;overflow-x:auto;overflow-y:hidden;
  padding:10px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  background:linear-gradient(rgba(10,14,16,0),rgba(10,14,16,.72));-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none}
#watchBar::-webkit-scrollbar{display:none}
body.arena-watch #watchBar{display:flex}
#watchBar button,#watchBar a{flex:none;display:flex;align-items:center;gap:7px;min-height:48px;min-width:48px;padding:0 14px;border-radius:14px;
  border:2px solid rgba(255,255,255,.18);background:rgba(14,18,20,.82);color:#eef2ea;font:700 15px/1 system-ui,sans-serif;text-decoration:none;
  touch-action:manipulation;cursor:pointer}
#watchBar .on{border-color:#fff;background:rgba(240,192,138,.95);color:#1b1206}
#watchBar .play{background:rgba(240,122,43,.92);color:#1b0d04;border-color:transparent}
html[data-zone="b"] #watchBar .play{background:rgba(31,155,214,.92);color:#04121b}
#watchBar .out{opacity:.62}
#watchBar .k{font:800 11px/1 ui-monospace,Menlo,Consolas,monospace;opacity:.6}
#watchBar .k:empty{display:none}
#watchBar .d{width:12px;height:12px;border-radius:50%;background:var(--tc);flex:none}
#watchBar .n{max-width:9.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#watchBar .s{font:600 11px/1 system-ui,sans-serif;opacity:.75}
#watchHint{position:fixed;z-index:62;left:50%;bottom:calc(176px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:calc(100vw - 32px);
  padding:5px 11px;border-radius:8px;background:rgba(14,18,20,.7);color:#f0c08a;font:700 12px/1.3 system-ui,sans-serif;text-align:center;
  opacity:0;transition:opacity .3s;pointer-events:none}
#watchHint.on{opacity:1}
body.arena-watch #cross,body.arena-watch #mine,body.arena-watch .hbs-actions,body.arena-watch .hbs-stick{display:none!important}
body.arena-watch #hudSeam{bottom:calc(76px + env(safe-area-inset-bottom))}
@media (max-width:520px){body.arena-watch #seamLog div:nth-child(-n+2){display:none}}   /* a phone keeps the last 2 lines */

#tags{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap;
  transform-origin:50% 100%;will-change:transform,opacity;transition:opacity .25s}
.tag .row{display:flex;align-items:center;gap:5px;padding:2px 9px 2px 3px;border-radius:999px;background:rgba(14,18,20,.8);
  border:2px solid var(--tc);font:700 13px/1.2 system-ui,-apple-system,sans-serif;color:#f6f4ee;max-width:44vw;
  box-shadow:0 1px 4px rgba(0,0,0,.35)}
.tag .tl{flex:none;width:18px;height:18px;border-radius:50%;background:var(--tc);color:#101418;font:800 11px/18px system-ui,sans-serif;text-align:center}
.tag .nm{overflow:hidden;text-overflow:ellipsis}
.tag .ai{flex:none;background:#e8c98a;color:#2a2014;border-radius:5px;padding:1px 4px;font:800 9.5px/1.25 system-ui,sans-serif}
.tag .st{padding:1px 7px;border-radius:6px;background:rgba(14,18,20,.72);color:var(--tc);font:700 10.5px/1.25 system-ui,sans-serif;
  text-transform:lowercase;letter-spacing:.02em}
.tag.out .row{background:rgba(70,70,70,.85);border-color:#9aa0a4;color:#d8d8d8}
.tag.out .tl{background:#9aa0a4}
.tag.out .st{color:#e8e8e8;background:rgba(150,40,50,.8)}
.tag.sel .row{box-shadow:0 0 0 2px #fff,0 1px 6px rgba(0,0,0,.4)}
body.arena-watch .tag{pointer-events:auto;cursor:pointer}