/* One-row game header only. Game navigation uses its original styles. */
.op-header {
  --op-header-side:94px;
  --op-logo-max:198px;
  --op-header-inset:0px;
  position:relative;
  z-index:650;
  display:grid;
  grid-template-columns:minmax(var(--op-header-side),1fr) minmax(0,var(--op-logo-max)) minmax(var(--op-header-side),1fr);
  align-items:center;
  gap:12px;
  box-sizing:border-box;
  padding-inline:var(--op-header-inset);
  margin-bottom:12px;
}
.op-header.is-guest-header {--op-header-side:60px}
.op-header-brand {grid-column:2;grid-row:1;justify-self:center;width:100%;min-width:0;margin:0;font:inherit;line-height:1}
.op-brand-link {display:block;width:100%;text-decoration:none}
.op-brand-logo {display:block;width:100%;height:auto}
.op-header-meta {grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-width:0;width:100%}
.op-brand-version {
  grid-column:1;
  grid-row:1;
  justify-self:start;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:3px 5px;
  border:1px solid rgba(132,167,208,.22);
  border-radius:5px;
  color:#9cb3cf;
  background:rgba(11,26,48,.65);
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.op-header-online {display:inline-flex;align-items:center;gap:5px;flex:none;overflow:visible}
.op-header-online-dot {display:block;flex:none;width:5px;height:5px;border-radius:50%;background:#61d99d;box-shadow:0 0 4px rgba(97,217,157,.25)}
.op-header-actions {grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:6px;min-width:0}
.op-user-menu {position:relative;flex:none;min-width:0}
.op-user-menu-trigger,.op-header .op-event-trigger {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-height:44px;
  flex:none;
  padding:0;
  box-sizing:border-box;
  border:1px solid rgba(120,154,202,.3);
  border-radius:11px;
  background:linear-gradient(180deg,#142842,#0c1b32);
  color:#dbeaff;
  cursor:pointer;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.op-user-menu-trigger::-webkit-details-marker {display:none}
.op-user-menu-trigger::marker {content:""}
.op-user-menu-trigger:hover,.op-user-menu[open] .op-user-menu-trigger,.op-header .op-event-trigger:hover,.op-header .op-event-trigger[aria-expanded="true"] {border-color:#75bfdc;background:#17344e;filter:none}
.op-event-signal {position:relative;display:grid;place-items:center;width:22px;height:22px}
.op-event-signal::before {content:"";position:absolute;inset:1px;border:1px solid rgba(89,170,255,.32);border-radius:50%}
.op-event-signal-dot {display:block;width:8px;height:8px;border-radius:50%;background:#52adff;box-shadow:0 0 8px rgba(62,157,255,.72);animation:op-event-signal-pulse 2.6s ease-in-out infinite}
@keyframes op-event-signal-pulse {
  0%,100% {transform:scale(.88);opacity:.65;box-shadow:0 0 5px rgba(62,157,255,.5)}
  50% {transform:scale(1.08);opacity:1;box-shadow:0 0 11px rgba(62,157,255,.85)}
}
.op-header .op-event-trigger .op-event-center-badge {position:absolute;top:-4px;right:-4px;box-sizing:border-box;min-width:16px;height:16px;padding:0 3px;border:1px solid #0c1b32;background:#80c2ff;color:#08203d;font-size:9px;line-height:1}
.op-menu-bars {display:grid;gap:5px;width:19px}
.op-menu-bars i {display:block;height:2px;border-radius:2px;background:currentColor}
.op-user-menu-panel {
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  z-index:710;
  width:286px;
  max-width:calc(100vw - 28px);
  max-height:calc(100dvh - 106px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:9px;
  box-sizing:border-box;
  border:1px solid rgba(109,158,211,.44);
  border-radius:14px;
  background:linear-gradient(145deg,#10243d,#09152a);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.op-user-menu:not([open]) .op-user-menu-panel {display:none}
.op-user-menu-heading {margin:4px 9px 7px;color:#93aac9;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.op-user-menu-links {display:grid;gap:3px}
.op-user-menu .op-user-menu-credits {width:100%;min-height:44px;box-sizing:border-box;justify-content:flex-start;margin:0 0 7px;padding:10px 11px;border-radius:9px;font-size:13px;white-space:normal}
.op-user-menu-item,.op-user-menu-logout button {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  padding:9px 11px;
  box-sizing:border-box;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#e1ebfa;
  font:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  text-align:left;
  text-decoration:none;
  overflow-wrap:anywhere;
}
a.op-user-menu-item:hover,.op-user-menu-logout button:hover {background:rgba(89,149,195,.13);text-decoration:none}
.op-user-menu-icon {display:block;flex:none;width:19px;height:19px;color:#92b7d7}
.op-user-menu-section {margin-top:7px;padding-top:7px;border-top:1px solid rgba(131,164,203,.17)}
.op-user-menu .op-twitch-linked-chip,.op-user-menu .op-twitch-connect-btn {width:100%;justify-content:flex-start;border-radius:9px;min-height:44px;box-sizing:border-box;box-shadow:none;white-space:normal;font-size:12px;line-height:1.4;padding:10px 11px}
.op-user-menu .op-twitch-linked-chip {display:flex;align-items:center;overflow-wrap:anywhere;gap:9px}
.op-user-menu .op-twitch-linked-dot {flex:none}
.op-user-menu .op-language-label {display:block;margin:3px 10px 6px;color:#9eb1cc;font-size:11px;font-weight:700}
.op-user-menu .lang-select-wrap {border-radius:9px;padding:0 10px;background:rgba(4,14,29,.56);min-width:0;gap:10px}
.op-user-menu .lang-select {min-height:44px;font-size:13px;padding:8px 0}
.op-user-menu .lang-select option {color:#e1ebfa;background:#10243d}
.op-user-menu-logout {margin:0}
.op-user-menu-logout button {width:100%;color:#efb4b6;cursor:pointer}
.op-header a:focus-visible,.op-header button:focus-visible,.op-user-menu summary:focus-visible,.op-user-menu select:focus-visible {outline:2px solid #79c9e2;outline-offset:3px}
.op-sr-only {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (min-width:701px) {
  .op-header {--op-header-inset:clamp(20px,3vw,32px)}
}
@media (max-width:700px) {
  .op-header {--op-logo-max:164px;gap:6px;margin-bottom:8px}
  .op-brand-version {font-size:9px;padding:3px 4px}
  .op-user-menu-panel {max-height:calc(100dvh - 90px)}
}
@media (max-width:360px) {
  .op-user-menu-panel {width:278px}
}
@media (prefers-reduced-motion:reduce) {
  .op-header * {scroll-behavior:auto;transition:none;animation:none}
}