/* Slip Surgeon app shell v1 (JB, Nov 1 2026, PREVIEW ONLY: build.py APP_SHELL_LIVE).
   Phone bottom tab bar (same look as the Waiting Room's), install hint, page transitions. Desktop unchanged. */
html{background:#061015}
.ab,.ss-a2hs,.ab-sheet{display:none}
/* ---- page transitions (cross-document View Transitions; Chrome 126+, Safari 18.2+) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ss-vt-out .14s ease-in both}
::view-transition-new(root){animation:ss-vt-in .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes ss-vt-out{to{opacity:0}}
@keyframes ss-vt-in{from{opacity:0;transform:translateY(10px)}}
::view-transition-group(ss-ab),::view-transition-group(ss-tray){animation-duration:0s}
::view-transition-old(ss-ab),::view-transition-new(ss-ab),::view-transition-old(ss-tray),::view-transition-new(ss-tray){animation:none}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

@media (max-width:759px){
  html[data-ab]{--abh:calc(60px + env(safe-area-inset-bottom))}
  html[data-ab] body{padding-bottom:calc(var(--abh) + 18px)!important}
  html[data-ab].st-on body{padding-bottom:calc(var(--abh) + 86px)!important}
  .ab{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9100;height:var(--abh);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background:rgba(6,16,21,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid #1E2A33;view-transition-name:ss-ab;box-sizing:border-box}
  .ab a,.ab button{flex:1;min-width:44px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#9DB1B6;
    font:600 11px/1 "Space Grotesk",system-ui,sans-serif;background:none;border:0;padding:0;margin:0;text-decoration:none;position:relative;cursor:pointer;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:color .15s}
  .ab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .12s}
  .ab a:active svg,.ab button:active svg{transform:scale(.88)}
  .ab [aria-current=page],.ab [aria-expanded=true]{color:#46DCC8}
  .ab [aria-current=page]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:0 0 2px 2px;background:#46DCC8}
  .ab i{position:absolute;top:5px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:#46DCC8;color:#061015;font:800 10.5px/17px "Space Grotesk",sans-serif;font-style:normal;text-align:center}
  .ab i[hidden]{display:none}
  .ab a:focus-visible,.ab button:focus-visible{outline:2px solid #46DCC8;outline-offset:-4px;border-radius:12px}
  /* everything that was pinned to the bottom now sits above the tab bar */
  html[data-ab] .stray{bottom:calc(var(--abh) + 8px);view-transition-name:ss-tray}
  html[data-ab] .cta{bottom:var(--abh)}
  html[data-ab] .swt,html[data-ab] .pickbar{bottom:calc(var(--abh) + 12px)}
  html[data-ab] .ss-au-toast{bottom:calc(var(--abh) + 14px)}
  html[data-ab] .wr-back-w{display:none!important}   /* the Chat tab replaces the "back to Waiting Room" pill */
  html[data-ab] .tp-panel{max-height:calc(100vh - env(safe-area-inset-top) - 84px - var(--abh))!important;max-height:calc(100dvh - env(safe-area-inset-top) - 84px - var(--abh))!important}
  /* install hint */
  .ss-a2hs{position:fixed;left:10px;right:10px;bottom:calc(var(--abh,0px) + 10px);z-index:9050;align-items:center;gap:12px;background:#0E1A26;border:1px solid rgba(70,220,200,.45);
    border-radius:16px;padding:10px 8px 10px 12px;box-shadow:0 14px 34px rgba(0,0,0,.55);font:400 13.5px/1.35 "Space Grotesk",system-ui,sans-serif;color:#9DB1B6;
    transform:translateY(12px);opacity:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
  html.st-on .ss-a2hs{bottom:calc(var(--abh,0px) + 86px)}
  .ss-a2hs.on{display:flex}.ss-a2hs.in{transform:none;opacity:1}
  .ss-a2hs img{width:42px;height:42px;border-radius:10px;flex:none}
  .ss-a2hs .t{flex:1;min-width:0}.ss-a2hs b{display:block;color:#F2F7F8;font-weight:700;font-size:14.5px;margin-bottom:2px}
  .ss-a2hs .sh{display:inline-block;width:15px;height:15px;vertical-align:-2px;stroke:#46DCC8;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .ss-a2hs button{min-height:44px;border-radius:12px;font:700 14px "Space Grotesk",system-ui,sans-serif;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .ss-a2hs .go{background:#46DCC8;color:#061015;border:0;padding:0 16px}
  .ss-a2hs .x{width:44px;flex:none;background:none;border:0;color:#9DB1B6;font-size:15px}
  .ss-a2hs button:active{transform:scale(.95)}
  /* small bottom sheet (tray tab when the tray is empty, etc.) */
  .ab-sheet{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.5);align-items:flex-end}
  .ab-sheet.on{display:flex}
  .ab-sheet>div{width:100%;box-sizing:border-box;background:#0B1220;border-top:1px solid rgba(70,220,200,.35);border-radius:20px 20px 0 0;padding:10px 18px calc(var(--abh,0px) + 14px);
    font:400 15px/1.45 "Space Grotesk",system-ui,sans-serif;color:#9DB1B6;animation:ab-up .22s cubic-bezier(.2,.8,.2,1);max-height:80vh;overflow-y:auto;overscroll-behavior:contain}
  .ab-sheet .gr{display:block;width:40px;height:5px;border-radius:3px;background:#2A3A44;margin:0 auto 12px}
  .ab-sheet h2{margin:0 0 6px;color:#F2F7F8;font-size:19px}
  .ab-sheet p{margin:0 0 14px}
  .ab-sheet .bt{display:flex;flex-direction:column;gap:8px}
  .ab-sheet .bt a,.ab-sheet .bt button{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;border:1px solid #1E2A33;background:#0E1A26;color:#F2F7F8;
    font:700 15px "Space Grotesk",system-ui,sans-serif;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .ab-sheet .bt .pri{background:#46DCC8;border-color:#46DCC8;color:#061015}
  .ab-sheet .bt a:active,.ab-sheet .bt button:active{transform:scale(.97)}
  @keyframes ab-up{from{transform:translateY(40px);opacity:.4}}
}
@media (max-width:759px) and (prefers-reduced-motion:reduce){.ss-a2hs,.ab svg{transition:none}.ab-sheet>div{animation:none}}
/* installed app: no browser chrome, so a touch more room up top is not needed (status bar style "black"); hide install UI */
@media (display-mode:standalone){.ss-a2hs{display:none!important}}

/* update toast (new service worker took over while the page was open) */
.ab-upd{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:9300;display:flex;align-items:center;gap:2px;max-width:calc(100vw - 24px);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;background:#0B1620;border:1px solid rgba(70,220,200,.45);border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.45);font:600 15px/1.2 'Space Grotesk',system-ui,sans-serif}
html[data-ab] .ab-upd{bottom:calc(var(--abh) + 14px)}
.ab-upd.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ab-upd button{background:none;border:0;color:#F2F7F8;font:inherit;cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent}
.ab-upd-go{display:flex;align-items:center;gap:10px;padding:0 6px 0 18px;white-space:nowrap}.ab-upd-x{width:44px;font-size:22px!important;color:#9DB1B6!important;border-radius:999px}
.ab-upd-dot{width:8px;height:8px;border-radius:50%;background:#46DCC8;box-shadow:0 0 0 4px rgba(70,220,200,.18)}
@media (prefers-reduced-motion:reduce){.ab-upd{transition:none}}

/* Slip Surgeon app shell batch 2 (JB Nov 1 2026, PREVIEW ONLY): placeholders, pull-to-refresh, quick-stats sheet, offline pill, swipe-to-remove */
.ss-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* gray loading placeholders */
.ss-skw{display:grid;gap:10px}
.ss-sk{position:relative;overflow:hidden;background:#0E1A26;border:1px solid #16232D;border-radius:14px;box-sizing:border-box}
.ss-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:ss-shim 1.3s ease-in-out infinite}
.ss-sk>i{display:block;height:12px;border-radius:6px;background:#17252F;margin:0 0 10px}
.ss-sk>i:nth-child(1){width:55%;height:16px}.ss-sk>i:nth-child(2){width:32%}.ss-sk>i:nth-child(3){width:78%}
.ss-sk-card{height:148px;padding:18px 16px}
.ss-sk-row{height:66px;padding:14px 14px}.ss-sk-row>i:nth-child(3){display:none}
tr.ss-skr td{padding:9px 6px!important;border:0!important;background:none!important}
tr.ss-skr .ss-sk{display:block;height:24px;border-radius:8px}
.ss-sk-slow{padding:16px;text-align:center;color:#9DB1B6}
@keyframes ss-shim{to{transform:translateX(100%)}}
/* pull to refresh indicator */
.ss-ptr{position:fixed;left:50%;top:0;z-index:9400;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:#0E1A26;border:1px solid rgba(70,220,200,.45);
  box-shadow:0 6px 18px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(-60px);box-sizing:border-box}
.ss-ptr svg{width:20px;height:20px;fill:none;stroke:#9DB1B6;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ss-ptr.arm svg,.ss-ptr.spin svg{stroke:#46DCC8}.ss-ptr.spin svg{animation:ss-spin .7s linear infinite}
.ss-ptr.back{transition:transform .2s ease,opacity .2s ease}
@keyframes ss-spin{to{transform:rotate(360deg)}}
/* offline pill */
.ss-off{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 78px);z-index:9300;display:none;align-items:center;gap:7px;padding:0 15px;min-height:36px;border-radius:999px;
  border:1px solid #F5B83D;background:rgba(14,26,38,.97);color:#F5B83D;font:700 13.5px "Space Grotesk",system-ui,sans-serif;box-shadow:0 8px 22px rgba(0,0,0,.45);cursor:pointer;
  white-space:nowrap;opacity:0;transform:translate(-50%,-8px);transition:opacity .2s,transform .2s;-webkit-tap-highlight-color:transparent}
.ss-off.on{display:inline-flex}.ss-off.in{opacity:1;transform:translate(-50%,0)}
.ss-off i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.ss-off span{color:#9DB1B6;font-weight:500}
.ss-off.ok{border-color:#46DCC8;color:#46DCC8}
/* undo toast (swipe-to-remove) */
.ss-ut{position:fixed;left:12px;right:12px;bottom:calc(var(--abh,0px) + 14px);z-index:9600;display:none;align-items:center;gap:10px;padding:6px 6px 6px 16px;border-radius:14px;
  background:#0E1A26;border:1px solid #2A3A44;color:#F2F7F8;font:500 14px "Space Grotesk",system-ui,sans-serif;box-shadow:0 12px 30px rgba(0,0,0,.55)}
.ss-ut.on{display:flex}.ss-ut span{flex:1}
.ss-ut button{min-height:44px;padding:0 16px;border-radius:10px;border:0;background:none;color:#46DCC8;font:700 14px "Space Grotesk",system-ui,sans-serif;cursor:pointer}
/* swipe a tray leg */
.stray .st-legs li{touch-action:pan-y}
.stray .st-legs li.ss-swp{animation:none;transition:none}
.stray .st-legs li.ss-back{transition:transform .18s ease,opacity .18s ease}
@media (max-width:759px){
  /* player quick stats sheet (uses the .ab-sheet frame) */
  .ss-qs .ey{margin:0 0 2px;color:#46DCC8;font:600 11.5px/1.3 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
  .ss-qs h2{margin:0 0 6px}
  .ss-qs h2:focus{outline:none}
  .ss-qs .stt{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid #2A3A44;font-size:12.5px;font-weight:700;color:#9DB1B6}
  .ss-qs .stt.ok{border-color:rgba(70,220,200,.5);color:#46DCC8}.ss-qs .stt.q{border-color:#F5B83D;color:#F5B83D}.ss-qs .stt.out{border-color:#FF6B6B;color:#FF6B6B}
  .ss-qs .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0 4px}
  .ss-qs .tiles>div{background:#0E1A26;border:1px solid #1E2A33;border-radius:12px;padding:8px 9px;min-height:62px;box-sizing:border-box}
  .ss-qs .tiles span{display:block;font-size:11.5px;color:#9DB1B6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ss-qs .tiles b{display:block;color:#F2F7F8;font-size:19px;line-height:1.25}
  .ss-qs .tiles small{display:block;font-size:11px;color:#6F858C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ss-qs h3{margin:14px 0 2px;color:#F2F7F8;font-size:15.5px}
  .ss-qs .mm{margin:0 0 8px;font-size:13px}
  .ss-qs .props{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
  .ss-qs .props li{display:flex;align-items:center;gap:8px;background:#0E1A26;border:1px solid #1E2A33;border-radius:12px;padding:8px 8px 8px 12px}
  .ss-qs .props li>div{flex:1;min-width:0}.ss-qs .props b{display:block;color:#F2F7F8;font-size:14.5px}
  .ss-qs .props small{display:block;font-size:12px;color:#9DB1B6}
  .ss-qs .props .add{display:flex;gap:6px;flex:none}
  .ss-qs .props .st-add{min-height:44px;min-width:64px;margin:0;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){.ss-sk::after{animation:none;display:none}.ss-ptr.spin svg{animation-duration:1.6s}.ss-off,.ss-ptr.back,.stray .st-legs li.ss-back{transition:none}}