@keyframes _pulseUpdate_nsq6t_1 {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(227, 179, 65, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(227, 179, 65, 0.25);
  }
}

._loading_nsq6t_11 {
  background: var(--bg-app);
  color: var(--muted);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

._root_nsq6t_20 {
  min-height: 100vh;
  color: var(--text);
  position: relative;
}

._rootNoBg_nsq6t_26 {
  background: linear-gradient(
    135deg,
    var(--bg-app) 0%,
    var(--bg-surface) 50%,
    var(--bg-app) 100%
  );
}

/* ── App background image layers ─────────────────────────────────── */
._appBgImg_nsq6t_36 {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
._appBgOverlay_nsq6t_43 {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    var(--bg-app) 0%,
    var(--bg-app) 35%,
    rgba(13, 17, 23, 0.82) 58%,
    rgba(13, 17, 23, 0.28) 82%,
    rgba(13, 17, 23, 0.05) 100%
  );
}

/* ── Non-WCO header ──────────────────────────────────────────────── */
/* Both .header and .wcoBar are always in the DOM; CSS picks which one to show.
   Display is controlled by JavaScript monitoring the media query
   (display-mode: window-controls-overlay) and applying the .wco class.
   This ensures immediate correct display without startup timing issues. */
._wcoBar_nsq6t_58 { display: none; }
._wcoOffset_nsq6t_63 { display: none; }

._wco_nsq6t_58 ._wcoBar_nsq6t_58 { display: flex; }
._wco_nsq6t_58 ._wcoOffset_nsq6t_63 { display: block; }
._wco_nsq6t_58 ._header_nsq6t_58 { display: none; }

._header_nsq6t_58 {
  background: var(--bg-header);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 13px 18px;
  position: sticky;
  top: 0;
  z-index: 100;
}
._headerInner_nsq6t_78 {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
._headerLeft_nsq6t_85 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
._title_nsq6t_91 {
  font-size: 17px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--link), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── WCO titlebar ────────────────────────────────────────────────── */
/* Display is controlled by JavaScript state; only layout props here */
._wcoBar_nsq6t_58 {
  position: fixed;
  top: env(titlebar-area-y, 0px);
  left: env(titlebar-area-x, 0px);
  width: env(titlebar-area-width, 100%);
  height: env(titlebar-area-height, 40px);
  z-index: 200;
  align-items: center;
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  -webkit-app-region: drag;
  gap: 8px;
  padding: 0 10px;
  user-select: none;
  overflow: hidden;
}
._wcoIcon_nsq6t_121 {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
  -webkit-app-region: no-drag;
}
._wcoTitle_nsq6t_128 {
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--link), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._wcoClock_nsq6t_140 {
  font-size: 11px;
  color: var(--muted);
  font-family: monospace;
  flex-shrink: 0;
  white-space: nowrap;
}
._wcoBtn_nsq6t_147 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  color: var(--text);
  font-family: inherit;
  flex-shrink: 0;
  -webkit-app-region: no-drag;
  transition: background 0.12s;
}
._wcoBtn_nsq6t_147:hover {
  background: rgba(255, 255, 255, 0.1);
}

._wcoOffset_nsq6t_63 {
  height: env(titlebar-area-height, 40px);
  padding-top: env(titlebar-area-y, 0px);
}

/* ── Shared header elements ──────────────────────────────────────── */
._clock_nsq6t_171 {
  font-size: 11px;
  color: var(--muted);
  font-family: monospace;
  flex-shrink: 0;
}
._actions_nsq6t_177 {
  display: flex;
  gap: 8px;
}
._main_nsq6t_181 {
  padding: 12px var(--page-m) 24px;
  max-width: 740px;
  margin: 0 auto;
  position: relative;
}
._noGames_nsq6t_187 {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

/* ── Header action buttons ───────────────────────────────────────── */
._btnRecord_nsq6t_194 {
  background: var(--bg-surface);
  border: 1px solid rgba(88, 166, 255, 0.27);
  border-radius: 8px;
  color: var(--link);
  padding: 7px 13px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
._btnSettings_nsq6t_205 {
  background: var(--bg-surface);
  border: 1px solid rgba(188, 140, 255, 0.27);
  border-radius: 8px;
  color: var(--purple);
  padding: 7px 13px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
._btnUpdate_nsq6t_216 {
  background: var(--bg-surface);
  border: 1px solid rgba(227, 179, 65, 0.4);
  border-radius: 8px;
  color: var(--warn);
  padding: 7px 10px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  animation: _pulseUpdate_nsq6t_1 2s ease-in-out infinite;
}

/* ── Post-update toast ───────────────────────────────────────────── */
._flashToast_nsq6t_229 {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--success, #2ea043);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  z-index: 9999;
  white-space: nowrap;
  animation:
    _flashIn_nsq6t_1 0.22s ease-out,
    _flashOut_nsq6t_1 0.3s ease-in 3.7s forwards;
  pointer-events: none;
}
@keyframes _flashIn_nsq6t_1 {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes _flashOut_nsq6t_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}