/* Open Play header presentation only. Loaded after legacy layout rules. */
.openplay-app #openplayStickyHeader{
 position:sticky;top:0;z-index:40;box-sizing:border-box;width:100%;max-width:100%;
 margin:0 0 24px!important;padding:0!important;overflow:visible;
 background:#fff;border:0;border-bottom:1px solid #dce6e7;border-radius:0;
 box-shadow:0 4px 12px #163f4308;
}
.openplay-app #openplayStickyHeader .openplay-topbar{
 position:static!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
 gap:10px;min-height:0!important;height:auto!important;width:100%;box-sizing:border-box;
 margin:0!important;padding:16px 24px!important;border:0!important;border-bottom:1px solid #e5ecec!important;
 border-radius:0!important;background:#fff!important;box-shadow:none;backdrop-filter:none;overflow:visible;
}
#openplayStickyHeader .topbar-brand{flex:0 0 auto!important;margin-right:auto;min-width:0}
#openplayStickyHeader .topbar-session-title{display:none!important}
#openplayStickyHeader .ralliqo-logo-frame{width:138px;height:48px;max-width:100%;overflow:visible}
#openplayStickyHeader .ralliqo-logo{width:100%;height:auto;object-fit:contain}
#openplayStickyHeader .topbar-nav,#openplayStickyHeader .topbar-actions{align-items:center;gap:10px;margin:0}
#openplayStickyHeader .topbar-nav a,#openplayStickyHeader #headerGameModeTrigger,#openplayStickyHeader #organizerMenuTrigger{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
 min-height:42px;height:auto;padding:10px 13px;border:1px solid #d5e1e2;border-radius:9px;
 color:#172d31;background:#fff;font-size:13px;font-weight:500;line-height:20px;white-space:nowrap;box-shadow:none;
}
#openplayStickyHeader .topbar-nav svg,#openplayStickyHeader #organizerMenuTrigger svg{width:18px;height:18px;flex:0 0 18px}
#openplayStickyHeader .topbar-mode-wrap{display:block}
#openplayStickyHeader #setupAccountName{display:none!important}
#openplayStickyHeader .setup-account-controls:has(#setupAccountName:not([hidden])){display:none!important}
#openplayStickyHeader .setup-account-controls{order:4;flex:0 0 auto}
#openplayStickyHeader .setup-account-controls .auth-user{display:none!important}
#openplayStickyHeader .setup-account-controls .auth-bar{flex-wrap:nowrap}
.openplay-app #openplayStickyHeader #activeSessionSummary{
 display:flex;align-items:center;justify-content:space-between;gap:24px;
 width:100%;box-sizing:border-box;margin:0!important;padding:16px 24px!important;
 border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;overflow:visible;
}
#openplayStickyHeader .active-session-heading{display:flex!important;flex:0 0 auto;align-items:center!important;flex-direction:row!important;margin:0!important}
#openplayStickyHeader .active-session-title-row{display:flex;align-items:center;gap:9px}
#openplayStickyHeader .active-session-title-row h2{font-size:18px;font-weight:600;line-height:1.35;margin:0}
#openplayStickyHeader .active-live-badge{padding:4px 9px;border-radius:20px;font-size:10px;line-height:1.4;background:#def8f0;color:#075056;white-space:nowrap}
.openplay-app #openplayStickyHeader #sessionElapsed{font-size:12px;line-height:1.5;color:#607478;margin:5px 0 0}
.openplay-app #openplayStickyHeader .session-stat-grid{
 display:flex!important;flex:0 1 780px;align-items:stretch;gap:8px!important;min-width:0;
 margin:0!important;padding:0;overflow-x:auto;overscroll-behavior-x:contain;
}
.openplay-app #openplayStickyHeader .session-stat{
 display:flex!important;flex:1 0 90px;flex-direction:column!important;align-items:center!important;justify-content:center!important;
 box-sizing:border-box;gap:4px;min-height:64px;height:auto!important;min-width:90px;
 padding:10px 12px!important;border:0!important;border-radius:9px!important;background:#f2f7f7!important;
}
#openplayStickyHeader .session-stat strong{font-size:21px;font-weight:600;line-height:1.25;color:#172d31}
#openplayStickyHeader .session-stat span{font-size:11px;font-weight:400;line-height:1.4;color:#536b70;white-space:nowrap}
#openplayStickyHeader .organizer-menu,#openplayStickyHeader .header-mode-menu{z-index:60;max-width:calc(100vw - 32px)}
@media(max-width:1200px){
 .openplay-app #openplayStickyHeader .topbar-nav,.openplay-app #openplayStickyHeader .topbar-actions,.openplay-app #openplayStickyHeader .setup-account-controls{display:none!important}
 .openplay-app #openplayStickyHeader .mobile-menu-trigger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:42px;min-width:42px;height:42px;padding:0;border:1px solid #d5e1e2;border-radius:9px;background:#fff}
 #openplayStickyHeader .mobile-menu-trigger span{display:block;width:18px;height:2px;background:#173a3e;border-radius:2px}
 .openplay-app #openplayStickyHeader #activeSessionSummary{gap:16px}
 .openplay-app #openplayStickyHeader .session-stat-grid{flex:1}
 .openplay-app #openplayStickyHeader .session-stat{min-width:132px;flex-basis:132px}
}
@media(max-width:700px){
 .openplay-app #openplayStickyHeader{margin:0 0 16px!important}
 .openplay-app #openplayStickyHeader .openplay-topbar{padding:10px 14px!important}
 #openplayStickyHeader .ralliqo-logo-frame{width:112px;height:38px}
 .openplay-app #openplayStickyHeader #activeSessionSummary{display:block;padding:10px 14px 12px!important}
 #openplayStickyHeader .active-session-heading>div{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
 .openplay-app #openplayStickyHeader .active-session-heading{margin-bottom:9px!important}
 #openplayStickyHeader .active-session-title-row h2{font-size:14px}
 .openplay-app #openplayStickyHeader #sessionElapsed{font-size:10px;margin:0}
 .openplay-app #openplayStickyHeader .session-stat-grid{padding-bottom:2px;gap:6px!important}
 .openplay-app #openplayStickyHeader .session-stat{flex:0 0 auto;min-width:88px;min-height:50px;padding:7px 10px!important;gap:2px}
 #openplayStickyHeader .session-stat strong{font-size:16px}#openplayStickyHeader .session-stat span{font-size:10px}
}

