/* UI_SPEC A2: five equal cells; identical clipped text on each background. */
html body .opening-button {
 position:relative!important;isolation:isolate;overflow:hidden!important;
 width:168px!important;height:40px!important;min-height:40px!important;
 padding:0!important;border:0!important;border-radius:999px!important;
 background:var(--ui-primary,#111)!important;color:var(--ui-on-primary,#fff)!important;white-space:nowrap!important;
 font-size:14px!important;font-weight:600!important;transition:opacity .2s ease!important;
}
html body .opening-button::after{display:none!important}
html[data-web-public] body header[data-web-header] [data-arena-account] button.web-account-button.opening-button,
html body dialog.web-full-menu[data-web-drawer] button.web-full-primary.opening-button{background:var(--ui-primary,#111)!important;color:var(--ui-on-primary,#fff)!important}
html body .opening-button-label,html body .opening-button-ink {
 position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;
 height:40px!important;line-height:40px!important;margin:0!important;padding:0!important;
 color:var(--ui-on-primary,#fff)!important;font-size:14px!important;font-weight:600!important;
}
html body .opening-button-fill {
 position:absolute;inset:0 auto 0 0;width:0;overflow:hidden;
 background:color-mix(in srgb,#B8FF3D 82%,#111);
 transition:width .45s cubic-bezier(.2,.8,.2,1);pointer-events:none;
}
html body .opening-button-ink{width:var(--opening-ink-width,168px)!important;color:#111!important}
html body .opening-button-ticks {
 position:absolute;inset:0;pointer-events:none;
 background:repeating-linear-gradient(90deg,transparent 0 calc(var(--opening-cell-width,20%) - 1px),rgba(127,127,127,.38) calc(var(--opening-cell-width,20%) - 1px) var(--opening-cell-width,20%));
}
html body .opening-button:not(.opening-button-member) .opening-button-ticks{display:none}
html body .opening-button-fading{opacity:0!important;pointer-events:none!important}
html body .opening-button[hidden]{display:none!important}
/* Reserve the completed CTA's slot: bell and avatar never move. */
html body [data-web-header] .web-primary-slot{width:168px;min-width:168px;flex:0 0 168px}
html body dialog.web-full-menu[data-web-drawer] button.web-full-primary.opening-button{width:calc(100% - 40px)!important}
html body dialog.web-full-menu[data-web-drawer] button.web-full-primary.opening-button :is(.opening-button-label,.opening-button-ink){height:48px!important;line-height:48px!important}
@media(max-width:540px){
 html body [data-web-header] .web-primary-slot{width:148px;min-width:148px;flex-basis:148px}
 html body [data-web-header] .opening-button{width:148px!important}
}
@media(prefers-reduced-motion:reduce){html body .opening-button,html body .opening-button-fill{transition:none!important}}
/* Timing and light sweep from the owner's playable 2026-10-06 sample. */
html body .opening-button :is(.opening-button-label,.opening-button-ink){transition:opacity 180ms,transform 180ms}
html body .opening-button-swap :is(.opening-button-label,.opening-button-ink){opacity:0;transform:translateY(6px);transition-duration:150ms}
html body .opening-button-glow{position:absolute;top:0;bottom:0;width:var(--opening-cell-width,20%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);opacity:0;pointer-events:none}
html body .opening-button-pulse .opening-button-glow{animation:opening-cell-glow 600ms ease-out}
@keyframes opening-cell-glow{0%{opacity:0;transform:translateX(-60%)}40%{opacity:1}100%{opacity:0;transform:translateX(60%)}}
@media(prefers-reduced-motion:reduce){html body .opening-button-glow{animation:none!important}html body .opening-button :is(.opening-button-label,.opening-button-ink){transition:none!important}}

/* 2026-10-07 theme audit: in the workspace header (night) the pill became light while its label stayed white. */
html body .web-account-button.opening-button,html body [data-web-header] .opening-button{background:var(--ui-primary,#111)!important;color:var(--ui-on-primary,#fff)!important}

/* opening-liquid-v1 (owner 2026-10-08, accepted prototype): once signed in, the bar is a sunken well with a rim and the progress
   is a raised liquid in brand green that fills from the left; two drops reach ahead of its front edge and a light band keeps
   crossing it from left to right. Text sits on the bar and darkens where the liquid is under it. Guests keep the black button. */
html body .opening-button.opening-button-member:not(#_):not(#_){background:var(--bb-theme-inset,#e6e6ea)!important;color:var(--bb-theme-ink,#111)!important;border:0!important;box-shadow:inset 0 2px 4px rgba(17,17,19,.22),inset 0 -1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.7),0 1px 0 2px rgba(17,17,19,.06)!important}
html[data-bigbit-theme=dark] body .opening-button.opening-button-member:not(#_):not(#_){background:#111114!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.1),0 1px 0 2px rgba(0,0,0,.5)!important}
html[data-bigbit-skin=glass] body .opening-button.opening-button-member:not(#_):not(#_){background:var(--glass-bg-soft)!important;box-shadow:var(--glass-press),0 0 0 1px var(--glass-edge-soft)!important}
html body .opening-button.opening-button-member:not(#_):not(#_) .opening-button-label{color:var(--bb-theme-ink,#111)!important;z-index:1}
html body .opening-button.opening-button-member:not(#_):not(#_) .opening-button-fill{inset:3px auto 3px 3px!important;max-width:calc(100% - 6px);border-radius:999px;z-index:1;background:linear-gradient(180deg,#d8ff8a 0%,#b8ff3d 42%,#a2e62a 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 2px rgba(50,80,0,.28),0 2px 5px -1px rgba(17,17,19,.35);transition:width .9s cubic-bezier(.3,1.5,.5,1)}
html body .opening-button.opening-button-member:not(#_):not(#_) .opening-button-ink{inset:-3px auto auto -3px!important;color:#1a2600!important}
html body .opening-button.opening-button-member:not(#_):not(#_) .opening-button-ticks{display:block!important;inset:auto!important;top:50%!important;left:calc(var(--opening-pct,0%) - 13px)!important;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#b0f536!important;z-index:0;transition:left .9s cubic-bezier(.3,1.5,.5,1)}
html body .opening-button.opening-button-member:not(#_):not(#_) .opening-button-ticks::after{content:"";position:absolute;left:5px;top:7px;width:10px;height:10px;border-radius:50%;background:#b0f536}
html body .opening-button.opening-button-member:not(#_):not(#_):is([data-opening-completed="0"],[data-opening-completed=unknown]) .opening-button-ticks{display:none!important}
html body .opening-button.opening-button-member:not(#_):not(#_) .opening-button-glow{top:3px!important;bottom:3px!important;left:-56px;width:44px!important;opacity:0;z-index:2;border-radius:999px;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.25) 25%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.25) 75%,transparent)!important;filter:blur(1.5px);mix-blend-mode:soft-light}
@media(prefers-reduced-motion:no-preference){
html body .opening-button.opening-button-member:not(#_):not(#_) .opening-button-ticks{animation:opening-drip 2.6s ease-in-out infinite}
html body .opening-button.opening-button-member:not(#_):not(#_) .opening-button-ticks::after{animation:opening-drip 3.4s ease-in-out -1.2s infinite}
html body .opening-button.opening-button-member:not(#_):not(#_):not([data-opening-completed="0"]):not([data-opening-completed=unknown]) .opening-button-glow{animation:opening-sweep 2.6s cubic-bezier(.4,0,.2,1) infinite!important}
}
@media(prefers-reduced-motion:reduce){html body .opening-button.opening-button-member:not(#_):not(#_) :is(.opening-button-fill,.opening-button-ticks){transition:none!important}}
@keyframes opening-drip{0%,100%{transform:translate(0,0) scale(1)}35%{transform:translate(11px,-3px) scale(.8)}55%{transform:translate(14px,2px) scale(.6)}80%{transform:translate(3px,1px) scale(.95)}}
@keyframes opening-sweep{0%{left:-56px;opacity:0}8%{opacity:1}55%{opacity:1}68%,100%{left:calc(var(--opening-pct,0%) - 34px);opacity:0}}

/* compact-pull-guest-v1 (owner: "before sign-in it must look much the same"): the guest button uses the same rimmed well; inside
   it one raised pill fills the whole well in the primary colour, with the same travelling light. */
html body .opening-button:not(.opening-button-member):not(#_):not(#_){background:var(--bb-theme-inset,#e6e6ea)!important;border:0!important;box-shadow:inset 0 2px 4px rgba(17,17,19,.22),inset 0 -1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.7),0 1px 0 2px rgba(17,17,19,.06)!important}
html[data-bigbit-theme=dark] body .opening-button:not(.opening-button-member):not(#_):not(#_){background:#111114!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.1),0 1px 0 2px rgba(0,0,0,.5)!important}
html[data-bigbit-skin=glass] body .opening-button:not(.opening-button-member):not(#_):not(#_){background:var(--glass-bg-soft)!important;box-shadow:var(--glass-press),0 0 0 1px var(--glass-edge-soft)!important}
html body .opening-button:not(.opening-button-member):not(#_):not(#_) .opening-button-label{inset:3px!important;height:auto!important;line-height:1!important;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--ui-primary,#111) 78%,#fff) 0%,var(--ui-primary,#111) 46%,color-mix(in srgb,var(--ui-primary,#111) 88%,#000) 100%)!important;color:var(--ui-on-primary,#fff)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 2px rgba(0,0,0,.35),0 2px 5px -1px rgba(17,17,19,.4)}
html body .opening-button:not(.opening-button-member):not(#_):not(#_) .opening-button-fill{display:none!important}
html body .opening-button:not(.opening-button-member):not(#_):not(#_) .opening-button-glow{top:3px!important;bottom:3px!important;left:-56px;width:44px!important;opacity:0;z-index:2;border-radius:999px;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.2) 25%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.2) 75%,transparent)!important;filter:blur(1.5px);mix-blend-mode:soft-light}
@media(prefers-reduced-motion:no-preference){html body .opening-button:not(.opening-button-member):not(#_):not(#_) .opening-button-glow{animation:opening-sweep-full 3s cubic-bezier(.4,0,.2,1) infinite!important}}
@keyframes opening-sweep-full{0%{left:-56px;opacity:0}8%{opacity:1}60%{opacity:1}72%,100%{left:calc(100% + 12px);opacity:0}}

/* the header's guest "sign in / open account" control: same rimmed well, one raised pill inside, same travelling light */
html body header[data-web-header] button.web-login.web-auth-control:not(#_):not(#_){position:relative!important;isolation:isolate;overflow:hidden!important;background:var(--bb-theme-inset,#e6e6ea)!important;background-image:none!important;border:0!important;color:var(--ui-on-primary,#fff)!important;box-shadow:inset 0 2px 4px rgba(17,17,19,.22),inset 0 -1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.7),0 1px 0 2px rgba(17,17,19,.06)!important}
html[data-bigbit-theme=dark] body header[data-web-header] button.web-login.web-auth-control:not(#_):not(#_){background:#111114!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.1),0 1px 0 2px rgba(0,0,0,.5)!important}
html[data-bigbit-skin=glass] body header[data-web-header] button.web-login.web-auth-control:not(#_):not(#_):not(#_){background:var(--glass-bg-soft)!important;box-shadow:var(--glass-press),0 0 0 1px var(--glass-edge-soft)!important}
html body header[data-web-header] button.web-login.web-auth-control:not(#_):not(#_)::before{content:""!important;display:block!important;position:absolute!important;inset:3px!important;width:auto!important;height:auto!important;transform:none!important;opacity:1!important;animation:none!important;border-radius:999px;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--ui-primary,#111) 78%,#fff) 0%,var(--ui-primary,#111) 46%,color-mix(in srgb,var(--ui-primary,#111) 88%,#000) 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 2px rgba(0,0,0,.35),0 2px 5px -1px rgba(17,17,19,.4)}
html body header[data-web-header] button.web-login.web-auth-control:not(#_):not(#_)::after{content:""!important;display:block!important;position:absolute!important;top:3px!important;bottom:3px!important;right:auto!important;height:auto!important;width:44px!important;left:-56px;border-radius:999px;transform:skewX(-20deg)!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2) 25%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.2) 75%,transparent)!important;filter:blur(1.5px);mix-blend-mode:soft-light;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){html body header[data-web-header] button.web-login.web-auth-control:not(#_):not(#_)::after{animation:opening-sweep-full 3s cubic-bezier(.4,0,.2,1) infinite!important}}

/* opening-pill-clip-v1 (owner 2026-10-25, phone screenshot in night mode): the green liquid and its light band were drawn outside the
   capsule — WebKit does not clip composited children (box-shadow, blur, transforms) with overflow:hidden + border-radius alone. The pill
   now clips with a rounded clip-path as well; the liquid loses its outer drop shadow (it cannot show inside the well anyway) and keeps
   a full circle at the lowest step so 1/4 reads as a ball inside the capsule, not a bulge over its edge. */
html body .opening-button.opening-button-member:not(#_):not(#_){clip-path:inset(0 round 999px)!important;-webkit-clip-path:inset(0 round 999px)!important;overflow:hidden!important;transform:translateZ(0)}
html body .opening-button.opening-button-member:not(#_):not(#_) .opening-button-fill{min-width:34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 2px rgba(50,80,0,.28)!important}
html body .opening-button.opening-button-member:not(#_):not(#_) .opening-button-glow{filter:none!important}