/* Use the existing drawer at the header compact breakpoint as well. */
@media(min-width:701px) and (max-width:1200px){
body.mobile-drawer-open{overflow:hidden!important}
  /* Drawer */
  .mobile-drawer-backdrop{position:fixed;inset:0;z-index:4000;background:var(--surface);--control-ink:var(--text-primary);backdrop-filter:blur(2px)}
  .mobile-drawer-backdrop:not(.hidden){display:block}
  .mobile-app-drawer{
    display:flex;position:fixed;z-index:4010;top:0;right:0;bottom:0;width:min(88vw,360px);
    transform:translateX(105%);transition:transform .22s ease;background:var(--surface);--control-ink:var(--text-primary);color:var(--text-primary);
    border-left:1px solid var(--border-soft);box-shadow:-20px 0 48px var(--shadow-color);
    flex-direction:column;padding:0 0 env(safe-area-inset-bottom);visibility:hidden
  }
  .mobile-app-drawer.is-open{transform:translateX(0);visibility:visible}
  .mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 16px 14px;border-bottom:1px solid var(--border-soft)}
  .mobile-drawer-head h2{margin:2px 0 0;font-size:1.05rem}
  .mobile-drawer-kicker,.mobile-drawer-section-label{display:block;color:var(--success-text);font-size:.66rem;font-weight:900;letter-spacing:.09em}
  .mobile-drawer-close{width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;border:1px solid var(--border-soft);background:var(--surface);--control-ink:var(--text-primary);color:var(--text-primary);font-size:1.45rem;line-height:1}
  .mobile-drawer-scroll{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px 16px}
  .mobile-drawer-nav{display:grid;gap:4px}
  .mobile-drawer-item{width:100%;min-height:48px;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 11px;border:0;border-radius:11px;background:transparent;--control-ink:var(--text-primary);color:var(--text-primary);text-align:left;text-decoration:none;font:inherit;font-weight:750;box-sizing:border-box}
  .mobile-drawer-item:hover,.mobile-drawer-item:focus-visible{background:var(--surface-secondary);--control-ink:var(--text-primary);outline:none}
  .mobile-drawer-item>span:first-child{display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:1.02rem}
  .mobile-drawer-item>b{color:var(--text-secondary);font-size:1.15rem;transition:transform .18s ease}
  .mobile-drawer-item[aria-expanded="true"]>b{transform:rotate(90deg)}
  .mobile-session-details{margin:1px 4px 8px;padding:10px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface);--control-ink:var(--text-primary);display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mobile-session-details.hidden{display:none!important}
  .mobile-session-details div{min-width:0;padding:9px 10px;border-radius:9px;background:var(--surface);--control-ink:var(--text-primary)}
  .mobile-session-details span{display:block;color:var(--text-secondary);font-size:.68rem;font-weight:700}
  .mobile-session-details strong{display:block;margin-top:3px;color:var(--text-primary);font-size:.86rem;overflow-wrap:anywhere}
  .mobile-account-card{margin:14px 4px 10px;margin-top:auto;padding:13px;border:1px solid var(--border-soft);border-radius:13px;background:var(--surface);--control-ink:var(--text-primary);display:grid;gap:5px}
  .mobile-account-card>strong{margin-top:5px;font-size:.92rem}.mobile-account-card>span:not(.mobile-drawer-section-label){color:var(--text-secondary);font-size:.76rem}
  .mobile-drawer-account-action{margin-top:8px;min-height:44px;border-radius:10px;border:1px solid var(--border-soft);background:var(--surface);--control-ink:var(--text-primary);color:var(--text-primary);font-weight:800}
  .mobile-end-session{width:calc(100% - 8px);min-height:48px;margin:8px 4px 4px;padding:0 13px;display:flex;align-items:center;gap:10px;border-radius:11px;border:1px solid var(--danger-border);background:var(--danger-surface);--control-ink:var(--text-primary);color:var(--danger-text);font-weight:850}
  .mobile-end-session.hidden{display:none!important}


}
@media(min-width:701px) and (max-width:1200px){
 .openplay-app #openplayStickyHeader #activeSessionSummary{display:block!important}
 #openplayStickyHeader .active-session-heading>div{display:flex;align-items:center;gap:12px}
 .openplay-app #openplayStickyHeader .active-session-heading{margin-bottom:10px!important}
 .openplay-app #openplayStickyHeader #sessionElapsed{margin:0}
 .openplay-app #openplayStickyHeader .session-stat-grid{width:100%;overflow:visible}
 .openplay-app #openplayStickyHeader .session-stat{flex:1 1 0;min-width:0}
 #openplayStickyHeader .session-stat span{white-space:normal;text-align:center}
}

/* Header navigation: Home, Audience View, Settings. */
.openplay-app #openplayStickyHeader .topbar-mode-wrap{display:none!important}
#mobileSettingsMenu{min-width:0}
.mobile-settings-trigger{display:flex;align-items:center;gap:10px;min-height:48px;box-sizing:border-box;padding:10px 11px;border-radius:9px;cursor:pointer;color:#173a3e;font-size:14px;list-style:none}
.mobile-settings-trigger::-webkit-details-marker{display:none}
.mobile-settings-trigger>span:first-child{width:28px;font-size:19px;text-align:center}
.mobile-settings-trigger .settings-chevron{margin-left:auto;transition:transform .15s}
#mobileSettingsMenu[open] .settings-chevron{transform:rotate(180deg)}
#mobileSettingsMenu[open]>.mobile-settings-trigger{background:#edf7f5;color:#075056}
.mobile-settings-trigger:focus-visible{outline:2px solid #075056;outline-offset:2px}
.mobile-settings-content{display:grid;gap:4px;padding:4px 0 0}